@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/dialog.agent-Daf1TTko.js

@@ -0,0 +1,179 @@
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as d, useContext as w, createContext as T } from "react";
+import * as t from "@radix-ui/react-dialog";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as R } from "react-i18next";
+import { I as z } from "./icon-button-Wnnde5lc.js";
+import { X as k } from "./x-CCcI3eJp.js";
+const O = [
+  "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
+  "ds:bg-[var(--background)]/[var(--opacity-70)]",
+  "ds:backdrop-blur-sm",
+  "ds:data-[state=open]:animate-in ds:data-[state=open]:fade-in-0",
+  "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0",
+  "ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), E = [
+  "ds:fixed ds:z-[var(--z-modal)]",
+  "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
+  "ds:shadow-[var(--shadow-xl)]",
+  "ds:p-[var(--spacing-lg)]",
+  "ds:focus-visible:outline-none",
+  "ds:data-[state=open]:animate-in ds:data-[state=open]:fade-in-0 ds:data-[state=open]:zoom-in-95",
+  "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95",
+  "ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), n = "ds:start-1/2 ds:top-1/2 ds:-translate-x-1/2 ds:-translate-y-1/2 ds:w-[calc(100%-var(--spacing-lg)*2)]", B = j(E, {
+  variants: {
+    size: {
+      sm: `${n} ds:max-w-[448px] ds:rounded-[var(--radius-lg)] ds:overflow-y-auto ds:max-h-[85dvh]`,
+      md: `${n} ds:max-w-[560px] ds:rounded-[var(--radius-lg)] ds:overflow-y-auto ds:max-h-[85dvh]`,
+      lg: `${n} ds:max-w-[720px] ds:rounded-[var(--radius-lg)] ds:overflow-y-auto ds:max-h-[85dvh]`,
+      fullscreen: "ds:start-0 ds:top-0 ds:w-[100dvw] ds:h-[100dvh] ds:max-w-none ds:rounded-none ds:overflow-y-auto"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), c = T(void 0), r = ({ children: o, id: a, ...e }) => /* @__PURE__ */ s(c.Provider, { value: a, children: /* @__PURE__ */ s(t.Root, { ...e, children: o }) });
+r.displayName = "Dialog.Root";
+const p = d(({ children: o, ...a }, e) => /* @__PURE__ */ s(t.Trigger, { ref: e, ...a, children: o }));
+p.displayName = "Dialog.Trigger";
+const m = d(({ children: o, ...a }, e) => /* @__PURE__ */ s(t.Close, { ref: e, ...a, children: o }));
+m.displayName = "Dialog.Close";
+const g = d(
+  ({
+    size: o = "md",
+    variant: a = "default",
+    hideCloseButton: e = !0,
+    className: i,
+    children: D,
+    ...y
+  }, h) => {
+    const { t: b } = R(), C = w(c), N = a === "alert" ? { role: "alertdialog" } : {};
+    return /* @__PURE__ */ l(t.Portal, { children: [
+      /* @__PURE__ */ s(t.Overlay, { className: O }),
+      /* @__PURE__ */ l(
+        t.Content,
+        {
+          ref: h,
+          ...N,
+          "data-component": "dialog",
+          "data-component-id": C,
+          className: B({ size: o, className: i }),
+          ...y,
+          children: [
+            D,
+            !e && /* @__PURE__ */ s("div", { className: "ds:absolute ds:end-[var(--spacing-md)] ds:top-[var(--spacing-md)]", children: /* @__PURE__ */ s(t.Close, { asChild: !0, children: /* @__PURE__ */ s(
+              z,
+              {
+                icon: /* @__PURE__ */ s(k, {}),
+                intent: "ghost",
+                size: "sm",
+                "aria-label": b("ui.common.close", "Close")
+              }
+            ) }) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+g.displayName = "Dialog.Content";
+const v = d(
+  ({ className: o, ...a }, e) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: e,
+      className: ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:pe-[var(--spacing-xl)]", o].filter(Boolean).join(" "),
+      ...a
+    }
+  )
+);
+v.displayName = "Dialog.Header";
+const u = d(({ className: o, ...a }, e) => /* @__PURE__ */ s(
+  t.Title,
+  {
+    ref: e,
+    className: ["type-title-card ds:break-words", o].filter(Boolean).join(" "),
+    ...a
+  }
+));
+u.displayName = "Dialog.Title";
+const f = d(({ className: o, ...a }, e) => /* @__PURE__ */ s(
+  t.Description,
+  {
+    ref: e,
+    className: ["type-body-sm ds:text-[var(--muted-foreground)]", o].filter(Boolean).join(" "),
+    ...a
+  }
+));
+f.displayName = "Dialog.Description";
+const x = d(
+  ({ className: o, divider: a = !1, ...e }, i) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      className: [
+        "ds:flex ds:items-center ds:justify-end ds:gap-[var(--spacing-sm)]",
+        "ds:mt-[var(--spacing-md)]",
+        a && "ds:border-t ds:border-[color:var(--border)] ds:pt-[var(--spacing-md)]",
+        o
+      ].filter(Boolean).join(" "),
+      ...e
+    }
+  )
+);
+x.displayName = "Dialog.Footer";
+const P = Object.assign(r, {
+  Root: r,
+  Trigger: p,
+  Content: g,
+  Header: v,
+  Title: u,
+  Description: f,
+  Footer: x,
+  Close: m
+}), V = {
+  id: "dialog",
+  capabilities: ["open", "close", "dismiss"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      description: "True when the dialog is currently open.",
+      read: (o) => o.getIsOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      description: "Open the dialog.",
+      invoke: (o) => {
+        o.open();
+      }
+    },
+    close: {
+      safety: "write",
+      description: "Close the dialog. Reversible by reopening.",
+      invoke: (o) => {
+        o.close();
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      description: "Dismiss the dialog. Loses any in-progress input that has not been committed.",
+      invoke: (o) => {
+        o.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "dialog" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on Dialog.Root."
+    }
+  }
+};
+export {
+  P as D,
+  V as d
+};
+//# sourceMappingURL=dialog.agent-Daf1TTko.js.map

package/dist/_chunks/{dropdown-menu-Cw3EyPZv.js → dropdown-menu-C7AZipNz.js}

@@ -1,11 +1,11 @@
-import { jsx as s, jsxs as t } from "react/jsx-runtime";
-import { forwardRef as r } from "react";
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as t, useContext as I, createContext as j } from "react";
 import * as o from "@radix-ui/react-dropdown-menu";
 import { c as l } from "./index-D2ZczOXr.js";
-import { S as M } from "./separator-B4wXDLNC.js";
+import { S as k } from "./separator-B4wXDLNC.js";
 import { K as m } from "./kbd-8baVw3KU.js";
-import { a as j } from "./use-direction-D6rvvG9G.js";
-import { C as k } from "./chevron-right-BrpYejk0.js";
+import { a as T } from "./use-direction-D6rvvG9G.js";
+import { C as G } from "./chevron-right-BrpYejk0.js";
 import { C as p } from "./check-DPdL_Sm7.js";
 const u = l(
   [
@@ -47,36 +47,40 @@ const u = l(
     "ds:data-[disabled]:opacity-50 ds:data-[disabled]:cursor-not-allowed",
     "ds:data-[disabled]:pointer-events-none"
   ].join(" ")
-), I = l(
+), P = l(
   [
     "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(" ")
-), f = "ds:inline-flex ds:items-center ds:justify-center ds:size-4 ds:shrink-0", h = ({ dir: d, ...e }) => {
-  const a = j();
-  return /* @__PURE__ */ s(o.Root, { dir: d ?? a, ...e });
+), f = "ds:inline-flex ds:items-center ds:justify-center ds:size-4 ds:shrink-0", h = j(void 0), v = ({ dir: n, id: e, ...a }) => {
+  const d = T();
+  return /* @__PURE__ */ s(h.Provider, { value: e, children: /* @__PURE__ */ s(o.Root, { dir: n ?? d, ...a }) });
 };
-h.displayName = "DropdownMenu.Root";
-const T = o.Trigger, G = o.Portal, P = o.Group, L = o.RadioGroup, v = r(({ className: d, sideOffset: e = 8, ...a }, n) => /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
-  o.Content,
-  {
-    ref: n,
-    sideOffset: e,
-    className: u({ className: d }),
-    "data-component": "dropdown-menu",
-    ...a
-  }
-) }));
-v.displayName = "DropdownMenu.Content";
-const g = r(
-  ({ className: d, startIcon: e, endIcon: a, description: n, shortcut: i, children: D, ...z }, R) => /* @__PURE__ */ t(
+v.displayName = "DropdownMenu.Root";
+const L = o.Trigger, K = o.Portal, B = o.Group, O = o.RadioGroup, g = t(({ className: n, sideOffset: e = 8, ...a }, d) => {
+  const r = I(h);
+  return /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
+    o.Content,
+    {
+      ref: d,
+      sideOffset: e,
+      className: u({ className: n }),
+      "data-component": "dropdown-menu",
+      "data-component-id": r,
+      ...a
+    }
+  ) });
+});
+g.displayName = "DropdownMenu.Content";
+const x = t(
+  ({ className: n, startIcon: e, endIcon: a, description: d, shortcut: r, children: z, ...M }, R) => /* @__PURE__ */ i(
     o.Item,
     {
       ref: R,
-      className: c({ className: d }),
-      ...z,
+      className: c({ className: n }),
+      ...M,
       children: [
         e ? /* @__PURE__ */ s(
           "span",
@@ -86,11 +90,11 @@ const g = r(
             children: e
           }
         ) : null,
-        /* @__PURE__ */ t("span", { className: "ds:flex-1 ds:flex ds:flex-col ds:min-w-0", children: [
-          /* @__PURE__ */ s("span", { className: "ds:truncate", children: D }),
-          n ? /* @__PURE__ */ s("span", { className: "type-meta ds:text-[color:var(--muted-foreground)] ds:truncate", children: n }) : null
+        /* @__PURE__ */ i("span", { className: "ds:flex-1 ds:flex ds:flex-col ds:min-w-0", children: [
+          /* @__PURE__ */ s("span", { className: "ds:truncate", children: z }),
+          d ? /* @__PURE__ */ s("span", { className: "type-meta ds:text-[color:var(--muted-foreground)] ds:truncate", children: d }) : null
         ] }),
-        i ? /* @__PURE__ */ s("span", { className: "ds:ms-auto", children: /* @__PURE__ */ s(m, { keys: i, size: "sm" }) }) : a ? /* @__PURE__ */ s(
+        r ? /* @__PURE__ */ s("span", { className: "ds:ms-auto", children: /* @__PURE__ */ s(m, { keys: r, size: "sm" }) }) : a ? /* @__PURE__ */ s(
           "span",
           {
             "aria-hidden": "true",
@@ -102,12 +106,12 @@ const g = r(
     }
   )
 );
-g.displayName = "DropdownMenu.Item";
-const x = r(({ className: d, children: e, ...a }, n) => /* @__PURE__ */ t(
+x.displayName = "DropdownMenu.Item";
+const N = t(({ className: n, children: e, ...a }, d) => /* @__PURE__ */ i(
   o.CheckboxItem,
   {
-    ref: n,
-    className: c({ className: d }),
+    ref: d,
+    className: c({ className: n }),
     ...a,
     children: [
       /* @__PURE__ */ s("span", { className: f, children: /* @__PURE__ */ s(o.ItemIndicator, { children: /* @__PURE__ */ s(p, { "aria-hidden": !0, className: "ds:size-4" }) }) }),
@@ -115,12 +119,12 @@ const x = r(({ className: d, children: e, ...a }, n) => /* @__PURE__ */ t(
     ]
   }
 ));
-x.displayName = "DropdownMenu.CheckboxItem";
-const K = L, N = r(({ className: d, children: e, ...a }, n) => /* @__PURE__ */ t(
+N.displayName = "DropdownMenu.CheckboxItem";
+const V = O, b = t(({ className: n, children: e, ...a }, d) => /* @__PURE__ */ i(
   o.RadioItem,
   {
-    ref: n,
-    className: c({ className: d }),
+    ref: d,
+    className: c({ className: n }),
     ...a,
     children: [
       /* @__PURE__ */ s("span", { className: f, children: /* @__PURE__ */ s(o.ItemIndicator, { children: /* @__PURE__ */ s(
@@ -134,33 +138,33 @@ const K = L, N = r(({ className: d, children: e, ...a }, n) => /* @__PURE__ */ t
     ]
   }
 ));
-N.displayName = "DropdownMenu.RadioItem";
-const b = r(({ className: d, ...e }, a) => /* @__PURE__ */ s(
+b.displayName = "DropdownMenu.RadioItem";
+const w = t(({ className: n, ...e }, a) => /* @__PURE__ */ s(
   o.Label,
   {
     ref: a,
-    className: I({ className: d }),
+    className: P({ className: n }),
     ...e
   }
 ));
-b.displayName = "DropdownMenu.Label";
-const w = r(({ className: d, ...e }, a) => /* @__PURE__ */ s(o.Separator, { ref: a, asChild: !0, ...e, children: /* @__PURE__ */ s(
-  M,
+w.displayName = "DropdownMenu.Label";
+const C = t(({ className: n, ...e }, a) => /* @__PURE__ */ s(o.Separator, { ref: a, asChild: !0, ...e, children: /* @__PURE__ */ s(
+  k,
   {
-    className: ["ds:my-[calc(var(--spacing-xs)/2)]", d ?? ""].filter(Boolean).join(" ")
+    className: ["ds:my-[calc(var(--spacing-xs)/2)]", n ?? ""].filter(Boolean).join(" ")
   }
 ) }));
-w.displayName = "DropdownMenu.Separator";
-const y = r(
-  ({ keys: d, separator: e = "none" }, a) => /* @__PURE__ */ s("span", { ref: a, className: "ds:ms-auto ds:ps-[var(--spacing-sm)]", children: /* @__PURE__ */ s(m, { keys: d, separator: e, size: "sm" }) })
+C.displayName = "DropdownMenu.Separator";
+const y = t(
+  ({ keys: n, separator: e = "none" }, a) => /* @__PURE__ */ s("span", { ref: a, className: "ds:ms-auto ds:ps-[var(--spacing-sm)]", children: /* @__PURE__ */ s(m, { keys: n, separator: e, size: "sm" }) })
 );
 y.displayName = "DropdownMenu.Shortcut";
-const B = o.Sub, C = r(({ className: d, startIcon: e, children: a, ...n }, i) => /* @__PURE__ */ t(
+const q = o.Sub, D = t(({ className: n, startIcon: e, children: a, ...d }, r) => /* @__PURE__ */ i(
   o.SubTrigger,
   {
-    ref: i,
-    className: c({ className: d }),
-    ...n,
+    ref: r,
+    className: c({ className: n }),
+    ...d,
     children: [
       e ? /* @__PURE__ */ s(
         "span",
@@ -172,7 +176,7 @@ const B = o.Sub, C = r(({ className: d, startIcon: e, children: a, ...n }, i) =>
       ) : null,
       /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: a }),
       /* @__PURE__ */ s(
-        k,
+        G,
         {
           "aria-hidden": !0,
           className: "ds:ms-auto ds:size-4 ds:shrink-0 ds:rtl:-scale-x-100"
@@ -181,35 +185,35 @@ const B = o.Sub, C = r(({ className: d, startIcon: e, children: a, ...n }, i) =>
     ]
   }
 ));
-C.displayName = "DropdownMenu.SubTrigger";
-const S = r(({ className: d, ...e }, a) => /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
+D.displayName = "DropdownMenu.SubTrigger";
+const S = t(({ className: n, ...e }, a) => /* @__PURE__ */ s(o.Portal, { children: /* @__PURE__ */ s(
   o.SubContent,
   {
     ref: a,
     sideOffset: 8,
-    className: u({ className: d }),
+    className: u({ className: n }),
     ...e
   }
 ) }));
 S.displayName = "DropdownMenu.SubContent";
-const Q = {
-  Root: h,
-  Trigger: T,
-  Portal: G,
-  Content: v,
-  Group: P,
-  Item: g,
-  CheckboxItem: x,
-  RadioGroup: K,
-  RadioItem: N,
-  Label: b,
-  Separator: w,
+const X = {
+  Root: v,
+  Trigger: L,
+  Portal: K,
+  Content: g,
+  Group: B,
+  Item: x,
+  CheckboxItem: N,
+  RadioGroup: V,
+  RadioItem: b,
+  Label: w,
+  Separator: C,
   Shortcut: y,
-  Sub: B,
-  SubTrigger: C,
+  Sub: q,
+  SubTrigger: D,
   SubContent: S
 };
 export {
-  Q as D
+  X as D
 };
-//# sourceMappingURL=dropdown-menu-Cw3EyPZv.js.map
+//# sourceMappingURL=dropdown-menu-C7AZipNz.js.map

package/dist/_chunks/dropdown-menu.agent-BcxIKOjK.js

@@ -0,0 +1,43 @@
+const o = {
+  id: "dropdown-menu",
+  capabilities: ["open", "close", "pick"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      description: "True when the menu is currently open.",
+      read: (e) => e.getIsOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      description: "Open the menu.",
+      invoke: (e) => {
+        e.open();
+      }
+    },
+    close: {
+      safety: "read",
+      description: "Close the menu.",
+      invoke: (e) => {
+        e.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."
+    }
+  }
+};
+export {
+  o as d
+};
+//# sourceMappingURL=dropdown-menu.agent-BcxIKOjK.js.map