@oneplatformdev/ui 0.1.99-beta.29 → 0.1.99-beta.291

package/Input/Input.stories.js

@@ -0,0 +1,225 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { Search as c, Mail as s } from "lucide-react";
+import { Input as n } from "./Input.js";
+const h = {
+  title: "Input/Input",
+  component: n,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    placeholder: "Enter text...",
+    variant: "default",
+    fullSize: !1,
+    counter: !1,
+    disabled: !1,
+    clearable: !1
+  },
+  argTypes: {
+    clearable: {
+      control: "boolean"
+    },
+    variant: {
+      control: "select",
+      options: ["default", "grey"]
+    },
+    type: {
+      control: "select",
+      options: ["text", "password", "email", "search", "number"]
+    },
+    fullSize: {
+      control: "boolean"
+    },
+    counter: {
+      control: "boolean"
+    },
+    disabled: {
+      control: "boolean"
+    },
+    maxLength: {
+      control: "number"
+    },
+    onChange: { action: "changed" },
+    onBlur: { action: "blurred" },
+    onFocus: { action: "focused" }
+  }
+}, m = {
+  args: {
+    type: "text",
+    placeholder: "Default input"
+  }
+}, g = {
+  args: {
+    variant: "grey",
+    type: "text",
+    placeholder: "Grey input"
+  }
+}, v = {
+  args: {
+    placeholder: "Search...",
+    slotProps: {
+      input: {
+        startAdornment: /* @__PURE__ */ e(c, { size: 16 })
+      }
+    }
+  }
+}, b = {
+  args: {
+    type: "email",
+    placeholder: "Email address",
+    slotProps: {
+      input: {
+        startAdornment: /* @__PURE__ */ e(s, { size: 16 })
+      }
+    }
+  }
+}, f = {
+  args: {
+    type: "password",
+    placeholder: "Password"
+  }
+}, x = {
+  render: (a) => {
+    const [t, l] = o("");
+    return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
+      n,
+      {
+        ...a,
+        value: t,
+        onChange: (r) => l(r.target.value)
+      }
+    ) });
+  },
+  args: {
+    placeholder: "Type something...",
+    counter: !0,
+    maxLength: 50
+  }
+}, y = {
+  render: (a) => /* @__PURE__ */ e("div", { className: "w-[480px]", children: /* @__PURE__ */ e(n, { ...a }) }),
+  args: {
+    placeholder: "Full width input",
+    fullSize: !0
+  }
+}, w = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: !0,
+    value: "Disabled value"
+  }
+}, C = {
+  render: (a) => {
+    const [t, l] = o("");
+    return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
+      n,
+      {
+        ...a,
+        value: t,
+        onTransform: (r) => r.replace(/\D/g, ""),
+        onChange: (r) => l(r.target.value)
+      }
+    ) });
+  },
+  args: {
+    placeholder: "Only numbers allowed"
+  }
+}, S = {
+  render: (a) => {
+    const [t, l] = o("Clear me");
+    return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
+      n,
+      {
+        ...a,
+        value: t,
+        onChange: (r) => l(r.target.value),
+        onClear: () => console.log("cleared")
+      }
+    ) });
+  },
+  args: {
+    placeholder: "Type something...",
+    clearable: !0
+  }
+}, N = {
+  render: (a) => /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(n, { ...a, defaultValue: "Uncontrolled value" }) }),
+  args: {
+    placeholder: "Type something...",
+    clearable: !0
+  }
+}, V = {
+  render: (a) => {
+    const [t, l] = o("john@example.com");
+    return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
+      n,
+      {
+        ...a,
+        value: t,
+        onChange: (r) => l(r.target.value)
+      }
+    ) });
+  },
+  args: {
+    type: "email",
+    placeholder: "Email address",
+    clearable: !0,
+    slotProps: {
+      input: {
+        startAdornment: /* @__PURE__ */ e(s, { size: 16 })
+      }
+    }
+  }
+}, P = {
+  render: (a) => {
+    const [t, l] = o("Some text");
+    return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
+      n,
+      {
+        ...a,
+        value: t,
+        onChange: (r) => l(r.target.value)
+      }
+    ) });
+  },
+  args: {
+    placeholder: "Type something...",
+    clearable: !0,
+    counter: !0,
+    maxLength: 50
+  }
+}, T = {
+  render: (a) => {
+    const [t, l] = o("");
+    return /* @__PURE__ */ e("div", { className: "w-[360px]", children: /* @__PURE__ */ e(
+      n,
+      {
+        ...a,
+        value: t,
+        onChange: (r) => l(r.target.value)
+      }
+    ) });
+  },
+  args: {
+    placeholder: "Play with controls",
+    maxLength: 100
+  }
+};
+export {
+  S as Clearable,
+  N as ClearableUncontrolled,
+  P as ClearableWithCounter,
+  V as ClearableWithStartAdornment,
+  m as Default,
+  w as Disabled,
+  b as Email,
+  y as FullWidth,
+  g as GreyVariant,
+  f as Password,
+  T as Playground,
+  x as WithCounter,
+  v as WithStartAdornment,
+  C as WithTransform,
+  h as default
+};
+//# sourceMappingURL=Input.stories.js.map

