@oneplatformdev/ui 0.0.1-beta.13 → 0.0.1-beta.130

package/Dialog/Dialog.d.ts

@@ -1,11 +1,15 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { default 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,144 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import i, { useRef as D, useMemo as h, useState as v, useEffect as b } 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 C } from "lucide-react";
+import { cn as n, composeRefs as w } from "@oneplatformdev/utils";
+import { DialogOverlayScope as E } from "./DialogOverlayScope.mjs";
+const q = e.Root, B = e.Trigger, R = e.Portal, M = e.Close, g = 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: n(
+      "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
+g.displayName = e.Overlay.displayName;
+const z = i.forwardRef(
+  ({
+    className: t,
+    children: a,
+    showCloseButton: s = !0,
+    onOpenAutoFocus: d,
+    preventAutoFocus: u,
+    ...y
+  }, m) => {
+    const f = D(null), x = h(
+      () => w(m, f),
+      [m]
+    ), [N, p] = v(null);
+    return b(() => {
+      const r = f.current;
+      if (!r || !r.parentElement) return;
+      const l = document.createElement("div");
+      return l.dataset.overlayHost = "", l.style.position = "fixed", l.style.inset = "0", l.style.zIndex = "80", r.parentElement.appendChild(l), p(l), () => {
+        l.remove(), p(null);
+      };
+    }, []), /* @__PURE__ */ c(R, { children: [
+      /* @__PURE__ */ o(g, {}),
+      /* @__PURE__ */ c(
+        e.Content,
+        {
+          ref: x,
+          className: n(
+            "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: (r) => (u && r.preventDefault(), d == null ? void 0 : d(r)),
+          ...y,
+          children: [
+            /* @__PURE__ */ o(E, { value: N, children: a }),
+            s && /* @__PURE__ */ c(
+              e.Close,
+              {
+                "aria-label": "Close",
+                className: n(
+                  "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(C, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+z.displayName = e.Content.displayName;
+const T = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
+    className: n(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-p.displayName = "DialogHeader";
-const g = ({
-  className: a,
-  ...t
+T.displayName = "DialogHeader";
+const j = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
+    className: n(
       "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(
+j.displayName = "DialogFooter";
+const k = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
-    className: i(
+    className: n(
       "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(
+k.displayName = e.Title.displayName;
+const H = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
-    className: i("text-sm text-muted-foreground", a),
-    ...t
+    className: n("text-sm text-muted-foreground", t),
+    ...a
   }
 ));
-y.displayName = e.Description.displayName;
+H.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
+  q as Dialog,
+  M as DialogClose,
+  z as DialogContent,
+  H as DialogDescription,
+  j as DialogFooter,
+  T as DialogHeader,
+  g as DialogOverlay,
+  R as DialogPortal,
+  k as DialogTitle,
+  B as DialogTrigger
 };

package/Dialog/DialogOverlayScope.d.ts

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

package/Dialog/DialogOverlayScope.mjs

@@ -0,0 +1,10 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as t, useContext as i } from "react";
+const o = Symbol.for("@oneplatformdev/ui.dialog-overlay-scope-context"), e = globalThis;
+e[o] || (e[o] = t(null));
+const r = t(null), g = () => i(r), m = ({ value: l, children: n }) => /* @__PURE__ */ a(r.Provider, { value: l, children: n });
+export {
+  r as DialogOverlayContainerCtx,
+  m as DialogOverlayScope,
+  g as useDialogOverlayContainer
+};

package/Dialog/index.d.ts

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

package/Dialog/index.mjs

@@ -1,13 +1,17 @@
-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 l, DialogClose as i, DialogContent as e, DialogDescription as r, DialogFooter as g, DialogHeader as D, DialogOverlay as t, DialogPortal as n, DialogTitle as C, DialogTrigger as p } from "./Dialog.mjs";
+import { DialogOverlayContainerCtx as y, DialogOverlayScope as O, useDialogOverlayContainer as s } from "./DialogOverlayScope.mjs";
 export {
   l as Dialog,
-  a as DialogClose,
-  g as DialogContent,
-  D as DialogDescription,
-  e as DialogFooter,
-  r as DialogHeader,
+  i as DialogClose,
+  e as DialogContent,
+  r as DialogDescription,
+  g as DialogFooter,
+  D as DialogHeader,
   t as DialogOverlay,
+  y as DialogOverlayContainerCtx,
+  O as DialogOverlayScope,
   n as DialogPortal,
-  p as DialogTitle,
-  s as DialogTrigger
+  C as DialogTitle,
+  p as DialogTrigger,
+  s 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,4 +1,4 @@
-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.
@@ -12,11 +12,11 @@ import { DropzoneProps } from './Dropzone.types';
  * @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.styles] - Custom styles for different dropzone states.
+ * @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: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Dropzone: import('react').ForwardRefExoticComponent<DropzoneProps & import('react').RefAttributes<DropzoneControl>>;