@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/message-tray-VaLpQU5t.js

@@ -1,303 +0,0 @@
-import { jsx as e, jsxs as o, Fragment as k } from "react/jsx-runtime";
-import { forwardRef as se, useState as S, useCallback as V, useLayoutEffect as ae, useEffect as I, useRef as R } from "react";
-import * as p from "@radix-ui/react-popover";
-import { c as y } from "./index-D2ZczOXr.js";
-import { useTranslation as E } from "react-i18next";
-import { I as te } from "./icon-button-Wnnde5lc.js";
-import { B } from "./button-7mLWcMp_.js";
-import { S as P } from "./separator-B4wXDLNC.js";
-import { S as l } from "./skeleton-dtqyF09N.js";
-import { M as re } from "./message-card-qAp2-WQK.js";
-import { M as L } from "./mail-C8irm52s.js";
-const ne = y("ds:relative ds:inline-flex ds:items-center", {
-  variants: {
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-}), ie = y(
-  [
-    "ds:flex ds:flex-col",
-    "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
-    "ds:border ds:border-[color:var(--border)]",
-    "ds:rounded-[var(--radius-md)]",
-    "ds:shadow-[var(--shadow-lg)]",
-    "ds:z-[var(--z-popover)]",
-    // Width: fluid below the design cap so narrow viewports keep a visible
-    // gutter on both sides (shadow included). Cap slightly wider than
-    // NotificationTray because message rows carry subject + preview.
-    "ds:w-[min(26rem,calc(100vw-2*var(--spacing-md)))]",
-    // Height: below the `sm` breakpoint the panel takes a near-full-screen
-    // sheet shape so the user gets room to triage an inbox without
-    // scrolling a tiny popover. `6rem` reserves space for the Header
-    // (≈4rem) plus the sideOffset + collisionPadding (≈2rem). Above `sm`
-    // it returns to `h-auto` so the list's own cap governs the height.
-    "ds:h-[calc(100dvh-6rem)] ds:sm:h-auto",
-    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
-    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
-    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
-    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
-    "ds:focus-visible:outline-none",
-    "ds:forced-colors:border-[CanvasText]"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: "ds:p-[var(--spacing-xs)]",
-        md: "ds:p-[var(--spacing-sm)]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), de = y(
-  [
-    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
-    "ds:inline-flex ds:items-center ds:justify-center",
-    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
-    "ds:rounded-[var(--radius-full)]",
-    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
-    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
-    "ds:pointer-events-none ds:select-none",
-    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
-  ].join(" ")
-);
-function oe(a, f) {
-  return a > 99 ? f : String(a);
-}
-function h() {
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
-      children: [
-        /* @__PURE__ */ e(l, { variant: "circular", size: "sm" }),
-        /* @__PURE__ */ o("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ e(l, { variant: "text", size: "md", width: "60%" }),
-          /* @__PURE__ */ e(l, { variant: "text", size: "sm", width: "80%" }),
-          /* @__PURE__ */ e(l, { variant: "text", size: "sm", width: "95%" }),
-          /* @__PURE__ */ e(l, { variant: "text", size: "sm", width: "30%" })
-        ] })
-      ]
-    }
-  );
-}
-function le() {
-  const { t: a } = E();
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      role: "status",
-      "aria-live": "polite",
-      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center",
-      children: [
-        /* @__PURE__ */ e(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
-            children: /* @__PURE__ */ e(L, {})
-          }
-        ),
-        /* @__PURE__ */ e("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: a("ui.messageTray.noMessages", "No messages") }),
-        /* @__PURE__ */ e("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: a(
-          "ui.messageTray.noMessagesDescription",
-          "Your inbox is clear."
-        ) })
-      ]
-    }
-  );
-}
-const ce = se(
-  ({
-    items: a,
-    unreadCount: f,
-    open: b,
-    onOpenChange: c,
-    onItemClick: D,
-    onDismiss: F,
-    onMarkAllRead: w,
-    loading: O = !1,
-    maxVisible: A,
-    viewAllLabel: N,
-    onViewAll: W,
-    align: Y = "end",
-    side: q = "bottom",
-    size: g = "md",
-    className: G,
-    ...H
-  }, J) => {
-    var C;
-    const { t: i } = E(), v = b !== void 0, [K, Q] = S(!1), U = v ? b : K, X = V(
-      (s) => {
-        v || Q(s), c == null || c(s);
-      },
-      [v, c]
-    ), [m, T] = S(
-      () => a.map((s) => ({ item: s, leaving: !1 }))
-    ), z = V(() => {
-      if (typeof window > "u") return 200;
-      const s = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
-      if (!s) return 200;
-      const r = s.trim(), t = parseFloat(r);
-      return Number.isFinite(t) ? r.endsWith("ms") ? t : t * 1e3 : 200;
-    }, []);
-    ae(() => {
-      T((s) => {
-        const r = new Set(a.map((n) => n.id)), t = new Set(s.map((n) => n.item.id)), d = s.map((n) => {
-          if (r.has(n.item.id)) {
-            const j = a.find((ee) => ee.id === n.item.id);
-            return j ? { item: j, leaving: !1 } : { ...n, leaving: !0 };
-          }
-          return { ...n, leaving: !0 };
-        });
-        for (const n of a)
-          t.has(n.id) || d.push({ item: n, leaving: !1 });
-        return d;
-      });
-    }, [a]), I(() => {
-      if (!m.some((t) => t.leaving)) return;
-      const s = z(), r = setTimeout(() => {
-        T((t) => t.filter((d) => !d.leaving));
-      }, s);
-      return () => clearTimeout(r);
-    }, [m, z]);
-    const x = R(null), M = R((C = a[0]) == null ? void 0 : C.id);
-    I(() => {
-      var t;
-      const s = (t = a[0]) == null ? void 0 : t.id, r = M.current;
-      if (r && s && r !== s && x.current) {
-        const d = a[0];
-        d && !d.read && (x.current.textContent = i(
-          "ui.messageTray.newMessage",
-          {
-            sender: d.sender.name,
-            defaultValue: "New message from {{sender}}"
-          }
-        ));
-      }
-      M.current = s;
-    }, [a, i]);
-    const u = f ?? 0, Z = u > 0 ? i("ui.messageTray.triggerLabel", {
-      count: u,
-      defaultValue: "Messages, {{count}} unread"
-    }) : i("ui.messageTray.triggerLabelNone", "Messages, none unread"), _ = oe(
-      u,
-      i("ui.messageTray.badgeCountOverflow", "99+")
-    ), $ = ie({ size: g });
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        ref: J,
-        "data-component": "message-tray",
-        className: [ne({ size: g }), G].filter(Boolean).join(" "),
-        ...H,
-        children: /* @__PURE__ */ o(p.Root, { open: U, onOpenChange: X, children: [
-          /* @__PURE__ */ e(p.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
-            te,
-            {
-              icon: /* @__PURE__ */ e(L, {}),
-              intent: "outline",
-              size: g === "sm" ? "sm" : "md",
-              "aria-label": Z,
-              "aria-haspopup": "dialog"
-            }
-          ) }),
-          u > 0 ? /* @__PURE__ */ e(
-            "span",
-            {
-              "aria-hidden": "true",
-              "data-testid": "message-tray-badge",
-              className: de(),
-              children: _
-            }
-          ) : null,
-          /* @__PURE__ */ e(
-            "div",
-            {
-              ref: x,
-              "aria-live": "polite",
-              "aria-atomic": "true",
-              className: "ds:sr-only"
-            }
-          ),
-          /* @__PURE__ */ e(p.Portal, { children: /* @__PURE__ */ o(
-            p.Content,
-            {
-              role: "dialog",
-              "aria-label": i("ui.messageTray.panelTitle", "Messages"),
-              side: q,
-              align: Y,
-              sideOffset: 8,
-              collisionPadding: 16,
-              className: $,
-              children: [
-                /* @__PURE__ */ o("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: [
-                  /* @__PURE__ */ e("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: i("ui.messageTray.panelTitle", "Messages") }),
-                  w && a.some((s) => !s.read) ? /* @__PURE__ */ e(
-                    B,
-                    {
-                      intent: "link",
-                      size: "sm",
-                      onClick: w,
-                      className: "ds:text-[length:var(--font-size-xs)]",
-                      children: i("ui.messageTray.markAllRead", "Mark all as read")
-                    }
-                  ) : null
-                ] }),
-                /* @__PURE__ */ e(P, {}),
-                /* @__PURE__ */ e(
-                  "div",
-                  {
-                    role: "list",
-                    "data-max-visible": A,
-                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]",
-                    children: O ? /* @__PURE__ */ o(k, { children: [
-                      /* @__PURE__ */ e(h, {}),
-                      /* @__PURE__ */ e(h, {}),
-                      /* @__PURE__ */ e(h, {})
-                    ] }) : m.length === 0 ? /* @__PURE__ */ e(le, {}) : m.map(({ item: s, leaving: r }) => /* @__PURE__ */ e(
-                      re,
-                      {
-                        item: s,
-                        variant: "compact",
-                        leaving: r,
-                        onActivate: D,
-                        onDismiss: F
-                      },
-                      s.id
-                    ))
-                  }
-                ),
-                N ? /* @__PURE__ */ o(k, { children: [
-                  /* @__PURE__ */ e(P, {}),
-                  /* @__PURE__ */ e("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ e(
-                    B,
-                    {
-                      intent: "link",
-                      size: "sm",
-                      onClick: W,
-                      className: "ds:w-full ds:justify-center",
-                      children: N
-                    }
-                  ) })
-                ] }) : null
-              ]
-            }
-          ) })
-        ] })
-      }
-    );
-  }
-);
-ce.displayName = "MessageTray";
-export {
-  ce as M
-};
-//# sourceMappingURL=message-tray-VaLpQU5t.js.map

