@oneplatformdev/ui 0.1.99-beta.4 → 0.1.99-beta.40

package/LoadedIcon/LoadedIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadedIcon.js","sources":["../../src/LoadedIcon/LoadedIcon.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { LoaderCircleIcon } from 'lucide-react';\nimport { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nconst loadedIconVariants = cva([], {\n  variants: {\n    size: {\n      inherit: '[&_svg]:size-inherit',\n      xs: '[&_svg]:size-3',\n      sm: '[&_svg]:size-4',\n      md: '[&_svg]:size-5',\n      lg: '[&_svg]:size-6',\n    },\n  },\n  defaultVariants: { size: 'inherit' },\n});\n\ninterface ILoadedIconProps\n\textends HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof loadedIconVariants> {\n\tloading?: boolean;\n}\n\nexport const LoadedIcon: FC<PropsWithChildren<ILoadedIconProps>> = (props) => {\n\tconst { loading, children, size = 'md', className, ...rest } = props;\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={cn(loadedIconVariants({size , className}))}\n\t\t>\n\t\t\t{loading\n\t\t\t\t? <LoaderCircleIcon className=\"animate-spin\"/>\n\t\t\t\t: children}\n\t\t</div>\n\t);\n};\n"],"names":["loadedIconVariants","cva","LoadedIcon","props","loading","children","size","className","rest","jsx","cn","LoaderCircleIcon"],"mappings":";;;;AAMA,MAAMA,IAAqBC,EAAI,IAAI;AAAA,EACjC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,MAAM,UAAA;AAC3B,CAAC,GAQYC,IAAsD,CAACC,MAAU;AAC7E,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,MAASL;AAC/D,SACC,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWE,EAAGV,EAAmB,EAAC,MAAAM,GAAO,WAAAC,EAAA,CAAU,CAAC;AAAA,MAEnD,UAAAH,IACE,gBAAAK,EAACE,GAAA,EAAiB,WAAU,gBAAc,IAC1CN;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"LoadedIcon.js","sources":["../../src/LoadedIcon/LoadedIcon.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { LoaderCircleIcon } from 'lucide-react';\nimport { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nconst loadedIconVariants = cva([\n  'relative',\n], {\n  variants: {\n    size: {\n      inherit: '[&_svg]:size-inherit',\n      xs: '[&_svg]:size-3',\n      sm: '[&_svg]:size-4',\n      md: '[&_svg]:size-5',\n      lg: '[&_svg]:size-6',\n    },\n  },\n  defaultVariants: { size: 'inherit' },\n});\n\ninterface ILoadedIconProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof loadedIconVariants> {\n  loading?: boolean;\n}\n\nexport const LoadedIcon: FC<PropsWithChildren<ILoadedIconProps>> = (props) => {\n  const { loading, children, size = 'md', className, ...rest } = props;\n  return (\n    <div\n      {...rest}\n      className={cn(loadedIconVariants({ size, className }))}\n    >\n      {loading\n        ? <LoaderCircleIcon className=\"animate-spin\"/>\n        : children}\n    </div>\n  );\n};\n"],"names":["loadedIconVariants","cva","LoadedIcon","props","loading","children","size","className","rest","jsx","cn","LoaderCircleIcon"],"mappings":";;;;AAMA,MAAMA,IAAqBC,EAAI;AAAA,EAC7B;AACF,GAAG;AAAA,EACD,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,MAAM,UAAA;AAC3B,CAAC,GAQYC,IAAsD,CAACC,MAAU;AAC5E,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,MAASL;AAC/D,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWE,EAAGV,EAAmB,EAAE,MAAAM,GAAM,WAAAC,EAAA,CAAW,CAAC;AAAA,MAEpD,UAAAH,IACG,gBAAAK,EAACE,GAAA,EAAiB,WAAU,gBAAc,IAC1CN;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/Resizable/Resizable.d.ts

@@ -1,24 +1,9 @@
+import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
-declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
-declare const ResizablePanel: import('react').ForwardRefExoticComponent<Omit<import('react').HTMLAttributes<any>, "id" | "onResize"> & {
-    className?: string;
-    collapsedSize?: number | undefined;
-    collapsible?: boolean | undefined;
-    defaultSize?: number | undefined;
-    id?: string;
-    maxSize?: number | undefined;
-    minSize?: number | undefined;
-    onCollapse?: ResizablePrimitive.PanelOnCollapse;
-    onExpand?: ResizablePrimitive.PanelOnExpand;
-    onResize?: ResizablePrimitive.PanelOnResize;
-    order?: number;
-    style?: object;
-    tagName?: keyof HTMLElementTagNameMap | undefined;
-} & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
-declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+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(props: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
     withHandle?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
 //# sourceMappingURL=Resizable.d.ts.map

package/Resizable/Resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Resizable.d.ts","sourceRoot":"","sources":["../../src/Resizable/Resizable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAA;AAI5D,QAAA,MAAM,mBAAmB,GAAI,yBAG1B,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,4CAQ5D,CAAA;AAED,QAAA,MAAM,cAAc;;;;;;;;;;;;;oBAyB47D,qBAAsB;;;4EAzBv7D,CAAA;AAE/C,QAAA,MAAM,eAAe,GAAI,qCAItB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,4CAcA,CAAA;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,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IAClG,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAwBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/Resizable/Resizable.js

@@ -1,37 +1,54 @@
-import { jsx as e } from "react/jsx-runtime";
-import { GripVertical as n } from "lucide-react";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { GripVerticalIcon as c } from "lucide-react";
 import * as t from "react-resizable-panels";
 import { cn as i } from "@oneplatformdev/utils";
-const f = ({
-  className: a,
+function u({
+  className: e,
   ...r
-}) => /* @__PURE__ */ e(
-  t.PanelGroup,
-  {
-    className: i(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      a
-    ),
-    ...r
-  }
-), d = t.Panel, p = ({
-  withHandle: a,
-  className: r,
-  ...l
-}) => /* @__PURE__ */ e(
-  t.PanelResizeHandle,
-  {
-    className: i(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 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-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      r
-    ),
-    ...l,
-    children: a && /* @__PURE__ */ e("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ e(n, { className: "h-2.5 w-2.5" }) })
-  }
-);
+}) {
+  return /* @__PURE__ */ a(
+    t.PanelGroup,
+    {
+      "data-slot": "resizable-panel-group",
+      className: i(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        e
+      ),
+      ...r
+    }
+  );
+}
+function b({
+  ...e
+}) {
+  return /* @__PURE__ */ a(t.Panel, { "data-slot": "resizable-panel", ...e });
+}
+function v(e) {
+  const {
+    withHandle: r,
+    className: l,
+    children: n,
+    ...o
+  } = e;
+  return /* @__PURE__ */ s(
+    t.PanelResizeHandle,
+    {
+      "data-slot": "resizable-handle",
+      className: i(
+        "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",
+        l
+      ),
+      ...o,
+      children: [
+        n,
+        r && /* @__PURE__ */ a("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border", children: /* @__PURE__ */ a(c, { className: "size-2.5" }) })
+      ]
+    }
+  );
+}
 export {
-  p as ResizableHandle,
-  d as ResizablePanel,
-  f as ResizablePanelGroup
+  v as ResizableHandle,
+  b as ResizablePanel,
+  u 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 { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@oneplatformdev/utils\";\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 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-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle","GripVertical"],"mappings":";;;;AAOA,MAAMA,IAAsB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC,EAAmB;AAAA,EAAnB;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,GAGII,IAAiBF,EAAmB,OAEpCG,IAAkB,CAAC;AAAA,EACvB,YAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGC;AACL,MAGE,gBAAAC;AAAA,EAACC,EAAmB;AAAA,EAAnB;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAM,uBACE,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAL,EAACM,GAAA,EAAa,WAAU,cAAA,CAAc,EAAA,CACxC;AAAA,EAAA;AAEJ;"}
+{"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(props: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) {\n  const {\n    withHandle,\n    className,\n    children,\n    ...rest\n  } = props;\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      {...rest}\n    >\n      {children}\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","children","rest","jsxs","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,EAAgBL,GAEtB;AACD,QAAM;AAAA,IACJ,YAAAM;AAAA,IACA,WAAAP;AAAA,IACA,UAAAQ;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACP,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGS;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACAD,uBACE,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAL,EAACS,GAAA,EAAiB,WAAU,WAAA,CAAW,EAAA,CACzC;AAAA,MAAA;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/Search/Search.js

@@ -5,37 +5,37 @@ import { useDebounceCallback as b } from "@oneplatformdev/hooks";
 import { cn as x } from "@oneplatformdev/utils";
 import { SearchIcon as I } from "lucide-react";
 import { LoadedIcon as N } from "../LoadedIcon/LoadedIcon.js";
-const E = (n) => {
+const L = (n) => {
   const {
     search: e,
-    onChange: s,
-    onSearch: c,
+    onChange: c,
+    onSearch: s,
     placeholder: m = "Search",
-    className: i,
-    loading: l = !1,
+    className: l,
+    loading: h = !1,
     slotProps: o,
-    name: h = "search",
+    name: i = "search",
     ...p
-  } = n, [u, a] = g(e), f = b(c, 1e3), d = (r) => {
+  } = n, [u, a] = g(e), f = b(s, 1e3), d = (r) => {
     const S = r.target.value;
-    a(S), s?.(r), f(r.target.value);
+    a(S), c?.(r), f(r.target.value);
   };
   return v(() => {
     a(e ?? "");
   }, [e]), /* @__PURE__ */ t(
     C,
     {
-      name: h,
+      name: i,
       placeholder: m,
       value: u,
-      className: x("min-w-[340px]", i),
+      className: x("min-w-[340px]", l),
       onChange: d,
       ...p,
       ...o || {},
       slotProps: {
         ...o || {},
         input: {
-          startAdornment: /* @__PURE__ */ t(N, { loading: l, size: "sm", children: /* @__PURE__ */ t(I, {}) }),
+          startAdornment: /* @__PURE__ */ t(N, { loading: h, children: /* @__PURE__ */ t(I, {}) }),
           ...o?.input || {}
         }
       }
@@ -43,6 +43,6 @@ const E = (n) => {
   );
 };
 export {
-  E as Search
+  L as Search
 };
 //# sourceMappingURL=Search.js.map

package/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../src/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, useEffect, useState } from 'react';\n\nimport { Input } from '../Input';\nimport { SearchProps } from './Search.types';\n\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { cn } from '@oneplatformdev/utils';\nimport { SearchIcon } from 'lucide-react';\nimport { LoadedIcon } from '../LoadedIcon';\n\nexport const Search = (props: SearchProps) => {\n  const {\n    search: initialSearch,\n    onChange: handleChange,\n    onSearch,\n    placeholder = 'Search',\n    className,\n    loading = false,\n    slotProps,\n    name = 'search',\n    ...rest\n  } = props;\n  const [search, setSearch] = useState(initialSearch);\n  const debounced = useDebounceCallback(onSearch, 1000);\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const v = e.target.value;\n    setSearch(v);\n    handleChange?.(e);\n    debounced(e.target.value);\n  };\n\n  useEffect(() => {\n    setSearch(initialSearch ?? '');\n  }, [initialSearch]);\n\n  return (\n    <Input\n      name={name}\n      placeholder={placeholder}\n      value={search}\n      className={cn('min-w-[340px]', className)}\n      onChange={onChange}\n      {...rest}\n      {...(slotProps || {})}\n      slotProps={{\n        ...(slotProps || {}),\n        input: {\n          startAdornment: (\n            <LoadedIcon loading={loading} size=\"sm\">\n              <SearchIcon />\n            </LoadedIcon>\n          ),\n          ...(slotProps?.input || {}),\n        },\n      }}\n    />\n  );\n};\n"],"names":["Search","props","initialSearch","handleChange","onSearch","placeholder","className","loading","slotProps","name","rest","search","setSearch","useState","debounced","useDebounceCallback","onChange","e","v","useEffect","jsx","Input","cn","LoadedIcon","SearchIcon"],"mappings":";;;;;;;AAYO,MAAMA,IAAS,CAACC,MAAuB;AAC5C,QAAM;AAAA,IACJ,QAAQC;AAAA,IACR,UAAUC;AAAA,IACV,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDT,GACE,CAACU,GAAQC,CAAS,IAAIC,EAASX,CAAa,GAC5CY,IAAYC,EAAoBX,GAAU,GAAI,GAE9CY,IAAW,CAACC,MAAqC;AACrD,UAAMC,IAAID,EAAE,OAAO;AACnB,IAAAL,EAAUM,CAAC,GACXf,IAAec,CAAC,GAChBH,EAAUG,EAAE,OAAO,KAAK;AAAA,EAC1B;AAEA,SAAAE,EAAU,MAAM;AACd,IAAAP,EAAUV,KAAiB,EAAE;AAAA,EAC/B,GAAG,CAACA,CAAa,CAAC,GAGhB,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAZ;AAAA,MACA,aAAAJ;AAAA,MACA,OAAOM;AAAA,MACP,WAAWW,EAAG,iBAAiBhB,CAAS;AAAA,MACxC,UAAAU;AAAA,MACC,GAAGN;AAAA,MACH,GAAIF,KAAa,CAAA;AAAA,MAClB,WAAW;AAAA,QACT,GAAIA,KAAa,CAAA;AAAA,QACjB,OAAO;AAAA,UACL,kCACGe,GAAA,EAAW,SAAAhB,GAAkB,MAAK,MACjC,UAAA,gBAAAa,EAACI,KAAW,EAAA,CACd;AAAA,UAEF,GAAIhB,GAAW,SAAS,CAAA;AAAA,QAAC;AAAA,MAC3B;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Search.js","sources":["../../src/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, useEffect, useState } from 'react';\n\nimport { Input } from '../Input';\nimport { SearchProps } from './Search.types';\n\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { cn } from '@oneplatformdev/utils';\nimport { SearchIcon } from 'lucide-react';\nimport { LoadedIcon } from '../LoadedIcon';\n\nexport const Search = (props: SearchProps) => {\n  const {\n    search: initialSearch,\n    onChange: handleChange,\n    onSearch,\n    placeholder = 'Search',\n    className,\n    loading = false,\n    slotProps,\n    name = 'search',\n    ...rest\n  } = props;\n  const [search, setSearch] = useState(initialSearch);\n  const debounced = useDebounceCallback(onSearch, 1000);\n\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const v = e.target.value;\n    setSearch(v);\n    handleChange?.(e);\n    debounced(e.target.value);\n  };\n\n  useEffect(() => {\n    setSearch(initialSearch ?? '');\n  }, [initialSearch]);\n\n  return (\n    <Input\n      name={name}\n      placeholder={placeholder}\n      value={search}\n      className={cn('min-w-[340px]', className)}\n      onChange={onChange}\n      {...rest}\n      {...(slotProps || {})}\n      slotProps={{\n        ...(slotProps || {}),\n        input: {\n          startAdornment: (\n            <LoadedIcon loading={loading}>\n              <SearchIcon />\n            </LoadedIcon>\n          ),\n          ...(slotProps?.input || {}),\n        },\n      }}\n    />\n  );\n};\n"],"names":["Search","props","initialSearch","handleChange","onSearch","placeholder","className","loading","slotProps","name","rest","search","setSearch","useState","debounced","useDebounceCallback","onChange","e","v","useEffect","jsx","Input","cn","LoadedIcon","SearchIcon"],"mappings":";;;;;;;AAYO,MAAMA,IAAS,CAACC,MAAuB;AAC5C,QAAM;AAAA,IACJ,QAAQC;AAAA,IACR,UAAUC;AAAA,IACV,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDT,GACE,CAACU,GAAQC,CAAS,IAAIC,EAASX,CAAa,GAC5CY,IAAYC,EAAoBX,GAAU,GAAI,GAE9CY,IAAW,CAACC,MAAqC;AACrD,UAAMC,IAAID,EAAE,OAAO;AACnB,IAAAL,EAAUM,CAAC,GACXf,IAAec,CAAC,GAChBH,EAAUG,EAAE,OAAO,KAAK;AAAA,EAC1B;AAEA,SAAAE,EAAU,MAAM;AACd,IAAAP,EAAUV,KAAiB,EAAE;AAAA,EAC/B,GAAG,CAACA,CAAa,CAAC,GAGhB,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAZ;AAAA,MACA,aAAAJ;AAAA,MACA,OAAOM;AAAA,MACP,WAAWW,EAAG,iBAAiBhB,CAAS;AAAA,MACxC,UAAAU;AAAA,MACC,GAAGN;AAAA,MACH,GAAIF,KAAa,CAAA;AAAA,MAClB,WAAW;AAAA,QACT,GAAIA,KAAa,CAAA;AAAA,QACjB,OAAO;AAAA,UACL,gBACE,gBAAAY,EAACG,GAAA,EAAW,SAAAhB,GACV,UAAA,gBAAAa,EAACI,KAAW,GACd;AAAA,UAEF,GAAIhB,GAAW,SAAS,CAAA;AAAA,QAAC;AAAA,MAC3B;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/Search/Search.stories.js

@@ -0,0 +1,17 @@
+import { Search as t } from "./Search.js";
+const a = {
+  title: "Input/Search",
+  component: t
+}, o = {
+  args: {
+    slotProps: {},
+    search: "search",
+    onSearch: () => {
+    }
+  }
+};
+export {
+  o as Default,
+  a as default
+};
+//# sourceMappingURL=Search.stories.js.map

package/Search/Search.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.stories.js","sources":["../../src/Search/Search.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Search } from './Search';\n\nconst meta = {\n  title: 'Input/Search',\n  component: Search,\n} satisfies Meta<typeof Search>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    slotProps: {},\n    search: \"search\",\n    onSearch: () => {}\n  }\n};\n"],"names":["meta","Search","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,WAAW,CAAA;AAAA,IACX,QAAQ;AAAA,IACR,UAAU,MAAM;AAAA,IAAC;AAAA,EAAA;AAErB;"}

package/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,wGAmEb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,QAAA,MAAM,QAAQ,wGA2Eb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/Textarea/Textarea.js

@@ -1,73 +1,78 @@
-import { jsxs as l, Fragment as g, jsx as b } from "react/jsx-runtime";
-import * as h from "react";
-import { useId as A, useRef as v, useState as w, useImperativeHandle as z, useEffect as F } from "react";
-import { cn as d } from "@oneplatformdev/utils";
-import { useAutosizeTextArea as N } from "./useAutosizeTextArea.js";
-const y = h.forwardRef(
-  (u, m) => {
+import { jsxs as d, Fragment as v, jsx as A } from "react/jsx-runtime";
+import * as w from "react";
+import { useId as y, useRef as z, useState as F, useImperativeHandle as N, useEffect as T } from "react";
+import { cn as f } from "@oneplatformdev/utils";
+import { useAutosizeTextArea as C } from "./useAutosizeTextArea.js";
+const R = w.forwardRef(
+  (m, c) => {
     const {
-      className: c,
-      value: t = "",
-      maxHeight: o = Number.MAX_SAFE_INTEGER,
-      minHeight: i = 0,
-      resizeble: f = !0,
+      className: g,
+      value: r = "",
+      maxHeight: a = Number.MAX_SAFE_INTEGER,
+      minHeight: i = 40,
+      resizeble: x = !1,
       counter: s = !1,
       id: n = "",
-      ...r
-    } = u, a = A(), e = v(null), [x, p] = w("");
-    return N({
-      textAreaRef: e,
-      triggerAutoSize: x,
-      maxHeight: o,
+      onChange: p,
+      onTransform: l,
+      ...o
+    } = m, u = y(), t = z(null), [b, h] = F("");
+    return C({
+      textAreaRef: t,
+      triggerAutoSize: b,
+      maxHeight: a,
       minHeight: i
-    }), z(m, () => ({
-      ...e.current ?? {},
-      textArea: e.current,
-      focus: () => e?.current?.focus(),
-      maxHeight: o,
+    }), N(c, () => ({
+      ...t.current ?? {},
+      textArea: t.current,
+      focus: () => t?.current?.focus(),
+      maxHeight: a,
       minHeight: i
-    })), F(() => {
-      p(t);
-    }, [r?.defaultValue, t]), /* @__PURE__ */ l(g, { children: [
-      /* @__PURE__ */ b(
+    })), T(() => {
+      h(r);
+    }, [o?.defaultValue, r]), /* @__PURE__ */ d(v, { children: [
+      /* @__PURE__ */ A(
         "textarea",
         {
-          id: n || a,
-          ...r,
-          ref: e,
-          value: t,
-          className: d(
+          id: n || u,
+          ...o,
+          ref: t,
+          value: r,
+          onChange: (e) => {
+            typeof l?.(e.target.value, e) == "string" && (e.target.value = l(e.target.value, e)), p?.(e);
+          },
+          className: f(
             "flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm",
-            "rounded-[12px] border border-input bg-[#FCFCFC] shadow-none",
+            "rounded-lg border border-input bg-[#FCFCFC] shadow-none",
             "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
             "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
-            f ? "resize" : "resize-none overflow-hidden!",
-            s && "pb-2",
-            c
+            x ? "resize" : "resize-none overflow-hidden!",
+            s && "pb-1",
+            g
           )
         }
       ),
-      s && /* @__PURE__ */ l(
+      s && /* @__PURE__ */ d(
         "label",
         {
-          htmlFor: n || a,
-          className: d(
+          htmlFor: n || u,
+          className: f(
             "w-full text-right inline-flex items-center justify-end",
-            "text-sm font-normal text-muted-foreground",
-            "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            "text-xs font-medium leading-[1.2] text-muted-foreground",
+            "peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           ),
           children: [
-            String(t || "").length,
+            String(r || "").length,
             " / ",
-            r?.maxLength
+            o?.maxLength
           ]
         }
       )
     ] });
   }
 );
-y.displayName = "Textarea";
+R.displayName = "Textarea";
 export {
-  y as Textarea
+  R as Textarea
 };
 //# sourceMappingURL=Textarea.js.map

package/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\nimport { cn } from '@oneplatformdev/utils';\n\nimport { TextareaProps } from './Textarea.types';\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (textareaProps, ref) => {\n    const {\n      className,\n      value = '',\n      maxHeight = Number.MAX_SAFE_INTEGER,\n      minHeight = 0,\n      resizeble = true,\n      counter = false,\n      id: customId = '',\n      ...props\n    } = textareaProps;\n    const id = useId();\n    const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n    const [triggerAutoSize, setTriggerAutoSize] = useState('');\n\n    useAutosizeTextArea({\n      textAreaRef,\n      triggerAutoSize: triggerAutoSize,\n      maxHeight,\n      minHeight,\n    });\n\n    useImperativeHandle(ref, () => ({\n      ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\n      textArea: textAreaRef.current as HTMLTextAreaElement,\n      focus: () => textAreaRef?.current?.focus(),\n      maxHeight,\n      minHeight,\n    }));\n\n    useEffect(() => {\n      setTriggerAutoSize(value as string);\n    }, [props?.defaultValue, value]);\n\n    return (\n      <>\n        <textarea\n          id={customId || id}\n          {...props}\n          ref={textAreaRef}\n          value={value}\n          className={cn(\n            'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\n            'rounded-[12px] border border-input bg-[#FCFCFC] shadow-none',\n            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n            'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n            resizeble ? 'resize' : 'resize-none overflow-hidden!',\n            counter && 'pb-2',\n            className\n          )}\n        />\n        {counter && (\n          <label\n            htmlFor={customId || id}\n            className={cn(\n              'w-full text-right inline-flex items-center justify-end',\n              'text-sm font-normal text-muted-foreground',\n              'leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n            )}\n          >\n            {String(value || '').length} / {props?.maxLength}\n          </label>\n        )}\n      </>\n    );\n  }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,GAAGC;AAAA,IAAA,IACDT,GACEU,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDa,EAAoBjB,GAAK,OAAO;AAAA,MAC9B,GAAKW,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAR;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFc,EAAU,MAAM;AACd,MAAAJ,EAAmBZ,CAAe;AAAA,IACpC,GAAG,CAACM,GAAO,cAAcN,CAAK,CAAC,GAG7B,gBAAAiB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAId,KAAYE;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAT;AAAA,UACA,WAAWoB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAjB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KACC,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASZ,KAAYE;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOpB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIM,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAX,EAAS,cAAc;"}
+{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';\nimport { cn } from '@oneplatformdev/utils';\n\nimport { TextareaProps } from './Textarea.types';\nimport { useAutosizeTextArea } from './useAutosizeTextArea';\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (textareaProps, ref) => {\n    const {\n      className,\n      value = '',\n      maxHeight = Number.MAX_SAFE_INTEGER,\n      minHeight = 40,\n      resizeble = false,\n      counter = false,\n      id: customId = '',\n      onChange,\n      onTransform,\n      ...props\n    } = textareaProps;\n    const id = useId();\n    const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n    const [triggerAutoSize, setTriggerAutoSize] = useState('');\n\n    useAutosizeTextArea({\n      textAreaRef,\n      triggerAutoSize: triggerAutoSize,\n      maxHeight,\n      minHeight,\n    });\n\n    useImperativeHandle(ref, () => ({\n      ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),\n      textArea: textAreaRef.current as HTMLTextAreaElement,\n      focus: () => textAreaRef?.current?.focus(),\n      maxHeight,\n      minHeight,\n    }));\n\n    useEffect(() => {\n      setTriggerAutoSize(value as string);\n    }, [props?.defaultValue, value]);\n\n    return (\n      <>\n        <textarea\n          id={customId || id}\n          {...props}\n          ref={textAreaRef}\n          value={value}\n          onChange={(e) => {\n            if (typeof onTransform?.(e.target.value, e) === 'string') {\n              e.target.value = onTransform(e.target.value, e);\n            }\n            onChange?.(e);\n          }}\n          className={cn(\n            'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',\n            'rounded-lg border border-input bg-[#FCFCFC] shadow-none',\n            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n            'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n            resizeble ? 'resize' : 'resize-none overflow-hidden!',\n            counter && 'pb-1',\n            className\n          )}\n        />\n        {counter && (\n          <label\n            htmlFor={customId || id}\n            className={cn(\n              'w-full text-right inline-flex items-center justify-end',\n              'text-xs font-medium leading-[1.2] text-muted-foreground',\n              'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n            )}\n          >\n            {String(value || '').length} / {props?.maxLength}\n          </label>\n        )}\n      </>\n    );\n  }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea };\n"],"names":["Textarea","React","textareaProps","ref","className","value","maxHeight","minHeight","resizeble","counter","customId","onChange","onTransform","props","id","useId","textAreaRef","useRef","triggerAutoSize","setTriggerAutoSize","useState","useAutosizeTextArea","useImperativeHandle","useEffect","jsxs","Fragment","jsx","cn"],"mappings":";;;;;AAOA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAACC,GAAeC,MAAQ;AACtB,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,WAAAC,IAAY,OAAO;AAAA,MACnB,WAAAC,IAAY;AAAA,MACZ,WAAAC,IAAY;AAAA,MACZ,SAAAC,IAAU;AAAA,MACV,IAAIC,IAAW;AAAA,MACf,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GACEY,IAAKC,EAAA,GACLC,IAAcC,EAAmC,IAAI,GACrD,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAE;AAEzD,WAAAC,EAAoB;AAAA,MAClB,aAAAL;AAAA,MACA,iBAAAE;AAAA,MACA,WAAAZ;AAAA,MACA,WAAAC;AAAA,IAAA,CACD,GAEDe,EAAoBnB,GAAK,OAAO;AAAA,MAC9B,GAAKa,EAAY,WAAW,CAAA;AAAA,MAC5B,UAAUA,EAAY;AAAA,MACtB,OAAO,MAAMA,GAAa,SAAS,MAAA;AAAA,MACnC,WAAAV;AAAA,MACA,WAAAC;AAAA,IAAA,EACA,GAEFgB,EAAU,MAAM;AACd,MAAAJ,EAAmBd,CAAe;AAAA,IACpC,GAAG,CAACQ,GAAO,cAAcR,CAAK,CAAC,GAG7B,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIhB,KAAYI;AAAA,UACf,GAAGD;AAAA,UACJ,KAAKG;AAAA,UACL,OAAAX;AAAA,UACA,UAAU,CAAC,MAAM;AACf,YAAI,OAAOO,IAAc,EAAE,OAAO,OAAO,CAAC,KAAM,aAC9C,EAAE,OAAO,QAAQA,EAAY,EAAE,OAAO,OAAO,CAAC,IAEhDD,IAAW,CAAC;AAAA,UACd;AAAA,UACA,WAAWgB;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAnB,IAAY,WAAW;AAAA,YACvBC,KAAW;AAAA,YACXL;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEDK,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASd,KAAYI;AAAA,UACrB,WAAWa;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,YAAA,OAAOtB,KAAS,EAAE,EAAE;AAAA,YAAO;AAAA,YAAIQ,GAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC,GAEJ;AAAA,EAEJ;AACF;AACAb,EAAS,cAAc;"}

package/Textarea/Textarea.stories.js

@@ -0,0 +1,12 @@
+import { Textarea as t } from "./Textarea.js";
+const a = {
+  title: "Input/Textarea",
+  component: t
+}, o = {
+  args: {}
+};
+export {
+  o as Default,
+  a as default
+};
+//# sourceMappingURL=Textarea.stories.js.map

package/Textarea/Textarea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.js","sources":["../../src/Textarea/Textarea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Textarea } from './Textarea';\n\nconst meta = {\n  title: 'Input/Textarea',\n  component: Textarea,\n} satisfies Meta<typeof Textarea>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {}\n};\n"],"names":["meta","Textarea","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM,CAAA;AACR;"}

package/Textarea/Textarea.types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, RefObject } from 'react';
+import { ChangeEvent, ComponentProps, RefObject } from 'react';
 export interface IUseAutosizeTextAreaProps {
     textAreaRef: RefObject<HTMLTextAreaElement | null>;
     triggerAutoSize: string;
@@ -14,5 +14,7 @@ export interface IUseAutosizeTextAreaProps {
 export interface TextareaProps extends ComponentProps<'textarea'>, Pick<IUseAutosizeTextAreaProps, 'minHeight' | 'maxHeight'> {
     resizeble?: boolean;
     counter?: boolean;
+    /** func transform event.target.value before onChange event call*/
+    onTransform?: (value: string, event: ChangeEvent<HTMLInputElement>) => string;
 }
 //# sourceMappingURL=Textarea.types.d.ts.map