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

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

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

@@ -1,129 +1,96 @@
 "use client";
 
 import { createContext as createContext$1 } from "../../utils/context.js";
-import { assignRef, mergeRefs } from "../../utils/ref.js";
+import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
-import { useCallback, useId, useLayoutEffect, useRef, useState } from "react";
-import { getPanelElement, getPanelGroupElement, getResizeHandleElement } from "react-resizable-panels";
+import { useCallback } from "react";
+import { useDefaultLayout as useResizableLayout, useGroupRef, usePanelRef } from "react-resizable-panels";
 
 //#region src/components/resizable/use-resizable.ts
 const [ResizableContext, useResizableContext] = createContext$1({ name: "ResizableContext" });
-const useResizable = ({ id, ref, controlRef: controlRefProp, disabled, keyboardStep, orientation = "horizontal", storage, storageKey, groupProps = {}, onLayout, ...rest } = {}) => {
-	const controlRef = useRef(null);
-	const uuid = useId();
-	id ??= uuid;
-	const getRootProps = useCallback((props = {}) => ({
-		...rest,
-		...props
-	}), [rest]);
-	const getGroupProps = useCallback(({ ref: ref$1, ...props } = {}) => ({
-		id,
-		autoSaveId: storageKey,
-		direction: orientation,
-		keyboardResizeBy: keyboardStep,
-		storage,
-		...groupProps,
-		...props,
-		ref: mergeRefs(ref$1, controlRefProp, controlRef),
-		tagName: props.as ?? groupProps.as,
-		onLayout: (0, utils_exports.fnAll)(props.onLayout, groupProps.onLayout, onLayout)
-	}), [
-		id,
-		orientation,
-		groupProps,
-		controlRefProp,
-		storageKey,
-		keyboardStep,
-		onLayout,
-		storage
-	]);
-	useLayoutEffect(() => {
-		assignRef(ref, getPanelGroupElement(id));
-	}, [ref, id]);
+const useResizable = ({ controlRef, disabled, orientation = "horizontal", ...rest } = {}) => {
+	const groupRef = useGroupRef();
 	return {
-		controlRef,
 		disabled,
+		groupRef,
 		orientation,
-		getGroupProps,
-		getRootProps
+		getRootProps: useCallback((props = {}) => ({
+			disabled,
+			orientation,
+			...rest,
+			...props,
+			style: {
+				height: void 0,
+				width: void 0,
+				...rest.style,
+				...props.style
+			},
+			elementRef: mergeRefs(props.elementRef, rest.ref),
+			groupRef: mergeRefs(props.groupRef, groupRef, controlRef),
+			onLayoutChange: (0, utils_exports.fnAll)(props.onLayoutChange, rest.onLayoutChange),
+			onLayoutChanged: (0, utils_exports.fnAll)(props.onLayoutChanged, rest.onLayoutChanged)
+		}), [
+			disabled,
+			orientation,
+			groupRef,
+			controlRef,
+			rest
+		])
 	};
 };
-const useResizableItem = ({ id, ref, as, controlRef, onCollapse, onExpand, onResize, ...rest }) => {
-	const uuid = useId();
-	id ??= uuid;
-	const getItemProps = useCallback(({ ref: ref$1, ...props } = {}) => ({
-		id,
-		ref: mergeRefs(ref$1, controlRef),
-		tagName: props.as ?? as,
-		...props,
-		...rest,
-		onCollapse: (0, utils_exports.fnAll)(props.onCollapse, onCollapse),
-		onExpand: (0, utils_exports.fnAll)(props.onExpand, onExpand),
-		onResize: (0, utils_exports.fnAll)(props.onResize, onResize)
-	}), [
-		as,
-		controlRef,
-		id,
-		onCollapse,
-		onExpand,
-		onResize,
-		rest
-	]);
-	useLayoutEffect(() => {
-		assignRef(ref, getPanelElement(id));
-	}, [ref, id]);
-	return { getItemProps };
+const useResizableItem = ({ controlRef, ...rest }) => {
+	const panelRef = usePanelRef();
+	return {
+		panelRef,
+		getItemProps: useCallback((props = {}) => ({
+			...rest,
+			...props,
+			elementRef: mergeRefs(props.elementRef, rest.ref),
+			panelRef: mergeRefs(props.panelRef, panelRef, controlRef),
+			onResize: (0, utils_exports.fnAll)(props.onResize, rest.onResize)
+		}), [
+			panelRef,
+			controlRef,
+			rest
+		])
+	};
 };
-const useResizableTrigger = ({ id, ref, as, disabled, onDragging, ...rest }) => {
-	const uuid = useId();
-	const { controlRef, disabled: groupDisabled, orientation } = useResizableContext();
-	const [active, setActive] = useState(false);
+const useResizableTrigger = ({ disabled, ...rest }) => {
+	const { disabled: groupDisabled, groupRef, orientation } = useResizableContext();
 	const trulyDisabled = disabled || groupDisabled;
-	id ??= uuid;
 	const onDoubleClick = 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 = useCallback((props = {}) => ({
-		id,
+		"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
 		"aria-orientation": orientation,
-		"data-active": (0, utils_exports.dataAttr)(active),
 		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
 		disabled: trulyDisabled,
 		tabIndex: trulyDisabled ? -1 : 0,
-		tagName: props.as ?? as,
 		...rest,
 		...props,
-		onDoubleClick: (0, utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick),
-		onDragging: (0, utils_exports.fnAll)(props.onDragging, onDragging, setActive)
+		elementRef: mergeRefs(props.elementRef, rest.ref),
+		onDoubleClick: (0, utils_exports.handlerAll)(props.onDoubleClick, rest.onDoubleClick, onDoubleClick)
 	}), [
-		id,
-		as,
 		orientation,
 		trulyDisabled,
 		rest,
-		onDoubleClick,
-		onDragging,
-		active
+		onDoubleClick
 	]);
-	const getIconProps = useCallback((props = {}) => ({
-		"data-active": (0, utils_exports.dataAttr)(active),
-		"data-icon": "",
-		...props
-	}), [active]);
-	useLayoutEffect(() => {
-		assignRef(ref, getResizeHandleElement(id));
-	}, [ref, id]);
 	return {
-		getIconProps,
+		getIconProps: useCallback((props = {}) => ({
+			"data-icon": "",
+			...props
+		}), []),
 		getTriggerProps
 	};
 };
 
 //#endregion
-export { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableTrigger };
+export { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizableTrigger };
 //# sourceMappingURL=use-resizable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-resizable.js","names":["createContext","getRootProps: PropGetter","getGroupProps: PropGetter<\n    ResizableGroupProps,\n    undefined,\n    PanelGroupProps\n  >","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.js","names":["createContext","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,gBAC9C,EACE,MAAM,oBACP,CACF;AAkBD,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,EAAE,KAAK;CAC5B,MAAM,WAAW,aAAa;AAsB9B,QAAO;EACL;EACA;EACA;EACA,cAxB2C,aAC1C,QAAQ,EAAE,MAAM;GACf;GACA;GACA,GAAG;GACH,GAAG;GACH,OAAO;IACL,QAAQ;IACR,OAAO;IACP,GAAG,KAAK;IACR,GAAG,MAAM;IACV;GACD,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;GACzD,yCAAsB,MAAM,gBAAgB,KAAK,eAAe;GAChE,0CAAuB,MAAM,iBAAiB,KAAK,gBAAgB;GACpE,GACD;GAAC;GAAU;GAAa;GAAU;GAAY;GAAK,CACpD;EAOA;;AAeH,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,WAAW,aAAa;AAa9B,QAAO;EACL;EACA,cAb2C,aAC1C,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,GAAG;GACH,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;GACjD,UAAU,UAAU,MAAM,UAAU,UAAU,WAAW;GACzD,mCAAgB,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,gBAAgB,aACnB,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,kBAA8C,aACjD,QAAQ,EAAE,MAAM;EACf,6CAA0B,cAAc;EACxC,oBAAoB;EACpB,6CAA0B,cAAc;EACxC,UAAU;EACV,UAAU,gBAAgB,KAAK;EAC/B,GAAG;EACH,GAAG;EACH,YAAY,UAAU,MAAM,YAAY,KAAK,IAAI;EACjD,6CACE,MAAM,eACN,KAAK,eACL,cACD;EACF,GACD;EAAC;EAAa;EAAe;EAAM;EAAc,CAClD;AAUD,QAAO;EACL,cAT+B,aAC9B,QAAQ,EAAE,MAAM;GACf,aAAa;GACb,GAAG;GACJ,GACD,EAAE,CACH;EAIC;EACD"}

package/dist/esm/components/select/select.js

@@ -8,13 +8,13 @@ import { CheckIcon } from "../icon/icons/check-icon.js";
 import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
 import { XIcon } from "../icon/icons/x-icon.js";
 import "../icon/index.js";
+import { useGroupItemProps } from "../group/use-group.js";
+import "../group/index.js";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
 import "../popover/index.js";
 import { useInputBorder } from "../input/use-input-border.js";
 import { useInputPropsContext } from "../input/input.js";
 import { InputElement } from "../input/input-element.js";
-import { useGroupItemProps } from "../group/use-group.js";
-import "../group/index.js";
 import { InputGroupRoot } from "../input/input-group.js";
 import "../input/index.js";
 import { selectStyle } from "./select.style.js";

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

@@ -146,6 +146,24 @@ const sliderStyle = 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/esm/components/slider/slider.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.style.js","names":[],"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":"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"}
+{"version":3,"file":"slider.style.js","names":[],"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":";;;;AAEA,MAAa,cAAc,yBAAyB;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,MAAM,EACJ,MAAM,EACJ,YAAY;GACV;IACE,KAAK,EAAE,gBAAgB,aAAa;IACpC,OAAO;IACR;GACD;IACE,KAAK,EAAE,gBAAgB,aAAa;IACpC,OAAO;IACR;GACD;IACE,KAAK,EAAE,gBAAgB,aAAa;IACpC,OAAO;IACR;GACD;IACE,KAAK,EAAE,gBAAgB,aAAa;IACpC,OAAO;IACR;GACF,EACF,EACF;EACD,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"}

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

@@ -0,0 +1,3 @@
+import { Tip } from "./tip.js";
+
+export { Tip };

package/dist/esm/components/tip/tip.js

@@ -0,0 +1,52 @@
+"use client";
+
+import { utils_exports } from "../../utils/index.js";
+import { CircleCheckBigIcon } from "../icon/icons/circle-check-big-icon.js";
+import { CircleQuestionMarkIcon } from "../icon/icons/circle-question-mark-icon.js";
+import { InfoIcon } from "../icon/icons/info-icon.js";
+import { OctagonAlertIcon } from "../icon/icons/octagon-alert-icon.js";
+import { TriangleAlertIcon } from "../icon/icons/triangle-alert-icon.js";
+import "../icon/index.js";
+import { IconButton } from "../button/icon-button.js";
+import "../button/index.js";
+import { useTooltipProps } from "../tooltip/use-tooltip.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import "../tooltip/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/tip/tip.tsx
+const icons = {
+	error: OctagonAlertIcon,
+	help: CircleQuestionMarkIcon,
+	info: InfoIcon,
+	success: CircleCheckBigIcon,
+	warning: 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 }] = useTooltipProps(props);
+	const Icon = icons[status];
+	return /* @__PURE__ */ jsx(Tooltip, {
+		animationScheme,
+		content,
+		duration,
+		contentProps,
+		portalProps,
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "2xs",
+			variant: "ghost",
+			"aria-label": (0, utils_exports.isString)(content) ? content : void 0,
+			icon: /* @__PURE__ */ jsx(Icon, {}),
+			...rest
+		})
+	});
+};
+
+//#endregion
+export { Tip };
+//# sourceMappingURL=tip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tip.js","names":["Tip: FC<TipProps>"],"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,OAAO;CACP,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;CACV;;;;;;AAmBD,MAAaA,OAAqB,UAAU;CAC1C,MAAM,CACJ,cACA,EACE,iBACA,SACA,UACA,SAAS,QACT,cACA,aACA,GAAG,UAEH,gBAAgB,MAAM;CAC1B,MAAM,OAAO,MAAM;AAEnB,QACE,oBAAC;EACkB;EACR;EACC;EACI;EACD;EACb,GAAI;YAEJ,oBAAC;GACC,MAAK;GACL,SAAQ;GACR,0CAAqB,QAAQ,GAAG,UAAU;GAC1C,MAAM,oBAAC,SAAO;GACd,GAAI;IACJ;GACM"}

