@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-reorder.cjs","names":["value: any","values","newValues: Y[]","getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  >","node: HTMLElement | null","x","y","getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  >","getTriggerProps: PropGetter"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createContext,\n  dataAttr,\n  getValidChildren,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nexport const [ReorderContext, useReorderContext] =\n  createContext<ReorderContext>({\n    name: \"ReorderContext\",\n  })\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nexport const [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport interface UseReorderProps<Y = string>\n  extends Partial<\n      Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">\n    >,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useMemo(() => getValidChildren(children), [children])\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) => ({\n      axis,\n      values,\n      ...rest,\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      onMouseUp: handlerAll(props.onMouseUp, rest.onMouseUp, onCompleteReorder),\n      onReorder: handlerAll(props.onReorder, rest.onReorder, onReorder),\n      onTouchEnd: handlerAll(\n        props.onTouchEnd,\n        rest.onTouchEnd,\n        onCompleteReorder,\n      ),\n    }),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      return {\n        \"data-has-trigger\": dataAttr(hasTrigger),\n        \"data-selected\": dataAttr(drag),\n        dragControls,\n        dragListener: !hasTrigger,\n        value: value ?? getAlternativeValue({ children }),\n        ...props,\n        ...rest,\n        ref: mergeRefs(props.ref, ref),\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+const require_components_resizable_resizable_style = require('./resizable.style.cjs');
+const require_components_resizable_use_resizable = require('./use-resizable.cjs');
+const require_components_resizable_resizable = require('./resizable.cjs');
+const require_components_resizable_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'Resizable', {
+  enumerable: true,
+  get: function () {
+    return require_components_resizable_namespace.namespace_exports;
+  }
+});
+exports.ResizableContext = require_components_resizable_use_resizable.ResizableContext;
+exports.ResizableItem = require_components_resizable_resizable.ResizableItem;
+exports.ResizablePropsContext = require_components_resizable_resizable.ResizablePropsContext;
+exports.ResizableRoot = require_components_resizable_resizable.ResizableRoot;
+exports.ResizableTrigger = require_components_resizable_resizable.ResizableTrigger;
+exports.resizableStyle = require_components_resizable_resizable_style.resizableStyle;
+exports.useResizable = require_components_resizable_use_resizable.useResizable;
+exports.useResizableContext = require_components_resizable_use_resizable.useResizableContext;
+exports.useResizableItem = require_components_resizable_use_resizable.useResizableItem;
+exports.useResizablePropsContext = require_components_resizable_resizable.useResizablePropsContext;
+exports.useResizableTrigger = require_components_resizable_use_resizable.useResizableTrigger;

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

