@oneplatformdev/ui 0.1.99-beta.17 → 0.1.99-beta.19

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.1.99-beta.19 (2026-01-07)
+
+### 🚀 Features
+
+- **Resizable:** add Storybook stories for ResizablePanelGroup and ResizablePanel components ([dc5a4b8](https://github.com/oneplatformdev/core-web/commit/dc5a4b8))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.19
+- Updated @oneplatformdev/hooks to 0.1.99-beta.19
+- Updated @oneplatformdev/tokens to 0.1.99-beta.19
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
+## 0.1.99-beta.18 (2026-01-07)
+
+### 🚀 Features
+
+- **Resizable:** replace PanelGroup and PanelResizeHandle with Group and Separator components ([4a246a8](https://github.com/oneplatformdev/core-web/commit/4a246a8))
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.18
+- Updated @oneplatformdev/hooks to 0.1.99-beta.18
+- Updated @oneplatformdev/tokens to 0.1.99-beta.18
+
+### ❤️ Thank You
+
+- Bohdan Radchenko
+
 ## 0.1.99-beta.17 (2026-01-07)
 
 ### 🚀 Features

package/Resizable/Resizable.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
-declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): import("react/jsx-runtime").JSX.Element;
 declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
-declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
+declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/Resizable/Resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/Resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAA;AAI5D,iBAAS,mBAAmB,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAWpF;AAED,iBAAS,cAAc,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAE/E;AAED,iBAAS,eAAe,CAAC,EACE,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,GAAG;IACtF,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/Resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAA;AAI5D,iBAAS,mBAAmB,CAAC,EACE,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,2CAWzF;AAED,iBAAS,cAAc,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAE/E;AAED,iBAAS,eAAe,CAAC,EACE,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/Resizable/Resizable.js

@@ -2,12 +2,12 @@ import { jsx as a } from "react/jsx-runtime";
 import { GripVerticalIcon as n } from "lucide-react";
 import * as t from "react-resizable-panels";
 import { cn as i } from "@oneplatformdev/utils";
-function f({
+function d({
   className: e,
   ...r
 }) {
   return /* @__PURE__ */ a(
-    t.Group,
+    t.PanelGroup,
     {
       "data-slot": "resizable-panel-group",
       className: i(
@@ -18,7 +18,7 @@ function f({
     }
   );
 }
-function d({
+function f({
   ...e
 }) {
   return /* @__PURE__ */ a(t.Panel, { "data-slot": "resizable-panel", ...e });
@@ -29,7 +29,7 @@ function p({
   ...l
 }) {
   return /* @__PURE__ */ a(
-    t.Separator,
+    t.PanelResizeHandle,
     {
       "data-slot": "resizable-handle",
       className: i(
@@ -43,7 +43,7 @@ function p({
 }
 export {
   p as ResizableHandle,
-  d as ResizablePanel,
-  f as ResizablePanelGroup
+  f as ResizablePanel,
+  d as ResizablePanelGroup
 };
 //# sourceMappingURL=Resizable.js.map

package/Resizable/Resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizable.js","sources":["../../src/Resizable/Resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction ResizablePanelGroup({\n                               className,\n                               ...props\n                             }: React.ComponentProps<typeof ResizablePrimitive.Group>) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n                          ...props\n                        }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n                           withHandle,\n                           className,\n                           ...props\n                         }: React.ComponentProps<typeof ResizablePrimitive.Separator> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle","GripVerticalIcon"],"mappings":";;;;AAQA,SAASA,EAAoB;AAAA,EACE,WAAAC;AAAA,EACA,GAAGC;AACL,GAA0D;AACrF,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAe;AAAA,EACE,GAAGJ;AACL,GAA0D;AAChF,2BAAQE,EAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAEA,SAASK,EAAgB;AAAA,EACE,YAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGC;AACL,GAEtB;AACD,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAM,uBACE,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAL,EAACM,GAAA,EAAiB,WAAU,WAAA,CAAW,EAAA,CACzC;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Resizable.js","sources":["../../src/Resizable/Resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction ResizablePanelGroup({\n                               className,\n                               ...props\n                             }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n  return (\n    <ResizablePrimitive.PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({\n                          ...props\n                        }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n                           withHandle,\n                           className,\n                           ...props\n                         }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.PanelResizeHandle>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle","GripVerticalIcon"],"mappings":";;;;AAQA,SAASA,EAAoB;AAAA,EACE,WAAAC;AAAA,EACA,GAAGC;AACL,GAA+D;AAC1F,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAe;AAAA,EACE,GAAGJ;AACL,GAA0D;AAChF,2BAAQE,EAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAEA,SAASK,EAAgB;AAAA,EACE,YAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGC;AACL,GAEtB;AACD,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAM,uBACE,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAL,EAACM,GAAA,EAAiB,WAAU,WAAA,CAAW,EAAA,CACzC;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/Resizable/Resizable.stories.js

@@ -0,0 +1,140 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as c from "react";
+import { ResizablePanelGroup as r, ResizablePanel as l, ResizableHandle as n } from "./Resizable.js";
+const b = {
+  title: "ui/Resizable",
+  component: r,
+  parameters: {
+    layout: "fullscreen"
+  },
+  decorators: [
+    (a) => /* @__PURE__ */ e("div", { className: "p-6", children: /* @__PURE__ */ e("div", { className: "h-[420px] w-[920px] overflow-hidden rounded-xl border bg-background shadow-sm", children: /* @__PURE__ */ e(a, {}) }) })
+  ]
+};
+function i({
+  label: a,
+  subtle: d
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [
+        "h-full w-full",
+        "flex items-center justify-center",
+        "text-sm font-medium",
+        "select-none",
+        d ? "bg-muted/30" : "bg-muted/50"
+      ].join(" "),
+      children: a
+    }
+  );
+}
+const z = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 50, children: /* @__PURE__ */ e(i, { label: "Left (50%)" }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 50, children: /* @__PURE__ */ e(i, { label: "Right (50%)", subtle: !0 }) })
+  ] })
+}, f = {
+  render: () => /* @__PURE__ */ t(r, { direction: "vertical", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 60, children: /* @__PURE__ */ e(i, { label: "Top (60%)" }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 40, children: /* @__PURE__ */ e(i, { label: "Bottom (40%)", subtle: !0 }) })
+  ] })
+}, S = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 35, children: /* @__PURE__ */ e(i, { label: "Sidebar (35%)" }) }),
+    /* @__PURE__ */ e(n, {}),
+    /* @__PURE__ */ e(l, { defaultSize: 65, children: /* @__PURE__ */ e(i, { label: "Content (65%)", subtle: !0 }) })
+  ] })
+}, m = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 33, children: /* @__PURE__ */ e(i, { label: "A (33%)" }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 34, children: /* @__PURE__ */ e(i, { label: "B (34%)", subtle: !0 }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 33, children: /* @__PURE__ */ e(i, { label: "C (33%)" }) })
+  ] })
+}, p = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 20, minSize: 12, children: /* @__PURE__ */ e(i, { label: "Nav (20%)" }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 55, minSize: 30, children: /* @__PURE__ */ e(i, { label: "Main (55%)", subtle: !0 }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 25, minSize: 12, children: /* @__PURE__ */ e(i, { label: "Details (25%)" }) })
+  ] })
+}, x = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 30, minSize: 20, maxSize: 40, children: /* @__PURE__ */ e(i, { label: "Left (min 20 / max 40)" }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 70, minSize: 60, maxSize: 80, children: /* @__PURE__ */ e(i, { label: "Right (min 60 / max 80)", subtle: !0 }) })
+  ] })
+}, w = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        defaultSize: 22,
+        minSize: 12,
+        collapsible: !0,
+        collapsedSize: 4,
+        children: /* @__PURE__ */ e(i, { label: "Sidebar (collapsible)" })
+      }
+    ),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 78, minSize: 50, children: /* @__PURE__ */ e(i, { label: "Main content", subtle: !0 }) })
+  ] })
+}, H = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 50, children: /* @__PURE__ */ e(i, { label: "Left (fixed)" }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0, disabled: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 50, children: /* @__PURE__ */ e(i, { label: "Right (fixed)", subtle: !0 }) })
+  ] })
+}, g = {
+  render: () => /* @__PURE__ */ t(r, { direction: "horizontal", children: [
+    /* @__PURE__ */ e(l, { defaultSize: 45, minSize: 25, children: /* @__PURE__ */ t(r, { direction: "vertical", children: [
+      /* @__PURE__ */ e(l, { defaultSize: 55, minSize: 20, children: /* @__PURE__ */ e(i, { label: "Left / Top" }) }),
+      /* @__PURE__ */ e(n, { withHandle: !0 }),
+      /* @__PURE__ */ e(l, { defaultSize: 45, minSize: 20, children: /* @__PURE__ */ e(i, { label: "Left / Bottom", subtle: !0 }) })
+    ] }) }),
+    /* @__PURE__ */ e(n, { withHandle: !0 }),
+    /* @__PURE__ */ e(l, { defaultSize: 55, minSize: 30, children: /* @__PURE__ */ e(i, { label: "Right (single)", subtle: !0 }) })
+  ] })
+}, y = {
+  render: () => /* @__PURE__ */ e(() => {
+    const [d, u] = c.useState([]);
+    return /* @__PURE__ */ t("div", { className: "h-full w-full", children: [
+      /* @__PURE__ */ t("div", { className: "border-b px-3 py-2 text-xs text-muted-foreground", children: [
+        "Layout:",
+        " ",
+        d.length ? d.map((o) => Math.round(o)).join(" / ") : "— (move handle)"
+      ] }),
+      /* @__PURE__ */ e("div", { className: "h-[calc(100%-33px)]", children: /* @__PURE__ */ t(
+        r,
+        {
+          direction: "horizontal",
+          onLayout: (o) => u(o),
+          children: [
+            /* @__PURE__ */ e(l, { defaultSize: 40, minSize: 20, children: /* @__PURE__ */ e(i, { label: "Left" }) }),
+            /* @__PURE__ */ e(n, { withHandle: !0 }),
+            /* @__PURE__ */ e(l, { defaultSize: 60, minSize: 20, children: /* @__PURE__ */ e(i, { label: "Right", subtle: !0 }) })
+          ]
+        }
+      ) })
+    ] });
+  }, {})
+};
+export {
+  w as CollapsibleSidebar,
+  H as DisabledHandle,
+  S as HandleWithoutGrip,
+  z as HorizontalTwoPanels,
+  y as LayoutDebug,
+  x as MinMaxConstraints,
+  g as NestedResizable,
+  m as ThreePanelsEqual,
+  p as ThreePanelsSidebarLayout,
+  f as VerticalTwoPanels,
+  b as default
+};
+//# sourceMappingURL=Resizable.stories.js.map

