@oneplatformdev/ui 0.0.1-beta.64 → 0.0.1-beta.67

package/Button/buttonVariants.mjs

@@ -1,5 +1,5 @@
 import { cva as e } from "class-variance-authority";
-const r = e(
+const t = 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: {
@@ -20,10 +20,10 @@ const r = e(
     },
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "lg"
     }
   }
 );
 export {
-  r as buttonVariants
+  t as buttonVariants
 };

package/Checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
+import { CheckboxLabelProps, CheckboxProps } from './Checkbox.types.ts';
 import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Checkbox };
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+declare const CheckboxLabel: React.ForwardRefExoticComponent<CheckboxLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { Checkbox, CheckboxLabel };

package/Checkbox/Checkbox.mjs

@@ -1,27 +1,54 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as s from "react";
-import * as r from "@radix-ui/react-checkbox";
-import { Check as c } from "lucide-react";
-import { cn as o } from "@oneplatformdev/utils";
-const d = s.forwardRef(({ className: i, ...t }, a) => /* @__PURE__ */ e(
-  r.Root,
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-checkbox";
+import { MinusIcon as l, CheckIcon as h } from "lucide-react";
+import * as m from "react";
+import { cn as a } from "@oneplatformdev/utils";
+import { Label as u } from "../Label/Label.mjs";
+import "../Label/labelVariants.mjs";
+const d = m.forwardRef(({ className: t, checked: c, indeterminate: e, ...i }, o) => {
+  const f = e ? l : h;
+  return /* @__PURE__ */ r(
+    s.Root,
+    {
+      ref: o,
+      className: a(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        t
+      ),
+      ...i,
+      checked: c || e,
+      children: /* @__PURE__ */ r(
+        s.Indicator,
+        {
+          className: a("flex items-center justify-center text-current"),
+          children: /* @__PURE__ */ r(f, { className: "h-4 w-4" })
+        }
+      )
+    }
+  );
+});
+d.displayName = s.Root.displayName;
+const x = m.forwardRef(({ label: t = "", children: c, labelProps: e, ...i }, o) => /* @__PURE__ */ n(
+  u,
   {
-    ref: a,
-    className: o(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      i
+    ref: o,
+    ...e,
+    className: a(
+      "flex w-full items-start gap-3 font-normal py-3 cursor-pointer",
+      e == null ? void 0 : e.className
     ),
-    ...t,
-    children: /* @__PURE__ */ e(
-      r.Indicator,
-      {
-        className: o("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ e(c, { className: "h-4 w-4" })
-      }
-    )
+    style: e == null ? void 0 : e.style,
+    children: [
+      /* @__PURE__ */ r(d, { ...i }),
+      /* @__PURE__ */ n("div", { className: "flex flex-col w-full gap-3", children: [
+        /* @__PURE__ */ r("span", { className: "flex flex-col justify-start leading-[16px]", children: t }),
+        c
+      ] })
+    ]
   }
 ));
-d.displayName = r.Root.displayName;
+x.displayName = "CheckboxLabel";
 export {
-  d as Checkbox
+  d as Checkbox,
+  x as CheckboxLabel
 };

package/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,10 @@
+import { Label } from '../Label/Label';
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    indeterminate?: boolean;
+}
+export interface CheckboxLabelProps extends CheckboxProps {
+    label?: string;
+    labelProps?: React.ComponentPropsWithoutRef<typeof Label>;
+}

package/Checkbox/index.d.ts

@@ -1 +1,2 @@
-export * from './Checkbox';
+export * from './Checkbox.tsx';
+export type * from './Checkbox.types.ts';

package/Checkbox/index.mjs

@@ -1,4 +1,5 @@
-import { Checkbox as r } from "./Checkbox.mjs";
+import { Checkbox as b, CheckboxLabel as x } from "./Checkbox.mjs";
 export {
-  r as Checkbox
+  b as Checkbox,
+  x as CheckboxLabel
 };

package/Combobox/Combobox.d.ts

@@ -1,4 +1,4 @@
 import { ComboboxProps } from './Combobox.types';
-import { FC } from 'react';
+import { default as React } from 'react';
 
-export declare const Combobox: FC<ComboboxProps>;
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;

package/Combobox/Combobox.mjs

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

package/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;

package/Dialog/Dialog.mjs

@@ -1,9 +1,9 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import * as l from "react";
 import * as e from "@radix-ui/react-dialog";
 import { X as c } from "lucide-react";
 import { cn as i } from "@oneplatformdev/utils";
-const b = e.Root, h = e.Trigger, m = e.Portal, v = e.Close, d = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+const b = e.Root, h = e.Trigger, m = e.Portal, w = e.Close, n = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
@@ -14,21 +14,23 @@ const b = e.Root, h = e.Trigger, m = e.Portal, v = e.Close, d = l.forwardRef(({
     ...t
   }
 ));
-d.displayName = e.Overlay.displayName;
-const f = l.forwardRef(({ className: a, children: t, ...s }, r) => /* @__PURE__ */ n(m, { children: [
-  /* @__PURE__ */ o(d, {}),
-  /* @__PURE__ */ n(
+n.displayName = e.Overlay.displayName;
+const f = l.forwardRef(({ className: a, children: t, ...s }, r) => /* @__PURE__ */ d(m, { children: [
+  /* @__PURE__ */ o(n, {}),
+  /* @__PURE__ */ d(
     e.Content,
     {
       ref: r,
       className: i(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "max-w-[90%] max-h-[90%] overflow-hidden",
+        "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
         a
       ),
       ...s,
       children: [
         t,
-        /* @__PURE__ */ n(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        /* @__PURE__ */ d(e.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ o(c, { className: "h-4 w-4" }),
           /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
         ] })
@@ -77,7 +79,7 @@ const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   }
 ));
 u.displayName = e.Title.displayName;
-const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+const x = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
@@ -85,15 +87,15 @@ const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
     ...t
   }
 ));
-y.displayName = e.Description.displayName;
+x.displayName = e.Description.displayName;
 export {
   b as Dialog,
-  v as DialogClose,
+  w as DialogClose,
   f as DialogContent,
-  y as DialogDescription,
+  x as DialogDescription,
   g as DialogFooter,
   p as DialogHeader,
-  d as DialogOverlay,
+  n as DialogOverlay,
   m as DialogPortal,
   u as DialogTitle,
   h as DialogTrigger

package/FormCheckbox/FormCheckbox.d.ts

@@ -1,4 +1,4 @@
-import { FieldValues } from 'react-hook-form';
 import { FormCheckboxProps } from './FormCheckbox.types';
+import { FieldValues } from 'react-hook-form';
 
 export declare const FormCheckbox: <Data extends FieldValues>(props: FormCheckboxProps<Data>) => import("react/jsx-runtime").JSX.Element;

package/FormCheckbox/FormCheckbox.mjs

@@ -1,30 +1,30 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { Checkbox as l } from "../Checkbox/Checkbox.mjs";
-import { FormLabel as h } from "../Form/Form.mjs";
-import { FormRenderControl as d } from "../Form/FormRenderControl.mjs";
-const b = (o) => {
-  const { form: m, label: n, name: t, disabled: a, ...c } = o;
-  return /* @__PURE__ */ r(
-    d,
+import { jsx as e } from "react/jsx-runtime";
+import { FormControl as h } from "../Form/Form.mjs";
+import { FormRenderControl as p } from "../Form/FormRenderControl.mjs";
+import { CheckboxLabel as s } from "../Checkbox/Checkbox.mjs";
+const i = (t) => {
+  const { form: c, label: a, name: l, onCheckedChange: o, ...m } = t;
+  return /* @__PURE__ */ e(
+    p,
     {
-      form: m,
-      name: t,
-      render: ({ field: e }) => /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mt-4", children: [
-        /* @__PURE__ */ r(
-          l,
-          {
-            ...e,
-            checked: e.value || !1,
-            onCheckedChange: e.onChange,
-            disabled: a
+      form: c,
+      name: l,
+      render: ({ field: r }) => /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
+        s,
+        {
+          ...r,
+          ...m,
+          label: a,
+          checked: r.value || !1,
+          onCheckedChange: (n) => {
+            r.onChange(n), o == null || o(n);
           }
-        ),
-        /* @__PURE__ */ r(h, { children: n })
-      ] }),
-      ...c
+        }
+      ) }),
+      ...m
     }
   );
 };
 export {
-  b as FormCheckbox
+  i as FormCheckbox
 };

package/FormCheckbox/FormCheckbox.types.d.ts

@@ -1,6 +1,7 @@
-import { FieldValues } from 'react-hook-form';
 import { FormRenderControlExtendProps } from '../Form';
+import { FieldValues } from 'react-hook-form';
+import { CheckboxProps } from '../Checkbox';
 
-export interface FormCheckboxProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data> {
+export interface FormCheckboxProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, Omit<CheckboxProps, 'form' | 'name' | 'label'> {
     disabled?: boolean;
 }

package/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import('class-variance-authority/dist/types').ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/Label/labelVariants.mjs

@@ -1,6 +1,6 @@
 import { cva as e } from "class-variance-authority";
 const a = e(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-md text-[#363B4E] font-medium leading-[150%] peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 export {
   a as labelVariants

package/LazyLoader/LazyLoader.mjs

@@ -1,7 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Suspense as m } from "react";
-import { LoadingMask as t } from "../LoadingMask/LoadingMask.mjs";
-const p = (r, a = !0) => (e) => /* @__PURE__ */ o(m, { fallback: a ? /* @__PURE__ */ o(t, {}) : null, children: /* @__PURE__ */ o(r, { ...e }) });
+import { Suspense as a } from "react";
+import { LoadingMask as e } from "../LoadingMask/LoadingMask.mjs";
+import "../LoadingMask/RenderLoadingMask.mjs";
+const s = (r, m = !0) => (t) => /* @__PURE__ */ o(a, { fallback: m ? /* @__PURE__ */ o(e, {}) : null, children: /* @__PURE__ */ o(r, { ...t }) });
 export {
-  p as LazyLoader
+  s as LazyLoader
 };

package/LoadingMask/LoadingMask.d.ts

@@ -1 +1,4 @@
-export declare const LoadingMask: () => import("react/jsx-runtime").JSX.Element;
+import { ILoadingMaskProps } from './LoadingMask.types';
+import { FC } from 'react';
+
+export declare const LoadingMask: FC<ILoadingMaskProps>;

package/LoadingMask/LoadingMask.mjs

@@ -1,59 +1,21 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-const t = () => /* @__PURE__ */ r("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ o(
-  "svg",
-  {
-    className: "h-8 w-8 animate-spin text-gray-900 dark:text-gray-50",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ r("path", { d: "M12 4.75V6.25", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M17.1475 6.8525L16.0625 7.9375",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
+import { jsx as e } from "react/jsx-runtime";
+import { RenderLoadingMask as r } from "./RenderLoadingMask.mjs";
+import { cn as o } from "@oneplatformdev/utils";
+const f = (t) => {
+  const { fullWidth: s = !1, className: i, ...n } = t;
+  return s ? /* @__PURE__ */ e(
+    "div",
+    {
+      ...n,
+      className: o(
+        "absolute inset-0",
+        "flex items-center justify-center",
+        i
       ),
-      /* @__PURE__ */ r("path", { d: "M19.25 12H17.75", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M17.1475 17.1475L16.0625 16.0625",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ r("path", { d: "M12 17.75V19.25", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M6.8525 17.1475L7.9375 16.0625",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ r("path", { d: "M4.75 12H6.25", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M6.8525 6.8525L7.9375 7.9375",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ]
-  }
-) });
+      children: /* @__PURE__ */ e(r, {})
+    }
+  ) : /* @__PURE__ */ e(r, {});
+};
 export {
-  t as LoadingMask
+  f as LoadingMask
 };

package/LoadingMask/LoadingMask.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+export interface ILoadingMaskProps extends HTMLAttributes<HTMLDivElement> {
+    fullWidth?: boolean;
+}

package/LoadingMask/RenderLoadingMask.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+
+export declare const RenderLoadingMask: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;