@@ -0,0 +1,31 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_resizable_use_resizable = require('./use-resizable.cjs');
+const require_components_resizable_resizable = require('./resizable.cjs');
+
+//#region src/components/resizable/namespace.ts
+var namespace_exports = {};
+require_rolldown_runtime.__export(namespace_exports, {
+	Context: () => require_components_resizable_use_resizable.ResizableContext,
+	Item: () => require_components_resizable_resizable.ResizableItem,
+	PropsContext: () => require_components_resizable_resizable.ResizablePropsContext,
+	Root: () => require_components_resizable_resizable.ResizableRoot,
+	Trigger: () => require_components_resizable_resizable.ResizableTrigger,
+	useContext: () => require_components_resizable_use_resizable.useResizableContext,
+	usePropsContext: () => require_components_resizable_resizable.useResizablePropsContext
+});
+
+//#endregion
+exports.Context = require_components_resizable_use_resizable.ResizableContext;
+exports.Item = require_components_resizable_resizable.ResizableItem;
+exports.PropsContext = require_components_resizable_resizable.ResizablePropsContext;
+exports.Root = require_components_resizable_resizable.ResizableRoot;
+exports.Trigger = require_components_resizable_resizable.ResizableTrigger;
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+exports.useContext = require_components_resizable_use_resizable.useResizableContext;
+exports.usePropsContext = require_components_resizable_resizable.useResizablePropsContext;
+//# sourceMappingURL=namespace.cjs.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,68 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_core_system_factory = require('../../core/system/factory.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
+const require_components_resizable_resizable_style = require('./resizable.style.cjs');
+const require_components_resizable_use_resizable = require('./use-resizable.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const react_resizable_panels = require_rolldown_runtime.__toESM(require("react-resizable-panels"));
+
+//#region src/components/resizable/resizable.tsx
+const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = require_core_components_create_component.createSlotComponent("resizable", require_components_resizable_resizable_style.resizableStyle);
+const ResizableRoot = withProvider(({ children, orientation: orientationProp, rootRef,...rest }) => {
+	const computedOrientation = require_hooks_use_value_index.useValue(orientationProp);
+	const { controlRef, disabled, orientation, getGroupProps, getRootProps } = require_components_resizable_use_resizable.useResizable({
+		...rest,
+		orientation: computedOrientation
+	});
+	const context = (0, react.useMemo)(() => ({
+		controlRef,
+		disabled,
+		orientation
+	}), [
+		disabled,
+		orientation,
+		controlRef
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_resizable_use_resizable.ResizableContext, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_core_system_factory.styled.div, {
+			...getRootProps({ ref: rootRef }),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.PanelGroup, {
+				...getGroupProps(),
+				children
+			})
+		})
+	});
+}, "root", { transferProps: ["orientation"] })();
+const StyledPanel = require_core_system_factory.styled(react_resizable_panels.Panel, { forwardProps: ["order"] });
+const ResizableItem = withContext((props) => {
+	const { getItemProps } = require_components_resizable_use_resizable.useResizableItem(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPanel, { ...getItemProps() });
+}, "item")();
+const ResizableTrigger = withContext(({ children, icon, iconProps,...rest }) => {
+	const { getIconProps, getTriggerProps } = require_components_resizable_use_resizable.useResizableTrigger(rest);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_core_system_factory.styled.div, {
+		as: react_resizable_panels.PanelResizeHandle,
+		...getTriggerProps(),
+		children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizableIcon, {
+			...getIconProps(iconProps),
+			children: icon
+		}) : null, children]
+	});
+}, "trigger")();
+const ResizableIcon = withContext("div", "icon")();
+
+//#endregion
+exports.ResizableItem = ResizableItem;
+exports.ResizablePropsContext = ResizablePropsContext;
+exports.ResizableRoot = ResizableRoot;
+exports.ResizableTrigger = ResizableTrigger;
+exports.useResizablePropsContext = useResizablePropsContext;
+exports.withContext = withContext;
+exports.withProvider = withProvider;
+//# sourceMappingURL=resizable.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.cjs","names":["resizableStyle","ResizableRoot: FC<ResizableRootProps>","ResizableContext","styled","PanelGroup","Panel","PanelResizeHandle"],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, 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/components/resizable\n */\nexport interface ResizableRootProps\n  extends HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {\n  /**\n   * Ref for resizable root element.\n   */\n  rootRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport const {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport const ResizableRoot: FC<ResizableRootProps> = withProvider(\n  ({ children, orientation: orientationProp, rootRef, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { controlRef, disabled, orientation, getGroupProps, getRootProps } =\n      useResizable({\n        ...rest,\n        orientation: computedOrientation,\n      })\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\">,\n    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,\n    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":";;;;;;;;;;;;;;AAyCA,MAAa,EACX,cAAc,uBACd,iBAAiB,0BACjB,aACA,cACD,GAAG,6DACF,aACAA,4DACD;AAED,MAAaC,gBAAwC,aACnD,CAAC,EAAE,UAAU,aAAa,iBAAiB,QAAS,GAAG,MAAM,KAAK;CAChE,MAAM,sBAAsB,uCAAS,gBAAgB;CACrD,MAAM,EAAE,YAAY,UAAU,aAAa,eAAe,cAAc,GACtE,wDAAa;EACX,GAAG;EACH,aAAa;CACd,EAAC;CAEJ,MAAM,UAAU,mBACd,OAAO;EAAE;EAAY;EAAU;CAAa,IAC5C;EAAC;EAAU;EAAa;CAAW,EACpC;AAED,wBACE,2BAACC;EAAiB,OAAO;4BACvB,2BAACC,mCAAO;GAAI,GAAI,aAAa,EAAE,KAAK,QAAS,EAAC;6BAC5C,2BAACC;IAAW,GAAI,eAAe;IAAG;KAAsB;IAC7C;GACI;AAEtB,GACD,QACA,EAAE,eAAe,CAAC,aAAc,EAAE,EACnC,EAAE;AAEH,MAAM,cAAc,mCAAOC,8BAAO,EAAE,cAAc,CAAC,OAAQ,EAAE,EAAC;AAM9D,MAAa,gBAAgB,YAAuC,CAAC,UAAU;CAC7E,MAAM,EAAE,cAAc,GAAG,4DAAiB,MAAM;AAEhD,wBAAO,2BAAC,eAAY,GAAI,cAAc,GAAI;AAC3C,GAAE,OAAO,EAAE;AAeZ,MAAa,mBAAmB,YAC9B,CAAC,EAAE,UAAU,MAAM,UAAW,GAAG,MAAM,KAAK;CAC1C,MAAM,EAAE,cAAc,iBAAiB,GAAG,+DAAoB,KAAK;AAEnE,wBACE,4BAACF,mCAAO;EAAI,IAAIG;EAAmB,GAAI,iBAAiB;aACrD,uBACC,2BAAC;GAAc,GAAI,aAAa,UAAU;aAAG;IAAqB,GAChE,MAEH;GACU;AAEhB,GACD,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,EAAE"}

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

