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

package/dist/cjs/components/resizable/namespace.cjs

@@ -1,10 +1,9 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_use_resizable = require('./use-resizable.cjs');
-const require_resizable = require('./resizable.cjs');
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_resizable = require("./use-resizable.cjs");
+const require_resizable = require("./resizable.cjs");
 let react_resizable_panels = require("react-resizable-panels");
-
 //#region src/components/resizable/namespace.ts
-var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Context: () => require_use_resizable.ResizableContext,
 	Item: () => require_resizable.ResizableItem,
 	PropsContext: () => require_resizable.ResizablePropsContext,
@@ -14,12 +13,12 @@ var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	useLayout: () => react_resizable_panels.useDefaultLayout,
 	usePropsContext: () => require_resizable.useResizablePropsContext
 });
-
 //#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/resizable/resizable.cjs

@@ -1,16 +1,13 @@
 "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_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
-const require_resizable_style = require('./resizable.style.cjs');
-const require_use_resizable = require('./use-resizable.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_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
+const require_resizable_style = require("./resizable.style.cjs");
+const require_use_resizable = require("./use-resizable.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_resizable_panels = require("react-resizable-panels");
-
 //#region src/components/resizable/resizable.tsx
 const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("resizable", require_resizable_style.resizableStyle);
 const ResizableRoot = withProvider(({ children, orientation: orientationProp, ...rest }) => {
@@ -54,11 +51,11 @@ const ResizableTrigger = withContext(({ children, icon, iconProps, ...rest }) =>
 	});
 }, "trigger")();
 const ResizableIcon = withContext("div", "icon")();
-
 //#endregion
 exports.ResizableItem = ResizableItem;
 exports.ResizablePropsContext = ResizablePropsContext;
 exports.ResizableRoot = ResizableRoot;
 exports.ResizableTrigger = ResizableTrigger;
 exports.useResizablePropsContext = useResizablePropsContext;
+
 //# sourceMappingURL=resizable.cjs.map

package/dist/cjs/components/resizable/resizable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.cjs","names":["createSlotComponent","resizableStyle","useResizable","useValue","ResizableContext","styled","Group","useResizableItem","Panel","useResizableTrigger","Separator"],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  HTMLStyledPropsWithoutAs,\n  ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n  UseResizableItemProps,\n  UseResizableProps,\n  UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n  ResizableContext,\n  useResizable,\n  useResizableItem,\n  useResizableTrigger,\n} from \"./use-resizable\"\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see https://yamada-ui.com/docs/components/resizable\n */\nexport interface ResizableRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n  \"div\",\n  ResizableRootProps,\n  \"orientation\"\n>(\n  ({ children, orientation: orientationProp, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { disabled, groupRef, orientation, getRootProps } = useResizable({\n      orientation: computedOrientation,\n      ...rest,\n    })\n\n    const context = useMemo(\n      () => ({ disabled, groupRef, orientation }),\n      [disabled, orientation, groupRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div as={Group} {...getRootProps()}>\n          {children}\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n  extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n  extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n  ({ children, icon, iconProps, ...rest }) => {\n    const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n    return (\n      <styled.div as={Separator} {...getTriggerProps()}>\n        {icon ? (\n          <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n        ) : null}\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,6CACF,aACAC,uCACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiBC,mCAAa;EACrE,aAF0BC,uCAAS,gBAAgB;EAGnD,GAAG;EACJ,CAAC;AAOF,QACE,2CAACC;EAAiB,iCALX;GAAE;GAAU;GAAU;GAAa,GAC1C;GAAC;GAAU;GAAa;GAAS,CAClC;YAIG,2CAACC,uBAAO;GAAI,IAAIC;GAAO,GAAI,cAAc;GACtC;IACU;GACI;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAKH,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiBC,uCAAiB,MAAM;AAEhD,QAAO,2CAACF,uBAAO;EAAI,IAAIG;EAAO,GAAI,cAAc;GAAI;GACnD,OAAO,EAAE;AAcZ,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoBC,0CAAoB,KAAK;AAEnE,QACE,4CAACJ,uBAAO;EAAI,IAAIK;EAAW,GAAI,iBAAiB;aAC7C,OACC,2CAAC;GAAc,GAAI,aAAa,UAAU;aAAG;IAAqB,GAChE,MAEH;GACU;GAGjB,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,EAAE"}
+{"version":3,"file":"resizable.cjs","names":["createSlotComponent","resizableStyle","useResizable","useValue","ResizableContext","styled","Group","useResizableItem","Panel","useResizableTrigger","Separator"],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  HTMLStyledPropsWithoutAs,\n  ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n  UseResizableItemProps,\n  UseResizableProps,\n  UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n  ResizableContext,\n  useResizable,\n  useResizableItem,\n  useResizableTrigger,\n} from \"./use-resizable\"\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see https://yamada-ui.com/docs/components/resizable\n */\nexport interface ResizableRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n  \"div\",\n  ResizableRootProps,\n  \"orientation\"\n>(\n  ({ children, orientation: orientationProp, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { disabled, groupRef, orientation, getRootProps } = useResizable({\n      orientation: computedOrientation,\n      ...rest,\n    })\n\n    const context = useMemo(\n      () => ({ disabled, groupRef, orientation }),\n      [disabled, orientation, groupRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div as={Group} {...getRootProps()}>\n          {children}\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n  extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n  extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n  ({ children, icon, iconProps, ...rest }) => {\n    const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n    return (\n      <styled.div as={Separator} {...getTriggerProps()}>\n        {icon ? (\n          <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n        ) : null}\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,eACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiBC,sBAAAA,aAAa;EACrE,aAF0BC,8BAAAA,SAAS,gBAEH;EAChC,GAAG;EACJ,CAAC;CAOF,OACE,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,kBAAD;EAAkB,QAAA,GAAA,MAAA,gBALX;GAAE;GAAU;GAAU;GAAa,GAC1C;GAAC;GAAU;GAAa;GAAS,CAID;YAC9B,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,OAAO,KAAR;GAAY,IAAIC,uBAAAA;GAAO,GAAI,cAAc;GACtC;GACU,CAAA;EACI,CAAA;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAKH,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiBC,sBAAAA,iBAAiB,MAAM;CAEhD,OAAO,iBAAA,GAAA,kBAAA,KAACF,gBAAAA,OAAO,KAAR;EAAY,IAAIG,uBAAAA;EAAO,GAAI,cAAc;EAAI,CAAA;GACnD,OAAO,EAAE;AAcZ,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoBC,sBAAAA,oBAAoB,KAAK;CAEnE,OACE,iBAAA,GAAA,kBAAA,MAACJ,gBAAAA,OAAO,KAAR;EAAY,IAAIK,uBAAAA;EAAW,GAAI,iBAAiB;YAAhD,CACG,OACC,iBAAA,GAAA,kBAAA,KAAC,eAAD;GAAe,GAAI,aAAa,UAAU;aAAG;GAAqB,CAAA,GAChE,MAEH,SACU;;GAGjB,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,EAAE"}

