@alfadocs/ui-kit 0.1.9 → 0.2.0

package/dist/_chunks/dropdown-menu-CpiF6CPz.js

@@ -0,0 +1,300 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as r, useContext as L, useState as A, useRef as B, useEffect as E, useCallback as K, useMemo as H, createContext as V } from "react";
+import * as t from "@radix-ui/react-dropdown-menu";
+import { c as h } from "./index-D2ZczOXr.js";
+import { S as q } from "./separator-CYU_bGFn.js";
+import { K as x } from "./kbd-Cglkd7CY.js";
+import { a as F } from "./use-direction-D6rvvG9G.js";
+import { C as J } from "./chevron-right-BrpYejk0.js";
+import { C as b } from "./check-DPdL_Sm7.js";
+import { u as Q } from "./registry-C9nwlNyL.js";
+const U = {
+  id: "dropdown-menu",
+  capabilities: ["open", "close", "pick"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      description: "True when the menu is currently open.",
+      read: (s) => s.getIsOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      description: "Open the menu.",
+      invoke: (s) => {
+        s.open();
+      }
+    },
+    close: {
+      safety: "read",
+      description: "Close the menu.",
+      invoke: (s) => {
+        s.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "dropdown-menu" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on DropdownMenu.Root."
+    },
+    item: {
+      attr: "data-item-id",
+      description: "Each menu item emits its value as data-item-id."
+    }
+  }
+}, N = h(
+  [
+    "ds:z-[var(--z-dropdown)]",
+    "ds:min-w-[8rem]",
+    "ds:rounded-[var(--radius-md)]",
+    // Border kept (transparent) so the forced-colors override below can
+    // repaint a visible edge in HCM. In normal modes the soft drop-shadow
+    // carries the edge cue; the heavy `--border` (grey-800 since WCAG
+    // 1.4.11 bump in 67fef8c) made the menu read as a charcoal box.
+    "ds:border ds:border-transparent",
+    "ds:bg-[var(--popover)] ds:text-[color:var(--popover-foreground)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:p-[var(--spacing-xs)]",
+    // Motion — gated on --animation-duration via Tailwind's animate-in
+    // preset. motion-reduce disables via the no-preference query.
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=open]:fade-in ds:data-[state=closed]:fade-out",
+    "ds:data-[state=open]:zoom-in-95 ds:data-[state=closed]:zoom-out-95",
+    "ds:motion-reduce:animate-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" ")
+), m = h(
+  [
+    "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:text-[length:var(--font-size-sm)] ds:text-[color:var(--foreground)]",
+    "ds:cursor-pointer ds:select-none ds:outline-none",
+    // Highlighted + hover state
+    "ds:data-[highlighted]:bg-[color:var(--muted)]/40",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    // Disabled
+    "ds:data-[disabled]:opacity-50 ds:data-[disabled]:cursor-not-allowed",
+    "ds:data-[disabled]:pointer-events-none"
+  ].join(" ")
+), W = h(
+  [
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+    "type-eyebrow ds:text-[color:var(--muted-foreground)]",
+    "ds:select-none"
+  ].join(" ")
+), w = "ds:inline-flex ds:items-center ds:justify-center ds:size-4 ds:shrink-0", y = V(void 0), C = ({
+  dir: s,
+  id: a,
+  open: o,
+  defaultOpen: n,
+  onOpenChange: d,
+  ...u
+}) => {
+  const f = F(), i = o !== void 0, [G, P] = A(
+    n ?? !1
+  ), l = i ? !!o : G, v = B(l);
+  E(() => {
+    v.current = l;
+  }, [l]);
+  const p = K(
+    (g) => {
+      i || P(g), d == null || d(g);
+    },
+    [i, d]
+  ), O = H(
+    () => ({
+      getIsOpen: () => v.current,
+      open: () => p(!0),
+      close: () => p(!1)
+    }),
+    [p]
+  );
+  return Q(U, O, a), /* @__PURE__ */ e(y.Provider, { value: a, children: /* @__PURE__ */ e(
+    t.Root,
+    {
+      dir: s ?? f,
+      open: l,
+      onOpenChange: p,
+      ...u
+    }
+  ) });
+};
+C.displayName = "DropdownMenu.Root";
+const X = t.Trigger, Y = t.Portal, Z = t.Group, _ = t.RadioGroup, S = r(({ className: s, sideOffset: a = 8, ...o }, n) => {
+  const d = L(y);
+  return /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
+    t.Content,
+    {
+      ref: n,
+      sideOffset: a,
+      className: N({ className: s }),
+      "data-component": "dropdown-menu",
+      "data-component-id": d,
+      ...o
+    }
+  ) });
+});
+S.displayName = "DropdownMenu.Content";
+const D = r(
+  ({
+    className: s,
+    startIcon: a,
+    endIcon: o,
+    description: n,
+    shortcut: d,
+    children: u,
+    ...f
+  }, i) => /* @__PURE__ */ c(
+    t.Item,
+    {
+      ref: i,
+      className: m({ className: s }),
+      ...f,
+      children: [
+        a ? /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+            children: a
+          }
+        ) : null,
+        /* @__PURE__ */ c("span", { className: "ds:flex-1 ds:flex ds:flex-col ds:min-w-0", children: [
+          /* @__PURE__ */ e("span", { className: "ds:truncate", children: u }),
+          n ? /* @__PURE__ */ e("span", { className: "type-meta ds:text-[color:var(--muted-foreground)] ds:truncate", children: n }) : null
+        ] }),
+        d ? /* @__PURE__ */ e("span", { className: "ds:ms-auto", children: /* @__PURE__ */ e(x, { keys: d, size: "sm" }) }) : o ? /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:ms-auto ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+            children: o
+          }
+        ) : null
+      ]
+    }
+  )
+);
+D.displayName = "DropdownMenu.Item";
+const R = r(({ className: s, children: a, ...o }, n) => /* @__PURE__ */ c(
+  t.CheckboxItem,
+  {
+    ref: n,
+    className: m({ className: s }),
+    ...o,
+    children: [
+      /* @__PURE__ */ e("span", { className: w, children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(b, { "aria-hidden": !0, className: "ds:size-4" }) }) }),
+      /* @__PURE__ */ e("span", { className: "ds:flex-1 ds:truncate", children: a })
+    ]
+  }
+));
+R.displayName = "DropdownMenu.CheckboxItem";
+const $ = _, M = r(({ className: s, children: a, ...o }, n) => /* @__PURE__ */ c(
+  t.RadioItem,
+  {
+    ref: n,
+    className: m({ className: s }),
+    ...o,
+    children: [
+      /* @__PURE__ */ e("span", { className: w, children: /* @__PURE__ */ e(t.ItemIndicator, { children: /* @__PURE__ */ e(
+        b,
+        {
+          "aria-hidden": !0,
+          className: "ds:size-4 ds:text-[color:var(--accent)]"
+        }
+      ) }) }),
+      /* @__PURE__ */ e("span", { className: "ds:flex-1 ds:truncate", children: a })
+    ]
+  }
+));
+M.displayName = "DropdownMenu.RadioItem";
+const I = r(({ className: s, ...a }, o) => /* @__PURE__ */ e(
+  t.Label,
+  {
+    ref: o,
+    className: W({ className: s }),
+    ...a
+  }
+));
+I.displayName = "DropdownMenu.Label";
+const k = r(({ className: s, ...a }, o) => /* @__PURE__ */ e(t.Separator, { ref: o, asChild: !0, ...a, children: /* @__PURE__ */ e(
+  q,
+  {
+    className: ["ds:my-[calc(var(--spacing-xs)/2)]", s ?? ""].filter(Boolean).join(" ")
+  }
+) }));
+k.displayName = "DropdownMenu.Separator";
+const z = r(
+  ({ keys: s, separator: a = "none" }, o) => /* @__PURE__ */ e("span", { ref: o, className: "ds:ms-auto ds:ps-[var(--spacing-sm)]", children: /* @__PURE__ */ e(x, { keys: s, separator: a, size: "sm" }) })
+);
+z.displayName = "DropdownMenu.Shortcut";
+const ee = t.Sub, j = r(({ className: s, startIcon: a, children: o, ...n }, d) => /* @__PURE__ */ c(
+  t.SubTrigger,
+  {
+    ref: d,
+    className: m({ className: s }),
+    ...n,
+    children: [
+      a ? /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+          children: a
+        }
+      ) : null,
+      /* @__PURE__ */ e("span", { className: "ds:flex-1 ds:truncate", children: o }),
+      /* @__PURE__ */ e(
+        J,
+        {
+          "aria-hidden": !0,
+          className: "ds:ms-auto ds:size-4 ds:shrink-0 ds:rtl:-scale-x-100"
+        }
+      )
+    ]
+  }
+));
+j.displayName = "DropdownMenu.SubTrigger";
+const T = r(({ className: s, ...a }, o) => /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
+  t.SubContent,
+  {
+    ref: o,
+    sideOffset: 8,
+    className: N({ className: s }),
+    ...a
+  }
+) }));
+T.displayName = "DropdownMenu.SubContent";
+const le = {
+  Root: C,
+  Trigger: X,
+  Portal: Y,
+  Content: S,
+  Group: Z,
+  Item: D,
+  CheckboxItem: R,
+  RadioGroup: $,
+  RadioItem: M,
+  Label: I,
+  Separator: k,
+  Shortcut: z,
+  Sub: ee,
+  SubTrigger: j,
+  SubContent: T
+};
+export {
+  le as D,
+  U as d
+};
+//# sourceMappingURL=dropdown-menu-CpiF6CPz.js.map

