@yamada-ui/resizable 1.1.12-dev-20240915031944 → 1.1.12-dev-20240917033401

package/dist/{chunk-YFQD6ESN.mjs → chunk-3FE4GRVH.mjs}

@@ -2,13 +2,13 @@
 import {
   ResizableProvider,
   useResizable
-} from "./chunk-IIKCEUSE.mjs";
+} from "./chunk-ANRZUWU4.mjs";
 
 // src/resizable.tsx
 import {
   ui,
   forwardRef,
-  useMultiComponentStyle,
+  useComponentMultiStyle,
   omitThemeProps
 } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
@@ -16,7 +16,7 @@ import { PanelGroup } from "react-resizable-panels";
 import { jsx } from "react/jsx-runtime";
 var Resizable = forwardRef(
   ({ direction = "horizontal", ...props }, ref) => {
-    const [styles, mergedProps] = useMultiComponentStyle("Resizable", {
+    const [styles, mergedProps] = useComponentMultiStyle("Resizable", {
       direction,
       ...props
     });
@@ -41,4 +41,4 @@ var Resizable = forwardRef(
 export {
   Resizable
 };
-//# sourceMappingURL=chunk-YFQD6ESN.mjs.map
+//# sourceMappingURL=chunk-3FE4GRVH.mjs.map

package/dist/chunk-3FE4GRVH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/resizable.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useComponentMultiStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ninterface ResizableOptions {\n  /**\n   * Ref for resizable container element.\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport interface ResizableProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Resizable\">,\n    Omit<UseResizableProps, \"ref\">,\n    ResizableOptions {}\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n  ({ direction = \"horizontal\", ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Resizable\", {\n      direction,\n      ...props,\n    })\n    const { className, children, containerRef, ...computedProps } =\n      omitThemeProps(mergedProps)\n    const { getContainerProps, getGroupProps, ...rest } = useResizable({\n      ref,\n      ...computedProps,\n    })\n\n    const css: CSSUIObject = { w: \"100%\", h: \"100%\", ...styles.container }\n\n    return (\n      <ResizableProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-resizable\", className)}\n          __css={css}\n          {...getContainerProps({}, containerRef)}\n        >\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </ui.div>\n      </ResizableProvider>\n    )\n  },\n)\n"],"mappings":";;;;;;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AA4CjB;AAtBH,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC/C,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,aAAa;AAAA,MAChE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,cAAc,GAAG,cAAc,IAC1D,eAAe,WAAW;AAC5B,UAAM,EAAE,mBAAmB,eAAe,GAAG,KAAK,IAAI,aAAa;AAAA,MACjE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,UAAU;AAErE,WACE,oBAAC,qBAAkB,OAAO,EAAE,QAAQ,GAAG,KAAK,GAC1C;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,QACvC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,YAAY;AAAA,QAEtC,8BAAC,cAAY,GAAG,cAAc,GAAI,UAAS;AAAA;AAAA,IAC7C,GACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/{chunk-IIKCEUSE.mjs → chunk-ANRZUWU4.mjs}

@@ -180,4 +180,4 @@ export {
   useResizableItem,
   useResizableTrigger
 };
-//# sourceMappingURL=chunk-IIKCEUSE.mjs.map
+//# sourceMappingURL=chunk-ANRZUWU4.mjs.map

package/dist/chunk-ANRZUWU4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}

package/dist/{chunk-BWGY44LK.mjs → chunk-BJUUDR3V.mjs}

@@ -2,7 +2,7 @@
 import {
   useResizableContext,
   useResizableTrigger
-} from "./chunk-IIKCEUSE.mjs";
+} from "./chunk-ANRZUWU4.mjs";
 
 // src/resizable-trigger.tsx
 import { ui } from "@yamada-ui/core";
@@ -105,4 +105,4 @@ export {
   ResizableTrigger,
   ResizableTriggerIcon
 };
-//# sourceMappingURL=chunk-BWGY44LK.mjs.map
+//# sourceMappingURL=chunk-BJUUDR3V.mjs.map

package/dist/chunk-BJUUDR3V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/resizable-trigger.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport type { FC, ReactElement } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ninterface ResizableTriggerOptions {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLUIProps\n}\n\nexport interface ResizableTriggerProps\n  extends Merge<\n      Omit<UseResizableTriggerProps, \"ref\">,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    ResizableTriggerOptions {}\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n  ({ className, icon, children, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getTriggerProps, getIconProps } = useResizableTrigger({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n    return (\n      <ui.div\n        as={PanelResizeHandle}\n        className={cx(\"ui-resizable__trigger\", className)}\n        __css={css}\n        {...getTriggerProps()}\n      >\n        {icon ? (\n          <ui.div\n            className=\"ui-resizable__trigger__icon\"\n            __css={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"auto\",\n              translateY: \"-50%\",\n              translateX: \"-50%\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon viewBox=\"0 0 23 39\" w=\"0.5rem\" h=\"1rem\" {...rest}>\n      <path\n        d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n"],"mappings":";;;;;;;AAKA,SAAS,UAAU;AAEnB,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAiC5B,SAOI,KAPJ;AAXC,IAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,MAAM,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1D,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,iBAAiB,aAAa,IAAI,oBAAoB;AAAA,MAC5D;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,UAAU,YAAY,GAAG,OAAO,QAAQ;AAEnE,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG,gBAAgB;AAAA,QAEnB;AAAA,iBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,gBAAgB;AAAA,gBAChB,YAAY;AAAA,gBACZ,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,aAAa,SAAS;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEH;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAIxB,IAAM,uBAAsD,CAAC,SAAS;AAC3E,SACE,qBAAC,QAAK,SAAQ,aAAY,GAAE,UAAS,GAAE,QAAQ,GAAG,MAChD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-OC4OPFF5.mjs → chunk-PQMSDW24.mjs}

@@ -2,7 +2,7 @@
 import {
   useResizableContext,
   useResizableItem
-} from "./chunk-IIKCEUSE.mjs";
+} from "./chunk-ANRZUWU4.mjs";
 
 // src/resizable-item.tsx
 import { ui, forwardRef } from "@yamada-ui/core";
@@ -72,4 +72,4 @@ var ResizableItem = forwardRef(
 export {
   ResizableItem
 };
-//# sourceMappingURL=chunk-OC4OPFF5.mjs.map
+//# sourceMappingURL=chunk-PQMSDW24.mjs.map

package/dist/chunk-PQMSDW24.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/resizable-item.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ninterface ResizableItemOptions {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport interface ResizableItemProps\n  extends Omit<UseResizableItemProps, \"ref\">,\n    ResizableItemOptions {}\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAEnB,SAAS,aAAa;AAoEd;AAhER,IAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,CAAC;AAEpC,IAAM,UAAU,GAAG,OAAO,EAAE,kBAAkB,CAAC,SAAS,WAAW,IAAI,IAAI,EAAE,CAAC;AAavE,IAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,eAAe,aAAa,IAAI,iBAAiB;AAAA,MACvD;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,SAAS,QAAQ,GAAG,OAAO,KAAK;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QAED;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,YAC7C,OAAO;AAAA,YACN,GAAG,aAAa,CAAC,GAAG,QAAQ;AAAA,YAE5B;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/index.js

@@ -206,7 +206,7 @@ var useResizableTrigger = ({
 var import_jsx_runtime = require("react/jsx-runtime");
 var Resizable = (0, import_core.forwardRef)(
   ({ direction = "horizontal", ...props }, ref) => {
-    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Resizable", {
+    const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Resizable", {
       direction,
       ...props
     });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/resizable.tsx","../src/use-resizable.ts","../src/resizable-item.tsx","../src/resizable-trigger.tsx"],"sourcesContent":["export { Resizable } from \"./resizable\"\nexport type { ResizableProps } from \"./resizable\"\nexport { ResizableItem } from \"./resizable-item\"\nexport type { ResizableItemProps } from \"./resizable-item\"\nexport { ResizableTrigger, ResizableTriggerIcon } from \"./resizable-trigger\"\nexport type {\n  ResizableTriggerProps,\n  ResizableTriggerIconProps,\n} from \"./resizable-trigger\"\nexport type { ResizableStorage, ResizableItemControl } from \"./use-resizable\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ntype ResizableOptions = {\n  /**\n   * Ref for resizable container element.\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport type ResizableProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n  ThemeProps<\"Resizable\"> &\n  Omit<UseResizableProps, \"ref\"> &\n  ResizableOptions\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n  ({ direction = \"horizontal\", ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Resizable\", {\n      direction,\n      ...props,\n    })\n    const { className, children, containerRef, ...computedProps } =\n      omitThemeProps(mergedProps)\n    const { getContainerProps, getGroupProps, ...rest } = useResizable({\n      ref,\n      ...computedProps,\n    })\n\n    const css: CSSUIObject = { w: \"100%\", h: \"100%\", ...styles.container }\n\n    return (\n      <ResizableProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-resizable\", className)}\n          __css={css}\n          {...getContainerProps({}, containerRef)}\n        >\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </ui.div>\n      </ResizableProvider>\n    )\n  },\n)\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { PropGetter } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ntype GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps\ntype ItemPropGetter = (props?: HTMLUIProps<\"div\"> & PanelProps) => PanelProps\ntype TriggerPropGetter = (\n  props?: PanelResizeHandleProps,\n) => PanelResizeHandleProps\n\ntype As = { as?: keyof HTMLElementTagNameMap }\n\ntype ResizableGroupProps = Omit<\n  Partial<PanelGroupProps>,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\ntype ResizableItemProps = Omit<PanelProps, \"id\" | \"tagName\" | \"children\"> & As\ntype ResizableTriggerProps = Omit<\n  PanelResizeHandleProps,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\n\nexport type ResizableStorage = PanelGroupStorage\nexport type ResizableItemControl = ImperativePanelHandle\n\ntype ResizableContext = {\n  isDisabled: boolean\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport type UseResizableProps = {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps: GroupPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ntype UseResizableItemOptions = {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"as\"> & ResizableItemProps\n}\n\nexport type UseResizableItemProps = Omit<\n  HTMLUIProps<\"div\">,\n  keyof UseResizableItemOptions\n> &\n  UseResizableItemOptions\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: ItemPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ntype UseResizableTriggerOptions = {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport type UseResizableTriggerProps = HTMLUIProps<\"div\"> &\n  ResizableTriggerProps &\n  UseResizableTriggerOptions\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: TriggerPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      id,\n      tagName: as,\n      disabled: trulyDisabled,\n      onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n      ...rest,\n      \"data-active\": dataAttr(isActive),\n      style: {\n        ...props.style,\n        ...rest.style,\n        ...(trulyDisabled ? { cursor: \"default\" } : {}),\n      },\n    }),\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ntype ResizableItemOptions = {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport type ResizableItemProps = Omit<UseResizableItemProps, \"ref\"> &\n  ResizableItemOptions\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef, type FC, type ReactElement } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ntype ResizableTriggerOptions = {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type ResizableTriggerProps = HTMLUIPropsWithoutAs &\n  Omit<UseResizableTriggerProps, \"ref\"> &\n  ResizableTriggerOptions\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n  ({ className, icon, children, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getTriggerProps, getIconProps } = useResizableTrigger({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n    return (\n      <ui.div\n        as={PanelResizeHandle}\n        className={cx(\"ui-resizable__trigger\", className)}\n        __css={css}\n        {...getTriggerProps()}\n      >\n        {icon ? (\n          <ui.div\n            className=\"ui-resizable__trigger__icon\"\n            __css={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"auto\",\n              translateY: \"-50%\",\n              translateX: \"-50%\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon viewBox=\"0 0 23 39\" w=\"0.5rem\" h=\"1rem\" {...rest}>\n      <path\n        d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n"],"mappings":"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","names":["import_utils","import_react_resizable_panels","ref","rest","isActive","import_core","import_utils","import_react_resizable_panels","import_jsx_runtime","import_core","import_utils","import_react","import_react_resizable_panels","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/resizable.tsx","../src/use-resizable.ts","../src/resizable-item.tsx","../src/resizable-trigger.tsx"],"sourcesContent":["export { Resizable } from \"./resizable\"\nexport type { ResizableProps } from \"./resizable\"\nexport { ResizableItem } from \"./resizable-item\"\nexport type { ResizableItemProps } from \"./resizable-item\"\nexport { ResizableTrigger, ResizableTriggerIcon } from \"./resizable-trigger\"\nexport type {\n  ResizableTriggerProps,\n  ResizableTriggerIconProps,\n} from \"./resizable-trigger\"\nexport type { ResizableStorage, ResizableItemControl } from \"./use-resizable\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useComponentMultiStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ninterface ResizableOptions {\n  /**\n   * Ref for resizable container element.\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport interface ResizableProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Resizable\">,\n    Omit<UseResizableProps, \"ref\">,\n    ResizableOptions {}\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n  ({ direction = \"horizontal\", ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Resizable\", {\n      direction,\n      ...props,\n    })\n    const { className, children, containerRef, ...computedProps } =\n      omitThemeProps(mergedProps)\n    const { getContainerProps, getGroupProps, ...rest } = useResizable({\n      ref,\n      ...computedProps,\n    })\n\n    const css: CSSUIObject = { w: \"100%\", h: \"100%\", ...styles.container }\n\n    return (\n      <ResizableProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-resizable\", className)}\n          __css={css}\n          {...getContainerProps({}, containerRef)}\n        >\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </ui.div>\n      </ResizableProvider>\n    )\n  },\n)\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ninterface ResizableItemOptions {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport interface ResizableItemProps\n  extends Omit<UseResizableItemProps, \"ref\">,\n    ResizableItemOptions {}\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport type { FC, ReactElement } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ninterface ResizableTriggerOptions {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLUIProps\n}\n\nexport interface ResizableTriggerProps\n  extends Merge<\n      Omit<UseResizableTriggerProps, \"ref\">,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    ResizableTriggerOptions {}\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n  ({ className, icon, children, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getTriggerProps, getIconProps } = useResizableTrigger({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n    return (\n      <ui.div\n        as={PanelResizeHandle}\n        className={cx(\"ui-resizable__trigger\", className)}\n        __css={css}\n        {...getTriggerProps()}\n      >\n        {icon ? (\n          <ui.div\n            className=\"ui-resizable__trigger__icon\"\n            __css={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"auto\",\n              translateY: \"-50%\",\n              translateX: \"-50%\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon viewBox=\"0 0 23 39\" w=\"0.5rem\" h=\"1rem\" {...rest}>\n      <path\n        d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n"],"mappings":"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","names":["import_utils","import_react_resizable_panels","ref","rest","isActive","import_core","import_utils","import_react_resizable_panels","import_jsx_runtime","import_core","import_utils","import_react","import_react_resizable_panels","import_jsx_runtime"]}

package/dist/index.mjs

@@ -1,15 +1,15 @@
 "use client"
 import {
   ResizableItem
-} from "./chunk-OC4OPFF5.mjs";
+} from "./chunk-PQMSDW24.mjs";
 import {
   ResizableTrigger,
   ResizableTriggerIcon
-} from "./chunk-BWGY44LK.mjs";
+} from "./chunk-BJUUDR3V.mjs";
 import {
   Resizable
-} from "./chunk-YFQD6ESN.mjs";
-import "./chunk-IIKCEUSE.mjs";
+} from "./chunk-3FE4GRVH.mjs";
+import "./chunk-ANRZUWU4.mjs";
 export {
   Resizable,
   ResizableItem,

package/dist/resizable-item.d.mts

@@ -4,13 +4,14 @@ import { UseResizableItemProps } from './use-resizable.mjs';
 import '@yamada-ui/utils';
 import 'react-resizable-panels';
 
-type ResizableItemOptions = {
+interface ResizableItemOptions {
     /**
      * Ref for resizable item inner element.
      */
     innerRef?: ForwardedRef<HTMLDivElement>;
-};
-type ResizableItemProps = Omit<UseResizableItemProps, "ref"> & ResizableItemOptions;
+}
+interface ResizableItemProps extends Omit<UseResizableItemProps, "ref">, ResizableItemOptions {
+}
 declare const ResizableItem: _yamada_ui_core.Component<"div", ResizableItemProps>;
 
 export { ResizableItem, type ResizableItemProps };

package/dist/resizable-item.d.ts

@@ -4,13 +4,14 @@ import { UseResizableItemProps } from './use-resizable.js';
 import '@yamada-ui/utils';
 import 'react-resizable-panels';
 
-type ResizableItemOptions = {
+interface ResizableItemOptions {
     /**
      * Ref for resizable item inner element.
      */
     innerRef?: ForwardedRef<HTMLDivElement>;
-};
-type ResizableItemProps = Omit<UseResizableItemProps, "ref"> & ResizableItemOptions;
+}
+interface ResizableItemProps extends Omit<UseResizableItemProps, "ref">, ResizableItemOptions {
+}
 declare const ResizableItem: _yamada_ui_core.Component<"div", ResizableItemProps>;
 
 export { ResizableItem, type ResizableItemProps };

package/dist/resizable-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/resizable-item.tsx","../src/use-resizable.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ntype ResizableItemOptions = {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport type ResizableItemProps = Omit<UseResizableItemProps, \"ref\"> &\n  ResizableItemOptions\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { PropGetter } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ntype GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps\ntype ItemPropGetter = (props?: HTMLUIProps<\"div\"> & PanelProps) => PanelProps\ntype TriggerPropGetter = (\n  props?: PanelResizeHandleProps,\n) => PanelResizeHandleProps\n\ntype As = { as?: keyof HTMLElementTagNameMap }\n\ntype ResizableGroupProps = Omit<\n  Partial<PanelGroupProps>,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\ntype ResizableItemProps = Omit<PanelProps, \"id\" | \"tagName\" | \"children\"> & As\ntype ResizableTriggerProps = Omit<\n  PanelResizeHandleProps,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\n\nexport type ResizableStorage = PanelGroupStorage\nexport type ResizableItemControl = ImperativePanelHandle\n\ntype ResizableContext = {\n  isDisabled: boolean\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport type UseResizableProps = {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps: GroupPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ntype UseResizableItemOptions = {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"as\"> & ResizableItemProps\n}\n\nexport type UseResizableItemProps = Omit<\n  HTMLUIProps<\"div\">,\n  keyof UseResizableItemOptions\n> &\n  UseResizableItemOptions\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: ItemPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ntype UseResizableTriggerOptions = {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport type UseResizableTriggerProps = HTMLUIProps<\"div\"> &\n  ResizableTriggerProps &\n  UseResizableTriggerOptions\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: TriggerPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      id,\n      tagName: as,\n      disabled: trulyDisabled,\n      onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n      ...rest,\n      \"data-active\": dataAttr(isActive),\n      style: {\n        ...props.style,\n        ...rest.style,\n        ...(trulyDisabled ? { cursor: \"default\" } : {}),\n      },\n    }),\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["import_utils","import_react_resizable_panels","ref"]}
+{"version":3,"sources":["../src/resizable-item.tsx","../src/use-resizable.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ninterface ResizableItemOptions {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport interface ResizableItemProps\n  extends Omit<UseResizableItemProps, \"ref\">,\n    ResizableItemOptions {}\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["import_utils","import_react_resizable_panels","ref"]}

package/dist/resizable-item.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   ResizableItem
-} from "./chunk-OC4OPFF5.mjs";
-import "./chunk-IIKCEUSE.mjs";
+} from "./chunk-PQMSDW24.mjs";
+import "./chunk-ANRZUWU4.mjs";
 export {
   ResizableItem
 };

package/dist/resizable-trigger.d.mts

@@ -2,11 +2,11 @@ import * as react from 'react';
 import { FC, ReactElement } from 'react';
 import { HTMLUIPropsWithoutAs, HTMLUIProps } from '@yamada-ui/core';
 import { IconProps } from '@yamada-ui/icon';
+import { Merge } from '@yamada-ui/utils';
 import { UseResizableTriggerProps } from './use-resizable.mjs';
-import '@yamada-ui/utils';
 import 'react-resizable-panels';
 
-type ResizableTriggerOptions = {
+interface ResizableTriggerOptions {
     /**
      * The resizable trigger icon to use.
      */
@@ -14,10 +14,11 @@ type ResizableTriggerOptions = {
     /**
      * Props for resizable trigger icon component.
      */
-    iconProps?: HTMLUIProps<"div">;
-};
-type ResizableTriggerProps = HTMLUIPropsWithoutAs & Omit<UseResizableTriggerProps, "ref"> & ResizableTriggerOptions;
-declare const ResizableTrigger: react.ForwardRefExoticComponent<HTMLUIPropsWithoutAs & Omit<UseResizableTriggerProps, "ref"> & ResizableTriggerOptions & react.RefAttributes<HTMLElement>>;
+    iconProps?: HTMLUIProps;
+}
+interface ResizableTriggerProps extends Merge<Omit<UseResizableTriggerProps, "ref">, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, ResizableTriggerOptions {
+}
+declare const ResizableTrigger: react.ForwardRefExoticComponent<ResizableTriggerProps & react.RefAttributes<HTMLElement>>;
 type ResizableTriggerIconProps = IconProps;
 declare const ResizableTriggerIcon: FC<ResizableTriggerIconProps>;
 

package/dist/resizable-trigger.d.ts

@@ -2,11 +2,11 @@ import * as react from 'react';
 import { FC, ReactElement } from 'react';
 import { HTMLUIPropsWithoutAs, HTMLUIProps } from '@yamada-ui/core';
 import { IconProps } from '@yamada-ui/icon';
+import { Merge } from '@yamada-ui/utils';
 import { UseResizableTriggerProps } from './use-resizable.js';
-import '@yamada-ui/utils';
 import 'react-resizable-panels';
 
-type ResizableTriggerOptions = {
+interface ResizableTriggerOptions {
     /**
      * The resizable trigger icon to use.
      */
@@ -14,10 +14,11 @@ type ResizableTriggerOptions = {
     /**
      * Props for resizable trigger icon component.
      */
-    iconProps?: HTMLUIProps<"div">;
-};
-type ResizableTriggerProps = HTMLUIPropsWithoutAs & Omit<UseResizableTriggerProps, "ref"> & ResizableTriggerOptions;
-declare const ResizableTrigger: react.ForwardRefExoticComponent<HTMLUIPropsWithoutAs & Omit<UseResizableTriggerProps, "ref"> & ResizableTriggerOptions & react.RefAttributes<HTMLElement>>;
+    iconProps?: HTMLUIProps;
+}
+interface ResizableTriggerProps extends Merge<Omit<UseResizableTriggerProps, "ref">, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, ResizableTriggerOptions {
+}
+declare const ResizableTrigger: react.ForwardRefExoticComponent<ResizableTriggerProps & react.RefAttributes<HTMLElement>>;
 type ResizableTriggerIconProps = IconProps;
 declare const ResizableTriggerIcon: FC<ResizableTriggerIconProps>;
 

package/dist/resizable-trigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/resizable-trigger.tsx","../src/use-resizable.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef, type FC, type ReactElement } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ntype ResizableTriggerOptions = {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type ResizableTriggerProps = HTMLUIPropsWithoutAs &\n  Omit<UseResizableTriggerProps, \"ref\"> &\n  ResizableTriggerOptions\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n  ({ className, icon, children, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getTriggerProps, getIconProps } = useResizableTrigger({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n    return (\n      <ui.div\n        as={PanelResizeHandle}\n        className={cx(\"ui-resizable__trigger\", className)}\n        __css={css}\n        {...getTriggerProps()}\n      >\n        {icon ? (\n          <ui.div\n            className=\"ui-resizable__trigger__icon\"\n            __css={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"auto\",\n              translateY: \"-50%\",\n              translateX: \"-50%\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon viewBox=\"0 0 23 39\" w=\"0.5rem\" h=\"1rem\" {...rest}>\n      <path\n        d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { PropGetter } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ntype GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps\ntype ItemPropGetter = (props?: HTMLUIProps<\"div\"> & PanelProps) => PanelProps\ntype TriggerPropGetter = (\n  props?: PanelResizeHandleProps,\n) => PanelResizeHandleProps\n\ntype As = { as?: keyof HTMLElementTagNameMap }\n\ntype ResizableGroupProps = Omit<\n  Partial<PanelGroupProps>,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\ntype ResizableItemProps = Omit<PanelProps, \"id\" | \"tagName\" | \"children\"> & As\ntype ResizableTriggerProps = Omit<\n  PanelResizeHandleProps,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\n\nexport type ResizableStorage = PanelGroupStorage\nexport type ResizableItemControl = ImperativePanelHandle\n\ntype ResizableContext = {\n  isDisabled: boolean\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport type UseResizableProps = {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps: GroupPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ntype UseResizableItemOptions = {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"as\"> & ResizableItemProps\n}\n\nexport type UseResizableItemProps = Omit<\n  HTMLUIProps<\"div\">,\n  keyof UseResizableItemOptions\n> &\n  UseResizableItemOptions\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: ItemPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ntype UseResizableTriggerOptions = {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport type UseResizableTriggerProps = HTMLUIProps<\"div\"> &\n  ResizableTriggerProps &\n  UseResizableTriggerOptions\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: TriggerPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      id,\n      tagName: as,\n      disabled: trulyDisabled,\n      onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n      ...rest,\n      \"data-active\": dataAttr(isActive),\n      style: {\n        ...props.style,\n        ...rest.style,\n        ...(trulyDisabled ? { cursor: \"default\" } : {}),\n      },\n    }),\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["import_utils","import_react","import_react_resizable_panels","isActive","ref"]}
+{"version":3,"sources":["../src/resizable-trigger.tsx","../src/use-resizable.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport type { FC, ReactElement } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ninterface ResizableTriggerOptions {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLUIProps\n}\n\nexport interface ResizableTriggerProps\n  extends Merge<\n      Omit<UseResizableTriggerProps, \"ref\">,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    ResizableTriggerOptions {}\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n  ({ className, icon, children, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getTriggerProps, getIconProps } = useResizableTrigger({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n    return (\n      <ui.div\n        as={PanelResizeHandle}\n        className={cx(\"ui-resizable__trigger\", className)}\n        __css={css}\n        {...getTriggerProps()}\n      >\n        {icon ? (\n          <ui.div\n            className=\"ui-resizable__trigger__icon\"\n            __css={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"auto\",\n              translateY: \"-50%\",\n              translateX: \"-50%\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon viewBox=\"0 0 23 39\" w=\"0.5rem\" h=\"1rem\" {...rest}>\n      <path\n        d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["import_utils","import_react","import_react_resizable_panels","isActive","ref"]}

package/dist/resizable-trigger.mjs

@@ -2,8 +2,8 @@
 import {
   ResizableTrigger,
   ResizableTriggerIcon
-} from "./chunk-BWGY44LK.mjs";
-import "./chunk-IIKCEUSE.mjs";
+} from "./chunk-BJUUDR3V.mjs";
+import "./chunk-ANRZUWU4.mjs";
 export {
   ResizableTrigger,
   ResizableTriggerIcon

package/dist/resizable.d.mts

@@ -5,18 +5,19 @@ import { UseResizableProps } from './use-resizable.mjs';
 import '@yamada-ui/utils';
 import 'react-resizable-panels';
 
-type ResizableOptions = {
+interface ResizableOptions {
     /**
      * Ref for resizable container element.
      */
     containerRef?: ForwardedRef<HTMLDivElement>;
-};
+}
 /**
  * `Resizable` is accessible resizable panel groups and layouts with keyboard support.
  *
  * @see Docs https://yamada-ui.com/components/data-display/resizable
  */
-type ResizableProps = Omit<HTMLUIProps<"div">, "direction"> & ThemeProps<"Resizable"> & Omit<UseResizableProps, "ref"> & ResizableOptions;
+interface ResizableProps extends Omit<HTMLUIProps, "direction">, ThemeProps<"Resizable">, Omit<UseResizableProps, "ref">, ResizableOptions {
+}
 declare const Resizable: _yamada_ui_core.Component<"div", ResizableProps>;
 
 export { Resizable, type ResizableProps };

package/dist/resizable.d.ts

@@ -5,18 +5,19 @@ import { UseResizableProps } from './use-resizable.js';
 import '@yamada-ui/utils';
 import 'react-resizable-panels';
 
-type ResizableOptions = {
+interface ResizableOptions {
     /**
      * Ref for resizable container element.
      */
     containerRef?: ForwardedRef<HTMLDivElement>;
-};
+}
 /**
  * `Resizable` is accessible resizable panel groups and layouts with keyboard support.
  *
  * @see Docs https://yamada-ui.com/components/data-display/resizable
  */
-type ResizableProps = Omit<HTMLUIProps<"div">, "direction"> & ThemeProps<"Resizable"> & Omit<UseResizableProps, "ref"> & ResizableOptions;
+interface ResizableProps extends Omit<HTMLUIProps, "direction">, ThemeProps<"Resizable">, Omit<UseResizableProps, "ref">, ResizableOptions {
+}
 declare const Resizable: _yamada_ui_core.Component<"div", ResizableProps>;
 
 export { Resizable, type ResizableProps };

package/dist/resizable.js

@@ -86,7 +86,7 @@ var useResizable = ({
 var import_jsx_runtime = require("react/jsx-runtime");
 var Resizable = (0, import_core.forwardRef)(
   ({ direction = "horizontal", ...props }, ref) => {
-    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Resizable", {
+    const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Resizable", {
       direction,
       ...props
     });

package/dist/resizable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/resizable.tsx","../src/use-resizable.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ntype ResizableOptions = {\n  /**\n   * Ref for resizable container element.\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport type ResizableProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n  ThemeProps<\"Resizable\"> &\n  Omit<UseResizableProps, \"ref\"> &\n  ResizableOptions\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n  ({ direction = \"horizontal\", ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Resizable\", {\n      direction,\n      ...props,\n    })\n    const { className, children, containerRef, ...computedProps } =\n      omitThemeProps(mergedProps)\n    const { getContainerProps, getGroupProps, ...rest } = useResizable({\n      ref,\n      ...computedProps,\n    })\n\n    const css: CSSUIObject = { w: \"100%\", h: \"100%\", ...styles.container }\n\n    return (\n      <ResizableProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-resizable\", className)}\n          __css={css}\n          {...getContainerProps({}, containerRef)}\n        >\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </ui.div>\n      </ResizableProvider>\n    )\n  },\n)\n","import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { PropGetter } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ntype GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps\ntype ItemPropGetter = (props?: HTMLUIProps<\"div\"> & PanelProps) => PanelProps\ntype TriggerPropGetter = (\n  props?: PanelResizeHandleProps,\n) => PanelResizeHandleProps\n\ntype As = { as?: keyof HTMLElementTagNameMap }\n\ntype ResizableGroupProps = Omit<\n  Partial<PanelGroupProps>,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\ntype ResizableItemProps = Omit<PanelProps, \"id\" | \"tagName\" | \"children\"> & As\ntype ResizableTriggerProps = Omit<\n  PanelResizeHandleProps,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\n\nexport type ResizableStorage = PanelGroupStorage\nexport type ResizableItemControl = ImperativePanelHandle\n\ntype ResizableContext = {\n  isDisabled: boolean\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport type UseResizableProps = {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps: GroupPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ntype UseResizableItemOptions = {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"as\"> & ResizableItemProps\n}\n\nexport type UseResizableItemProps = Omit<\n  HTMLUIProps<\"div\">,\n  keyof UseResizableItemOptions\n> &\n  UseResizableItemOptions\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: ItemPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ntype UseResizableTriggerOptions = {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport type UseResizableTriggerProps = HTMLUIProps<\"div\"> &\n  ResizableTriggerProps &\n  UseResizableTriggerOptions\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: TriggerPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      id,\n      tagName: as,\n      disabled: trulyDisabled,\n      onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n      ...rest,\n      \"data-active\": dataAttr(isActive),\n      style: {\n        ...props.style,\n        ...rest.style,\n        ...(trulyDisabled ? { cursor: \"default\" } : {}),\n      },\n    }),\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAKO;AACP,IAAAA,gBAAmB;AAEnB,IAAAC,iCAA2B;;;ACP3B,mBAAoD;AAEpD,mBAAwD;AACxD,oCAIO;AAsCA,IAAM,CAAC,mBAAmB,mBAAmB,QAClD,4BAAgC;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA8CI,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,6BAAO,oBAAM;AAEb,QAAM,wBAAgC;AAAA,IACpC,CAAC,QAAQ,CAAC,GAAGC,OAAM,UAAU,EAAE,GAAG,OAAO,KAAAA,MAAK,GAAG,KAAK;AAAA,IACtD,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAiC;AAAA,IACrC,CAAC,QAAQ,CAAC,MAAM;AACd,YAAM,EAAE,IAAI,GAAGC,MAAK,IAAI,kCAAc,CAAC;AAEvC,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,GAAGA;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,IAAI,WAAW,YAAY,YAAY,cAAc,UAAU,OAAO;AAAA,EACzE;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,oDAAqB,EAAE;AAGlC,QAAI,IAAK,KAAI,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ADjGU;AAtBH,IAAM,gBAAY;AAAA,EACvB,CAAC,EAAE,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC/C,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,aAAa;AAAA,MAChE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,cAAc,GAAG,cAAc,QAC1D,4BAAe,WAAW;AAC5B,UAAM,EAAE,mBAAmB,eAAe,GAAG,KAAK,IAAI,aAAa;AAAA,MACjE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,UAAU;AAErE,WACE,4CAAC,qBAAkB,OAAO,EAAE,QAAQ,GAAG,KAAK,GAC1C;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,gBAAgB,SAAS;AAAA,QACvC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,YAAY;AAAA,QAEtC,sDAAC,6CAAY,GAAG,cAAc,GAAI,UAAS;AAAA;AAAA,IAC7C,GACF;AAAA,EAEJ;AACF;","names":["import_utils","import_react_resizable_panels","ref","rest"]}
+{"version":3,"sources":["../src/resizable.tsx","../src/use-resizable.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useComponentMultiStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ninterface ResizableOptions {\n  /**\n   * Ref for resizable container element.\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport interface ResizableProps\n  extends Omit<HTMLUIProps, \"direction\">,\n    ThemeProps<\"Resizable\">,\n    Omit<UseResizableProps, \"ref\">,\n    ResizableOptions {}\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n  ({ direction = \"horizontal\", ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Resizable\", {\n      direction,\n      ...props,\n    })\n    const { className, children, containerRef, ...computedProps } =\n      omitThemeProps(mergedProps)\n    const { getContainerProps, getGroupProps, ...rest } = useResizable({\n      ref,\n      ...computedProps,\n    })\n\n    const css: CSSUIObject = { w: \"100%\", h: \"100%\", ...styles.container }\n\n    return (\n      <ResizableProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-resizable\", className)}\n          __css={css}\n          {...getContainerProps({}, containerRef)}\n        >\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </ui.div>\n      </ResizableProvider>\n    )\n  },\n)\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAKO;AACP,IAAAA,gBAAmB;AAEnB,IAAAC,iCAA2B;;;ACF3B,mBAAoD;AAEpD,mBAAwD;AACxD,oCAIO;AAgCA,IAAM,CAAC,mBAAmB,mBAAmB,QAClD,4BAAgC;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AA8CI,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,6BAAO,oBAAM;AAEb,QAAM,wBAAgC;AAAA,IACpC,CAAC,QAAQ,CAAC,GAAGC,OAAM,UAAU,EAAE,GAAG,OAAO,KAAAA,MAAK,GAAG,KAAK;AAAA,IACtD,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAgB;AAAA,IACpB,CAAC,QAAkC,CAAC,MAAuB;AACzD,YAAM,EAAE,IAAI,GAAGC,MAAK,IAAI,kCAAc,CAAC;AAEvC,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,GAAGA;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,IAAI,WAAW,YAAY,YAAY,cAAc,UAAU,OAAO;AAAA,EACzE;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,oDAAqB,EAAE;AAGlC,QAAI,IAAK,KAAI,UAAU;AAAA,EACzB,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AD/FU;AAtBH,IAAM,gBAAY;AAAA,EACvB,CAAC,EAAE,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC/C,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,aAAa;AAAA,MAChE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,cAAc,GAAG,cAAc,QAC1D,4BAAe,WAAW;AAC5B,UAAM,EAAE,mBAAmB,eAAe,GAAG,KAAK,IAAI,aAAa;AAAA,MACjE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,UAAU;AAErE,WACE,4CAAC,qBAAkB,OAAO,EAAE,QAAQ,GAAG,KAAK,GAC1C;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,gBAAgB,SAAS;AAAA,QACvC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,YAAY;AAAA,QAEtC,sDAAC,6CAAY,GAAG,cAAc,GAAI,UAAS;AAAA;AAAA,IAC7C,GACF;AAAA,EAEJ;AACF;","names":["import_utils","import_react_resizable_panels","ref","rest"]}

package/dist/resizable.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   Resizable
-} from "./chunk-YFQD6ESN.mjs";
-import "./chunk-IIKCEUSE.mjs";
+} from "./chunk-3FE4GRVH.mjs";
+import "./chunk-ANRZUWU4.mjs";
 export {
   Resizable
 };

package/dist/use-resizable.d.mts

@@ -1,27 +1,31 @@
 import * as react from 'react';
 import { ForwardedRef, RefObject } from 'react';
-import { HTMLUIProps, UIPropGetter, CSSUIObject } from '@yamada-ui/core';
-import { PropGetter } from '@yamada-ui/utils';
+import { PropGetter, HTMLUIProps, HTMLUIPropsWithoutAs, CSSUIObject } from '@yamada-ui/core';
+import { Merge } from '@yamada-ui/utils';
 import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
 
-type GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps;
-type ItemPropGetter = (props?: HTMLUIProps<"div"> & PanelProps) => PanelProps;
-type TriggerPropGetter = (props?: PanelResizeHandleProps) => PanelResizeHandleProps;
-type As = {
+interface As {
     as?: keyof HTMLElementTagNameMap;
-};
-type ResizableGroupProps = Omit<Partial<PanelGroupProps>, "id" | "tagName" | "children"> & As;
-type ResizableItemProps = Omit<PanelProps, "id" | "tagName" | "children"> & As;
-type ResizableTriggerProps = Omit<PanelResizeHandleProps, "id" | "tagName" | "children"> & As;
-type ResizableStorage = PanelGroupStorage;
-type ResizableItemControl = ImperativePanelHandle;
-type ResizableContext = {
+}
+interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "id" | "tagName" | "children">, As {
+}
+interface ResizableItemProps extends Omit<PanelProps, "id" | "tagName" | "children">, As {
+}
+interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "id" | "tagName" | "children">, As {
+}
+interface ResizableStorage extends PanelGroupStorage {
+}
+interface ResizableItemControl extends ImperativePanelHandle {
+}
+interface ResizableContext {
     isDisabled: boolean;
-    styles: Record<string, CSSUIObject>;
-};
+    styles: {
+        [key: string]: CSSUIObject;
+    };
+}
 declare const ResizableProvider: react.Provider<ResizableContext>;
 declare const useResizableContext: () => ResizableContext;
-type UseResizableProps = {
+interface UseResizableProps {
     /**
      * id assigned to resizable element.
      */
@@ -63,14 +67,14 @@ type UseResizableProps = {
      * Props for resizable component.
      */
     groupProps?: ResizableGroupProps;
-};
+}
 declare const useResizable: ({ id, direction, storageKey, keyboardStep, isDisabled, onLayout, storage, ref, groupProps, ...rest }: UseResizableProps) => {
     isDisabled: boolean;
-    getContainerProps: PropGetter;
-    getGroupProps: GroupPropGetter;
+    getContainerProps: PropGetter<"div", undefined>;
+    getGroupProps: (props?: Partial<PanelGroupProps>) => PanelGroupProps;
 };
 type UseResizableReturn = ReturnType<typeof useResizable>;
-type UseResizableItemOptions = {
+interface UseResizableItemOptions {
     /**
      * id assigned to resizable item element.
      */
@@ -124,15 +128,16 @@ type UseResizableItemOptions = {
     /**
      * Props for resizable item container element.
      */
-    containerProps?: Omit<HTMLUIProps<"div">, "as"> & ResizableItemProps;
-};
-type UseResizableItemProps = Omit<HTMLUIProps<"div">, keyof UseResizableItemOptions> & UseResizableItemOptions;
+    containerProps?: Omit<HTMLUIProps, "as"> & ResizableItemProps;
+}
+interface UseResizableItemProps extends Omit<HTMLUIProps, keyof UseResizableItemOptions>, UseResizableItemOptions {
+}
 declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, containerProps, ...innerProps }: UseResizableItemProps) => {
-    getPanelProps: ItemPropGetter;
-    getItemProps: UIPropGetter;
+    getPanelProps: PropGetter<Merge<HTMLUIProps, PanelProps>, PanelProps>;
+    getItemProps: PropGetter<"div", undefined>;
 };
 type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
-type UseResizableTriggerOptions = {
+interface UseResizableTriggerOptions {
     /**
      * id assigned to resizable trigger element.
      */
@@ -151,11 +156,12 @@ type UseResizableTriggerOptions = {
      * The callback invoked when resizable trigger are dragged.
      */
     onDragging?: (isDragging: boolean) => void;
-};
-type UseResizableTriggerProps = HTMLUIProps<"div"> & ResizableTriggerProps & UseResizableTriggerOptions;
+}
+interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
+}
 declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
-    getTriggerProps: TriggerPropGetter;
-    getIconProps: UIPropGetter;
+    getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
+    getIconProps: PropGetter<"div", undefined>;
 };
 type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
 

package/dist/use-resizable.d.ts

@@ -1,27 +1,31 @@
 import * as react from 'react';
 import { ForwardedRef, RefObject } from 'react';
-import { HTMLUIProps, UIPropGetter, CSSUIObject } from '@yamada-ui/core';
-import { PropGetter } from '@yamada-ui/utils';
+import { PropGetter, HTMLUIProps, HTMLUIPropsWithoutAs, CSSUIObject } from '@yamada-ui/core';
+import { Merge } from '@yamada-ui/utils';
 import { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
 
-type GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps;
-type ItemPropGetter = (props?: HTMLUIProps<"div"> & PanelProps) => PanelProps;
-type TriggerPropGetter = (props?: PanelResizeHandleProps) => PanelResizeHandleProps;
-type As = {
+interface As {
     as?: keyof HTMLElementTagNameMap;
-};
-type ResizableGroupProps = Omit<Partial<PanelGroupProps>, "id" | "tagName" | "children"> & As;
-type ResizableItemProps = Omit<PanelProps, "id" | "tagName" | "children"> & As;
-type ResizableTriggerProps = Omit<PanelResizeHandleProps, "id" | "tagName" | "children"> & As;
-type ResizableStorage = PanelGroupStorage;
-type ResizableItemControl = ImperativePanelHandle;
-type ResizableContext = {
+}
+interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "id" | "tagName" | "children">, As {
+}
+interface ResizableItemProps extends Omit<PanelProps, "id" | "tagName" | "children">, As {
+}
+interface ResizableTriggerProps extends Omit<PanelResizeHandleProps, "id" | "tagName" | "children">, As {
+}
+interface ResizableStorage extends PanelGroupStorage {
+}
+interface ResizableItemControl extends ImperativePanelHandle {
+}
+interface ResizableContext {
     isDisabled: boolean;
-    styles: Record<string, CSSUIObject>;
-};
+    styles: {
+        [key: string]: CSSUIObject;
+    };
+}
 declare const ResizableProvider: react.Provider<ResizableContext>;
 declare const useResizableContext: () => ResizableContext;
-type UseResizableProps = {
+interface UseResizableProps {
     /**
      * id assigned to resizable element.
      */
@@ -63,14 +67,14 @@ type UseResizableProps = {
      * Props for resizable component.
      */
     groupProps?: ResizableGroupProps;
-};
+}
 declare const useResizable: ({ id, direction, storageKey, keyboardStep, isDisabled, onLayout, storage, ref, groupProps, ...rest }: UseResizableProps) => {
     isDisabled: boolean;
-    getContainerProps: PropGetter;
-    getGroupProps: GroupPropGetter;
+    getContainerProps: PropGetter<"div", undefined>;
+    getGroupProps: (props?: Partial<PanelGroupProps>) => PanelGroupProps;
 };
 type UseResizableReturn = ReturnType<typeof useResizable>;
-type UseResizableItemOptions = {
+interface UseResizableItemOptions {
     /**
      * id assigned to resizable item element.
      */
@@ -124,15 +128,16 @@ type UseResizableItemOptions = {
     /**
      * Props for resizable item container element.
      */
-    containerProps?: Omit<HTMLUIProps<"div">, "as"> & ResizableItemProps;
-};
-type UseResizableItemProps = Omit<HTMLUIProps<"div">, keyof UseResizableItemOptions> & UseResizableItemOptions;
+    containerProps?: Omit<HTMLUIProps, "as"> & ResizableItemProps;
+}
+interface UseResizableItemProps extends Omit<HTMLUIProps, keyof UseResizableItemOptions>, UseResizableItemOptions {
+}
 declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, containerProps, ...innerProps }: UseResizableItemProps) => {
-    getPanelProps: ItemPropGetter;
-    getItemProps: UIPropGetter;
+    getPanelProps: PropGetter<Merge<HTMLUIProps, PanelProps>, PanelProps>;
+    getItemProps: PropGetter<"div", undefined>;
 };
 type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
-type UseResizableTriggerOptions = {
+interface UseResizableTriggerOptions {
     /**
      * id assigned to resizable trigger element.
      */
@@ -151,11 +156,12 @@ type UseResizableTriggerOptions = {
      * The callback invoked when resizable trigger are dragged.
      */
     onDragging?: (isDragging: boolean) => void;
-};
-type UseResizableTriggerProps = HTMLUIProps<"div"> & ResizableTriggerProps & UseResizableTriggerOptions;
+}
+interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
+}
 declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
-    getTriggerProps: TriggerPropGetter;
-    getIconProps: UIPropGetter;
+    getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
+    getIconProps: PropGetter<"div", undefined>;
 };
 type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
 

package/dist/use-resizable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { PropGetter } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ntype GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps\ntype ItemPropGetter = (props?: HTMLUIProps<\"div\"> & PanelProps) => PanelProps\ntype TriggerPropGetter = (\n  props?: PanelResizeHandleProps,\n) => PanelResizeHandleProps\n\ntype As = { as?: keyof HTMLElementTagNameMap }\n\ntype ResizableGroupProps = Omit<\n  Partial<PanelGroupProps>,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\ntype ResizableItemProps = Omit<PanelProps, \"id\" | \"tagName\" | \"children\"> & As\ntype ResizableTriggerProps = Omit<\n  PanelResizeHandleProps,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\n\nexport type ResizableStorage = PanelGroupStorage\nexport type ResizableItemControl = ImperativePanelHandle\n\ntype ResizableContext = {\n  isDisabled: boolean\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport type UseResizableProps = {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps: GroupPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ntype UseResizableItemOptions = {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"as\"> & ResizableItemProps\n}\n\nexport type UseResizableItemProps = Omit<\n  HTMLUIProps<\"div\">,\n  keyof UseResizableItemOptions\n> &\n  UseResizableItemOptions\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: ItemPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ntype UseResizableTriggerOptions = {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport type UseResizableTriggerProps = HTMLUIProps<\"div\"> &\n  ResizableTriggerProps &\n  UseResizableTriggerOptions\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: TriggerPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      id,\n      tagName: as,\n      disabled: trulyDisabled,\n      onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n      ...rest,\n      \"data-active\": dataAttr(isActive),\n      style: {\n        ...props.style,\n        ...rest.style,\n        ...(trulyDisabled ? { cursor: \"default\" } : {}),\n      },\n    }),\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}
+{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ninterface As {\n  as?: keyof HTMLElementTagNameMap\n}\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"id\" | \"tagName\" | \"children\">,\n    As {}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  isDisabled: boolean\n  styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport interface UseResizableProps {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}): PanelGroupProps => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ninterface UseResizableItemOptions {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: PropGetter<\n    Merge<HTMLUIProps, PanelProps>,\n    PanelProps\n  > = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ninterface UseResizableTriggerOptions {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport interface UseResizableTriggerProps\n  extends Merge<\n      ResizableTriggerProps,\n      Omit<HTMLUIPropsWithoutAs, \"id\" | \"onBlur\" | \"onFocus\">\n    >,\n    UseResizableTriggerOptions {}\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        tagName: as,\n        disabled: trulyDisabled,\n        onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n        ...rest,\n        \"data-active\": dataAttr(isActive),\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n      }) as PanelResizeHandleProps,\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}

package/dist/use-resizable.mjs

@@ -5,7 +5,7 @@ import {
   useResizableContext,
   useResizableItem,
   useResizableTrigger
-} from "./chunk-IIKCEUSE.mjs";
+} from "./chunk-ANRZUWU4.mjs";
 export {
   ResizableProvider,
   useResizable,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/resizable",
-  "version": "1.1.12-dev-20240915031944",
+  "version": "1.1.12-dev-20240917033401",
   "description": "Yamada UI resizable component",
   "keywords": [
     "yamada",
@@ -37,9 +37,9 @@
   },
   "dependencies": {
     "react-resizable-panels": "^2.1.1",
-    "@yamada-ui/core": "1.14.1-dev-20240915031944",
-    "@yamada-ui/icon": "1.1.6-dev-20240915031944",
-    "@yamada-ui/utils": "1.5.0"
+    "@yamada-ui/core": "1.14.1-dev-20240917033401",
+    "@yamada-ui/icon": "1.1.6-dev-20240917033401",
+    "@yamada-ui/utils": "1.5.1-dev-20240917033401"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-BWGY44LK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/resizable-trigger.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef, type FC, type ReactElement } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableTrigger } from \"./use-resizable\"\n\ntype ResizableTriggerOptions = {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type ResizableTriggerProps = HTMLUIPropsWithoutAs &\n  Omit<UseResizableTriggerProps, \"ref\"> &\n  ResizableTriggerOptions\n\nexport const ResizableTrigger = forwardRef<HTMLElement, ResizableTriggerProps>(\n  ({ className, icon, children, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getTriggerProps, getIconProps } = useResizableTrigger({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { position: \"relative\", ...styles.trigger }\n\n    return (\n      <ui.div\n        as={PanelResizeHandle}\n        className={cx(\"ui-resizable__trigger\", className)}\n        __css={css}\n        {...getTriggerProps()}\n      >\n        {icon ? (\n          <ui.div\n            className=\"ui-resizable__trigger__icon\"\n            __css={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"auto\",\n              translateY: \"-50%\",\n              translateX: \"-50%\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n)\n\nResizableTrigger.displayName = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon viewBox=\"0 0 23 39\" w=\"0.5rem\" h=\"1rem\" {...rest}>\n      <path\n        d=\"M 5 0 C 7.761 0 10 2.239 10 5 C 10 7.761 7.761 10 5 10 C 2.239 10 0 7.761 0 5 C 0 2.239 2.239 0 5 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 0 C 21.761 0 24 2.239 24 5 C 24 7.761 21.761 10 19 10 C 16.239 10 14 7.761 14 5 C 14 2.239 16.239 0 19 0 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 14 C 21.761 14 24 16.239 24 19 C 24 21.761 21.761 24 19 24 C 16.239 24 14 21.761 14 19 C 14 16.239 16.239 14 19 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 14 C 7.761 14 10 16.239 10 19 C 10 21.761 7.761 24 5 24 C 2.239 24 0 21.761 0 19 C 0 16.239 2.239 14 5 14 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 5 28 C 7.761 28 10 30.239 10 33 C 10 35.761 7.761 38 5 38 C 2.239 38 0 35.761 0 33 C 0 30.239 2.239 28 5 28 Z\"\n        fill=\"currentColor\"\n      />\n\n      <path\n        d=\"M 19 28 C 21.761 28 24 30.239 24 33 C 24 35.761 21.761 38 19 38 C 16.239 38 14 35.761 14 33 C 14 30.239 16.239 28 19 28 Z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n"],"mappings":";;;;;;;AAKA,SAAS,UAAU;AAEnB,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,kBAA8C;AACvD,SAAS,yBAAyB;AA8B5B,SAOI,KAPJ;AAXC,IAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,MAAM,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC1D,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,iBAAiB,aAAa,IAAI,oBAAoB;AAAA,MAC5D;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,UAAU,YAAY,GAAG,OAAO,QAAQ;AAEnE,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG,gBAAgB;AAAA,QAEnB;AAAA,iBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,gBAAgB;AAAA,gBAChB,YAAY;AAAA,gBACZ,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,aAAa,SAAS;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEH;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAIxB,IAAM,uBAAsD,CAAC,SAAS;AAC3E,SACE,qBAAC,QAAK,SAAQ,aAAY,GAAE,UAAS,GAAE,QAAQ,GAAG,MAChD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-IIKCEUSE.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/use-resizable.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, UIPropGetter } from \"@yamada-ui/core\"\nimport type { PropGetter } from \"@yamada-ui/utils\"\nimport { createContext, dataAttr, handlerAll } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefObject } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\nimport type {\n  PanelResizeHandleProps,\n  PanelGroupProps,\n  PanelProps,\n  PanelGroupOnLayout,\n  PanelGroupStorage,\n  ImperativePanelHandle,\n} from \"react-resizable-panels\"\n\ntype GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps\ntype ItemPropGetter = (props?: HTMLUIProps<\"div\"> & PanelProps) => PanelProps\ntype TriggerPropGetter = (\n  props?: PanelResizeHandleProps,\n) => PanelResizeHandleProps\n\ntype As = { as?: keyof HTMLElementTagNameMap }\n\ntype ResizableGroupProps = Omit<\n  Partial<PanelGroupProps>,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\ntype ResizableItemProps = Omit<PanelProps, \"id\" | \"tagName\" | \"children\"> & As\ntype ResizableTriggerProps = Omit<\n  PanelResizeHandleProps,\n  \"id\" | \"tagName\" | \"children\"\n> &\n  As\n\nexport type ResizableStorage = PanelGroupStorage\nexport type ResizableItemControl = ImperativePanelHandle\n\ntype ResizableContext = {\n  isDisabled: boolean\n  styles: Record<string, CSSUIObject>\n}\n\nexport const [ResizableProvider, useResizableContext] =\n  createContext<ResizableContext>({\n    name: \"ResizableContext\",\n    errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Resizable />\"`,\n  })\n\nexport type UseResizableProps = {\n  /**\n   * id assigned to resizable element.\n   */\n  id?: string\n  /**\n   * Ref for resizable element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"horizontal\" | \"vertical\"\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n}\n\nexport const useResizable = ({\n  id,\n  direction = \"horizontal\",\n  storageKey,\n  keyboardStep,\n  isDisabled = false,\n  onLayout,\n  storage,\n  ref,\n  groupProps,\n  ...rest\n}: UseResizableProps) => {\n  id ??= useId()\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps: GroupPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        direction,\n        tagName: as,\n        autoSaveId: storageKey,\n        keyboardResizeBy: keyboardStep,\n        onLayout,\n        storage,\n        ...rest,\n      }\n    },\n    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    isDisabled,\n    getContainerProps,\n    getGroupProps,\n  }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\ntype UseResizableItemOptions = {\n  /**\n   * id assigned to resizable item element.\n   */\n  id?: string\n  /**\n   * Ref for resizable item element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: 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   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"as\"> & ResizableItemProps\n}\n\nexport type UseResizableItemProps = Omit<\n  HTMLUIProps<\"div\">,\n  keyof UseResizableItemOptions\n> &\n  UseResizableItemOptions\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  defaultSize,\n  maxSize,\n  minSize,\n  onCollapse,\n  onExpand,\n  onResize,\n  order,\n  controlRef,\n  containerProps,\n  ...innerProps\n}: UseResizableItemProps) => {\n  id ??= useId()\n\n  const getPanelProps: ItemPropGetter = useCallback(\n    (props = {}) => {\n      const { as, ...rest } = containerProps ?? {}\n\n      return {\n        ...props,\n        ref: controlRef,\n        id,\n        tagName: as,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        collapsedSize,\n        onCollapse,\n        onExpand,\n        onResize,\n        order,\n        ...(collapsible ? { \"aria-labelledby\": id } : { \"aria-label\": id }),\n        ...rest,\n      }\n    },\n    [\n      id,\n      controlRef,\n      containerProps,\n      collapsedSize,\n      collapsible,\n      defaultSize,\n      maxSize,\n      minSize,\n      onCollapse,\n      onExpand,\n      onResize,\n      order,\n    ],\n  )\n\n  const getItemProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...innerProps }),\n    [innerProps],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getPanelProps,\n    getItemProps,\n  }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\ntype UseResizableTriggerOptions = {\n  /**\n   * id assigned to resizable trigger element.\n   */\n  id?: string\n  /**\n   * Ref for resizable trigger element.\n   */\n  ref?: ForwardedRef<HTMLElement>\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * The callback invoked when resizable trigger are dragged.\n   */\n  onDragging?: (isDragging: boolean) => void\n}\n\nexport type UseResizableTriggerProps = HTMLUIProps<\"div\"> &\n  ResizableTriggerProps &\n  UseResizableTriggerOptions\n\nexport const useResizableTrigger = ({\n  id,\n  ref,\n  as,\n  disabled,\n  isDisabled,\n  onDragging,\n  ...rest\n}: UseResizableTriggerProps) => {\n  id ??= useId()\n\n  const { isDisabled: isGroupDisabled } = useResizableContext()\n  const [isActive, setIsActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || isGroupDisabled\n\n  const getTriggerProps: TriggerPropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      id,\n      tagName: as,\n      disabled: trulyDisabled,\n      onDragging: handlerAll(onDragging, (isActive) => setIsActive(isActive)),\n      ...rest,\n      \"data-active\": dataAttr(isActive),\n      style: {\n        ...props.style,\n        ...rest.style,\n        ...(trulyDisabled ? { cursor: \"default\" } : {}),\n      },\n    }),\n    [id, as, trulyDisabled, onDragging, rest, isActive],\n  )\n\n  const getIconProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(isActive),\n    }),\n    [isActive],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    // @ts-expect-error\n    if (ref) ref.current = el\n  }, [ref, id])\n\n  return {\n    getTriggerProps,\n    getIconProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["ref","rest","isActive"]}

package/dist/chunk-OC4OPFF5.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/resizable-item.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { Panel } from \"react-resizable-panels\"\nimport type { UseResizableItemProps } from \"./use-resizable\"\nimport { useResizableContext, useResizableItem } from \"./use-resizable\"\n\nconst panelProps = new Set([\"order\"])\n\nconst UIPanel = ui(Panel, { disableStyleProp: (prop) => panelProps.has(prop) })\n\ntype ResizableItemOptions = {\n  /**\n   * Ref for resizable item inner element.\n   */\n  innerRef?: ForwardedRef<HTMLDivElement>\n}\n\nexport type ResizableItemProps = Omit<UseResizableItemProps, \"ref\"> &\n  ResizableItemOptions\n\nexport const ResizableItem = forwardRef<ResizableItemProps, \"div\">(\n  (\n    {\n      className,\n      children,\n      innerRef,\n      w,\n      width,\n      minW,\n      minWidth,\n      maxW,\n      maxWidth,\n      h,\n      height,\n      minH,\n      minHeight,\n      maxH,\n      maxHeight,\n      boxSize,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { styles } = useResizableContext()\n    const { getPanelProps, getItemProps } = useResizableItem({\n      ref,\n      ...rest,\n    })\n\n    const css: CSSUIObject = { boxSize: \"100%\", ...styles.item }\n\n    return (\n      <UIPanel\n        {...getPanelProps({\n          w,\n          width,\n          minW,\n          minWidth,\n          maxW,\n          maxWidth,\n          h,\n          height,\n          minH,\n          minHeight,\n          maxH,\n          maxHeight,\n          boxSize,\n        })}\n      >\n        <ui.div\n          className={cx(\"ui-resizable__item\", className)}\n          __css={css}\n          {...getItemProps({}, innerRef)}\n        >\n          {children}\n        </ui.div>\n      </UIPanel>\n    )\n  },\n)\n"],"mappings":";;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAEnB,SAAS,aAAa;AAmEd;AA/DR,IAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,CAAC;AAEpC,IAAM,UAAU,GAAG,OAAO,EAAE,kBAAkB,CAAC,SAAS,WAAW,IAAI,IAAI,EAAE,CAAC;AAYvE,IAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,oBAAoB;AACvC,UAAM,EAAE,eAAe,aAAa,IAAI,iBAAiB;AAAA,MACvD;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,SAAS,QAAQ,GAAG,OAAO,KAAK;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QAED;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAW,GAAG,sBAAsB,SAAS;AAAA,YAC7C,OAAO;AAAA,YACN,GAAG,aAAa,CAAC,GAAG,QAAQ;AAAA,YAE5B;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/chunk-YFQD6ESN.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/resizable.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ForwardedRef } from \"react\"\nimport { PanelGroup } from \"react-resizable-panels\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport { ResizableProvider, useResizable } from \"./use-resizable\"\n\ntype ResizableOptions = {\n  /**\n   * Ref for resizable container element.\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>\n}\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see Docs https://yamada-ui.com/components/data-display/resizable\n */\nexport type ResizableProps = Omit<HTMLUIProps<\"div\">, \"direction\"> &\n  ThemeProps<\"Resizable\"> &\n  Omit<UseResizableProps, \"ref\"> &\n  ResizableOptions\n\nexport const Resizable = forwardRef<ResizableProps, \"div\">(\n  ({ direction = \"horizontal\", ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"Resizable\", {\n      direction,\n      ...props,\n    })\n    const { className, children, containerRef, ...computedProps } =\n      omitThemeProps(mergedProps)\n    const { getContainerProps, getGroupProps, ...rest } = useResizable({\n      ref,\n      ...computedProps,\n    })\n\n    const css: CSSUIObject = { w: \"100%\", h: \"100%\", ...styles.container }\n\n    return (\n      <ResizableProvider value={{ styles, ...rest }}>\n        <ui.div\n          className={cx(\"ui-resizable\", className)}\n          __css={css}\n          {...getContainerProps({}, containerRef)}\n        >\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </ui.div>\n      </ResizableProvider>\n    )\n  },\n)\n"],"mappings":";;;;;;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AA2CjB;AAtBH,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,YAAY,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC/C,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,aAAa;AAAA,MAChE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,cAAc,GAAG,cAAc,IAC1D,eAAe,WAAW;AAC5B,UAAM,EAAE,mBAAmB,eAAe,GAAG,KAAK,IAAI,aAAa;AAAA,MACjE;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAED,UAAM,MAAmB,EAAE,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,UAAU;AAErE,WACE,oBAAC,qBAAkB,OAAO,EAAE,QAAQ,GAAG,KAAK,GAC1C;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,gBAAgB,SAAS;AAAA,QACvC,OAAO;AAAA,QACN,GAAG,kBAAkB,CAAC,GAAG,YAAY;AAAA,QAEtC,8BAAC,cAAY,GAAG,cAAc,GAAI,UAAS;AAAA;AAAA,IAC7C,GACF;AAAA,EAEJ;AACF;","names":[]}