package/Input/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport React, { useState } from 'react';\nimport { Mail, Search } from 'lucide-react';\n\nimport { Input } from './Input';\n\nconst meta = {\n  title: 'Input/Input',\n  component: Input,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    placeholder: 'Enter text...',\n    variant: 'default',\n    fullSize: false,\n    counter: false,\n    disabled: false,\n    clearable: false,\n  },\n  argTypes: {\n    clearable: {\n      control: 'boolean',\n    },\n    variant: {\n      control: 'select',\n      options: ['default', 'grey'],\n    },\n    type: {\n      control: 'select',\n      options: ['text', 'password', 'email', 'search', 'number'],\n    },\n    fullSize: {\n      control: 'boolean',\n    },\n    counter: {\n      control: 'boolean',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    maxLength: {\n      control: 'number',\n    },\n    onChange: { action: 'changed' },\n    onBlur: { action: 'blurred' },\n    onFocus: { action: 'focused' },\n  },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    type: 'text',\n    placeholder: 'Default input',\n  },\n};\n\nexport const GreyVariant: Story = {\n  args: {\n    variant: 'grey',\n    type: 'text',\n    placeholder: 'Grey input',\n  },\n};\n\nexport const WithStartAdornment: Story = {\n  args: {\n    placeholder: 'Search...',\n    slotProps: {\n      input: {\n        startAdornment: <Search size={16} />,\n      },\n    },\n  },\n};\n\nexport const Email: Story = {\n  args: {\n    type: 'email',\n    placeholder: 'Email address',\n    slotProps: {\n      input: {\n        startAdornment: <Mail size={16} />,\n      },\n    },\n  },\n};\n\nexport const Password: Story = {\n  args: {\n    type: 'password',\n    placeholder: 'Password',\n  },\n};\n\nexport const WithCounter: Story = {\n  render: (args) => {\n    const [value, setValue] = useState('');\n\n    return (\n      <div className=\"w-[320px]\">\n        <Input\n          {...args}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n        />\n      </div>\n    );\n  },\n  args: {\n    placeholder: 'Type something...',\n    counter: true,\n    maxLength: 50,\n  },\n};\n\nexport const FullWidth: Story = {\n  render: (args) => (\n    <div className=\"w-[480px]\">\n      <Input {...args} />\n    </div>\n  ),\n  args: {\n    placeholder: 'Full width input',\n    fullSize: true,\n  },\n};\n\nexport const Disabled: Story = {\n  args: {\n    placeholder: 'Disabled input',\n    disabled: true,\n    value: 'Disabled value',\n  },\n};\n\nexport const WithTransform: Story = {\n  render: (args) => {\n    const [value, setValue] = useState('');\n\n    return (\n      <div className=\"w-[320px]\">\n        <Input\n          {...args}\n          value={value}\n          onTransform={(next) => next.replace(/\\D/g, '')}\n          onChange={(e) => setValue(e.target.value)}\n        />\n      </div>\n    );\n  },\n  args: {\n    placeholder: 'Only numbers allowed',\n  },\n};\n\nexport const Clearable: Story = {\n  render: (args) => {\n    const [value, setValue] = useState('Clear me');\n\n    return (\n      <div className=\"w-[320px]\">\n        <Input\n          {...args}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onClear={() => console.log('cleared')}\n        />\n      </div>\n    );\n  },\n  args: {\n    placeholder: 'Type something...',\n    clearable: true,\n  },\n};\n\nexport const ClearableUncontrolled: Story = {\n  render: (args) => (\n    <div className=\"w-[320px]\">\n      <Input {...args} defaultValue=\"Uncontrolled value\" />\n    </div>\n  ),\n  args: {\n    placeholder: 'Type something...',\n    clearable: true,\n  },\n};\n\nexport const ClearableWithStartAdornment: Story = {\n  render: (args) => {\n    const [value, setValue] = useState('john@example.com');\n\n    return (\n      <div className=\"w-[320px]\">\n        <Input\n          {...args}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n        />\n      </div>\n    );\n  },\n  args: {\n    type: 'email',\n    placeholder: 'Email address',\n    clearable: true,\n    slotProps: {\n      input: {\n        startAdornment: <Mail size={16} />,\n      },\n    },\n  },\n};\n\nexport const ClearableWithCounter: Story = {\n  render: (args) => {\n    const [value, setValue] = useState('Some text');\n\n    return (\n      <div className=\"w-[320px]\">\n        <Input\n          {...args}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n        />\n      </div>\n    );\n  },\n  args: {\n    placeholder: 'Type something...',\n    clearable: true,\n    counter: true,\n    maxLength: 50,\n  },\n};\n\nexport const Playground: Story = {\n  render: (args) => {\n    const [value, setValue] = useState('');\n\n    return (\n      <div className=\"w-[360px]\">\n        <Input\n          {...args}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n        />\n      </div>\n    );\n  },\n  args: {\n    placeholder: 'Play with controls',\n    maxLength: 100,\n  },\n};\n"],"names":["meta","Input","Default","GreyVariant","WithStartAdornment","jsx","Search","Email","Mail","Password","WithCounter","args","value","setValue","useState","e","FullWidth","Disabled","WithTransform","next","Clearable","ClearableUncontrolled","ClearableWithStartAdornment","ClearableWithCounter","Playground"],"mappings":"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"}

package/Input/Input.types.d.ts

@@ -16,5 +16,10 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
     /** func transform pasted value before set to input */
     onPastePrepare?: (value: string, event: React.ClipboardEvent<HTMLInputElement>) => string;
     fullSize?: boolean;
+    counter?: boolean;
+    /** Show a clear (X) button inside the input that empties the value and emulates a native input/change event */
+    clearable?: boolean;
+    /** Optional callback fired after the input has been cleared */
+    onClear?: () => void;
 }
 //# sourceMappingURL=Input.types.d.ts.map

