@oneplatformdev/ui 0.0.1-beta.11 → 0.0.1-beta.110

package/DataTable/DataTableColumnFilter.d.ts

@@ -0,0 +1,4 @@
+import { DataTableProps } from './DataTable.types';
+import { FC } from 'react';
+
+export declare const DataTableColumnFilter: FC<DataTableProps>;

package/DataTable/DataTableColumnFilter.mjs

@@ -0,0 +1,31 @@
+import { jsx as n, jsxs as t } from "react/jsx-runtime";
+import { ChevronDown as m } from "lucide-react";
+import { useMemo as s } from "react";
+import { Button as d } from "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+import { DropdownMenuCheckboxItem as c, DropdownMenu as u, DropdownMenuTrigger as h, DropdownMenuContent as p } from "../DropdownMenu/DropdownMenu.mjs";
+const x = (i) => {
+  const {
+    table: r,
+    columnsLabel: l = "Columns"
+  } = i, o = s(() => r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ n(
+    c,
+    {
+      className: "capitalize",
+      checked: e.getIsVisible(),
+      onCheckedChange: (a) => e.toggleVisibility(!!a),
+      children: e.id
+    },
+    e.id
+  )), [r]);
+  return o.length ? /* @__PURE__ */ t(u, { children: [
+    /* @__PURE__ */ n(h, { asChild: !0, children: /* @__PURE__ */ t(d, { variant: "outline", className: "ml-auto", children: [
+      l,
+      /* @__PURE__ */ n(m, { className: "ml-2 h-4 w-4" })
+    ] }) }),
+    /* @__PURE__ */ n(p, { align: "end", children: o })
+  ] }) : null;
+};
+export {
+  x as DataTableColumnFilter
+};

package/DatePicker/DatePicker.mjs

@@ -669,7 +669,7 @@ const J = (t, e, n) => {
           disabled: i,
           variant: "outline",
           className: C(
-            "w-full justify-start text-left font-normal border-blue-300",
+            "w-full justify-start text-left font-normal border h-10",
             !n && "text-muted-foreground"
           ),
           children: [
@@ -678,7 +678,7 @@ const J = (t, e, n) => {
           ]
         }
       ) }),
