@yamada-ui/react 2.2.1-dev-20260504103143 → 2.2.1-dev-20260509050741

package/dist/cjs/components/saturation-slider/saturation-slider.style.cjs

@@ -1,10 +1,6 @@
-const require_config = require('../../core/system/config.cjs');
-require('../../core/index.cjs');
-const require_slider_style = require('../slider/slider.style.cjs');
-require('../slider/index.cjs');
-const require_hue_slider_style = require('../hue-slider/hue-slider.style.cjs');
-require('../hue-slider/index.cjs');
-
+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: {
@@ -40,7 +36,13 @@ const saturationSliderStyle = require_config.defineComponentSlotStyle({
 			position: "relative"
 		}
 	},
-	props: { shape: {
+	props: { 
+	/**
+	* The shape of the thumb.
+	*
+	* @default 'circle'
+	*/
+shape: {
 		circle: { root: {
 			...require_slider_style.sliderStyle.props?.shape.circle.root,
 			"--root-rounded": "radii.l2"
@@ -66,7 +68,7 @@ const saturationSliderStyle = require_config.defineComponentSlotStyle({
 		shape: "circle"
 	}
 });
-
 //#endregion
 exports.saturationSliderStyle = saturationSliderStyle;
+
 //# sourceMappingURL=saturation-slider.style.cjs.map

package/dist/cjs/components/saturation-slider/saturation-slider.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"saturation-slider.style.cjs","names":["defineComponentSlotStyle","sliderStyle","hueSliderStyle"],"sources":["../../../../src/components/saturation-slider/saturation-slider.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { hueSliderStyle } from \"../hue-slider\"\nimport { sliderStyle } from \"../slider\"\n\nexport const saturationSliderStyle = defineComponentSlotStyle({\n  base: {\n    root: {\n      aspectRatio: \"16 / 9\",\n      boxShadow: \"inner\",\n      isolation: \"isolate\",\n      maxW: \"full\",\n      p: \"calc({thumb-size} / 2)\",\n      rounded: \"{root-rounded}\",\n      touchAction: \"none\",\n      w: \"full\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    thumb: {\n      ...sliderStyle.base?.thumb,\n      ...hueSliderStyle.base?.thumb,\n      boxSize: \"{thumb-size}\",\n      left: \"{--x, 0%}\",\n      position: \"absolute\",\n      rounded: \"{thumb-rounded}\",\n      top: \"{--y, 0%}\",\n      transform: \"translate(-50%, -50%)\",\n    },\n    track: {\n      boxSize: \"full\",\n      cursor: {\n        base: \"pointer\",\n        _readOnly: \"default\",\n        _disabled: \"not-allowed\",\n      },\n      position: \"relative\",\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the thumb.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        root: {\n          ...sliderStyle.props?.shape.circle.root,\n          \"--root-rounded\": \"radii.l2\",\n        },\n      },\n      rounded: {\n        root: {\n          ...sliderStyle.props?.shape.rounded.root,\n          \"--root-rounded\": \"radii.l2\",\n        },\n      },\n      square: {\n        root: {\n          ...sliderStyle.props?.shape.square.root,\n          \"--root-rounded\": \"0\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.xs.root[\"--thumb-size\"] },\n    },\n    sm: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.sm.root[\"--thumb-size\"] },\n    },\n    md: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.md.root[\"--thumb-size\"] },\n    },\n    lg: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.lg.root[\"--thumb-size\"] },\n    },\n    xl: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.xl.root[\"--thumb-size\"] },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    shape: \"circle\",\n  },\n})\n\nexport type SaturationSliderStyle = typeof saturationSliderStyle\n"],"mappings":";;;;;;;;AAIA,MAAa,wBAAwBA,wCAAyB;CAC5D,MAAM;EACJ,MAAM;GACJ,aAAa;GACb,WAAW;GACX,WAAW;GACX,MAAM;GACN,GAAG;GACH,SAAS;GACT,aAAa;GACb,GAAG;GACH,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,OAAO;GACL,GAAGC,iCAAY,MAAM;GACrB,GAAGC,wCAAe,MAAM;GACxB,SAAS;GACT,MAAM;GACN,UAAU;GACV,SAAS;GACT,KAAK;GACL,WAAW;GACZ;EACD,OAAO;GACL,SAAS;GACT,QAAQ;IACN,MAAM;IACN,WAAW;IACX,WAAW;IACZ;GACD,UAAU;GACX;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EACN,MAAM;GACJ,GAAGD,iCAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACD,SAAS,EACP,MAAM;GACJ,GAAGA,iCAAY,OAAO,MAAM,QAAQ;GACpC,kBAAkB;GACnB,EACF;EACD,QAAQ,EACN,MAAM;GACJ,GAAGA,iCAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACF,EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM,EAAE,gBAAgBC,wCAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,wCAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,wCAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,wCAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,wCAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"saturation-slider.style.cjs","names":["defineComponentSlotStyle","sliderStyle","hueSliderStyle"],"sources":["../../../../src/components/saturation-slider/saturation-slider.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { hueSliderStyle } from \"../hue-slider\"\nimport { sliderStyle } from \"../slider\"\n\nexport const saturationSliderStyle = defineComponentSlotStyle({\n  base: {\n    root: {\n      aspectRatio: \"16 / 9\",\n      boxShadow: \"inner\",\n      isolation: \"isolate\",\n      maxW: \"full\",\n      p: \"calc({thumb-size} / 2)\",\n      rounded: \"{root-rounded}\",\n      touchAction: \"none\",\n      w: \"full\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    thumb: {\n      ...sliderStyle.base?.thumb,\n      ...hueSliderStyle.base?.thumb,\n      boxSize: \"{thumb-size}\",\n      left: \"{--x, 0%}\",\n      position: \"absolute\",\n      rounded: \"{thumb-rounded}\",\n      top: \"{--y, 0%}\",\n      transform: \"translate(-50%, -50%)\",\n    },\n    track: {\n      boxSize: \"full\",\n      cursor: {\n        base: \"pointer\",\n        _readOnly: \"default\",\n        _disabled: \"not-allowed\",\n      },\n      position: \"relative\",\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the thumb.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        root: {\n          ...sliderStyle.props?.shape.circle.root,\n          \"--root-rounded\": \"radii.l2\",\n        },\n      },\n      rounded: {\n        root: {\n          ...sliderStyle.props?.shape.rounded.root,\n          \"--root-rounded\": \"radii.l2\",\n        },\n      },\n      square: {\n        root: {\n          ...sliderStyle.props?.shape.square.root,\n          \"--root-rounded\": \"0\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.xs.root[\"--thumb-size\"] },\n    },\n    sm: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.sm.root[\"--thumb-size\"] },\n    },\n    md: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.md.root[\"--thumb-size\"] },\n    },\n    lg: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.lg.root[\"--thumb-size\"] },\n    },\n    xl: {\n      root: { \"--thumb-size\": hueSliderStyle.sizes?.xl.root[\"--thumb-size\"] },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    shape: \"circle\",\n  },\n})\n\nexport type SaturationSliderStyle = typeof saturationSliderStyle\n"],"mappings":";;;;AAIA,MAAa,wBAAwBA,eAAAA,yBAAyB;CAC5D,MAAM;EACJ,MAAM;GACJ,aAAa;GACb,WAAW;GACX,WAAW;GACX,MAAM;GACN,GAAG;GACH,SAAS;GACT,aAAa;GACb,GAAG;GACH,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,OAAO;GACL,GAAGC,qBAAAA,YAAY,MAAM;GACrB,GAAGC,yBAAAA,eAAe,MAAM;GACxB,SAAS;GACT,MAAM;GACN,UAAU;GACV,SAAS;GACT,KAAK;GACL,WAAW;GACZ;EACD,OAAO;GACL,SAAS;GACT,QAAQ;IACN,MAAM;IACN,WAAW;IACX,WAAW;IACZ;GACD,UAAU;GACX;EACF;CAED,OAAO;;;;;;AAML,OAAO;EACL,QAAQ,EACN,MAAM;GACJ,GAAGD,qBAAAA,YAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACD,SAAS,EACP,MAAM;GACJ,GAAGA,qBAAAA,YAAY,OAAO,MAAM,QAAQ;GACpC,kBAAkB;GACnB,EACF;EACD,QAAQ,EACN,MAAM;GACJ,GAAGA,qBAAAA,YAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACF,EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM,EAAE,gBAAgBC,yBAAAA,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,yBAAAA,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,yBAAAA,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,yBAAAA,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgBA,yBAAAA,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,CAAC"}

package/dist/cjs/components/saturation-slider/use-saturation-slider.cjs

@@ -1,19 +1,14 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_dom = require('../../utils/dom.cjs');
-const require_ref = require('../../utils/ref.cjs');
-const require_utils_index = require('../../utils/index.cjs');
-const require_props = require('../../core/components/props.cjs');
-require('../../core/index.cjs');
-const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
-const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
-require('../../providers/i18n-provider/index.cjs');
-const require_hooks_use_pan_event_index = require('../../hooks/use-pan-event/index.cjs');
-const require_use_field_props = require('../field/use-field-props.cjs');
-require('../field/index.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_dom = require("../../utils/dom.cjs");
+const require_ref = require("../../utils/ref.cjs");
+const require_utils_index = require("../../utils/index.cjs");
+const require_props = require("../../core/components/props.cjs");
+const require_hooks_use_controllable_state_index = require("../../hooks/use-controllable-state/index.cjs");
+const require_i18n_provider = require("../../providers/i18n-provider/i18n-provider.cjs");
+const require_hooks_use_pan_event_index = require("../../hooks/use-pan-event/index.cjs");
+const require_use_field_props = require("../field/use-field-props.cjs");
 let react = require("react");
-
 //#region src/components/saturation-slider/use-saturation-slider.ts
 function clampValue(value) {
 	return [
@@ -37,30 +32,30 @@ const useSaturationSlider = (props = {}) => {
 	const [h, s, v] = clampValue(value);
 	const interactive = !(disabled || readOnly);
 	const [_, getPanEventProps] = require_hooks_use_pan_event_index.usePanEvent({
-		onEnd: (_$1, point, rect) => {
+		onEnd: (_, point, rect) => {
 			if (!interactive) return;
 			const panValue = getPanValue(point, rect);
 			onChangeEnd?.(panValue);
 		},
-		onMove: (_$1, point, rect) => {
+		onMove: (_, point, rect) => {
 			if (!interactive) return;
 			setValue(getPanValue(point, rect));
 		},
-		onStart: (_$1, point, rect) => {
+		onStart: (_, point, rect) => {
 			if (!interactive) return;
 			const panValue = getPanValue(point, rect);
 			onChangeStart?.(value);
 			setValue(panValue);
 		}
 	});
-	const onChange = (0, react.useCallback)(([h$1, s$1, v$1]) => {
+	const onChange = (0, react.useCallback)(([h, s, v]) => {
 		if (!interactive) return;
-		s$1 = (0, require_utils_index.utils_exports.clampNumber)(s$1, 0, 1);
-		v$1 = (0, require_utils_index.utils_exports.clampNumber)(v$1, 0, 1);
+		s = (0, require_utils_index.utils_exports.clampNumber)(s, 0, 1);
+		v = (0, require_utils_index.utils_exports.clampNumber)(v, 0, 1);
 		setValue([
-			h$1,
-			s$1,
-			v$1
+			h,
+			s,
+			v
 		]);
 	}, [interactive, setValue]);
 	const getPanValue = (0, react.useCallback)(({ x, y }, { bottom, height, left, width }) => {
@@ -76,12 +71,12 @@ const useSaturationSlider = (props = {}) => {
 			x: (0, require_utils_index.utils_exports.clampNumber)(percent.x, 0, 1),
 			y: (0, require_utils_index.utils_exports.clampNumber)(percent.y, 0, 1)
 		};
-		const s$1 = (0, require_utils_index.utils_exports.roundNumberToStep)(clamp.x, 0, step);
-		const v$1 = (0, require_utils_index.utils_exports.roundNumberToStep)(clamp.y, 0, step);
+		const s = (0, require_utils_index.utils_exports.roundNumberToStep)(clamp.x, 0, step);
+		const v = (0, require_utils_index.utils_exports.roundNumberToStep)(clamp.y, 0, step);
 		return [
 			h,
-			parseFloat(s$1),
-			parseFloat(v$1)
+			parseFloat(s),
+			parseFloat(v)
 		];
 	}, [h, step]);
 	const onKeyDown = (0, react.useCallback)((ev) => {
@@ -114,19 +109,19 @@ const useSaturationSlider = (props = {}) => {
 		step,
 		v
 	]);
-	const getRootProps = (0, react.useCallback)((props$1 = {}) => {
+	const getRootProps = (0, react.useCallback)((props = {}) => {
 		return {
-			...require_props.mergeProps(dataProps, rest, props$1)(),
+			...require_props.mergeProps(dataProps, rest, props)(),
 			style: {
 				...rest.style,
-				...props$1.style,
+				...props.style,
 				"--x": `${Math.abs(s * 100)}%`,
 				"--y": `${Math.abs(100 - v * 100)}%`,
 				backgroundColor: `hsl(${h}, 100%, 50%)`,
 				backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)"
 			},
-			onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
-			onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
+			onBlur: (0, require_utils_index.utils_exports.handlerAll)(props.onBlur, eventProps.onBlur),
+			onFocus: (0, require_utils_index.utils_exports.handlerAll)(props.onFocus, eventProps.onFocus)
 		};
 	}, [
 		dataProps,
@@ -136,7 +131,7 @@ const useSaturationSlider = (props = {}) => {
 		s,
 		v
 	]);
-	const getInputProps = (0, react.useCallback)((props$1 = {}) => ({
+	const getInputProps = (0, react.useCallback)((props = {}) => ({
 		...require_dom.visuallyHiddenAttributes,
 		...dataProps,
 		...ariaProps,
@@ -151,8 +146,8 @@ const useSaturationSlider = (props = {}) => {
 			s,
 			v
 		].toString(),
-		...props$1,
-		ref: require_ref.mergeRefs(props$1.ref, ref)
+		...props,
+		ref: require_ref.mergeRefs(props.ref, ref)
 	}), [
 		ariaProps,
 		dataProps,
@@ -166,16 +161,16 @@ const useSaturationSlider = (props = {}) => {
 		s,
 		v
 	]);
-	const getTrackProps = (0, react.useCallback)((props$1 = {}) => getPanEventProps({
+	const getTrackProps = (0, react.useCallback)((props = {}) => getPanEventProps({
 		...dataProps,
-		...props$1
+		...props
 	}), [dataProps, getPanEventProps]);
 	return {
 		setValue,
 		value,
 		getInputProps,
 		getRootProps,
-		getThumbProps: (0, react.useCallback)((props$1 = {}) => ({
+		getThumbProps: (0, react.useCallback)((props = {}) => ({
 			...dataProps,
 			...ariaProps,
 			"aria-label": t("Saturation and brightness thumb"),
@@ -189,9 +184,9 @@ const useSaturationSlider = (props = {}) => {
 			}),
 			role: "slider",
 			tabIndex: interactive ? 0 : -1,
-			...props$1,
-			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(props$1["aria-labelledby"], ariaLabelledBy),
-			onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
+			...props,
+			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(props["aria-labelledby"], ariaLabelledBy),
+			onKeyDown: (0, require_utils_index.utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
 		}), [
 			ariaLabelledBy,
 			ariaProps,
@@ -209,7 +204,7 @@ const useSaturationSlider = (props = {}) => {
 		onChange
 	};
 };
-
 //#endregion
 exports.useSaturationSlider = useSaturationSlider;
+
 //# sourceMappingURL=use-saturation-slider.cjs.map

package/dist/cjs/components/saturation-slider/use-saturation-slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-saturation-slider.cjs","names":["useFieldProps","useI18n","useControllableState","usePanEvent","h","s","v","getRootProps: PropGetter","mergeProps","props","getInputProps: PropGetter<\"input\">","visuallyHiddenAttributes","mergeRefs","getTrackProps: PropGetter"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  clampNumber,\n  cx,\n  handlerAll,\n  mergeRefs,\n  roundNumberToStep,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n  return [\n    clampNumber(value[0], 0, 360),\n    clampNumber(value[1], 0, 1),\n    clampNumber(value[2], 0, 1),\n  ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n  extends\n    Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default [0, 0, 1]\n   */\n  defaultValue?: [number, number, number]\n  /**\n   * The base `id` to use for the slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * The value of the saturation slider.\n   */\n  value?: [number, number, number]\n  /**\n   * This is used to format the value so that screen readers\n   * can speak out a more human-friendly value.\n   *\n   * It is used to set the `aria-valuetext` property of the input.\n   */\n  getAriaValueText?: (value: [number, number, number]) => string | undefined\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      defaultValue = [0, 0, 1],\n      disabled,\n      getAriaValueText,\n      readOnly,\n      required,\n      step = 0.01,\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeEnd,\n      onChangeStart,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const { t } = useI18n(\"saturationSlider\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [h, s, v] = clampValue(value)\n  const interactive = !(disabled || readOnly)\n  const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n    onEnd: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeEnd?.(panValue)\n    },\n    onMove: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      setValue(panValue)\n    },\n    onStart: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeStart?.(value)\n      setValue(panValue)\n    },\n  })\n\n  const onChange = useCallback(\n    ([h, s, v]: [number, number, number]) => {\n      if (!interactive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue([h, s, v])\n    },\n    [interactive, setValue],\n  )\n\n  const getPanValue = useCallback(\n    (\n      { x, y }: Point,\n      { bottom, height, left, width }: DOMRect,\n    ): [number, number, number] => {\n      const diff = { x: x - left, y: bottom - y }\n      const percent = { x: diff.x / width, y: diff.y / height }\n      const clamp = {\n        x: clampNumber(percent.x, 0, 1),\n        y: clampNumber(percent.y, 0, 1),\n      }\n      const s = roundNumberToStep(clamp.x, 0, step)\n      const v = roundNumberToStep(clamp.y, 0, step)\n\n      return [h, parseFloat(s), parseFloat(v)]\n    },\n    [h, step],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => onChange([h, s, v - step]),\n        ArrowLeft: () => onChange([h, s - step, v]),\n        ArrowRight: () => onChange([h, s + step, v]),\n        ArrowUp: () => onChange([h, s, v + step]),\n      })\n    },\n    [h, onChange, s, step, v],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(dataProps, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          ...rest.style,\n          ...props.style,\n          \"--x\": `${Math.abs(s * 100)}%`,\n          \"--y\": `${Math.abs(100 - v * 100)}%`,\n          backgroundColor: `hsl(${h}, 100%, 50%)`,\n          backgroundImage:\n            \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n        },\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [dataProps, eventProps, h, rest, s, v],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...dataProps,\n      ...ariaProps,\n      id,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: [h, s, v].toString(),\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      disabled,\n      h,\n      id,\n      name,\n      readOnly,\n      ref,\n      required,\n      s,\n      v,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n    [dataProps, getPanEventProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      \"aria-label\": t(\"Saturation and brightness thumb\"),\n      \"aria-roledescription\": \"2D slider\",\n      \"aria-valuemax\": 100,\n      \"aria-valuemin\": 0,\n      \"aria-valuenow\": s * 100,\n      \"aria-valuetext\":\n        ariaValueText ??\n        getAriaValueText?.(value) ??\n        t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n          brightness: v * 100,\n          saturation: s * 100,\n        }),\n      role: \"slider\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaLabelledBy,\n      ariaProps,\n      ariaValueText,\n      dataProps,\n      getAriaValueText,\n      interactive,\n      onKeyDown,\n      s,\n      t,\n      v,\n      value,\n    ],\n  )\n\n  return {\n    setValue,\n    value,\n    getInputProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n    onChange,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}
+{"version":3,"file":"use-saturation-slider.cjs","names":["useFieldProps","useI18n","useControllableState","usePanEvent","mergeProps","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  clampNumber,\n  cx,\n  handlerAll,\n  mergeRefs,\n  roundNumberToStep,\n  visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n  return [\n    clampNumber(value[0], 0, 360),\n    clampNumber(value[1], 0, 1),\n    clampNumber(value[2], 0, 1),\n  ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n  extends\n    Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * The initial value of the saturation slider.\n   *\n   * @default [0, 0, 1]\n   */\n  defaultValue?: [number, number, number]\n  /**\n   * The base `id` to use for the slider.\n   */\n  id?: string\n  /**\n   * The name attribute of the hidden `input` field.\n   * This is particularly useful in forms.\n   */\n  name?: string\n  /**\n   * The step in which increments or decrements have to be made.\n   *\n   * @default 0.01\n   */\n  step?: number\n  /**\n   * The value of the saturation slider.\n   */\n  value?: [number, number, number]\n  /**\n   * This is used to format the value so that screen readers\n   * can speak out a more human-friendly value.\n   *\n   * It is used to set the `aria-valuetext` property of the input.\n   */\n  getAriaValueText?: (value: [number, number, number]) => string | undefined\n  /**\n   * Function called whenever the saturation slider value changes.\n   */\n  onChange?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user is done selecting a new value.\n   */\n  onChangeEnd?: (value: [number, number, number]) => void\n  /**\n   * Function called when the user starts selecting a new value.\n   */\n  onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      defaultValue = [0, 0, 1],\n      disabled,\n      getAriaValueText,\n      readOnly,\n      required,\n      step = 0.01,\n      value: valueProp,\n      onChange: onChangeProp,\n      onChangeEnd,\n      onChangeStart,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const { t } = useI18n(\"saturationSlider\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [h, s, v] = clampValue(value)\n  const interactive = !(disabled || readOnly)\n  const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n    onEnd: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeEnd?.(panValue)\n    },\n    onMove: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      setValue(panValue)\n    },\n    onStart: (_, point, rect) => {\n      if (!interactive) return\n\n      const panValue = getPanValue(point, rect)\n\n      onChangeStart?.(value)\n      setValue(panValue)\n    },\n  })\n\n  const onChange = useCallback(\n    ([h, s, v]: [number, number, number]) => {\n      if (!interactive) return\n\n      s = clampNumber(s, 0, 1)\n      v = clampNumber(v, 0, 1)\n\n      setValue([h, s, v])\n    },\n    [interactive, setValue],\n  )\n\n  const getPanValue = useCallback(\n    (\n      { x, y }: Point,\n      { bottom, height, left, width }: DOMRect,\n    ): [number, number, number] => {\n      const diff = { x: x - left, y: bottom - y }\n      const percent = { x: diff.x / width, y: diff.y / height }\n      const clamp = {\n        x: clampNumber(percent.x, 0, 1),\n        y: clampNumber(percent.y, 0, 1),\n      }\n      const s = roundNumberToStep(clamp.x, 0, step)\n      const v = roundNumberToStep(clamp.y, 0, step)\n\n      return [h, parseFloat(s), parseFloat(v)]\n    },\n    [h, step],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      runKeyAction(ev, {\n        ArrowDown: () => onChange([h, s, v - step]),\n        ArrowLeft: () => onChange([h, s - step, v]),\n        ArrowRight: () => onChange([h, s + step, v]),\n        ArrowUp: () => onChange([h, s, v + step]),\n      })\n    },\n    [h, onChange, s, step, v],\n  )\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(dataProps, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          ...rest.style,\n          ...props.style,\n          \"--x\": `${Math.abs(s * 100)}%`,\n          \"--y\": `${Math.abs(100 - v * 100)}%`,\n          backgroundColor: `hsl(${h}, 100%, 50%)`,\n          backgroundImage:\n            \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n        },\n        onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n        onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n      }\n    },\n    [dataProps, eventProps, h, rest, s, v],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => ({\n      ...visuallyHiddenAttributes,\n      ...dataProps,\n      ...ariaProps,\n      id,\n      type: \"hidden\",\n      name,\n      disabled,\n      readOnly,\n      required,\n      value: [h, s, v].toString(),\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n    }),\n    [\n      ariaProps,\n      dataProps,\n      disabled,\n      h,\n      id,\n      name,\n      readOnly,\n      ref,\n      required,\n      s,\n      v,\n    ],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n    [dataProps, getPanEventProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      ...ariaProps,\n      \"aria-label\": t(\"Saturation and brightness thumb\"),\n      \"aria-roledescription\": \"2D slider\",\n      \"aria-valuemax\": 100,\n      \"aria-valuemin\": 0,\n      \"aria-valuenow\": s * 100,\n      \"aria-valuetext\":\n        ariaValueText ??\n        getAriaValueText?.(value) ??\n        t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n          brightness: v * 100,\n          saturation: s * 100,\n        }),\n      role: \"slider\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      ariaLabelledBy,\n      ariaProps,\n      ariaValueText,\n      dataProps,\n      getAriaValueText,\n      interactive,\n      onKeyDown,\n      s,\n      t,\n      v,\n      value,\n    ],\n  )\n\n  return {\n    setValue,\n    value,\n    getInputProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n    onChange,\n  }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":";;;;;;;;;;;;AAsBA,SAAS,WAAW,OAAiC;CACnD,OAAO;qDACO,MAAM,IAAI,GAAG,IAAI;qDACjB,MAAM,IAAI,GAAG,EAAE;qDACf,MAAM,IAAI,GAAG,EAAE;EAC5B;;AAsDH,MAAa,uBAAuB,QAAkC,EAAE,KAAK;CAC3E,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,mBAAmB,gBACnB,kBAAkB,eAClB,eAAe;EAAC;EAAG;EAAG;EAAE,EACxB,UACA,kBACA,UACA,UACA,OAAO,KACP,OAAO,WACP,UAAU,cACV,aACA,eACA,GAAG,QAEL,WACA,WACA,eACEA,wBAAAA,cAAc,MAAM;CACxB,MAAM,EAAE,MAAMC,sBAAAA,QAAQ,mBAAmB;CACzC,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;EACX,CAAC;CACF,MAAM,CAAC,GAAG,GAAG,KAAK,WAAW,MAAM;CACnC,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,GAAG,oBAAoBC,kCAAAA,YAA4B;EACxD,QAAQ,GAAG,OAAO,SAAS;GACzB,IAAI,CAAC,aAAa;GAElB,MAAM,WAAW,YAAY,OAAO,KAAK;GAEzC,cAAc,SAAS;;EAEzB,SAAS,GAAG,OAAO,SAAS;GAC1B,IAAI,CAAC,aAAa;GAIlB,SAFiB,YAAY,OAAO,KAEnB,CAAC;;EAEpB,UAAU,GAAG,OAAO,SAAS;GAC3B,IAAI,CAAC,aAAa;GAElB,MAAM,WAAW,YAAY,OAAO,KAAK;GAEzC,gBAAgB,MAAM;GACtB,SAAS,SAAS;;EAErB,CAAC;CAEF,MAAM,YAAA,GAAA,MAAA,cACH,CAAC,GAAG,GAAG,OAAiC;EACvC,IAAI,CAAC,aAAa;EAElB,KAAA,GAAA,oBAAA,cAAA,aAAgB,GAAG,GAAG,EAAE;EACxB,KAAA,GAAA,oBAAA,cAAA,aAAgB,GAAG,GAAG,EAAE;EAExB,SAAS;GAAC;GAAG;GAAG;GAAE,CAAC;IAErB,CAAC,aAAa,SAAS,CACxB;CAED,MAAM,eAAA,GAAA,MAAA,cAEF,EAAE,GAAG,KACL,EAAE,QAAQ,QAAQ,MAAM,YACK;EAC7B,MAAM,OAAO;GAAE,GAAG,IAAI;GAAM,GAAG,SAAS;GAAG;EAC3C,MAAM,UAAU;GAAE,GAAG,KAAK,IAAI;GAAO,GAAG,KAAK,IAAI;GAAQ;EACzD,MAAM,QAAQ;GACZ,IAAA,GAAA,oBAAA,cAAA,aAAe,QAAQ,GAAG,GAAG,EAAE;GAC/B,IAAA,GAAA,oBAAA,cAAA,aAAe,QAAQ,GAAG,GAAG,EAAE;GAChC;EACD,MAAM,KAAA,GAAA,oBAAA,cAAA,mBAAsB,MAAM,GAAG,GAAG,KAAK;EAC7C,MAAM,KAAA,GAAA,oBAAA,cAAA,mBAAsB,MAAM,GAAG,GAAG,KAAK;EAE7C,OAAO;GAAC;GAAG,WAAW,EAAE;GAAE,WAAW,EAAE;GAAC;IAE1C,CAAC,GAAG,KAAK,CACV;CAED,MAAM,aAAA,GAAA,MAAA,cACH,OAAsC;EACrC,YAAA,aAAa,IAAI;GACf,iBAAiB,SAAS;IAAC;IAAG;IAAG,IAAI;IAAK,CAAC;GAC3C,iBAAiB,SAAS;IAAC;IAAG,IAAI;IAAM;IAAE,CAAC;GAC3C,kBAAkB,SAAS;IAAC;IAAG,IAAI;IAAM;IAAE,CAAC;GAC5C,eAAe,SAAS;IAAC;IAAG;IAAG,IAAI;IAAK,CAAC;GAC1C,CAAC;IAEJ;EAAC;EAAG;EAAU;EAAG;EAAM;EAAE,CAC1B;CAED,MAAM,gBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KAAK;EAGd,OAAO;GACL,GAHaC,cAAAA,WAAW,WAAW,MAAM,MAAM,EAGtC;GACT,OAAO;IACL,GAAG,KAAK;IACR,GAAG,MAAM;IACT,OAAO,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC;IAC5B,OAAO,GAAG,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC;IAClC,iBAAiB,OAAO,EAAE;IAC1B,iBACE;IACH;GACD,SAAA,GAAA,oBAAA,cAAA,YAAmB,MAAM,QAAQ,WAAW,OAAO;GACnD,UAAA,GAAA,oBAAA,cAAA,YAAoB,MAAM,SAAS,WAAW,QAAQ;GACvD;IAEH;EAAC;EAAW;EAAY;EAAG;EAAM;EAAG;EAAE,CACvC;CAED,MAAM,iBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,MAAM;EACf,GAAGC,YAAAA;EACH,GAAG;EACH,GAAG;EACH;EACA,MAAM;EACN;EACA;EACA;EACA;EACA,OAAO;GAAC;GAAG;GAAG;GAAE,CAAC,UAAU;EAC3B,GAAG;EACH,KAAKC,YAAAA,UAAU,MAAM,KAAK,IAAI;EAC/B,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,iBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KAAK,iBAAiB;EAAE,GAAG;EAAW,GAAG;EAAO,CAAC,EAC5D,CAAC,WAAW,iBAAiB,CAC9B;CAuCD,OAAO;EACL;EACA;EACA;EACA;EACA,gBAAA,GAAA,MAAA,cAzCC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH,cAAc,EAAE,kCAAkC;GAClD,wBAAwB;GACxB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,IAAI;GACrB,kBACE,iBACA,mBAAmB,MAAM,IACzB,EAAE,sDAAsD;IACtD,YAAY,IAAI;IAChB,YAAY,IAAI;IACjB,CAAC;GACJ,MAAM;GACN,UAAU,cAAc,IAAI;GAC5B,GAAG;GACH,oBAAA,GAAA,oBAAA,cAAA,IAAsB,MAAM,oBAAoB,eAAe;GAC/D,YAAA,GAAA,oBAAA,cAAA,YAAsB,MAAM,WAAW,UAAU;GAClD,GACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAQY;EACb;EACA;EACD"}

package/dist/cjs/components/scroll-area/index.cjs

@@ -1,9 +1,9 @@
-const require_scroll_area_style = require('./scroll-area.style.cjs');
-const require_use_scroll_area = require('./use-scroll-area.cjs');
-const require_scroll_area = require('./scroll-area.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_scroll_area_style = require("./scroll-area.style.cjs");
+const require_use_scroll_area = require("./use-scroll-area.cjs");
+const require_scroll_area = require("./scroll-area.cjs");
 exports.ScrollArea = require_scroll_area.ScrollArea;
 exports.ScrollAreaPropsContext = require_scroll_area.ScrollAreaPropsContext;
 exports.scrollAreaStyle = require_scroll_area_style.scrollAreaStyle;
 exports.useScrollArea = require_use_scroll_area.useScrollArea;
-exports.useScrollAreaPropsContext = require_scroll_area.useScrollAreaPropsContext;
+exports.useScrollAreaPropsContext = require_scroll_area.useScrollAreaPropsContext;

package/dist/cjs/components/scroll-area/scroll-area.cjs

@@ -1,13 +1,10 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_factory = require('../../core/system/factory.cjs');
-const require_create_component = require('../../core/components/create-component.cjs');
-require('../../core/index.cjs');
-const require_scroll_area_style = require('./scroll-area.style.cjs');
-const require_use_scroll_area = require('./use-scroll-area.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_factory = require("../../core/system/factory.cjs");
+const require_create_component = require("../../core/components/create-component.cjs");
+const require_scroll_area_style = require("./scroll-area.style.cjs");
+const require_use_scroll_area = require("./use-scroll-area.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/scroll-area/scroll-area.tsx
 const { PropsContext: ScrollAreaPropsContext, usePropsContext: useScrollAreaPropsContext, withContext } = require_create_component.createComponent("scroll-area", require_scroll_area_style.scrollAreaStyle);
 /**
@@ -22,9 +19,9 @@ const ScrollArea = withContext(({ children, ...rest }) => {
 		children
 	});
 })();
-
 //#endregion
 exports.ScrollArea = ScrollArea;
 exports.ScrollAreaPropsContext = ScrollAreaPropsContext;
 exports.useScrollAreaPropsContext = useScrollAreaPropsContext;
+
 //# sourceMappingURL=scroll-area.cjs.map

package/dist/cjs/components/scroll-area/scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.cjs","names":["createComponent","scrollAreaStyle","useScrollArea","styled"],"sources":["../../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ScrollAreaStyle } from \"./scroll-area.style\"\nimport type { UseScrollAreaProps } from \"./use-scroll-area\"\nimport { createComponent, styled } from \"../../core\"\nimport { scrollAreaStyle } from \"./scroll-area.style\"\nimport { useScrollArea } from \"./use-scroll-area\"\n\nexport interface ScrollAreaProps\n  extends HTMLStyledProps, ThemeProps<ScrollAreaStyle>, UseScrollAreaProps {}\n\nconst {\n  PropsContext: ScrollAreaPropsContext,\n  usePropsContext: useScrollAreaPropsContext,\n  withContext,\n} = createComponent<ScrollAreaProps, ScrollAreaStyle>(\n  \"scroll-area\",\n  scrollAreaStyle,\n)\n\nexport { ScrollAreaPropsContext, useScrollAreaPropsContext }\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see https://yamada-ui.com/docs/components/scroll-area\n */\nexport const ScrollArea = withContext<\"div\", ScrollAreaProps>(\n  ({ children, ...rest }) => {\n    const { getRootProps } = useScrollArea(rest)\n\n    return <styled.div {...getRootProps()}>{children}</styled.div>\n  },\n)()\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACEA,yCACF,eACAC,0CACD;;;;;;AASD,MAAa,aAAa,aACvB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiBC,sCAAc,KAAK;AAE5C,QAAO,2CAACC,uBAAO;EAAI,GAAI,cAAc;EAAG;GAAsB;EAEjE,EAAE"}
+{"version":3,"file":"scroll-area.cjs","names":["createComponent","scrollAreaStyle","useScrollArea","styled"],"sources":["../../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ScrollAreaStyle } from \"./scroll-area.style\"\nimport type { UseScrollAreaProps } from \"./use-scroll-area\"\nimport { createComponent, styled } from \"../../core\"\nimport { scrollAreaStyle } from \"./scroll-area.style\"\nimport { useScrollArea } from \"./use-scroll-area\"\n\nexport interface ScrollAreaProps\n  extends HTMLStyledProps, ThemeProps<ScrollAreaStyle>, UseScrollAreaProps {}\n\nconst {\n  PropsContext: ScrollAreaPropsContext,\n  usePropsContext: useScrollAreaPropsContext,\n  withContext,\n} = createComponent<ScrollAreaProps, ScrollAreaStyle>(\n  \"scroll-area\",\n  scrollAreaStyle,\n)\n\nexport { ScrollAreaPropsContext, useScrollAreaPropsContext }\n\n/**\n * `ScrollArea` is a component that displays a customized scrollbar.\n *\n * @see https://yamada-ui.com/docs/components/scroll-area\n */\nexport const ScrollArea = withContext<\"div\", ScrollAreaProps>(\n  ({ children, ...rest }) => {\n    const { getRootProps } = useScrollArea(rest)\n\n    return <styled.div {...getRootProps()}>{children}</styled.div>\n  },\n)()\n"],"mappings":";;;;;;;;AAYA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACEA,yBAAAA,gBACF,eACAC,0BAAAA,gBACD;;;;;;AASD,MAAa,aAAa,aACvB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiBC,wBAAAA,cAAc,KAAK;CAE5C,OAAO,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,OAAO,KAAR;EAAY,GAAI,cAAc;EAAG;EAAsB,CAAA;EAEjE,EAAE"}

package/dist/cjs/components/scroll-area/scroll-area.style.cjs

@@ -1,8 +1,5 @@
-const require_config = require('../../core/system/config.cjs');
-require('../../core/index.cjs');
-
 //#region src/components/scroll-area/scroll-area.style.ts
-const scrollAreaStyle = require_config.defineComponentStyle({ base: {
+const scrollAreaStyle = require("../../core/system/config.cjs").defineComponentStyle({ base: {
 	"@-moz-document url-prefix()": {
 		scrollbarColor: "{colors.bg.emphasized} transparent",
 		_dark: { scrollbarColor: "{colors.bg.emphasized} transparent" },
@@ -51,7 +48,7 @@ const scrollAreaStyle = require_config.defineComponentStyle({ base: {
 		_scrollbar: { display: "none" }
 	}
 } });
-
 //#endregion
 exports.scrollAreaStyle = scrollAreaStyle;
+
 //# sourceMappingURL=scroll-area.style.cjs.map

package/dist/cjs/components/scroll-area/scroll-area.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/scroll-area/scroll-area.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const scrollAreaStyle = defineComponentStyle({\n  base: {\n    \"@-moz-document url-prefix()\": {\n      scrollbarColor: \"{colors.bg.emphasized} transparent\",\n      _dark: {\n        scrollbarColor: \"{colors.bg.emphasized} transparent\",\n      },\n      _light: {\n        scrollbarColor: \"{colors.bg.emphasized} transparent\",\n      },\n    },\n    overflow: \"auto\",\n    _scrollbar: {\n      boxSize: \"3\",\n    },\n    _scrollbarCorner: {\n      bg: \"transparent\",\n    },\n    _scrollbarThumb: {\n      bg: \"bg.emphasized\",\n      bgClip: \"padding-box\",\n      border: \"3px solid transparent\",\n      rounded: \"full\",\n      _nativeHover: {\n        bg: \"bg.contrast\",\n        bgClip: \"padding-box\",\n      },\n    },\n    _scrollbarTrack: {\n      bg: \"transparent\",\n    },\n    _hidden: {\n      \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n      \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n      \"@-moz-document url-prefix()\": {\n        scrollbarColor: \"transparent transparent\",\n        _dark: {\n          scrollbarColor: \"transparent transparent\",\n        },\n        _light: {\n          scrollbarColor: \"transparent transparent\",\n        },\n      },\n      _dark: {\n        \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n        \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n        _scrollbarThumb: { bg: \"transparent\" },\n        _scrollbarTrack: { bg: \"transparent\" },\n      },\n      _light: {\n        \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n        \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n        _scrollbarThumb: { bg: \"transparent\" },\n        _scrollbarTrack: { bg: \"transparent\" },\n      },\n      _scrollbarThumb: { bg: \"transparent\" },\n      _scrollbarTrack: { bg: \"transparent\" },\n    },\n    _never: {\n      \"&::-webkit-scrollbar\": { display: \"none\" },\n      scrollbarWidth: \"none\",\n      _scrollbar: { display: \"none\" },\n    },\n  },\n})\n\nexport type ScrollAreaStyle = typeof scrollAreaStyle\n"],"mappings":";;;;AAEA,MAAa,kBAAkBA,oCAAqB,EAClD,MAAM;CACJ,+BAA+B;EAC7B,gBAAgB;EAChB,OAAO,EACL,gBAAgB,sCACjB;EACD,QAAQ,EACN,gBAAgB,sCACjB;EACF;CACD,UAAU;CACV,YAAY,EACV,SAAS,KACV;CACD,kBAAkB,EAChB,IAAI,eACL;CACD,iBAAiB;EACf,IAAI;EACJ,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,cAAc;GACZ,IAAI;GACJ,QAAQ;GACT;EACF;CACD,iBAAiB,EACf,IAAI,eACL;CACD,SAAS;EACP,8BAA8B,EAAE,IAAI,eAAe;EACnD,8BAA8B,EAAE,IAAI,eAAe;EACnD,+BAA+B;GAC7B,gBAAgB;GAChB,OAAO,EACL,gBAAgB,2BACjB;GACD,QAAQ,EACN,gBAAgB,2BACjB;GACF;EACD,OAAO;GACL,8BAA8B,EAAE,IAAI,eAAe;GACnD,8BAA8B,EAAE,IAAI,eAAe;GACnD,iBAAiB,EAAE,IAAI,eAAe;GACtC,iBAAiB,EAAE,IAAI,eAAe;GACvC;EACD,QAAQ;GACN,8BAA8B,EAAE,IAAI,eAAe;GACnD,8BAA8B,EAAE,IAAI,eAAe;GACnD,iBAAiB,EAAE,IAAI,eAAe;GACtC,iBAAiB,EAAE,IAAI,eAAe;GACvC;EACD,iBAAiB,EAAE,IAAI,eAAe;EACtC,iBAAiB,EAAE,IAAI,eAAe;EACvC;CACD,QAAQ;EACN,wBAAwB,EAAE,SAAS,QAAQ;EAC3C,gBAAgB;EAChB,YAAY,EAAE,SAAS,QAAQ;EAChC;CACF,EACF,CAAC"}
+{"version":3,"file":"scroll-area.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/scroll-area/scroll-area.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const scrollAreaStyle = defineComponentStyle({\n  base: {\n    \"@-moz-document url-prefix()\": {\n      scrollbarColor: \"{colors.bg.emphasized} transparent\",\n      _dark: {\n        scrollbarColor: \"{colors.bg.emphasized} transparent\",\n      },\n      _light: {\n        scrollbarColor: \"{colors.bg.emphasized} transparent\",\n      },\n    },\n    overflow: \"auto\",\n    _scrollbar: {\n      boxSize: \"3\",\n    },\n    _scrollbarCorner: {\n      bg: \"transparent\",\n    },\n    _scrollbarThumb: {\n      bg: \"bg.emphasized\",\n      bgClip: \"padding-box\",\n      border: \"3px solid transparent\",\n      rounded: \"full\",\n      _nativeHover: {\n        bg: \"bg.contrast\",\n        bgClip: \"padding-box\",\n      },\n    },\n    _scrollbarTrack: {\n      bg: \"transparent\",\n    },\n    _hidden: {\n      \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n      \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n      \"@-moz-document url-prefix()\": {\n        scrollbarColor: \"transparent transparent\",\n        _dark: {\n          scrollbarColor: \"transparent transparent\",\n        },\n        _light: {\n          scrollbarColor: \"transparent transparent\",\n        },\n      },\n      _dark: {\n        \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n        \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n        _scrollbarThumb: { bg: \"transparent\" },\n        _scrollbarTrack: { bg: \"transparent\" },\n      },\n      _light: {\n        \"&::-webkit-scrollbar-thumb\": { bg: \"transparent\" },\n        \"&::-webkit-scrollbar-track\": { bg: \"transparent\" },\n        _scrollbarThumb: { bg: \"transparent\" },\n        _scrollbarTrack: { bg: \"transparent\" },\n      },\n      _scrollbarThumb: { bg: \"transparent\" },\n      _scrollbarTrack: { bg: \"transparent\" },\n    },\n    _never: {\n      \"&::-webkit-scrollbar\": { display: \"none\" },\n      scrollbarWidth: \"none\",\n      _scrollbar: { display: \"none\" },\n    },\n  },\n})\n\nexport type ScrollAreaStyle = typeof scrollAreaStyle\n"],"mappings":";AAEA,MAAa,yDAAkBA,CAAAA,qBAAqB,EAClD,MAAM;CACJ,+BAA+B;EAC7B,gBAAgB;EAChB,OAAO,EACL,gBAAgB,sCACjB;EACD,QAAQ,EACN,gBAAgB,sCACjB;EACF;CACD,UAAU;CACV,YAAY,EACV,SAAS,KACV;CACD,kBAAkB,EAChB,IAAI,eACL;CACD,iBAAiB;EACf,IAAI;EACJ,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,cAAc;GACZ,IAAI;GACJ,QAAQ;GACT;EACF;CACD,iBAAiB,EACf,IAAI,eACL;CACD,SAAS;EACP,8BAA8B,EAAE,IAAI,eAAe;EACnD,8BAA8B,EAAE,IAAI,eAAe;EACnD,+BAA+B;GAC7B,gBAAgB;GAChB,OAAO,EACL,gBAAgB,2BACjB;GACD,QAAQ,EACN,gBAAgB,2BACjB;GACF;EACD,OAAO;GACL,8BAA8B,EAAE,IAAI,eAAe;GACnD,8BAA8B,EAAE,IAAI,eAAe;GACnD,iBAAiB,EAAE,IAAI,eAAe;GACtC,iBAAiB,EAAE,IAAI,eAAe;GACvC;EACD,QAAQ;GACN,8BAA8B,EAAE,IAAI,eAAe;GACnD,8BAA8B,EAAE,IAAI,eAAe;GACnD,iBAAiB,EAAE,IAAI,eAAe;GACtC,iBAAiB,EAAE,IAAI,eAAe;GACvC;EACD,iBAAiB,EAAE,IAAI,eAAe;EACtC,iBAAiB,EAAE,IAAI,eAAe;EACvC;CACD,QAAQ;EACN,wBAAwB,EAAE,SAAS,QAAQ;EAC3C,gBAAgB;EAChB,YAAY,EAAE,SAAS,QAAQ;EAChC;CACF,EACF,CAAC"}

package/dist/cjs/components/scroll-area/use-scroll-area.cjs

@@ -1,12 +1,9 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_effect = require('../../utils/effect.cjs');
-const require_utils_index = require('../../utils/index.cjs');
-const require_props = require('../../core/components/props.cjs');
-require('../../core/index.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_effect = require("../../utils/effect.cjs");
+const require_utils_index = require("../../utils/index.cjs");
+const require_props = require("../../core/components/props.cjs");
 let react = require("react");
-
 //#region src/components/scroll-area/use-scroll-area.ts
 const useScrollArea = ({ id, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange, ...rest } = {}) => {
 	const [isHovered, setIsHovered] = (0, react.useState)(false);
@@ -103,7 +100,7 @@ const useScrollArea = ({ id, type = "hover", scrollHideDelay = 1e3, onScrollPosi
 		])
 	};
 };
-
 //#endregion
 exports.useScrollArea = useScrollArea;
+
 //# sourceMappingURL=use-scroll-area.cjs.map

package/dist/cjs/components/scroll-area/use-scroll-area.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-area.cjs","names":["mergeProps"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          style: { overflow: \"auto\" },\n          \"data-hidden\": dataAttr(isHidden),\n          \"data-hover\": dataAttr(isHovered),\n          \"data-never\": dataAttr(isNever),\n          \"data-scroll\": dataAttr(isScrolling),\n          tabIndex: 0,\n        },\n        isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n        rest,\n        props,\n        {\n          onMouseEnter,\n          onMouseLeave,\n          onPointerEnter: onMouseEnter,\n          onPointerLeave: onMouseLeave,\n          onScroll,\n        },\n      )(),\n    [\n      isNever,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      key,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,sCAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,yDAAkB,kDAAW,SAAS;CAC5C,MAAM,yBAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,iCAA2B,OAAU;CAC3C,MAAM,kCAA4B,OAAU;CAC5C,MAAM,kCAAuC,KAAK;CAClD,MAAM,mCAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,0CAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,4CAAiC;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,mCACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;AAEnE,2BAAyB;GAAE;GAAG;GAAG,CAAC;AAClC,iBAAe,UAAU;GAAE;GAAG;GAAG;AAEjC,MAAI,SAAS,YAAY,QAAS;AAElC,MAAI,CAAC,YAAa,gBAAe,KAAK;AAEtC,eAAa,cAAc,QAAQ;AAEnC,gBAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;AAED,4BAAgB;AACd,eAAa;AACX,OAAI,aAAa,QAAS,cAAa,aAAa,QAAQ;AAC5D,OAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;AAsCN,QAAO;EACL;EACA;EACA;EACA;EACA;EACA,sCAzCC,QAAQ,EAAE,KACTA,yBACE;GACE,OAAO,EAAE,UAAU,QAAQ;GAC3B,+DAAwB,SAAS;GACjC,8DAAuB,UAAU;GACjC,8DAAuB,QAAQ;GAC/B,+DAAwB,YAAY;GACpC,UAAU;GACX,EACD,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;GAAK,GAAG,EAAE,EAC5D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;GACD,CACF,EAAE,EACL;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}
+{"version":3,"file":"use-scroll-area.cjs","names":["mergeProps"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n  /**\n   * Delay in milliseconds before scrollbars are hidden.\n   *\n   * @default 1000\n   */\n  scrollHideDelay?: number\n  /**\n   * Scrollbar visibility type.\n   *\n   * @default 'hover'\n   */\n  type?: \"always\" | \"hover\" | \"never\" | \"scroll\"\n  /**\n   * Callback function for when the scroll position changes.\n   */\n  onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n  id,\n  type = \"hover\",\n  scrollHideDelay = 1000,\n  onScrollPositionChange,\n  ...rest\n}: UseScrollAreaProps = {}) => {\n  const [isHovered, setIsHovered] = useState<boolean>(false)\n  const [isScrolling, setIsScrolling] = useState<boolean>(false)\n  const isAlways = type === \"always\"\n  const isNever = type === \"never\"\n  const isHidden = !isAlways && !isHovered && !isScrolling\n  const isSafari = isMac() && vendor(/apple/i)\n  const uuid = useId()\n  const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n  const hoverTimeout = useRef<any>(undefined)\n  const scrollTimeout = useRef<any>(undefined)\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const scrollPosition = useRef({ x: 0, y: 0 })\n\n  useSafeLayoutEffect(() => {\n    if (!scrollAreaRef.current || !isSafari) return\n\n    scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n    scrollAreaRef.current.scrollTop = scrollPosition.current.y\n  })\n\n  const onMouseEnter = useCallback(() => {\n    if (type !== \"hover\") return\n\n    clearTimeout(hoverTimeout.current)\n\n    setIsHovered(true)\n  }, [type])\n\n  const onMouseLeave = useCallback(() => {\n    if (type !== \"hover\") return\n\n    hoverTimeout.current = setTimeout(\n      () => setIsHovered(false),\n      scrollHideDelay,\n    )\n  }, [scrollHideDelay, type])\n\n  const onScroll = useCallback(\n    (ev: UIEvent<HTMLDivElement>) => {\n      const el = ev.target as HTMLDivElement\n\n      const { scrollLeft: x, scrollTop: y } = el\n      const { x: prevX, y: prevY } = scrollPosition.current\n      const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n      onScrollPositionChange?.({ x, y })\n      scrollPosition.current = { x, y }\n\n      if (type !== \"scroll\" || isEqual) return\n\n      if (!isScrolling) setIsScrolling(true)\n\n      clearTimeout(scrollTimeout.current)\n\n      scrollTimeout.current = setTimeout(\n        () => setIsScrolling(false),\n        scrollHideDelay,\n      )\n    },\n    [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n  )\n\n  useEffect(() => {\n    return () => {\n      if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n      if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n    }\n  }, [])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          style: { overflow: \"auto\" },\n          \"data-hidden\": dataAttr(isHidden),\n          \"data-hover\": dataAttr(isHovered),\n          \"data-never\": dataAttr(isNever),\n          \"data-scroll\": dataAttr(isScrolling),\n          tabIndex: 0,\n        },\n        isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n        rest,\n        props,\n        {\n          onMouseEnter,\n          onMouseLeave,\n          onPointerEnter: onMouseEnter,\n          onPointerLeave: onMouseLeave,\n          onScroll,\n        },\n      )(),\n    [\n      isNever,\n      isHidden,\n      isHovered,\n      isScrolling,\n      isSafari,\n      key,\n      rest,\n      onMouseEnter,\n      onMouseLeave,\n      onScroll,\n    ],\n  )\n\n  return {\n    isAlways,\n    isHidden,\n    isHovered,\n    isNever,\n    isScrolling,\n    getRootProps,\n  }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":";;;;;;;AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAkC,MAAM;CAC1D,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAAoC,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,YAAA,GAAA,oBAAA,cAAA,QAAkB,KAAA,GAAA,oBAAA,cAAA,QAAW,SAAS;CAC5C,MAAM,QAAA,GAAA,MAAA,QAAc;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,gBAAA,GAAA,MAAA,QAA2B,KAAA,EAAU;CAC3C,MAAM,iBAAA,GAAA,MAAA,QAA4B,KAAA,EAAU;CAC5C,MAAM,iBAAA,GAAA,MAAA,QAAuC,KAAK;CAClD,MAAM,kBAAA,GAAA,MAAA,QAAwB;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAE7C,eAAA,0BAA0B;EACxB,IAAI,CAAC,cAAc,WAAW,CAAC,UAAU;EAEzC,cAAc,QAAQ,aAAa,eAAe,QAAQ;EAC1D,cAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,gBAAA,GAAA,MAAA,mBAAiC;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,aAAa,QAAQ;EAElC,aAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,gBAAA,GAAA,MAAA,mBAAiC;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,YAAA,GAAA,MAAA,cACH,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI;EAEnE,yBAAyB;GAAE;GAAG;GAAG,CAAC;EAClC,eAAe,UAAU;GAAE;GAAG;GAAG;EAEjC,IAAI,SAAS,YAAY,SAAS;EAElC,IAAI,CAAC,aAAa,eAAe,KAAK;EAEtC,aAAa,cAAc,QAAQ;EAEnC,cAAc,UAAU,iBAChB,eAAe,MAAM,EAC3B,gBACD;IAEH;EAAC;EAAa;EAAwB;EAAiB;EAAK,CAC7D;CAED,CAAA,GAAA,MAAA,iBAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS,aAAa,aAAa,QAAQ;GAC5D,IAAI,cAAc,SAAS,aAAa,cAAc,QAAQ;;IAE/D,EAAE,CAAC;CAsCN,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,eAAA,GAAA,MAAA,cAzCC,QAAQ,EAAE,KACTA,cAAAA,WACE;GACE,OAAO,EAAE,UAAU,QAAQ;GAC3B,gBAAA,GAAA,oBAAA,cAAA,UAAwB,SAAS;GACjC,eAAA,GAAA,oBAAA,cAAA,UAAuB,UAAU;GACjC,eAAA,GAAA,oBAAA,cAAA,UAAuB,QAAQ;GAC/B,gBAAA,GAAA,oBAAA,cAAA,UAAwB,YAAY;GACpC,UAAU;GACX,EACD,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;GAAK,GAAG,EAAE,EAC5D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;GACD,CACF,EAAE,EACL;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CASW;EACb"}

package/dist/cjs/components/segmented-control/index.cjs

@@ -1,13 +1,13 @@
-const require_segmented_control_style = require('./segmented-control.style.cjs');
-const require_use_segmented_control = require('./use-segmented-control.cjs');
-const require_segmented_control = require('./segmented-control.cjs');
-const require_namespace = require('./namespace.cjs');
-
-Object.defineProperty(exports, 'SegmentedControl', {
-  enumerable: true,
-  get: function () {
-    return require_namespace.namespace_exports;
-  }
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_segmented_control_style = require("./segmented-control.style.cjs");
+const require_use_segmented_control = require("./use-segmented-control.cjs");
+const require_segmented_control = require("./segmented-control.cjs");
+const require_namespace = require("./namespace.cjs");
+Object.defineProperty(exports, "SegmentedControl", {
+	enumerable: true,
+	get: function() {
+		return require_namespace.namespace_exports;
+	}
 });
 exports.SegmentedControlContext = require_use_segmented_control.SegmentedControlContext;
 exports.SegmentedControlDescendantsContext = require_use_segmented_control.SegmentedControlDescendantsContext;
@@ -20,4 +20,4 @@ exports.useSegmentedControlContext = require_use_segmented_control.useSegmentedC
 exports.useSegmentedControlDescendant = require_use_segmented_control.useSegmentedControlDescendant;
 exports.useSegmentedControlDescendants = require_use_segmented_control.useSegmentedControlDescendants;
 exports.useSegmentedControlItem = require_use_segmented_control.useSegmentedControlItem;
-exports.useSegmentedControlPropsContext = require_segmented_control.useSegmentedControlPropsContext;
+exports.useSegmentedControlPropsContext = require_segmented_control.useSegmentedControlPropsContext;

package/dist/cjs/components/segmented-control/namespace.cjs

@@ -1,9 +1,8 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_use_segmented_control = require('./use-segmented-control.cjs');
-const require_segmented_control = require('./segmented-control.cjs');
-
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_segmented_control = require("./use-segmented-control.cjs");
+const require_segmented_control = require("./segmented-control.cjs");
 //#region src/components/segmented-control/namespace.ts
-var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Context: () => require_use_segmented_control.SegmentedControlContext,
 	DescendantsContext: () => require_use_segmented_control.SegmentedControlDescendantsContext,
 	Item: () => require_segmented_control.SegmentedControlItem,
@@ -14,12 +13,12 @@ var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	useDescendants: () => require_use_segmented_control.useSegmentedControlDescendants,
 	usePropsContext: () => require_segmented_control.useSegmentedControlPropsContext
 });
-
 //#endregion
-Object.defineProperty(exports, 'namespace_exports', {
-  enumerable: true,
-  get: function () {
-    return namespace_exports;
-  }
+Object.defineProperty(exports, "namespace_exports", {
+	enumerable: true,
+	get: function() {
+		return namespace_exports;
+	}
 });
+
 //# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/segmented-control/segmented-control.cjs

@@ -1,18 +1,14 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_factory = require('../../core/system/factory.cjs');
-const require_create_component = require('../../core/components/create-component.cjs');
-require('../../core/index.cjs');
-const require_factory$1 = require('../motion/factory.cjs');
-require('../motion/index.cjs');
-const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
-const require_segmented_control_style = require('./segmented-control.style.cjs');
-const require_use_segmented_control = require('./use-segmented-control.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_factory = require("../../core/system/factory.cjs");
+const require_create_component = require("../../core/components/create-component.cjs");
+const require_factory$1 = require("../motion/factory.cjs");
+const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
+const require_segmented_control_style = require("./segmented-control.style.cjs");
+const require_use_segmented_control = require("./use-segmented-control.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react = require("motion/react");
-
 //#region src/components/segmented-control/segmented-control.tsx
 const { ComponentContext, PropsContext: SegmentedControlPropsContext, useComponentContext, usePropsContext: useSegmentedControlPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("segmented-control", require_segmented_control_style.segmentedControlStyle);
 /**
@@ -27,8 +23,8 @@ const SegmentedControlRoot = withProvider(({ children, items = [], orientation:
 	});
 	const cloneChildren = (0, react.useMemo)(() => {
 		if (children) return children;
-		else return items.map(({ label, ...rest$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlItem, {
-			...rest$1,
+		else return items.map(({ label, ...rest }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlItem, {
+			...rest,
 			children: label
 		}, index));
 	}, [children, items]);
@@ -101,10 +97,10 @@ const SegmentedControlIndicator = withContext(({ transition, ...props }) => {
 		...props
 	});
 }, "indicator")();
-
 //#endregion
 exports.SegmentedControlItem = SegmentedControlItem;
 exports.SegmentedControlPropsContext = SegmentedControlPropsContext;
 exports.SegmentedControlRoot = SegmentedControlRoot;
 exports.useSegmentedControlPropsContext = useSegmentedControlPropsContext;
+
 //# sourceMappingURL=segmented-control.cjs.map

package/dist/cjs/components/segmented-control/segmented-control.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.cjs","names":["createSlotComponent","segmentedControlStyle","useSegmentedControl","useValue","rest","SegmentedControlContext","SegmentedControlDescendantsContext","LayoutGroup","styled","useSegmentedControlItem","motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n  UseSegmentedControlItemProps,\n  UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n  SegmentedControlContext,\n  SegmentedControlDescendantsContext,\n  useSegmentedControl,\n  useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n  label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n  SegmentedControlRootProps,\n  \"indicatorProps\" | \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"onChange\">,\n    ThemeProps<SegmentedControlStyle>,\n    Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default []\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n  /**\n   * Props for the item component.\n   */\n  itemProps?: SegmentedControlItemProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SegmentedControlPropsContext,\n  useComponentContext,\n  usePropsContext: useSegmentedControlPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SegmentedControlRootProps,\n  SegmentedControlStyle,\n  ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see https://yamada-ui.com/docs/components/segmented-control\n */\nexport const SegmentedControlRoot = withProvider(\n  ({\n    children,\n    items = [],\n    orientation: orientationProp,\n    indicatorProps,\n    itemProps,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      name,\n      descendants,\n      disabled,\n      orientation,\n      readOnly,\n      setValue,\n      value,\n      getRootProps,\n    } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n    const cloneChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items.map(({ label, ...rest }, index) => (\n          <SegmentedControlItem key={index} {...rest}>\n            {label}\n          </SegmentedControlItem>\n        ))\n      }\n    }, [children, items])\n    const context = useMemo(\n      () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n      [id, name, disabled, readOnly, orientation, setValue, value],\n    )\n    const componentContext = useMemo(\n      () => ({ indicatorProps, itemProps }),\n      [itemProps, indicatorProps],\n    )\n\n    return (\n      <SegmentedControlContext value={context}>\n        <ComponentContext value={componentContext}>\n          <SegmentedControlDescendantsContext value={descendants}>\n            <LayoutGroup id={id}>\n              <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n            </LayoutGroup>\n          </SegmentedControlDescendantsContext>\n        </ComponentContext>\n      </SegmentedControlContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n  extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n  \"label\",\n  SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n  const { checked, getInputProps, getLabelProps } =\n    useSegmentedControlItem(rest)\n\n  return (\n    <styled.label {...getLabelProps()}>\n      <styled.input {...getInputProps()} />\n\n      <styled.span>{children}</styled.span>\n\n      {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n    </styled.label>\n  )\n}, \"item\")((props) => {\n  const { indicatorProps, itemProps } = useComponentContext()\n\n  return {\n    ...itemProps,\n    ...props,\n    indicatorProps: {\n      ...indicatorProps,\n      ...itemProps?.indicatorProps,\n      ...props.indicatorProps,\n    },\n  }\n}) as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n  \"div\",\n  SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n  return (\n    <motion.div\n      layoutDependency={false}\n      layoutId=\"indicator\"\n      transition={{ duration: 0.2, ...transition }}\n      {...props}\n    />\n  )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,6CAIF,qBAAqBC,sDAAsB;;;;;;AAS7C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,EAAE,EACV,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACEC,kDAAoB;EAAE,aAXEC,uCAAS,gBAAgB;EAWO,GAAG;EAAM,CAAC;CACtE,MAAM,yCAA8B;AAClC,MAAI,SACF,QAAO;MAEP,QAAO,MAAM,KAAK,EAAE,OAAO,GAAGC,UAAQ,UACpC,2CAAC;GAAiC,GAAIA;aACnC;KADwB,MAEJ,CACvB;IAEH,CAAC,UAAU,MAAM,CAAC;AAUrB,QACE,2CAACC;EAAwB,iCATlB;GAAE;GAAI;GAAM;GAAU;GAAa;GAAU;GAAU;GAAO,GACrE;GAAC;GAAI;GAAM;GAAU;GAAU;GAAa;GAAU;GAAM,CAC7D;YAQG,2CAAC;GAAiB,iCANb;IAAE;IAAgB;IAAW,GACpC,CAAC,WAAW,eAAe,CAC5B;aAKK,2CAACC;IAAmC,OAAO;cACzC,2CAACC;KAAgB;eACf,2CAACC,uBAAO;MAAI,GAAI,cAAc;gBAAG;OAA2B;MAChD;KACqB;IACpB;GACK;GAG9B,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAYH,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9BC,sDAAwB,KAAK;AAE/B,QACE,4CAACD,uBAAO;EAAM,GAAI,eAAe;;GAC/B,2CAACA,uBAAO,SAAM,GAAI,eAAe,GAAI;GAErC,2CAACA,uBAAO,QAAM,WAAuB;GAEpC,UAAU,2CAAC,6BAA0B,GAAI,iBAAkB,GAAG;;GAClD;GAEhB,OAAO,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,qBAAqB;AAE3D,QAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;GACV;EACF;EACD;AAMF,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;AAC9B,QACE,2CAACE,yBAAO;EACN,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;GAAY;EAC5C,GAAI;GACJ;GAEH,YAAY,EAAE"}
+{"version":3,"file":"segmented-control.cjs","names":["createSlotComponent","segmentedControlStyle","useSegmentedControl","useValue","SegmentedControlContext","SegmentedControlDescendantsContext","LayoutGroup","styled","useSegmentedControlItem","motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n  UseSegmentedControlItemProps,\n  UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n  SegmentedControlContext,\n  SegmentedControlDescendantsContext,\n  useSegmentedControl,\n  useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n  label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n  SegmentedControlRootProps,\n  \"indicatorProps\" | \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n  extends\n    Omit<HTMLStyledProps, \"defaultValue\" | \"onChange\">,\n    ThemeProps<SegmentedControlStyle>,\n    Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n  /**\n   * If provided, generate segmented control buttons but based on items.\n   *\n   * @default []\n   */\n  items?: SegmentedControlItem[]\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n  /**\n   * Props for the item component.\n   */\n  itemProps?: SegmentedControlItemProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SegmentedControlPropsContext,\n  useComponentContext,\n  usePropsContext: useSegmentedControlPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SegmentedControlRootProps,\n  SegmentedControlStyle,\n  ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/**\n * `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n *\n * @see https://yamada-ui.com/docs/components/segmented-control\n */\nexport const SegmentedControlRoot = withProvider(\n  ({\n    children,\n    items = [],\n    orientation: orientationProp,\n    indicatorProps,\n    itemProps,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const {\n      id,\n      name,\n      descendants,\n      disabled,\n      orientation,\n      readOnly,\n      setValue,\n      value,\n      getRootProps,\n    } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n    const cloneChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items.map(({ label, ...rest }, index) => (\n          <SegmentedControlItem key={index} {...rest}>\n            {label}\n          </SegmentedControlItem>\n        ))\n      }\n    }, [children, items])\n    const context = useMemo(\n      () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n      [id, name, disabled, readOnly, orientation, setValue, value],\n    )\n    const componentContext = useMemo(\n      () => ({ indicatorProps, itemProps }),\n      [itemProps, indicatorProps],\n    )\n\n    return (\n      <SegmentedControlContext value={context}>\n        <ComponentContext value={componentContext}>\n          <SegmentedControlDescendantsContext value={descendants}>\n            <LayoutGroup id={id}>\n              <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n            </LayoutGroup>\n          </SegmentedControlDescendantsContext>\n        </ComponentContext>\n      </SegmentedControlContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n  extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n  \"label\",\n  SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n  const { checked, getInputProps, getLabelProps } =\n    useSegmentedControlItem(rest)\n\n  return (\n    <styled.label {...getLabelProps()}>\n      <styled.input {...getInputProps()} />\n\n      <styled.span>{children}</styled.span>\n\n      {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n    </styled.label>\n  )\n}, \"item\")((props) => {\n  const { indicatorProps, itemProps } = useComponentContext()\n\n  return {\n    ...itemProps,\n    ...props,\n    indicatorProps: {\n      ...indicatorProps,\n      ...itemProps?.indicatorProps,\n      ...props.indicatorProps,\n    },\n  }\n}) as GenericsComponent<{\n  <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n  \"div\",\n  SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n  return (\n    <motion.div\n      layoutDependency={false}\n      layoutId=\"indicator\"\n      transition={{ duration: 0.2, ...transition }}\n      {...props}\n    />\n  )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,sBAAsB;;;;;;AAS7C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,EAAE,EACV,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CAEJ,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACEC,8BAAAA,oBAAoB;EAAE,aAXEC,8BAAAA,SAAS,gBAWqB;EAAE,GAAG;EAAM,CAAC;CACtE,MAAM,iBAAA,GAAA,MAAA,eAA8B;EAClC,IAAI,UACF,OAAO;OAEP,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAkC,GAAI;aACnC;GACoB,EAFI,MAEJ,CACvB;IAEH,CAAC,UAAU,MAAM,CAAC;CAUrB,OACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,yBAAD;EAAyB,QAAA,GAAA,MAAA,gBATlB;GAAE;GAAI;GAAM;GAAU;GAAa;GAAU;GAAU;GAAO,GACrE;GAAC;GAAI;GAAM;GAAU;GAAU;GAAa;GAAU;GAAM,CAQrB;YACrC,iBAAA,GAAA,kBAAA,KAAC,kBAAD;GAAkB,QAAA,GAAA,MAAA,gBANb;IAAE;IAAgB;IAAW,GACpC,CAAC,WAAW,eAAe,CAKgB;aACvC,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,oCAAD;IAAoC,OAAO;cACzC,iBAAA,GAAA,kBAAA,KAACC,aAAAA,aAAD;KAAiB;eACf,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,OAAO,KAAR;MAAY,GAAI,cAAc;gBAAG;MAA2B,CAAA;KAChD,CAAA;IACqB,CAAA;GACpB,CAAA;EACK,CAAA;GAG9B,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAYH,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9BC,8BAAAA,wBAAwB,KAAK;CAE/B,OACE,iBAAA,GAAA,kBAAA,MAACD,gBAAAA,OAAO,OAAR;EAAc,GAAI,eAAe;YAAjC;GACE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,eAAe,EAAI,CAAA;GAErC,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,OAAO,MAAR,EAAc,UAAuB,CAAA;GAEpC,UAAU,iBAAA,GAAA,kBAAA,KAAC,2BAAD,EAA2B,GAAI,gBAAkB,CAAA,GAAG;GAClD;;GAEhB,OAAO,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,qBAAqB;CAE3D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;GACV;EACF;EACD;AAMF,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,iBAAA,GAAA,kBAAA,KAACE,kBAAAA,OAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;GAAY;EAC5C,GAAI;EACJ,CAAA;GAEH,YAAY,EAAE"}