@yamada-ui/resizable 1.0.0

package/dist/resizable-trigger.js

@@ -0,0 +1,185 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/resizable-trigger.tsx
+var resizable_trigger_exports = {};
+__export(resizable_trigger_exports, {
+  ResizableTrigger: () => ResizableTrigger,
+  ResizableTriggerIcon: () => ResizableTriggerIcon
+});
+module.exports = __toCommonJS(resizable_trigger_exports);
+var import_core = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react_resizable_panels2 = require("react-resizable-panels");
+
+// src/use-resizable.ts
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_react_resizable_panels = require("react-resizable-panels");
+var [ResizableProvider, useResizableContext] = (0, import_utils.createContext)({
+  name: "ResizableContext",
+  errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in "<Resizable />"`
+});
+var useResizableTrigger = ({
+  id,
+  ref,
+  as,
+  disabled,
+  isDisabled,
+  onDragging,
+  ...rest
+}) => {
+  id != null ? id : id = (0, import_react.useId)();
+  const { isDisabled: isGroupDisabled } = useResizableContext();
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const trulyDisabled = disabled || isDisabled || isGroupDisabled;
+  const getTriggerProps = (0, import_react.useCallback)(
+    (props = {}) => ({
+      ...props,
+      id,
+      tagName: as,
+      disabled: trulyDisabled,
+      onDragging: (0, import_utils.handlerAll)(onDragging, (isActive2) => setIsActive(isActive2)),
+      ...rest,
+      "data-active": (0, import_utils.dataAttr)(isActive),
+      style: {
+        ...props.style,
+        ...rest.style,
+        ...trulyDisabled ? { cursor: "default" } : {}
+      }
+    }),
+    [id, as, trulyDisabled, onDragging, rest, isActive]
+  );
+  const getIconProps = (0, import_react.useCallback)(
+    (props = {}, ref2 = null) => ({
+      ...props,
+      ref: ref2,
+      "data-active": (0, import_utils.dataAttr)(isActive)
+    }),
+    [isActive]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!id)
+      return;
+    const el = (0, import_react_resizable_panels.getResizeHandleElement)(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    getTriggerProps,
+    getIconProps
+  };
+};
+
+// src/resizable-trigger.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ResizableTrigger = (0, import_core.forwardRef)(
+  ({ className, icon, children, iconProps, ...rest }, ref) => {
+    const { styles } = useResizableContext();
+    const { getTriggerProps, getIconProps } = useResizableTrigger({
+      ref,
+      ...rest
+    });
+    const css = { position: "relative", ...styles.trigger };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.ui.div,
+      {
+        as: import_react_resizable_panels2.PanelResizeHandle,
+        className: (0, import_utils2.cx)("ui-resizable__trigger", className),
+        __css: css,
+        ...getTriggerProps(),
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core.ui.div,
+            {
+              className: "ui-resizable__trigger__icon",
+              __css: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "auto",
+                translateY: "-50%",
+                translateX: "-50%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                ...styles.icon
+              },
+              ...getIconProps(iconProps),
+              children: icon
+            }
+          ) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+var ResizableTriggerIcon = (rest) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_icon.Icon, { viewBox: "0 0 23 39", w: "2", h: "4", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        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",
+        fill: "currentColor"
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ResizableTrigger,
+  ResizableTriggerIcon
+});

package/dist/resizable-trigger.mjs

@@ -0,0 +1,9 @@
+import {
+  ResizableTrigger,
+  ResizableTriggerIcon
+} from "./chunk-VSORTT66.mjs";
+import "./chunk-DVZSQNDW.mjs";
+export {
+  ResizableTrigger,
+  ResizableTriggerIcon
+};

package/dist/resizable.d.mts

@@ -0,0 +1,22 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { ForwardedRef } from 'react';
+import { UseResizableProps } from './use-resizable.mjs';
+import '@yamada-ui/utils';
+import 'react-resizable-panels';
+
+type 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;
+declare const Resizable: _yamada_ui_core.Component<"div", ResizableProps>;
+
+export { Resizable, type ResizableProps };

package/dist/resizable.d.ts

@@ -0,0 +1,22 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import { ForwardedRef } from 'react';
+import { UseResizableProps } from './use-resizable.js';
+import '@yamada-ui/utils';
+import 'react-resizable-panels';
+
+type 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;
+declare const Resizable: _yamada_ui_core.Component<"div", ResizableProps>;
+
+export { Resizable, type ResizableProps };

package/dist/resizable.js

@@ -0,0 +1,114 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/resizable.tsx
+var resizable_exports = {};
+__export(resizable_exports, {
+  Resizable: () => Resizable
+});
+module.exports = __toCommonJS(resizable_exports);
+var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react_resizable_panels2 = require("react-resizable-panels");
+
+// src/use-resizable.ts
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_react_resizable_panels = require("react-resizable-panels");
+var [ResizableProvider, useResizableContext] = (0, import_utils.createContext)({
+  name: "ResizableContext",
+  errorMessage: `useResizableContext returned is 'undefined'. Seems you forgot to wrap the components in "<Resizable />"`
+});
+var useResizable = ({
+  id,
+  direction = "horizontal",
+  storageKey,
+  keyboardStep,
+  isDisabled = false,
+  onLayout,
+  storage,
+  ref,
+  groupProps,
+  ...rest
+}) => {
+  id != null ? id : id = (0, import_react.useId)();
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref2 = null) => ({ ...props, ref: ref2, ...rest }),
+    [rest]
+  );
+  const getGroupProps = (0, import_react.useCallback)(
+    (props = {}) => {
+      const { as, ...rest2 } = groupProps != null ? groupProps : {};
+      return {
+        ...props,
+        id,
+        direction,
+        tagName: as,
+        autoSaveId: storageKey,
+        keyboardResizeBy: keyboardStep,
+        onLayout,
+        storage,
+        ...rest2
+      };
+    },
+    [id, direction, groupProps, storageKey, keyboardStep, onLayout, storage]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!id)
+      return;
+    const el = (0, import_react_resizable_panels.getPanelGroupElement)(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    isDisabled,
+    getContainerProps,
+    getGroupProps
+  };
+};
+
+// src/resizable.tsx
+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", {
+      direction,
+      ...props
+    });
+    const { className, children, containerRef, ...computedProps } = (0, import_core.omitThemeProps)(mergedProps);
+    const { getContainerProps, getGroupProps, ...rest } = useResizable({
+      ref,
+      ...computedProps
+    });
+    const css = { w: "full", h: "full", ...styles.container };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.ui.div,
+      {
+        className: (0, import_utils2.cx)("ui-resizable", className),
+        __css: css,
+        ...getContainerProps({}, containerRef),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels2.PanelGroup, { ...getGroupProps(), children })
+      }
+    ) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Resizable
+});

package/dist/resizable.mjs

@@ -0,0 +1,7 @@
+import {
+  Resizable
+} from "./chunk-OSM43TND.mjs";
+import "./chunk-DVZSQNDW.mjs";
+export {
+  Resizable
+};

package/dist/use-resizable.d.mts

@@ -0,0 +1,162 @@
+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 { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
+
+type GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps;
+type ItemPropGetter = (props?: PanelProps) => PanelProps;
+type TriggerPropGetter = (props?: PanelResizeHandleProps) => PanelResizeHandleProps;
+type As = {
+    as?: keyof HTMLElementTagNameMap;
+};
+type ResizableGroupProps = Omit<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 = {
+    isDisabled: boolean;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ResizableProvider: react.Provider<ResizableContext>;
+declare const useResizableContext: () => ResizableContext;
+type UseResizableProps = {
+    /**
+     * id assigned to resizable element.
+     */
+    id?: string;
+    /**
+     * Ref for resizable element.
+     */
+    ref?: ForwardedRef<HTMLElement>;
+    /**
+     * The direction of the resizable.
+     *
+     * @default "horizontal"
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * If `true`, the resizable trigger will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Unit to resize by keyboard operation.
+     *
+     * @default 10
+     */
+    keyboardStep?: number;
+    /**
+     * Key of value saved in storage.
+     * By default, it is saved to `local storage`.
+     */
+    storageKey?: string;
+    /**
+     * A callback that gets and sets a value in custom storage.
+     */
+    storage?: PanelGroupStorage;
+    /**
+     * The callback invoked when resizable items are resized.
+     */
+    onLayout?: PanelGroupOnLayout;
+    /**
+     * 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;
+};
+type UseResizableReturn = ReturnType<typeof useResizable>;
+type UseResizableItemOptions = {
+    /**
+     * id assigned to resizable item element.
+     */
+    id?: string;
+    /**
+     * Ref for resizable item element.
+     */
+    ref?: ForwardedRef<HTMLElement>;
+    /**
+     * If `true`, the resizable item can be collapsed.
+     *
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The collapsed size of the resizable item.
+     */
+    collapsedSize?: number;
+    /**
+     * The initial size of the resizable item.
+     */
+    defaultSize?: number;
+    /**
+     * The minimum allowed value of the resizable item.
+     */
+    minSize?: number;
+    /**
+     * The maximum allowed value of the resizable item.
+     */
+    maxSize?: number;
+    /**
+     * The callback invoked when resizable item are collapsed.
+     */
+    onCollapse?: () => void;
+    /**
+     * The callback invoked when resizable item are expanded.
+     */
+    onExpand?: () => void;
+    /**
+     * The callback invoked when resizable item are resized.
+     */
+    onResize?: (size: number, prevSize: number | undefined) => void;
+    /**
+     * Order for the resizable item.
+     */
+    order?: number;
+    /**
+     * Ref of the resizable item callback.
+     */
+    controlRef?: RefObject<ResizableItemControl>;
+    /**
+     * Props for resizable item component.
+     */
+    itemProps?: ResizableItemProps;
+};
+type UseResizableItemProps = Omit<HTMLUIProps<"div">, keyof UseResizableItemOptions> & UseResizableItemOptions;
+declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, itemProps, ...innerProps }: UseResizableItemProps) => {
+    getPanelProps: ItemPropGetter;
+    getItemProps: UIPropGetter;
+};
+type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
+type UseResizableTriggerOptions = {
+    /**
+     * id assigned to resizable trigger element.
+     */
+    id?: string;
+    /**
+     * Ref for resizable trigger element.
+     */
+    ref?: ForwardedRef<HTMLElement>;
+    /**
+     * If `true`, the resizable trigger will be disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback invoked when resizable trigger are dragged.
+     */
+    onDragging?: (isDragging: boolean) => void;
+};
+type UseResizableTriggerProps = HTMLUIProps<"div"> & ResizableTriggerProps & UseResizableTriggerOptions;
+declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
+    getTriggerProps: TriggerPropGetter;
+    getIconProps: UIPropGetter;
+};
+type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
+
+export { type ResizableItemControl, ResizableProvider, type ResizableStorage, type UseResizableItemProps, type UseResizableItemReturn, type UseResizableProps, type UseResizableReturn, type UseResizableTriggerProps, type UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger };

package/dist/use-resizable.d.ts

@@ -0,0 +1,162 @@
+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 { PanelGroupStorage, ImperativePanelHandle, PanelGroupOnLayout, PanelGroupProps, PanelProps, PanelResizeHandleProps } from 'react-resizable-panels';
+
+type GroupPropGetter = (props?: Partial<PanelGroupProps>) => PanelGroupProps;
+type ItemPropGetter = (props?: PanelProps) => PanelProps;
+type TriggerPropGetter = (props?: PanelResizeHandleProps) => PanelResizeHandleProps;
+type As = {
+    as?: keyof HTMLElementTagNameMap;
+};
+type ResizableGroupProps = Omit<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 = {
+    isDisabled: boolean;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ResizableProvider: react.Provider<ResizableContext>;
+declare const useResizableContext: () => ResizableContext;
+type UseResizableProps = {
+    /**
+     * id assigned to resizable element.
+     */
+    id?: string;
+    /**
+     * Ref for resizable element.
+     */
+    ref?: ForwardedRef<HTMLElement>;
+    /**
+     * The direction of the resizable.
+     *
+     * @default "horizontal"
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * If `true`, the resizable trigger will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Unit to resize by keyboard operation.
+     *
+     * @default 10
+     */
+    keyboardStep?: number;
+    /**
+     * Key of value saved in storage.
+     * By default, it is saved to `local storage`.
+     */
+    storageKey?: string;
+    /**
+     * A callback that gets and sets a value in custom storage.
+     */
+    storage?: PanelGroupStorage;
+    /**
+     * The callback invoked when resizable items are resized.
+     */
+    onLayout?: PanelGroupOnLayout;
+    /**
+     * 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;
+};
+type UseResizableReturn = ReturnType<typeof useResizable>;
+type UseResizableItemOptions = {
+    /**
+     * id assigned to resizable item element.
+     */
+    id?: string;
+    /**
+     * Ref for resizable item element.
+     */
+    ref?: ForwardedRef<HTMLElement>;
+    /**
+     * If `true`, the resizable item can be collapsed.
+     *
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * The collapsed size of the resizable item.
+     */
+    collapsedSize?: number;
+    /**
+     * The initial size of the resizable item.
+     */
+    defaultSize?: number;
+    /**
+     * The minimum allowed value of the resizable item.
+     */
+    minSize?: number;
+    /**
+     * The maximum allowed value of the resizable item.
+     */
+    maxSize?: number;
+    /**
+     * The callback invoked when resizable item are collapsed.
+     */
+    onCollapse?: () => void;
+    /**
+     * The callback invoked when resizable item are expanded.
+     */
+    onExpand?: () => void;
+    /**
+     * The callback invoked when resizable item are resized.
+     */
+    onResize?: (size: number, prevSize: number | undefined) => void;
+    /**
+     * Order for the resizable item.
+     */
+    order?: number;
+    /**
+     * Ref of the resizable item callback.
+     */
+    controlRef?: RefObject<ResizableItemControl>;
+    /**
+     * Props for resizable item component.
+     */
+    itemProps?: ResizableItemProps;
+};
+type UseResizableItemProps = Omit<HTMLUIProps<"div">, keyof UseResizableItemOptions> & UseResizableItemOptions;
+declare const useResizableItem: ({ id, ref, collapsedSize, collapsible, defaultSize, maxSize, minSize, onCollapse, onExpand, onResize, order, controlRef, itemProps, ...innerProps }: UseResizableItemProps) => {
+    getPanelProps: ItemPropGetter;
+    getItemProps: UIPropGetter;
+};
+type UseResizableItemReturn = ReturnType<typeof useResizableItem>;
+type UseResizableTriggerOptions = {
+    /**
+     * id assigned to resizable trigger element.
+     */
+    id?: string;
+    /**
+     * Ref for resizable trigger element.
+     */
+    ref?: ForwardedRef<HTMLElement>;
+    /**
+     * If `true`, the resizable trigger will be disabled.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback invoked when resizable trigger are dragged.
+     */
+    onDragging?: (isDragging: boolean) => void;
+};
+type UseResizableTriggerProps = HTMLUIProps<"div"> & ResizableTriggerProps & UseResizableTriggerOptions;
+declare const useResizableTrigger: ({ id, ref, as, disabled, isDisabled, onDragging, ...rest }: UseResizableTriggerProps) => {
+    getTriggerProps: TriggerPropGetter;
+    getIconProps: UIPropGetter;
+};
+type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>;
+
+export { type ResizableItemControl, ResizableProvider, type ResizableStorage, type UseResizableItemProps, type UseResizableItemReturn, type UseResizableProps, type UseResizableReturn, type UseResizableTriggerProps, type UseResizableTriggerReturn, useResizable, useResizableContext, useResizableItem, useResizableTrigger };