@@ -0,0 +1,150 @@
+const require_core_system_config = require('../../core/system/config.cjs');
+
+//#region src/components/resizable/resizable.style.ts
+const resizableStyle = require_core_system_config.defineComponentSlotStyle({
+	base: {
+		icon: {
+			alignItems: "center",
+			display: "flex",
+			justifyContent: "center",
+			left: "50%",
+			position: "absolute",
+			top: "50%",
+			translateX: "-50%",
+			translateY: "-50%"
+		},
+		item: { boxSize: "full" },
+		root: { boxSize: "full" },
+		trigger: {
+			position: "relative",
+			transitionDuration: "moderate",
+			transitionProperty: "common",
+			_after: {
+				transitionDuration: "moderate",
+				transitionProperty: "common"
+			}
+		}
+	},
+	variants: {
+		border: {
+			icon: {
+				bg: "colorScheme.muted",
+				color: "colorScheme.fg",
+				py: "1",
+				rounded: "l1"
+			},
+			trigger: {
+				bg: "colorScheme.muted",
+				focusVisibleRing: "none",
+				_after: { position: "absolute" },
+				_hover: { bg: "colorScheme.emphasized" },
+				_focusVisible: { bg: "colorScheme.emphasized" }
+			}
+		},
+		plain: { trigger: {
+			focusVisibleRing: "none",
+			_after: { position: "absolute" }
+		} },
+		spacer: {
+			icon: {
+				color: "colorScheme.fg",
+				transitionDuration: "moderate",
+				transitionProperty: "common",
+				_active: { color: "transparent" }
+			},
+			trigger: {
+				focusVisibleRing: "none",
+				p: "1",
+				_after: {
+					bg: "transparent",
+					display: "block",
+					rounded: "full"
+				},
+				_hover: {
+					_after: { bg: "colorScheme.bg" },
+					_icon: { color: "transparent" }
+				},
+				_focusVisible: {
+					_after: { bg: "colorScheme.bg" },
+					_icon: { color: "transparent" }
+				}
+			}
+		}
+	},
+	props: { orientation: {
+		horizontal: { icon: { transform: "translate(-50%, -50%) rotate(0deg)" } },
+		vertical: { icon: { transform: "translate(-50%, -50%) rotate(90deg)" } }
+	} },
+	compounds: [
+		{
+			css: { trigger: {
+				h: "px",
+				_after: {
+					h: "2",
+					left: "0",
+					right: "0",
+					transform: "translateY(-50%)"
+				}
+			} },
+			variant: "border",
+			orientation: "vertical"
+		},
+		{
+			css: { trigger: {
+				w: "px",
+				_after: {
+					bottom: "0",
+					top: "0",
+					transform: "translateX(-50%)",
+					w: "2"
+				}
+			} },
+			variant: "border",
+			orientation: "horizontal"
+		},
+		{
+			css: { trigger: { _after: {
+				h: "2",
+				w: "full"
+			} } },
+			variant: "spacer",
+			orientation: "vertical"
+		},
+		{
+			css: { trigger: { _after: {
+				h: "full",
+				w: "2"
+			} } },
+			variant: "spacer",
+			orientation: "horizontal"
+		},
+		{
+			css: { trigger: { _after: {
+				h: "2",
+				left: "0",
+				right: "0",
+				transform: "translateY(-50%)"
+			} } },
+			variant: "plain",
+			orientation: "vertical"
+		},
+		{
+			css: { trigger: { _after: {
+				bottom: "0",
+				top: "0",
+				transform: "translateX(-50%)",
+				w: "2"
+			} } },
+			variant: "plain",
+			orientation: "horizontal"
+		}
+	],
+	defaultProps: {
+		variant: "border",
+		orientation: "horizontal"
+	}
+});
+
+//#endregion
+exports.resizableStyle = resizableStyle;
+//# sourceMappingURL=resizable.style.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.style.cjs","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,oDAAyB;CACrD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,gBAAgB;GAChB,MAAM;GACN,UAAU;GACV,KAAK;GACL,YAAY;GACZ,YAAY;EACb;EACD,MAAM,EACJ,SAAS,OACV;EACD,MAAM,EACJ,SAAS,OACV;EACD,SAAS;GACP,UAAU;GACV,oBAAoB;GACpB,oBAAoB;GACpB,QAAQ;IACN,oBAAoB;IACpB,oBAAoB;GACrB;EACF;CACF;CAED,UAAU;EACR,QAAQ;GACN,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,SAAS;GACV;GACD,SAAS;IACP,IAAI;IACJ,kBAAkB;IAClB,QAAQ,EACN,UAAU,WACX;IACD,QAAQ,EACN,IAAI,yBACL;IACD,eAAe,EACb,IAAI,yBACL;GACF;EACF;EACD,OAAO,EACL,SAAS;GACP,kBAAkB;GAClB,QAAQ,EACN,UAAU,WACX;EACF,EACF;EACD,QAAQ;GACN,MAAM;IACJ,OAAO;IACP,oBAAoB;IACpB,oBAAoB;IACpB,SAAS,EACP,OAAO,cACR;GACF;GACD,SAAS;IACP,kBAAkB;IAClB,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,SAAS;KACT,SAAS;IACV;IACD,QAAQ;KACN,QAAQ,EACN,IAAI,iBACL;KACD,OAAO,EACL,OAAO,cACR;IACF;IACD,eAAe;KACb,QAAQ,EACN,IAAI,iBACL;KACD,OAAO,EACL,OAAO,cACR;IACF;GACF;EACF;CACF;CAED,OAAO,EAML,aAAa;EACX,YAAY,EACV,MAAM,EACJ,WAAW,qCACZ,EACF;EACD,UAAU,EACR,MAAM,EACJ,WAAW,sCACZ,EACF;CACF,EACF;CAED,WAAW;EACT;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,GAAG;KACH,MAAM;KACN,OAAO;KACP,WAAW;IACZ;GACF,EACF;GACD,SAAS;GACT,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS;IACP,GAAG;IACH,QAAQ;KACN,QAAQ;KACR,KAAK;KACL,WAAW;KACX,GAAG;IACJ;GACF,EACF;GACD,SAAS;GACT,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAK,GAAG;GAAQ,EAC9B,EACF;GACD,SAAS;GACT,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IAAE,GAAG;IAAQ,GAAG;GAAK,EAC9B,EACF;GACD,SAAS;GACT,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,GAAG;IACH,MAAM;IACN,OAAO;IACP,WAAW;GACZ,EACF,EACF;GACD,SAAS;GACT,aAAa;EACd;EACD;GACE,KAAK,EACH,SAAS,EACP,QAAQ;IACN,QAAQ;IACR,KAAK;IACL,WAAW;IACX,GAAG;GACJ,EACF,EACF;GACD,SAAS;GACT,aAAa;EACd;CACF;CAED,cAAc;EACZ,SAAS;EACT,aAAa;CACd;AACF,EAAC"}

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

