@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
87 lines (83 loc) • 3.56 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_alpha_slider_style = require('./alpha-slider.style.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_color_swatch = require('../color-swatch/color-swatch.cjs');
const require_hue_slider = require('../hue-slider/hue-slider.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/alpha-slider/alpha-slider.tsx
const getAriaValueText = (alpha) => `${alpha * 100}%`;
const { ComponentContext, PropsContext: AlphaSliderPropsContext, useComponentContext, usePropsContext: useAlphaSliderPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("alpha-slider", require_alpha_slider_style.alphaSliderStyle);
/**
* `AlphaSlider` is a component used to allow the user to select color transparency.
*
* @see https://yamada-ui.com/docs/components/alpha-slider
*/
const AlphaSliderRoot = withProvider(({ children, color, max = 1, min = 0, orientation: orientationProp = "horizontal", overlayProps, thumbProps, trackProps,...rest }) => {
const orientation = require_hooks_use_value_index.useValue(orientationProp);
const computedChildren = (0, react.useMemo)(() => {
if (children) return children;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlphaSliderTrack, {
...trackProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlphaSliderThumb, { ...thumbProps }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlphaSliderOverlay, { ...overlayProps })]
});
}, [
children,
overlayProps,
thumbProps,
trackProps
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({
color,
max,
min,
orientation
}), [
color,
min,
max,
orientation
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hue_slider.HueSliderRoot, {
max,
min,
orientation,
...rest,
children: computedChildren
})
});
}, "root")({
getAriaValueText,
step: .01
});
const AlphaSliderOverlay = withContext(require_hue_slider.HueSliderOverlay, "overlay")(void 0, ({ layers,...rest }) => {
const { color, max, min, orientation } = useComponentContext();
layers ??= [require_color_swatch.checkersProps, {
bgGradient: `linear(${[
orientation === "horizontal" ? "to-r" : "to-t",
(0, require_utils_index.utils_exports.convertColor)(color)("hex") + (0, require_utils_index.utils_exports.alphaToHex)(min),
(0, require_utils_index.utils_exports.convertColor)(color)("hex") + (0, require_utils_index.utils_exports.alphaToHex)(max)
].join(", ")})`,
boxShadow: "inner"
}];
return {
layers,
...rest
};
});
const AlphaSliderTrack = withContext(require_hue_slider.HueSliderTrack, "track")();
const AlphaSliderThumb = withContext(require_hue_slider.HueSliderThumb, "thumb")();
//#endregion
exports.AlphaSliderOverlay = AlphaSliderOverlay;
exports.AlphaSliderPropsContext = AlphaSliderPropsContext;
exports.AlphaSliderRoot = AlphaSliderRoot;
exports.AlphaSliderThumb = AlphaSliderThumb;
exports.AlphaSliderTrack = AlphaSliderTrack;
exports.useAlphaSliderPropsContext = useAlphaSliderPropsContext;
//# sourceMappingURL=alpha-slider.cjs.map