-      /* @__PURE__ */ d(L, { align: "start", className: " w-auto p-0", children: /* @__PURE__ */ d(
+      /* @__PURE__ */ d(L, { align: "start", className: "w-auto p-0", children: /* @__PURE__ */ d(
         O,
         {
           mode: "single",

package/Dialog/Dialog.d.ts

@@ -1,11 +1,13 @@
-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>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/Dialog/Dialog.mjs

@@ -1,9 +1,9 @@
 import { jsx as o, jsxs as n } 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 { X as m } 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 h = e.Root, w = e.Trigger, f = e.Portal, v = e.Close, r = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
@@ -14,30 +14,47 @@ 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, {}),
+r.displayName = e.Overlay.displayName;
+const p = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, ...d }, c) => /* @__PURE__ */ n(f, { children: [
+  /* @__PURE__ */ o(r, {}),
   /* @__PURE__ */ n(
     e.Content,
     {
-      ref: r,
+      ref: c,
       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",
+        "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,
+      ...d,
       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__ */ o(c, { className: "h-4 w-4" }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
-        ] })
+        s && /* @__PURE__ */ n(
+          e.Close,
+          {
+            className: i(
+              "absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
+              "flex items-center justify-center",
+              "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+              "opacity-70 hover:opacity-100",
+              "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              "disabled:pointer-events-none",
+              "transition-opacity"
+            ),
+            children: [
+              /* @__PURE__ */ o(m, { className: "h-4 w-4" }),
+              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
       ]
     }
   )
 ] }));
-f.displayName = e.Content.displayName;
-const p = ({
+p.displayName = e.Content.displayName;
+const g = ({
   className: a,
   ...t
 }) => /* @__PURE__ */ o(
@@ -50,8 +67,8 @@ const p = ({
     ...t
   }
 );
-p.displayName = "DialogHeader";
-const g = ({
+g.displayName = "DialogHeader";
+const u = ({
   className: a,
   ...t
 }) => /* @__PURE__ */ o(
@@ -64,8 +81,8 @@ const g = ({
     ...t
   }
 );
-g.displayName = "DialogFooter";
-const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+u.displayName = "DialogFooter";
+const x = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
@@ -76,7 +93,7 @@ const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
     ...t
   }
 ));
-u.displayName = e.Title.displayName;
+x.displayName = e.Title.displayName;
 const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Description,
   {
@@ -87,14 +104,14 @@ const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
 ));
 y.displayName = e.Description.displayName;
 export {
-  b as Dialog,
+  h as Dialog,
   v as DialogClose,
-  f as DialogContent,
+  p as DialogContent,
   y as DialogDescription,
-  g as DialogFooter,
-  p as DialogHeader,
-  d as DialogOverlay,
-  m as DialogPortal,
-  u as DialogTitle,
-  h as DialogTrigger
+  u as DialogFooter,
+  g as DialogHeader,
+  r as DialogOverlay,
+  f as DialogPortal,
+  x as DialogTitle,
+  w as DialogTrigger
 };

package/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;

package/DropdownMenu/DropdownMenu.mjs

@@ -1,9 +1,9 @@
 import { jsxs as l, jsx as n } from "react/jsx-runtime";
 import * as d from "react";
 import * as e from "@radix-ui/react-dropdown-menu";
-import { ChevronRight as c, Check as m, Circle as p } from "lucide-react";
+import { ChevronRight as c, Check as p, Circle as m } from "lucide-react";
 import { cn as r } from "@oneplatformdev/utils";
-const R = e.Root, I = e.Trigger, S = e.Group, C = e.Portal, z = e.Sub, k = e.RadioGroup, u = d.forwardRef(({ className: t, inset: o, children: a, ...s }, i) => /* @__PURE__ */ l(
+const R = e.Root, C = e.Trigger, I = e.Group, S = e.Portal, _ = e.Sub, z = e.RadioGroup, u = d.forwardRef(({ className: t, inset: o, children: a, ...s }, i) => /* @__PURE__ */ l(
   e.SubTrigger,
   {
     ref: i,
@@ -32,33 +32,37 @@ const f = d.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ n(
   }
 ));
 f.displayName = e.SubContent.displayName;
-const b = d.forwardRef(({ className: t, sideOffset: o = 4, ...a }, s) => /* @__PURE__ */ n(e.Portal, { children: /* @__PURE__ */ n(
+const g = d.forwardRef(({ className: t, sideOffset: o = 4, ...a }, s) => /* @__PURE__ */ n(e.Portal, { children: /* @__PURE__ */ n(
   e.Content,
   {
     ref: s,
     sideOffset: o,
     className: r(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "z-50 min-w-[8rem] overflow-hidden p-0.5 gap-0 text-popover-foreground",
+      "rounded-lg border border-[#DCDDE1] bg-popover",
+      "shadow-[0px_10px_20px_rgba(3,_4,_7,_0.0625)]",
       "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",
       t
     ),
     ...a
   }
 ) }));
-b.displayName = e.Content.displayName;
-const g = d.forwardRef(({ className: t, inset: o, ...a }, s) => /* @__PURE__ */ n(
+g.displayName = e.Content.displayName;
+const b = d.forwardRef(({ className: t, inset: o, ...a }, s) => /* @__PURE__ */ n(
   e.Item,
   {
     ref: s,
     className: r(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "rounded-md",
+      "px-1.5 py-2",
       o && "pl-8",
       t
     ),
     ...a
   }
 ));
-g.displayName = e.Item.displayName;
+b.displayName = e.Item.displayName;
 const w = d.forwardRef(({ className: t, children: o, checked: a, ...s }, i) => /* @__PURE__ */ l(
   e.CheckboxItem,
   {
@@ -70,13 +74,13 @@ const w = d.forwardRef(({ className: t, children: o, checked: a, ...s }, i) => /
     checked: a,
     ...s,
     children: [
-      /* @__PURE__ */ n("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(e.ItemIndicator, { children: /* @__PURE__ */ n(m, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ n("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(e.ItemIndicator, { children: /* @__PURE__ */ n(p, { className: "h-4 w-4" }) }) }),
       o
     ]
   }
 ));
 w.displayName = e.CheckboxItem.displayName;
-const h = d.forwardRef(({ className: t, children: o, ...a }, s) => /* @__PURE__ */ l(
+const x = d.forwardRef(({ className: t, children: o, ...a }, s) => /* @__PURE__ */ l(
   e.RadioItem,
   {
     ref: s,
@@ -86,13 +90,13 @@ const h = d.forwardRef(({ className: t, children: o, ...a }, s) => /* @__PURE__
     ),
     ...a,
     children: [
-      /* @__PURE__ */ n("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(e.ItemIndicator, { children: /* @__PURE__ */ n(p, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ n("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(e.ItemIndicator, { children: /* @__PURE__ */ n(m, { className: "h-2 w-2 fill-current" }) }) }),
       o
     ]
   }
 ));
-h.displayName = e.RadioItem.displayName;
-const N = d.forwardRef(({ className: t, inset: o, ...a }, s) => /* @__PURE__ */ n(
+x.displayName = e.RadioItem.displayName;
+const h = d.forwardRef(({ className: t, inset: o, ...a }, s) => /* @__PURE__ */ n(
   e.Label,
   {
     ref: s,
@@ -104,8 +108,8 @@ const N = d.forwardRef(({ className: t, inset: o, ...a }, s) => /* @__PURE__ */
     ...a
   }
 ));
-N.displayName = e.Label.displayName;
-const x = d.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ n(
+h.displayName = e.Label.displayName;
+const N = d.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ n(
   e.Separator,
   {
     ref: a,
@@ -113,7 +117,7 @@ const x = d.forwardRef(({ className: t, ...o }, a) => /* @__PURE__ */ n(
     ...o
   }
 ));
-x.displayName = e.Separator.displayName;
+N.displayName = e.Separator.displayName;
 const y = ({
   className: t,
   ...o
@@ -128,17 +132,17 @@ y.displayName = "DropdownMenuShortcut";
 export {
   R as DropdownMenu,
   w as DropdownMenuCheckboxItem,
-  b as DropdownMenuContent,
-  S as DropdownMenuGroup,
-  g as DropdownMenuItem,
-  N as DropdownMenuLabel,
-  C as DropdownMenuPortal,
-  k as DropdownMenuRadioGroup,
-  h as DropdownMenuRadioItem,
-  x as DropdownMenuSeparator,
+  g as DropdownMenuContent,
+  I as DropdownMenuGroup,
+  b as DropdownMenuItem,
+  h as DropdownMenuLabel,
+  S as DropdownMenuPortal,
+  z as DropdownMenuRadioGroup,
+  x as DropdownMenuRadioItem,
+  N as DropdownMenuSeparator,
   y as DropdownMenuShortcut,
-  z as DropdownMenuSub,
+  _ as DropdownMenuSub,
   f as DropdownMenuSubContent,
   u as DropdownMenuSubTrigger,
-  I as DropdownMenuTrigger
+  C as DropdownMenuTrigger
 };

package/Dropzone/Dropzone.d.ts

@@ -1,16 +1,22 @@
-import { DropzoneProps } from './Dropzone.types';
+import { DropzoneControl, DropzoneProps } from './Dropzone.types';
 
 /**
  * Dropzone component - A drag-and-drop file upload area with image previews, error handling, and localization.
+ *
  * @component
- * @param {DropzoneProps} props - The Dropzone component props.
- * @param {string[]} [props.acceptTypes=DEFAULT_FILE_TYPES] - Allowed file types. Defaults to `DEFAULT_FILE_TYPES`.
- * @param {number} props.maxSizeMB - Maximum file size in megabytes.
- * @param {number} [props.maxFiles=1] - Maximum number of files allowed. Defaults to 1.
- * @param {DropzoneTranslations} props.translations - Object containing localized text.
- * @param {(files: File[]) => void} props.onFilesSelected - Callback triggered when valid files are selected.
- * @param {(errors: FileRejection[]) => void} [props.onErrors] - Callback triggered when files are rejected due to errors.
- * @param {boolean} [props.hideErrors=false] - If `true`, hides error messages but keeps the red border.
+ * @param {DropzoneProps} props - The props for the Dropzone component.
+ * @param {string[]} [props.acceptTypes=DEFAULT_FILE_TYPES] - Allowed file MIME types.
+ * @param {number} props.maxSizeMB - Maximum allowed file size in megabytes.
+ * @param {number} [props.maxFiles=1] - Maximum number of files that can be uploaded.
+ * @param {DropzoneTranslations} props.translations - Translations for text labels.
+ * @param {(errors: FileRejection[]) => void} [props.onErrors] - Callback triggered when file errors occur.
+ * @param {boolean} [props.hideErrors=false] - Whether to hide error messages.
+ * @param {boolean} [props.disabled=false] - Whether the dropzone is disabled.
+ * @param {DropzoneStyles} [props.classNames] - Custom classNames for different dropzone states.
+ * @param {DropzoneValueItem[]} [props.value=[]] - Current selected files or URLs.
+ * @param {(items: DropzoneValueItem[]) => void} [props.onChangeValue] - Callback triggered when file selection changes.
+ * @param {string} [props.className] - Additional class names for styling.
+ * @param {React.Ref<HTMLDivElement>} ref - Ref for the root dropzone container.
  * @returns {JSX.Element} The rendered Dropzone component.
  */
-export declare const Dropzone: React.FC<DropzoneProps>;
+export declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<DropzoneControl>>;