@oneplatformdev/ui 0.0.1-beta.5 → 0.0.1-beta.51

package/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/Accordion/Accordion.mjs

@@ -1,46 +1,49 @@
 import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import * as i from "react";
+import * as s from "react";
 import * as e from "@radix-ui/react-accordion";
 import { ChevronDown as m } from "lucide-react";
-import { cn as s } from "@oneplatformdev/utils";
-const g = e.Root, c = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
+import { cn as c } from "@oneplatformdev/utils";
+const u = e.Root, l = s.forwardRef(({ className: t, ...o }, r) => /* @__PURE__ */ a(
   e.Item,
   {
     ref: r,
-    className: s("border-b", o),
-    ...t
+    className: c("border-b", t),
+    ...o
   }
 ));
-c.displayName = "AccordionItem";
-const l = i.forwardRef(({ className: o, children: t, ...r }, n) => /* @__PURE__ */ a(e.Header, { className: "flex", children: /* @__PURE__ */ d(
+l.displayName = "AccordionItem";
+const f = s.forwardRef(({ className: t, children: o, ...r }, i) => /* @__PURE__ */ a(e.Header, { className: "flex", children: /* @__PURE__ */ d(
   e.Trigger,
   {
-    ref: n,
-    className: s(
+    ref: i,
+    className: c(
       "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
-      o
+      t
     ),
+    onKeyDown: (n) => {
+      n.key === " " && n.target === n.currentTarget && n.preventDefault();
+    },
     ...r,
     children: [
-      t,
+      o,
       /* @__PURE__ */ a(m, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
     ]
   }
 ) }));
-l.displayName = e.Trigger.displayName;
-const f = i.forwardRef(({ className: o, children: t, ...r }, n) => /* @__PURE__ */ a(
+f.displayName = e.Trigger.displayName;
+const p = s.forwardRef(({ className: t, children: o, ...r }, i) => /* @__PURE__ */ a(
   e.Content,
   {
-    ref: n,
+    ref: i,
     className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...r,
-    children: /* @__PURE__ */ a("div", { className: s("pb-4 pt-0", o), children: t })
+    children: /* @__PURE__ */ a("div", { className: c("pb-4 pt-0", t), children: o })
   }
 ));
-f.displayName = e.Content.displayName;
+p.displayName = e.Content.displayName;
 export {
-  g as Accordion,
-  f as AccordionContent,
-  c as AccordionItem,
-  l as AccordionTrigger
+  u as Accordion,
+  p as AccordionContent,
+  l as AccordionItem,
+  f as AccordionTrigger
 };

package/AlertDialog/AlertDialog.mjs

@@ -1,99 +1,97 @@
-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(
+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(
     r,
     {
       ...r.props || {},
-      ...o
+      ...i
     }
-  ) : 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) => {
+  ) : /* @__PURE__ */ t(v, { asChild: !0, children: r });
+}, H = (o) => {
   const {
     title: e = "",
     description: r = "",
-    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(
+    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(
       e,
       { ...e.props || {}, ...d }
     ) : /* @__PURE__ */ t(B, { ...d, children: e }),
-    r && l(r, R) ? a(
+    r && s(r, R) ? a(
       r,
-      { ...r.props || {}, ...s }
-    ) : /* @__PURE__ */ t(R, { ...s, children: r })
+      { ...r.props || {}, ...c }
+    ) : /* @__PURE__ */ t(R, { ...c, children: r })
   ] });
-}, L = (n) => {
+}, I = (o) => {
   const {
     slotProps: e = {},
     children: r,
-    onCancel: o,
-    onConfirm: c,
-    cancelLabel: i = "Cancel",
+    onCancel: i,
+    onConfirm: l,
+    cancelLabel: n = "Cancel",
     actionLabel: d = "Continue",
-    variant: s = "confirm"
-  } = n, T = y(), D = e.footer ?? {}, b = e.cancelButton ?? {}, P = e.actionButton ?? {};
-  return r ? l(r, A) ? a(
+    variant: c = "confirm"
+  } = o, x = j(), m = e.footer ?? {}, T = e.cancelButton ?? {}, C = e.actionButton ?? {};
+  return r ? s(r, A) ? a(
     r,
-    { ...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(
+    { ...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(
       k,
       {
         variant: "ghost",
-        onClick: o,
-        ...b,
-        children: i
+        onClick: i,
+        ...T,
+        children: n
       }
     ),
     /* @__PURE__ */ t(
-      C,
+      D,
       {
-        onClick: c,
-        ...P,
-        variant: P.variant || s === "destructive" ? "destructive" : "default",
+        onClick: l,
+        ...C,
+        variant: C.variant || c === "destructive" ? "destructive" : "default",
         children: d
       }
     )
   ] });
-}, J = (n) => {
+}, w = (o) => {
   const {
     trigger: e,
     header: r,
-    footer: o,
-    slotProps: c = {},
-    children: i,
+    footer: i,
+    slotProps: l = {},
+    children: n,
     ...d
-  } = n, s = c.content ?? {};
-  return /* @__PURE__ */ u(F, { ...d, children: [
-    /* @__PURE__ */ t(H, { ...n, children: e }),
-    i ? l(i, h) ? a(
-      i,
+  } = o, c = l.content ?? {};
+  return /* @__PURE__ */ g(E, { ...d, children: [
+    /* @__PURE__ */ t(F, { ...o, children: e }),
+    n ? s(n, u) ? a(
+      n,
       {
-        ...i.props || {},
-        ...s
+        ...n.props || {},
+        ...c
       }
-    ) : /* @__PURE__ */ t(h, { ...s, children: i }) : /* @__PURE__ */ u(h, { ...s, children: [
-      /* @__PURE__ */ t(I, { ...n, children: r }),
-      /* @__PURE__ */ t(L, { ...n, children: o })
+    ) : /* @__PURE__ */ t(u, { ...c, children: n }) : /* @__PURE__ */ g(u, { ...c, children: [
+      /* @__PURE__ */ t(H, { ...o, children: r }),
+      /* @__PURE__ */ t(I, { ...o, children: i })
     ] })
   ] });
 };
 export {
-  J as AlertDialog,
-  J as default
+  w as AlertDialog,
+  w as default
 };

package/Button/buttonVariants.mjs

@@ -1,10 +1,10 @@
 import { cva as e } from "class-variance-authority";
-const t = e(
+const r = e(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground shadow hover:opacity-[.8]",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
@@ -13,8 +13,8 @@ const t = e(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        sm: "h-8 rounded-md px-3 text-xs [&_svg]:size-4",
+        lg: "h-10 rounded-md px-8 [&_svg]:size-5 px-3 py-2",
         icon: "h-9 w-9"
       }
     },
@@ -25,5 +25,5 @@ const t = e(
   }
 );
 export {
-  t as buttonVariants
+  r as buttonVariants
 };

package/Calendar/Calendar.mjs

@@ -16,10 +16,11 @@ function u({
       showOutsideDays: c,
       className: e("p-3", n),
       classNames: {
+        caption_dropdowns: "flex flex-col gap-1",
         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
+        caption: "flex justify-center pt-1 relative items-center gap-4",
+        caption_label: "text-sm font-medium hidden",
         nav: "space-x-1 flex items-center",
         nav_button: e(
           o({ variant: "outline" }),

package/Combobox/Combobox.mjs

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

package/Combobox/Combobox.types.d.ts

@@ -1,7 +1,12 @@
+import { Dispatch, ReactNode, 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;
@@ -10,6 +15,10 @@ export interface ComboboxProps {
     disabled?: boolean;
     fetchOptions: (search?: string) => Promise<ComboboxOption[]>;
     options?: ComboboxOption[];
-    /** CommandEmpty label*/
+    /** Command Empty list label*/
     emptyLabel?: string;
+    /** Command Empty list action */
+    emptyAction?: ((params: ComboboxPropsOnMountParams) => ReactNode) | ReactNode;
+    /** Callback for load data on start component */
+    onMount?: (params: ComboboxPropsOnMountParams) => Promise<void>;
 }

package/Command/Command.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from '@radix-ui/react-dialog';
-import * as React from "react";
+import * as React from 'react';
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {