@oneplatformdev/ui 0.0.1-beta.12 → 0.0.1-beta.120

package/Dialog/Dialog.d.ts

@@ -1,11 +1,14 @@
-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;
+    preventAutoFocus?: 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,100 +1,136 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import * as l from "react";
+import * as i from "react";
+import { useRef as y, useState as N, useLayoutEffect as D } 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(
+import { XIcon as h } from "lucide-react";
+import { cn as l } from "@oneplatformdev/utils";
+import { DialogOverlayScope as b } from "./DialogOverlayScope.mjs";
+const S = e.Root, F = e.Trigger, v = e.Portal, q = e.Close, m = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
-    className: i(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      a
+    className: l(
+      "fixed inset-0 z-40 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      t
     ),
-    ...t
+    ...a
   }
 ));
-d.displayName = e.Overlay.displayName;
-const f = l.forwardRef(({ className: a, children: t, ...s }, r) => /* @__PURE__ */ n(m, { children: [
-  /* @__PURE__ */ o(d, {}),
-  /* @__PURE__ */ n(
-    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",
-        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__ */ o(c, { className: "h-4 w-4" }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-f.displayName = e.Content.displayName;
-const p = ({
-  className: a,
-  ...t
+m.displayName = e.Overlay.displayName;
+const w = i.forwardRef(
+  ({
+    className: t,
+    children: a,
+    showCloseButton: s = !0,
+    onOpenAutoFocus: r,
+    preventAutoFocus: f,
+    ...p
+  }, g) => {
+    const d = y(null), [u, x] = N(null);
+    return D(() => x(d.current), []), /* @__PURE__ */ n(v, { children: [
+      /* @__PURE__ */ o(m, {}),
+      /* @__PURE__ */ o("div", { ref: d, className: "fixed inset-0 z-60" }),
+      /* @__PURE__ */ o(b, { value: u, children: /* @__PURE__ */ n(
+        e.Content,
+        {
+          ref: g,
+          className: l(
+            "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]",
+            t
+          ),
+          onOpenAutoFocus: (c) => (f && c.preventDefault(), r == null ? void 0 : r(c)),
+          ...p,
+          children: [
+            a,
+            s && /* @__PURE__ */ n(
+              e.Close,
+              {
+                "aria-label": "Close",
+                className: l(
+                  "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',
+                  "focus:outline-none focus:ring-0 focus:ring-ring focus:ring-offset-2",
+                  "hover:bg-accent",
+                  "disabled:pointer-events-none",
+                  "transition-opacity"
+                ),
+                children: [
+                  /* @__PURE__ */ o(h, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+w.displayName = e.Content.displayName;
+const C = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
+    className: l(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-p.displayName = "DialogHeader";
-const g = ({
-  className: a,
-  ...t
+C.displayName = "DialogHeader";
+const R = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
+    className: l(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-g.displayName = "DialogFooter";
-const u = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+R.displayName = "DialogFooter";
+const E = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
-    className: i(
+    className: l(
       "text-lg font-semibold leading-none tracking-tight",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 ));
-u.displayName = e.Title.displayName;
-const y = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+E.displayName = e.Title.displayName;
+const z = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
-    className: i("text-sm text-muted-foreground", a),
-    ...t
+    className: l("text-sm text-muted-foreground", t),
+    ...a
   }
 ));
-y.displayName = e.Description.displayName;
+z.displayName = e.Description.displayName;
 export {
-  b as Dialog,
-  v as DialogClose,
-  f as DialogContent,
-  y as DialogDescription,
-  g as DialogFooter,
-  p as DialogHeader,
-  d as DialogOverlay,
-  m as DialogPortal,
-  u as DialogTitle,
-  h as DialogTrigger
+  S as Dialog,
+  q as DialogClose,
+  w as DialogContent,
+  z as DialogDescription,
+  R as DialogFooter,
+  C as DialogHeader,
+  m as DialogOverlay,
+  v as DialogPortal,
+  E as DialogTitle,
+  F as DialogTrigger
 };

package/Dialog/DialogOverlayScope.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+interface IDialogOverlayScopeProps extends PropsWithChildren {
+    value: HTMLElement | null;
+}
+export declare const DialogOverlayScope: ({ value, children }: IDialogOverlayScopeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useDialogOverlayContainer: () => HTMLElement | null;
+export {};

package/Dialog/DialogOverlayScope.mjs

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createContext as n, useContext as a } from "react";
+const o = n(null), s = ({ value: e, children: r }) => /* @__PURE__ */ t(o.Provider, { value: e, children: r }), c = () => a(o);
+export {
+  s as DialogOverlayScope,
+  c as useDialogOverlayContainer
+};

package/Dialog/index.d.ts

@@ -1 +1,2 @@
 export * from './Dialog';
+export { useDialogOverlayContainer } from './DialogOverlayScope';

package/Dialog/index.mjs

@@ -1,13 +1,15 @@
-import { Dialog as l, DialogClose as a, DialogContent as g, DialogDescription as D, DialogFooter as e, DialogHeader as r, DialogOverlay as t, DialogPortal as n, DialogTitle as p, DialogTrigger as s } from "./Dialog.mjs";
+import { Dialog as i, DialogClose as l, DialogContent as e, DialogDescription as g, DialogFooter as r, DialogHeader as D, DialogOverlay as t, DialogPortal as n, DialogTitle as p, DialogTrigger as s } from "./Dialog.mjs";
+import { useDialogOverlayContainer as f } from "./DialogOverlayScope.mjs";
 export {
-  l as Dialog,
-  a as DialogClose,
-  g as DialogContent,
-  D as DialogDescription,
-  e as DialogFooter,
-  r as DialogHeader,
+  i as Dialog,
+  l as DialogClose,
+  e as DialogContent,
+  g as DialogDescription,
+  r as DialogFooter,
+  D as DialogHeader,
   t as DialogOverlay,
   n as DialogPortal,
   p as DialogTitle,
-  s as DialogTrigger
+  s as DialogTrigger,
+  f as useDialogOverlayContainer
 };

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>>;