@@ -0,0 +1,137 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_context = require('../../utils/context.cjs');
+const require_utils_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const react_resizable_panels = require_rolldown_runtime.__toESM(require("react-resizable-panels"));
+
+//#region src/components/resizable/use-resizable.ts
+const [ResizableContext, useResizableContext] = require_utils_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_utils_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)(() => {
+		const el = (0, react_resizable_panels.getPanelGroupElement)(id);
+		require_utils_ref.assignRef(ref, el);
+	}, [ref, id]);
+	return {
+		controlRef,
+		disabled,
+		orientation,
+		getGroupProps,
+		getRootProps
+	};
+};
+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_utils_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)(() => {
+		const el = (0, react_resizable_panels.getPanelElement)(id);
+		require_utils_ref.assignRef(ref, el);
+	}, [ref, id]);
+	return { getItemProps };
+};
+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 trulyDisabled = disabled || groupDisabled;
+	id ??= uuid;
+	const onDoubleClick = (0, react.useCallback)((ev) => {
+		ev.preventDefault();
+		const layout = controlRef.current?.getLayout();
+		if (!layout) return;
+		const count = layout.length;
+		const size = 100 / count;
+		const nextLayout = layout.map(() => size);
+		controlRef.current?.setLayout(nextLayout);
+	}, [controlRef]);
+	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
+		id,
+		"aria-orientation": orientation,
+		"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
+		disabled: trulyDisabled,
+		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)
+	}), [
+		id,
+		as,
+		orientation,
+		trulyDisabled,
+		rest,
+		onDoubleClick,
+		onDragging,
+		active
+	]);
+	const getIconProps = (0, react.useCallback)((props = {}) => ({
+		"data-active": (0, require_utils_index.utils_exports.dataAttr)(active),
+		"data-icon": "",
+		...props
+	}), [active]);
+	(0, react.useLayoutEffect)(() => {
+		const el = (0, react_resizable_panels.getResizeHandleElement)(id);
+		require_utils_ref.assignRef(ref, el);
+	}, [ref, id]);
+	return {
+		getIconProps,
+		getTriggerProps
+	};
+};
+
+//#endregion
+exports.ResizableContext = ResizableContext;
+exports.useResizable = useResizable;
+exports.useResizableContext = useResizableContext;
+exports.useResizableItem = useResizableItem;
+exports.useResizableTrigger = useResizableTrigger;
+//# sourceMappingURL=use-resizable.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-resizable.cjs","names":["getRootProps: PropGetter","getGroupProps: PropGetter<\n    ResizableGroupProps,\n    undefined,\n    PanelGroupProps\n  >","ref","getItemProps: PropGetter<ResizableItemProps, undefined, PanelProps>","ev: MouseEvent<HTMLDivElement>","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\n  extends Omit<UseResizableReturn, \"getGroupProps\" | \"getRootProps\"> {}\n\nexport const [ResizableContext, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n  })\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"tagName\"> {\n  /**\n   * Ref of the resizable group callback.\n   */\n  ref?: RefObject<ResizableGroupControl>\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n}\ninterface ResizableItemProps extends Omit<PanelProps, \"tagName\"> {\n  /**\n   * Ref of the resizable item callback.\n   */\n  ref?: RefObject<ResizableItemControl>\n  /**\n   * The HTML element to render.\n   */\n  as?: keyof HTMLElementTagNameMap\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"tagName\">,\n    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\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,\n    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,\n    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        disabled: trulyDisabled,\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":";;;;;;;;;;;AAoCA,MAAa,CAAC,kBAAkB,oBAAoB,GAClD,oCAAgC,EAC9B,MAAM,mBACP,EAAC;AA4EJ,MAAa,eAAe,CAAC,EAC3B,IACA,KAEA,YAAY,gBACZ,UACA,cACA,cAAc,cACd,SACA,YACA,aAAa,CAAE,GACf,SACA,GAAG,MACe,GAAG,CAAE,MAAK;CAC5B,MAAM,aAAa,kBAA8B,KAAK;CACtD,MAAM,OAAO,kBAAO;AAEpB,QAAO;CAEP,MAAMA,eAA2B,uBAC/B,CAAC,QAAQ,CAAE,OAAM;EAAE,GAAG;EAAM,GAAG;CAAO,IACtC,CAAC,IAAK,EACP;CAED,MAAMC,gBAIF,uBACF,CAAC,EAAE,WAAK,GAAG,OAAO,GAAG,CAAE,OAAM;EAC3B;EACA,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB;EACA,GAAG;EACH,GAAG;EACH,KAAK,4BAAUC,OAAK,gBAAgB,WAAW;EAC/C,SAAS,MAAM,MAAM,WAAW;EAChC,UAAU,6CAAM,MAAM,UAAU,WAAW,UAAU,SAAS;CAC/D,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,4BAAgB,MAAM;EACpB,MAAM,KAAK,iDAAqB,GAAG;AAEnC,8BAAU,KAAK,GAAG;CACnB,GAAE,CAAC,KAAK,EAAG,EAAC;AAEb,QAAO;EACL;EACA;EACA;EACA;EACA;CACD;AACF;AAmDD,MAAa,mBAAmB,CAAC,EAC/B,IACA,KACA,IACA,YACA,YACA,UACA,SACA,GAAG,MACmB,KAAK;CAC3B,MAAM,OAAO,kBAAO;AAEpB,QAAO;CAEP,MAAMC,eACJ,uBACE,CAAC,EAAE,WAAK,GAAG,OAAO,GAAG,CAAE,OAAM;EAC3B;EACA,KAAK,4BAAUD,OAAK,WAAW;EAC/B,SAAS,MAAM,MAAM;EACrB,GAAG;EACH,GAAG;EACH,YAAY,6CAAM,MAAM,YAAY,WAAW;EAC/C,UAAU,6CAAM,MAAM,UAAU,SAAS;EACzC,UAAU,6CAAM,MAAM,UAAU,SAAS;CAC1C,IACD;EAAC;EAAI;EAAY;EAAI;EAAY;EAAU;EAAU;CAAK,EAC3D;AAEH,4BAAgB,MAAM;EACpB,MAAM,KAAK,4CAAgB,GAAG;AAE9B,8BAAU,KAAK,GAAG;CACnB,GAAE,CAAC,KAAK,EAAG,EAAC;AAEb,QAAO,EACL,aACD;AACF;AAmBD,MAAa,sBAAsB,CAAC,EAClC,IACA,KACA,IACA,UACA,WACA,GAAG,MACsB,KAAK;CAC9B,MAAM,OAAO,kBAAO;CACpB,MAAM,EACJ,YACA,UAAU,eACV,aACD,GAAG,qBAAqB;CACzB,MAAM,CAAC,QAAQ,UAAU,GAAG,oBAAkB,MAAM;CACpD,MAAM,gBAAgB,YAAY;AAElC,QAAO;CAEP,MAAM,gBAAgB,uBACpB,CAACE,OAAmC;AAClC,KAAG,gBAAgB;EAEnB,MAAM,SAAS,WAAW,SAAS,WAAW;AAE9C,OAAK,OAAQ;EAEb,MAAM,QAAQ,OAAO;EACrB,MAAM,OAAO,MAAM;EACnB,MAAM,aAAa,OAAO,IAAI,MAAM,KAAK;AAEzC,aAAW,SAAS,UAAU,WAAW;CAC1C,GACD,CAAC,UAAW,EACb;CAED,MAAMC,kBAIF,uBACF,CAAC,QAAQ,CAAE,OACR;EACC;EACA,oBAAoB;EACpB,eAAe,gDAAS,OAAO;EAC/B,UAAU;EACV,SAAS,MAAM,MAAM;EACrB,GAAG;EACH,GAAG;EACH,eAAe,kDACb,MAAM,eACN,KAAK,eACL,cACD;EACD,YAAY,6CAAM,MAAM,YAAY,YAAY,UAAU;CAC3D,IACH;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMC,eAA2B,uBAC/B,CAAC,QAAQ,CAAE,OAAM;EACf,eAAe,gDAAS,OAAO;EAC/B,aAAa;EACb,GAAG;CACJ,IACD,CAAC,MAAO,EACT;AAED,4BAAgB,MAAM;EACpB,MAAM,KAAK,mDAAuB,GAAG;AAErC,8BAAU,KAAK,GAAG;CACnB,GAAE,CAAC,KAAK,EAAG,EAAC;AAEb,QAAO;EACL;EACA;CACD;AACF"}

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

