@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/navigation-menu.agent-D69ND6Qq.js

@@ -0,0 +1,266 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { forwardRef as n, useRef as I, useState as k, useCallback as z, useMemo as C, useImperativeHandle as B } from "react";
+import * as o from "@radix-ui/react-navigation-menu";
+import { Slot as L } from "@radix-ui/react-slot";
+import { c as R } from "./index-D2ZczOXr.js";
+import { useTranslation as T } from "react-i18next";
+import { u as K } from "./use-direction-D6rvvG9G.js";
+import { C as O } from "./chevron-down-BX_NP2Yh.js";
+const S = [
+  "ds:relative ds:z-[var(--z-dropdown)]",
+  "ds:flex ds:max-w-max ds:items-center ds:justify-center"
+].join(" "), V = n(
+  ({ "aria-label": e, className: t, children: a, id: i, value: c, defaultValue: b, onValueChange: m, ...N }, w) => {
+    const { t: y } = T(), v = I(null), x = K(v), u = c !== void 0, [M, j] = k(
+      b ?? ""
+    ), r = u ? c : M, l = z(
+      (d) => {
+        u || j(d), m == null || m(d);
+      },
+      [u, m]
+    ), g = C(
+      () => ({
+        getActiveItem: () => r || null,
+        getIsOpen: () => !!r,
+        selectItem: (d) => l(d),
+        open: (d) => l(d),
+        close: () => l("")
+      }),
+      [r, l]
+    );
+    return B(w, () => g, [g]), /* @__PURE__ */ f(
+      o.Root,
+      {
+        ref: v,
+        dir: x,
+        "aria-label": e ?? y("ui.navigation.nav.label"),
+        className: [S, t].filter(Boolean).join(" "),
+        id: i,
+        "data-component": "navigation-menu",
+        "data-component-id": i,
+        value: r,
+        onValueChange: l,
+        ...N,
+        children: [
+          a,
+          /* @__PURE__ */ s(h, {})
+        ]
+      }
+    );
+  }
+);
+V.displayName = "NavigationMenu";
+const A = [
+  "ds:group ds:flex ds:flex-1",
+  "ds:list-none ds:items-center ds:justify-center",
+  "ds:gap-[var(--spacing-xs)]",
+  "ds:m-0 ds:ps-0"
+].join(" "), q = n(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  o.List,
+  {
+    ref: a,
+    className: [A, e].filter(Boolean).join(" "),
+    ...t
+  }
+));
+q.displayName = "NavigationMenuList";
+const D = n(({ navId: e, ...t }, a) => /* @__PURE__ */ s(o.Item, { ref: a, "data-nav-id": e, ...t }));
+D.displayName = "NavigationMenuItem";
+const H = [
+  "ds:group ds:inline-flex ds:items-center ds:justify-center",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-medium)]",
+  "ds:text-[var(--foreground)]",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:data-[state=open]:bg-[var(--muted)]/20",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+  "ds:gap-[var(--spacing-xs)]"
+].join(" "), _ = [
+  "ds:size-3 ds:transition-transform ds:duration-[var(--animation-duration)]",
+  "ds:group-data-[state=open]:rotate-180",
+  "ds:rtl:-scale-x-100 ds:motion-reduce:transition-none"
+].join(" "), P = n(({ className: e, children: t, ...a }, i) => /* @__PURE__ */ f(
+  o.Trigger,
+  {
+    ref: i,
+    className: [H, e].filter(Boolean).join(" "),
+    ...a,
+    children: [
+      t,
+      /* @__PURE__ */ s(O, { "aria-hidden": "true", className: _ })
+    ]
+  }
+));
+P.displayName = "NavigationMenuTrigger";
+const W = [
+  "ds:absolute ds:start-0 ds:top-0 ds:w-full",
+  "ds:md:w-auto",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:p-[var(--spacing-md)]",
+  "ds:data-[motion^=from-]:animate-in ds:data-[motion^=to-]:animate-out",
+  // Logical start/end motion mapped onto physical Tailwind animation utilities.
+  // The `rtl:` variants mirror the slide direction so `from-start` enters from
+  // the inline-start edge in both LTR and RTL.
+  "ds:data-[motion=from-start]:slide-in-from-left-52 ds:rtl:data-[motion=from-start]:slide-in-from-right-52",
+  "ds:data-[motion=from-end]:slide-in-from-right-52 ds:rtl:data-[motion=from-end]:slide-in-from-left-52",
+  "ds:data-[motion=to-start]:slide-out-to-left-52 ds:rtl:data-[motion=to-start]:slide-out-to-right-52",
+  "ds:data-[motion=to-end]:slide-out-to-right-52 ds:rtl:data-[motion=to-end]:slide-out-to-left-52",
+  "ds:motion-reduce:animate-none"
+].join(" "), E = R(W, {
+  variants: {
+    layout: {
+      simple: "ds:min-w-[16rem]",
+      mega: "ds:grid ds:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] ds:gap-[var(--spacing-md)] ds:min-w-[32rem]"
+    }
+  },
+  defaultVariants: { layout: "simple" }
+}), F = n(({ layout: e, className: t, ...a }, i) => /* @__PURE__ */ s(
+  o.Content,
+  {
+    ref: i,
+    className: E({ layout: e, className: t }),
+    ...a
+  }
+));
+F.displayName = "NavigationMenuContent";
+const p = [
+  "ds:block ds:rounded-[var(--radius-sm)]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:py-[var(--spacing-xs)]",
+  "ds:text-[var(--font-size-sm)] ds:font-[var(--font-weight-medium)]",
+  "ds:text-[var(--foreground)]",
+  "ds:no-underline",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:data-[active]:underline ds:data-[active]:underline-offset-[var(--spacing-xs)]",
+  "ds:aria-[current=page]:underline ds:aria-[current=page]:underline-offset-[var(--spacing-xs)]",
+  "ds:aria-[current=page]:font-[var(--font-weight-semibold)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), G = n(({ asChild: e = !1, className: t, children: a, ...i }, c) => /* @__PURE__ */ s(
+  o.Link,
+  {
+    ref: c,
+    asChild: e,
+    className: e ? void 0 : [p, t].filter(Boolean).join(" "),
+    ...i,
+    children: e ? /* @__PURE__ */ s(L, { className: [p, t].filter(Boolean).join(" "), children: a }) : a
+  }
+));
+G.displayName = "NavigationMenuLink";
+const J = [
+  "ds:top-full ds:z-[1] ds:flex ds:h-2 ds:items-end ds:justify-center ds:overflow-hidden",
+  "ds:data-[state=visible]:animate-in ds:data-[state=hidden]:animate-out",
+  "ds:data-[state=visible]:fade-in ds:data-[state=hidden]:fade-out",
+  "ds:motion-reduce:animate-none"
+].join(" "), Q = n(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  o.Indicator,
+  {
+    ref: a,
+    className: [J, e].filter(Boolean).join(" "),
+    ...t,
+    children: /* @__PURE__ */ s("span", { className: "ds:relative ds:top-[60%] ds:h-2 ds:w-2 ds:rotate-45 ds:rounded-tl-sm ds:bg-[var(--border)]" })
+  }
+));
+Q.displayName = "NavigationMenuIndicator";
+const U = [
+  "ds:origin-top-center ds:relative ds:mt-[var(--spacing-xs)]",
+  "ds:h-[var(--radix-navigation-menu-viewport-height)]",
+  "ds:w-full ds:overflow-hidden",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+  "ds:data-[state=open]:zoom-in-90 ds:data-[state=closed]:zoom-out-95",
+  "ds:motion-reduce:animate-none"
+].join(" "), h = n(({ className: e, ...t }, a) => /* @__PURE__ */ s("div", { className: "ds:absolute ds:start-0 ds:top-full ds:flex ds:justify-center", children: /* @__PURE__ */ s(
+  o.Viewport,
+  {
+    ref: a,
+    className: [U, e].filter(Boolean).join(" "),
+    ...t
+  }
+) }));
+h.displayName = "NavigationMenuViewport";
+const se = {
+  id: "navigation-menu",
+  capabilities: ["select_single", "navigate", "open", "close"],
+  state: {
+    activeItem: {
+      type: "string | null",
+      descriptionKey: "ui.agent.navigationMenu.state.activeItem",
+      description: "Id of the currently-active top-level navigation item, or null when none is active.",
+      read: (e) => e.getActiveItem() ?? null
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.navigationMenu.state.isOpen",
+      description: "Whether a dropdown / mega-menu panel is currently open.",
+      read: (e) => e.getIsOpen()
+    }
+  },
+  actions: {
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.navigationMenu.actions.selectItem",
+      description: "Activate (open) the top-level item with the given id.",
+      invoke: (e, t) => {
+        e.selectItem(t.id);
+      }
+    },
+    open: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.navigationMenu.actions.open",
+      description: "Open the dropdown / mega-menu panel for the given top-level item id.",
+      invoke: (e, t) => {
+        e.open(t.id);
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.navigationMenu.actions.close",
+      description: "Close any open dropdown / mega-menu panel.",
+      invoke: (e) => {
+        e.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "navigation-menu",
+      description: "Marks the NavigationMenu root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific menu from the agent."
+    },
+    item: {
+      attr: "data-nav-id",
+      description: "Stable opaque id of a top-level navigation item. Selection / open targets this attribute."
+    }
+  }
+};
+export {
+  V as N,
+  F as a,
+  Q as b,
+  D as c,
+  G as d,
+  q as e,
+  P as f,
+  h as g,
+  se as n
+};
+//# sourceMappingURL=navigation-menu.agent-D69ND6Qq.js.map