package/dist/esm/components/toggle/toggle.js

@@ -5,10 +5,10 @@ import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { Portal } from "../portal/portal.js";
 import "../portal/index.js";
-import { useInputBorder } from "../input/use-input-border.js";
-import "../input/index.js";
 import { IconButton } from "../button/icon-button.js";
 import "../button/index.js";
+import { useInputBorder } from "../input/use-input-border.js";
+import "../input/index.js";
 import { toggleStyle } from "./toggle.style.js";
 import { useToggle } from "./use-toggle.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,5 @@
 import { tooltipStyle } from "./tooltip.style.js";
-import { useTooltip } from "./use-tooltip.js";
+import { tooltipProps, useTooltip, useTooltipProps } from "./use-tooltip.js";
 import { Tooltip, TooltipPropsContext, useTooltipPropsContext } from "./tooltip.js";
 
-export { Tooltip, TooltipPropsContext, tooltipStyle, useTooltip, useTooltipPropsContext };
+export { Tooltip, TooltipPropsContext, tooltipProps, tooltipStyle, useTooltip, useTooltipProps, useTooltipPropsContext };

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

@@ -3,16 +3,18 @@
 import { useUnmountEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
+import { useSplitProps } from "../../core/components/props.js";
+import "../../core/index.js";
+import { popperProps, usePopper, usePopperProps } from "../../hooks/use-popper/index.js";
 import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
 import "../../hooks/use-disclosure/index.js";
 import { useEventListener } from "../../hooks/use-event-listener/index.js";
 import { useOutsideClick } from "../../hooks/use-outside-click/index.js";
-import { usePopper, usePopperProps } from "../../hooks/use-popper/index.js";
 import { useCallback, useId, useRef } from "react";
 
 //#region src/components/tooltip/use-tooltip.tsx
 const useTooltip = (props = {}) => {
-	const [popperProps, { closeDelay = 0, closeOnClick = true, closeOnEsc = true, closeOnScroll, defaultOpen, disabled, open: openProp, openDelay = 0, onClose: onCloseProp, onOpen: onOpenProp }] = usePopperProps(props, ["open"]);
+	const [popperProps$1, { closeDelay = 0, closeOnClick = true, closeOnEsc = true, closeOnScroll, defaultOpen, disabled, open: openProp, openDelay = 0, onClose: onCloseProp, onOpen: onOpenProp }] = usePopperProps(props, ["open"]);
 	const describedbyId = useId();
 	const triggerRef = useRef(null);
 	const openTimeout = useRef(void 0);
@@ -25,7 +27,7 @@ const useTooltip = (props = {}) => {
 	});
 	const { getPopperProps, getReferenceProps } = usePopper({
 		open,
-		...popperProps
+		...popperProps$1
 	});
 	const onForceClose = useCallback(() => {
 		if (closeTimeout.current) {
@@ -120,7 +122,23 @@ const useTooltip = (props = {}) => {
 		onOpen
 	};
 };
+const tooltipProps = [
+	...popperProps,
+	"open",
+	"defaultOpen",
+	"onOpen",
+	"onClose",
+	"closeDelay",
+	"closeOnClick",
+	"closeOnEsc",
+	"closeOnScroll",
+	"disabled",
+	"openDelay"
+];
+const useTooltipProps = (props, omitKeys) => {
+	return useSplitProps(props, tooltipProps.filter((key) => !omitKeys?.includes(key)));
+};
 
 //#endregion
-export { useTooltip };
+export { tooltipProps, useTooltip, useTooltipProps };
 //# sourceMappingURL=use-tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-tooltip.js","names":["getTriggerProps: PropGetter<\"button\">","props","getPositionerProps: PropGetter"],"sources":["../../../../src/components/tooltip/use-tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useOutsideClick } from \"../../hooks/use-outside-click\"\nimport { usePopper, usePopperProps } from \"../../hooks/use-popper\"\nimport {\n  cx,\n  dataAttr,\n  getDocument,\n  getWindow,\n  handlerAll,\n  mergeRefs,\n  useUnmountEffect,\n} from \"../../utils\"\n\nexport interface UseTooltipProps\n  extends Omit<UseDisclosureProps, \"timing\">, UsePopperProps<\"button\"> {\n  /**\n   * The delay before hiding the tooltip.\n   *\n   * @default 100\n   */\n  closeDelay?: number\n  /**\n   * If `true`, the tooltip will hide on click.\n   *\n   * @default true\n   */\n  closeOnClick?: boolean\n  /**\n   * If `true`, the tooltip will hide on pressing Esc key.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n  /**\n   * If `true`, the tooltip will hide on scroll.\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean\n  /**\n   * If `true`, the tooltip will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The delay before showing the tooltip.\n   *\n   * @default 400\n   */\n  openDelay?: number\n}\n\nexport const useTooltip = (props: UseTooltipProps = {}) => {\n  const [\n    popperProps,\n    {\n      closeDelay = 0,\n      closeOnClick = true,\n      closeOnEsc = true,\n      closeOnScroll,\n      defaultOpen,\n      disabled,\n      open: openProp,\n      openDelay = 0,\n      onClose: onCloseProp,\n      onOpen: onOpenProp,\n    },\n  ] = usePopperProps(props, [\"open\"])\n  const describedbyId = useId()\n  const triggerRef = useRef<HTMLElement>(null)\n  const openTimeout = useRef<NodeJS.Timeout>(undefined)\n  const closeTimeout = useRef<NodeJS.Timeout>(undefined)\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const { getPopperProps, getReferenceProps } = usePopper({\n    open,\n    ...popperProps,\n  })\n\n  const onForceClose = useCallback(() => {\n    if (closeTimeout.current) {\n      clearTimeout(closeTimeout.current)\n\n      closeTimeout.current = undefined\n    }\n\n    onClose()\n  }, [onClose])\n\n  const onDelayOpen = useCallback(() => {\n    if (!disabled && !openTimeout.current) {\n      if (open) onForceClose()\n\n      openTimeout.current = getWindow(triggerRef.current).setTimeout(\n        onOpen,\n        openDelay,\n      )\n    }\n  }, [disabled, open, onForceClose, onOpen, openDelay])\n\n  const onDelayClose = useCallback(() => {\n    if (openTimeout.current) {\n      clearTimeout(openTimeout.current)\n      openTimeout.current = undefined\n    }\n\n    closeTimeout.current = getWindow(triggerRef.current).setTimeout(() => {\n      onForceClose()\n    }, closeDelay)\n  }, [closeDelay, onForceClose])\n\n  useEventListener(\n    () => getDocument(triggerRef.current),\n    \"keydown\",\n    ({ key }) => {\n      if (closeOnEsc && key === \"Escape\") onDelayClose()\n    },\n  )\n\n  useEventListener(\n    () => getDocument(triggerRef.current),\n    \"scroll\",\n    () => {\n      if (open && closeOnScroll) onForceClose()\n    },\n  )\n\n  useOutsideClick({\n    ref: triggerRef,\n    enabled: open,\n    handler: () => {\n      onDelayClose()\n    },\n  })\n\n  useUnmountEffect(() => {\n    clearTimeout(openTimeout.current)\n    clearTimeout(closeTimeout.current)\n  })\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n      return getReferenceProps({\n        ...props,\n        ref: mergeRefs(props.ref, triggerRef),\n        \"aria-describedby\": cx(\n          ariaDescribedby,\n          open ? describedbyId : undefined,\n        ),\n        onBlur: handlerAll(props.onBlur, onDelayClose),\n        onClick: handlerAll(\n          props.onClick,\n          closeOnClick ? onDelayClose : undefined,\n        ),\n        onFocus: handlerAll(props.onFocus, onDelayOpen),\n        onPointerEnter: handlerAll(props.onPointerEnter, (ev) => {\n          if (ev.pointerType !== \"touch\") onDelayOpen()\n        }),\n        onPointerLeave: handlerAll(props.onPointerLeave, (ev) => {\n          if (ev.pointerType !== \"touch\") onDelayClose()\n        }),\n      })\n    },\n    [\n      getReferenceProps,\n      describedbyId,\n      onDelayOpen,\n      open,\n      closeOnClick,\n      onDelayClose,\n    ],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(\n    (props) => {\n      return getPopperProps(props)\n    },\n    [getPopperProps],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    (props = {}) => ({\n      id: describedbyId,\n      \"data-close\": dataAttr(!open),\n      \"data-open\": dataAttr(open),\n      role: \"tooltip\",\n      onPointerLeave: handlerAll(props.onPointerLeave, onDelayClose),\n      ...props,\n    }),\n    [describedbyId, onDelayClose, open],\n  )\n\n  return {\n    open,\n    getContentProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose: onForceClose,\n    onDelayClose,\n    onDelayOpen,\n    onOpen,\n  }\n}\n\nexport type UseTooltipReturn = ReturnType<typeof useTooltip>\n"],"mappings":";;;;;;;;;;;;;AA4DA,MAAa,cAAc,QAAyB,EAAE,KAAK;CACzD,MAAM,CACJ,aACA,EACE,aAAa,GACb,eAAe,MACf,aAAa,MACb,eACA,aACA,UACA,MAAM,UACN,YAAY,GACZ,SAAS,aACT,QAAQ,gBAER,eAAe,OAAO,CAAC,OAAO,CAAC;CACnC,MAAM,gBAAgB,OAAO;CAC7B,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,cAAc,OAAuB,OAAU;CACrD,MAAM,eAAe,OAAuB,OAAU;CACtD,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;EACT,CAAC;CACF,MAAM,EAAE,gBAAgB,sBAAsB,UAAU;EACtD;EACA,GAAG;EACJ,CAAC;CAEF,MAAM,eAAe,kBAAkB;AACrC,MAAI,aAAa,SAAS;AACxB,gBAAa,aAAa,QAAQ;AAElC,gBAAa,UAAU;;AAGzB,WAAS;IACR,CAAC,QAAQ,CAAC;CAEb,MAAM,cAAc,kBAAkB;AACpC,MAAI,CAAC,YAAY,CAAC,YAAY,SAAS;AACrC,OAAI,KAAM,eAAc;AAExB,eAAY,uCAAoB,WAAW,QAAQ,CAAC,WAClD,QACA,UACD;;IAEF;EAAC;EAAU;EAAM;EAAc;EAAQ;EAAU,CAAC;CAErD,MAAM,eAAe,kBAAkB;AACrC,MAAI,YAAY,SAAS;AACvB,gBAAa,YAAY,QAAQ;AACjC,eAAY,UAAU;;AAGxB,eAAa,uCAAoB,WAAW,QAAQ,CAAC,iBAAiB;AACpE,iBAAc;KACb,WAAW;IACb,CAAC,YAAY,aAAa,CAAC;AAE9B,uDACoB,WAAW,QAAQ,EACrC,YACC,EAAE,UAAU;AACX,MAAI,cAAc,QAAQ,SAAU,eAAc;GAErD;AAED,uDACoB,WAAW,QAAQ,EACrC,gBACM;AACJ,MAAI,QAAQ,cAAe,eAAc;GAE5C;AAED,iBAAgB;EACd,KAAK;EACL,SAAS;EACT,eAAe;AACb,iBAAc;;EAEjB,CAAC;AAEF,wBAAuB;AACrB,eAAa,YAAY,QAAQ;AACjC,eAAa,aAAa,QAAQ;GAClC;CAEF,MAAMA,kBAAwC,aAC3C,EAAE,oBAAoB,iBAAiB,GAAGC,YAAU,EAAE,KAAK;AAC1D,SAAO,kBAAkB;GACvB,GAAGA;GACH,KAAK,UAAUA,QAAM,KAAK,WAAW;GACrC,0CACE,iBACA,OAAO,gBAAgB,OACxB;GACD,sCAAmBA,QAAM,QAAQ,aAAa;GAC9C,uCACEA,QAAM,SACN,eAAe,eAAe,OAC/B;GACD,uCAAoBA,QAAM,SAAS,YAAY;GAC/C,8CAA2BA,QAAM,iBAAiB,OAAO;AACvD,QAAI,GAAG,gBAAgB,QAAS,cAAa;KAC7C;GACF,8CAA2BA,QAAM,iBAAiB,OAAO;AACvD,QAAI,GAAG,gBAAgB,QAAS,eAAc;KAC9C;GACH,CAAC;IAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAMC,qBAAiC,aACpC,YAAU;AACT,SAAO,eAAeD,QAAM;IAE9B,CAAC,eAAe,CACjB;AAcD,QAAO;EACL;EACA,iBAdkC,aACjC,UAAQ,EAAE,MAAM;GACf,IAAI;GACJ,0CAAuB,CAAC,KAAK;GAC7B,yCAAsB,KAAK;GAC3B,MAAM;GACN,8CAA2BA,QAAM,gBAAgB,aAAa;GAC9D,GAAGA;GACJ,GACD;GAAC;GAAe;GAAc;GAAK,CACpC;EAKC;EACA;EACA,SAAS;EACT;EACA;EACA;EACD"}
+{"version":3,"file":"use-tooltip.js","names":["popperProps","getTriggerProps: PropGetter<\"button\">","props","getPositionerProps: PropGetter","tooltipProps: (keyof UseTooltipProps)[]"],"sources":["../../../../src/components/tooltip/use-tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport type { Dict } from \"../../utils\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useSplitProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useOutsideClick } from \"../../hooks/use-outside-click\"\nimport { popperProps, usePopper, usePopperProps } from \"../../hooks/use-popper\"\nimport {\n  cx,\n  dataAttr,\n  getDocument,\n  getWindow,\n  handlerAll,\n  mergeRefs,\n  useUnmountEffect,\n} from \"../../utils\"\n\nexport interface UseTooltipProps\n  extends Omit<UseDisclosureProps, \"timing\">, UsePopperProps<\"button\"> {\n  /**\n   * The delay before hiding the tooltip.\n   *\n   * @default 100\n   */\n  closeDelay?: number\n  /**\n   * If `true`, the tooltip will hide on click.\n   *\n   * @default true\n   */\n  closeOnClick?: boolean\n  /**\n   * If `true`, the tooltip will hide on pressing Esc key.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n  /**\n   * If `true`, the tooltip will hide on scroll.\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean\n  /**\n   * If `true`, the tooltip will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The delay before showing the tooltip.\n   *\n   * @default 400\n   */\n  openDelay?: number\n}\n\nexport const useTooltip = (props: UseTooltipProps = {}) => {\n  const [\n    popperProps,\n    {\n      closeDelay = 0,\n      closeOnClick = true,\n      closeOnEsc = true,\n      closeOnScroll,\n      defaultOpen,\n      disabled,\n      open: openProp,\n      openDelay = 0,\n      onClose: onCloseProp,\n      onOpen: onOpenProp,\n    },\n  ] = usePopperProps(props, [\"open\"])\n  const describedbyId = useId()\n  const triggerRef = useRef<HTMLElement>(null)\n  const openTimeout = useRef<NodeJS.Timeout>(undefined)\n  const closeTimeout = useRef<NodeJS.Timeout>(undefined)\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const { getPopperProps, getReferenceProps } = usePopper({\n    open,\n    ...popperProps,\n  })\n\n  const onForceClose = useCallback(() => {\n    if (closeTimeout.current) {\n      clearTimeout(closeTimeout.current)\n\n      closeTimeout.current = undefined\n    }\n\n    onClose()\n  }, [onClose])\n\n  const onDelayOpen = useCallback(() => {\n    if (!disabled && !openTimeout.current) {\n      if (open) onForceClose()\n\n      openTimeout.current = getWindow(triggerRef.current).setTimeout(\n        onOpen,\n        openDelay,\n      )\n    }\n  }, [disabled, open, onForceClose, onOpen, openDelay])\n\n  const onDelayClose = useCallback(() => {\n    if (openTimeout.current) {\n      clearTimeout(openTimeout.current)\n      openTimeout.current = undefined\n    }\n\n    closeTimeout.current = getWindow(triggerRef.current).setTimeout(() => {\n      onForceClose()\n    }, closeDelay)\n  }, [closeDelay, onForceClose])\n\n  useEventListener(\n    () => getDocument(triggerRef.current),\n    \"keydown\",\n    ({ key }) => {\n      if (closeOnEsc && key === \"Escape\") onDelayClose()\n    },\n  )\n\n  useEventListener(\n    () => getDocument(triggerRef.current),\n    \"scroll\",\n    () => {\n      if (open && closeOnScroll) onForceClose()\n    },\n  )\n\n  useOutsideClick({\n    ref: triggerRef,\n    enabled: open,\n    handler: () => {\n      onDelayClose()\n    },\n  })\n\n  useUnmountEffect(() => {\n    clearTimeout(openTimeout.current)\n    clearTimeout(closeTimeout.current)\n  })\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n      return getReferenceProps({\n        ...props,\n        ref: mergeRefs(props.ref, triggerRef),\n        \"aria-describedby\": cx(\n          ariaDescribedby,\n          open ? describedbyId : undefined,\n        ),\n        onBlur: handlerAll(props.onBlur, onDelayClose),\n        onClick: handlerAll(\n          props.onClick,\n          closeOnClick ? onDelayClose : undefined,\n        ),\n        onFocus: handlerAll(props.onFocus, onDelayOpen),\n        onPointerEnter: handlerAll(props.onPointerEnter, (ev) => {\n          if (ev.pointerType !== \"touch\") onDelayOpen()\n        }),\n        onPointerLeave: handlerAll(props.onPointerLeave, (ev) => {\n          if (ev.pointerType !== \"touch\") onDelayClose()\n        }),\n      })\n    },\n    [\n      getReferenceProps,\n      describedbyId,\n      onDelayOpen,\n      open,\n      closeOnClick,\n      onDelayClose,\n    ],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(\n    (props) => {\n      return getPopperProps(props)\n    },\n    [getPopperProps],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    (props = {}) => ({\n      id: describedbyId,\n      \"data-close\": dataAttr(!open),\n      \"data-open\": dataAttr(open),\n      role: \"tooltip\",\n      onPointerLeave: handlerAll(props.onPointerLeave, onDelayClose),\n      ...props,\n    }),\n    [describedbyId, onDelayClose, open],\n  )\n\n  return {\n    open,\n    getContentProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose: onForceClose,\n    onDelayClose,\n    onDelayOpen,\n    onOpen,\n  }\n}\n\nexport type UseTooltipReturn = ReturnType<typeof useTooltip>\n\nexport const tooltipProps: (keyof UseTooltipProps)[] = [\n  ...popperProps,\n  \"open\",\n  \"defaultOpen\",\n  \"onOpen\",\n  \"onClose\",\n  \"closeDelay\",\n  \"closeOnClick\",\n  \"closeOnEsc\",\n  \"closeOnScroll\",\n  \"disabled\",\n  \"openDelay\",\n]\n\nexport const useTooltipProps = <\n  Y extends Dict = Dict,\n  M extends keyof UseTooltipProps = keyof UseTooltipProps,\n>(\n  props: Y,\n  omitKeys?: M[],\n) => {\n  return useSplitProps(\n    props,\n    tooltipProps.filter((key) => !omitKeys?.includes(key as M)),\n  ) as unknown as [\n    keyof UseTooltipProps extends M\n      ? UseTooltipProps\n      : Omit<UseTooltipProps, M>,\n    Omit<\n      Y,\n      keyof UseTooltipProps extends M\n        ? keyof UseTooltipProps\n        : Exclude<keyof UseTooltipProps, M>\n    >,\n  ]\n}\n"],"mappings":"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"}

package/dist/esm/core/components/create-component.js

@@ -62,6 +62,7 @@ function createComponent(name, style) {
 		className ??= getClassName(name)(system);
 		const contextProps = usePropsContext() ?? {};
 		const [, rest] = useComponentStyle(withContext$1 ? mergeProps(contextProps, props)() : props, {
+			name,
 			className,
 			style,
 			transferProps
@@ -71,10 +72,11 @@ function createComponent(name, style) {
 	function component(el, { name: name$1, className, ...options } = {}) {
 		const displayName = getDisplayName(name$1, defaultDisplayName);
 		const ProxyComponent = createProxyComponent(el, options);
-		return function(...superProps) {
+		return function(initialProps, ...superProps) {
 			return withDisplayName((props) => {
 				className = useClassName(name$1, className);
-				const mergedProps = chainProps(...superProps)()(props);
+				const computedProps = (0, utils_exports.isFunction)(initialProps) ? initialProps(props) : mergeProps(initialProps ?? {}, props)();
+				const mergedProps = chainProps(...superProps)()(computedProps);
 				return /* @__PURE__ */ jsx(ProxyComponent, {
 					...mergedProps,
 					className: (0, utils_exports.cx)(className, mergedProps.className)
@@ -136,6 +138,7 @@ function createSlotComponent(rootName, style) {
 		className = useClassName(slot, className);
 		const contextProps = usePropsContext() ?? {};
 		const [css, rest] = useComponentSlotStyle(withContext$1 ? mergeProps(contextProps, props)() : props, {
+			name: rootName,
 			className,
 			style,
 			slot,
@@ -160,10 +163,11 @@ function createSlotComponent(rootName, style) {
 			className,
 			slot
 		});
-		return function(...superProps) {
+		return function(initialProps, ...superProps) {
 			return withDisplayName((props) => {
 				className = useClassName(slot, className);
-				const mergedProps = chainProps(...superProps)()(props);
+				const computedProps = (0, utils_exports.isFunction)(initialProps) ? initialProps(props) : mergeProps(initialProps ?? {}, props)();
+				const mergedProps = chainProps(...superProps)()(computedProps);
 				return /* @__PURE__ */ jsx(ProxyComponent, {
 					...mergedProps,
 					className: (0, utils_exports.cx)(className, mergedProps.className)