@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
69 lines (67 loc) • 2.22 kB
JavaScript
const require_config = require('../../core/system/config.cjs');
const require_slider_style = require('../slider/slider.style.cjs');
const require_hue_slider_style = require('../hue-slider/hue-slider.style.cjs');
//#region src/components/saturation-slider/saturation-slider.style.ts
const saturationSliderStyle = require_config.defineComponentSlotStyle({
base: {
root: {
aspectRatio: "16 / 9",
boxShadow: "inner",
isolation: "isolate",
maxW: "full",
p: "calc({thumb-size} / 2)",
rounded: "{root-rounded}",
touchAction: "none",
w: "full",
_readOnly: { layerStyle: "readOnly" },
_disabled: { layerStyle: "disabled" }
},
thumb: {
...require_slider_style.sliderStyle.base?.thumb,
...require_hue_slider_style.hueSliderStyle.base?.thumb,
boxSize: "{thumb-size}",
left: "{--x, 0%}",
position: "absolute",
rounded: "{thumb-rounded}",
top: "{--y, 0%}",
transform: "translate(-50%, -50%)"
},
track: {
boxSize: "full",
cursor: {
base: "pointer",
_readOnly: "default",
_disabled: "not-allowed"
},
position: "relative"
}
},
props: { shape: {
circle: { root: {
...require_slider_style.sliderStyle.props?.shape.circle.root,
"--root-rounded": "radii.l2"
} },
rounded: { root: {
...require_slider_style.sliderStyle.props?.shape.rounded.root,
"--root-rounded": "radii.l2"
} },
square: { root: {
...require_slider_style.sliderStyle.props?.shape.square.root,
"--root-rounded": "0"
} }
} },
sizes: {
xs: { root: { "--thumb-size": require_hue_slider_style.hueSliderStyle.sizes?.xs.root["--thumb-size"] } },
sm: { root: { "--thumb-size": require_hue_slider_style.hueSliderStyle.sizes?.sm.root["--thumb-size"] } },
md: { root: { "--thumb-size": require_hue_slider_style.hueSliderStyle.sizes?.md.root["--thumb-size"] } },
lg: { root: { "--thumb-size": require_hue_slider_style.hueSliderStyle.sizes?.lg.root["--thumb-size"] } },
xl: { root: { "--thumb-size": require_hue_slider_style.hueSliderStyle.sizes?.xl.root["--thumb-size"] } }
},
defaultProps: {
size: "md",
shape: "circle"
}
});
//#endregion
exports.saturationSliderStyle = saturationSliderStyle;
//# sourceMappingURL=saturation-slider.style.cjs.map