@alfadocs/ui-kit 0.34.0 → 0.36.0

package/dist/_chunks/marketplace-app-shell-DXHxy9dj.js

@@ -0,0 +1,295 @@
+import { jsxs as s, jsx as e, Fragment as M } from "react/jsx-runtime";
+import { forwardRef as h, useState as H } from "react";
+import { useTranslation as I } from "react-i18next";
+import { A as T } from "./app-frame-BYx1gcV7.js";
+import { A as L } from "./avatar-BNQNhoyL.js";
+import { A as O } from "./alert-ywPR59NE.js";
+import { B as k } from "./button-DD_0Xdmr.js";
+import { C as b } from "./card-DPmk26CL.js";
+import { D as d } from "./dropdown-menu-BC5ZdOMo.js";
+import { H as P, g as j, f as W, e as R, a as $, c as D, d as E } from "./header-CTZWX-tm.js";
+import { S as F, a as V, h as q, j as G, k as J, i as K } from "./sidebar-BbR8f6oe.js";
+import { T as Q } from "./theme-root-BOO73p5t.js";
+import { a as U } from "./tooltip-DvmfrNvB.js";
+import { u as X } from "./use-theme-C2dHKUAN.js";
+import { c as N } from "./index-D2ZczOXr.js";
+import { L as Y } from "./logo-_Z-jLq80.js";
+const Z = N("ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]"), _ = N(
+  [
+    "ds:[font-family:var(--font-serif)]",
+    "ds:font-semibold",
+    "ds:leading-none",
+    "ds:tracking-[0.01em]",
+    "ds:whitespace-nowrap",
+    // Forced-colors: drop the transparent text-fill and paint the label
+    // as solid CanvasText so it never disappears under Windows HCM —
+    // a gradient/transparent fill has no meaning there.
+    "ds:forced-colors:text-[CanvasText]",
+    "ds:forced-colors:[-webkit-text-fill-color:CanvasText]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[calc(var(--logo-size-sm)*0.95)]",
+        md: "ds:text-[calc(var(--logo-size-md)*0.95)]",
+        lg: "ds:text-[calc(var(--logo-size-lg)*0.95)]",
+        xl: "ds:text-[calc(var(--logo-size-xl)*0.95)]"
+      },
+      tone: {
+        // Brand gradient filled into the glyphs via background-clip:text.
+        // `--gradient-wordmark` rides the theme aliases, so it stays
+        // AA-safe and adapts per theme on its own (and flattens to a solid
+        // ink in the accessible / forced-colors blocks — see tokens).
+        gradient: [
+          "ds:italic",
+          "ds:bg-[image:var(--gradient-wordmark)]",
+          "ds:bg-clip-text",
+          "ds:text-transparent",
+          "ds:[-webkit-text-fill-color:transparent]"
+        ],
+        // Monochrome: solid `--foreground` ink, upright, no gradient — for
+        // print, single-colour reproductions, and constrained contexts.
+        solid: "ds:text-[color:var(--foreground)]"
+      }
+    },
+    defaultVariants: { size: "md", tone: "gradient" }
+  }
+), f = h(
+  ({ name: t, monochrome: a = !1, size: r = "md", className: n, ...l }, o) => /* @__PURE__ */ s(
+    "span",
+    {
+      ref: o,
+      role: "img",
+      "aria-label": `Alfadocs ${t}`.trim(),
+      className: Z({ className: n }),
+      "data-component": "product-lockup",
+      ...l,
+      children: [
+        /* @__PURE__ */ e(
+          Y,
+          {
+            variant: a ? "monochrome" : "wordmark",
+            size: r,
+            decorative: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: _({
+              size: r,
+              tone: a ? "solid" : "gradient"
+            }),
+            children: t
+          }
+        )
+      ]
+    }
+  )
+);
+f.displayName = "ProductLockup";
+function ee(t) {
+  return t > 99 ? "99+" : String(t);
+}
+function ae({
+  user: t,
+  labels: a,
+  onSignOut: r,
+  onToggleFullscreen: n
+}) {
+  return (
+    // Non-modal: an account menu shouldn't inert/aria-hide the whole shell
+    // behind it (which leaves the still-focusable chrome inside an
+    // aria-hidden region — an `aria-hidden-focus` violation).
+    /* @__PURE__ */ s(d.Root, { modal: !1, children: [
+      /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+        k,
+        {
+          intent: "ghost",
+          "aria-label": a.accountMenu,
+          startIcon: /* @__PURE__ */ e(
+            L,
+            {
+              name: t.name,
+              src: t.avatarSrc,
+              size: "sm",
+              "aria-hidden": "true"
+            }
+          ),
+          "data-testid": "marketplace-account-trigger",
+          children: /* @__PURE__ */ e("span", { className: "ds:hidden ds:sm:inline", children: t.name })
+        }
+      ) }),
+      /* @__PURE__ */ s(d.Content, { align: "end", children: [
+        /* @__PURE__ */ e(d.Label, { children: /* @__PURE__ */ s("span", { className: "ds:flex ds:flex-col", children: [
+          /* @__PURE__ */ e("span", { className: "ds:font-medium", children: t.name }),
+          t.email ? /* @__PURE__ */ e("span", { className: "ds:text-[length:var(--font-size-sm)] ds:text-[color:var(--muted-foreground)]", children: t.email }) : null
+        ] }) }),
+        n && a.fullscreen ? /* @__PURE__ */ s(M, { children: [
+          /* @__PURE__ */ e(d.Separator, {}),
+          /* @__PURE__ */ e(
+            d.Item,
+            {
+              onSelect: n,
+              "data-testid": "marketplace-fullscreen",
+              children: a.fullscreen
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ e(d.Separator, {}),
+        /* @__PURE__ */ e(
+          d.Item,
+          {
+            onSelect: r,
+            "data-testid": "marketplace-sign-out",
+            children: a.signOut
+          }
+        )
+      ] })
+    ] })
+  );
+}
+function te({ nav: t }) {
+  return /* @__PURE__ */ e(V, { children: t.map((a) => {
+    const r = typeof a.badgeCount == "number" && a.badgeCount > 0 ? a.badgeCount : void 0;
+    return /* @__PURE__ */ s(
+      q,
+      {
+        href: a.href,
+        "aria-label": a.label,
+        isActive: a.isActive,
+        children: [
+          a.icon ? /* @__PURE__ */ e(G, { children: a.icon }) : null,
+          /* @__PURE__ */ e(J, { children: a.label }),
+          r !== void 0 ? /* @__PURE__ */ e(K, { children: ee(r) }) : null
+        ]
+      },
+      a.id
+    );
+  }) });
+}
+const re = h(
+  ({
+    productName: t,
+    productHref: a = "/",
+    nav: r,
+    user: n,
+    labels: l,
+    onSignOut: o,
+    onToggleFullscreen: c,
+    sidebarState: i,
+    mainAriaLabel: m,
+    children: p
+  }, u) => {
+    const { t: S } = I(), { theme: y, accessibility: A, resolvedTheme: g } = X(), C = y !== "system" || A !== "system", w = g.startsWith("dark") ? "dark" : "light", z = g.endsWith("-accessible"), [B, v] = H(!1), x = /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(
+      T,
+      {
+        mainAriaLabel: m,
+        header: /* @__PURE__ */ s(P, { children: [
+          /* @__PURE__ */ s(j, { children: [
+            /* @__PURE__ */ e(W, { href: "#main-content" }),
+            /* @__PURE__ */ e(R, { onMenuOpen: () => v(!0) }),
+            /* @__PURE__ */ e(
+              $,
+              {
+                logo: /* @__PURE__ */ e(f, { name: t, size: "md" }),
+                href: a,
+                "aria-label": `Alfadocs ${t}`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(D, {}),
+          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
+            ae,
+            {
+              user: n,
+              labels: l,
+              onSignOut: o,
+              onToggleFullscreen: c
+            }
+          ) })
+        ] }),
+        sidebar: /* @__PURE__ */ e(
+          F,
+          {
+            ...i !== void 0 ? { state: i } : { defaultState: "expanded" },
+            open: B,
+            onOpenChange: v,
+            "aria-label": S("navigation.sidebar.label"),
+            "data-testid": "marketplace-app-shell-sidebar",
+            children: /* @__PURE__ */ e(te, { nav: r })
+          }
+        ),
+        children: p
+      }
+    ) });
+    return C ? /* @__PURE__ */ e(
+      Q,
+      {
+        ref: u,
+        theme: w,
+        accessible: z,
+        className: "ds:contents",
+        "data-component": "marketplace-app-shell",
+        children: x
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: u,
+        className: "ds:contents",
+        "data-component": "marketplace-app-shell",
+        children: x
+      }
+    );
+  }
+);
+re.displayName = "MarketplaceAppShell";
+const se = h(
+  ({
+    productName: t,
+    title: a,
+    description: r,
+    connectLabel: n,
+    status: l = "idle",
+    error: o,
+    onConnect: c,
+    footer: i,
+    className: m
+  }, p) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: p,
+      "data-component": "connect-with-alfadocs",
+      className: `ds:flex ds:min-h-dvh ds:items-center ds:justify-center ds:bg-[color:var(--background)] ds:p-[var(--spacing-lg)] ${m ?? ""}`,
+      children: /* @__PURE__ */ e(b, { className: "ds:w-full ds:max-w-[400px]", children: /* @__PURE__ */ s(b.Body, { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-lg)] ds:text-center", children: [
+        /* @__PURE__ */ e(f, { name: t, size: "lg" }),
+        /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ e("h1", { className: "type-title-card", children: a }),
+          /* @__PURE__ */ e("p", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: r })
+        ] }),
+        l === "error" && o ? /* @__PURE__ */ e(O, { variant: "error", className: "ds:w-full ds:text-start", children: o }) : null,
+        /* @__PURE__ */ e(
+          k,
+          {
+            intent: "primary",
+            className: "ds:w-full",
+            loading: l === "connecting",
+            onClick: c,
+            "data-testid": "connect-with-alfadocs-button",
+            children: n
+          }
+        ),
+        i ? /* @__PURE__ */ e("div", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: i }) : null
+      ] }) })
+    }
+  )
+);
+se.displayName = "ConnectWithAlfadocs";
+export {
+  se as C,
+  re as M,
+  f as P
+};
+//# sourceMappingURL=marketplace-app-shell-DXHxy9dj.js.map