package/dist/_chunks/{empty-state-DQPtRp2b.js → empty-state-3CLJIXSj.js}

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as d, Fragment as U } from "react/jsx-runtime";
 import { forwardRef as u, useId as H, useRef as F, useState as P, useCallback as N, useEffect as q, useContext as v, createContext as M } from "react";
 import { c as m } from "./index-D2ZczOXr.js";
 import { useTranslation as Z } from "react-i18next";
-import { B as x } from "./button-7mLWcMp_.js";
+import { B as x } from "./button-DD_0Xdmr.js";
 function G(t, s) {
   t && (typeof t == "function" ? t(s) : t.current = s);
 }
@@ -45,16 +45,19 @@ const h = M({
     }
   },
   defaultVariants: { size: "md" }
-}), X = m("type-body-sm ds:text-[var(--muted-foreground)]", {
-  variants: {
-    size: {
-      sm: "ds:[--type-body-sm-size:var(--font-size-xs)]",
-      md: "",
-      lg: "ds:[--type-body-sm-size:var(--font-size-base)]"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
+}), X = m(
+  "type-body-sm ds:text-[var(--muted-foreground)]",
+  {
+    variants: {
+      size: {
+        sm: "ds:[--type-body-sm-size:var(--font-size-xs)]",
+        md: "",
+        lg: "ds:[--type-body-sm-size:var(--font-size-base)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
 function Y() {
   return /* @__PURE__ */ d(
     "svg",
@@ -76,8 +79,28 @@ function Y() {
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ e("rect", { x: "55", y: "30", width: "10", height: "60", rx: "5", fill: "var(--color-violet-400)" }),
-        /* @__PURE__ */ e("rect", { x: "30", y: "55", width: "60", height: "10", rx: "5", fill: "var(--color-purple-400)" })
+        /* @__PURE__ */ e(
+          "rect",
+          {
+            x: "55",
+            y: "30",
+            width: "10",
+            height: "60",
+            rx: "5",
+            fill: "var(--color-violet-400)"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "rect",
+          {
+            x: "30",
+            y: "55",
+            width: "60",
+            height: "10",
+            rx: "5",
+            fill: "var(--color-purple-400)"
+          }
+        )
       ]
     }
   );
@@ -155,47 +178,52 @@ function $() {
             fillOpacity: "0.6"
           }
         ),
-        /* @__PURE__ */ e("circle", { cx: "60", cy: "82", r: "5", fill: "var(--destructive)", fillOpacity: "0.6" })
+        /* @__PURE__ */ e(
+          "circle",
+          {
+            cx: "60",
+            cy: "82",
+            r: "5",
+            fill: "var(--destructive)",
+            fillOpacity: "0.6"
+          }
+        )
       ]
     }
   );
 }
-const g = u(
-  ({ children: t, className: s, ...a }, r) => {
-    const { size: i } = v(h);
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        ref: r,
-        "aria-hidden": "true",
-        className: K({ size: i, className: s }),
-        ...a,
-        children: t
-      }
-    );
-  }
-);
+const g = u(({ children: t, className: s, ...a }, r) => {
+  const { size: i } = v(h);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: r,
+      "aria-hidden": "true",
+      className: K({ size: i, className: s }),
+      ...a,
+      children: t
+    }
+  );
+});
 g.displayName = "EmptyState.Illustration";
