impact-nova 0.1.13 → 1.1.0

package/dist/components/ui/date-picker/week-range-picker.js

@@ -1,212 +1,235 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import * as d from "react";
-import { X as $ } from "lucide-react";
-import { CalendarMonth as _, Info as F } from "../../../icons/index.js";
-import { format as f, parse as M, isValid as S } from "date-fns";
-import { cn as w, maskDate as O } from "../../../lib/utils.js";
-import { Popover as ee, PopoverTrigger as te, PopoverContent as ne } from "../popover.js";
-import { Calendar as oe } from "../calendar.js";
-const ae = d.forwardRef(
+import { jsxs as b, jsx as f } from "react/jsx-runtime";
+import * as o from "react";
+import { X as pe } from "lucide-react";
+import { CalendarMonth as me, Info as ue } from "../../../icons/index.js";
+import { format as x, isValid as S, parse as R } from "date-fns";
+import { cn as N, padValidDateString as X, maskDate as q } from "../../../lib/utils.js";
+import { Popover as ge, PopoverTrigger as xe, PopoverContent as he } from "../popover.js";
+import { Calendar as be } from "../calendar.js";
+import { resolveWeekSelection as we } from "../../../lib/fiscal-calendar.js";
+const g = (e, r = "MM/dd/yyyy") => {
+  const t = x(e.startDate, r), W = x(e.endDate, r);
+  return `${t} - ${W}`;
+}, ke = o.forwardRef(
   ({
-    value: n,
-    onChange: p,
-    format: o = "MM/dd/yyyy",
-    minDate: I,
-    maxDate: V,
-    fromYear: A,
-    toYear: j,
-    showFooter: m = !0,
-    disabled: h,
-    className: B,
-    isError: x,
-    size: v,
-    label: W,
-    helperText: P,
-    required: E,
-    prefix: re,
-    prefixClick: se,
-    ...L
-  }, T) => {
-    const [c, k] = d.useState(!1), [a, i] = d.useState(n), [Y, D] = d.useState(n?.from ? f(n.from.startDate, o) : ""), [z, y] = d.useState(n?.to ? f(n.to.endDate, o) : ""), [X, b] = d.useState(n?.from?.startDate || /* @__PURE__ */ new Date());
-    d.useEffect(() => {
-      D(n?.from ? f(n.from.startDate, o) : ""), y(n?.to ? f(n.to.endDate, o) : "");
-    }, [n, o]), d.useEffect(() => {
-      console.log("[WeekRangePicker] useEffect - open:", c, "value:", n, "pendingRange:", a), c && (i(n), b(n?.from?.startDate || /* @__PURE__ */ new Date()));
-    }, [c]);
-    const q = (e) => {
-      console.log("[WeekRangePicker] handleSelect called:", e), i(e), !m && e?.from && e?.to && (console.log("[WeekRangePicker] No footer - applying immediately"), p?.(e), k(!1));
-    }, G = (e) => {
-      const t = e;
-      D(t?.from ? f(t.from.startDate, o) : ""), y(t?.to ? f(t.to.endDate, o) : "");
-    }, H = (e) => {
-      const t = e !== void 0 ? e : a;
-      console.log("[WeekRangePicker] handleApply called, appliedRange:", e, "pendingRange:", a, "using:", t), p?.(t), k(!1);
-    }, J = () => {
-      console.log("[WeekRangePicker] handleCancel called"), i(n), k(!1);
-    }, R = () => {
-      console.log("[WeekRangePicker] handleClear called"), i(void 0), D(""), y(""), p?.(void 0), m || k(!1);
-    }, C = (e) => {
-      const t = new Date(e);
-      t.setDate(e.getDate() - e.getDay());
-      const r = new Date(t);
-      r.setDate(t.getDate() + 6);
-      const g = new Date(t.getFullYear(), t.getMonth(), 1).getDay(), U = t.getDate(), Z = Math.ceil((U + g) / 7);
-      return {
-        year: t.getFullYear(),
-        month: t.getMonth(),
-        weekOfMonth: Z,
-        startDate: t,
-        endDate: r
-      };
-    }, K = (e) => {
-      const t = O(e.target.value, o);
-      if (D(t), t === "") {
-        const l = { from: void 0, to: a?.to };
-        i(l), m || p?.(l);
+    value: e,
+    onChange: r,
+    format: t = "MM/dd/yyyy",
+    placeholder: W = "Select Week Range",
+    minDate: G,
+    maxDate: J,
+    fromYear: K,
+    toYear: Q,
+    showFooter: p = !0,
+    calendarType: E = "calendar",
+    fiscalMode: v = "basic",
+    selectionMode: A = "week",
+    fiscalMonthPattern: M,
+    fiscalYearStartMonth: T = 1,
+    weekStartsOn: j = 1,
+    disabled: w,
+    className: U,
+    isError: C,
+    size: B,
+    label: L,
+    helperText: O,
+    required: Z,
+    prefix: ye,
+    prefixClick: De,
+    ...Y
+  }, _) => {
+    const $ = o.useRef(null), F = o.useRef(null);
+    o.useRef(null), o.useRef(null), o.useImperativeHandle(_, () => $.current);
+    const [i, I] = o.useState(!1), [k, c] = o.useState(e), [y, m] = o.useState(e?.from ? x(e.from.startDate, t) : ""), [D, u] = o.useState(e?.to ? x(e.to.endDate, t) : ""), [ee, P] = o.useState(e?.from?.startDate || /* @__PURE__ */ new Date());
+    o.useEffect(() => {
+      !i && e && (m(e?.from ? x(e.from.startDate, t) : ""), u(e?.to ? x(e.to.endDate, t) : ""), c(e));
+    }, [e, t, i]), o.useEffect(() => {
+      i && (c(e), m(e?.from ? x(e.from.startDate, t) : ""), u(e?.to ? x(e.to.endDate, t) : ""), P(e?.from?.startDate || /* @__PURE__ */ new Date()));
+    }, [i, e, t]);
+    const te = (n) => {
+      c(n), n?.from && m(g(n.from, t)), n?.to && u(g(n.to, t)), !p && n?.from && n?.to && n.from.startDate.getTime() !== n.to.startDate.getTime() && (r?.(n), I(!1));
+    }, ne = (n) => {
+      r?.(n !== void 0 ? n : k), I(!1);
+    }, oe = () => {
+      c(e), m(e?.from ? g(e.from, t) : ""), u(e?.to ? g(e.to, t) : ""), I(!1);
+    }, z = () => {
+      c(void 0), m(""), u(""), r?.(void 0), p || I(!1);
+    }, V = (n) => we(n, {
+      calendarType: E,
+      fiscalMode: v,
+      selectionMode: A,
+      fiscalMonthPattern: M,
+      fiscalYearStartMonth: T,
+      weekStartsOn: j
+    }), se = (n) => {
+      const a = n.target.value, s = q(a, t, y);
+      if (m(s), s === "") {
+        const l = { from: void 0, to: k?.to };
+        c(l), p || r?.(l);
         return;
       }
-      const r = M(t, o, /* @__PURE__ */ new Date());
-      if (S(r)) {
-        const g = { from: C(r), to: a?.to };
-        i(g), b(r), m || p?.(g);
+      const d = R(s, t, /* @__PURE__ */ new Date());
+      if (S(d) && s.length === t.length) {
+        const h = { from: V(d), to: k?.to };
+        c(h), p || r?.(h);
       }
-    }, Q = (e) => {
-      const t = O(e.target.value, o);
-      if (y(t), t === "") {
-        const l = { from: a?.from, to: void 0 };
-        i(l), m || p?.(l);
+    }, re = (n) => {
+      const a = n.target.value, s = q(a, t, D);
+      if (u(s), s === "") {
+        const l = { from: k?.from, to: void 0 };
+        c(l), p || r?.(l);
         return;
       }
-      const r = M(t, o, /* @__PURE__ */ new Date());
-      if (S(r)) {
-        const l = C(r), g = { from: a?.from, to: l };
-        i(g), b(r), m || p?.(g);
+      const d = R(s, t, /* @__PURE__ */ new Date());
+      if (S(d) && s.length === t.length) {
+        const l = V(d), h = { from: k?.from, to: l };
+        c(h), d && P(d), p || r?.(h);
       }
-    }, N = () => {
-      D(a?.from ? f(a.from.startDate, o) : ""), y(a?.to ? f(a.to.endDate, o) : "");
-    };
-    return /* @__PURE__ */ u("div", { className: "w-full space-y-1.5 min-w-[240px]", children: [
-      W && /* @__PURE__ */ u(
+    }, H = () => {
+      if (i) return;
+      const n = X(y, t), a = X(D, t), s = R(n, t, /* @__PURE__ */ new Date()), d = R(a, t, /* @__PURE__ */ new Date()), l = S(s) && n.length === t.length, h = S(d) && a.length === t.length;
+      if (!l || !h)
+        m(e?.from ? g(e.from, t) : ""), u(e?.to ? g(e.to, t) : ""), c(e);
+      else if (m(n), u(a), !p) {
+        const fe = V(s), ae = V(d);
+        r?.({ from: fe, to: ae });
+      }
+    }, ie = (e?.from ? g(e.from, t) : "") !== y, ce = (e?.to ? g(e.to, t) : "") !== D, de = y.length === t.length && !S(R(y, t, /* @__PURE__ */ new Date())), le = D.length === t.length && !S(R(D, t, /* @__PURE__ */ new Date()));
+    return /* @__PURE__ */ b("div", { className: "w-full space-y-1.5 min-w-[240px]", "data-component": "week-range-picker", "data-disabled": w || void 0, children: [
+      L && /* @__PURE__ */ b(
         "label",
         {
-          className: w(
+          className: N(
             "text-xs font-medium leading-[18px] text-[#60697d]",
-            h && "opacity-70",
-            x && "text-destructive"
+            w && "opacity-70",
+            C && "text-destructive"
           ),
           children: [
-            W,
+            L,
             " ",
-            E && /* @__PURE__ */ s("span", { className: "text-destructive", children: "*" })
+            Z && /* @__PURE__ */ f("span", { className: "text-destructive", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ u(ee, { open: c, onOpenChange: k, children: [
-        /* @__PURE__ */ s(te, { asChild: !0, children: /* @__PURE__ */ u(
+      /* @__PURE__ */ b(ge, { open: i, onOpenChange: I, children: [
+        /* @__PURE__ */ f(xe, { asChild: !0, children: /* @__PURE__ */ b(
           "div",
           {
-            className: w(
-              "flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-sm shadow-sm transition-colors hover:border-primary disabled:cursor-not-allowed disabled:bg-disabled-secondary-bg disabled:text-disabled-text disabled:border-border",
-              x ? "border-destructive hover:border-destructive" : "border-input",
-              v === "sm" ? "h-6" : v === "md" ? "h-[28px]" : "h-8",
-              h && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
+            "data-state": i ? "open" : "closed",
+            className: N(
+              "flex w-full items-center justify-between gap-2 rounded-md border bg-white px-3 text-sm shadow-sm transition-colors hover:border-primary disabled:cursor-not-allowed disabled:bg-disabled-secondary-bg disabled:text-disabled-text disabled:border-border",
+              C ? "border-destructive hover:border-destructive" : "border-input",
+              B === "sm" ? "h-6" : B === "md" ? "h-[28px]" : "h-8",
+              w && "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
               "cursor-pointer",
-              B
+              U
             ),
             children: [
-              /* @__PURE__ */ u("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
-                /* @__PURE__ */ s(
+              /* @__PURE__ */ b("div", { className: "flex items-center gap-4 flex-1 min-w-0", children: [
+                /* @__PURE__ */ f(
                   "input",
                   {
-                    ref: T,
+                    ref: $,
                     type: "text",
-                    value: Y,
-                    onChange: K,
-                    onBlur: N,
-                    onClick: (e) => c && e.stopPropagation(),
-                    placeholder: c ? o : "Start Week",
-                    disabled: !!h,
-                    className: "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
-                    ...L
+                    value: y,
+                    onChange: se,
+                    onBlur: H,
+                    onClick: (n) => i && n.stopPropagation(),
+                    placeholder: i ? t : W,
+                    disabled: !!w,
+                    "data-field": "start",
+                    className: N(
+                      "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
+                      de ? "text-destructive" : ie ? "text-muted-foreground" : ""
+                    ),
+                    ...Y
                   }
                 ),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ f(
                   "input",
                   {
+                    ref: F,
                     type: "text",
-                    value: z,
-                    onChange: Q,
-                    onBlur: N,
-                    onClick: (e) => c && e.stopPropagation(),
-                    placeholder: c ? o : "End Week",
-                    disabled: !!h,
-                    className: "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50"
+                    value: D,
+                    onChange: re,
+                    onBlur: H,
+                    onClick: (n) => i && n.stopPropagation(),
+                    placeholder: i ? t : W,
+                    disabled: !!w,
+                    "data-field": "end",
+                    className: N(
+                      "flex-1 min-w-0 bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
+                      le ? "text-destructive" : ce ? "text-muted-foreground" : ""
+                    )
                   }
                 )
               ] }),
-              /* @__PURE__ */ u("div", { className: "flex items-center gap-1 shrink-0", children: [
-                n?.from && !h && /* @__PURE__ */ s(
-                  $,
+              /* @__PURE__ */ b("div", { className: "flex items-center gap-1 shrink-0", children: [
+                e?.from && !w && /* @__PURE__ */ f(
+                  pe,
                   {
                     className: "h-4 w-4 cursor-pointer hover:text-foreground text-muted-foreground",
-                    onClick: (e) => {
-                      e.stopPropagation(), R();
+                    onClick: (n) => {
+                      n.stopPropagation(), z();
                     }
                   }
                 ),
-                /* @__PURE__ */ s(_, { className: "h-4 w-4 text-secondary-foreground" })
+                /* @__PURE__ */ f(me, { className: "h-4 w-4 text-secondary-foreground" })
               ] })
             ]
           }
         ) }),
-        /* @__PURE__ */ s(
-          ne,
+        /* @__PURE__ */ f(
+          he,
           {
             className: "w-auto p-0",
             align: "start",
-            onOpenAutoFocus: (e) => e.preventDefault(),
-            onInteractOutside: (e) => e.preventDefault(),
-            children: /* @__PURE__ */ s(
-              oe,
+            onOpenAutoFocus: (n) => n.preventDefault(),
+            children: /* @__PURE__ */ f(
+              be,
               {
                 pickerType: "week",
                 weekMode: "range",
-                selectedWeeks: a,
-                onWeekSelect: q,
-                onPendingChange: G,
-                month: X,
-                onMonthChange: b,
-                fromDate: I,
-                toDate: V,
-                fromYear: A,
-                toYear: j,
-                showFooter: m,
-                onApply: H,
-                onCancel: J,
-                onClear: R,
+                selectedWeeks: k,
+                onWeekSelect: te,
+                month: ee,
+                onMonthChange: P,
+                disabled: { before: G, after: J },
+                fromYear: K,
+                toYear: Q,
+                showFooter: p,
+                calendarType: E,
+                fiscalMode: v,
+                selectionMode: A,
+                fiscalMonthPattern: M,
+                fiscalYearStartMonth: T,
+                weekStartsOn: j,
+                onApply: ne,
+                onCancel: oe,
+                onClear: z,
                 captionLayout: "dropdown"
               }
             )
           }
         )
       ] }),
-      P && /* @__PURE__ */ u("div", { className: w("flex items-center gap-1", x && "text-destructive"), children: [
-        !x && /* @__PURE__ */ s(F, { size: 10, className: "shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ s(
+      O && /* @__PURE__ */ b("div", { className: N("flex items-center gap-1", C && "text-destructive"), children: [
+        !C && /* @__PURE__ */ f(ue, { size: 10, className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ f(
           "p",
           {
-            className: w(
+            className: N(
               "text-[10px] text-[#7a8294]",
-              x && "text-destructive"
+              C && "text-destructive"
             ),
-            children: P
+            children: O
           }
         )
       ] })
     ] });
   }
 );
-ae.displayName = "WeekRangePicker";
+ke.displayName = "WeekRangePicker";
 export {
-  ae as WeekRangePicker
+  ke as WeekRangePicker
 };

package/dist/components/ui/dialog.js

@@ -8,7 +8,7 @@ const v = t.Root, w = t.Trigger, f = t.Portal, C = t.Close, n = i.forwardRef(({
   {
     ref: s,
     className: l(
-      "fixed inset-0 z-[300] bg-black/40  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       e
     ),
     ...a
@@ -22,17 +22,25 @@ const p = i.forwardRef(({ className: e, children: a, hideClose: s, ...r }, c) =>
     {
       ref: c,
       "aria-describedby": void 0,
+      "data-component": "dialog-content",
       className: l(
-        "fixed left-[50%] top-[50%] z-[300] flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-xl 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%] rounded-lg overflow-hidden",
+        "fixed left-[50%] top-[50%] z-50 flex flex-col w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-xl 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%] rounded-lg overflow-hidden",
         e
       ),
       ...r,
       children: [
         a,
-        !s && /* @__PURE__ */ d(t.Close, { className: "absolute right-4 top-4 rounded-sm opacity-50 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 z-[60]", children: [
-          /* @__PURE__ */ o(m, { className: "h-4 w-4" }),
-          /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
-        ] })
+        !s && /* @__PURE__ */ d(
+          t.Close,
+          {
+            "data-component": "dialog-close",
+            className: "absolute right-4 top-4 rounded-sm opacity-50 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(m, { className: "h-4 w-4" }),
+              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
       ]
     }
   )
@@ -84,6 +92,7 @@ const u = i.forwardRef(({ className: e, ...a }, s) => /* @__PURE__ */ o(
   t.Title,
   {
     ref: s,
+    "data-component": "dialog-title",
     className: l(
       "text-md font-bold leading-none tracking-tight text-slate-900",
       e

package/dist/components/ui/drawer.js

@@ -1,8 +1,8 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import * as l from "react";
 import { Drawer as a } from "vaul";
 import { cn as s } from "../../lib/utils.js";
-const n = ({
+const m = ({
   shouldScaleBackground: e = !0,
   ...r
 }) => /* @__PURE__ */ t(
@@ -12,7 +12,7 @@ const n = ({
     ...r
   }
 );
-n.displayName = "Drawer";
+m.displayName = "Drawer";
 const u = a.Trigger, c = a.Portal, b = a.Close, d = l.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
   a.Overlay,
   {
@@ -22,12 +22,13 @@ const u = a.Trigger, c = a.Portal, b = a.Close, d = l.forwardRef(({ className: e
   }
 ));
 d.displayName = a.Overlay.displayName;
-const p = l.forwardRef(({ className: e, children: r, ...o }, m) => /* @__PURE__ */ i(c, { children: [
+const p = l.forwardRef(({ className: e, children: r, ...o }, i) => /* @__PURE__ */ n(c, { children: [
   /* @__PURE__ */ t(d, {}),
-  /* @__PURE__ */ i(
+  /* @__PURE__ */ n(
     a.Content,
     {
-      ref: m,
+      ref: i,
+      "data-component": "drawer-content",
       className: s(
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
         e
@@ -41,7 +42,7 @@ const p = l.forwardRef(({ className: e, children: r, ...o }, m) => /* @__PURE__
   )
 ] }));
 p.displayName = "DrawerContent";
-const f = ({
+const w = ({
   className: e,
   ...r
 }) => /* @__PURE__ */ t(
@@ -51,8 +52,8 @@ const f = ({
     ...r
   }
 );
-f.displayName = "DrawerHeader";
-const w = ({
+w.displayName = "DrawerHeader";
+const f = ({
   className: e,
   ...r
 }) => /* @__PURE__ */ t(
@@ -62,11 +63,12 @@ const w = ({
     ...r
   }
 );
-w.displayName = "DrawerFooter";
+f.displayName = "DrawerFooter";
 const D = l.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
   a.Title,
   {
     ref: o,
+    "data-component": "drawer-title",
     className: s(
       "text-lg font-semibold leading-none tracking-tight",
       e
@@ -79,18 +81,19 @@ const x = l.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
   a.Description,
   {
     ref: o,
+    "data-component": "drawer-description",
     className: s("text-sm text-muted-foreground", e),
     ...r
   }
 ));
 x.displayName = a.Description.displayName;
 export {
-  n as Drawer,
+  m as Drawer,
   b as DrawerClose,
   p as DrawerContent,
   x as DrawerDescription,
-  w as DrawerFooter,
-  f as DrawerHeader,
+  f as DrawerFooter,
+  w as DrawerHeader,
   d as DrawerOverlay,
   c as DrawerPortal,
   D as DrawerTitle,

package/dist/components/ui/dropdown-menu.js

@@ -35,7 +35,7 @@ const h = l.forwardRef(({ className: a, ...o }, n) => /* @__PURE__ */ t(e.Portal
   {
     ref: n,
     className: s(
-      "z-[200] min-w-[8rem] overflow-hidden rounded-lg bg-popover p-2 text-popover-foreground shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)] text-[13px] 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      "z-50 min-w-[8rem] overflow-hidden rounded-lg bg-popover p-2 text-popover-foreground shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)] text-[13px] 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 origin-[--radix-dropdown-menu-content-transform-origin]",
       a
     ),
     ...o
@@ -48,8 +48,9 @@ const N = l.forwardRef(({ className: a, sideOffset: o = 4, portalled: n = !0, ..
     {
       ref: d,
       sideOffset: o,
+      "data-component": "dropdown-menu-content",
       className: s(
-        "z-[200] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-popover p-2 text-popover-foreground shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)] flex flex-col gap-0.5",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[12rem] overflow-y-auto overflow-x-hidden rounded-lg bg-popover p-2 text-popover-foreground shadow-[0px_0px_4px_0px_rgba(0,0,0,0.12)] flex flex-col gap-0.5",
         "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 origin-[--radix-dropdown-menu-content-transform-origin]",
         a
       ),
@@ -63,6 +64,7 @@ const b = l.forwardRef(({ className: a, inset: o, description: n, icon: r, child
   e.Item,
   {
     ref: p,
+    "data-component": "dropdown-menu-item",
     className: s(
       "relative flex cursor-default select-none items-center gap-2 rounded-md px-3 h-[35px] text-[13px] outline-none transition-colors focus:bg-accent focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       o && "pl-4",

package/dist/components/ui/dynamic-layout.d.ts

@@ -2,8 +2,8 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const dynamicLayoutVariants: (props?: {
     layout?: "grid" | "flex" | "stack";
-    columns?: 1 | 4 | 3 | 2 | 12 | 6;
-    gap?: "none" | "sm" | "md" | "lg" | "xl";
+    columns?: 1 | 12 | 4 | 3 | 2 | 6;
+    gap?: "sm" | "md" | "lg" | "xl" | "none";
 } & import('class-variance-authority/types').ClassProp) => string;
 export interface DynamicLayoutProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dynamicLayoutVariants> {
     children: React.ReactNode;

package/dist/components/ui/dynamic-layout.js

@@ -1,8 +1,8 @@
-import { jsx as c } from "react/jsx-runtime";
-import * as m from "react";
-import { cva as g } from "class-variance-authority";
-import { cn as d } from "../../lib/utils.js";
-const e = g("", {
+import { jsx as s } from "react/jsx-runtime";
+import * as c from "react";
+import { cva as m } from "class-variance-authority";
+import { cn as g } from "../../lib/utils.js";
+const e = m("", {
   variants: {
     layout: {
       grid: "grid",
@@ -29,22 +29,25 @@ const e = g("", {
     layout: "flex",
     gap: "md"
   }
-}), n = m.forwardRef(
-  ({ className: a, layout: o, columns: r, gap: i, children: l, ...s }, t) => /* @__PURE__ */ c(
+}), f = c.forwardRef(
+  ({ className: t, layout: a, columns: o, gap: r, children: i, ...l }, d) => /* @__PURE__ */ s(
     "div",
     {
-      ref: t,
-      className: d(
-        e({ layout: o, columns: r, gap: i }),
-        a
+      ref: d,
+      "data-layout": a ?? "flex",
+      "data-columns": o ?? void 0,
+      "data-gap": r ?? "md",
+      className: g(
+        e({ layout: a, columns: o, gap: r }),
+        t
       ),
-      ...s,
-      children: l
+      ...l,
+      children: i
     }
   )
 );
-n.displayName = "DynamicLayout";
+f.displayName = "DynamicLayout";
 export {
-  n as DynamicLayout,
+  f as DynamicLayout,
   e as dynamicLayoutVariants
 };