@yamada-ui/resizable 1.2.4-dev-20241212101624 → 1.3.0-dev-20241213204523

package/dist/resizable-trigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/resizable-trigger.tsx","../src/use-resizable.ts"],"sourcesContent":["import type {\n  ComponentArgs,\n  CSSUIObject,\n  FC,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ReactElement, RefAttributes } from \"react\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\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, children, icon, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getIconProps, getTriggerProps } = 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              alignItems: \"center\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              left: \"50%\",\n              position: \"absolute\",\n              top: \"50%\",\n              transform: \"auto\",\n              translateX: \"-50%\",\n              translateY: \"-50%\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n) as {\n  (props: RefAttributes<HTMLElement> & ResizableTriggerProps): ReactElement\n} & ComponentArgs\n\nResizableTrigger.displayName = \"ResizableTrigger\"\nResizableTrigger.__ui__ = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon h=\"1rem\" viewBox=\"0 0 23 39\" w=\"0.5rem\" {...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\nResizableTriggerIcon.__ui__ = \"ResizableTriggerIcon\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ForwardedRef,\n  MouseEvent,\n  MouseEventHandler,\n  RefObject,\n} from \"react\"\nimport type {\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isRefObject,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableDirection = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  controlRef: RefObject<ResizableGroupControl>\n  direction: ResizableDirection\n  disabled: boolean\n  styles: { [key: string]: CSSUIObject | undefined }\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   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableGroupControl>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: ResizableDirection\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @deprecated Use `Disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  controlRef: controlRefProp,\n  direction = \"horizontal\",\n  disabled = false,\n  isDisabled = false,\n  keyboardStep,\n  storage,\n  storageKey,\n  groupProps,\n  onLayout,\n  ...rest\n}: UseResizableProps) => {\n  const controlRef = useRef<ResizableGroupControl>(null)\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        ref: mergeRefs(controlRefProp, controlRef),\n        autoSaveId: storageKey,\n        direction,\n        keyboardResizeBy: keyboardStep,\n        storage,\n        tagName: as,\n        onLayout,\n        ...rest,\n      }\n    },\n    [\n      id,\n      direction,\n      groupProps,\n      controlRefProp,\n      storageKey,\n      keyboardStep,\n      onLayout,\n      storage,\n    ],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    controlRef,\n    direction,\n    disabled: disabled || 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   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  controlRef,\n  defaultSize,\n  maxSize,\n  minSize,\n  order,\n  containerProps,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...innerProps\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\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        id,\n        ref: controlRef,\n        collapsedSize,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        order,\n        tagName: as,\n        onCollapse,\n        onExpand,\n        onResize,\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    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getItemProps,\n    getPanelProps,\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  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\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  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const {\n    controlRef,\n    direction,\n    disabled: groupDisabled,\n  } = useResizableContext()\n  const [active, setActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = controlRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = layout.length\n      const size = 100 / count\n      const nextLayout = layout.map(() => size)\n\n      controlRef.current?.setLayout(nextLayout)\n    },\n    [controlRef],\n  )\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        \"aria-orientation\": direction,\n        disabled: trulyDisabled,\n        tagName: as,\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(active),\n        onDoubleClick: handlerAll(\n          rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n          onDoubleClick,\n        ),\n        onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n      }) as PanelResizeHandleProps,\n    [id, as, direction, trulyDisabled, rest, onDoubleClick, active],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(active),\n    }),\n    [active],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["import_utils","import_react","import_react_resizable_panels","active","ref"]}
+{"version":3,"sources":["../src/resizable-trigger.tsx","../src/use-resizable.ts"],"sourcesContent":["import type {\n  ComponentArgs,\n  CSSUIObject,\n  FC,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n} from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type { ReactElement, RefAttributes } from \"react\"\nimport type { UseResizableTriggerProps } from \"./use-resizable\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { PanelResizeHandle } from \"react-resizable-panels\"\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, children, icon, iconProps, ...rest }, ref) => {\n    const { styles } = useResizableContext()\n    const { getIconProps, getTriggerProps } = 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              alignItems: \"center\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              left: \"50%\",\n              position: \"absolute\",\n              top: \"50%\",\n              transform: \"auto\",\n              translateX: \"-50%\",\n              translateY: \"-50%\",\n              ...styles.icon,\n            }}\n            {...getIconProps(iconProps)}\n          >\n            {icon}\n          </ui.div>\n        ) : null}\n\n        {children}\n      </ui.div>\n    )\n  },\n) as {\n  (props: RefAttributes<HTMLElement> & ResizableTriggerProps): ReactElement\n} & ComponentArgs\n\nResizableTrigger.displayName = \"ResizableTrigger\"\nResizableTrigger.__ui__ = \"ResizableTrigger\"\n\nexport type ResizableTriggerIconProps = IconProps\n\nexport const ResizableTriggerIcon: FC<ResizableTriggerIconProps> = (rest) => {\n  return (\n    <Icon h=\"1rem\" viewBox=\"0 0 23 39\" w=\"0.5rem\" {...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\nResizableTriggerIcon.__ui__ = \"ResizableTriggerIcon\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ForwardedRef,\n  MouseEvent,\n  MouseEventHandler,\n  RefObject,\n} from \"react\"\nimport type {\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isRefObject,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableOrientation = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  controlRef: RefObject<ResizableGroupControl>\n  disabled: boolean\n  orientation: ResizableOrientation\n  styles: { [key: string]: CSSUIObject | undefined }\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   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableGroupControl>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   *\n   * @deprecated Use `orientation` instead.\n   */\n  direction?: ResizableOrientation\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @deprecated Use `Disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * The orientation of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  orientation?: ResizableOrientation\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  controlRef: controlRefProp,\n  direction = \"horizontal\",\n  isDisabled = false,\n  disabled = isDisabled,\n  keyboardStep,\n  orientation = direction,\n  storage,\n  storageKey,\n  groupProps,\n  onLayout,\n  ...rest\n}: UseResizableProps) => {\n  const controlRef = useRef<ResizableGroupControl>(null)\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        ref: mergeRefs(controlRefProp, controlRef),\n        autoSaveId: storageKey,\n        direction: orientation,\n        keyboardResizeBy: keyboardStep,\n        storage,\n        tagName: as,\n        onLayout,\n        ...rest,\n      }\n    },\n    [\n      id,\n      orientation,\n      groupProps,\n      controlRefProp,\n      storageKey,\n      keyboardStep,\n      onLayout,\n      storage,\n    ],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    controlRef,\n    disabled,\n    orientation,\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   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  controlRef,\n  defaultSize,\n  maxSize,\n  minSize,\n  order,\n  containerProps,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...innerProps\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\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        id,\n        ref: controlRef,\n        collapsedSize,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        order,\n        tagName: as,\n        onCollapse,\n        onExpand,\n        onResize,\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    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getItemProps,\n    getPanelProps,\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  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\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  isDisabled,\n  disabled = isDisabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n  const {\n    controlRef,\n    disabled: groupDisabled,\n    orientation,\n  } = useResizableContext()\n\n  id ??= uuid\n\n  const [active, setActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = controlRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = layout.length\n      const size = 100 / count\n      const nextLayout = layout.map(() => size)\n\n      controlRef.current?.setLayout(nextLayout)\n    },\n    [controlRef],\n  )\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        \"aria-orientation\": orientation,\n        disabled: trulyDisabled,\n        tagName: as,\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(active),\n        onDoubleClick: handlerAll(\n          rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n          onDoubleClick,\n        ),\n        onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n      }) as PanelResizeHandleProps,\n    [id, as, orientation, trulyDisabled, rest, onDoubleClick, active],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(active),\n    }),\n    [active],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"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","names":["import_utils","import_react","import_react_resizable_panels","active","ref"]}

package/dist/resizable-trigger.mjs

@@ -2,8 +2,8 @@
 import {
   ResizableTrigger,
   ResizableTriggerIcon
-} from "./chunk-ECNT6LJV.mjs";
-import "./chunk-G6HLTSUK.mjs";
+} from "./chunk-KGV3GLXC.mjs";
+import "./chunk-KTGBOEYI.mjs";
 export {
   ResizableTrigger,
   ResizableTriggerIcon

package/dist/resizable.js

@@ -41,9 +41,10 @@ var useResizable = ({
   ref,
   controlRef: controlRefProp,
   direction = "horizontal",
-  disabled = false,
   isDisabled = false,
+  disabled = isDisabled,
   keyboardStep,
+  orientation = direction,
   storage,
   storageKey,
   groupProps,
@@ -65,7 +66,7 @@ var useResizable = ({
         id,
         ref: (0, import_utils.mergeRefs)(controlRefProp, controlRef),
         autoSaveId: storageKey,
-        direction,
+        direction: orientation,
         keyboardResizeBy: keyboardStep,
         storage,
         tagName: as,
@@ -75,7 +76,7 @@ var useResizable = ({
     },
     [
       id,
-      direction,
+      orientation,
       groupProps,
       controlRefProp,
       storageKey,
@@ -91,8 +92,8 @@ var useResizable = ({
   }, [ref, id]);
   return {
     controlRef,
-    direction,
-    disabled: disabled || isDisabled,
+    disabled,
+    orientation,
     getContainerProps,
     getGroupProps
   };
@@ -101,9 +102,10 @@ var useResizable = ({
 // src/resizable.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Resizable = (0, import_core.forwardRef)(
-  ({ direction = "horizontal", ...props }, ref) => {
+  ({ direction = "horizontal", orientation = direction, ...props }, ref) => {
     const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Resizable", {
       direction,
+      orientation,
       ...props
     });
     const { className, children, containerRef, ...computedProps } = (0, import_core.omitThemeProps)(mergedProps);

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 type { ForwardedRef } from \"react\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { PanelGroup } from \"react-resizable-panels\"\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 = { h: \"100%\", w: \"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\nResizable.displayName = \"Resizable\"\nResizable.__ui__ = \"Resizable\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ForwardedRef,\n  MouseEvent,\n  MouseEventHandler,\n  RefObject,\n} from \"react\"\nimport type {\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isRefObject,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableDirection = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  controlRef: RefObject<ResizableGroupControl>\n  direction: ResizableDirection\n  disabled: boolean\n  styles: { [key: string]: CSSUIObject | undefined }\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   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableGroupControl>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  direction?: ResizableDirection\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @deprecated Use `Disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  controlRef: controlRefProp,\n  direction = \"horizontal\",\n  disabled = false,\n  isDisabled = false,\n  keyboardStep,\n  storage,\n  storageKey,\n  groupProps,\n  onLayout,\n  ...rest\n}: UseResizableProps) => {\n  const controlRef = useRef<ResizableGroupControl>(null)\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        ref: mergeRefs(controlRefProp, controlRef),\n        autoSaveId: storageKey,\n        direction,\n        keyboardResizeBy: keyboardStep,\n        storage,\n        tagName: as,\n        onLayout,\n        ...rest,\n      }\n    },\n    [\n      id,\n      direction,\n      groupProps,\n      controlRefProp,\n      storageKey,\n      keyboardStep,\n      onLayout,\n      storage,\n    ],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    controlRef,\n    direction,\n    disabled: disabled || 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   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  controlRef,\n  defaultSize,\n  maxSize,\n  minSize,\n  order,\n  containerProps,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...innerProps\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\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        id,\n        ref: controlRef,\n        collapsedSize,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        order,\n        tagName: as,\n        onCollapse,\n        onExpand,\n        onResize,\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    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getItemProps,\n    getPanelProps,\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  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\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  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  const {\n    controlRef,\n    direction,\n    disabled: groupDisabled,\n  } = useResizableContext()\n  const [active, setActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || isDisabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = controlRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = layout.length\n      const size = 100 / count\n      const nextLayout = layout.map(() => size)\n\n      controlRef.current?.setLayout(nextLayout)\n    },\n    [controlRef],\n  )\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        \"aria-orientation\": direction,\n        disabled: trulyDisabled,\n        tagName: as,\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(active),\n        onDoubleClick: handlerAll(\n          rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n          onDoubleClick,\n        ),\n        onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n      }) as PanelResizeHandleProps,\n    [id, as, direction, trulyDisabled, rest, onDoubleClick, active],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(active),\n    }),\n    [active],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAKO;AACP,IAAAA,gBAAmB;AACnB,IAAAC,iCAA2B;;;ACY3B,mBAMO;AACP,mBAAgE;AAChE,oCAIO;AA8BA,IAAM,CAAC,mBAAmB,mBAAmB,QAClD,4BAAgC;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAwDI,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,WAAO,oBAAM;AAEnB,yBAAO;AAEP,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,MAAM;AACxC,YAAM,EAAE,IAAI,GAAGC,MAAK,IAAI,kCAAc,CAAC;AAEvC,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA,SAAK,wBAAU,gBAAgB,UAAU;AAAA,QACzC,YAAY;AAAA,QACZ;AAAA,QACA,kBAAkB;AAAA,QAClB;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,GAAGA;AAAA,MACL;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,oDAAqB,EAAE;AAElC,YAAI,0BAAY,GAAG,EAAG,KAAI,UAAU;AAAA,EACtC,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACF;;;AD3IU;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;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","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 type { ForwardedRef } from \"react\"\nimport type { UseResizableProps } from \"./use-resizable\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { PanelGroup } from \"react-resizable-panels\"\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\", orientation = direction, ...props }, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\"Resizable\", {\n      direction,\n      orientation,\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 = { h: \"100%\", w: \"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\nResizable.displayName = \"Resizable\"\nResizable.__ui__ = \"Resizable\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  HTMLUIPropsWithoutAs,\n  PropGetter,\n} from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ForwardedRef,\n  MouseEvent,\n  MouseEventHandler,\n  RefObject,\n} from \"react\"\nimport type {\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  PanelGroupOnLayout,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n} from \"react-resizable-panels\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isRefObject,\n  mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n  getPanelElement,\n  getPanelGroupElement,\n  getResizeHandleElement,\n} from \"react-resizable-panels\"\n\ntype ResizableOrientation = \"horizontal\" | \"vertical\"\n\nexport type As = keyof HTMLElementTagNameMap\n\ninterface ResizableGroupProps\n  extends Omit<Partial<PanelGroupProps>, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableItemProps\n  extends Omit<PanelProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\ninterface ResizableTriggerProps\n  extends Omit<PanelResizeHandleProps, \"children\" | \"id\" | \"tagName\"> {\n  as?: As\n}\n\nexport interface ResizableStorage extends PanelGroupStorage {}\nexport interface ResizableGroupControl extends ImperativePanelGroupHandle {}\nexport interface ResizableItemControl extends ImperativePanelHandle {}\n\ninterface ResizableContext {\n  controlRef: RefObject<ResizableGroupControl>\n  disabled: boolean\n  orientation: ResizableOrientation\n  styles: { [key: string]: CSSUIObject | undefined }\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   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableGroupControl>\n  /**\n   * The direction of the resizable.\n   *\n   * @default \"horizontal\"\n   *\n   * @deprecated Use `orientation` instead.\n   */\n  direction?: ResizableOrientation\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @deprecated Use `Disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * Unit to resize by keyboard operation.\n   *\n   * @default 10\n   */\n  keyboardStep?: number\n  /**\n   * The orientation of the resizable.\n   *\n   * @default \"horizontal\"\n   */\n  orientation?: ResizableOrientation\n  /**\n   * A callback that gets and sets a value in custom storage.\n   */\n  storage?: PanelGroupStorage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * Props for resizable component.\n   */\n  groupProps?: ResizableGroupProps\n  /**\n   * The callback invoked when resizable items are resized.\n   */\n  onLayout?: PanelGroupOnLayout\n}\n\nexport const useResizable = ({\n  id,\n  ref,\n  controlRef: controlRefProp,\n  direction = \"horizontal\",\n  isDisabled = false,\n  disabled = isDisabled,\n  keyboardStep,\n  orientation = direction,\n  storage,\n  storageKey,\n  groupProps,\n  onLayout,\n  ...rest\n}: UseResizableProps) => {\n  const controlRef = useRef<ResizableGroupControl>(null)\n  const uuid = useId()\n\n  id ??= uuid\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({ ...props, ref, ...rest }),\n    [rest],\n  )\n\n  const getGroupProps = useCallback(\n    (props: Partial<PanelGroupProps> = {}) => {\n      const { as, ...rest } = groupProps ?? {}\n\n      return {\n        ...props,\n        id,\n        ref: mergeRefs(controlRefProp, controlRef),\n        autoSaveId: storageKey,\n        direction: orientation,\n        keyboardResizeBy: keyboardStep,\n        storage,\n        tagName: as,\n        onLayout,\n        ...rest,\n      }\n    },\n    [\n      id,\n      orientation,\n      groupProps,\n      controlRefProp,\n      storageKey,\n      keyboardStep,\n      onLayout,\n      storage,\n    ],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getPanelGroupElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    controlRef,\n    disabled,\n    orientation,\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   * The collapsed size of the resizable item.\n   */\n  collapsedSize?: number\n  /**\n   * If `true`, the resizable item can be collapsed.\n   *\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Ref of the resizable item callback.\n   */\n  controlRef?: RefObject<ResizableItemControl>\n  /**\n   * The initial size of the resizable item.\n   */\n  defaultSize?: number\n  /**\n   * The maximum allowed value of the resizable item.\n   */\n  maxSize?: number\n  /**\n   * The minimum allowed value of the resizable item.\n   */\n  minSize?: number\n  /**\n   * Order for the resizable item.\n   */\n  order?: number\n  /**\n   * Props for resizable item container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"as\"> & ResizableItemProps\n  /**\n   * The callback invoked when resizable item are collapsed.\n   */\n  onCollapse?: () => void\n  /**\n   * The callback invoked when resizable item are expanded.\n   */\n  onExpand?: () => void\n  /**\n   * The callback invoked when resizable item are resized.\n   */\n  onResize?: (size: number, prevSize: number | undefined) => void\n}\n\nexport interface UseResizableItemProps\n  extends Omit<HTMLUIProps, keyof UseResizableItemOptions>,\n    UseResizableItemOptions {}\n\nexport const useResizableItem = ({\n  id,\n  ref,\n  collapsedSize,\n  collapsible,\n  controlRef,\n  defaultSize,\n  maxSize,\n  minSize,\n  order,\n  containerProps,\n  onCollapse,\n  onExpand,\n  onResize,\n  ...innerProps\n}: UseResizableItemProps) => {\n  const uuid = useId()\n\n  id ??= uuid\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        id,\n        ref: controlRef,\n        collapsedSize,\n        collapsible,\n        defaultSize,\n        maxSize,\n        minSize,\n        order,\n        tagName: as,\n        onCollapse,\n        onExpand,\n        onResize,\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    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getItemProps,\n    getPanelProps,\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  disabled?: boolean\n  /**\n   * If `true`, the resizable trigger will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\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  isDisabled,\n  disabled = isDisabled,\n  ...rest\n}: UseResizableTriggerProps) => {\n  const uuid = useId()\n  const {\n    controlRef,\n    disabled: groupDisabled,\n    orientation,\n  } = useResizableContext()\n\n  id ??= uuid\n\n  const [active, setActive] = useState<boolean>(false)\n\n  const trulyDisabled = disabled || groupDisabled\n\n  const onDoubleClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      const layout = controlRef.current?.getLayout()\n\n      if (!layout) return\n\n      const count = layout.length\n      const size = 100 / count\n      const nextLayout = layout.map(() => size)\n\n      controlRef.current?.setLayout(nextLayout)\n    },\n    [controlRef],\n  )\n\n  const getTriggerProps: PropGetter<\n    PanelResizeHandleProps,\n    PanelResizeHandleProps\n  > = useCallback(\n    (props = {}) =>\n      ({\n        ...props,\n        id,\n        \"aria-orientation\": orientation,\n        disabled: trulyDisabled,\n        tagName: as,\n        ...rest,\n        style: {\n          ...props.style,\n          ...rest.style,\n          ...(trulyDisabled ? { cursor: \"default\" } : {}),\n        },\n        \"data-active\": dataAttr(active),\n        onDoubleClick: handlerAll(\n          rest.onDoubleClick as MouseEventHandler<keyof typeof as>,\n          onDoubleClick,\n        ),\n        onDragging: handlerAll(rest.onDragging, (active) => setActive(active)),\n      }) as PanelResizeHandleProps,\n    [id, as, orientation, trulyDisabled, rest, onDoubleClick, active],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...props,\n      ref,\n      \"data-active\": dataAttr(active),\n    }),\n    [active],\n  )\n\n  useEffect(() => {\n    if (!id) return\n\n    const el = getResizeHandleElement(id)\n\n    if (isRefObject(ref)) ref.current = el\n  }, [ref, id])\n\n  return {\n    getIconProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAKO;AACP,IAAAA,gBAAmB;AACnB,IAAAC,iCAA2B;;;ACY3B,mBAMO;AACP,mBAAgE;AAChE,oCAIO;AA8BA,IAAM,CAAC,mBAAmB,mBAAmB,QAClD,4BAAgC;AAAA,EAC9B,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAgEI,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,WAAO,oBAAM;AAEnB,yBAAO;AAEP,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,MAAM;AACxC,YAAM,EAAE,IAAI,GAAGC,MAAK,IAAI,kCAAc,CAAC;AAEvC,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA,SAAK,wBAAU,gBAAgB,UAAU;AAAA,QACzC,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,kBAAkB;AAAA,QAClB;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,GAAGA;AAAA,MACL;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,GAAI;AAET,UAAM,SAAK,oDAAqB,EAAE;AAElC,YAAI,0BAAY,GAAG,EAAG,KAAI,UAAU;AAAA,EACtC,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;ADnJU;AAvBH,IAAM,gBAAY;AAAA,EACvB,CAAC,EAAE,YAAY,cAAc,cAAc,WAAW,GAAG,MAAM,GAAG,QAAQ;AACxE,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,aAAa;AAAA,MAChE;AAAA,MACA;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;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;","names":["import_utils","import_react_resizable_panels","ref","rest"]}

package/dist/resizable.mjs

@@ -1,8 +1,8 @@
 "use client"
 import {
   Resizable
-} from "./chunk-62N65DW7.mjs";
-import "./chunk-G6HLTSUK.mjs";
+} from "./chunk-VGX275YX.mjs";
+import "./chunk-KTGBOEYI.mjs";
 export {
   Resizable
 };

package/dist/use-resizable.d.mts

@@ -4,7 +4,7 @@ import { PropGetter, HTMLUIProps, HTMLUIPropsWithoutAs, CSSUIObject } from '@yam
 import { Merge } from '@yamada-ui/utils';
 import { PanelGroupStorage, ImperativePanelGroupHandle, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
 
-type ResizableDirection = "horizontal" | "vertical";
+type ResizableOrientation = "horizontal" | "vertical";
 type As = keyof HTMLElementTagNameMap;
 interface ResizableGroupProps extends Omit<Partial<PanelGroupProps>, "children" | "id" | "tagName"> {
     as?: As;
@@ -23,8 +23,8 @@ interface ResizableItemControl extends ImperativePanelHandle {
 }
 interface ResizableContext {
     controlRef: RefObject<ResizableGroupControl>;
-    direction: ResizableDirection;
     disabled: boolean;
+    orientation: ResizableOrientation;
     styles: {
         [key: string]: CSSUIObject | undefined;
     };
@@ -48,8 +48,10 @@ interface UseResizableProps {
      * The direction of the resizable.
      *
      * @default "horizontal"
+     *
+     * @deprecated Use `orientation` instead.
      */
-    direction?: ResizableDirection;
+    direction?: ResizableOrientation;
     /**
      * If `true`, the resizable trigger will be disabled.
      */
@@ -66,6 +68,12 @@ interface UseResizableProps {
      * @default 10
      */
     keyboardStep?: number;
+    /**
+     * The orientation of the resizable.
+     *
+     * @default "horizontal"
+     */
+    orientation?: ResizableOrientation;
     /**
      * A callback that gets and sets a value in custom storage.
      */
@@ -84,45 +92,41 @@ interface UseResizableProps {
      */
     onLayout?: PanelGroupOnLayout;
 }
-declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, disabled, isDisabled, keyboardStep, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
+declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, isDisabled, disabled, keyboardStep, orientation, storage, storageKey, groupProps, onLayout, ...rest }: UseResizableProps) => {
     controlRef: RefObject<ResizableGroupControl>;
-    direction: ResizableDirection;
     disabled: boolean;
+    orientation: ResizableOrientation;
     getContainerProps: PropGetter<"div", undefined>;
     getGroupProps: (props?: Partial<PanelGroupProps>) => {
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        slot?: string | undefined;
         style?: react.CSSProperties | undefined;
+        slot?: string | undefined;
         title?: string | undefined;
-        dir?: "ltr" | "rtl" | "auto" | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
         color?: string | undefined;
-        direction: "vertical" | "horizontal";
-        nonce?: string | undefined;
-        onAnimationStart?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
-        onDragStart?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
-        onDragEnd?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
-        onDrag?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        content?: string | undefined;
+        direction: "horizontal" | "vertical";
+        translate?: "yes" | "no" | undefined;
+        onResize?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
         defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
+        dir?: "auto" | "ltr" | "rtl" | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         lang?: string | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
+        nonce?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined;
-        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: react.AriaRole | undefined;
         about?: string | undefined;
-        content?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
         prefix?: string | undefined;
@@ -145,11 +149,11 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
@@ -160,36 +164,37 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;
@@ -267,7 +272,6 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
         onProgressCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onRateChange?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onRateChangeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
-        onResize?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onResizeCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onSeeked?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onSeekedCapture?: react.ReactEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -291,7 +295,9 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
         onContextMenuCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDoubleClick?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDoubleClickCapture?: MouseEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDrag?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragEnd?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragEndCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragEnter?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragEnterCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -301,6 +307,7 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
         onDragLeaveCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragOver?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragOverCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onDragStart?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDragStartCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDrop?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onDropCapture?: react.DragEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -348,6 +355,7 @@ declare const useResizable: ({ id, ref, controlRef: controlRefProp, direction, d
         onScrollCapture?: react.UIEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onWheel?: react.WheelEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onWheelCapture?: react.WheelEventHandler<keyof HTMLElementTagNameMap> | undefined;
+        onAnimationStart?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onAnimationStartCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onAnimationEnd?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
         onAnimationEndCapture?: react.AnimationEventHandler<keyof HTMLElementTagNameMap> | undefined;
@@ -459,7 +467,7 @@ interface UseResizableTriggerOptions {
 }
 interface UseResizableTriggerProps extends Merge<ResizableTriggerProps, Omit<HTMLUIPropsWithoutAs, "id" | "onBlur" | "onFocus">>, UseResizableTriggerOptions {
 }
-declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, ...rest }: UseResizableTriggerProps) => {
+declare const useResizableTrigger: ({ id, ref, as, isDisabled, disabled, ...rest }: UseResizableTriggerProps) => {
     getIconProps: PropGetter<"div", undefined>;
     getTriggerProps: PropGetter<PanelResizeHandleProps, PanelResizeHandleProps>;
 };