package/dist/_chunks/{notification-card-BF2_veHy.js → notification-card-CsVEYJE-.js}

@@ -112,7 +112,7 @@ const J = M(
       time: S,
       unreadSuffix: I,
       defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
-    }), p = !!e.url && G(e.url), o = /* @__PURE__ */ a(
+    }), p = !!e.url && G(e.url), i = /* @__PURE__ */ a(
       "span",
       {
         className: [
@@ -122,8 +122,8 @@ const J = M(
         children: e.title
       }
     );
-    let i;
-    return r === "compact" && p && t ? i = /* @__PURE__ */ a(
+    let o;
+    return r === "compact" && p && t ? o = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -132,18 +132,18 @@ const J = M(
         onClick: (s) => {
           s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || t(e);
         },
-        children: o
+        children: i
       }
-    ) : r === "compact" && t ? i = /* @__PURE__ */ a(
+    ) : r === "compact" && t ? o = /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         "aria-label": x,
         className: C + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
         onClick: () => t(e),
-        children: o
+        children: i
       }
-    ) : r === "dashboard" && p && t ? i = /* @__PURE__ */ a(
+    ) : r === "dashboard" && p && t ? o = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -151,14 +151,15 @@ const J = M(
         onClick: (s) => {
           s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || t(e);
         },
-        children: o
+        children: i
       }
