@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/freemium-paywall.agent-_nQqLyRF.js

@@ -0,0 +1,260 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as G, useId as I, useState as E, useRef as k, useImperativeHandle as J } from "react";
+import * as i from "@radix-ui/react-alert-dialog";
+import * as K from "@radix-ui/react-radio-group";
+import { c as Q } from "./index-D2ZczOXr.js";
+import { useTranslation as W } from "react-i18next";
+import { B as R } from "./button-7mLWcMp_.js";
+import { P as X } from "./progress-wNsqkw8I.js";
+import { f as Y } from "./payment-form-BWaXas8z.js";
+import { T as Z } from "./triangle-alert-CBPUIzQo.js";
+import { C as $ } from "./check-DPdL_Sm7.js";
+const ee = Q(
+  [
+    "ds:fixed ds:z-[var(--z-modal)] ds:overflow-auto",
+    "ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]",
+    "ds:border ds:border-border ds:shadow-[var(--shadow-lg)]",
+    // forced-colors: keep the dialog boundary visible under Windows High
+    // Contrast, where `var(--border)` may collapse to system colours.
+    "ds:forced-colors:border-[CanvasText]",
+    "ds:focus:outline-none"
+  ].join(" "),
+  {
+    variants: {
+      layout: {
+        centered: "ds:start-1/2 ds:top-1/2 ds:-translate-x-1/2 ds:-translate-y-1/2 ds:rtl:translate-x-1/2 ds:rounded-[var(--radius-md)] ds:max-w-[var(--dialog-width-xl)] ds:w-[calc(100vw-2rem)] ds:max-h-[90vh]",
+        sheet: "ds:inset-inline-0 ds:bottom-0 ds:w-full ds:max-h-[90vh] ds:rounded-t-[var(--radius-md)]"
+      },
+      density: {
+        compact: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]",
+        full: "ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pt-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]"
+      }
+    },
+    defaultVariants: { layout: "centered", density: "full" }
+  }
+), se = G(
+  ({
+    open: r,
+    onOpenChange: m,
+    plans: p,
+    selectedPlanId: u,
+    defaultSelectedPlanId: j,
+    onSelectedPlanChange: n,
+    usage: t,
+    onUpgrade: F,
+    onCancel: c,
+    title: z,
+    description: A,
+    layout: C = "centered",
+    density: T = "full",
+    className: O
+  }, L) => {
+    var w;
+    const { t: s, i18n: M } = W(), f = I(), v = I(), g = u !== void 0, [S, D] = E(
+      j ?? ((w = p[0]) == null ? void 0 : w.id) ?? ""
+    ), l = g ? u ?? "" : S, U = (a) => {
+      g || D(a), n == null || n(a);
+    }, h = () => {
+      c == null || c(), m(!1);
+    }, y = () => {
+      l && F(l);
+    }, b = k(r);
+    b.current = r;
+    const x = k(l);
+    x.current = l, J(
+      L,
+      () => ({
+        isOpen: () => b.current,
+        getSelectedPlanId: () => x.current || null,
+        upgrade: () => y(),
+        dismiss: () => h()
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    const V = t ? Math.min(100, Math.max(0, t.used / Math.max(1, t.limit) * 100)) : 0, o = t ? t.used >= t.limit : !1;
+    return /* @__PURE__ */ e(i.Root, { open: r, onOpenChange: m, children: /* @__PURE__ */ d(i.Portal, { children: [
+      /* @__PURE__ */ e(
+        i.Overlay,
+        {
+          className: [
+            "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
+            "ds:bg-[color:var(--foreground)]/40",
+            "ds:motion-safe:data-[state=open]:animate-in ds:motion-safe:data-[state=closed]:animate-out",
+            "ds:[.theme-accessible_&]:animate-none"
+          ].join(" ")
+        }
+      ),
+      /* @__PURE__ */ d(
+        i.Content,
+        {
+          "aria-labelledby": f,
+          "aria-describedby": v,
+          className: ee({ layout: C, density: T, className: O }),
+          "data-component": "freemium-paywall",
+          children: [
+            /* @__PURE__ */ e(i.Title, { id: f, asChild: !0, children: /* @__PURE__ */ e("h2", { className: "type-title-card", children: z ?? s("ui.paywall.title") }) }),
+            /* @__PURE__ */ e(i.Description, { id: v, asChild: !0, children: /* @__PURE__ */ e("p", { className: "ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: A ?? s("ui.paywall.description") }) }),
+            t ? /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-md)]", children: [
+              /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]", children: [
+                o ? /* @__PURE__ */ e(
+                  Z,
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:size-4 ds:text-[color:var(--destructive)]"
+                  }
+                ) : null,
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: [
+                      "type-body-sm",
+                      o ? "ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--muted-foreground)]"
+                    ].join(" "),
+                    children: o ? s("ui.paywall.usageFull") : s("ui.paywall.usageLabel", {
+                      used: t.used,
+                      limit: t.limit
+                    })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                X,
+                {
+                  value: V,
+                  max: 100,
+                  ariaLabel: s("ui.paywall.usageLabel", {
+                    used: t.used,
+                    limit: t.limit
+                  }),
+                  className: o ? "ds:[&_[role=progressbar]>*]:bg-[color:var(--destructive)]" : ""
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ e(
+              K.Root,
+              {
+                value: l,
+                onValueChange: U,
+                "aria-label": s("ui.paywall.title"),
+                className: "ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+                children: p.map((a) => {
+                  const N = Y(
+                    a.priceAmount,
+                    a.currency,
+                    M.language
+                  ), P = a.perKey ? s(a.perKey) : void 0, B = P ? s("ui.paywall.pricePer", { price: N, period: P }) : N, H = s(a.nameKey);
+                  return /* @__PURE__ */ d(
+                    K.Item,
+                    {
+                      value: a.id,
+                      className: [
+                        "ds:group ds:relative ds:flex ds:flex-col ds:items-stretch",
+                        "ds:rounded-[var(--radius-md)] ds:border ds:border-border",
+                        "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]",
+                        "ds:text-start ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]",
+                        "ds:data-[state=checked]:border-[color:var(--primary)]",
+                        "ds:data-[state=checked]:bg-[color:var(--primary)]/5",
+                        "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)]"
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ d("span", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+                          /* @__PURE__ */ e("span", { className: "ds:font-semibold", children: H }),
+                          /* @__PURE__ */ e("span", { className: "ds:tabular-nums", children: B })
+                        ] }),
+                        a.featuresKeys && a.featuresKeys.length > 0 ? /* @__PURE__ */ e(
+                          "ul",
+                          {
+                            "aria-label": s("ui.paywall.features"),
+                            className: "ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
+                            children: a.featuresKeys.map((_, q) => /* @__PURE__ */ d(
+                              "li",
+                              {
+                                className: "ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm",
+                                children: [
+                                  /* @__PURE__ */ e(
+                                    $,
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e("span", { children: s(_) })
+                                ]
+                              },
+                              q
+                            ))
+                          }
+                        ) : null
+                      ]
+                    },
+                    a.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end", children: [
+              /* @__PURE__ */ e(i.Cancel, { asChild: !0, children: /* @__PURE__ */ e(R, { intent: "outline", onClick: h, children: s("ui.paywall.notNow") }) }),
+              /* @__PURE__ */ e(i.Action, { asChild: !0, children: /* @__PURE__ */ e(R, { intent: "primary", onClick: y, children: s("ui.paywall.upgrade") }) })
+            ] })
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+se.displayName = "FreemiumPaywall";
+const me = {
+  id: "freemium-paywall",
+  capabilities: ["submit", "dismiss"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.freemiumPaywall.state.isOpen",
+      description: "True when the paywall dialog is open.",
+      read: (r) => r.isOpen()
+    },
+    selectedPlanId: {
+      type: "string | null",
+      descriptionKey: "ui.agent.freemiumPaywall.state.selectedPlanId",
+      description: "Opaque id of the currently-selected plan.",
+      read: (r) => r.getSelectedPlanId()
+    }
+  },
+  actions: {
+    upgrade: {
+      safety: "write",
+      descriptionKey: "ui.agent.freemiumPaywall.actions.upgrade",
+      description: "Fire onUpgrade with the currently-selected plan id.",
+      invoke: (r) => {
+        r.upgrade();
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.freemiumPaywall.actions.dismiss",
+      description: "Dismiss the paywall via the Not Now action. Irreversible from the same UI.",
+      invoke: (r) => {
+        r.dismiss();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "freemium-paywall",
+      description: "Marks the FreemiumPaywall dialog content."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  se as F,
+  me as f
+};
+//# sourceMappingURL=freemium-paywall.agent-_nQqLyRF.js.map

package/dist/_chunks/{leo-sidebar-nbHib2D-.js → leo-sidebar-BwINPdix.js}

@@ -4,17 +4,17 @@ import * as ee from "@radix-ui/react-dialog";
 import { useTranslation as y } from "react-i18next";
 import { F as se } from "./floating-action-button-Cnw-f6AG.js";
 import { I as B } from "./icon-button-Wnnde5lc.js";
-import { S as E } from "./sheet-BhNpLHc9.js";
+import { S as E } from "./sheet-B9kH9pcI.js";
 import { X as de } from "./x-CCcI3eJp.js";
 import { A as L } from "./avatar-Dcr6XuDQ.js";
 import { B as D } from "./button-7mLWcMp_.js";
-import { C as ae } from "./chat-container-Cm3SlR2p.js";
+import { C as ae } from "./chat-container-Dl0Kfy5a.js";
 import { C as re } from "./chat-message-ByouZpPP.js";
-import { C as le } from "./chat-input-DreOPP8A.js";
+import { C as le } from "./chat-input-C_tMQv92.js";
 import { S as ie } from "./streaming-text-BgjCTVOw.js";
-import { a as q, S as O } from "./suggestion-chip-BNJ2M8Os.js";
+import { a as q, S as O } from "./suggestion-chip-DhFrkRPj.js";
 import { T as oe } from "./typing-indicator-CbUBf-Dx.js";
-import { P as te } from "./progress-B4Of_pzz.js";
+import { P as te } from "./progress-wNsqkw8I.js";
 import { S as ne } from "./square-CZoGU14v.js";
 import { c as ce } from "./createLucideIcon-CrFbzy84.js";
 import { P as me } from "./plus-CYKNmfuA.js";
@@ -760,4 +760,4 @@ export {
   we as b,
   Ce as c
 };
-//# sourceMappingURL=leo-sidebar-nbHib2D-.js.map
+//# sourceMappingURL=leo-sidebar-BwINPdix.js.map

package/dist/_chunks/link-QheANk74.js

@@ -0,0 +1,121 @@
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { c as w } from "./index-D2ZczOXr.js";
+import { useTranslation as N } from "react-i18next";
+import { c as L } from "./createLucideIcon-CrFbzy84.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const _ = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
+], j = L("external-link", _), T = w(
+  [
+    "ds:inline ds:underline-offset-4",
+    "ds:rounded-[var(--radius-xs)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50 ds:aria-disabled:no-underline"
+  ].join(" "),
+  {
+    variants: {
+      intent: {
+        // `--primary` already maps to `magenta-700` in light-accent and
+        // `magenta-500` in dark (see tokens/index.css), so the accent
+        // contrast trade-off in §11 of CLAUDE.md is handled at the
+        // token layer, not here.
+        default: "ds:text-primary ds:underline ds:hover:text-primary-hover ds:active:opacity-80",
+        subtle: "ds:text-muted-foreground ds:no-underline ds:hover:text-foreground ds:hover:underline ds:active:opacity-80",
+        inverted: "ds:text-primary-foreground ds:underline ds:hover:opacity-90 ds:active:opacity-80"
+      },
+      weight: {
+        normal: "ds:font-normal",
+        strong: "ds:font-semibold"
+      }
+    },
+    defaultVariants: {
+      intent: "default",
+      weight: "normal"
+    }
+  }
+), q = k(
+  ({
+    href: l,
+    external: i = !1,
+    disabled: e = !1,
+    startIcon: a,
+    endIcon: r,
+    intent: t,
+    weight: c,
+    className: f,
+    children: u,
+    target: m,
+    rel: d,
+    onClick: n,
+    ...v
+  }, p) => {
+    const { t: h } = N(), g = i ? "_blank" : m, x = i ? [d, "noopener", "noreferrer"].filter(Boolean).join(" ") : d, b = h(
+      "ui.link.opensInNewTab",
+      "Opens in a new tab"
+    );
+    return /* @__PURE__ */ y(
+      "a",
+      {
+        ref: p,
+        href: e ? void 0 : l,
+        role: e ? "link" : void 0,
+        "aria-disabled": e || void 0,
+        target: g,
+        rel: x || void 0,
+        onClick: (o) => {
+          if (e) {
+            o.preventDefault();
+            return;
+          }
+          n == null || n(o);
+        },
+        "data-component": "link",
+        "data-intent": t ?? "default",
+        className: T({ intent: t, weight: c, className: f }),
+        ...v,
+        children: [
+          a ? /* @__PURE__ */ s(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:me-[var(--spacing-2xs)] ds:[&_svg]:size-[1em] ds:align-[-0.125em]",
+              children: a
+            }
+          ) : null,
+          u,
+          i ? /* @__PURE__ */ s(
+            "span",
+            {
+              className: "ds:inline-flex ds:items-center ds:ms-[var(--spacing-2xs)] ds:align-[-0.125em]",
+              "aria-label": b,
+              children: /* @__PURE__ */ s(j, { "aria-hidden": "true", className: "ds:size-[1em]" })
+            }
+          ) : r ? /* @__PURE__ */ s(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:ms-[var(--spacing-2xs)] ds:[&_svg]:size-[1em] ds:align-[-0.125em]",
+              children: r
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+q.displayName = "Link";
+export {
+  q as L
+};
+//# sourceMappingURL=link-QheANk74.js.map