@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
84 lines (82 loc) • 2.45 kB
JavaScript
const require_config = require('../../core/system/config.cjs');
const require_slider_style = require('../slider/slider.style.cjs');
//#region src/components/hue-slider/hue-slider.style.ts
const hueSliderStyle = require_config.defineComponentSlotStyle({
base: {
overlay: {
position: "absolute",
rounded: "{track-rounded}",
top: "0",
_horizontal: {
h: "full",
left: "calc({thumb-size} / 2 * -1)",
w: "calc(full + {thumb-size})"
},
_vertical: {
h: "calc(full + {thumb-size})",
top: "calc({thumb-size} / 2 * -1)",
w: "full"
}
},
root: {},
thumb: {
"--thumb-stroke": "colors.white",
borderWidth: "3px",
boxShadow: "md"
},
track: {
flex: "inherit",
_horizontal: {
ms: "calc({thumb-size} / 2)",
w: "calc(full - {thumb-size})"
},
_vertical: {
h: "calc(full - {thumb-size})",
mt: "calc({thumb-size} / 2)"
}
}
},
props: { shape: {
circle: { root: {
...require_slider_style.sliderStyle.props?.shape.circle.root,
"--track-rounded": "{thumb-rounded}"
} },
rounded: { root: {
...require_slider_style.sliderStyle.props?.shape.rounded.root,
"--track-rounded": "{thumb-rounded}"
} },
square: { root: {
...require_slider_style.sliderStyle.props?.shape.square.root,
"--track-rounded": "{thumb-rounded}"
} }
} },
sizes: {
xs: { root: {
"--thumb-size": require_slider_style.sliderStyle.sizes?.sm.root["--thumb-size"],
"--track-size": require_slider_style.sliderStyle.sizes?.sm.root["--thumb-size"]
} },
sm: { root: {
"--thumb-size": require_slider_style.sliderStyle.sizes?.sm.root["--thumb-size"],
"--track-size": require_slider_style.sliderStyle.sizes?.sm.root["--thumb-size"]
} },
md: { root: {
"--thumb-size": require_slider_style.sliderStyle.sizes?.md.root["--thumb-size"],
"--track-size": require_slider_style.sliderStyle.sizes?.md.root["--thumb-size"]
} },
lg: { root: {
"--thumb-size": require_slider_style.sliderStyle.sizes?.lg.root["--thumb-size"],
"--track-size": require_slider_style.sliderStyle.sizes?.lg.root["--thumb-size"]
} },
xl: { root: {
"--thumb-size": require_slider_style.sliderStyle.sizes?.lg.root["--thumb-size"],
"--track-size": require_slider_style.sliderStyle.sizes?.lg.root["--thumb-size"]
} }
},
defaultProps: {
size: "md",
shape: "circle"
}
});
//#endregion
exports.hueSliderStyle = hueSliderStyle;
//# sourceMappingURL=hue-slider.style.cjs.map