-    ) : i = o, /* @__PURE__ */ n(
+    ) : o = i, /* @__PURE__ */ n(
       "div",
       {
         ref: K,
         role: "listitem",
         "data-component": "notification-card",
+        "data-component-id": e.id,
         "data-read": e.read ? "true" : "false",
         "data-leaving": g ? "true" : void 0,
         "aria-hidden": g || void 0,
@@ -185,8 +186,8 @@ const J = M(
               r === "dashboard" ? (
                 // `h3` keeps the dashboard heading ladder continuous:
                 // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).
-                /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: i })
-              ) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: i })
+                /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: o })
+              ) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: o })
             ] }),
             e.description ? /* @__PURE__ */ a("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words", children: e.description }) : null,
             /* @__PURE__ */ a(
@@ -253,4 +254,4 @@ export {
   J as N,
   G as i
 };
-//# sourceMappingURL=notification-card-BF2_veHy.js.map
+//# sourceMappingURL=notification-card-CsVEYJE-.js.map

package/dist/_chunks/notification-card.agent-Rqt3ofk9.js

@@ -0,0 +1,22 @@
+const t = {
+  id: "notification-card",
+  capabilities: ["dismiss"],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "notification-card",
+      description: "Marks the element as a kit NotificationCard. The card root also emits data-component-id sourced from item.id and data-read with the current read flag."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "item.id",
+      description: "Sourced from item.id — the stable notification identifier."
+    }
+  }
+};
+export {
+  t as n
+};
+//# sourceMappingURL=notification-card.agent-Rqt3ofk9.js.map