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

package/dist/esm/components/ripple/ripple.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.style.js","names":[],"sources":["../../../../src/components/ripple/ripple.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const rippleStyle = defineComponentStyle({\n  base: {\n    rounded: \"full\",\n    zIndex: \"kurillin\",\n  },\n})\n\nexport type RippleStyle = typeof rippleStyle\n"],"mappings":";;;;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,SAAS;CACT,QAAQ;CACT,EACF,CAAC"}
+{"version":3,"file":"ripple.style.js","names":[],"sources":["../../../../src/components/ripple/ripple.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const rippleStyle = defineComponentStyle({\n  base: {\n    rounded: \"full\",\n    zIndex: \"kurillin\",\n  },\n})\n\nexport type RippleStyle = typeof rippleStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,SAAS;CACT,QAAQ;CACT,EACF,CAAC"}

package/dist/esm/components/ripple/use-ripple.js

@@ -1,8 +1,6 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { useCallback, useState } from "react";
-
 //#region src/components/ripple/use-ripple.ts
 const useRipple = ({ disabled, ...rest } = {}) => {
 	const [ripples, setRipples] = useState([]);
@@ -26,7 +24,7 @@ const useRipple = ({ disabled, ...rest } = {}) => {
 		onClick: (0, utils_exports.handlerAll)(onClick, rest.onClick)
 	};
 };
-
 //#endregion
 export { useRipple };
+
 //# sourceMappingURL=use-ripple.js.map

package/dist/esm/components/ripple/use-ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-ripple.js","names":["onClick: MouseEventHandler<Y>"],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n  key: Key\n  size: number\n  x: number\n  y: number\n}\n\nexport interface UseRippleProps<Y = HTMLElement> {\n  disabled?: boolean\n  onClick?: MouseEventHandler<Y>\n}\n\nexport const useRipple = <Y = HTMLElement>({\n  disabled,\n  ...rest\n}: UseRippleProps<Y> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onClick: MouseEventHandler<Y> = useCallback(\n    (ev) => {\n      if (disabled) return\n\n      const trigger = ev.currentTarget as unknown as Element\n\n      const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n      const rect = trigger.getBoundingClientRect()\n\n      setRipples((prev) => [\n        ...prev,\n        {\n          key: uuid(),\n          size,\n          x: ev.clientX - rect.x - size / 2,\n          y: ev.clientY - rect.y - size / 2,\n        },\n      ])\n    },\n    [disabled],\n  )\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onClear,\n    onClick: handlerAll(onClick, rest.onClick),\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;AAkBA,MAAa,aAA8B,EACzC,UACA,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,CAAC,SAAS,cAAc,SAA0B,EAAE,CAAC;CAE3D,MAAMA,UAAgC,aACnC,OAAO;AACN,MAAI,SAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,aAAa;EAChE,MAAM,OAAO,QAAQ,uBAAuB;AAE5C,cAAY,SAAS,CACnB,GAAG,MACH;GACE,8BAAW;GACX;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GACjC,CACF,CAAC;IAEJ,CAAC,SAAS,CACX;AAMD,QAAO;EACL;EACA,SANc,aAAa,QAAa;AACxC,eAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,IAAI,CAAC;KAC5D,EAAE,CAAC;EAKJ,uCAAoB,SAAS,KAAK,QAAQ;EAC3C"}
+{"version":3,"file":"use-ripple.js","names":[],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n  key: Key\n  size: number\n  x: number\n  y: number\n}\n\nexport interface UseRippleProps<Y = HTMLElement> {\n  disabled?: boolean\n  onClick?: MouseEventHandler<Y>\n}\n\nexport const useRipple = <Y = HTMLElement>({\n  disabled,\n  ...rest\n}: UseRippleProps<Y> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onClick: MouseEventHandler<Y> = useCallback(\n    (ev) => {\n      if (disabled) return\n\n      const trigger = ev.currentTarget as unknown as Element\n\n      const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n      const rect = trigger.getBoundingClientRect()\n\n      setRipples((prev) => [\n        ...prev,\n        {\n          key: uuid(),\n          size,\n          x: ev.clientX - rect.x - size / 2,\n          y: ev.clientY - rect.y - size / 2,\n        },\n      ])\n    },\n    [disabled],\n  )\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onClear,\n    onClick: handlerAll(onClick, rest.onClick),\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;AAkBA,MAAa,aAA8B,EACzC,UACA,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,CAAC,SAAS,cAAc,SAA0B,EAAE,CAAC;CAE3D,MAAM,UAAgC,aACnC,OAAO;EACN,IAAI,UAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,aAAa;EAChE,MAAM,OAAO,QAAQ,uBAAuB;EAE5C,YAAY,SAAS,CACnB,GAAG,MACH;GACE,MAAA,GAAA,cAAA,OAAW;GACX;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GACjC,CACF,CAAC;IAEJ,CAAC,SAAS,CACX;CAMD,OAAO;EACL;EACA,SANc,aAAa,QAAa;GACxC,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,IAAI,CAAC;KAC5D,EAAE,CAII;EACP,UAAA,GAAA,cAAA,YAAoB,SAAS,KAAK,QAAQ;EAC3C"}

package/dist/esm/components/rotate/index.js

@@ -1,4 +1,3 @@
 import { rotateStyle } from "./rotate.style.js";
 import { Rotate, RotatePropsContext, useRotatePropsContext } from "./rotate.js";
-
-export { Rotate, RotatePropsContext, rotateStyle, useRotatePropsContext };
+export { Rotate, RotatePropsContext, rotateStyle, useRotatePropsContext };

package/dist/esm/components/rotate/rotate.js

@@ -1,17 +1,13 @@
 "use client";
-
 import { utils_exports } from "../../utils/index.js";
 import { useInjectVarsIntoCss, useInjectVarsIntoProps } from "../../core/css/use-inject-vars.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { motion as motion$1 } from "../motion/factory.js";
-import "../motion/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { rotateStyle } from "./rotate.style.js";
 import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useAnimation } from "motion/react";
-
 //#region src/components/rotate/rotate.tsx
 const { PropsContext: RotatePropsContext, usePropsContext: useRotatePropsContext, withContext } = createComponent("rotate", rotateStyle);
 /**
@@ -75,7 +71,7 @@ const Rotate = withContext(({ defaultValue = "from", delay = 0, disabled, durati
 		opacity: "{opacity}"
 	};
 });
-
 //#endregion
 export { Rotate, RotatePropsContext, useRotatePropsContext };
+
 //# sourceMappingURL=rotate.js.map

package/dist/esm/components/rotate/rotate.js.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.js","names":["motion"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n  createComponent,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n  extends\n    Omit<HTMLMotionProps<\"button\">, \"onChange\" | \"rotate\">,\n    ThemeProps<RotateStyle> {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactNode\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactNode\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: KeyframeIdent\n  /**\n   * The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The animation rotation.\n   *\n   * @default 45\n   */\n  rotate?: number\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: KeyframeIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n  PropsContext: RotatePropsContext,\n  usePropsContext: useRotatePropsContext,\n  withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/**\n * `Rotate` is an animation component that alternately rotates two elements as they switch.\n *\n * @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n  ({\n    defaultValue = \"from\",\n    delay = 0,\n    disabled,\n    duration = 0.4,\n    from,\n    readOnly,\n    rotate = 45,\n    to,\n    value: valueProp,\n    onChange,\n    onClick: onClickProp,\n    ...rest\n  }) => {\n    const opacity = \"var(--opacity)\"\n    const animate = useAnimation()\n    const [value, setValue] = useControllableState<KeyframeIdent>({\n      defaultValue,\n      value: valueProp,\n      onChange,\n    })\n\n    const onClick = useCallback(async () => {\n      if (readOnly) return\n\n      await animate.start({\n        opacity: 0,\n        rotate: `${rotate}deg`,\n        transition: { delay, duration },\n      })\n\n      setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n      await animate.start({\n        opacity: \"var(--opacity)\",\n        rotate: \"0deg\",\n        transition: { duration },\n      })\n    }, [readOnly, animate, rotate, duration, delay, setValue])\n\n    return (\n      <motion.button\n        type=\"button\"\n        data-disabled={dataAttr(disabled)}\n        data-readonly={dataAttr(readOnly)}\n        data-value={value}\n        animate={animate}\n        custom={{ rotate }}\n        disabled={disabled}\n        initial={{ opacity, rotate: \"0deg\" }}\n        onClick={handlerAll(onClickProp, onClick)}\n        {...rest}\n      >\n        {value === \"from\" ? from : to}\n      </motion.button>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n  const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n  return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,YAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,UAAU,cAAc;CAC9B,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,UAAU,YAAY,YAAY;AACtC,MAAI,SAAU;AAEd,QAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;IAAU;GAChC,CAAC;AAEF,YAAU,SAAU,SAAS,SAAS,OAAO,OAAQ;AAErD,QAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,UAAU;GACzB,CAAC;IACD;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;EAAS,CAAC;AAE1D,QACE,oBAACA,SAAO;EACN,MAAK;EACL,6CAAwB,SAAS;EACjC,6CAAwB,SAAS;EACjC,cAAY;EACH;EACT,QAAQ,EAAE,QAAQ;EACR;EACV,SAAS;GAAE;GAAS,QAAQ;GAAQ;EACpC,uCAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;GACb;EAGrB,CAAC,SAAY,UAAU;CACtB,MAAM,MAAM,qBAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;AAGnE,QAAO;EAAE,GAFI,uBAAuB,OAAO,EAAE,SAAS,WAAW,CAAC;EAEhD;EAAK,SAAS;EAAa;EAC7C"}
+{"version":3,"file":"rotate.js","names":["motion"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n  createComponent,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n  extends\n    Omit<HTMLMotionProps<\"button\">, \"onChange\" | \"rotate\">,\n    ThemeProps<RotateStyle> {\n  /**\n   * Passing React elements to \"from\" is required.\n   */\n  from: ReactNode\n  /**\n   * Passing React elements to \"to\" is required.\n   */\n  to: ReactNode\n  /**\n   * You can set the initial state.\n   *\n   * @default 'from'\n   */\n  defaultValue?: KeyframeIdent\n  /**\n   * The animation delay.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * If `true`, the component is disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The animation duration.\n   *\n   * @default 0.4\n   */\n  duration?: number\n  /**\n   * If `true`, the component is readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The animation rotation.\n   *\n   * @default 45\n   */\n  rotate?: number\n  /**\n   * Use this when you want to control the animation from outside the component.\n   */\n  value?: KeyframeIdent\n  /**\n   * This is a callback function that is called when the animation state changes.\n   */\n  onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n  PropsContext: RotatePropsContext,\n  usePropsContext: useRotatePropsContext,\n  withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/**\n * `Rotate` is an animation component that alternately rotates two elements as they switch.\n *\n * @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n  ({\n    defaultValue = \"from\",\n    delay = 0,\n    disabled,\n    duration = 0.4,\n    from,\n    readOnly,\n    rotate = 45,\n    to,\n    value: valueProp,\n    onChange,\n    onClick: onClickProp,\n    ...rest\n  }) => {\n    const opacity = \"var(--opacity)\"\n    const animate = useAnimation()\n    const [value, setValue] = useControllableState<KeyframeIdent>({\n      defaultValue,\n      value: valueProp,\n      onChange,\n    })\n\n    const onClick = useCallback(async () => {\n      if (readOnly) return\n\n      await animate.start({\n        opacity: 0,\n        rotate: `${rotate}deg`,\n        transition: { delay, duration },\n      })\n\n      setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n      await animate.start({\n        opacity: \"var(--opacity)\",\n        rotate: \"0deg\",\n        transition: { duration },\n      })\n    }, [readOnly, animate, rotate, duration, delay, setValue])\n\n    return (\n      <motion.button\n        type=\"button\"\n        data-disabled={dataAttr(disabled)}\n        data-readonly={dataAttr(readOnly)}\n        data-value={value}\n        animate={animate}\n        custom={{ rotate }}\n        disabled={disabled}\n        initial={{ opacity, rotate: \"0deg\" }}\n        onClick={handlerAll(onClickProp, onClick)}\n        {...rest}\n      >\n        {value === \"from\" ? from : to}\n      </motion.button>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n  const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n  return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,UAAU,YAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,UAAU,cAAc;CAC9B,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,UAAU,YAAY,YAAY;EACtC,IAAI,UAAU;EAEd,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;IAAU;GAChC,CAAC;EAEF,UAAU,SAAU,SAAS,SAAS,OAAO,OAAQ;EAErD,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,UAAU;GACzB,CAAC;IACD;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;EAAS,CAAC;CAE1D,OACE,oBAACA,SAAO,QAAR;EACE,MAAK;EACL,kBAAA,GAAA,cAAA,UAAwB,SAAS;EACjC,kBAAA,GAAA,cAAA,UAAwB,SAAS;EACjC,cAAY;EACH;EACT,QAAQ,EAAE,QAAQ;EACR;EACV,SAAS;GAAE;GAAS,QAAQ;GAAQ;EACpC,UAAA,GAAA,cAAA,YAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;EACb,CAAA;EAGrB,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,MAAM,qBAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;CAGnE,OAAO;EAAE,GAFI,uBAAuB,OAAO,EAAE,SAAS,WAAW,CAEjD;EAAE;EAAK,SAAS;EAAa;EAC7C"}

package/dist/esm/components/rotate/rotate.style.js

@@ -1,6 +1,4 @@
 import { defineComponentStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/rotate/rotate.style.ts
 const rotateStyle = defineComponentStyle({ base: {
 	opacity: 1,
@@ -10,7 +8,7 @@ const rotateStyle = defineComponentStyle({ base: {
 	_readOnly: { layerStyle: "readOnly" },
 	_disabled: { layerStyle: "disabled" }
 } });
-
 //#endregion
 export { rotateStyle };
+
 //# sourceMappingURL=rotate.style.js.map

package/dist/esm/components/rotate/rotate.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.style.js","names":[],"sources":["../../../../src/components/rotate/rotate.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const rotateStyle = defineComponentStyle({\n  base: {\n    opacity: 1,\n    rounded: \"l1\",\n    userSelect: \"none\",\n    width: \"fit-content\",\n    _readOnly: {\n      layerStyle: \"readOnly\",\n    },\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n  },\n})\n\nexport type RotateStyle = typeof rotateStyle\n"],"mappings":";;;;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CACP,WAAW,EACT,YAAY,YACb;CACD,WAAW,EACT,YAAY,YACb;CACF,EACF,CAAC"}
+{"version":3,"file":"rotate.style.js","names":[],"sources":["../../../../src/components/rotate/rotate.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const rotateStyle = defineComponentStyle({\n  base: {\n    opacity: 1,\n    rounded: \"l1\",\n    userSelect: \"none\",\n    width: \"fit-content\",\n    _readOnly: {\n      layerStyle: \"readOnly\",\n    },\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n  },\n})\n\nexport type RotateStyle = typeof rotateStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,SAAS;CACT,SAAS;CACT,YAAY;CACZ,OAAO;CACP,WAAW,EACT,YAAY,YACb;CACD,WAAW,EACT,YAAY,YACb;CACF,EACF,CAAC"}

package/dist/esm/components/saturation-slider/index.js

@@ -2,5 +2,4 @@ import { saturationSliderStyle } from "./saturation-slider.style.js";
 import { useSaturationSlider } from "./use-saturation-slider.js";
 import { SaturationSliderPropsContext, SaturationSliderRoot, SaturationSliderThumb, SaturationSliderTrack, useSaturationSliderPropsContext } from "./saturation-slider.js";
 import { namespace_exports } from "./namespace.js";
-
-export { namespace_exports as SaturationSlider, SaturationSliderPropsContext, SaturationSliderRoot, SaturationSliderThumb, SaturationSliderTrack, saturationSliderStyle, useSaturationSlider, useSaturationSliderPropsContext };
+export { namespace_exports as SaturationSlider, SaturationSliderPropsContext, SaturationSliderRoot, SaturationSliderThumb, SaturationSliderTrack, saturationSliderStyle, useSaturationSlider, useSaturationSliderPropsContext };

package/dist/esm/components/saturation-slider/namespace.js

@@ -1,6 +1,5 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { SaturationSliderPropsContext, SaturationSliderRoot, SaturationSliderThumb, SaturationSliderTrack, useSaturationSliderPropsContext } from "./saturation-slider.js";
-
 //#region src/components/saturation-slider/namespace.ts
 var namespace_exports = /* @__PURE__ */ __exportAll({
 	PropsContext: () => SaturationSliderPropsContext,
@@ -9,7 +8,7 @@ var namespace_exports = /* @__PURE__ */ __exportAll({
 	Track: () => SaturationSliderTrack,
 	usePropsContext: () => useSaturationSliderPropsContext
 });
-
 //#endregion
 export { namespace_exports };
+
 //# sourceMappingURL=namespace.js.map

package/dist/esm/components/saturation-slider/saturation-slider.js

@@ -1,13 +1,10 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { saturationSliderStyle } from "./saturation-slider.style.js";
 import { useSaturationSlider } from "./use-saturation-slider.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/saturation-slider/saturation-slider.tsx
 const { ComponentContext, PropsContext: SaturationSliderPropsContext, useComponentContext, usePropsContext: useSaturationSliderPropsContext, withContext, withProvider } = createSlotComponent("saturation-slider", saturationSliderStyle);
 /**
@@ -47,7 +44,7 @@ const SaturationSliderThumb = withContext("div", "thumb")(void 0, (props) => {
 	const { getThumbProps } = useComponentContext();
 	return getThumbProps(props);
 });
-
 //#endregion
 export { SaturationSliderPropsContext, SaturationSliderRoot, SaturationSliderThumb, SaturationSliderTrack, useSaturationSliderPropsContext };
+
 //# sourceMappingURL=saturation-slider.js.map

package/dist/esm/components/saturation-slider/saturation-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"saturation-slider.js","names":[],"sources":["../../../../src/components/saturation-slider/saturation-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SaturationSliderStyle } from \"./saturation-slider.style\"\nimport type {\n  UseSaturationSliderProps,\n  UseSaturationSliderReturn,\n} from \"./use-saturation-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { saturationSliderStyle } from \"./saturation-slider.style\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ninterface ComponentContext extends Pick<\n  UseSaturationSliderReturn,\n  \"getThumbProps\" | \"getTrackProps\"\n> {}\n\nexport interface SaturationSliderRootProps\n  extends\n    Merge<HTMLStyledProps, UseSaturationSliderProps>,\n    ThemeProps<SaturationSliderStyle> {\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the thumb element.\n   */\n  thumbProps?: SaturationSliderThumbProps\n  /**\n   * Props for the track element.\n   */\n  trackProps?: SaturationSliderTrackProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SaturationSliderPropsContext,\n  useComponentContext,\n  usePropsContext: useSaturationSliderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SaturationSliderRootProps,\n  SaturationSliderStyle,\n  ComponentContext\n>(\"saturation-slider\", saturationSliderStyle)\n\nexport { SaturationSliderPropsContext, useSaturationSliderPropsContext }\n\n/**\n * `SaturationSlider` is a component used to allow the user to select a color saturation.\n *\n * @see https://yamada-ui.com/docs/components/saturation-slider\n */\nexport const SaturationSliderRoot = withProvider<\n  \"input\",\n  SaturationSliderRootProps\n>(({ children, inputProps, thumbProps, trackProps, ...rest }) => {\n  const { getInputProps, getRootProps, getThumbProps, getTrackProps } =\n    useSaturationSlider(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return (\n      <SaturationSliderTrack {...trackProps}>\n        <SaturationSliderThumb {...thumbProps} />\n      </SaturationSliderTrack>\n    )\n  }, [children, thumbProps, trackProps])\n  const context = useMemo(\n    () => ({ getThumbProps, getTrackProps }),\n    [getThumbProps, getTrackProps],\n  )\n\n  return (\n    <ComponentContext value={context}>\n      <styled.div {...getRootProps()}>\n        <styled.input {...getInputProps(inputProps)} />\n        {computedChildren}\n      </styled.div>\n    </ComponentContext>\n  )\n}, \"root\")()\n\nexport interface SaturationSliderTrackProps extends HTMLStyledProps {}\n\nexport const SaturationSliderTrack = withContext<\n  \"div\",\n  SaturationSliderTrackProps\n>(\"div\", \"track\")(undefined, (props) => {\n  const { getTrackProps } = useComponentContext()\n\n  return getTrackProps(props)\n})\n\nexport interface SaturationSliderThumbProps extends HTMLStyledProps {}\n\nexport const SaturationSliderThumb = withContext<\n  \"div\",\n  SaturationSliderThumbProps\n>(\"div\", \"thumb\")(undefined, (props) => {\n  const { getThumbProps } = useComponentContext()\n\n  return getThumbProps(props)\n})\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACE,oBAIF,qBAAqB,sBAAsB;;;;;;AAS7C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClD,oBAAoB,KAAK;CAC3B,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SACE,oBAAC;GAAsB,GAAI;aACzB,oBAAC,yBAAsB,GAAI,aAAc;IACnB;IAEzB;EAAC;EAAU;EAAY;EAAW,CAAC;AAMtC,QACE,oBAAC;EAAiB,OANJ,eACP;GAAE;GAAe;GAAe,GACvC,CAAC,eAAe,cAAc,CAC/B;YAIG,qBAAC,OAAO;GAAI,GAAI,cAAc;cAC5B,oBAAC,OAAO,SAAM,GAAI,cAAc,WAAW,GAAI,EAC9C;IACU;GACI;GAEpB,OAAO,EAAE;AAIZ,MAAa,wBAAwB,YAGnC,OAAO,QAAQ,CAAC,SAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,qBAAqB;AAE/C,QAAO,cAAc,MAAM;EAC3B;AAIF,MAAa,wBAAwB,YAGnC,OAAO,QAAQ,CAAC,SAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,qBAAqB;AAE/C,QAAO,cAAc,MAAM;EAC3B"}
+{"version":3,"file":"saturation-slider.js","names":[],"sources":["../../../../src/components/saturation-slider/saturation-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SaturationSliderStyle } from \"./saturation-slider.style\"\nimport type {\n  UseSaturationSliderProps,\n  UseSaturationSliderReturn,\n} from \"./use-saturation-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { saturationSliderStyle } from \"./saturation-slider.style\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ninterface ComponentContext extends Pick<\n  UseSaturationSliderReturn,\n  \"getThumbProps\" | \"getTrackProps\"\n> {}\n\nexport interface SaturationSliderRootProps\n  extends\n    Merge<HTMLStyledProps, UseSaturationSliderProps>,\n    ThemeProps<SaturationSliderStyle> {\n  /**\n   * Props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for the thumb element.\n   */\n  thumbProps?: SaturationSliderThumbProps\n  /**\n   * Props for the track element.\n   */\n  trackProps?: SaturationSliderTrackProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SaturationSliderPropsContext,\n  useComponentContext,\n  usePropsContext: useSaturationSliderPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  SaturationSliderRootProps,\n  SaturationSliderStyle,\n  ComponentContext\n>(\"saturation-slider\", saturationSliderStyle)\n\nexport { SaturationSliderPropsContext, useSaturationSliderPropsContext }\n\n/**\n * `SaturationSlider` is a component used to allow the user to select a color saturation.\n *\n * @see https://yamada-ui.com/docs/components/saturation-slider\n */\nexport const SaturationSliderRoot = withProvider<\n  \"input\",\n  SaturationSliderRootProps\n>(({ children, inputProps, thumbProps, trackProps, ...rest }) => {\n  const { getInputProps, getRootProps, getThumbProps, getTrackProps } =\n    useSaturationSlider(rest)\n  const computedChildren = useMemo(() => {\n    if (children) return children\n\n    return (\n      <SaturationSliderTrack {...trackProps}>\n        <SaturationSliderThumb {...thumbProps} />\n      </SaturationSliderTrack>\n    )\n  }, [children, thumbProps, trackProps])\n  const context = useMemo(\n    () => ({ getThumbProps, getTrackProps }),\n    [getThumbProps, getTrackProps],\n  )\n\n  return (\n    <ComponentContext value={context}>\n      <styled.div {...getRootProps()}>\n        <styled.input {...getInputProps(inputProps)} />\n        {computedChildren}\n      </styled.div>\n    </ComponentContext>\n  )\n}, \"root\")()\n\nexport interface SaturationSliderTrackProps extends HTMLStyledProps {}\n\nexport const SaturationSliderTrack = withContext<\n  \"div\",\n  SaturationSliderTrackProps\n>(\"div\", \"track\")(undefined, (props) => {\n  const { getTrackProps } = useComponentContext()\n\n  return getTrackProps(props)\n})\n\nexport interface SaturationSliderThumbProps extends HTMLStyledProps {}\n\nexport const SaturationSliderThumb = withContext<\n  \"div\",\n  SaturationSliderThumbProps\n>(\"div\", \"thumb\")(undefined, (props) => {\n  const { getThumbProps } = useComponentContext()\n\n  return getThumbProps(props)\n})\n"],"mappings":";;;;;;;;AAqCA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACE,oBAIF,qBAAqB,sBAAsB;;;;;;AAS7C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClD,oBAAoB,KAAK;CAC3B,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,oBAAC,uBAAD;GAAuB,GAAI;aACzB,oBAAC,uBAAD,EAAuB,GAAI,YAAc,CAAA;GACnB,CAAA;IAEzB;EAAC;EAAU;EAAY;EAAW,CAAC;CAMtC,OACE,oBAAC,kBAAD;EAAkB,OANJ,eACP;GAAE;GAAe;GAAe,GACvC,CAAC,eAAe,cAAc,CAIE;YAC9B,qBAAC,OAAO,KAAR;GAAY,GAAI,cAAc;aAA9B,CACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,WAAW,EAAI,CAAA,EAC9C,iBACU;;EACI,CAAA;GAEpB,OAAO,EAAE;AAIZ,MAAa,wBAAwB,YAGnC,OAAO,QAAQ,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,qBAAqB;CAE/C,OAAO,cAAc,MAAM;EAC3B;AAIF,MAAa,wBAAwB,YAGnC,OAAO,QAAQ,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,qBAAqB;CAE/C,OAAO,cAAc,MAAM;EAC3B"}

package/dist/esm/components/saturation-slider/saturation-slider.style.js

@@ -1,10 +1,6 @@
 import { defineComponentSlotStyle } from "../../core/system/config.js";
-import "../../core/index.js";
 import { sliderStyle } from "../slider/slider.style.js";
-import "../slider/index.js";
 import { hueSliderStyle } from "../hue-slider/hue-slider.style.js";
-import "../hue-slider/index.js";
-
 //#region src/components/saturation-slider/saturation-slider.style.ts
 const saturationSliderStyle = defineComponentSlotStyle({
 	base: {
@@ -40,7 +36,13 @@ const saturationSliderStyle = defineComponentSlotStyle({
 			position: "relative"
 		}
 	},
-	props: { shape: {
+	props: { 
+	/**
+	* The shape of the thumb.
+	*
+	* @default 'circle'
+	*/
+shape: {
 		circle: { root: {
 			...sliderStyle.props?.shape.circle.root,
 			"--root-rounded": "radii.l2"
@@ -66,7 +68,7 @@ const saturationSliderStyle = defineComponentSlotStyle({
 		shape: "circle"
 	}
 });
-
 //#endregion
 export { saturationSliderStyle };
+
 //# sourceMappingURL=saturation-slider.style.js.map

package/dist/esm/components/saturation-slider/saturation-slider.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"saturation-slider.style.js","names":[],"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,wBAAwB,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,GAAG,YAAY,MAAM;GACrB,GAAG,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,EAML,OAAO;EACL,QAAQ,EACN,MAAM;GACJ,GAAG,YAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACD,SAAS,EACP,MAAM;GACJ,GAAG,YAAY,OAAO,MAAM,QAAQ;GACpC,kBAAkB;GACnB,EACF;EACD,QAAQ,EACN,MAAM;GACJ,GAAG,YAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACF,EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"saturation-slider.style.js","names":[],"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,wBAAwB,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,GAAG,YAAY,MAAM;GACrB,GAAG,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,GAAG,YAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACD,SAAS,EACP,MAAM;GACJ,GAAG,YAAY,OAAO,MAAM,QAAQ;GACpC,kBAAkB;GACnB,EACF;EACD,QAAQ,EACN,MAAM;GACJ,GAAG,YAAY,OAAO,MAAM,OAAO;GACnC,kBAAkB;GACnB,EACF;EACF,EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACD,IAAI,EACF,MAAM,EAAE,gBAAgB,eAAe,OAAO,GAAG,KAAK,iBAAiB,EACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,OAAO;EACR;CACF,CAAC"}

package/dist/esm/components/saturation-slider/use-saturation-slider.js

@@ -1,18 +1,13 @@
 "use client";
-
 import { runKeyAction, visuallyHiddenAttributes } from "../../utils/dom.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
 import { mergeProps } from "../../core/components/props.js";
-import "../../core/index.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
-import "../../providers/i18n-provider/index.js";
 import { usePanEvent } from "../../hooks/use-pan-event/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
-import "../field/index.js";
 import { useCallback } from "react";
-
 //#region src/components/saturation-slider/use-saturation-slider.ts
 function clampValue(value) {
 	return [
@@ -36,30 +31,30 @@ const useSaturationSlider = (props = {}) => {
 	const [h, s, v] = clampValue(value);
 	const interactive = !(disabled || readOnly);
 	const [_, getPanEventProps] = 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 = useCallback(([h$1, s$1, v$1]) => {
+	const onChange = useCallback(([h, s, v]) => {
 		if (!interactive) return;
-		s$1 = (0, utils_exports.clampNumber)(s$1, 0, 1);
-		v$1 = (0, utils_exports.clampNumber)(v$1, 0, 1);
+		s = (0, utils_exports.clampNumber)(s, 0, 1);
+		v = (0, utils_exports.clampNumber)(v, 0, 1);
 		setValue([
-			h$1,
-			s$1,
-			v$1
+			h,
+			s,
+			v
 		]);
 	}, [interactive, setValue]);
 	const getPanValue = useCallback(({ x, y }, { bottom, height, left, width }) => {
@@ -75,12 +70,12 @@ const useSaturationSlider = (props = {}) => {
 			x: (0, utils_exports.clampNumber)(percent.x, 0, 1),
 			y: (0, utils_exports.clampNumber)(percent.y, 0, 1)
 		};
-		const s$1 = (0, utils_exports.roundNumberToStep)(clamp.x, 0, step);
-		const v$1 = (0, utils_exports.roundNumberToStep)(clamp.y, 0, step);
+		const s = (0, utils_exports.roundNumberToStep)(clamp.x, 0, step);
+		const v = (0, utils_exports.roundNumberToStep)(clamp.y, 0, step);
 		return [
 			h,
-			parseFloat(s$1),
-			parseFloat(v$1)
+			parseFloat(s),
+			parseFloat(v)
 		];
 	}, [h, step]);
 	const onKeyDown = useCallback((ev) => {
@@ -113,19 +108,19 @@ const useSaturationSlider = (props = {}) => {
 		step,
 		v
 	]);
-	const getRootProps = useCallback((props$1 = {}) => {
+	const getRootProps = useCallback((props = {}) => {
 		return {
-			...mergeProps(dataProps, rest, props$1)(),
+			...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, utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
-			onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
+			onBlur: (0, utils_exports.handlerAll)(props.onBlur, eventProps.onBlur),
+			onFocus: (0, utils_exports.handlerAll)(props.onFocus, eventProps.onFocus)
 		};
 	}, [
 		dataProps,
@@ -135,7 +130,7 @@ const useSaturationSlider = (props = {}) => {
 		s,
 		v
 	]);
-	const getInputProps = useCallback((props$1 = {}) => ({
+	const getInputProps = useCallback((props = {}) => ({
 		...visuallyHiddenAttributes,
 		...dataProps,
 		...ariaProps,
@@ -150,8 +145,8 @@ const useSaturationSlider = (props = {}) => {
 			s,
 			v
 		].toString(),
-		...props$1,
-		ref: mergeRefs(props$1.ref, ref)
+		...props,
+		ref: mergeRefs(props.ref, ref)
 	}), [
 		ariaProps,
 		dataProps,
@@ -165,16 +160,16 @@ const useSaturationSlider = (props = {}) => {
 		s,
 		v
 	]);
-	const getTrackProps = useCallback((props$1 = {}) => getPanEventProps({
+	const getTrackProps = useCallback((props = {}) => getPanEventProps({
 		...dataProps,
-		...props$1
+		...props
 	}), [dataProps, getPanEventProps]);
 	return {
 		setValue,
 		value,
 		getInputProps,
 		getRootProps,
-		getThumbProps: useCallback((props$1 = {}) => ({
+		getThumbProps: useCallback((props = {}) => ({
 			...dataProps,
 			...ariaProps,
 			"aria-label": t("Saturation and brightness thumb"),
@@ -188,9 +183,9 @@ const useSaturationSlider = (props = {}) => {
 			}),
 			role: "slider",
 			tabIndex: interactive ? 0 : -1,
-			...props$1,
-			"aria-labelledby": (0, utils_exports.cx)(props$1["aria-labelledby"], ariaLabelledBy),
-			onKeyDown: (0, utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
+			...props,
+			"aria-labelledby": (0, utils_exports.cx)(props["aria-labelledby"], ariaLabelledBy),
+			onKeyDown: (0, utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
 		}), [
 			ariaLabelledBy,
 			ariaProps,
@@ -208,7 +203,7 @@ const useSaturationSlider = (props = {}) => {
 		onChange
 	};
 };
-
 //#endregion
 export { useSaturationSlider };
+
 //# sourceMappingURL=use-saturation-slider.js.map

package/dist/esm/components/saturation-slider/use-saturation-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-saturation-slider.js","names":["h","s","v","getRootProps: PropGetter","props","getInputProps: PropGetter<\"input\">","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.js","names":[],"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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"}

package/dist/esm/components/scroll-area/index.js

@@ -1,5 +1,4 @@
 import { scrollAreaStyle } from "./scroll-area.style.js";
 import { useScrollArea } from "./use-scroll-area.js";
 import { ScrollArea, ScrollAreaPropsContext, useScrollAreaPropsContext } from "./scroll-area.js";
-
-export { ScrollArea, ScrollAreaPropsContext, scrollAreaStyle, useScrollArea, useScrollAreaPropsContext };
+export { ScrollArea, ScrollAreaPropsContext, scrollAreaStyle, useScrollArea, useScrollAreaPropsContext };

package/dist/esm/components/scroll-area/scroll-area.js

@@ -1,12 +1,9 @@
 "use client";
-
 import { styled } from "../../core/system/factory.js";
 import { createComponent } from "../../core/components/create-component.js";
-import "../../core/index.js";
 import { scrollAreaStyle } from "./scroll-area.style.js";
 import { useScrollArea } from "./use-scroll-area.js";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/scroll-area/scroll-area.tsx
 const { PropsContext: ScrollAreaPropsContext, usePropsContext: useScrollAreaPropsContext, withContext } = createComponent("scroll-area", scrollAreaStyle);
 /**
@@ -21,7 +18,7 @@ const ScrollArea = withContext(({ children, ...rest }) => {
 		children
 	});
 })();
-
 //#endregion
 export { ScrollArea, ScrollAreaPropsContext, useScrollAreaPropsContext };
+
 //# sourceMappingURL=scroll-area.js.map

package/dist/esm/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"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,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACvB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiB,cAAc,KAAK;AAE5C,QAAO,oBAAC,OAAO;EAAI,GAAI,cAAc;EAAG;GAAsB;EAEjE,EAAE"}
+{"version":3,"file":"scroll-area.js","names":[],"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,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACvB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiB,cAAc,KAAK;CAE5C,OAAO,oBAAC,OAAO,KAAR;EAAY,GAAI,cAAc;EAAG;EAAsB,CAAA;EAEjE,EAAE"}

package/dist/esm/components/scroll-area/scroll-area.style.js

@@ -1,6 +1,4 @@
 import { defineComponentStyle } from "../../core/system/config.js";
-import "../../core/index.js";
-
 //#region src/components/scroll-area/scroll-area.style.ts
 const scrollAreaStyle = defineComponentStyle({ base: {
 	"@-moz-document url-prefix()": {
@@ -51,7 +49,7 @@ const scrollAreaStyle = defineComponentStyle({ base: {
 		_scrollbar: { display: "none" }
 	}
 } });
-
 //#endregion
 export { scrollAreaStyle };
+
 //# sourceMappingURL=scroll-area.style.js.map

package/dist/esm/components/scroll-area/scroll-area.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.style.js","names":[],"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,kBAAkB,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"}
+{"version":3,"file":"scroll-area.style.js","names":[],"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,kBAAkB,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/esm/components/scroll-area/use-scroll-area.js

@@ -1,11 +1,8 @@
 "use client";
-
 import { useSafeLayoutEffect } from "../../utils/effect.js";
 import { utils_exports } from "../../utils/index.js";
 import { mergeProps } from "../../core/components/props.js";
-import "../../core/index.js";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
-
 //#region src/components/scroll-area/use-scroll-area.ts
 const useScrollArea = ({ id, type = "hover", scrollHideDelay = 1e3, onScrollPositionChange, ...rest } = {}) => {
 	const [isHovered, setIsHovered] = useState(false);
@@ -102,7 +99,7 @@ const useScrollArea = ({ id, type = "hover", scrollHideDelay = 1e3, onScrollPosi
 		])
 	};
 };
-
 //#endregion
 export { useScrollArea };
+
 //# sourceMappingURL=use-scroll-area.js.map

package/dist/esm/components/scroll-area/use-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scroll-area.js","names":[],"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,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,qCAAkB,8BAAW,SAAS;CAC5C,MAAM,OAAO,OAAO;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,OAAU;CAC3C,MAAM,gBAAgB,OAAY,OAAU;CAC5C,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAE7C,2BAA0B;AACxB,MAAI,CAAC,cAAc,WAAW,CAAC,SAAU;AAEzC,gBAAc,QAAQ,aAAa,eAAe,QAAQ;AAC1D,gBAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,aAAa,QAAQ;AAElC,eAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;AACrC,MAAI,SAAS,QAAS;AAEtB,eAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,WAAW,aACd,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,iBAAgB;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,cA1C+B,aAC9B,QAAQ,EAAE,KACT,WACE;GACE,OAAO,EAAE,UAAU,QAAQ;GAC3B,2CAAwB,SAAS;GACjC,0CAAuB,UAAU;GACjC,0CAAuB,QAAQ;GAC/B,2CAAwB,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.js","names":[],"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,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,aAAa,kBAAkB,SAAkB,MAAM;CAC9D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,YAAA,GAAA,cAAA,QAAkB,KAAA,GAAA,cAAA,QAAW,SAAS;CAC5C,MAAM,OAAO,OAAO;CACpB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,eAAe,OAAY,KAAA,EAAU;CAC3C,MAAM,gBAAgB,OAAY,KAAA,EAAU;CAC5C,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,iBAAiB,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CAE7C,0BAA0B;EACxB,IAAI,CAAC,cAAc,WAAW,CAAC,UAAU;EAEzC,cAAc,QAAQ,aAAa,eAAe,QAAQ;EAC1D,cAAc,QAAQ,YAAY,eAAe,QAAQ;GACzD;CAEF,MAAM,eAAe,kBAAkB;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,aAAa,QAAQ;EAElC,aAAa,KAAK;IACjB,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,kBAAkB;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,UAAU,iBACf,aAAa,MAAM,EACzB,gBACD;IACA,CAAC,iBAAiB,KAAK,CAAC;CAE3B,MAAM,WAAW,aACd,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,gBAAgB;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,cA1C+B,aAC9B,QAAQ,EAAE,KACT,WACE;GACE,OAAO,EAAE,UAAU,QAAQ;GAC3B,gBAAA,GAAA,cAAA,UAAwB,SAAS;GACjC,eAAA,GAAA,cAAA,UAAuB,UAAU;GACjC,eAAA,GAAA,cAAA,UAAuB,QAAQ;GAC/B,gBAAA,GAAA,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/esm/components/segmented-control/index.js

@@ -2,5 +2,4 @@ import { segmentedControlStyle } from "./segmented-control.style.js";
 import { SegmentedControlContext, SegmentedControlDescendantsContext, useSegmentedControl, useSegmentedControlContext, useSegmentedControlDescendant, useSegmentedControlDescendants, useSegmentedControlItem } from "./use-segmented-control.js";
 import { SegmentedControlItem, SegmentedControlPropsContext, SegmentedControlRoot, useSegmentedControlPropsContext } from "./segmented-control.js";
 import { namespace_exports } from "./namespace.js";
-
-export { namespace_exports as SegmentedControl, SegmentedControlContext, SegmentedControlDescendantsContext, SegmentedControlItem, SegmentedControlPropsContext, SegmentedControlRoot, segmentedControlStyle, useSegmentedControl, useSegmentedControlContext, useSegmentedControlDescendant, useSegmentedControlDescendants, useSegmentedControlItem, useSegmentedControlPropsContext };
+export { namespace_exports as SegmentedControl, SegmentedControlContext, SegmentedControlDescendantsContext, SegmentedControlItem, SegmentedControlPropsContext, SegmentedControlRoot, segmentedControlStyle, useSegmentedControl, useSegmentedControlContext, useSegmentedControlDescendant, useSegmentedControlDescendants, useSegmentedControlItem, useSegmentedControlPropsContext };