@oneplatformdev/ui 0.0.1-beta.18 → 0.0.1-beta.3

package/AlertDialog/AlertDialog.d.ts

@@ -6,10 +6,6 @@ import { FC, PropsWithChildren } from 'react';
  * @public
  * @see [Documentation](#)
  * @example
- * > Import:
- * ```tsx
- *    import { AlertDialog } from '@oneplatformdev/ui/AlertDialog';
- * ```
  * > Simple example:
  * ```tsx
  *    <AlertDialog
@@ -29,16 +25,6 @@ import { FC, PropsWithChildren } from 'react';
  *         onConfirm={(event) => console.log(event, 'Confirm')}
  *       />
  * ```
- * > Trigger example: Button with icon children
- * ```tsx
- *      <AlertDialog
- *         trigger={<Button variant="outline" size="icon"><PencilLine /></Button>}
- *         title="Dialog title with icon trigger"
- *         description="Description text..."
- *         onCancel={(event) => console.log(event, 'Cancel')}
- *         onConfirm={(event) => console.log(event, 'Confirm')}
- *       />
- * ```
  *
  * > Full content example:
  * ```tsx

package/AlertDialog/AlertDialog.mjs

@@ -1,97 +1,99 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { cloneElement as a, useId as j, Children as y } from "react";
-import { AlertDialogRoot as E, AlertDialogContent as u, AlertDialogTrigger as v, AlertDialogHeader as f, AlertDialogTitle as B, AlertDialogDescription as R, AlertDialogFooter as A, AlertDialogAction as D, AlertDialogCancel as k } from "./AlertDialogRoot.mjs";
-import { isValidReactElement as s } from "@oneplatformdev/utils";
-const F = (o) => {
-  const { slotProps: e = {}, children: r } = o, i = e.trigger ?? {};
-  return s(r, v) ? a(
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { cloneElement as a, useId as y, Children as E } from "react";
+import { AlertDialogRoot as F, AlertDialogContent as h, AlertDialogTrigger as f, AlertDialogHeader as m, AlertDialogTitle as B, AlertDialogDescription as R, AlertDialogFooter as A, AlertDialogAction as C, AlertDialogCancel as k } from "./AlertDialogRoot.mjs";
+import { Button as x } from "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+import { isValidReactElement as l } from "@oneplatformdev/utils";
+const H = (n) => {
+  const { slotProps: e = {}, children: r } = n, o = e.trigger ?? {};
+  return l(r, f) ? a(
     r,
     {
       ...r.props || {},
-      ...i
+      ...o
     }
-  ) : /* @__PURE__ */ t(v, { asChild: !0, children: r });
-}, H = (o) => {
+  ) : l(r, x) ? /* @__PURE__ */ t(f, { asChild: !0, ...o, children: r }) : /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(x, { variant: "outline", ...o, children: r }) });
+}, I = (n) => {
   const {
     title: e = "",
     description: r = "",
-    slotProps: i = {},
-    children: l
-  } = o, n = i.header ?? {}, d = i.title ?? {}, c = i.description ?? {};
-  return l ? s(l, f) ? a(
-    l,
-    { ...l.props || {}, ...n }
-  ) : /* @__PURE__ */ t(f, { ...n, children: l }) : /* @__PURE__ */ g(f, { children: [
-    e && s(e, B) ? a(
+    slotProps: o = {},
+    children: c
+  } = n, i = o.header ?? {}, d = o.title ?? {}, s = o.description ?? {};
+  return c ? l(c, m) ? a(
+    c,
+    { ...c.props || {}, ...i }
+  ) : /* @__PURE__ */ t(m, { ...i, children: c }) : /* @__PURE__ */ u(m, { children: [
+    e && l(e, B) ? a(
       e,
       { ...e.props || {}, ...d }
     ) : /* @__PURE__ */ t(B, { ...d, children: e }),
-    r && s(r, R) ? a(
+    r && l(r, R) ? a(
       r,
-      { ...r.props || {}, ...c }
-    ) : /* @__PURE__ */ t(R, { ...c, children: r })
+      { ...r.props || {}, ...s }
+    ) : /* @__PURE__ */ t(R, { ...s, children: r })
   ] });
-}, I = (o) => {
+}, L = (n) => {
   const {
     slotProps: e = {},
     children: r,
-    onCancel: i,
-    onConfirm: l,
-    cancelLabel: n = "Cancel",
+    onCancel: o,
+    onConfirm: c,
+    cancelLabel: i = "Cancel",
     actionLabel: d = "Continue",
-    variant: c = "confirm"
-  } = o, x = j(), m = e.footer ?? {}, T = e.cancelButton ?? {}, C = e.actionButton ?? {};
-  return r ? s(r, A) ? a(
+    variant: s = "confirm"
+  } = n, T = y(), D = e.footer ?? {}, b = e.cancelButton ?? {}, P = e.actionButton ?? {};
+  return r ? l(r, A) ? a(
     r,
-    { ...r.props || {}, ...m }
-  ) : /* @__PURE__ */ t(A, { ...m, children: y.map(r, (p, b) => {
-    if (!p || !s(p)) return;
-    const h = p, P = a(h, { ...h.props || {}, key: h.key || `footer-${x}-action-${b}` });
-    return s(p, D) || s(p, k) ? P : /* @__PURE__ */ t(D, { asChild: !0, children: P });
-  }) }) : /* @__PURE__ */ g(A, { children: [
-    c !== "alert" && /* @__PURE__ */ t(
+    { ...r.props || {}, ...D }
+  ) : /* @__PURE__ */ t(A, { ...D, children: E.map(r, (p, j) => {
+    if (!p || !l(p)) return;
+    const g = p, v = a(g, { ...g.props || {}, key: g.key || `footer-${T}-action-${j}` });
+    return l(p, C) || l(p, k) ? v : /* @__PURE__ */ t(C, { asChild: !0, children: v });
+  }) }) : /* @__PURE__ */ u(A, { children: [
+    s !== "alert" && /* @__PURE__ */ t(
       k,
       {
         variant: "ghost",
-        onClick: i,
-        ...T,
-        children: n
+        onClick: o,
+        ...b,
+        children: i
       }
     ),
     /* @__PURE__ */ t(
-      D,
+      C,
       {
-        onClick: l,
-        ...C,
-        variant: C.variant || c === "destructive" ? "destructive" : "default",
+        onClick: c,
+        ...P,
+        variant: P.variant || s === "destructive" ? "destructive" : "default",
         children: d
       }
     )
   ] });
-}, w = (o) => {
+}, J = (n) => {
   const {
     trigger: e,
     header: r,
-    footer: i,
-    slotProps: l = {},
-    children: n,
+    footer: o,
+    slotProps: c = {},
+    children: i,
     ...d
-  } = o, c = l.content ?? {};
-  return /* @__PURE__ */ g(E, { ...d, children: [
-    /* @__PURE__ */ t(F, { ...o, children: e }),
-    n ? s(n, u) ? a(
-      n,
+  } = n, s = c.content ?? {};
+  return /* @__PURE__ */ u(F, { ...d, children: [
+    /* @__PURE__ */ t(H, { ...n, children: e }),
+    i ? l(i, h) ? a(
+      i,
       {
-        ...n.props || {},
-        ...c
+        ...i.props || {},
+        ...s
       }
-    ) : /* @__PURE__ */ t(u, { ...c, children: n }) : /* @__PURE__ */ g(u, { ...c, children: [
-      /* @__PURE__ */ t(H, { ...o, children: r }),
-      /* @__PURE__ */ t(I, { ...o, children: i })
+    ) : /* @__PURE__ */ t(h, { ...s, children: i }) : /* @__PURE__ */ u(h, { ...s, children: [
+      /* @__PURE__ */ t(I, { ...n, children: r }),
+      /* @__PURE__ */ t(L, { ...n, children: o })
     ] })
   ] });
 };
 export {
-  w as AlertDialog,
-  w as default
+  J as AlertDialog,
+  J as default
 };

package/Combobox/Combobox.mjs

@@ -1,120 +1,109 @@
 import { jsx as a, jsxs as t } from "react/jsx-runtime";
-import n, { useRef as U, useEffect as w, useCallback as _ } from "react";
-import { LoadingMask as B } from "../LoadingMask/LoadingMask.mjs";
-import { Popover as F, PopoverTrigger as G, PopoverContent as V } from "../Popover/Popover.mjs";
-import { Button as W } from "../Button/Button.mjs";
+import n, { useEffect as E } from "react";
+import { LoadingMask as I } from "../LoadingMask/LoadingMask.mjs";
+import { Popover as U, PopoverTrigger as _, PopoverContent as B } from "../Popover/Popover.mjs";
+import { Button as F } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import { Command as X, CommandInput as q, CommandList as z, CommandEmpty as A, CommandGroup as H, CommandItem as J } from "../Command/Command.mjs";
-import { cn as x } from "@oneplatformdev/utils";
-import { useDebounceCallback as K } from "@oneplatformdev/hooks";
-import { X as Q, ChevronsUpDown as Y, Check as Z } from "lucide-react";
-const ie = (N) => {
-  var y;
+import { Command as G, CommandInput as M, CommandList as R, CommandEmpty as V, CommandGroup as W, CommandItem as X } from "../Command/Command.mjs";
+import { cn as g } from "@oneplatformdev/utils";
+import { useDebounceCallback as q } from "@oneplatformdev/hooks";
+import { X as z, ChevronsUpDown as A, Check as H } from "lucide-react";
+const te = (w) => {
+  var C;
   const {
     value: o,
-    onChange: S,
-    placeholder: k,
-    disabled: L,
-    searchLabel: O,
-    fetchOptions: P,
+    onChange: y,
+    placeholder: x,
+    disabled: N,
+    searchLabel: S,
+    fetchOptions: L,
     options: r,
-    emptyLabel: j = "No options",
-    onMount: s
-  } = N, c = U(!1), [l, p] = n.useState(!1), [D, h] = n.useState(""), [f, i] = n.useState([]), [d, b] = n.useState(), [v, C] = n.useState(!1);
-  w(() => {
-    r != null && r.length && i(r);
+    emptyLabel: O = "No options"
+  } = w, [l, d] = n.useState(!1), [P, m] = n.useState(""), [p, h] = n.useState([]), [s, u] = n.useState(), [f, b] = n.useState(!1);
+  E(() => {
+    r != null && r.length && h(r);
   }, [r]);
-  const M = async () => {
-    l || (g(), h(""));
-  }, g = async (e) => {
-    C(!0);
+  const j = async () => {
+    l || (v(), m(""));
+  }, v = async (e) => {
+    b(!0);
     try {
-      const u = await P(e);
-      i(u);
-    } catch (u) {
-      console.error("Unexpected error while get option:", u);
+      const i = await L(e);
+      h(i);
+    } catch (i) {
+      console.error("Unexpected error while get option:", i);
     } finally {
-      C(!1);
+      b(!1);
     }
-  }, T = K(g, 1e3), E = (e) => {
-    h(e), T(e);
-  }, m = (e) => {
-    S(e.value), b(e);
-  }, I = () => {
-    m({ value: "", label: "" }), b(void 0);
-  }, R = _(() => {
-    if (!s) {
-      c.current = !0;
-      return;
-    }
-    s({ setOptions: i }).finally(() => {
-      c.current = !0;
-    });
-  }, [s]);
-  return w(() => (R(), () => {
-    c.current = !1;
-  }), []), /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ t(
-    F,
+  }, k = q(v, 1e3), D = (e) => {
+    m(e), k(e);
+  }, c = (e) => {
+    y(e.value), u(e);
+  }, T = () => {
+    c({ value: "", label: "" }), u(void 0);
+  };
+  return /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ t(
+    U,
     {
       open: l,
       onOpenChange: (e) => {
-        p(e), e && M();
+        d(e), e && j();
       },
       children: [
-        /* @__PURE__ */ a(G, { asChild: !0, className: "border-border", children: /* @__PURE__ */ t(
-          W,
+        /* @__PURE__ */ a(_, { asChild: !0, className: "border-border", children: /* @__PURE__ */ t(
+          F,
           {
             variant: "outline",
             role: "combobox",
             "aria-expanded": l,
-            className: x(
+            className: g(
               "w-full justify-between font-normal text-sm border bg-input",
               l ? "border-2 border-sidebar-accent" : "border-border"
             ),
-            disabled: L,
+            disabled: N,
             children: [
-              /* @__PURE__ */ a("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: o ? ((y = f.find((e) => e.value === o)) == null ? void 0 : y.label) || (d == null ? void 0 : d.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: k }) }),
+              /* @__PURE__ */ a("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: o ? ((C = p.find((e) => e.value === o)) == null ? void 0 : C.label) || (s == null ? void 0 : s.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: x }) }),
               o ? /* @__PURE__ */ a(
-                Q,
+                z,
                 {
                   className: "opacity-50 w-4 h-4 cursor-pointer hover:opacity-100",
                   onClick: (e) => {
-                    e.stopPropagation(), I();
+                    e.stopPropagation(), T();
                   }
                 }
-              ) : /* @__PURE__ */ a(Y, { className: "opacity-50 w-4 h-4" })
+              ) : /* @__PURE__ */ a(A, { className: "opacity-50 w-4 h-4" })
             ]
           }
         ) }),
         /* @__PURE__ */ a(
-          V,
+          B,
           {
             className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
             align: "start",
-            children: /* @__PURE__ */ t(X, { shouldFilter: !1, children: [
+            children: /* @__PURE__ */ t(G, { shouldFilter: !1, children: [
               /* @__PURE__ */ a(
-                q,
+                M,
                 {
-                  placeholder: O,
-                  value: D,
-                  onValueChange: E
+                  placeholder: S,
+                  value: P,
+                  onValueChange: D
                 }
               ),
-              /* @__PURE__ */ t(z, { children: [
-                !v && /* @__PURE__ */ a(A, { children: j }),
-                /* @__PURE__ */ a(H, { children: v ? /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(B, {}) }) : f.map((e) => /* @__PURE__ */ t(
-                  J,
+              /* @__PURE__ */ t(R, { children: [
+                !f && /* @__PURE__ */ a(V, { children: O }),
+                /* @__PURE__ */ a(W, { children: f ? /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(I, {}) }) : p.map((e) => /* @__PURE__ */ t(
+                  X,
                   {
                     value: e.value,
                     onSelect: () => {
-                      o === e.value ? m({ value: "", label: "" }) : m(e), p(!1);
+                      o === e.value ? c({ value: "", label: "" }) : c(e), d(!1);
                     },
                     children: [
                       e.label,
                       /* @__PURE__ */ a(
-                        Z,
+                        H,
                         {
-                          className: x(
+                          className: g(
                             "ml-auto",
                             o === e.value ? "opacity-100" : "opacity-0"
                           )
@@ -133,5 +122,5 @@ const ie = (N) => {
   ) });
 };
 export {
-  ie as Combobox
+  te as Combobox
 };

package/Combobox/Combobox.types.d.ts

@@ -1,12 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
-
 export interface ComboboxOption {
     value: string;
     label: string;
 }
-export interface ComboboxPropsOnMountParams {
-    setOptions: Dispatch<SetStateAction<ComboboxOption[]>>;
-}
 export interface ComboboxProps {
     value: string;
     onChange: (value: string) => void;
@@ -17,6 +12,4 @@ export interface ComboboxProps {
     options?: ComboboxOption[];
     /** CommandEmpty label*/
     emptyLabel?: string;
-    /** Callback for load data on start component */
-    onMount?: (params: ComboboxPropsOnMountParams) => Promise<ComboboxOption[]>;
 }

package/FormInput/FormInput.mjs

@@ -1,17 +1,18 @@
 import { jsx as r } from "react/jsx-runtime";
 import { FormControl as l } from "../Form/Form.mjs";
-import { FormRenderControl as u } from "../Form/FormRenderControl.mjs";
-import { Input as a } from "../Input/Input.mjs";
-const F = (m) => {
+import { FormRenderControl as i } from "../Form/FormRenderControl.mjs";
+import "../Input/index.mjs";
+import { Input as u } from "../Input/Input.mjs";
+const d = (m) => {
   const { form: t, label: e, name: n, ...p } = m;
   return /* @__PURE__ */ r(
-    u,
+    i,
     {
       form: t,
       name: n,
       label: e,
       render: ({ field: o }) => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-        a,
+        u,
         {
           ...o,
           value: o.value || "",
@@ -22,5 +23,5 @@ const F = (m) => {
   );
 };
 export {
-  F as FormInput
+  d as FormInput
 };

package/FormSelect/FormSelect.types.d.ts

@@ -3,5 +3,5 @@ import { FormRenderControlExtendProps } from '../Form';
 import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, Omit<SelectProps<ExtendOptionData>, 'onChange'> {
+export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, SelectProps<ExtendOptionData> {
 }

package/Input/index.mjs

@@ -1,7 +1,10 @@
-import { BaseInput as u, Input as a, PasswordInput as n, Input as s } from "./Input.mjs";
+import { BaseInput as a, Input as n, PasswordInput as r, Input as u } from "./Input.mjs";
+import { inputVariants as s } from "./inputVariants.mjs";
+e;
 export {
-  u as BaseInput,
-  a as Input,
-  n as PasswordInput,
-  s as default
+  a as BaseInput,
+  n as Input,
+  r as PasswordInput,
+  u as default,
+  s as inputVariants
 };

package/Search/Search.mjs

@@ -1,9 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as S } from "react";
-import { Input as f } from "../Input/Input.mjs";
-import { useDebounceCallback as v } from "@oneplatformdev/hooks";
-import { cn as d } from "@oneplatformdev/utils";
-const j = (t) => {
+import "../Input/index.mjs";
+import { useDebounceCallback as f } from "@oneplatformdev/hooks";
+import { cn as v } from "@oneplatformdev/utils";
+import { Input as d } from "../Input/Input.mjs";
+const k = (t) => {
   const {
     search: a,
     onChange: e,
@@ -11,20 +12,20 @@ const j = (t) => {
     placeholder: s = "Search",
     className: n,
     ...m
-  } = t, [i, l] = S(a), h = v(c, 1e3), p = (r) => {
+  } = t, [i, l] = S(a), p = f(c, 1e3), h = (r) => {
     const u = r.target.value;
-    l(u), e == null || e(r), h(r.target.value);
+    l(u), e == null || e(r), p(r.target.value);
   };
-  return /* @__PURE__ */ o("div", { className: d("space-y-4", n), children: /* @__PURE__ */ o(
-    f,
+  return /* @__PURE__ */ o("div", { className: v("space-y-4", n), children: /* @__PURE__ */ o(
+    d,
     {
       placeholder: s,
       value: i,
-      onChange: p,
+      onChange: h,
       ...m
     }
   ) });
 };
 export {
-  j as Search
+  k as Search
 };

package/Sidebar/Sidebar.mjs

@@ -6,12 +6,13 @@ import { PanelLeft as k } from "lucide-react";
 import { cn as d } from "@oneplatformdev/utils";
 import { Button as E } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import { Input as z } from "../Input/Input.mjs";
-import { Separator as B } from "../Separator/Separator.mjs";
-import { Sheet as T, SheetContent as A } from "../Sheet/Sheet.mjs";
+import "../Input/index.mjs";
+import { Separator as z } from "../Separator/Separator.mjs";
+import { Sheet as B, SheetContent as T } from "../Sheet/Sheet.mjs";
 import { Skeleton as M } from "../Skeleton/Skeleton.mjs";
-import { TooltipProvider as D, TooltipTrigger as O, TooltipContent as L } from "../Tooltip/TooltipRoot.mjs";
-import { Tooltip as G } from "../Tooltip/Tooltip.mjs";
+import { TooltipProvider as A, TooltipTrigger as D, TooltipContent as O } from "../Tooltip/TooltipRoot.mjs";
+import { Tooltip as L } from "../Tooltip/Tooltip.mjs";
+import { Input as G } from "../Input/Input.mjs";
 const K = 768;
 function H(a = {}) {
   const {
@@ -66,7 +67,7 @@ const V = i.forwardRef(
       }),
       [y, g, x, c, p, u, w]
     );
-    return /* @__PURE__ */ r(R.Provider, { value: I, children: /* @__PURE__ */ r(D, { delayDuration: 0, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r(R.Provider, { value: I, children: /* @__PURE__ */ r(A, { delayDuration: 0, children: /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -107,8 +108,8 @@ const U = i.forwardRef(
         ...s,
         children: n
       }
-    ) : m ? /* @__PURE__ */ r(T, { open: p, onOpenChange: u, ...s, children: /* @__PURE__ */ r(
-      A,
+    ) : m ? /* @__PURE__ */ r(B, { open: p, onOpenChange: u, ...s, children: /* @__PURE__ */ r(
+      T,
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
@@ -228,7 +229,7 @@ const J = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
 ));
 J.displayName = "SidebarInset";
 const Q = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  z,
+  G,
   {
     ref: t,
     "data-sidebar": "input",
@@ -261,7 +262,7 @@ const ee = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
 ));
 ee.displayName = "SidebarFooter";
 const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  B,
+  z,
   {
     ref: t,
     "data-sidebar": "separator",
@@ -395,10 +396,10 @@ const le = C(
     );
     return n ? (typeof n == "string" && (n = {
       children: n
-    }), /* @__PURE__ */ S(G, { children: [
-      /* @__PURE__ */ r(O, { asChild: !0, children: v }),
+    }), /* @__PURE__ */ S(L, { children: [
+      /* @__PURE__ */ r(D, { asChild: !0, children: v }),
       /* @__PURE__ */ r(
-        L,
+        O,
         {
           side: "right",
           align: "center",