-const w = u(
-  ({ children: t, className: s, ...a }, r) => {
-    const { size: i, titleId: l, registerTitle: p } = v(h), f = N(
-      (c) => {
-        c && p(), typeof r == "function" ? r(c) : r && (r.current = c);
-      },
-      [r, p]
-    );
-    return /* @__PURE__ */ e(
-      "h3",
-      {
-        ref: f,
-        id: l,
-        className: Q({ size: i, className: s }),
-        ...a,
-        children: t
-      }
-    );
-  }
-);
+const w = u(({ children: t, className: s, ...a }, r) => {
+  const { size: i, titleId: l, registerTitle: p } = v(h), f = N(
+    (c) => {
+      c && p(), typeof r == "function" ? r(c) : r && (r.current = c);
+    },
+    [r, p]
+  );
+  return /* @__PURE__ */ e(
+    "h3",
+    {
+      ref: f,
+      id: l,
+      className: Q({ size: i, className: s }),
+      ...a,
+      children: t
+    }
+  );
+});
 w.displayName = "EmptyState.Title";
 const S = u(({ children: t, className: s, ...a }, r) => {
   const { size: i } = v(h);
@@ -212,17 +240,7 @@ const S = u(({ children: t, className: s, ...a }, r) => {
 S.displayName = "EmptyState.Description";
 const A = m(
   "ds:flex ds:flex-row ds:flex-wrap ds:items-center ds:justify-center ds:gap-[var(--spacing-md)]"
-), k = u(
-  ({ children: t, className: s, ...a }, r) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: r,
-      className: A({ className: s }),
-      ...a,
-      children: t
-    }
-  )
-);
+), k = u(({ children: t, className: s, ...a }, r) => /* @__PURE__ */ e("div", { ref: r, className: A({ className: s }), ...a, children: t }));
 k.displayName = "EmptyState.Actions";
 const C = u(
   ({
@@ -247,48 +265,61 @@ const C = u(
       o == null || o.focus();
     }, []);
     const L = t === "no-results" ? { role: "status", "aria-live": "polite" } : { role: "region" }, O = n(t === "first-use" ? "emptyState.firstUse.title" : t === "no-results" ? "emptyState.noResults.title" : "emptyState.error.title"), W = n(t === "first-use" ? "emptyState.firstUse.description" : t === "no-results" ? "emptyState.noResults.description" : "emptyState.error.description"), B = n(t === "first-use" ? "emptyState.firstUse.cta" : t === "no-results" ? "emptyState.noResults.cta" : "emptyState.error.cta"), y = s === "sm" ? "sm" : "md", D = (o) => /^(https?:\/\/|\/|#)/.test(o) ? o : "#";
-    return /* @__PURE__ */ e(h.Provider, { value: { size: s, variant: t, titleId: z, registerTitle: j }, children: /* @__PURE__ */ e(
-      "div",
+    return /* @__PURE__ */ e(
+      h.Provider,
       {
-        ref: (o) => {
-          b.current = o, G(R, o);
-        },
-        "aria-labelledby": T || !f ? z : void 0,
-        ...L,
-        className: J({ size: s, className: c }),
-        "data-component": "empty-state",
-        ...I,
-        children: f ?? /* @__PURE__ */ d(U, { children: [
-          /* @__PURE__ */ d(g, { children: [
-            t === "first-use" && /* @__PURE__ */ e(Y, {}),
-            t === "no-results" && /* @__PURE__ */ e(_, {}),
-            t === "error" && /* @__PURE__ */ e($, {})
-          ] }),
-          /* @__PURE__ */ e(w, { children: a ?? O }),
-          /* @__PURE__ */ e(S, { children: r ?? W }),
-          (i || l) && /* @__PURE__ */ d(k, { children: [
-            i && /* @__PURE__ */ e(
-              x,
-              {
-                intent: "primary",
-                size: y,
-                onClick: i.onClick,
-                children: i.label ?? B
-              }
-            ),
-            l && (l.href ? /* @__PURE__ */ e(x, { intent: "ghost", size: y, asChild: !0, children: /* @__PURE__ */ e("a", { href: D(l.href), onClick: l.onClick, children: l.label }) }) : /* @__PURE__ */ e(
-              x,
-              {
-                intent: "ghost",
-                size: y,
-                onClick: l.onClick,
-                children: l.label
-              }
-            ))
-          ] })
-        ] })
+        value: { size: s, variant: t, titleId: z, registerTitle: j },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            ref: (o) => {
+              b.current = o, G(R, o);
+            },
+            "aria-labelledby": T || !f ? z : void 0,
+            ...L,
+            className: J({ size: s, className: c }),
+            "data-component": "empty-state",
+            ...I,
+            children: f ?? /* @__PURE__ */ d(U, { children: [
+              /* @__PURE__ */ d(g, { children: [
+                t === "first-use" && /* @__PURE__ */ e(Y, {}),
+                t === "no-results" && /* @__PURE__ */ e(_, {}),
+                t === "error" && /* @__PURE__ */ e($, {})
+              ] }),
+              /* @__PURE__ */ e(w, { children: a ?? O }),
+              /* @__PURE__ */ e(S, { children: r ?? W }),
+              (i || l) && /* @__PURE__ */ d(k, { children: [
+                i && /* @__PURE__ */ e(
+                  x,
+                  {
+                    intent: "primary",
+                    size: y,
+                    onClick: i.onClick,
+                    children: i.label ?? B
+                  }
+                ),
+                l && (l.href ? /* @__PURE__ */ e(x, { intent: "ghost", size: y, asChild: !0, children: /* @__PURE__ */ e(
+                  "a",
+                  {
+                    href: D(l.href),
+                    onClick: l.onClick,
+                    children: l.label
+                  }
+                ) }) : /* @__PURE__ */ e(
+                  x,
+                  {
+                    intent: "ghost",
+                    size: y,
+                    onClick: l.onClick,
+                    children: l.label
+                  }
+                ))
+              ] })
+            ] })
+          }
+        )
       }
-    ) });
+    );
   }
 );
 C.displayName = "EmptyState";
@@ -301,4 +332,4 @@ const lt = Object.assign(C, {
 export {
   lt as E
 };
-//# sourceMappingURL=empty-state-DQPtRp2b.js.map
+//# sourceMappingURL=empty-state-3CLJIXSj.js.map