@oneplatformdev/ui 0.1.99-beta.9 → 0.1.99-beta.90

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 E = (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,
-    onChange: s,
-    onSearch: c,
-    placeholder: m = "Search",
-    className: i,
-    loading: l = !1,
-    slotProps: o,
-    name: h = "search",
+    search: o,
+    onChange: c,
+    onSearch: l,
+    placeholder: i = "Search",
+    className: u,
+    loading: m = !1,
+    slotProps: r,
+    name: f = "search",
     ...p
-  } = n, [u, a] = g(e), f = b(c, 1e3), d = (r) => {
-    const S = r.target.value;
-    a(S), s?.(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: h,
-      placeholder: m,
-      value: u,
-      className: x("min-w-[340px]", i),
-      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: l, size: "sm", children: /* @__PURE__ */ t(I, {}) }),
-          ...o?.input || {}
+          startAdornment: /* @__PURE__ */ t(L, { loading: m, children: /* @__PURE__ */ t(K, {}) }),
+          ...r?.input || {}
         }
       }
     }
   );
 };
 export {
-  E as Search
+  z 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, KeyboardEvent, useRef, useCallback } from 'react';\n\nimport { Input } from '../Input';\nimport { SearchProps } from './Search.types';\n\nimport { useDebounceCallback, useEventListener } 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 inputRef = useRef<HTMLInputElement>(null);\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  const handleKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n      event.preventDefault();\n      inputRef.current?.focus();\n    }\n  }, []);\n\n  useEventListener(\n    'keydown',\n    handleKeyDown,\n    typeof window !== 'undefined' ? window : undefined\n  );\n\n  return (\n    <Input\n      ref={inputRef}\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","inputRef","useRef","onChange","v","useEffect","handleKeyDown","useCallback","event","useEventListener","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,CAAEU,GAAQC,CAAU,IAAIC,EAASX,CAAa,GAC9CY,IAAYC,EAAoBX,GAAU,GAAI,GAE9CY,IAAWC,EAAyB,IAAI,GAExCC,IAAW,CAAC,MAAqC;AACrD,UAAMC,IAAI,EAAE,OAAO;AACnB,IAAAP,EAAUO,CAAC,GACXhB,IAAe,CAAC,GAChBW,EAAU,EAAE,OAAO,KAAK;AAAA,EAC1B;AAEA,EAAAM,EAAU,MAAM;AACd,IAAAR,EAAUV,KAAiB,EAAE;AAAA,EAC/B,GAAG,CAAEA,CAAc,CAAC;AAEpB,QAAMmB,IAAgBC,EAAY,CAACC,MAA2C;AAC5E,KAAKA,EAAM,WAAWA,EAAM,YAAYA,EAAM,IAAI,YAAA,MAAkB,QAClEA,EAAM,eAAA,GACNP,EAAS,SAAS,MAAA;AAAA,EAEtB,GAAG,CAAA,CAAE;AAEL,SAAAQ;AAAA,IACE;AAAA,IACAH;AAAA,IACA,OAAO,SAAW,MAAc,SAAS;AAAA,EAAA,GAIzC,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKV;AAAA,MACL,MAAAP;AAAA,MACA,aAAAJ;AAAA,MACA,OAAOM;AAAA,MACP,WAAWgB,EAAG,iBAAiBrB,CAAS;AAAA,MACxC,UAAAY;AAAA,MACC,GAAGR;AAAA,MACH,GAAIF,KAAa,CAAA;AAAA,MAClB,WAAW;AAAA,QACT,GAAIA,KAAa,CAAA;AAAA,QACjB,OAAO;AAAA,UACL,gBACE,gBAAAiB,EAACG,GAAA,EAAW,SAAArB,GACV,UAAA,gBAAAkB,EAACI,KAAU,GACb;AAAA,UAEF,GAAIrB,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/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,WAAW,EAIZ,MAAM,WAAW,CAAC;AAkGnB,eAAO,MAAM,MAAM,GAAI,gBAAgB,EACrC,OAAO,WAAW,CAAC,gBAAgB,CAAC,4CAwCrC,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,WAAW,EAIZ,MAAM,WAAW,CAAC;AAkGnB,eAAO,MAAM,MAAM,GAAI,gBAAgB,EACrC,OAAO,WAAW,CAAC,gBAAgB,CAAC,4CAiDrC,CAAC"}

package/Select/Select.js

@@ -1,90 +1,95 @@
-import { jsxs as u, jsx as r, Fragment as g } from "react/jsx-runtime";
-import { createElement as m } from "react";
-import { Button as h } from "../Button/Button.js";
+import { jsxs as u, jsx as o, Fragment as y } from "react/jsx-runtime";
+import { useMemo as S, createElement as p } from "react";
+import { Button as v } from "../Button/Button.js";
 import "../Button/buttonVariants.js";
-import { SelectRoot as x, SelectContent as v, SelectTrigger as y, SelectValue as S, SelectItem as b } from "./SelectRoot.js";
-import { cn as C } from "@oneplatformdev/utils";
-const N = (e) => {
-  const { placeholder: n, renderTrigger: t, slotProps: l } = e, o = /* @__PURE__ */ r(y, { ...l?.triggerProps || {}, children: /* @__PURE__ */ r(S, { placeholder: n }) });
-  return t && typeof t == "function" ? t(e, o) : o;
-}, a = (e) => {
-  const { children: n, child: t, option: l, deep: o = 0, className: c, style: i = {} } = e;
+import { SelectRoot as b, SelectContent as C, SelectTrigger as O, SelectValue as N, SelectItem as P } from "./SelectRoot.js";
+import { cn as R } from "@oneplatformdev/utils";
+const k = (e) => {
+  const { placeholder: n, renderTrigger: t, slotProps: l } = e, r = /* @__PURE__ */ o(O, { ...l?.triggerProps || {}, children: /* @__PURE__ */ o(N, { placeholder: n }) });
+  return t && typeof t == "function" ? t(e, r) : r;
+}, s = (e) => {
+  const { children: n, child: t, option: l, deep: r = 0, className: c, style: a = {} } = e;
   return /* @__PURE__ */ u(
-    b,
+    P,
     {
       value: l.value ?? "",
       disabled: l.disabled,
-      className: C("cursor-pointer", c),
-      style: { paddingLeft: `calc(8px + ${(o || 0) * 8}px)`, ...i || {} },
+      className: R("cursor-pointer", c),
+      style: { paddingLeft: `calc(8px + ${(r || 0) * 8}px)`, ...a || {} },
       children: [
         n,
         !t && l.label,
-        t && /* @__PURE__ */ r(g, { children: typeof t == "function" ? t({ ...e }) : t })
+        t && /* @__PURE__ */ o(y, { children: typeof t == "function" ? t({ ...e }) : t })
       ]
     },
     l.value
   );
-}, p = (e) => {
-  const { renderOption: n, option: t, index: l, options: o, deep: c = 0, ...i } = e;
-  return n ? n && typeof n != "function" ? /* @__PURE__ */ r(a, { ...e }) : n && typeof n == "function" ? n(
+}, g = (e) => {
+  const { renderOption: n, option: t, index: l, options: r, deep: c = 0, ...a } = e;
+  return n ? n && typeof n != "function" ? /* @__PURE__ */ o(s, { ...e }) : n && typeof n == "function" ? n(
     t,
     l,
-    o,
-    { ...i, options: o },
-    /* @__PURE__ */ r(a, { ...e })
+    r,
+    { ...a, options: r },
+    /* @__PURE__ */ o(s, { ...e })
   ) : t.children?.length ? /* @__PURE__ */ u(
     "div",
     {
       className: "flex flex-col gap-1 truncate line-clamp-2",
       children: [
-        /* @__PURE__ */ r(a, { ...e }),
-        t.children?.map((d, s, f) => /* @__PURE__ */ m(
-          p,
+        /* @__PURE__ */ o(s, { ...e }),
+        t.children?.map((d, f, m) => /* @__PURE__ */ p(
+          g,
           {
             ...e,
             key: d.value,
             option: d,
-            options: f,
-            index: s,
+            options: m,
+            index: f,
             deep: (c || 0) + 1
           }
         ))
       ]
     },
     t.value
-  ) : /* @__PURE__ */ r(a, { ...e }) : /* @__PURE__ */ r(a, { ...e });
-}, B = (e) => {
+  ) : /* @__PURE__ */ o(s, { ...e }) : /* @__PURE__ */ o(s, { ...e });
+}, z = (e) => {
   const {
     value: n,
-    options: t,
-    onChange: l,
-    nullable: o = !1,
-    clearLabel: c = "Clear",
-    disabled: i,
-    slotProps: d
-  } = e;
-  return /* @__PURE__ */ u(x, { value: n, onValueChange: l, disabled: i, children: [
-    /* @__PURE__ */ r(N, { ...e }),
-    /* @__PURE__ */ u(v, { ...d?.selectProps || {}, children: [
-      o && /* @__PURE__ */ r(
-        h,
+    options: t = [],
+    filterOption: l,
+    filterOptions: r,
+    onChange: c,
+    nullable: a = !1,
+    clearLabel: d = "Clear",
+    disabled: f,
+    slotProps: m
+  } = e, h = S(() => {
+    let i = t;
+    return l && (i = i.filter(l)), r && (i = r(i)), i;
+  }, [t, r]);
+  return /* @__PURE__ */ u(b, { value: n, onValueChange: c, disabled: f, children: [
+    /* @__PURE__ */ o(k, { ...e }),
+    /* @__PURE__ */ u(C, { ...m?.selectProps || {}, children: [
+      a && /* @__PURE__ */ o(
+        v,
         {
           className: "w-full px-2",
-          variant: "secondary",
+          color: "secondary",
           size: "sm",
           onClick: () => {
-            l?.("");
+            c?.("");
           },
-          children: c
+          children: d
         }
       ),
-      t.map((s, f) => /* @__PURE__ */ m(
-        p,
+      h.map((i, x) => /* @__PURE__ */ p(
+        g,
         {
           ...e,
-          key: s.value,
-          option: s,
-          index: f,
+          key: i.value,
+          option: i,
+          index: x,
           deep: 0
         }
       ))
@@ -92,6 +97,6 @@ const N = (e) => {
   ] });
 };
 export {
-  B as Select
+  z as Select
 };
 //# sourceMappingURL=Select.js.map

package/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\n\nimport { Button } from '../Button';\nimport {\n  SelectContent,\n  SelectItem,\n  SelectOption,\n  SelectProps,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n} from '../Select';\nimport { cn } from '@oneplatformdev/utils';\n\nconst RenderSelectTrigger = <ExtendOptionData,>(\n  props: SelectProps<ExtendOptionData>\n) => {\n  const { placeholder, renderTrigger, slotProps } = props;\n  const defaultComponent = (\n    <SelectTrigger {...(slotProps?.triggerProps || {})}>\n      <SelectValue placeholder={placeholder} />\n    </SelectTrigger>\n  );\n\n  if (Boolean(renderTrigger) && typeof renderTrigger === 'function') {\n    return renderTrigger(props, defaultComponent);\n  }\n\n  return defaultComponent;\n};\n\nconst DefaultRenderSelectOption = <ExtendOptionData,>(\n  props: SelectProps<ExtendOptionData> & {\n    option: SelectOption<ExtendOptionData>;\n    index: number;\n    deep?: number;\n    child?: ((params: SelectProps<ExtendOptionData> & {\n      option: SelectOption<ExtendOptionData>;\n      index: number;\n    }) => ReactNode) | ReactNode;\n  } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\n) => {\n  const { children, child, option, deep = 0, className, style = {} } = props;\n\n  return (\n    <SelectItem\n      key={option.value}\n      value={option.value ?? ''}\n      disabled={option.disabled}\n      className={cn('cursor-pointer', className)}\n      style={{ paddingLeft: `calc(8px + ${(deep || 0) * 8}px)`, ...(style || {}) }}\n    >\n      {children}\n      {!child && option.label}\n      {child && (\n        <>\n          {typeof child === 'function'\n            ? child({ ...props })\n            : child\n          }\n        </>\n      )}\n    </SelectItem>\n  )\n};\n\nconst RenderSelectOption = <ExtendOptionData,>(\n  props: SelectProps<ExtendOptionData> & {\n    option: SelectOption<ExtendOptionData>;\n    index: number;\n    deep?: number;\n  }\n) => {\n  const { renderOption, option, index, options, deep = 0, ...rest } = props;\n  if(!renderOption) return <DefaultRenderSelectOption {...props} />;\n  if(renderOption && typeof renderOption !== 'function') return <DefaultRenderSelectOption {...props} />;\n  if(renderOption && typeof renderOption === 'function') return renderOption(\n    option,\n    index,\n    options,\n    { ...rest, options },\n    <DefaultRenderSelectOption {...props} />\n  )\n\n  if(!option.children?.length) {\n    return <DefaultRenderSelectOption {...props} />;\n  }\n\n  return (\n    <div\n      key={option.value}\n      className=\"flex flex-col gap-1 truncate line-clamp-2\"\n    >\n      <DefaultRenderSelectOption {...props} />\n      {option.children?.map((child, idx, arr) => (\n        <RenderSelectOption\n          {...props}\n          key={child.value}\n          option={child}\n          options={arr}\n          index={idx}\n          deep={(deep || 0) + 1}\n        />\n      ))}\n    </div>\n  )\n};\n\n// TODO: add description\nexport const Select = <ExtendOptionData,>(\n  props: SelectProps<ExtendOptionData>\n) => {\n  const {\n    value,\n    options,\n    onChange,\n    nullable = false,\n    clearLabel = 'Clear',\n    disabled,\n    slotProps,\n  } = props;\n\n  return (\n    <SelectRoot value={value} onValueChange={onChange} disabled={disabled}>\n      <RenderSelectTrigger {...props} />\n      <SelectContent {...(slotProps?.selectProps || {})}>\n        {nullable && (\n          <Button\n            className=\"w-full px-2\"\n            variant=\"secondary\"\n            size=\"sm\"\n            onClick={() => {\n              onChange?.('');\n            }}\n          >\n            {clearLabel}\n          </Button>\n        )}\n        {options.map((option, index) => (\n          <RenderSelectOption\n            {...props}\n            key={option.value}\n            option={option}\n            index={index}\n            deep={0}\n          />\n        ))}\n      </SelectContent>\n    </SelectRoot>\n  );\n};\n"],"names":["RenderSelectTrigger","props","placeholder","renderTrigger","slotProps","defaultComponent","jsx","SelectTrigger","SelectValue","DefaultRenderSelectOption","children","child","option","deep","className","style","jsxs","SelectItem","cn","Fragment","RenderSelectOption","renderOption","index","options","rest","idx","arr","createElement","Select","value","onChange","nullable","clearLabel","disabled","SelectRoot","SelectContent","Button"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useMemo } from 'react';\n\nimport { Button } from '../Button';\nimport {\n  SelectContent,\n  SelectItem,\n  SelectOption,\n  SelectProps,\n  SelectRoot,\n  SelectTrigger,\n  SelectValue,\n} from '../Select';\nimport { cn } from '@oneplatformdev/utils';\n\nconst RenderSelectTrigger = <ExtendOptionData, >(\n  props: SelectProps<ExtendOptionData>\n) => {\n  const { placeholder, renderTrigger, slotProps } = props;\n  const defaultComponent = (\n    <SelectTrigger {...(slotProps?.triggerProps || {})}>\n      <SelectValue placeholder={placeholder}/>\n    </SelectTrigger>\n  );\n\n  if (Boolean(renderTrigger) && typeof renderTrigger === 'function') {\n    return renderTrigger(props, defaultComponent);\n  }\n\n  return defaultComponent;\n};\n\nconst DefaultRenderSelectOption = <ExtendOptionData, >(\n  props: SelectProps<ExtendOptionData> & {\n    option: SelectOption<ExtendOptionData>;\n    index: number;\n    deep?: number;\n    child?: ((params: SelectProps<ExtendOptionData> & {\n      option: SelectOption<ExtendOptionData>;\n      index: number;\n    }) => ReactNode) | ReactNode;\n  } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\n) => {\n  const { children, child, option, deep = 0, className, style = {} } = props;\n\n  return (\n    <SelectItem\n      key={option.value}\n      value={option.value ?? ''}\n      disabled={option.disabled}\n      className={cn('cursor-pointer', className)}\n      style={{ paddingLeft: `calc(8px + ${(deep || 0) * 8}px)`, ...(style || {}) }}\n    >\n      {children}\n      {!child && option.label}\n      {child && (\n        <>\n          {typeof child === 'function'\n            ? child({ ...props })\n            : child\n          }\n        </>\n      )}\n    </SelectItem>\n  )\n};\n\nconst RenderSelectOption = <ExtendOptionData, >(\n  props: SelectProps<ExtendOptionData> & {\n    option: SelectOption<ExtendOptionData>;\n    index: number;\n    deep?: number;\n  }\n) => {\n  const { renderOption, option, index, options, deep = 0, ...rest } = props;\n  if (!renderOption) return <DefaultRenderSelectOption {...props} />;\n  if (renderOption && typeof renderOption !== 'function') return <DefaultRenderSelectOption {...props} />;\n  if (renderOption && typeof renderOption === 'function') return renderOption(\n    option,\n    index,\n    options,\n    { ...rest, options },\n    <DefaultRenderSelectOption {...props} />\n  )\n\n  if (!option.children?.length) {\n    return <DefaultRenderSelectOption {...props} />;\n  }\n\n  return (\n    <div\n      key={option.value}\n      className=\"flex flex-col gap-1 truncate line-clamp-2\"\n    >\n      <DefaultRenderSelectOption {...props} />\n      {option.children?.map((child, idx, arr) => (\n        <RenderSelectOption\n          {...props}\n          key={child.value}\n          option={child}\n          options={arr}\n          index={idx}\n          deep={(deep || 0) + 1}\n        />\n      ))}\n    </div>\n  )\n};\n\n// TODO: add description\nexport const Select = <ExtendOptionData, >(\n  props: SelectProps<ExtendOptionData>\n) => {\n  const {\n    value,\n    options: initialOptions = [],\n    filterOption,\n    filterOptions,\n    onChange,\n    nullable = false,\n    clearLabel = 'Clear',\n    disabled,\n    slotProps,\n  } = props;\n\n  const options = useMemo(() => {\n    let opt = initialOptions;\n    if(filterOption) opt = opt.filter(filterOption);\n    if(filterOptions) opt =  filterOptions(opt);\n    return opt;\n  }, [ initialOptions, filterOptions ]);\n\n  return (\n    <SelectRoot value={value} onValueChange={onChange} disabled={disabled}>\n      <RenderSelectTrigger {...props} />\n      <SelectContent {...(slotProps?.selectProps || {})}>\n        {nullable && (\n          <Button\n            className=\"w-full px-2\"\n            color=\"secondary\"\n            size=\"sm\"\n            onClick={() => {\n              onChange?.('');\n            }}\n          >\n            {clearLabel}\n          </Button>\n        )}\n        {options.map((option, index) => (\n          <RenderSelectOption\n            {...props}\n            key={option.value}\n            option={option}\n            index={index}\n            deep={0}\n          />\n        ))}\n      </SelectContent>\n    </SelectRoot>\n  );\n};\n"],"names":["RenderSelectTrigger","props","placeholder","renderTrigger","slotProps","defaultComponent","jsx","SelectTrigger","SelectValue","DefaultRenderSelectOption","children","child","option","deep","className","style","jsxs","SelectItem","cn","Fragment","RenderSelectOption","renderOption","index","options","rest","idx","arr","createElement","Select","value","initialOptions","filterOption","filterOptions","onChange","nullable","clearLabel","disabled","useMemo","opt","SelectRoot","SelectContent","Button"],"mappings":"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"}

package/Select/Select.types.d.ts

@@ -13,6 +13,10 @@ export type SelectRenderOption<ExtendOptionData> = (option: SelectOption<ExtendO
 export interface SelectProps<ExtendOptionData> {
     /** Render options. */
     options: SelectOption<ExtendOptionData>[];
+    /** Filter options handler */
+    filterOptions?: (options: SelectOption<ExtendOptionData>[]) => SelectOption<ExtendOptionData>[];
+    /** Filter option handler */
+    filterOption?: (option: SelectOption<ExtendOptionData>, index: number, options: SelectOption<ExtendOptionData>[]) => boolean;
     /** Current value. */
     value?: SelectOption<ExtendOptionData>['value'];
     /** Select placeholder string. */

package/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YAAY,CAAC,gBAAgB,GAAG,OAAO;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;CAC7C;AAED,MAAM,MAAM,mBAAmB,CAAC,gBAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,eAAe,CAAC,EAAE,gBAAgB,EAAE,SAAS,KAAK,SAAS,CAAC;AAE5J,MAAM,MAAM,kBAAkB,CAAC,gBAAgB,IAAI,CACjD,MAAM,EAAE,YAAY,CAAC,gBAAgB,CAAC,EACtC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,EACzC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,cAAc,CAAC,EAC1D,gBAAgB,EAAE,SAAS,KACxB,YAAY,CAAC;AAElB,MAAM,WAAW,WAAW,CAAC,gBAAgB;IAC3C,sBAAsB;IACtB,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAC1C,qBAAqB;IACrB,KAAK,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;IAChD,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACtD,4BAA4B;IAC5B,YAAY,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACpD,wBAAwB;IACxB,SAAS,CAAC,EAAE;QACV,mCAAmC;QACnC,YAAY,CAAC,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;QACxE,2BAA2B;QAC3B,WAAW,CAAC,EAAE,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAC;KAC9D,CAAC;CACH"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,YAAY,CAAC,gBAAgB,GAAG,OAAO;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;CAC7C;AAED,MAAM,MAAM,mBAAmB,CAAC,gBAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,eAAe,CAAC,EAAE,gBAAgB,EAAE,SAAS,KAAK,SAAS,CAAC;AAE5J,MAAM,MAAM,kBAAkB,CAAC,gBAAgB,IAAI,CACjD,MAAM,EAAE,YAAY,CAAC,gBAAgB,CAAC,EACtC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,EACzC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,cAAc,CAAC,EAC1D,gBAAgB,EAAE,SAAS,KACxB,YAAY,CAAC;AAElB,MAAM,WAAW,WAAW,CAAC,gBAAgB;IAC3C,sBAAsB;IACtB,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAC1C,6BAA6B;IAC7B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,KAAK,YAAY,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAChG,4BAA4B;IAC5B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,KAAK,OAAO,CAAC;IAC7H,qBAAqB;IACrB,KAAK,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;IAChD,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACtD,4BAA4B;IAC5B,YAAY,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACpD,wBAAwB;IACxB,SAAS,CAAC,EAAE;QACV,mCAAmC;QACnC,YAAY,CAAC,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;QACxE,2BAA2B;QAC3B,WAAW,CAAC,EAAE,wBAAwB,CAAC,OAAO,aAAa,CAAC,CAAC;KAC9D,CAAC;CACH"}

package/Select/SelectRoot.js

@@ -31,7 +31,7 @@ function y(e) {
       "data-slot": "select-trigger",
       "data-size": o,
       className: s(
-        "flex w-inherit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
+        "flex w-inherit items-center justify-between gap-2 rounded-lg bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs",
         "border border-input outline-none",
         "data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 transition-[color,box-shadow] focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "cursor-pointer",

package/Select/SelectRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction SelectRoot({\n                  ...props\n                }: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n                       ...props\n                     }: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n                       ...props\n                     }: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger(props: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\";\n  showIcon?: boolean;\n}) {\n  const {\n    className,\n    size = \"default\",\n    children,\n    showIcon = true,\n    ...rest\n  } = props\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        'flex w-inherit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs',\n        'border border-input outline-none',\n        \"data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 transition-[color,box-shadow] focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        'cursor-pointer',\n        'disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n      {showIcon && (\n        <SelectPrimitive.Icon asChild>\n          <ChevronDownIcon className=\"size-4 opacity-50\" />\n        </SelectPrimitive.Icon>\n      )}\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n                         className,\n                         children,\n                         position = \"popper\",\n                         align = \"center\",\n                         ...props\n                       }: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          'p-1 rounded-xl shadow-md',\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n                       className,\n                       ...props\n                     }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n                      className,\n                      children,\n                      ...props\n                    }: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n                           className,\n                           ...props\n                         }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n                                className,\n                                ...props\n                              }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n                                  className,\n                                  ...props\n                                }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  SelectRoot,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectPrimitive,\n}\n"],"names":["SelectRoot","props","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","size","children","showIcon","rest","jsxs","cn","jsx","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":"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"}
+{"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction SelectRoot({\n                  ...props\n                }: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n                       ...props\n                     }: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n                       ...props\n                     }: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger(props: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\";\n  showIcon?: boolean;\n}) {\n  const {\n    className,\n    size = \"default\",\n    children,\n    showIcon = true,\n    ...rest\n  } = props\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        'flex w-inherit items-center justify-between gap-2 rounded-lg bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs',\n        'border border-input outline-none',\n        \"data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 transition-[color,box-shadow] focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        'cursor-pointer',\n        'disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n      {showIcon && (\n        <SelectPrimitive.Icon asChild>\n          <ChevronDownIcon className=\"size-4 opacity-50\" />\n        </SelectPrimitive.Icon>\n      )}\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n                         className,\n                         children,\n                         position = \"popper\",\n                         align = \"center\",\n                         ...props\n                       }: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          'p-1 rounded-xl shadow-md',\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n                       className,\n                       ...props\n                     }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n                      className,\n                      children,\n                      ...props\n                    }: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n                           className,\n                           ...props\n                         }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n                                className,\n                                ...props\n                              }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n                                  className,\n                                  ...props\n                                }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  SelectRoot,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  SelectPrimitive,\n}\n"],"names":["SelectRoot","props","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","size","children","showIcon","rest","jsxs","cn","jsx","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":"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"}

package/TablePagination/TablePagination.js

@@ -1,30 +1,31 @@
 import { jsxs as i, jsx as n } from "react/jsx-runtime";
 import { Button as o } from "../Button/Button.js";
 import "../Button/buttonVariants.js";
+import "react";
 import "@radix-ui/react-select";
 import "lucide-react";
 import "@oneplatformdev/utils";
 import { Select as P } from "../Select/Select.js";
-const L = ({
+const M = ({
   offset: l,
   limit: a,
-  totalRows: s,
+  totalRows: t,
   setLimit: p,
-  setOffset: t,
+  setOffset: s,
   tRowsPerPage: m = "Rows per page",
   tPrevious: d = "Previous",
   tPage: u = "Page",
   tNext: x = "Next",
   tOf: v = "Of"
 }) => {
-  const r = Math.ceil(l / a) + 1, c = Math.ceil(s / a), h = r === c, b = (e) => {
-    t(0), p(parseInt(e));
+  const r = Math.ceil(l / a) + 1, c = Math.ceil(t / a), h = r === c, b = (e) => {
+    s(0), p(parseInt(e));
   }, g = () => {
     let e = l - a;
-    e < 0 && (e = 0), t(e);
+    e < 0 && (e = 0), s(e);
   }, N = () => {
     let e = l + a;
-    e > s && (e = s - a), t(e);
+    e > t && (e = t - a), s(e);
   };
   return /* @__PURE__ */ i("div", { className: "flex items-center justify-end space-x-2 py-4", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
@@ -72,6 +73,6 @@ const L = ({
   ] });
 };
 export {
-  L as TablePagination
+  M as TablePagination
 };
 //# sourceMappingURL=TablePagination.js.map

package/TablePagination/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","sources":["../../src/TablePagination/TablePagination.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button';\nimport { Select } from '../Select';\nimport { FC } from 'react';\n\ninterface IProps {\n  limit: number;\n  offset: number;\n  totalRows: number;\n  setLimit: (limit: number) => void;\n  setOffset: (offset: number) => void;\n  tRowsPerPage?: string;\n  tPrevious?: string;\n  tPage?:string;\n  tNext?:string;\n  tOf?:string\n}\n\nexport const TablePagination: FC<IProps> = ({\n  offset,\n  limit,\n  totalRows,\n  setLimit,\n  setOffset,\n  tRowsPerPage= \"Rows per page\",\n  tPrevious= \"Previous\",\n  tPage= \"Page\",\n  tNext= \"Next\",\n  tOf= \"Of\",\n}) => {\n  const currentPage = Math.ceil(offset / limit) + 1;\n  const totalPages = Math.ceil(totalRows / limit);\n  const isLastPage = currentPage === totalPages;\n\n  const onChangeLimit = (value: string) => {\n    setOffset(0);\n    setLimit(parseInt(value));\n  };\n\n  const onPrevious = () => {\n    let nextOffset = offset - limit;\n    if (nextOffset < 0) {\n      nextOffset = 0;\n    }\n    setOffset(nextOffset);\n  };\n\n  const onNext = () => {\n    let nextOffset = offset + limit;\n    if (nextOffset > totalRows) {\n      nextOffset = totalRows - limit;\n    }\n    setOffset(nextOffset);\n  };\n\n  return (\n    <div className=\"flex items-center justify-end space-x-2 py-4\">\n      <div className=\"flex items-center space-x-2\">\n        <span className=\"text-sm text-nowrap\">{tRowsPerPage}</span>\n        <Select\n          value={limit?.toString()}\n          options={[\n            { value: '5', label: '5' },\n            { value: '10', label: '10' },\n            { value: '20', label: '20' },\n            { value: '30', label: '30' },\n            { value: '50', label: '50' },\n          ]}\n          onChange={onChangeLimit}\n          placeholder=\"6\"\n          nullable={false}\n        />\n      </div>\n      <div className=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={!offset}\n          onClick={onPrevious}\n        >\n          {tPrevious}\n        </Button>\n        <span className=\"text-sm\">{`${tPage} ${currentPage} ${tOf} ${totalPages}`}</span>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={isLastPage}\n          onClick={onNext}\n        >\n          {tNext}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["TablePagination","offset","limit","totalRows","setLimit","setOffset","tRowsPerPage","tPrevious","tPage","tNext","tOf","currentPage","totalPages","isLastPage","onChangeLimit","value","onPrevious","nextOffset","onNext","jsxs","jsx","Select","Button"],"mappings":";;;;;;;AAmBO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAc;AAAA,EACd,WAAAC,IAAW;AAAA,EACX,OAAAC,IAAO;AAAA,EACP,OAAAC,IAAO;AAAA,EACP,KAAAC,IAAK;AACP,MAAM;AACJ,QAAMC,IAAc,KAAK,KAAKV,IAASC,CAAK,IAAI,GAC1CU,IAAa,KAAK,KAAKT,IAAYD,CAAK,GACxCW,IAAaF,MAAgBC,GAE7BE,IAAgB,CAACC,MAAkB;AACvC,IAAAV,EAAU,CAAC,GACXD,EAAS,SAASW,CAAK,CAAC;AAAA,EAC1B,GAEMC,IAAa,MAAM;AACvB,QAAIC,IAAahB,IAASC;AAC1B,IAAIe,IAAa,MACfA,IAAa,IAEfZ,EAAUY,CAAU;AAAA,EACtB,GAEMC,IAAS,MAAM;AACnB,QAAID,IAAahB,IAASC;AAC1B,IAAIe,IAAad,MACfc,IAAad,IAAYD,IAE3BG,EAAUY,CAAU;AAAA,EACtB;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAd,GAAa;AAAA,MACpD,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAOnB,GAAO,SAAA;AAAA,UACd,SAAS;AAAA,YACP,EAAE,OAAO,KAAK,OAAO,IAAA;AAAA,YACrB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,YACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,YACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,YACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,UAAK;AAAA,UAE7B,UAAUY;AAAA,UACV,aAAY;AAAA,UACZ,UAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IACA,gBAAAK,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAACrB;AAAA,UACX,SAASe;AAAA,UAER,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAa,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,GAAGZ,CAAK,IAAIG,CAAW,IAAID,CAAG,IAAIE,CAAU,IAAG;AAAA,MAC1E,gBAAAQ;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAUT;AAAA,UACV,SAASK;AAAA,UAER,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"TablePagination.js","sources":["../../src/TablePagination/TablePagination.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button';\nimport { Select } from '../Select';\nimport { FC } from 'react';\n\ninterface IProps {\n  limit: number;\n  offset: number;\n  totalRows: number;\n  setLimit: (limit: number) => void;\n  setOffset: (offset: number) => void;\n  tRowsPerPage?: string;\n  tPrevious?: string;\n  tPage?:string;\n  tNext?:string;\n  tOf?:string\n}\n\nexport const TablePagination: FC<IProps> = ({\n  offset,\n  limit,\n  totalRows,\n  setLimit,\n  setOffset,\n  tRowsPerPage= \"Rows per page\",\n  tPrevious= \"Previous\",\n  tPage= \"Page\",\n  tNext= \"Next\",\n  tOf= \"Of\",\n}) => {\n  const currentPage = Math.ceil(offset / limit) + 1;\n  const totalPages = Math.ceil(totalRows / limit);\n  const isLastPage = currentPage === totalPages;\n\n  const onChangeLimit = (value: string) => {\n    setOffset(0);\n    setLimit(parseInt(value));\n  };\n\n  const onPrevious = () => {\n    let nextOffset = offset - limit;\n    if (nextOffset < 0) {\n      nextOffset = 0;\n    }\n    setOffset(nextOffset);\n  };\n\n  const onNext = () => {\n    let nextOffset = offset + limit;\n    if (nextOffset > totalRows) {\n      nextOffset = totalRows - limit;\n    }\n    setOffset(nextOffset);\n  };\n\n  return (\n    <div className=\"flex items-center justify-end space-x-2 py-4\">\n      <div className=\"flex items-center space-x-2\">\n        <span className=\"text-sm text-nowrap\">{tRowsPerPage}</span>\n        <Select\n          value={limit?.toString()}\n          options={[\n            { value: '5', label: '5' },\n            { value: '10', label: '10' },\n            { value: '20', label: '20' },\n            { value: '30', label: '30' },\n            { value: '50', label: '50' },\n          ]}\n          onChange={onChangeLimit}\n          placeholder=\"6\"\n          nullable={false}\n        />\n      </div>\n      <div className=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={!offset}\n          onClick={onPrevious}\n        >\n          {tPrevious}\n        </Button>\n        <span className=\"text-sm\">{`${tPage} ${currentPage} ${tOf} ${totalPages}`}</span>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={isLastPage}\n          onClick={onNext}\n        >\n          {tNext}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["TablePagination","offset","limit","totalRows","setLimit","setOffset","tRowsPerPage","tPrevious","tPage","tNext","tOf","currentPage","totalPages","isLastPage","onChangeLimit","value","onPrevious","nextOffset","onNext","jsxs","jsx","Select","Button"],"mappings":";;;;;;;;AAmBO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAc;AAAA,EACd,WAAAC,IAAW;AAAA,EACX,OAAAC,IAAO;AAAA,EACP,OAAAC,IAAO;AAAA,EACP,KAAAC,IAAK;AACP,MAAM;AACJ,QAAMC,IAAc,KAAK,KAAKV,IAASC,CAAK,IAAI,GAC1CU,IAAa,KAAK,KAAKT,IAAYD,CAAK,GACxCW,IAAaF,MAAgBC,GAE7BE,IAAgB,CAACC,MAAkB;AACvC,IAAAV,EAAU,CAAC,GACXD,EAAS,SAASW,CAAK,CAAC;AAAA,EAC1B,GAEMC,IAAa,MAAM;AACvB,QAAIC,IAAahB,IAASC;AAC1B,IAAIe,IAAa,MACfA,IAAa,IAEfZ,EAAUY,CAAU;AAAA,EACtB,GAEMC,IAAS,MAAM;AACnB,QAAID,IAAahB,IAASC;AAC1B,IAAIe,IAAad,MACfc,IAAad,IAAYD,IAE3BG,EAAUY,CAAU;AAAA,EACtB;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAd,GAAa;AAAA,MACpD,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAOnB,GAAO,SAAA;AAAA,UACd,SAAS;AAAA,YACP,EAAE,OAAO,KAAK,OAAO,IAAA;AAAA,YACrB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,YACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,YACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,YACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,UAAK;AAAA,UAE7B,UAAUY;AAAA,UACV,aAAY;AAAA,UACZ,UAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IACA,gBAAAK,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAACrB;AAAA,UACX,SAASe;AAAA,UAER,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAa,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,GAAGZ,CAAK,IAAIG,CAAW,IAAID,CAAG,IAAIE,CAAU,IAAG;AAAA,MAC1E,gBAAAQ;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAUT;AAAA,UACV,SAASK;AAAA,UAER,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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 p, 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,
+      className: g,
+      value: r = "",
+      maxHeight: a = Number.MAX_SAFE_INTEGER,
       minHeight: i = 40,
-      resizeble: f = !0,
+      resizeble: x = !1,
       counter: s = !1,
       id: n = "",
-      ...r
-    } = u, a = A(), e = v(null), [x, g] = 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(() => {
-      g(t);
-    }, [r?.defaultValue, t]), /* @__PURE__ */ l(p, { 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-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