package/dist/agent-catalog.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.34.0",
+  "packageVersion": "0.36.0",
   "components": [
     {
       "kind": "component",

package/dist/brand/product-lockup/index.d.ts

@@ -0,0 +1,3 @@
+export { ProductLockup } from './product-lockup';
+export type { ProductLockupProps } from './product-lockup';
+//# sourceMappingURL=index.d.ts.map

package/dist/brand/product-lockup/product-lockup.d.ts

@@ -0,0 +1,54 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const productName: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    tone?: "gradient" | "solid" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type LockupSize = NonNullable<VariantProps<typeof productName>['size']>;
+export type ProductLockupProps = {
+    /**
+     * The product name paired with the Alfadocs wordmark — e.g. `"Builders"`
+     * renders as "Alfadocs Builders". Passed verbatim (product names are not
+     * translated); the lockup's accessible name becomes `Alfadocs <name>`.
+     */
+    name: string;
+    /**
+     * Render the name as a solid `--foreground` ink, upright (no gradient, no
+     * italic), and pair it with the monochrome wordmark. Use for print,
+     * single-colour reproductions, or any constrained context where the
+     * gradient/serif treatment is inappropriate.
+     */
+    monochrome?: boolean;
+    /** Lockup size. Drives both the wordmark and the name's cap height. */
+    size?: LockupSize;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'span'>, 'role' | 'aria-label' | 'aria-hidden' | 'children' | 'className'>;
+/**
+ * The standard lockup pairing the Alfadocs wordmark with a product name
+ * ("Alfadocs Builders", "Alfadocs MyApp"). Every marketplace app should use
+ * this rather than hand-rolling a wordmark + typed span.
+ *
+ * The whole lockup is exposed to assistive tech as a single `img` named
+ * `Alfadocs <name>`; the inner wordmark and the visible name are both
+ * decorative so the brand isn't announced twice.
+ */
+export declare const ProductLockup: import("react").ForwardRefExoticComponent<{
+    /**
+     * The product name paired with the Alfadocs wordmark — e.g. `"Builders"`
+     * renders as "Alfadocs Builders". Passed verbatim (product names are not
+     * translated); the lockup's accessible name becomes `Alfadocs <name>`.
+     */
+    name: string;
+    /**
+     * Render the name as a solid `--foreground` ink, upright (no gradient, no
+     * italic), and pair it with the monochrome wordmark. Use for print,
+     * single-colour reproductions, or any constrained context where the
+     * gradient/serif treatment is inappropriate.
+     */
+    monochrome?: boolean;
+    /** Lockup size. Drives both the wordmark and the name's cap height. */
+    size?: LockupSize;
+    className?: string;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "aria-hidden" | "className" | "role" | "children" | "aria-label"> & import("react").RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=product-lockup.d.ts.map

package/dist/components/index.d.ts

@@ -51,6 +51,7 @@ export * from './kbd';
 export * from './key-value-pair';
 export * from './list';
 export * from './logo';
+export * from '../brand/product-lockup';
 export * from './map-view';
 export * from './rating';
 export * from './skeleton';
@@ -133,4 +134,5 @@ export * from './whatsapp-button';
 export * from './workflow';
 export * from '../patterns/alia-assistant';
 export * from '../patterns/patient-shell';
+export * from '../patterns/marketplace-app-shell';
 //# sourceMappingURL=index.d.ts.map