package/dist/cjs/components/resizable/resizable.style.cjs

@@ -1,8 +1,5 @@
-const require_config = require('../../core/system/config.cjs');
-require('../../core/index.cjs');
-
 //#region src/components/resizable/resizable.style.ts
-const resizableStyle = require_config.defineComponentSlotStyle({
+const resizableStyle = require("../../core/system/config.cjs").defineComponentSlotStyle({
 	base: {
 		icon: {
 			alignItems: "center",
@@ -71,7 +68,13 @@ const resizableStyle = require_config.defineComponentSlotStyle({
 			}
 		}
 	},
-	props: { orientation: {
+	props: { 
+	/**
+	* The orientation of the resizable.
+	*
+	* @default 'horizontal'
+	*/
+orientation: {
 		horizontal: { icon: { transform: "translate(-50%, -50%) rotate(0deg)" } },
 		vertical: { icon: { transform: "translate(-50%, -50%) rotate(90deg)" } }
 	} },
@@ -144,7 +147,7 @@ const resizableStyle = require_config.defineComponentSlotStyle({
 		orientation: "horizontal"
 	}
 });
-
 //#endregion
 exports.resizableStyle = resizableStyle;
+
 //# sourceMappingURL=resizable.style.cjs.map

package/dist/cjs/components/resizable/resizable.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/resizable/resizable.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const resizableStyle = defineComponentSlotStyle({\n  base: {\n    icon: {\n      alignItems: \"center\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      left: \"50%\",\n      position: \"absolute\",\n      top: \"50%\",\n      translateX: \"-50%\",\n      translateY: \"-50%\",\n    },\n    item: {\n      boxSize: \"full\",\n    },\n    root: {\n      boxSize: \"full\",\n    },\n    trigger: {\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n    },\n  },\n\n  variants: {\n    border: {\n      icon: {\n        bg: \"colorScheme.muted\",\n        color: \"colorScheme.fg\",\n        py: \"1\",\n        rounded: \"l1\",\n      },\n      trigger: {\n        bg: \"colorScheme.muted\",\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n        _hover: {\n          bg: \"colorScheme.emphasized\",\n        },\n        _focusVisible: {\n          bg: \"colorScheme.emphasized\",\n        },\n      },\n    },\n    plain: {\n      trigger: {\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n      },\n    },\n    spacer: {\n      icon: {\n        color: \"colorScheme.fg\",\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n      trigger: {\n        focusVisibleRing: \"none\",\n        p: \"1\",\n        _after: {\n          bg: \"transparent\",\n          display: \"block\",\n          rounded: \"full\",\n        },\n        _hover: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n        _focusVisible: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the resizable.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(0deg)\",\n        },\n      },\n      vertical: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(90deg)\",\n        },\n      },\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        trigger: {\n          h: \"px\",\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          w: \"px\",\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"2\", w: \"full\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"full\", w: \"2\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"horizontal\",\n    },\n  ],\n\n  defaultProps: {\n    variant: \"border\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type ResizableStyle = typeof resizableStyle\n"],"mappings":";;;;AAEA,MAAa,iBAAiBA,wCAAyB;CACrD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;GAChB,MAAM;GACN,UAAU;GACV,KAAK;GACL,YAAY;GACZ,YAAY;GACb;EACD,MAAM,EACJ,SAAS,QACV;EACD,MAAM,EACJ,SAAS,QACV;EACD,SAAS;GACP,UAAU;GACV,oBAAoB;GACpB,oBAAoB;GACpB,QAAQ;IACN,oBAAoB;IACpB,oBAAoB;IACrB;GACF;EACF;CAED,UAAU;EACR,QAAQ;GACN,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,SAAS;IACV;GACD,SAAS;IACP,IAAI;IACJ,kBAAkB;IAClB,QAAQ,EACN,UAAU,YACX;IACD,QAAQ,EACN,IAAI,0BACL;IACD,eAAe,EACb,IAAI,0BACL;IACF;GACF;EACD,OAAO,EACL,SAAS;GACP,kBAAkB;GAClB,QAAQ,EACN,UAAU,YACX;GACF,EACF;EACD,QAAQ;GACN,MAAM;IACJ,OAAO;IACP,oBAAoB;IACpB,oBAAoB;IACrB;GACD,SAAS;IACP,kBAAkB;IAClB,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,SAAS;KACV;IACD,QAAQ;KACN,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACD,eAAe;KACb,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACF;GACF;EACF;CAED,OAAO,EAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,WAAW,sCACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,uCACZ,EACF;EACF,EACF;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,GAAG;KACH,MAAM;KACN,OAAO;KACP,WAAW;KACZ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,QAAQ;KACR,KAAK;KACL,WAAW;KACX,GAAG;KACJ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAK,GAAG;IAAQ,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAK,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,GAAG;IACH,MAAM;IACN,OAAO;IACP,WAAW;IACZ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,QAAQ;IACR,KAAK;IACL,WAAW;IACX,GAAG;IACJ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACF;CAED,cAAc;EACZ,SAAS;EACT,aAAa;EACd;CACF,CAAC"}
+{"version":3,"file":"resizable.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/resizable/resizable.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const resizableStyle = defineComponentSlotStyle({\n  base: {\n    icon: {\n      alignItems: \"center\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      left: \"50%\",\n      position: \"absolute\",\n      top: \"50%\",\n      translateX: \"-50%\",\n      translateY: \"-50%\",\n    },\n    item: {\n      boxSize: \"full\",\n    },\n    root: {\n      boxSize: \"full\",\n    },\n    trigger: {\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n    },\n  },\n\n  variants: {\n    border: {\n      icon: {\n        bg: \"colorScheme.muted\",\n        color: \"colorScheme.fg\",\n        py: \"1\",\n        rounded: \"l1\",\n      },\n      trigger: {\n        bg: \"colorScheme.muted\",\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n        _hover: {\n          bg: \"colorScheme.emphasized\",\n        },\n        _focusVisible: {\n          bg: \"colorScheme.emphasized\",\n        },\n      },\n    },\n    plain: {\n      trigger: {\n        focusVisibleRing: \"none\",\n        _after: {\n          position: \"absolute\",\n        },\n      },\n    },\n    spacer: {\n      icon: {\n        color: \"colorScheme.fg\",\n        transitionDuration: \"moderate\",\n        transitionProperty: \"common\",\n      },\n      trigger: {\n        focusVisibleRing: \"none\",\n        p: \"1\",\n        _after: {\n          bg: \"transparent\",\n          display: \"block\",\n          rounded: \"full\",\n        },\n        _hover: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n        _focusVisible: {\n          _after: {\n            bg: \"colorScheme.bg\",\n          },\n          _icon: {\n            color: \"transparent\",\n          },\n        },\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the resizable.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(0deg)\",\n        },\n      },\n      vertical: {\n        icon: {\n          transform: \"translate(-50%, -50%) rotate(90deg)\",\n        },\n      },\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        trigger: {\n          h: \"px\",\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          w: \"px\",\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"border\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"2\", w: \"full\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: { h: \"full\", w: \"2\" },\n        },\n      },\n      variant: \"spacer\",\n      orientation: \"horizontal\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            h: \"2\",\n            left: \"0\",\n            right: \"0\",\n            transform: \"translateY(-50%)\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"vertical\",\n    },\n    {\n      css: {\n        trigger: {\n          _after: {\n            bottom: \"0\",\n            top: \"0\",\n            transform: \"translateX(-50%)\",\n            w: \"2\",\n          },\n        },\n      },\n      variant: \"plain\",\n      orientation: \"horizontal\",\n    },\n  ],\n\n  defaultProps: {\n    variant: \"border\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type ResizableStyle = typeof resizableStyle\n"],"mappings":";AAEA,MAAa,wDAAiBA,CAAAA,yBAAyB;CACrD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;GAChB,MAAM;GACN,UAAU;GACV,KAAK;GACL,YAAY;GACZ,YAAY;GACb;EACD,MAAM,EACJ,SAAS,QACV;EACD,MAAM,EACJ,SAAS,QACV;EACD,SAAS;GACP,UAAU;GACV,oBAAoB;GACpB,oBAAoB;GACpB,QAAQ;IACN,oBAAoB;IACpB,oBAAoB;IACrB;GACF;EACF;CAED,UAAU;EACR,QAAQ;GACN,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,SAAS;IACV;GACD,SAAS;IACP,IAAI;IACJ,kBAAkB;IAClB,QAAQ,EACN,UAAU,YACX;IACD,QAAQ,EACN,IAAI,0BACL;IACD,eAAe,EACb,IAAI,0BACL;IACF;GACF;EACD,OAAO,EACL,SAAS;GACP,kBAAkB;GAClB,QAAQ,EACN,UAAU,YACX;GACF,EACF;EACD,QAAQ;GACN,MAAM;IACJ,OAAO;IACP,oBAAoB;IACpB,oBAAoB;IACrB;GACD,SAAS;IACP,kBAAkB;IAClB,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,SAAS;KACV;IACD,QAAQ;KACN,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACD,eAAe;KACb,QAAQ,EACN,IAAI,kBACL;KACD,OAAO,EACL,OAAO,eACR;KACF;IACF;GACF;EACF;CAED,OAAO;;;;;;AAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,WAAW,sCACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,uCACZ,EACF;EACF,EACF;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,GAAG;KACH,MAAM;KACN,OAAO;KACP,WAAW;KACZ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,QAAQ;KACR,KAAK;KACL,WAAW;KACX,GAAG;KACJ;IACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAK,GAAG;IAAQ,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAK,EAC9B,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,GAAG;IACH,MAAM;IACN,OAAO;IACP,WAAW;IACZ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,QAAQ;IACR,KAAK;IACL,WAAW;IACX,GAAG;IACJ,EACF,EACF;GACD,SAAS;GACT,aAAa;GACd;EACF;CAED,cAAc;EACZ,SAAS;EACT,aAAa;EACd;CACF,CAAC"}

package/dist/cjs/components/resizable/use-resizable.cjs

@@ -1,14 +1,11 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_context = require('../../utils/context.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');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../../utils/context.cjs");
+const require_ref = require("../../utils/ref.cjs");
+const require_utils_index = require("../../utils/index.cjs");
+const require_props = require("../../core/components/props.cjs");
 let react = require("react");
 let react_resizable_panels = require("react-resizable-panels");
-
 //#region src/components/resizable/use-resizable.ts
 const [ResizableContext, useResizableContext] = require_context.createContext({ name: "ResizableContext" });
 const useResizable = ({ controlRef, disabled, orientation = "horizontal", ...rest } = {}) => {
@@ -97,11 +94,11 @@ const useResizableTrigger = ({ disabled, ...rest }) => {
 		getTriggerProps
 	};
 };
-
 //#endregion
 exports.ResizableContext = ResizableContext;
 exports.useResizable = useResizable;
 exports.useResizableContext = useResizableContext;
 exports.useResizableItem = useResizableItem;
 exports.useResizableTrigger = useResizableTrigger;
+
 //# sourceMappingURL=use-resizable.cjs.map

package/dist/cjs/components/resizable/use-resizable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.cjs","names":["createContext","mergeProps","mergeRefs","getTriggerProps: PropGetter<SeparatorProps>"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          height: undefined,\n          width: undefined,\n          ...rest.style,\n          ...props.style,\n        },\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n        onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n        onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n      }\n    },\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(rest, props)()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n        onResize: fnAll(props.onResize, rest.onResize),\n      }\n    },\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(trulyDisabled),\n          disabled: trulyDisabled,\n          tabIndex: trulyDisabled ? -1 : 0,\n        },\n        props,\n        rest,\n        { onDoubleClick },\n      )()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n      }\n    },\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,8BAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,oDAAwB;AAuB9B,QAAO;EACL;EACA;EACA;EACA,sCAxBC,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHaC,yBAAW;KAAE;KAAU;KAAa,EAAE,MAAM,MAAM,EAAE;IAIjE,OAAO;KACL,QAAQ;KACR,OAAO;KACP,GAAG,KAAK;KACR,GAAG,MAAM;KACV;IACD,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;IACzD,6DAAsB,MAAM,gBAAgB,KAAK,eAAe;IAChE,8DAAuB,MAAM,iBAAiB,KAAK,gBAAgB;IACpE;KAEH;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,oDAAwB;AAgB9B,QAAO;EACL;EACA,sCAfC,QAAQ,EAAE,KAAK;AAGd,UAAO;IACL,GAHaD,yBAAW,MAAM,MAAM,EAAE;IAItC,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;IACzD,uDAAgB,MAAM,UAAU,KAAK,SAAS;IAC/C;KAEH;GAAC;GAAU;GAAY;GAAK,CAC7B;EAKA;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,wCACH,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;AAE5C,MAAI,CAAC,OAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;AAED,WAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,QAAQ,EAAE,KAAK;AAcd,SAAO;GACL,GAdaF,yBACb;IACE,iEAA0B,cAAc;IACxC,oBAAoB;IACpB,iEAA0B,cAAc;IACxC,UAAU;IACV,UAAU,gBAAgB,KAAK;IAChC,EACD,OACA,MACA,EAAE,eAAe,CAClB,EAAE;GAID,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;GAClD;IAEH;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,sCARC,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}
+{"version":3,"file":"use-resizable.cjs","names":["createContext","mergeProps","mergeRefs"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n  GroupImperativeHandle,\n  GroupProps,\n  LayoutStorage,\n  PanelImperativeHandle,\n  PanelProps,\n  SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n  useGroupRef,\n  usePanelRef,\n  useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n  extends\n    HTMLProps,\n    Omit<GroupProps, \"color\" | \"content\" | \"elementRef\" | \"groupRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableRootControl>\n}\n\nexport const useResizable = ({\n  controlRef,\n  disabled,\n  orientation = \"horizontal\",\n  ...rest\n}: UseResizableProps = {}) => {\n  const groupRef = useGroupRef()\n\n  const getRootProps: PropGetter<GroupProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n      return {\n        ...merged,\n        style: {\n          height: undefined,\n          width: undefined,\n          ...rest.style,\n          ...props.style,\n        },\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n        onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n        onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n      }\n    },\n    [disabled, orientation, groupRef, controlRef, rest],\n  )\n\n  return {\n    disabled,\n    groupRef,\n    orientation,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends\n    HTMLProps,\n    Omit<PanelProps, \"color\" | \"content\" | \"elementRef\" | \"panelRef\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n  controlRef,\n  ...rest\n}: UseResizableItemProps) => {\n  const panelRef = usePanelRef()\n\n  const getItemProps: PropGetter<PanelProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(rest, props)()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n        panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n        onResize: fnAll(props.onResize, rest.onResize),\n      }\n    },\n    [panelRef, controlRef, rest],\n  )\n\n  return {\n    panelRef,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Omit<SeparatorProps, \"color\" | \"content\" | \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n  disabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const {\n    disabled: groupDisabled,\n    groupRef,\n    orientation,\n  } = useResizableContext()\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = groupRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = Object.keys(layout).length\n      const size = 100 / count\n      const nextLayout = Object.fromEntries(\n        Object.keys(layout).map((key) => [key, size]),\n      )\n\n      groupRef.current?.setLayout(nextLayout)\n    },\n    [groupRef],\n  )\n\n  const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n    (props = {}) => {\n      const merged = mergeProps(\n        {\n          \"aria-disabled\": ariaAttr(trulyDisabled),\n          \"aria-orientation\": orientation,\n          \"data-disabled\": dataAttr(trulyDisabled),\n          disabled: trulyDisabled,\n          tabIndex: trulyDisabled ? -1 : 0,\n        },\n        props,\n        rest,\n        { onDoubleClick },\n      )()\n\n      return {\n        ...merged,\n        elementRef: mergeRefs(props.elementRef, rest.ref),\n      }\n    },\n    [orientation, trulyDisabled, rest, onDoubleClick],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [],\n  )\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAAAA,cAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,YAAA,GAAA,uBAAA,cAAwB;CAuB9B,OAAO;EACL;EACA;EACA;EACA,eAAA,GAAA,MAAA,cAxBC,QAAQ,EAAE,KAAK;GAGd,OAAO;IACL,GAHaC,cAAAA,WAAW;KAAE;KAAU;KAAa,EAAE,MAAM,MAAM,EAGtD;IACT,OAAO;KACL,QAAQ,KAAA;KACR,OAAO,KAAA;KACP,GAAG,KAAK;KACR,GAAG,MAAM;KACV;IACD,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAUA,YAAAA,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,iBAAA,GAAA,oBAAA,cAAA,OAAsB,MAAM,gBAAgB,KAAK,eAAe;IAChE,kBAAA,GAAA,oBAAA,cAAA,OAAuB,MAAM,iBAAiB,KAAK,gBAAgB;IACpE;KAEH;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CAOvC;EACb;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,YAAA,GAAA,uBAAA,cAAwB;CAgB9B,OAAO;EACL;EACA,eAAA,GAAA,MAAA,cAfC,QAAQ,EAAE,KAAK;GAGd,OAAO;IACL,GAHaD,cAAAA,WAAW,MAAM,MAAM,EAG3B;IACT,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,IAAI;IACjD,UAAUA,YAAAA,UAAU,MAAM,UAAU,UAAU,WAAW;IACzD,WAAA,GAAA,oBAAA,cAAA,OAAgB,MAAM,UAAU,KAAK,SAAS;IAC/C;KAEH;GAAC;GAAU;GAAY;GAAK,CAKhB;EACb;;AAQH,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,qBAAqB;CACzB,MAAM,gBAAgB,YAAY;CAElC,MAAM,iBAAA,GAAA,MAAA,cACH,OAAmC;EAClC,GAAG,gBAAgB;EAEnB,MAAM,SAAS,SAAS,SAAS,WAAW;EAE5C,IAAI,CAAC,QAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,OAAO,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,OAAO,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAK,CAAC,CAC9C;EAED,SAAS,SAAS,UAAU,WAAW;IAEzC,CAAC,SAAS,CACX;CAED,MAAM,mBAAA,GAAA,MAAA,cACH,QAAQ,EAAE,KAAK;EAcd,OAAO;GACL,GAdaD,cAAAA,WACb;IACE,kBAAA,GAAA,oBAAA,cAAA,UAA0B,cAAc;IACxC,oBAAoB;IACpB,kBAAA,GAAA,oBAAA,cAAA,UAA0B,cAAc;IACxC,UAAU;IACV,UAAU,gBAAgB,KAAK;IAChC,EACD,OACA,MACA,EAAE,eAAe,CAClB,EAGU;GACT,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,IAAI;GAClD;IAEH;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;CAUD,OAAO;EACL,eAAA,GAAA,MAAA,cARC,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CAIU;EACZ;EACD"}

package/dist/cjs/components/ripple/index.cjs

@@ -1,7 +1,7 @@
-const require_ripple = require('./ripple.cjs');
-const require_use_ripple = require('./use-ripple.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ripple = require("./ripple.cjs");
+const require_use_ripple = require("./use-ripple.cjs");
 exports.Ripple = require_ripple.Ripple;
 exports.RipplePropsContext = require_ripple.RipplePropsContext;
 exports.useRipple = require_use_ripple.useRipple;
-exports.useRipplePropsContext = require_ripple.useRipplePropsContext;
+exports.useRipplePropsContext = require_ripple.useRipplePropsContext;

package/dist/cjs/components/ripple/ripple.cjs

@@ -1,15 +1,11 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
-const require_create_component = require('../../core/components/create-component.cjs');
-require('../../core/index.cjs');
-const require_factory = require('../motion/factory.cjs');
-require('../motion/index.cjs');
-const require_ripple_style = require('./ripple.style.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_utils_index = require("../../utils/index.cjs");
+const require_create_component = require("../../core/components/create-component.cjs");
+const require_factory = require("../motion/factory.cjs");
+const require_ripple_style = require("./ripple.style.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react = require("motion/react");
-
 //#region src/components/ripple/ripple.tsx
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const { PropsContext: RipplePropsContext, usePropsContext: useRipplePropsContext, withContext } = require_create_component.createComponent("ripple", require_ripple_style.rippleStyle);
@@ -52,9 +48,9 @@ const Ripple = withContext(({ style, color = "currentColor", disabled, ripples,
 		}, key);
 	}) });
 })();
-
 //#endregion
 exports.Ripple = Ripple;
 exports.RipplePropsContext = RipplePropsContext;
 exports.useRipplePropsContext = useRipplePropsContext;
+
 //# sourceMappingURL=ripple.cjs.map

package/dist/cjs/components/ripple/ripple.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.cjs","names":["createComponent","rippleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n  extends HTMLMotionProps<\"span\">, ThemeProps<RippleStyle> {\n  /**\n   * The ripples to use.\n   */\n  ripples: RippleOptions[]\n  /**\n   * The callback invoked when a ripple is cleared.\n   */\n  onClear: (key: Key) => void\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nconst {\n  PropsContext: RipplePropsContext,\n  usePropsContext: useRipplePropsContext,\n  withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see https://yamada-ui.com/docs/components/ripple\n */\nexport const Ripple = withContext<\"span\", RippleProps>(\n  ({\n    style,\n    color = \"currentColor\",\n    disabled,\n    ripples,\n    onAnimationComplete,\n    onClear,\n    ...rest\n  }) => {\n    if (disabled) return null\n\n    return (\n      <>\n        {ripples.map(({ key, size, x, y }) => {\n          const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n          return (\n            <AnimatePresence key={key} mode=\"popLayout\">\n              <motion.span\n                style={{\n                  height: `${size}px`,\n                  left: x,\n                  pointerEvents: \"none\",\n                  position: \"absolute\",\n                  top: y,\n                  transformOrigin: \"center\",\n                  width: `${size}px`,\n                  ...style,\n                }}\n                animate={{ opacity: 0, transform: \"scale(2)\" }}\n                bgColor={color}\n                exit={{ opacity: 0 }}\n                initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n                transition={{ duration }}\n                {...rest}\n                onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                  onClear(key),\n                )}\n              />\n            </AnimatePresence>\n          )\n        })}\n      </>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;AAoBrC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yCAA0C,UAAUC,iCAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;AACJ,KAAI,SAAU,QAAO;AAErB,QACE,mFACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,GAAI;AAEjE,SACE,2CAACC;GAA0B,MAAK;aAC9B,2CAACC,uBAAO;IACN,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;KACJ;IACD,SAAS;KAAE,SAAS;KAAG,WAAW;KAAY;IAC9C,SAAS;IACT,MAAM,EAAE,SAAS,GAAG;IACpB,SAAS;KAAE,SAAS;KAAM,WAAW;KAAY;IACjD,YAAY,EAAE,UAAU;IACxB,GAAI;IACJ,uEAAgC,2BAC9B,QAAQ,IAAI,CACb;KACD;KArBkB,IAsBJ;GAEpB,GACD;EAGR,EAAE"}
+{"version":3,"file":"ripple.cjs","names":["createComponent","rippleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n  extends HTMLMotionProps<\"span\">, ThemeProps<RippleStyle> {\n  /**\n   * The ripples to use.\n   */\n  ripples: RippleOptions[]\n  /**\n   * The callback invoked when a ripple is cleared.\n   */\n  onClear: (key: Key) => void\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nconst {\n  PropsContext: RipplePropsContext,\n  usePropsContext: useRipplePropsContext,\n  withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see https://yamada-ui.com/docs/components/ripple\n */\nexport const Ripple = withContext<\"span\", RippleProps>(\n  ({\n    style,\n    color = \"currentColor\",\n    disabled,\n    ripples,\n    onAnimationComplete,\n    onClear,\n    ...rest\n  }) => {\n    if (disabled) return null\n\n    return (\n      <>\n        {ripples.map(({ key, size, x, y }) => {\n          const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n          return (\n            <AnimatePresence key={key} mode=\"popLayout\">\n              <motion.span\n                style={{\n                  height: `${size}px`,\n                  left: x,\n                  pointerEvents: \"none\",\n                  position: \"absolute\",\n                  top: y,\n                  transformOrigin: \"center\",\n                  width: `${size}px`,\n                  ...style,\n                }}\n                animate={{ opacity: 0, transform: \"scale(2)\" }}\n                bgColor={color}\n                exit={{ opacity: 0 }}\n                initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n                transition={{ duration }}\n                {...rest}\n                onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                  onClear(key),\n                )}\n              />\n            </AnimatePresence>\n          )\n        })}\n      </>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;AAoBrC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yBAAAA,gBAA0C,UAAUC,qBAAAA,YAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;CACJ,IAAI,UAAU,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,GAAI;EAEjE,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,iBAAD;GAA2B,MAAK;aAC9B,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,OAAO,MAAR;IACE,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;KACJ;IACD,SAAS;KAAE,SAAS;KAAG,WAAW;KAAY;IAC9C,SAAS;IACT,MAAM,EAAE,SAAS,GAAG;IACpB,SAAS;KAAE,SAAS;KAAM,WAAW;KAAY;IACjD,YAAY,EAAE,UAAU;IACxB,GAAI;IACJ,sBAAA,GAAA,oBAAA,cAAA,YAAgC,2BAC9B,QAAQ,IAAI,CACb;IACD,CAAA;GACc,EAtBI,IAsBJ;GAEpB,EACD,CAAA;EAGR,EAAE"}

package/dist/cjs/components/ripple/ripple.style.cjs

@@ -1,12 +1,9 @@
-const require_config = require('../../core/system/config.cjs');
-require('../../core/index.cjs');
-
 //#region src/components/ripple/ripple.style.ts
-const rippleStyle = require_config.defineComponentStyle({ base: {
+const rippleStyle = require("../../core/system/config.cjs").defineComponentStyle({ base: {
 	rounded: "full",
 	zIndex: "kurillin"
 } });
-
 //#endregion
 exports.rippleStyle = rippleStyle;
+
 //# sourceMappingURL=ripple.style.cjs.map

package/dist/cjs/components/ripple/ripple.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.style.cjs","names":["defineComponentStyle"],"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,cAAcA,oCAAqB,EAC9C,MAAM;CACJ,SAAS;CACT,QAAQ;CACT,EACF,CAAC"}
+{"version":3,"file":"ripple.style.cjs","names":["defineComponentStyle"],"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,qDAAcA,CAAAA,qBAAqB,EAC9C,MAAM;CACJ,SAAS;CACT,QAAQ;CACT,EACF,CAAC"}

package/dist/cjs/components/ripple/use-ripple.cjs

@@ -1,9 +1,7 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_utils_index = require("../../utils/index.cjs");
 let react = require("react");
-
 //#region src/components/ripple/use-ripple.ts
 const useRipple = ({ disabled, ...rest } = {}) => {
 	const [ripples, setRipples] = (0, react.useState)([]);
@@ -27,7 +25,7 @@ const useRipple = ({ disabled, ...rest } = {}) => {
 		onClick: (0, require_utils_index.utils_exports.handlerAll)(onClick, rest.onClick)
 	};
 };
-
 //#endregion
 exports.useRipple = useRipple;
+
 //# sourceMappingURL=use-ripple.cjs.map

package/dist/cjs/components/ripple/use-ripple.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-ripple.cjs","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,kCAAwC,EAAE,CAAC;CAE3D,MAAMA,kCACH,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,kDAAW;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,iCAN2B,QAAa;AACxC,eAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,IAAI,CAAC;KAC5D,EAAE,CAAC;EAKJ,2DAAoB,SAAS,KAAK,QAAQ;EAC3C"}
+{"version":3,"file":"use-ripple.cjs","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,eAAA,GAAA,MAAA,UAAwC,EAAE,CAAC;CAE3D,MAAM,WAAA,GAAA,MAAA,cACH,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,oBAAA,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,UAAA,GAAA,MAAA,cAN2B,QAAa;GACxC,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,IAAI,CAAC;KAC5D,EAAE,CAII;EACP,UAAA,GAAA,oBAAA,cAAA,YAAoB,SAAS,KAAK,QAAQ;EAC3C"}

package/dist/cjs/components/rotate/index.cjs

@@ -1,7 +1,7 @@
-const require_rotate_style = require('./rotate.style.cjs');
-const require_rotate = require('./rotate.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rotate_style = require("./rotate.style.cjs");
+const require_rotate = require("./rotate.cjs");
 exports.Rotate = require_rotate.Rotate;
 exports.RotatePropsContext = require_rotate.RotatePropsContext;
 exports.rotateStyle = require_rotate_style.rotateStyle;
-exports.useRotatePropsContext = require_rotate.useRotatePropsContext;
+exports.useRotatePropsContext = require_rotate.useRotatePropsContext;

package/dist/cjs/components/rotate/rotate.cjs

@@ -1,18 +1,14 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils_index = require('../../utils/index.cjs');
-const require_use_inject_vars = require('../../core/css/use-inject-vars.cjs');
-const require_create_component = require('../../core/components/create-component.cjs');
-require('../../core/index.cjs');
-const require_factory = require('../motion/factory.cjs');
-require('../motion/index.cjs');
-const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
-const require_rotate_style = require('./rotate.style.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_utils_index = require("../../utils/index.cjs");
+const require_use_inject_vars = require("../../core/css/use-inject-vars.cjs");
+const require_create_component = require("../../core/components/create-component.cjs");
+const require_factory = require("../motion/factory.cjs");
+const require_hooks_use_controllable_state_index = require("../../hooks/use-controllable-state/index.cjs");
+const require_rotate_style = require("./rotate.style.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let motion_react = require("motion/react");
-
 //#region src/components/rotate/rotate.tsx
 const { PropsContext: RotatePropsContext, usePropsContext: useRotatePropsContext, withContext } = require_create_component.createComponent("rotate", require_rotate_style.rotateStyle);
 /**
@@ -76,9 +72,9 @@ const Rotate = withContext(({ defaultValue = "from", delay = 0, disabled, durati
 		opacity: "{opacity}"
 	};
 });
-
 //#endregion
 exports.Rotate = Rotate;
 exports.RotatePropsContext = RotatePropsContext;
 exports.useRotatePropsContext = useRotatePropsContext;
+
 //# sourceMappingURL=rotate.cjs.map

package/dist/cjs/components/rotate/rotate.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.cjs","names":["createComponent","rotateStyle","useControllableState","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"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,gBACEA,yCAA0C,UAAUC,iCAAY;;;;;;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,0CAAwB;CAC9B,MAAM,CAAC,OAAO,YAAYC,gEAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,iCAAsB,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,2CAACC,uBAAO;EACN,MAAK;EACL,iEAAwB,SAAS;EACjC,iEAAwB,SAAS;EACjC,cAAY;EACH;EACT,QAAQ,EAAE,QAAQ;EACR;EACV,SAAS;GAAE;GAAS,QAAQ;GAAQ;EACpC,2DAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;GACb;EAGrB,CAAC,SAAY,UAAU;CACtB,MAAM,MAAMC,6CAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;AAGnE,QAAO;EAAE,GAFIC,+CAAuB,OAAO,EAAE,SAAS,WAAW,CAAC;EAEhD;EAAK,SAAS;EAAa;EAC7C"}
+{"version":3,"file":"rotate.cjs","names":["createComponent","rotateStyle","useControllableState","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"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,gBACEA,yBAAAA,gBAA0C,UAAUC,qBAAAA,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,WAAA,GAAA,aAAA,eAAwB;CAC9B,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,WAAA,GAAA,MAAA,aAAsB,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,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,OAAO,QAAR;EACE,MAAK;EACL,kBAAA,GAAA,oBAAA,cAAA,UAAwB,SAAS;EACjC,kBAAA,GAAA,oBAAA,cAAA,UAAwB,SAAS;EACjC,cAAY;EACH;EACT,QAAQ,EAAE,QAAQ;EACR;EACV,SAAS;GAAE;GAAS,QAAQ;GAAQ;EACpC,UAAA,GAAA,oBAAA,cAAA,YAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;EACb,CAAA;EAGrB,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,MAAMC,wBAAAA,qBAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;CAGnE,OAAO;EAAE,GAFIC,wBAAAA,uBAAuB,OAAO,EAAE,SAAS,WAAW,CAEjD;EAAE;EAAK,SAAS;EAAa;EAC7C"}

package/dist/cjs/components/rotate/rotate.style.cjs

@@ -1,8 +1,5 @@
-const require_config = require('../../core/system/config.cjs');
-require('../../core/index.cjs');
-
 //#region src/components/rotate/rotate.style.ts
-const rotateStyle = require_config.defineComponentStyle({ base: {
+const rotateStyle = require("../../core/system/config.cjs").defineComponentStyle({ base: {
 	opacity: 1,
 	rounded: "l1",
 	userSelect: "none",
@@ -10,7 +7,7 @@ const rotateStyle = require_config.defineComponentStyle({ base: {
 	_readOnly: { layerStyle: "readOnly" },
 	_disabled: { layerStyle: "disabled" }
 } });
-
 //#endregion
 exports.rotateStyle = rotateStyle;
+
 //# sourceMappingURL=rotate.style.cjs.map

package/dist/cjs/components/rotate/rotate.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.style.cjs","names":["defineComponentStyle"],"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,cAAcA,oCAAqB,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.cjs","names":["defineComponentStyle"],"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,qDAAcA,CAAAA,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/cjs/components/saturation-slider/index.cjs

@@ -1,13 +1,13 @@
-const require_saturation_slider_style = require('./saturation-slider.style.cjs');
-const require_use_saturation_slider = require('./use-saturation-slider.cjs');
-const require_saturation_slider = require('./saturation-slider.cjs');
-const require_namespace = require('./namespace.cjs');
-
-Object.defineProperty(exports, 'SaturationSlider', {
-  enumerable: true,
-  get: function () {
-    return require_namespace.namespace_exports;
-  }
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_saturation_slider_style = require("./saturation-slider.style.cjs");
+const require_use_saturation_slider = require("./use-saturation-slider.cjs");
+const require_saturation_slider = require("./saturation-slider.cjs");
+const require_namespace = require("./namespace.cjs");
+Object.defineProperty(exports, "SaturationSlider", {
+	enumerable: true,
+	get: function() {
+		return require_namespace.namespace_exports;
+	}
 });
 exports.SaturationSliderPropsContext = require_saturation_slider.SaturationSliderPropsContext;
 exports.SaturationSliderRoot = require_saturation_slider.SaturationSliderRoot;
@@ -15,4 +15,4 @@ exports.SaturationSliderThumb = require_saturation_slider.SaturationSliderThumb;
 exports.SaturationSliderTrack = require_saturation_slider.SaturationSliderTrack;
 exports.saturationSliderStyle = require_saturation_slider_style.saturationSliderStyle;
 exports.useSaturationSlider = require_use_saturation_slider.useSaturationSlider;
-exports.useSaturationSliderPropsContext = require_saturation_slider.useSaturationSliderPropsContext;
+exports.useSaturationSliderPropsContext = require_saturation_slider.useSaturationSliderPropsContext;

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

@@ -1,20 +1,19 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_saturation_slider = require('./saturation-slider.cjs');
-
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_saturation_slider = require("./saturation-slider.cjs");
 //#region src/components/saturation-slider/namespace.ts
-var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	PropsContext: () => require_saturation_slider.SaturationSliderPropsContext,
 	Root: () => require_saturation_slider.SaturationSliderRoot,
 	Thumb: () => require_saturation_slider.SaturationSliderThumb,
 	Track: () => require_saturation_slider.SaturationSliderTrack,
 	usePropsContext: () => require_saturation_slider.useSaturationSliderPropsContext
 });
-
 //#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/saturation-slider/saturation-slider.cjs

@@ -1,14 +1,11 @@
 "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_saturation_slider_style = require('./saturation-slider.style.cjs');
-const require_use_saturation_slider = require('./use-saturation-slider.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_saturation_slider_style = require("./saturation-slider.style.cjs");
+const require_use_saturation_slider = require("./use-saturation-slider.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/saturation-slider/saturation-slider.tsx
 const { ComponentContext, PropsContext: SaturationSliderPropsContext, useComponentContext, usePropsContext: useSaturationSliderPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("saturation-slider", require_saturation_slider_style.saturationSliderStyle);
 /**
@@ -48,11 +45,11 @@ const SaturationSliderThumb = withContext("div", "thumb")(void 0, (props) => {
 	const { getThumbProps } = useComponentContext();
 	return getThumbProps(props);
 });
-
 //#endregion
 exports.SaturationSliderPropsContext = SaturationSliderPropsContext;
 exports.SaturationSliderRoot = SaturationSliderRoot;
 exports.SaturationSliderThumb = SaturationSliderThumb;
 exports.SaturationSliderTrack = SaturationSliderTrack;
 exports.useSaturationSliderPropsContext = useSaturationSliderPropsContext;
+
 //# sourceMappingURL=saturation-slider.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"saturation-slider.cjs","names":["createSlotComponent","saturationSliderStyle","useSaturationSlider","styled"],"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,iBACEA,6CAIF,qBAAqBC,sDAAsB;;;;;;AAS7C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClDC,kDAAoB,KAAK;CAC3B,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SACE,2CAAC;GAAsB,GAAI;aACzB,2CAAC,yBAAsB,GAAI,aAAc;IACnB;IAEzB;EAAC;EAAU;EAAY;EAAW,CAAC;AAMtC,QACE,2CAAC;EAAiB,iCALX;GAAE;GAAe;GAAe,GACvC,CAAC,eAAe,cAAc,CAC/B;YAIG,4CAACC,uBAAO;GAAI,GAAI,cAAc;cAC5B,2CAACA,uBAAO,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.cjs","names":["createSlotComponent","saturationSliderStyle","useSaturationSlider","styled"],"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,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,sBAAsB;;;;;;AAS7C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClDC,8BAAAA,oBAAoB,KAAK;CAC3B,MAAM,oBAAA,GAAA,MAAA,eAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;GAAuB,GAAI;aACzB,iBAAA,GAAA,kBAAA,KAAC,uBAAD,EAAuB,GAAI,YAAc,CAAA;GACnB,CAAA;IAEzB;EAAC;EAAU;EAAY;EAAW,CAAC;CAMtC,OACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,QAAA,GAAA,MAAA,gBALX;GAAE;GAAe;GAAe,GACvC,CAAC,eAAe,cAAc,CAIE;YAC9B,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,OAAO,KAAR;GAAY,GAAI,cAAc;aAA9B,CACE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,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"}