package/Input/Input.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+GAA+G;IAC/G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/LoadingMask/LoadingMask.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { ILoadingMaskProps } from './LoadingMask.types';
-export declare const LoadingMask: FC<ILoadingMaskProps>;
+export declare const LoadingMask: (props: ILoadingMaskProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=LoadingMask.d.ts.map

package/LoadingMask/LoadingMask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingMask.d.ts","sourceRoot":"","sources":["../../src/LoadingMask/LoadingMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAe7C,CAAC"}
+{"version":3,"file":"LoadingMask.d.ts","sourceRoot":"","sources":["../../src/LoadingMask/LoadingMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,eAAO,MAAM,WAAW,GAAI,OAAO,iBAAiB,mDAgBnD,CAAC"}

package/LoadingMask/LoadingMask.js

@@ -1,22 +1,22 @@
 import { jsx as e } from "react/jsx-runtime";
 import { RenderLoadingMask as r } from "./RenderLoadingMask.js";
-import { cn as o } from "@oneplatformdev/utils";
-const f = (t) => {
-  const { fullWidth: s = !1, className: i, ...n } = t;
-  return s ? /* @__PURE__ */ e(
+import { cn as a } from "@oneplatformdev/utils";
+const c = (t) => {
+  const { loading: n = !0, fullWidth: s = !1, className: i, ...o } = t;
+  return n ? s ? /* @__PURE__ */ e(
     "div",
     {
-      ...n,
-      className: o(
+      ...o,
+      className: a(
         "absolute inset-0",
         "flex items-center justify-center",
         i
       ),
       children: /* @__PURE__ */ e(r, {})
     }
-  ) : /* @__PURE__ */ e(r, {});
+  ) : /* @__PURE__ */ e(r, {}) : null;
 };
 export {
-  f as LoadingMask
+  c as LoadingMask
 };
 //# sourceMappingURL=LoadingMask.js.map

package/LoadingMask/LoadingMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingMask.js","sources":["../../src/LoadingMask/LoadingMask.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { ILoadingMaskProps } from './LoadingMask.types';\nimport { RenderLoadingMask } from './RenderLoadingMask';\nimport { cn } from '@oneplatformdev/utils';\n\nexport const LoadingMask: FC<ILoadingMaskProps> = (props) => {\n  const { fullWidth = false, className, ...rest } = props;\n  if (!fullWidth) return <RenderLoadingMask />;\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'absolute inset-0',\n        'flex items-center justify-center',\n        className\n      )}\n    >\n      <RenderLoadingMask />\n    </div>\n  );\n};\n"],"names":["LoadingMask","props","fullWidth","className","rest","jsx","cn","RenderLoadingMask"],"mappings":";;;AAKO,MAAMA,IAAqC,CAACC,MAAU;AAC3D,QAAM,EAAE,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,MAASH;AAClD,SAAKC,IAEH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAH;AAAA,MAAA;AAAA,MAGF,4BAACI,GAAA,CAAA,CAAkB;AAAA,IAAA;AAAA,EAAA,IAVA,gBAAAF,EAACE,GAAA,CAAA,CAAkB;AAa5C;"}
+{"version":3,"file":"LoadingMask.js","sources":["../../src/LoadingMask/LoadingMask.tsx"],"sourcesContent":["import { ILoadingMaskProps } from './LoadingMask.types';\nimport { RenderLoadingMask } from './RenderLoadingMask';\nimport { cn } from '@oneplatformdev/utils';\n\nexport const LoadingMask = (props: ILoadingMaskProps) => {\n  const { loading = true, fullWidth = false, className, ...rest } = props;\n  if(!loading) return null;\n  if (!fullWidth) return <RenderLoadingMask />;\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'absolute inset-0',\n        'flex items-center justify-center',\n        className\n      )}\n    >\n      <RenderLoadingMask />\n    </div>\n  );\n};\n"],"names":["LoadingMask","props","loading","fullWidth","className","rest","jsx","cn","RenderLoadingMask"],"mappings":";;;AAIO,MAAMA,IAAc,CAACC,MAA6B;AACvD,QAAM,EAAE,SAAAC,IAAU,IAAM,WAAAC,IAAY,IAAO,WAAAC,GAAW,GAAGC,MAASJ;AAClE,SAAIC,IACCC,IAEH,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAH;AAAA,MAAA;AAAA,MAGF,4BAACI,GAAA,CAAA,CAAkB;AAAA,IAAA;AAAA,EAAA,IAVA,gBAAAF,EAACE,GAAA,CAAA,CAAkB,IADtB;AActB;"}

package/LoadingMask/LoadingMask.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react';
 export interface ILoadingMaskProps extends HTMLAttributes<HTMLDivElement> {
     fullWidth?: boolean;
+    loading?: boolean;
 }
 //# sourceMappingURL=LoadingMask.types.d.ts.map

package/LoadingMask/LoadingMask.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingMask.types.d.ts","sourceRoot":"","sources":["../../src/LoadingMask/LoadingMask.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"LoadingMask.types.d.ts","sourceRoot":"","sources":["../../src/LoadingMask/LoadingMask.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/Popover/Popover.d.ts

@@ -2,7 +2,9 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function PopoverContent(props: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent(props: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+    container?: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPrimitive };
 //# sourceMappingURL=Popover.d.ts.map

package/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,iBAAS,OAAO,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAErE;AAED,iBAAS,cAAc,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAE/E;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CA0BnF;AAED,iBAAS,aAAa,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAE7E;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,iBAAS,OAAO,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAErE;AAED,iBAAS,cAAc,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAE/E;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACrF,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,2CA+BA;AAED,iBAAS,aAAa,CAAC,EACE,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAE7E;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}

package/Popover/Popover.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-popover";
-import { cn as s } from "@oneplatformdev/utils";
-function l({
+import { cn as p } from "@oneplatformdev/utils";
+function c({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Root, { "data-slot": "popover", ...o });
@@ -11,23 +11,28 @@ function f({
 }) {
   return /* @__PURE__ */ t(e.Trigger, { "data-slot": "popover-trigger", ...o });
 }
-function c(o) {
+function g(o) {
   const {
     className: r,
     align: a = "center",
     sideOffset: n = 4,
     style: i,
-    ...d
+    container: d,
+    ...s
   } = o;
-  return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(e.Portal, { container: d, children: /* @__PURE__ */ t(
     e.Content,
     {
       "data-slot": "popover-content",
       align: a,
       sideOffset: n,
-      ...d,
-      className: s(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+      ...s,
+      className: p(
+        "text-popover-foreground",
+        "w-72 origin-(--radix-popover-content-transform-origin) outline-hidden",
+        "border p-4 bg-popover rounded-lg",
+        "shadow-[1px_1px_10px_rgba(6,8,13,0.06)]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50",
         r
       ),
       style: {
@@ -43,9 +48,9 @@ function u({
   return /* @__PURE__ */ t(e.Anchor, { "data-slot": "popover-anchor", ...o });
 }
 export {
-  l as Popover,
+  c as Popover,
   u as PopoverAnchor,
-  c as PopoverContent,
+  g as PopoverContent,
   e as PopoverPrimitive,
   f as PopoverTrigger
 };

package/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Popover({\n                   ...props\n                 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n                          ...props\n                        }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent(props: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  const {\n    className,\n    align = \"center\",\n    sideOffset = 4,\n    style,\n    ...rest\n  } = props;\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        {...rest}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        style={{\n          pointerEvents: 'auto',\n          ...(style || {}),\n        }}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n                         ...props\n                       }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPrimitive }\n"],"names":["Popover","props","PopoverPrimitive","PopoverTrigger","PopoverContent","className","align","sideOffset","style","rest","jsx","cn","PopoverAnchor"],"mappings":";;;AAOA,SAASA,EAAQ;AAAA,EACE,GAAGC;AACL,GAAuD;AACtE,2BAAQC,EAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAGD,GAAO;AAC/D;AAEA,SAASE,EAAe;AAAA,EACE,GAAGF;AACL,GAA0D;AAChF,2BAAQC,EAAiB,SAAjB,EAAyB,aAAU,mBAAmB,GAAGD,GAAO;AAC1E;AAEA,SAASG,EAAeH,GAA8D;AACpF,QAAM;AAAA,IACJ,WAAAI;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS,EAACR,EAAiB,QAAjB,EACC,UAAA,gBAAAQ;AAAA,IAACR,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,OAAAI;AAAA,MACA,YAAAC;AAAA,MACC,GAAGE;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,eAAe;AAAA,QACf,GAAIG,KAAS,CAAA;AAAA,MAAC;AAAA,IAChB;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASI,EAAc;AAAA,EACE,GAAGX;AACL,GAAyD;AAC9E,2BAAQC,EAAiB,QAAjB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;"}
+{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Popover({\n                   ...props\n                 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n                          ...props\n                        }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent(props: React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  container?: HTMLElement | null;\n}) {\n  const {\n    className,\n    align = \"center\",\n    sideOffset = 4,\n    style,\n    container,\n    ...rest\n  } = props;\n  return (\n    <PopoverPrimitive.Portal container={container}>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        {...rest}\n        className={cn(\n          \"text-popover-foreground\",\n          'w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',\n          'border p-4 bg-popover rounded-lg',\n          'shadow-[1px_1px_10px_rgba(6,8,13,0.06)]',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50',\n          className\n        )}\n        style={{\n          pointerEvents: 'auto',\n          ...(style || {}),\n        }}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n                         ...props\n                       }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPrimitive }\n"],"names":["Popover","props","PopoverPrimitive","PopoverTrigger","PopoverContent","className","align","sideOffset","style","container","rest","jsx","cn","PopoverAnchor"],"mappings":";;;AAOA,SAASA,EAAQ;AAAA,EACE,GAAGC;AACL,GAAuD;AACtE,2BAAQC,EAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAGD,GAAO;AAC/D;AAEA,SAASE,EAAe;AAAA,EACE,GAAGF;AACL,GAA0D;AAChF,2BAAQC,EAAiB,SAAjB,EAAyB,aAAU,mBAAmB,GAAGD,GAAO;AAC1E;AAEA,SAASG,EAAeH,GAErB;AACD,QAAM;AAAA,IACJ,WAAAI;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDT;AACJ,SACE,gBAAAU,EAACT,EAAiB,QAAjB,EAAwB,WAAAO,GACvB,UAAA,gBAAAE;AAAA,IAACT,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,OAAAI;AAAA,MACA,YAAAC;AAAA,MACC,GAAGG;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAP;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,eAAe;AAAA,QACf,GAAIG,KAAS,CAAA;AAAA,MAAC;AAAA,IAChB;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASK,EAAc;AAAA,EACE,GAAGZ;AACL,GAAyD;AAC9E,2BAAQC,EAAiB,QAAjB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;"}

package/ScrollArea/ScrollArea.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollArea(props: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    slotProps?: {
+        viewport?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>;
+    };
+}): import("react/jsx-runtime").JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
 export { ScrollArea, ScrollBar, ScrollAreaPrimitive };
 //# sourceMappingURL=ScrollArea.d.ts.map

package/ScrollArea/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,iBAAS,UAAU,CAAC,EACE,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAiB3E;AAED,iBAAS,SAAS,CAAC,EACE,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBzF;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,iBAAS,UAAU,CACjB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IAC7D,SAAS,CAAC,EAAE;QACV,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,QAAQ,CAAC,CAAC;KACtE,CAAA;CACF,2CA4BF;AAED,iBAAS,SAAS,CAAC,EACE,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBzF;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAA"}

package/ScrollArea/ScrollArea.js

@@ -1,33 +1,39 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-scroll-area";
-import { cn as t } from "@oneplatformdev/utils";
-function u({
-  className: e,
-  children: r,
-  ...a
-}) {
-  return /* @__PURE__ */ s(
+import { cn as s } from "@oneplatformdev/utils";
+function m(e) {
+  const {
+    className: r,
+    children: a,
+    slotProps: t,
+    ...c
+  } = e;
+  return /* @__PURE__ */ i(
     o.Root,
     {
       "data-slot": "scroll-area",
-      className: t("relative", e),
-      ...a,
+      className: s("relative", r),
+      ...c,
       children: [
         /* @__PURE__ */ l(
           o.Viewport,
           {
+            ...t?.viewport || {},
             "data-slot": "scroll-area-viewport",
-            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-            children: r
+            className: s(
+              "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+              t?.viewport?.className
+            ),
+            children: a
           }
         ),
-        /* @__PURE__ */ l(i, {}),
+        /* @__PURE__ */ l(n, {}),
         /* @__PURE__ */ l(o.Corner, {})
       ]
     }
   );
 }
-function i({
+function n({
   className: e,
   orientation: r = "vertical",
   ...a
@@ -37,7 +43,7 @@ function i({
     {
       "data-slot": "scroll-area-scrollbar",
       orientation: r,
-      className: t(
+      className: s(
         "flex touch-none p-px transition-colors select-none",
         r === "vertical" && "h-full w-2.5 border-l border-l-transparent",
         r === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
@@ -55,8 +61,8 @@ function i({
   );
 }
 export {
-  u as ScrollArea,
+  m as ScrollArea,
   o as ScrollAreaPrimitive,
-  i as ScrollBar
+  n as ScrollBar
 };
 //# sourceMappingURL=ScrollArea.js.map

package/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction ScrollArea({\n                      className,\n                      children,\n                      ...props\n                    }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n                     className,\n                     orientation = \"vertical\",\n                     ...props\n                   }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n        \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar, ScrollAreaPrimitive }\n"],"names":["ScrollArea","className","children","props","jsxs","ScrollAreaPrimitive","cn","jsx","ScrollBar","orientation"],"mappings":";;;AAOA,SAASA,EAAW;AAAA,EACE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAA0D;AAC5E,SACE,gBAAAC;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,YAAYL,CAAS;AAAA,MAClC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACF,EAAoB;AAAA,UAApB;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAH;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEFM,GAAA,EAAU;AAAA,QACX,gBAAAD,EAACF,EAAoB,QAApB,CAAA,CAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,SAASG,EAAU;AAAA,EACE,WAAAP;AAAA,EACA,aAAAQ,IAAc;AAAA,EACd,GAAGN;AACL,GAAyE;AAC1F,SACE,gBAAAI;AAAA,IAACF,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,aAAAI;AAAA,MACA,WAAWH;AAAA,QACT;AAAA,QACAG,MAAgB,cAChB;AAAA,QACAA,MAAgB,gBAChB;AAAA,QACAR;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAI;AAAA,QAACF,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction ScrollArea(\n  props: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n    slotProps?: {\n      viewport?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>;\n    }\n  }\n) {\n  const {\n    className,\n    children,\n    slotProps,\n    ...rest\n  } = props;\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...rest}\n    >\n      <ScrollAreaPrimitive.Viewport\n        {...slotProps?.viewport || {}}\n        data-slot=\"scroll-area-viewport\"\n        className={cn(\n          \"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\",\n          slotProps?.viewport?.className\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n                     className,\n                     orientation = \"vertical\",\n                     ...props\n                   }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n        \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar, ScrollAreaPrimitive }\n"],"names":["ScrollArea","props","className","children","slotProps","rest","jsxs","ScrollAreaPrimitive","cn","jsx","ScrollBar","orientation"],"mappings":";;;AAOA,SAASA,EACPC,GAKA;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDJ;AACJ,SACE,gBAAAK;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,YAAYN,CAAS;AAAA,MAClC,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACF,EAAoB;AAAA,UAApB;AAAA,YACE,GAAGH,GAAW,YAAY,CAAA;AAAA,YAC3B,aAAU;AAAA,YACV,WAAWI;AAAA,cACT;AAAA,cACAJ,GAAW,UAAU;AAAA,YAAA;AAAA,YAGtB,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEFO,GAAA,EAAU;AAAA,QACX,gBAAAD,EAACF,EAAoB,QAApB,CAAA,CAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,SAASG,EAAU;AAAA,EACE,WAAAR;AAAA,EACA,aAAAS,IAAc;AAAA,EACd,GAAGV;AACL,GAAyE;AAC1F,SACE,gBAAAQ;AAAA,IAACF,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,aAAAI;AAAA,MACA,WAAWH;AAAA,QACT;AAAA,QACAG,MAAgB,cAChB;AAAA,QACAA,MAAgB,gBAChB;AAAA,QACAT;AAAA,MAAA;AAAA,MAED,GAAGD;AAAA,MAEJ,UAAA,gBAAAQ;AAAA,QAACF,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;"}

package/Search/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../src/Search/Search.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAgDxC,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../src/Search/Search.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAgExC,CAAC"}

package/Search/Search.js

@@ -1,48 +1,57 @@
 import { jsx as t } from "react/jsx-runtime";
-import { useState as g, useEffect as v } from "react";
-import { Input as C } from "../Input/Input.js";
-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 L = (n) => {
+import { useState as y, useRef as C, useEffect as k, useCallback as b } from "react";
+import { Input as v } from "../Input/Input.js";
+import { useDebounceCallback as x, useEventListener as D } from "@oneplatformdev/hooks";
+import { cn as I } from "@oneplatformdev/utils";
+import { SearchIcon as K } from "lucide-react";
+import { LoadedIcon as L } from "../LoadedIcon/LoadedIcon.js";
+const z = (s) => {
   const {
-    search: e,
+    search: o,
     onChange: c,
-    onSearch: s,
-    placeholder: m = "Search",
-    className: l,
-    loading: h = !1,
-    slotProps: o,
-    name: i = "search",
+    onSearch: l,
+    placeholder: i = "Search",
+    className: u,
+    loading: m = !1,
+    slotProps: r,
+    name: f = "search",
     ...p
-  } = n, [u, a] = g(e), f = b(s, 1e3), d = (r) => {
-    const S = r.target.value;
-    a(S), c?.(r), f(r.target.value);
+  } = s, [d, n] = y(o), h = x(l, 1e3), a = C(null), w = (e) => {
+    const g = e.target.value;
+    n(g), c?.(e), h(e.target.value);
   };
-  return v(() => {
-    a(e ?? "");
-  }, [e]), /* @__PURE__ */ t(
-    C,
+  k(() => {
+    n(o ?? "");
+  }, [o]);
+  const S = b((e) => {
+    (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), a.current?.focus());
+  }, []);
+  return D(
+    "keydown",
+    S,
+    typeof window < "u" ? window : void 0
+  ), /* @__PURE__ */ t(
+    v,
     {
-      name: i,
-      placeholder: m,
-      value: u,
-      className: x("min-w-[340px]", l),
-      onChange: d,
+      ref: a,
+      name: f,
+      placeholder: i,
+      value: d,
+      className: I("min-w-[340px]", u),
+      onChange: w,
       ...p,
-      ...o || {},
+      ...r || {},
       slotProps: {
-        ...o || {},
+        ...r || {},
         input: {
-          startAdornment: /* @__PURE__ */ t(N, { loading: h, children: /* @__PURE__ */ t(I, {}) }),
-          ...o?.input || {}
+          startAdornment: /* @__PURE__ */ t(L, { loading: m, children: /* @__PURE__ */ t(K, {}) }),
+          ...r?.input || {}
         }
       }
     }
   );
 };
 export {
-  L as Search
+  z as Search
 };
 //# sourceMappingURL=Search.js.map