@yamada-ui/resizable 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/resizable
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/resizable
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/resizable
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/resizable
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](./CONTRIBUTING.md) to assist you.
+
+## License
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/chunk-DVZSQNDW.mjs

@@ -0,0 +1,185 @@
+// src/use-resizable.ts
+import { createContext, dataAttr, handlerAll } from "@yamada-ui/utils";
+import { useCallback, useEffect, useId, useState } from "react";
+import {
+  getPanelElement,
+  getPanelGroupElement,
+  getResizeHandleElement
+} from "react-resizable-panels";
+var [ResizableProvider, useResizableContext] = 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 = useId();
+  const getContainerProps = useCallback(
+    (props = {}, ref2 = null) => ({ ...props, ref: ref2, ...rest }),
+    [rest]
+  );
+  const getGroupProps = 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]
+  );
+  useEffect(() => {
+    if (!id)
+      return;
+    const el = getPanelGroupElement(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    isDisabled,
+    getContainerProps,
+    getGroupProps
+  };
+};
+var useResizableItem = ({
+  id,
+  ref,
+  collapsedSize,
+  collapsible,
+  defaultSize,
+  maxSize,
+  minSize,
+  onCollapse,
+  onExpand,
+  onResize,
+  order,
+  controlRef,
+  itemProps,
+  ...innerProps
+}) => {
+  id != null ? id : id = useId();
+  const getPanelProps = useCallback(
+    (props = {}) => {
+      const { as, ...rest } = itemProps != null ? itemProps : {};
+      return {
+        ...props,
+        ref: controlRef,
+        id,
+        tagName: as,
+        collapsible,
+        defaultSize,
+        maxSize,
+        minSize,
+        collapsedSize,
+        onCollapse,
+        onExpand,
+        onResize,
+        order,
+        ...rest
+      };
+    },
+    [
+      id,
+      controlRef,
+      itemProps,
+      collapsedSize,
+      collapsible,
+      defaultSize,
+      maxSize,
+      minSize,
+      onCollapse,
+      onExpand,
+      onResize,
+      order
+    ]
+  );
+  const getItemProps = useCallback(
+    (props = {}, ref2 = null) => ({ ...props, ref: ref2, ...innerProps }),
+    [innerProps]
+  );
+  useEffect(() => {
+    if (!id)
+      return;
+    const el = getPanelElement(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    getPanelProps,
+    getItemProps
+  };
+};
+var useResizableTrigger = ({
+  id,
+  ref,
+  as,
+  disabled,
+  isDisabled,
+  onDragging,
+  ...rest
+}) => {
+  id != null ? id : id = useId();
+  const { isDisabled: isGroupDisabled } = useResizableContext();
+  const [isActive, setIsActive] = useState(false);
+  const trulyDisabled = disabled || isDisabled || isGroupDisabled;
+  const getTriggerProps = useCallback(
+    (props = {}) => ({
+      ...props,
+      id,
+      tagName: as,
+      disabled: trulyDisabled,
+      onDragging: handlerAll(onDragging, (isActive2) => setIsActive(isActive2)),
+      ...rest,
+      "data-active": dataAttr(isActive),
+      style: {
+        ...props.style,
+        ...rest.style,
+        ...trulyDisabled ? { cursor: "default" } : {}
+      }
+    }),
+    [id, as, trulyDisabled, onDragging, rest, isActive]
+  );
+  const getIconProps = useCallback(
+    (props = {}, ref2 = null) => ({
+      ...props,
+      ref: ref2,
+      "data-active": dataAttr(isActive)
+    }),
+    [isActive]
+  );
+  useEffect(() => {
+    if (!id)
+      return;
+    const el = getResizeHandleElement(id);
+    if (ref)
+      ref.current = el;
+  }, [ref, id]);
+  return {
+    getTriggerProps,
+    getIconProps
+  };
+};
+
+export {
+  ResizableProvider,
+  useResizableContext,
+  useResizable,
+  useResizableItem,
+  useResizableTrigger
+};

package/dist/chunk-OSM43TND.mjs

@@ -0,0 +1,42 @@
+import {
+  ResizableProvider,
+  useResizable
+} from "./chunk-DVZSQNDW.mjs";
+
+// src/resizable.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { PanelGroup } from "react-resizable-panels";
+import { jsx } from "react/jsx-runtime";
+var Resizable = forwardRef(
+  ({ direction = "horizontal", ...props }, ref) => {
+    const [styles, mergedProps] = useMultiComponentStyle("Resizable", {
+      direction,
+      ...props
+    });
+    const { className, children, containerRef, ...computedProps } = omitThemeProps(mergedProps);
+    const { getContainerProps, getGroupProps, ...rest } = useResizable({
+      ref,
+      ...computedProps
+    });
+    const css = { w: "full", h: "full", ...styles.container };
+    return /* @__PURE__ */ jsx(ResizableProvider, { value: { styles, ...rest }, children: /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        className: cx("ui-resizable", className),
+        __css: css,
+        ...getContainerProps({}, containerRef),
+        children: /* @__PURE__ */ jsx(PanelGroup, { ...getGroupProps(), children })
+      }
+    ) });
+  }
+);
+
+export {
+  Resizable
+};

package/dist/chunk-PA5IMAOA.mjs

@@ -0,0 +1,33 @@
+import {
+  useResizableContext,
+  useResizableItem
+} from "./chunk-DVZSQNDW.mjs";
+
+// src/resizable-item.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { Panel } from "react-resizable-panels";
+import { jsx } from "react/jsx-runtime";
+var ResizableItem = forwardRef(
+  ({ className, children, innerRef, ...rest }, ref) => {
+    const { styles } = useResizableContext();
+    const { getPanelProps, getItemProps } = useResizableItem({
+      ref,
+      ...rest
+    });
+    const css = { boxSize: "full", ...styles.item };
+    return /* @__PURE__ */ jsx(Panel, { ...getPanelProps(), children: /* @__PURE__ */ jsx(
+      ui.div,
+      {
+        className: cx("ui-resizable__item", className),
+        __css: css,
+        ...getItemProps({}, innerRef),
+        children
+      }
+    ) });
+  }
+);
+
+export {
+  ResizableItem
+};

package/dist/chunk-VSORTT66.mjs

@@ -0,0 +1,104 @@
+import {
+  useResizableContext,
+  useResizableTrigger
+} from "./chunk-DVZSQNDW.mjs";
+
+// src/resizable-trigger.tsx
+import { ui, forwardRef } from "@yamada-ui/core";
+import { Icon } from "@yamada-ui/icon";
+import { cx } from "@yamada-ui/utils";
+import { PanelResizeHandle } from "react-resizable-panels";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ResizableTrigger = forwardRef(
+  ({ className, icon, children, iconProps, ...rest }, ref) => {
+    const { styles } = useResizableContext();
+    const { getTriggerProps, getIconProps } = useResizableTrigger({
+      ref,
+      ...rest
+    });
+    const css = { position: "relative", ...styles.trigger };
+    return /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        as: PanelResizeHandle,
+        className: cx("ui-resizable__trigger", className),
+        __css: css,
+        ...getTriggerProps(),
+        children: [
+          icon ? /* @__PURE__ */ jsx(
+            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__ */ jsxs(Icon, { viewBox: "0 0 23 39", w: "2", h: "4", ...rest, children: [
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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"
+      }
+    )
+  ] });
+};
+
+export {
+  ResizableTrigger,
+  ResizableTriggerIcon
+};

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+export { Resizable, ResizableProps } from './resizable.mjs';
+export { ResizableItem, ResizableItemProps } from './resizable-item.mjs';
+export { ResizableTrigger, ResizableTriggerIcon, ResizableTriggerIconProps, ResizableTriggerProps } from './resizable-trigger.mjs';
+export { ResizableItemControl, ResizableStorage } from './use-resizable.mjs';
+import '@yamada-ui/core';
+import 'react';
+import '@yamada-ui/icon';
+import '@yamada-ui/utils';
+import 'react-resizable-panels';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Resizable, ResizableProps } from './resizable.js';
+export { ResizableItem, ResizableItemProps } from './resizable-item.js';
+export { ResizableTrigger, ResizableTriggerIcon, ResizableTriggerIconProps, ResizableTriggerProps } from './resizable-trigger.js';
+export { ResizableItemControl, ResizableStorage } from './use-resizable.js';
+import '@yamada-ui/core';
+import 'react';
+import '@yamada-ui/icon';
+import '@yamada-ui/utils';
+import 'react-resizable-panels';