@@ -0,0 +1,7 @@
+const require_components_ripple_ripple = require('./ripple.cjs');
+const require_components_ripple_use_ripple = require('./use-ripple.cjs');
+
+exports.Ripple = require_components_ripple_ripple.Ripple;
+exports.RipplePropsContext = require_components_ripple_ripple.RipplePropsContext;
+exports.useRipple = require_components_ripple_use_ripple.useRipple;
+exports.useRipplePropsContext = require_components_ripple_ripple.useRipplePropsContext;

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

@@ -0,0 +1,60 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_core_components_create_component = require('../../core/components/create-component.cjs');
+const require_components_motion_factory = require('../motion/factory.cjs');
+const require_components_ripple_ripple_style = require('./ripple.style.cjs');
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const motion_react = require_rolldown_runtime.__toESM(require("motion/react"));
+
+//#region src/components/ripple/ripple.tsx
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const { PropsContext: RipplePropsContext, usePropsContext: useRipplePropsContext, withContext } = require_core_components_create_component.createComponent("ripple", require_components_ripple_ripple_style.rippleStyle);
+/**
+* `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.
+*
+* @see https://yamada-ui.com/components/ripple
+*/
+const Ripple = withContext(({ style, color = "currentColor", disabled, ripples, onAnimationComplete, onClear,...rest }) => {
+	if (disabled) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: ripples.map(({ key, size, x, y }) => {
+		const duration = clamp(.01 * size, .2, size > 100 ? .75 : .5);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			mode: "popLayout",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_motion_factory.motion.span, {
+				style: {
+					height: `${size}px`,
+					left: x,
+					pointerEvents: "none",
+					position: "absolute",
+					top: y,
+					transformOrigin: "center",
+					width: `${size}px`,
+					...style
+				},
+				animate: {
+					opacity: 0,
+					transform: "scale(2)"
+				},
+				bgColor: color,
+				exit: { opacity: 0 },
+				initial: {
+					opacity: .35,
+					transform: "scale(0)"
+				},
+				transition: { duration },
+				...rest,
+				onAnimationComplete: (0, require_utils_index.utils_exports.handlerAll)(onAnimationComplete, () => onClear(key))
+			})
+		}, key);
+	}) });
+})();
+
+//#endregion
+exports.Ripple = Ripple;
+exports.RipplePropsContext = RipplePropsContext;
+exports.useRipplePropsContext = useRipplePropsContext;
+exports.withContext = withContext;
+//# sourceMappingURL=ripple.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.cjs","names":["value: number","min: number","max: number","rippleStyle","Ripple: FC<RippleProps>","AnimatePresence","motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n  extends HTMLMotionProps<\"span\">,\n    ThemeProps<RippleStyle> {\n  /**\n   * The ripples to use.\n   */\n  ripples: RippleOptions[]\n  /**\n   * The callback invoked when a ripple is cleared.\n   */\n  onClear: (key: Key) => void\n  /**\n   * If `true`, disable ripple effects when pressing a element.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const {\n  PropsContext: RipplePropsContext,\n  usePropsContext: useRipplePropsContext,\n  withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\n/**\n * `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n *\n * @see https://yamada-ui.com/components/ripple\n */\nexport const Ripple: FC<RippleProps> = withContext(\n  ({\n    style,\n    color = \"currentColor\",\n    disabled,\n    ripples,\n    onAnimationComplete,\n    onClear,\n    ...rest\n  }) => {\n    if (disabled) return null\n\n    return (\n      <>\n        {ripples.map(({ key, size, x, y }) => {\n          const duration = clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)\n\n          return (\n            <AnimatePresence key={key} mode=\"popLayout\">\n              <motion.span\n                style={{\n                  height: `${size}px`,\n                  left: x,\n                  pointerEvents: \"none\",\n                  position: \"absolute\",\n                  top: y,\n                  transformOrigin: \"center\",\n                  width: `${size}px`,\n                  ...style,\n                }}\n                animate={{ opacity: 0, transform: \"scale(2)\" }}\n                bgColor={color}\n                exit={{ opacity: 0 }}\n                initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n                transition={{ duration }}\n                {...rest}\n                onAnimationComplete={handlerAll(onAnimationComplete, () =>\n                  onClear(key),\n                )}\n              />\n            </AnimatePresence>\n          )\n        })}\n      </>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,QAAQ,CAACA,OAAeC,KAAaC,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,IAAI,EAAE,IAAI;AAqBrC,MAAa,EACX,cAAc,oBACd,iBAAiB,uBACjB,aACD,GAAG,yDAA0C,UAAUC,mDAAY;;;;;;AAOpE,MAAaC,SAA0B,YACrC,CAAC,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,QACA,GAAG,MACJ,KAAK;AACJ,KAAI,SAAU,QAAO;AAErB,wBACE,mEACG,QAAQ,IAAI,CAAC,EAAE,KAAK,MAAM,GAAG,GAAG,KAAK;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,GAAI;AAEjE,yBACE,2BAACC;GAA0B,MAAK;6BAC9B,2BAACC,yCAAO;IACN,OAAO;KACL,WAAW,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,UAAU,KAAK;KACf,GAAG;IACJ;IACD,SAAS;KAAE,SAAS;KAAG,WAAW;IAAY;IAC9C,SAAS;IACT,MAAM,EAAE,SAAS,EAAG;IACpB,SAAS;KAAE,SAAS;KAAM,WAAW;IAAY;IACjD,YAAY,EAAE,SAAU;IACxB,GAAI;IACJ,qBAAqB,kDAAW,qBAAqB,MACnD,QAAQ,IAAI,CACb;KACD;KArBkB,IAsBJ;CAErB,EAAC,GACD;AAEN,EACF,EAAE"}

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

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

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const react = require_rolldown_runtime.__toESM(require("react"));
+
+//#region src/components/ripple/use-ripple.ts
+const useRipple = ({ disabled,...rest } = {}) => {
+	const [ripples, setRipples] = (0, react.useState)([]);
+	const onClick = (0, react.useCallback)((ev) => {
+		if (disabled) return;
+		const trigger = ev.currentTarget;
+		const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+		const rect = trigger.getBoundingClientRect();
+		setRipples((prev) => [...prev, {
+			key: (0, require_utils_index.utils_exports.uuid)(),
+			size,
+			x: ev.clientX - rect.x - size / 2,
+			y: ev.clientY - rect.y - size / 2
+		}]);
+	}, [disabled]);
+	const onClear = (0, react.useCallback)((key) => {
+		setRipples((prev) => prev.filter((item) => item.key !== key));
+	}, []);
+	return {
+		ripples,
+		onClear,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(onClick, rest.onClick)
+	};
+};
+
+//#endregion
+exports.useRipple = useRipple;
+//# sourceMappingURL=use-ripple.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-ripple.cjs","names":["onClick: MouseEventHandler<T>","key: Key"],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n  key: Key\n  size: number\n  x: number\n  y: number\n}\n\nexport interface UseRippleProps<T = HTMLElement> {\n  disabled?: boolean\n  onClick?: MouseEventHandler<T>\n}\n\nexport const useRipple = <T = HTMLElement>({\n  disabled,\n  ...rest\n}: UseRippleProps<T> = {}) => {\n  const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n  const onClick: MouseEventHandler<T> = useCallback(\n    (ev) => {\n      if (disabled) return\n\n      const trigger = ev.currentTarget as unknown as Element\n\n      const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n      const rect = trigger.getBoundingClientRect()\n\n      setRipples((prev) => [\n        ...prev,\n        {\n          key: uuid(),\n          size,\n          x: ev.clientX - rect.x - size / 2,\n          y: ev.clientY - rect.y - size / 2,\n        },\n      ])\n    },\n    [disabled],\n  )\n\n  const onClear = useCallback((key: Key) => {\n    setRipples((prev) => prev.filter((item) => item.key !== key))\n  }, [])\n\n  return {\n    ripples,\n    onClear,\n    onClick: handlerAll(onClick, rest.onClick),\n  }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;;;;AAkBA,MAAa,YAAY,CAAkB,EACzC,SACA,GAAG,MACe,GAAG,CAAE,MAAK;CAC5B,MAAM,CAAC,SAAS,WAAW,GAAG,oBAA0B,CAAE,EAAC;CAE3D,MAAMA,UAAgC,uBACpC,CAAC,OAAO;AACN,MAAI,SAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,aAAa;EAChE,MAAM,OAAO,QAAQ,uBAAuB;AAE5C,aAAW,CAAC,SAAS,CACnB,GAAG,MACH;GACE,KAAK,6CAAM;GACX;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;EACjC,CACF,EAAC;CACH,GACD,CAAC,QAAS,EACX;CAED,MAAM,UAAU,uBAAY,CAACC,QAAa;AACxC,aAAW,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC;CAC9D,GAAE,CAAE,EAAC;AAEN,QAAO;EACL;EACA;EACA,SAAS,kDAAW,SAAS,KAAK,QAAQ;CAC3C;AACF"}