@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

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

@@ -1 +1 @@
-{"version":3,"file":"rating.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"sources":["../../../../src/components/rating/rating.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const ratingStyle = defineComponentSlotStyle({\n  base: {\n    group: { position: \"relative\" },\n    icon: {\n      alignItems: \"center\",\n      clipPath: \"{clip-path}\",\n      display: \"inline-flex\",\n      fill: \"currentColor\",\n      justifyContent: \"center\",\n    },\n    item: {\n      \"&:has(input:focus-visible)\": { ...focusRingStyle.outside },\n      color: { base: \"{empty-color}\", _filled: \"{filled-color}\" },\n      cursor: \"pointer\",\n      display: \"block\",\n      lineHeight: \"0\",\n      rounded: \"l1\",\n      _notLast: { inset: 0, position: \"absolute\" },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    root: {\n      \"--empty-color\": \"colors.bg.muted\",\n      \"--filled-color\": \"colorScheme.solid\",\n      display: \"flex\",\n      w: \"max-content\",\n    },\n  },\n\n  sizes: {\n    xs: { icon: { fontSize: \"md\" } },\n    sm: { icon: { fontSize: \"lg\" } },\n    md: { icon: { fontSize: \"xl\" } },\n    lg: { icon: { fontSize: \"2xl\" } },\n    xl: { icon: { fontSize: \"3xl\" } },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type RatingStyle = typeof ratingStyle\n"],"mappings":";;;;;AAEA,MAAa,cAAcA,wCAAyB;CAClD,MAAM;EACJ,OAAO,EAAE,UAAU,YAAY;EAC/B,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,SAAS;GACT,MAAM;GACN,gBAAgB;GACjB;EACD,MAAM;GACJ,8BAA8B,EAAE,GAAGC,kCAAe,SAAS;GAC3D,OAAO;IAAE,MAAM;IAAiB,SAAS;IAAkB;GAC3D,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,SAAS;GACT,UAAU;IAAE,OAAO;IAAG,UAAU;IAAY;GAC5C,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,MAAM;GACJ,iBAAiB;GACjB,kBAAkB;GAClB,SAAS;GACT,GAAG;GACJ;EACF;CAED,OAAO;EACL,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EACjC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EAClC;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"rating.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"sources":["../../../../src/components/rating/rating.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const ratingStyle = defineComponentSlotStyle({\n  base: {\n    group: { position: \"relative\" },\n    icon: {\n      alignItems: \"center\",\n      clipPath: \"{clip-path}\",\n      display: \"inline-flex\",\n      fill: \"currentColor\",\n      justifyContent: \"center\",\n    },\n    item: {\n      \"&:has(input:focus-visible)\": { ...focusRingStyle.outside },\n      color: { base: \"{empty-color}\", _filled: \"{filled-color}\" },\n      cursor: \"pointer\",\n      display: \"block\",\n      lineHeight: \"0\",\n      rounded: \"l1\",\n      _notLast: { inset: 0, position: \"absolute\" },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    root: {\n      \"--empty-color\": \"colors.bg.muted\",\n      \"--filled-color\": \"colorScheme.solid\",\n      display: \"flex\",\n      w: \"max-content\",\n      _container: [\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--form-group-variant: \"panel\"',\n        },\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--fieldset-root-variant: \"panel\"',\n        },\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--form-group-variant: \"elevated\"',\n        },\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--fieldset-root-variant: \"elevated\"',\n        },\n      ],\n    },\n  },\n\n  sizes: {\n    xs: { icon: { fontSize: \"md\" } },\n    sm: { icon: { fontSize: \"lg\" } },\n    md: { icon: { fontSize: \"xl\" } },\n    lg: { icon: { fontSize: \"2xl\" } },\n    xl: { icon: { fontSize: \"3xl\" } },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type RatingStyle = typeof ratingStyle\n"],"mappings":";;;;;AAEA,MAAa,cAAcA,wCAAyB;CAClD,MAAM;EACJ,OAAO,EAAE,UAAU,YAAY;EAC/B,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,SAAS;GACT,MAAM;GACN,gBAAgB;GACjB;EACD,MAAM;GACJ,8BAA8B,EAAE,GAAGC,kCAAe,SAAS;GAC3D,OAAO;IAAE,MAAM;IAAiB,SAAS;IAAkB;GAC3D,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,SAAS;GACT,UAAU;IAAE,OAAO;IAAG,UAAU;IAAY;GAC5C,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,MAAM;GACJ,iBAAiB;GACjB,kBAAkB;GAClB,SAAS;GACT,GAAG;GACH,YAAY;IACV;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACD;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACD;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACD;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACF;GACF;EACF;CAED,OAAO;EACL,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EACjC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EAClC;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/cjs/components/resizable/index.cjs

@@ -1,7 +1,9 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_resizable_style = require('./resizable.style.cjs');
 const require_use_resizable = require('./use-resizable.cjs');
 const require_resizable = require('./resizable.cjs');
 const require_namespace = require('./namespace.cjs');
+let react_resizable_panels = require("react-resizable-panels");
 
 Object.defineProperty(exports, 'Resizable', {
   enumerable: true,
@@ -18,5 +20,6 @@ exports.resizableStyle = require_resizable_style.resizableStyle;
 exports.useResizable = require_use_resizable.useResizable;
 exports.useResizableContext = require_use_resizable.useResizableContext;
 exports.useResizableItem = require_use_resizable.useResizableItem;
+exports.useResizableLayout = react_resizable_panels.useDefaultLayout;
 exports.useResizablePropsContext = require_resizable.useResizablePropsContext;
 exports.useResizableTrigger = require_use_resizable.useResizableTrigger;

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

@@ -1,6 +1,7 @@
 const require_rolldown_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({
@@ -10,6 +11,7 @@ var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	Root: () => require_resizable.ResizableRoot,
 	Trigger: () => require_resizable.ResizableTrigger,
 	useContext: () => require_use_resizable.useResizableContext,
+	useLayout: () => react_resizable_panels.useDefaultLayout,
 	usePropsContext: () => require_resizable.useResizablePropsContext
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/resizable/namespace.ts"],"sourcesContent":["export {\n  ResizableItem as Item,\n  ResizablePropsContext as PropsContext,\n  ResizableRoot as Root,\n  ResizableTrigger as Trigger,\n  useResizablePropsContext as usePropsContext,\n} from \"./resizable\"\nexport type {\n  ResizableItemProps as ItemProps,\n  ResizableRootProps as RootProps,\n  ResizableTriggerProps as TriggerProps,\n} from \"./resizable\"\nexport {\n  ResizableContext as Context,\n  useResizableContext as useContext,\n} from \"./use-resizable\"\nexport type {\n  ResizableGroupControl as GroupControl,\n  ResizableItemControl as ItemControl,\n  ResizableStorage as Storage,\n} from \"./use-resizable\"\n"],"mappings":""}
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/resizable/namespace.ts"],"sourcesContent":["export {\n  ResizableItem as Item,\n  ResizablePropsContext as PropsContext,\n  ResizableRoot as Root,\n  ResizableTrigger as Trigger,\n  useResizablePropsContext as usePropsContext,\n} from \"./resizable\"\nexport type {\n  ResizableItemProps as ItemProps,\n  ResizableRootProps as RootProps,\n  ResizableTriggerProps as TriggerProps,\n} from \"./resizable\"\nexport {\n  ResizableContext as Context,\n  useResizableContext as useContext,\n  useResizableLayout as useLayout,\n} from \"./use-resizable\"\nexport type {\n  ResizableItemControl as ItemControl,\n  ResizableRootControl as RootControl,\n  ResizableStorage as Storage,\n} from \"./use-resizable\"\n"],"mappings":""}

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

@@ -13,39 +13,39 @@ 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, rootRef, ...rest }) => {
-	const { controlRef, disabled, orientation, getGroupProps, getRootProps } = require_use_resizable.useResizable({
+const ResizableRoot = withProvider(({ children, orientation: orientationProp, ...rest }) => {
+	const { disabled, groupRef, orientation, getRootProps } = require_use_resizable.useResizable({
 		orientation: require_hooks_use_value_index.useValue(orientationProp),
 		...rest
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_resizable.ResizableContext, {
 		value: (0, react.useMemo)(() => ({
-			controlRef,
 			disabled,
+			groupRef,
 			orientation
 		}), [
 			disabled,
 			orientation,
-			controlRef
+			groupRef
 		]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
-			...getRootProps({ ref: rootRef }),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.PanelGroup, {
-				...getGroupProps(),
-				children
-			})
+			as: react_resizable_panels.Group,
+			...getRootProps(),
+			children
 		})
 	});
 }, "root", { transferProps: ["orientation"] })();
-const StyledPanel = require_factory.styled(react_resizable_panels.Panel, { forwardProps: ["order"] });
 const ResizableItem = withContext((props) => {
 	const { getItemProps } = require_use_resizable.useResizableItem(props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPanel, { ...getItemProps() });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+		as: react_resizable_panels.Panel,
+		...getItemProps()
+	});
 }, "item")();
 const ResizableTrigger = withContext(({ children, icon, iconProps, ...rest }) => {
 	const { getIconProps, getTriggerProps } = require_use_resizable.useResizableTrigger(rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
-		as: react_resizable_panels.PanelResizeHandle,
+		as: react_resizable_panels.Separator,
 		...getTriggerProps(),
 		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizableIcon, {
 			...getIconProps(iconProps),

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.cjs","names":["createSlotComponent","resizableStyle","useResizable","useValue","ResizableContext","styled","PanelGroup","Panel","useResizableItem","useResizableTrigger","PanelResizeHandle"],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef, 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 { Panel, PanelGroup, PanelResizeHandle } 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  /**\n   * Ref for resizable root element.\n   */\n  rootRef?: ForwardedRef<HTMLDivElement>\n}\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, rootRef, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { controlRef, disabled, orientation, getGroupProps, getRootProps } =\n      useResizable({ orientation: computedOrientation, ...rest })\n\n    const context = useMemo(\n      () => ({ controlRef, disabled, orientation }),\n      [disabled, orientation, controlRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div {...getRootProps({ ref: rootRef })}>\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nconst StyledPanel = styled(Panel, { forwardProps: [\"order\"] })\n\nexport interface ResizableItemProps\n  extends Omit<HTMLStyledPropsWithoutAs, \"order\">, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <StyledPanel {...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={PanelResizeHandle} {...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":";;;;;;;;;;;;;;AA0CA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,6CACF,aACAC,uCACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,SAAS,GAAG,WAAW;CAEhE,MAAM,EAAE,YAAY,UAAU,aAAa,eAAe,iBACxDC,mCAAa;EAAE,aAFWC,uCAAS,gBAAgB;EAEF,GAAG;EAAM,CAAC;AAO7D,QACE,2CAACC;EAAiB,iCALX;GAAE;GAAY;GAAU;GAAa,GAC5C;GAAC;GAAU;GAAa;GAAW,CACpC;YAIG,2CAACC,uBAAO;GAAI,GAAI,aAAa,EAAE,KAAK,SAAS,CAAC;aAC5C,2CAACC;IAAW,GAAI,eAAe;IAAG;KAAsB;IAC7C;GACI;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAEH,MAAM,cAAcD,uBAAOE,8BAAO,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC;AAK9D,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiBC,uCAAiB,MAAM;AAEhD,QAAO,2CAAC,eAAY,GAAI,cAAc,GAAI;GACzC,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;EAAmB,GAAI,iBAAiB;aACrD,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,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"}

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

@@ -50,8 +50,7 @@ const resizableStyle = require_config.defineComponentSlotStyle({
 			icon: {
 				color: "colorScheme.fg",
 				transitionDuration: "moderate",
-				transitionProperty: "common",
-				_active: { color: "transparent" }
+				transitionProperty: "common"
 			},
 			trigger: {
 				focusVisibleRing: "none",

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        _active: {\n          color: \"transparent\",\n        },\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;IACpB,SAAS,EACP,OAAO,eACR;IACF;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,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"}

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

@@ -9,118 +9,85 @@ 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 = ({ id, ref, controlRef: controlRefProp, disabled, keyboardStep, orientation = "horizontal", storage, storageKey, groupProps = {}, onLayout, ...rest } = {}) => {
-	const controlRef = (0, react.useRef)(null);
-	const uuid = (0, react.useId)();
-	id ??= uuid;
-	const getRootProps = (0, react.useCallback)((props = {}) => ({
-		...rest,
-		...props
-	}), [rest]);
-	const getGroupProps = (0, react.useCallback)(({ ref: ref$1, ...props } = {}) => ({
-		id,
-		autoSaveId: storageKey,
-		direction: orientation,
-		keyboardResizeBy: keyboardStep,
-		storage,
-		...groupProps,
-		...props,
-		ref: require_ref.mergeRefs(ref$1, controlRefProp, controlRef),
-		tagName: props.as ?? groupProps.as,
-		onLayout: (0, require_utils_index.utils_exports.fnAll)(props.onLayout, groupProps.onLayout, onLayout)
-	}), [
-		id,
-		orientation,
-		groupProps,
-		controlRefProp,
-		storageKey,
-		keyboardStep,
-		onLayout,
-		storage
-	]);
-	(0, react.useLayoutEffect)(() => {
-		require_ref.assignRef(ref, (0, react_resizable_panels.getPanelGroupElement)(id));
-	}, [ref, id]);
+const useResizable = ({ controlRef, disabled, orientation = "horizontal", ...rest } = {}) => {
+	const groupRef = (0, react_resizable_panels.useGroupRef)();
 	return {
-		controlRef,
 		disabled,
+		groupRef,
 		orientation,
-		getGroupProps,
-		getRootProps
+		getRootProps: (0, react.useCallback)((props = {}) => ({
+			disabled,
+			orientation,
+			...rest,
+			...props,
+			style: {
+				height: void 0,
+				width: void 0,
+				...rest.style,
+				...props.style
+			},
+			elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
+			groupRef: require_ref.mergeRefs(props.groupRef, groupRef, controlRef),
+			onLayoutChange: (0, require_utils_index.utils_exports.fnAll)(props.onLayoutChange, rest.onLayoutChange),
+			onLayoutChanged: (0, require_utils_index.utils_exports.fnAll)(props.onLayoutChanged, rest.onLayoutChanged)
+		}), [
+			disabled,
+			orientation,
+			groupRef,
+			controlRef,
+			rest
+		])
 	};
 };
-const useResizableItem = ({ id, ref, as, controlRef, onCollapse, onExpand, onResize, ...rest }) => {
-	const uuid = (0, react.useId)();
-	id ??= uuid;
-	const getItemProps = (0, react.useCallback)(({ ref: ref$1, ...props } = {}) => ({
-		id,
-		ref: require_ref.mergeRefs(ref$1, controlRef),
-		tagName: props.as ?? as,
-		...props,
-		...rest,
-		onCollapse: (0, require_utils_index.utils_exports.fnAll)(props.onCollapse, onCollapse),
-		onExpand: (0, require_utils_index.utils_exports.fnAll)(props.onExpand, onExpand),
-		onResize: (0, require_utils_index.utils_exports.fnAll)(props.onResize, onResize)
-	}), [
-		as,
-		controlRef,
-		id,
-		onCollapse,
-		onExpand,
-		onResize,
-		rest
-	]);
-	(0, react.useLayoutEffect)(() => {
-		require_ref.assignRef(ref, (0, react_resizable_panels.getPanelElement)(id));
-	}, [ref, id]);
-	return { getItemProps };
+const useResizableItem = ({ controlRef, ...rest }) => {
+	const panelRef = (0, react_resizable_panels.usePanelRef)();
+	return {
+		panelRef,
+		getItemProps: (0, react.useCallback)((props = {}) => ({
+			...rest,
+			...props,
+			elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
+			panelRef: require_ref.mergeRefs(props.panelRef, panelRef, controlRef),
+			onResize: (0, require_utils_index.utils_exports.fnAll)(props.onResize, rest.onResize)
+		}), [
+			panelRef,
+			controlRef,
+			rest
+		])
+	};
 };
-const useResizableTrigger = ({ id, ref, as, disabled, onDragging, ...rest }) => {
-	const uuid = (0, react.useId)();
-	const { controlRef, disabled: groupDisabled, orientation } = useResizableContext();
-	const [active, setActive] = (0, react.useState)(false);
+const useResizableTrigger = ({ disabled, ...rest }) => {
+	const { disabled: groupDisabled, groupRef, orientation } = useResizableContext();
 	const trulyDisabled = disabled || groupDisabled;
-	id ??= uuid;
 	const onDoubleClick = (0, react.useCallback)((ev) => {
 		ev.preventDefault();
-		const layout = controlRef.current?.getLayout();
+		const layout = groupRef.current?.getLayout();
 		if (!layout) return;
-		const size = 100 / layout.length;
-		const nextLayout = layout.map(() => size);
-		controlRef.current?.setLayout(nextLayout);
-	}, [controlRef]);
+		const size = 100 / Object.keys(layout).length;
+		const nextLayout = Object.fromEntries(Object.keys(layout).map((key) => [key, size]));
+		groupRef.current?.setLayout(nextLayout);
+	}, [groupRef]);
 	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
-		id,
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(trulyDisabled),
 		"aria-orientation": orientation,
-		"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
 		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(trulyDisabled),
 		disabled: trulyDisabled,
 		tabIndex: trulyDisabled ? -1 : 0,
-		tagName: props.as ?? as,
 		...rest,
 		...props,
-		onDoubleClick: (0, require_utils_index.utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick),
-		onDragging: (0, require_utils_index.utils_exports.fnAll)(props.onDragging, onDragging, setActive)
+		elementRef: require_ref.mergeRefs(props.elementRef, rest.ref),
+		onDoubleClick: (0, require_utils_index.utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick)
 	}), [
-		id,
-		as,
 		orientation,
 		trulyDisabled,
 		rest,
-		onDoubleClick,
-		onDragging,
-		active
+		onDoubleClick
 	]);
-	const getIconProps = (0, react.useCallback)((props = {}) => ({
-		"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
-		"data-icon": "",
-		...props
-	}), [active]);
-	(0, react.useLayoutEffect)(() => {
-		require_ref.assignRef(ref, (0, react_resizable_panels.getResizeHandleElement)(id));
-	}, [ref, id]);
 	return {
-		getIconProps,
+		getIconProps: (0, react.useCallback)((props = {}) => ({
+			"data-icon": "",
+			...props
+		}), []),
 		getTriggerProps
 	};
 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.cjs","names":["createContext","getRootProps: PropGetter","getGroupProps: PropGetter<\n    ResizableGroupProps,\n    undefined,\n    PanelGroupProps\n  >","mergeRefs","ref","getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>","getTriggerProps: PropGetter<\n    ResizableTriggerProps,\n    undefined,\n    PanelResizeHandleProps\n  >","getIconProps: PropGetter"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, MouseEventHandler, RefObject } from \"react\"\nimport type {\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport type {\n  HTMLProps,\n  HTMLRefAttributes,\n  Orientation,\n  PropGetter,\n} from \"../../core\"\nimport { useCallback, useId, useLayoutEffect, useRef, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport {\n  assignRef,\n  createContext,\n  dataAttr,\n  fnAll,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<\n  UseResizableReturn,\n  \"getGroupProps\" | \"getRootProps\"\n> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n  {\n    name: \"ResizableContext\",\n  },\n)\n\nexport { ResizableContext, useResizableContext }\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableGroupProps extends Omit<\n  Partial<PanelGroupProps>,\n  \"tagName\"\n> {\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n  /**\n   * Ref of the resizable group callback.\n   */\n  ref?: RefObject<ResizableGroupControl>\n}\ninterface ResizableItemProps extends Omit<PanelProps, \"tagName\"> {\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n  /**\n   * Ref of the resizable item callback.\n   */\n  ref?: RefObject<ResizableItemControl>\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"tagName\">, HTMLRefAttributes {\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n}\n\nexport interface UseResizableProps extends HTMLProps {\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableGroupControl>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  disabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * The orientation of the resizable.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  controlRef: controlRefProp,\n  disabled,\n  keyboardStep,\n  orientation = \"horizontal\",\n  storage,\n  storageKey,\n  groupProps = {},\n  onLayout,\n  ...rest\n}: UseResizableProps = {}) => {\n  const controlRef = useRef<ResizableGroupControl>(null)\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getGroupProps: PropGetter<\n    ResizableGroupProps,\n    undefined,\n    PanelGroupProps\n  > = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id,\n      autoSaveId: storageKey,\n      direction: orientation,\n      keyboardResizeBy: keyboardStep,\n      storage,\n      ...groupProps,\n      ...props,\n      ref: mergeRefs(ref, controlRefProp, controlRef),\n      tagName: props.as ?? groupProps.as,\n      onLayout: fnAll(props.onLayout, groupProps.onLayout, onLayout),\n    }),\n    [\n      id,\n      orientation,\n      groupProps,\n      controlRefProp,\n      storageKey,\n      keyboardStep,\n      onLayout,\n      storage,\n    ],\n  )\n\n  useLayoutEffect(() => {\n    const el = getPanelGroupElement(id) as HTMLDivElement | null\n\n    assignRef(ref, el)\n  }, [ref, id])\n\n  return {\n    controlRef,\n    disabled,\n    orientation,\n    getGroupProps,\n    getRootProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n  extends HTMLProps, Pick<ResizableItemProps, \"as\"> {\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<null | ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  as,\n  controlRef,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...rest\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps> =\n    useCallback(\n      ({ ref, ...props } = {}) => ({\n        id,\n        ref: mergeRefs(ref, controlRef),\n        tagName: props.as ?? as,\n        ...props,\n        ...rest,\n        onCollapse: fnAll(props.onCollapse, onCollapse),\n        onExpand: fnAll(props.onExpand, onExpand),\n        onResize: fnAll(props.onResize, onResize),\n      }),\n      [as, controlRef, id, onCollapse, onExpand, onResize, rest],\n    )\n\n  useLayoutEffect(() => {\n    const el = getPanelElement(id) as HTMLDivElement | null\n\n    assignRef(ref, el)\n  }, [ref, id])\n\n  return {\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n  extends HTMLProps, Pick<ResizableTriggerProps, \"as\"> {\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (dragging: boolean) => void\n}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n  const {\n    controlRef,\n    disabled: groupDisabled,\n    orientation,\n  } = useResizableContext()\n  const [active, setActive] = useState<boolean>(false)\n  const trulyDisabled = disabled || groupDisabled\n\n  id ??= uuid\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = controlRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = layout.length\n      const size = 100 / count\n      const nextLayout = layout.map(() => size)\n\n      controlRef.current?.setLayout(nextLayout)\n    },\n    [controlRef],\n  )\n\n  const getTriggerProps: PropGetter<\n    ResizableTriggerProps,\n    undefined,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        id,\n        \"aria-orientation\": orientation,\n        \"data-active\": dataAttr(active),\n        \"data-disabled\": dataAttr(trulyDisabled),\n        disabled: trulyDisabled,\n        tabIndex: trulyDisabled ? -1 : 0,\n        tagName: props.as ?? as,\n        ...rest,\n        ...props,\n        onDoubleClick: handlerAll(\n          props.onDoubleClick as MouseEventHandler<HTMLDivElement> | undefined,\n          rest.onDoubleClick,\n          onDoubleClick,\n        ),\n        onDragging: fnAll(props.onDragging, onDragging, setActive),\n      }) as unknown as PanelResizeHandleProps,\n    [\n      id,\n      as,\n      orientation,\n      trulyDisabled,\n      rest,\n      onDoubleClick,\n      onDragging,\n      active,\n    ],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"data-active\": dataAttr(active),\n      \"data-icon\": \"\",\n      ...props,\n    }),\n    [active],\n  )\n\n  useLayoutEffect(() => {\n    const el = getResizeHandleElement(id) as HTMLDivElement | null\n\n    assignRef(ref, el)\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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"}
+{"version":3,"file":"use-resizable.cjs","names":["createContext","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 {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  fnAll,\n  handlerAll,\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      disabled,\n      orientation,\n      ...rest,\n      ...props,\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    [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      ...rest,\n      ...props,\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n      onResize: fnAll(props.onResize, rest.onResize),\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      \"aria-disabled\": ariaAttr(trulyDisabled),\n      \"aria-orientation\": orientation,\n      \"data-disabled\": dataAttr(trulyDisabled),\n      disabled: trulyDisabled,\n      tabIndex: trulyDisabled ? -1 : 0,\n      ...rest,\n      ...props,\n      elementRef: mergeRefs(props.elementRef, rest.ref),\n      onDoubleClick: handlerAll(\n        props.onDoubleClick,\n        rest.onDoubleClick,\n        onDoubleClick,\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;AAsB9B,QAAO;EACL;EACA;EACA;EACA,sCAvBC,QAAQ,EAAE,MAAM;GACf;GACA;GACA,GAAG;GACH,GAAG;GACH,OAAO;IACL,QAAQ;IACR,OAAO;IACP,GAAG,KAAK;IACR,GAAG,MAAM;IACV;GACD,YAAYC,sBAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;GACzD,6DAAsB,MAAM,gBAAgB,KAAK,eAAe;GAChE,8DAAuB,MAAM,iBAAiB,KAAK,gBAAgB;GACpE,GACD;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,oDAAwB;AAa9B,QAAO;EACL;EACA,sCAZC,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH,YAAYA,sBAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAUA,sBAAU,MAAM,UAAU,UAAU,WAAW;GACzD,uDAAgB,MAAM,UAAU,KAAK,SAAS;GAC/C,GACD;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,MAAM;EACf,iEAA0B,cAAc;EACxC,oBAAoB;EACpB,iEAA0B,cAAc;EACxC,UAAU;EACV,UAAU,gBAAgB,KAAK;EAC/B,GAAG;EACH,GAAG;EACH,YAAYD,sBAAU,MAAM,YAAY,KAAK,IAAI;EACjD,iEACE,MAAM,eACN,KAAK,eACL,cACD;EACF,GACD;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,sCARC,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}

package/dist/cjs/components/select/select.cjs

@@ -9,13 +9,13 @@ const require_check_icon = require('../icon/icons/check-icon.cjs');
 const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
 const require_x_icon = require('../icon/icons/x-icon.cjs');
 require('../icon/index.cjs');
+const require_use_group = require('../group/use-group.cjs');
+require('../group/index.cjs');
 const require_popover = require('../popover/popover.cjs');
 require('../popover/index.cjs');
 const require_use_input_border = require('../input/use-input-border.cjs');
 const require_input = require('../input/input.cjs');
 const require_input_element = require('../input/input-element.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_select_style = require('./select.style.cjs');

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

@@ -146,6 +146,24 @@ const sliderStyle = require_config.defineComponentSlotStyle({
 		}
 	},
 	variants: {
+		base: { root: { _container: [
+			{
+				css: { "--track-fill": "colors.bg" },
+				style: "--form-group-variant: \"panel\""
+			},
+			{
+				css: { "--track-fill": "colors.bg" },
+				style: "--fieldset-root-variant: \"panel\""
+			},
+			{
+				css: { "--track-fill": "colors.bg" },
+				style: "--form-group-variant: \"elevated\""
+			},
+			{
+				css: { "--track-fill": "colors.bg" },
+				style: "--fieldset-root-variant: \"elevated\""
+			}
+		] } },
 		outline: { root: {
 			"--indicator-fill": "colorScheme.solid",
 			"--range-fill": "colorScheme.solid",

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

@@ -1 +1 @@
-{"version":3,"file":"slider.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/slider/slider.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const sliderStyle = defineComponentSlotStyle({\n  base: {\n    mark: {\n      \"&[data-indicator]\": {\n        _before: {\n          bg: \"{indicator-fill}\",\n          boxSize: \"{track-size}\",\n          position: \"absolute\",\n          rounded: \"{indicator-rounded}\",\n        },\n        _between: {\n          \"--indicator-fill\": \"colorScheme.contrast\",\n        },\n      },\n      color: \"fg.muted\",\n      fontSize: \"xs\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      textAlign: \"center\",\n      whiteSpace: \"nowrap\",\n      zIndex: 1,\n    },\n    range: {\n      bg: \"{range-fill}\",\n      position: \"absolute\",\n      rounded: \"{track-rounded}\",\n    },\n    root: {\n      \"--indicator-rounded\": \"radii.full\",\n      \"--track-rounded\": \"radii.full\",\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      isolation: \"isolate\",\n      position: \"relative\",\n      touchAction: \"none\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    thumb: {\n      alignItems: \"center\",\n      bg: \"{thumb-fill}\",\n      borderColor: \"{thumb-stroke}\",\n      borderWidth: \"2px\",\n      boxSize: \"{thumb-size}\",\n      color: \"{thumb-stroke}\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      rounded: \"{thumb-rounded}\",\n      zIndex: 2,\n    },\n    track: {\n      bg: \"{track-fill}\",\n      cursor: {\n        base: \"pointer\",\n        _readOnly: \"default\",\n        _disabled: \"not-allowed\",\n      },\n      flex: \"1\",\n      position: \"relative\",\n      rounded: \"{track-rounded}\",\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the slider.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        mark: {\n          left: \"{mark-position}\",\n          pt: \"calc({track-size} + {spaces.2})\",\n          top: \"0\",\n          translate: \"-50% 0\",\n          _before: {\n            left: \"50%\",\n            top: \"0\",\n            translate: \"-50% 0\",\n          },\n        },\n        range: {\n          h: \"full\",\n          left: \"{range-start}\",\n          top: \"50%\",\n          translate: \"0 -50%\",\n          w: \"calc({range-end} - {range-start} + ({track-size} / 2))\",\n          _range: {\n            left: \"calc({range-start} - ({track-size} / 2))\",\n            w: \"calc({range-end} - {range-start} + {track-size})\",\n          },\n        },\n        root: {\n          flexDirection: \"row\",\n          minW: \"{thumb-size}\",\n          w: \"full\",\n        },\n        thumb: {\n          top: \"50%\",\n          translate: \"-50% -50%\",\n          _end: { left: \"{range-end}\" },\n          _start: { left: \"{range-start}\" },\n        },\n        track: {\n          h: \"{track-size}\",\n        },\n      },\n      vertical: {\n        mark: {\n          bottom: \"{mark-position}\",\n          left: \"0\",\n          lineHeight: \"2\",\n          ps: \"calc({track-size} + {spaces.3})\",\n          translate: \"0 50%\",\n          _before: {\n            left: \"0\",\n            top: \"50%\",\n            translate: \"0 -50%\",\n          },\n        },\n        range: {\n          bottom: \"{range-start}\",\n          h: \"calc({range-end} - {range-start} + ({track-size} / 2))\",\n          left: \"50%\",\n          translate: \"-50% 0\",\n          w: \"full\",\n          _range: {\n            bottom: \"calc({range-start} - ({track-size} / 2))\",\n            h: \"calc({range-end} - {range-start} + {track-size})\",\n          },\n        },\n        root: {\n          flexDirection: \"column\",\n          h: \"full\",\n          minH: \"{thumb-size}\",\n        },\n        thumb: {\n          left: \"50%\",\n          translate: \"-50% 50%\",\n          _end: { bottom: \"{range-end}\" },\n          _start: { bottom: \"{range-start}\" },\n        },\n        track: {\n          w: \"{track-size}\",\n        },\n      },\n    },\n    /**\n     * The shape of the thumb.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        root: { \"--thumb-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        root: { \"--thumb-rounded\": \"radii.l2\" },\n      },\n      square: {\n        root: { \"--thumb-rounded\": \"0\" },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      root: {\n        \"--indicator-fill\": \"colorScheme.solid\",\n        \"--range-fill\": \"colorScheme.solid\",\n        \"--thumb-fill\": \"colors.bg\",\n        \"--thumb-stroke\": \"colorScheme.solid\",\n        \"--track-fill\": \"colors.bg.muted\",\n      },\n    },\n    solid: {\n      root: {\n        \"--indicator-fill\": \"colorScheme.solid\",\n        \"--range-fill\": \"colorScheme.solid\",\n        \"--thumb-fill\": \"colorScheme.solid\",\n        \"--thumb-stroke\": \"colorScheme.solid\",\n        \"--track-fill\": \"colors.bg.muted\",\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: {\n        \"--thumb-size\": \"sizes.3\",\n        \"--track-size\": \"sizes.1\",\n      },\n    },\n    sm: {\n      root: {\n        \"--thumb-size\": \"sizes.4\",\n        \"--track-size\": \"sizes.1.5\",\n      },\n    },\n    md: {\n      root: {\n        \"--thumb-size\": \"sizes.5\",\n        \"--track-size\": \"sizes.2\",\n      },\n    },\n    lg: {\n      root: {\n        \"--thumb-size\": \"sizes.6\",\n        \"--track-size\": \"sizes.2.5\",\n      },\n    },\n    xl: {\n      root: {\n        \"--thumb-size\": \"sizes.7\",\n        \"--track-size\": \"sizes.3\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    orientation: \"horizontal\",\n    shape: \"circle\",\n  },\n})\n\nexport type SliderStyle = typeof sliderStyle\n"],"mappings":";;;;AAEA,MAAa,cAAcA,wCAAyB;CAClD,MAAM;EACJ,MAAM;GACJ,qBAAqB;IACnB,SAAS;KACP,IAAI;KACJ,SAAS;KACT,UAAU;KACV,SAAS;KACV;IACD,UAAU,EACR,oBAAoB,wBACrB;IACF;GACD,OAAO;GACP,UAAU;GACV,eAAe;GACf,UAAU;GACV,WAAW;GACX,YAAY;GACZ,QAAQ;GACT;EACD,OAAO;GACL,IAAI;GACJ,UAAU;GACV,SAAS;GACV;EACD,MAAM;GACJ,uBAAuB;GACvB,mBAAmB;GACnB,YAAY;GACZ,SAAS;GACT,WAAW;GACX,UAAU;GACV,aAAa;GACb,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,OAAO;GACL,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS;GACT,OAAO;GACP,SAAS;GACT,gBAAgB;GAChB,UAAU;GACV,SAAS;GACT,QAAQ;GACT;EACD,OAAO;GACL,IAAI;GACJ,QAAQ;IACN,MAAM;IACN,WAAW;IACX,WAAW;IACZ;GACD,MAAM;GACN,UAAU;GACV,SAAS;GACV;EACF;CAED,OAAO;EAML,aAAa;GACX,YAAY;IACV,MAAM;KACJ,MAAM;KACN,IAAI;KACJ,KAAK;KACL,WAAW;KACX,SAAS;MACP,MAAM;MACN,KAAK;MACL,WAAW;MACZ;KACF;IACD,OAAO;KACL,GAAG;KACH,MAAM;KACN,KAAK;KACL,WAAW;KACX,GAAG;KACH,QAAQ;MACN,MAAM;MACN,GAAG;MACJ;KACF;IACD,MAAM;KACJ,eAAe;KACf,MAAM;KACN,GAAG;KACJ;IACD,OAAO;KACL,KAAK;KACL,WAAW;KACX,MAAM,EAAE,MAAM,eAAe;KAC7B,QAAQ,EAAE,MAAM,iBAAiB;KAClC;IACD,OAAO,EACL,GAAG,gBACJ;IACF;GACD,UAAU;IACR,MAAM;KACJ,QAAQ;KACR,MAAM;KACN,YAAY;KACZ,IAAI;KACJ,WAAW;KACX,SAAS;MACP,MAAM;MACN,KAAK;MACL,WAAW;MACZ;KACF;IACD,OAAO;KACL,QAAQ;KACR,GAAG;KACH,MAAM;KACN,WAAW;KACX,GAAG;KACH,QAAQ;MACN,QAAQ;MACR,GAAG;MACJ;KACF;IACD,MAAM;KACJ,eAAe;KACf,GAAG;KACH,MAAM;KACP;IACD,OAAO;KACL,MAAM;KACN,WAAW;KACX,MAAM,EAAE,QAAQ,eAAe;KAC/B,QAAQ,EAAE,QAAQ,iBAAiB;KACpC;IACD,OAAO,EACL,GAAG,gBACJ;IACF;GACF;EAMD,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,mBAAmB,cAAc,EAC1C;GACD,SAAS,EACP,MAAM,EAAE,mBAAmB,YAAY,EACxC;GACD,QAAQ,EACN,MAAM,EAAE,mBAAmB,KAAK,EACjC;GACF;EACF;CAED,UAAU;EACR,SAAS,EACP,MAAM;GACJ,oBAAoB;GACpB,gBAAgB;GAChB,gBAAgB;GAChB,kBAAkB;GAClB,gBAAgB;GACjB,EACF;EACD,OAAO,EACL,MAAM;GACJ,oBAAoB;GACpB,gBAAgB;GAChB,gBAAgB;GAChB,kBAAkB;GAClB,gBAAgB;GACjB,EACF;EACF;CAED,OAAO;EACL,IAAI,EACF,MAAM;GACJ,gBAAgB;GAChB,gBAAgB;GACjB,EACF;EACD,IAAI,EACF,MAAM;GACJ,gBAAgB;GAChB,gBAAgB;GACjB,EACF;EACD,IAAI,EACF,MAAM;GACJ,gBAAgB;GAChB,gBAAgB;GACjB,EACF;EACD,IAAI,EACF,MAAM;GACJ,gBAAgB;GAChB,gBAAgB;GACjB,EACF;EACD,IAAI,EACF,MAAM;GACJ,gBAAgB;GAChB,gBAAgB;GACjB,EACF;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,aAAa;EACb,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"slider.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/slider/slider.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const sliderStyle = defineComponentSlotStyle({\n  base: {\n    mark: {\n      \"&[data-indicator]\": {\n        _before: {\n          bg: \"{indicator-fill}\",\n          boxSize: \"{track-size}\",\n          position: \"absolute\",\n          rounded: \"{indicator-rounded}\",\n        },\n        _between: {\n          \"--indicator-fill\": \"colorScheme.contrast\",\n        },\n      },\n      color: \"fg.muted\",\n      fontSize: \"xs\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      textAlign: \"center\",\n      whiteSpace: \"nowrap\",\n      zIndex: 1,\n    },\n    range: {\n      bg: \"{range-fill}\",\n      position: \"absolute\",\n      rounded: \"{track-rounded}\",\n    },\n    root: {\n      \"--indicator-rounded\": \"radii.full\",\n      \"--track-rounded\": \"radii.full\",\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      isolation: \"isolate\",\n      position: \"relative\",\n      touchAction: \"none\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    thumb: {\n      alignItems: \"center\",\n      bg: \"{thumb-fill}\",\n      borderColor: \"{thumb-stroke}\",\n      borderWidth: \"2px\",\n      boxSize: \"{thumb-size}\",\n      color: \"{thumb-stroke}\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      rounded: \"{thumb-rounded}\",\n      zIndex: 2,\n    },\n    track: {\n      bg: \"{track-fill}\",\n      cursor: {\n        base: \"pointer\",\n        _readOnly: \"default\",\n        _disabled: \"not-allowed\",\n      },\n      flex: \"1\",\n      position: \"relative\",\n      rounded: \"{track-rounded}\",\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the slider.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        mark: {\n          left: \"{mark-position}\",\n          pt: \"calc({track-size} + {spaces.2})\",\n          top: \"0\",\n          translate: \"-50% 0\",\n          _before: {\n            left: \"50%\",\n            top: \"0\",\n            translate: \"-50% 0\",\n          },\n        },\n        range: {\n          h: \"full\",\n          left: \"{range-start}\",\n          top: \"50%\",\n          translate: \"0 -50%\",\n          w: \"calc({range-end} - {range-start} + ({track-size} / 2))\",\n          _range: {\n            left: \"calc({range-start} - ({track-size} / 2))\",\n            w: \"calc({range-end} - {range-start} + {track-size})\",\n          },\n        },\n        root: {\n          flexDirection: \"row\",\n          minW: \"{thumb-size}\",\n          w: \"full\",\n        },\n        thumb: {\n          top: \"50%\",\n          translate: \"-50% -50%\",\n          _end: { left: \"{range-end}\" },\n          _start: { left: \"{range-start}\" },\n        },\n        track: {\n          h: \"{track-size}\",\n        },\n      },\n      vertical: {\n        mark: {\n          bottom: \"{mark-position}\",\n          left: \"0\",\n          lineHeight: \"2\",\n          ps: \"calc({track-size} + {spaces.3})\",\n          translate: \"0 50%\",\n          _before: {\n            left: \"0\",\n            top: \"50%\",\n            translate: \"0 -50%\",\n          },\n        },\n        range: {\n          bottom: \"{range-start}\",\n          h: \"calc({range-end} - {range-start} + ({track-size} / 2))\",\n          left: \"50%\",\n          translate: \"-50% 0\",\n          w: \"full\",\n          _range: {\n            bottom: \"calc({range-start} - ({track-size} / 2))\",\n            h: \"calc({range-end} - {range-start} + {track-size})\",\n          },\n        },\n        root: {\n          flexDirection: \"column\",\n          h: \"full\",\n          minH: \"{thumb-size}\",\n        },\n        thumb: {\n          left: \"50%\",\n          translate: \"-50% 50%\",\n          _end: { bottom: \"{range-end}\" },\n          _start: { bottom: \"{range-start}\" },\n        },\n        track: {\n          w: \"{track-size}\",\n        },\n      },\n    },\n    /**\n     * The shape of the thumb.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        root: { \"--thumb-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        root: { \"--thumb-rounded\": \"radii.l2\" },\n      },\n      square: {\n        root: { \"--thumb-rounded\": \"0\" },\n      },\n    },\n  },\n\n  variants: {\n    base: {\n      root: {\n        _container: [\n          {\n            css: { \"--track-fill\": \"colors.bg\" },\n            style: '--form-group-variant: \"panel\"',\n          },\n          {\n            css: { \"--track-fill\": \"colors.bg\" },\n            style: '--fieldset-root-variant: \"panel\"',\n          },\n          {\n            css: { \"--track-fill\": \"colors.bg\" },\n            style: '--form-group-variant: \"elevated\"',\n          },\n          {\n            css: { \"--track-fill\": \"colors.bg\" },\n            style: '--fieldset-root-variant: \"elevated\"',\n          },\n        ],\n      },\n    },\n    outline: {\n      root: {\n        \"--indicator-fill\": \"colorScheme.solid\",\n        \"--range-fill\": \"colorScheme.solid\",\n        \"--thumb-fill\": \"colors.bg\",\n        \"--thumb-stroke\": \"colorScheme.solid\",\n        \"--track-fill\": \"colors.bg.muted\",\n      },\n    },\n    solid: {\n      root: {\n        \"--indicator-fill\": \"colorScheme.solid\",\n        \"--range-fill\": \"colorScheme.solid\",\n        \"--thumb-fill\": \"colorScheme.solid\",\n        \"--thumb-stroke\": \"colorScheme.solid\",\n        \"--track-fill\": \"colors.bg.muted\",\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: {\n        \"--thumb-size\": \"sizes.3\",\n        \"--track-size\": \"sizes.1\",\n      },\n    },\n    sm: {\n      root: {\n        \"--thumb-size\": \"sizes.4\",\n        \"--track-size\": \"sizes.1.5\",\n      },\n    },\n    md: {\n      root: {\n        \"--thumb-size\": \"sizes.5\",\n        \"--track-size\": \"sizes.2\",\n      },\n    },\n    lg: {\n      root: {\n        \"--thumb-size\": \"sizes.6\",\n        \"--track-size\": \"sizes.2.5\",\n      },\n    },\n    xl: {\n      root: {\n        \"--thumb-size\": \"sizes.7\",\n        \"--track-size\": \"sizes.3\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    orientation: \"horizontal\",\n    shape: \"circle\",\n  },\n})\n\nexport type SliderStyle = typeof sliderStyle\n"],"mappings":"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"}

package/dist/cjs/components/tip/index.cjs

@@ -0,0 +1,3 @@
+const require_tip = require('./tip.cjs');
+
+exports.Tip = require_tip.Tip;

package/dist/cjs/components/tip/tip.cjs

@@ -0,0 +1,53 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_circle_check_big_icon = require('../icon/icons/circle-check-big-icon.cjs');
+const require_circle_question_mark_icon = require('../icon/icons/circle-question-mark-icon.cjs');
+const require_info_icon = require('../icon/icons/info-icon.cjs');
+const require_octagon_alert_icon = require('../icon/icons/octagon-alert-icon.cjs');
+const require_triangle_alert_icon = require('../icon/icons/triangle-alert-icon.cjs');
+require('../icon/index.cjs');
+const require_icon_button = require('../button/icon-button.cjs');
+require('../button/index.cjs');
+const require_use_tooltip = require('../tooltip/use-tooltip.cjs');
+const require_tooltip = require('../tooltip/tooltip.cjs');
+require('../tooltip/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/tip/tip.tsx
+const icons = {
+	error: require_octagon_alert_icon.OctagonAlertIcon,
+	help: require_circle_question_mark_icon.CircleQuestionMarkIcon,
+	info: require_info_icon.InfoIcon,
+	success: require_circle_check_big_icon.CircleCheckBigIcon,
+	warning: require_triangle_alert_icon.TriangleAlertIcon
+};
+/**
+*  `Tip` is a component that displays supplementary information with a built-in icon trigger.
+*
+* @see https://yamada-ui.com/docs/components/tip
+*/
+const Tip = (props) => {
+	const [tooltipProps, { animationScheme, content, duration, status = "help", contentProps, portalProps, ...rest }] = require_use_tooltip.useTooltipProps(props);
+	const Icon = icons[status];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+		animationScheme,
+		content,
+		duration,
+		contentProps,
+		portalProps,
+		...tooltipProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.IconButton, {
+			size: "2xs",
+			variant: "ghost",
+			"aria-label": (0, require_utils_index.utils_exports.isString)(content) ? content : void 0,
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}),
+			...rest
+		})
+	});
+};
+
+//#endregion
+exports.Tip = Tip;
+//# sourceMappingURL=tip.cjs.map

package/dist/cjs/components/tip/tip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tip.cjs","names":["OctagonAlertIcon","CircleQuestionMarkIcon","InfoIcon","CircleCheckBigIcon","TriangleAlertIcon","Tip: FC<TipProps>","useTooltipProps","Tooltip","IconButton"],"sources":["../../../../src/components/tip/tip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC } from \"react\"\nimport type { WithoutThemeProps } from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { StatusScheme } from \"../status\"\nimport type { TooltipProps, TooltipStyle } from \"../tooltip\"\nimport { isString } from \"../../utils\"\nimport { IconButton } from \"../button\"\nimport {\n  CircleCheckBigIcon,\n  CircleQuestionMarkIcon,\n  InfoIcon,\n  OctagonAlertIcon,\n  TriangleAlertIcon,\n} from \"../icon\"\nimport { Tooltip, useTooltipProps } from \"../tooltip\"\n\nexport type TipStatusScheme = \"help\" | StatusScheme\n\nconst icons = {\n  error: OctagonAlertIcon,\n  help: CircleQuestionMarkIcon,\n  info: InfoIcon,\n  success: CircleCheckBigIcon,\n  warning: TriangleAlertIcon,\n} as const\n\nexport interface TipProps\n  extends\n    WithoutThemeProps<TooltipProps, TooltipStyle>,\n    Omit<IconButtonProps, \"content\" | \"offset\" | \"transform\"> {\n  /**\n   * The status of the tip.\n   *\n   * @default 'help'\n   */\n  status?: TipStatusScheme\n}\n\n/**\n *  `Tip` is a component that displays supplementary information with a built-in icon trigger.\n *\n * @see https://yamada-ui.com/docs/components/tip\n */\nexport const Tip: FC<TipProps> = (props) => {\n  const [\n    tooltipProps,\n    {\n      animationScheme,\n      content,\n      duration,\n      status = \"help\",\n      contentProps,\n      portalProps,\n      ...rest\n    },\n  ] = useTooltipProps(props)\n  const Icon = icons[status]\n\n  return (\n    <Tooltip\n      animationScheme={animationScheme}\n      content={content}\n      duration={duration}\n      contentProps={contentProps}\n      portalProps={portalProps}\n      {...tooltipProps}\n    >\n      <IconButton\n        size=\"2xs\"\n        variant=\"ghost\"\n        aria-label={isString(content) ? content : undefined}\n        icon={<Icon />}\n        {...rest}\n      />\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAM,QAAQ;CACZ,OAAOA;CACP,MAAMC;CACN,MAAMC;CACN,SAASC;CACT,SAASC;CACV;;;;;;AAmBD,MAAaC,OAAqB,UAAU;CAC1C,MAAM,CACJ,cACA,EACE,iBACA,SACA,UACA,SAAS,QACT,cACA,aACA,GAAG,UAEHC,oCAAgB,MAAM;CAC1B,MAAM,OAAO,MAAM;AAEnB,QACE,2CAACC;EACkB;EACR;EACC;EACI;EACD;EACb,GAAI;YAEJ,2CAACC;GACC,MAAK;GACL,SAAQ;GACR,8DAAqB,QAAQ,GAAG,UAAU;GAC1C,MAAM,2CAAC,SAAO;GACd,GAAI;IACJ;GACM"}

package/dist/cjs/components/toggle/toggle.cjs

@@ -6,10 +6,10 @@ const require_create_component = require('../../core/components/create-component
 require('../../core/index.cjs');
 const require_portal = require('../portal/portal.cjs');
 require('../portal/index.cjs');
-const require_use_input_border = require('../input/use-input-border.cjs');
-require('../input/index.cjs');
 const require_icon_button = require('../button/icon-button.cjs');
 require('../button/index.cjs');
+const require_use_input_border = require('../input/use-input-border.cjs');
+require('../input/index.cjs');
 const require_toggle_style = require('./toggle.style.cjs');
 const require_use_toggle = require('./use-toggle.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/cjs/components/tooltip/index.cjs

@@ -4,6 +4,8 @@ const require_tooltip = require('./tooltip.cjs');
 
 exports.Tooltip = require_tooltip.Tooltip;
 exports.TooltipPropsContext = require_tooltip.TooltipPropsContext;
+exports.tooltipProps = require_use_tooltip.tooltipProps;
 exports.tooltipStyle = require_tooltip_style.tooltipStyle;
 exports.useTooltip = require_use_tooltip.useTooltip;
+exports.useTooltipProps = require_use_tooltip.useTooltipProps;
 exports.useTooltipPropsContext = require_tooltip.useTooltipPropsContext;