package/dist/_chunks/navigation-menu-EVFau1O2.js

@@ -1,180 +0,0 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as n, useRef as g } from "react";
-import * as e from "@radix-ui/react-navigation-menu";
-import { Slot as p } from "@radix-ui/react-slot";
-import { c as b } from "./index-D2ZczOXr.js";
-import { useTranslation as h } from "react-i18next";
-import { u as N } from "./use-direction-D6rvvG9G.js";
-import { c as w } from "./compose-refs-C0k0tdqF.js";
-import { C as x } from "./chevron-down-BX_NP2Yh.js";
-const j = [
-  "ds:relative ds:z-[var(--z-dropdown)]",
-  "ds:flex ds:max-w-max ds:items-center ds:justify-center"
-].join(" "), y = n(({ "aria-label": s, className: a, children: t, ...i }, d) => {
-  const { t: c } = h(), r = g(null), f = w(d, r), v = N(r);
-  return /* @__PURE__ */ m(
-    e.Root,
-    {
-      ref: f,
-      dir: v,
-      "aria-label": s ?? c("ui.navigation.nav.label"),
-      className: [j, a].filter(Boolean).join(" "),
-      "data-component": "navigation-menu",
-      ...i,
-      children: [
-        t,
-        /* @__PURE__ */ o(u, {})
-      ]
-    }
-  );
-});
-y.displayName = "NavigationMenu";
-const M = [
-  "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(" "), z = n(({ className: s, ...a }, t) => /* @__PURE__ */ o(
-  e.List,
-  {
-    ref: t,
-    className: [M, s].filter(Boolean).join(" "),
-    ...a
-  }
-));
-z.displayName = "NavigationMenuList";
-const O = e.Item, C = [
-  "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(" "), B = [
-  "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(" "), k = n(({ className: s, children: a, ...t }, i) => /* @__PURE__ */ m(
-  e.Trigger,
-  {
-    ref: i,
-    className: [C, s].filter(Boolean).join(" "),
-    ...t,
-    children: [
-      a,
-      /* @__PURE__ */ o(x, { "aria-hidden": "true", className: B })
-    ]
-  }
-));
-k.displayName = "NavigationMenuTrigger";
-const R = [
-  "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(" "), L = b(R, {
-  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" }
-}), I = n(({ layout: s, className: a, ...t }, i) => /* @__PURE__ */ o(
-  e.Content,
-  {
-    ref: i,
-    className: L({ layout: s, className: a }),
-    ...t
-  }
-));
-I.displayName = "NavigationMenuContent";
-const l = [
-  "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(" "), V = n(({ asChild: s = !1, className: a, children: t, ...i }, d) => /* @__PURE__ */ o(
-  e.Link,
-  {
-    ref: d,
-    asChild: s,
-    className: s ? void 0 : [l, a].filter(Boolean).join(" "),
-    ...i,
-    children: s ? /* @__PURE__ */ o(p, { className: [l, a].filter(Boolean).join(" "), children: t }) : t
-  }
-));
-V.displayName = "NavigationMenuLink";
-const T = [
-  "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(" "), D = n(({ className: s, ...a }, t) => /* @__PURE__ */ o(
-  e.Indicator,
-  {
-    ref: t,
-    className: [T, s].filter(Boolean).join(" "),
-    ...a,
-    children: /* @__PURE__ */ o("span", { className: "ds:relative ds:top-[60%] ds:h-2 ds:w-2 ds:rotate-45 ds:rounded-tl-sm ds:bg-[var(--border)]" })
-  }
-));
-D.displayName = "NavigationMenuIndicator";
-const S = [
-  "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(" "), u = n(({ className: s, ...a }, t) => /* @__PURE__ */ o("div", { className: "ds:absolute ds:start-0 ds:top-full ds:flex ds:justify-center", children: /* @__PURE__ */ o(
-  e.Viewport,
-  {
-    ref: t,
-    className: [S, s].filter(Boolean).join(" "),
-    ...a
-  }
-) }));
-u.displayName = "NavigationMenuViewport";
-export {
-  y as N,
-  I as a,
-  D as b,
-  O as c,
-  V as d,
-  z as e,
-  k as f,
-  u as g
-};
-//# sourceMappingURL=navigation-menu-EVFau1O2.js.map