package/Resizable/Resizable.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.stories.js","sources":["../../src/Resizable/Resizable.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\"\nimport * as React from \"react\"\n\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n} from \"./Resizable\"\n\nconst meta: Meta<typeof ResizablePanelGroup> = {\n  title: \"ui/Resizable\",\n  component: ResizablePanelGroup,\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6\">\n        <div className=\"h-[420px] w-[920px] overflow-hidden rounded-xl border bg-background shadow-sm\">\n          <Story />\n        </div>\n      </div>\n    ),\n  ],\n}\nexport default meta\ntype Story = StoryObj<typeof ResizablePanelGroup>\n\nfunction PanelBox({\n                    label,\n                    subtle,\n                  }: {\n  label: string\n  subtle?: boolean\n}) {\n  return (\n    <div\n      className={[\n        \"h-full w-full\",\n        \"flex items-center justify-center\",\n        \"text-sm font-medium\",\n        \"select-none\",\n        subtle ? \"bg-muted/30\" : \"bg-muted/50\",\n      ].join(\" \")}\n    >\n      {label}\n    </div>\n  )\n}\n\n/** 1) Базовий горизонтальний спліт 50/50 */\nexport const HorizontalTwoPanels: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={50}>\n        <PanelBox label=\"Left (50%)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={50}>\n        <PanelBox label=\"Right (50%)\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 2) Вертикальний спліт 60/40 */\nexport const VerticalTwoPanels: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"vertical\">\n      <ResizablePanel defaultSize={60}>\n        <PanelBox label=\"Top (60%)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={40}>\n        <PanelBox label=\"Bottom (40%)\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 3) Без “grip” (withHandle=false) — тонкий роздільник */\nexport const HandleWithoutGrip: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={35}>\n        <PanelBox label=\"Sidebar (35%)\" />\n      </ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={65}>\n        <PanelBox label=\"Content (65%)\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 4) Три панелі рівномірно (33/34/33) */\nexport const ThreePanelsEqual: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={33}>\n        <PanelBox label=\"A (33%)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={34}>\n        <PanelBox label=\"B (34%)\" subtle />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={33}>\n        <PanelBox label=\"C (33%)\" />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 5) Три панелі з “sidebar layout” (20/55/25) */\nexport const ThreePanelsSidebarLayout: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={20} minSize={12}>\n        <PanelBox label=\"Nav (20%)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={55} minSize={30}>\n        <PanelBox label=\"Main (55%)\" subtle />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={25} minSize={12}>\n        <PanelBox label=\"Details (25%)\" />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 6) Обмеження min/max size (наочно “впирається” при ресайзі) */\nexport const MinMaxConstraints: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={30} minSize={20} maxSize={40}>\n        <PanelBox label=\"Left (min 20 / max 40)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={70} minSize={60} maxSize={80}>\n        <PanelBox label=\"Right (min 60 / max 80)\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 7) Collapsible sidebar (якщо ваш Panel підтримує collapsible/collapsedSize) */\nexport const CollapsibleSidebar: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel\n        defaultSize={22}\n        minSize={12}\n        collapsible\n        collapsedSize={4}\n      >\n        <PanelBox label=\"Sidebar (collapsible)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={78} minSize={50}>\n        <PanelBox label=\"Main content\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 8) Disabled handle (якщо Separator/Handle підтримує disabled) */\nexport const DisabledHandle: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={50}>\n        <PanelBox label=\"Left (fixed)\" />\n      </ResizablePanel>\n      <ResizableHandle withHandle disabled />\n      <ResizablePanel defaultSize={50}>\n        <PanelBox label=\"Right (fixed)\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 9) Nested split: зліва — вертикальний, справа — суцільний */\nexport const NestedResizable: Story = {\n  render: () => (\n    <ResizablePanelGroup direction=\"horizontal\">\n      <ResizablePanel defaultSize={45} minSize={25}>\n        <ResizablePanelGroup direction=\"vertical\">\n          <ResizablePanel defaultSize={55} minSize={20}>\n            <PanelBox label=\"Left / Top\" />\n          </ResizablePanel>\n          <ResizableHandle withHandle />\n          <ResizablePanel defaultSize={45} minSize={20}>\n            <PanelBox label=\"Left / Bottom\" subtle />\n          </ResizablePanel>\n        </ResizablePanelGroup>\n      </ResizablePanel>\n      <ResizableHandle withHandle />\n      <ResizablePanel defaultSize={55} minSize={30}>\n        <PanelBox label=\"Right (single)\" subtle />\n      </ResizablePanel>\n    </ResizablePanelGroup>\n  ),\n}\n\n/** 10) Debug layout: показує поточні розміри (onLayout) */\nexport const LayoutDebug: Story = {\n  render: () => {\n    const LayoutStory = () => {\n      const [layout, setLayout] = React.useState<number[]>([])\n\n      return (\n        <div className=\"h-full w-full\">\n          <div className=\"border-b px-3 py-2 text-xs text-muted-foreground\">\n            Layout:{\" \"}\n            {layout.length\n              ? layout.map((v) => Math.round(v)).join(\" / \")\n              : \"— (move handle)\"}\n          </div>\n\n          <div className=\"h-[calc(100%-33px)]\">\n            <ResizablePanelGroup\n              direction=\"horizontal\"\n              onLayout={(sizes) => setLayout(sizes)}\n            >\n              <ResizablePanel defaultSize={40} minSize={20}>\n                <PanelBox label=\"Left\" />\n              </ResizablePanel>\n              <ResizableHandle withHandle />\n              <ResizablePanel defaultSize={60} minSize={20}>\n                <PanelBox label=\"Right\" subtle />\n              </ResizablePanel>\n            </ResizablePanelGroup>\n          </div>\n        </div>\n      )\n    }\n\n    return <LayoutStory />\n  },\n}\n"],"names":["meta","ResizablePanelGroup","Story","jsx","PanelBox","label","subtle","HorizontalTwoPanels","jsxs","ResizablePanel","ResizableHandle","VerticalTwoPanels","HandleWithoutGrip","ThreePanelsEqual","ThreePanelsSidebarLayout","MinMaxConstraints","CollapsibleSidebar","DisabledHandle","NestedResizable","LayoutDebug","layout","setLayout","React","v","sizes"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.17",
+  "version": "0.1.99-beta.19",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -101,13 +101,13 @@
     "next-themes": "^0.4.6",
     "react-day-picker": "9.10.0",
     "react-dropzone": "^14.3.8",
-    "react-resizable-panels": "^4.3.0",
+    "react-resizable-panels": "^3.0.6",
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/hooks": "^0.1.99-beta.17",
-    "@oneplatformdev/tokens": "^0.1.99-beta.17",
-    "@oneplatformdev/utils": "^0.1.99-beta.17"
+    "@oneplatformdev/tokens": "^0.1.99-beta.19",
+    "@oneplatformdev/utils": "^0.1.99-beta.19",
+    "@oneplatformdev/hooks": "^0.1.99-beta.19"
   },
   "scripts": {
     "chromatic": "chromatic"