@alfadocs/ui-kit-debug 0.35.0 → 0.36.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/brand/product-lockup/product-lockup.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Logo } from '../../components/logo/logo';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                  */\n/* ------------------------------------------------------------------ */\n\n// Outer lockup row. ~4px logical gap between the wordmark and the product\n// name (`--spacing-xs`), centre-aligned so the name's cap height sits\n// against the wordmark's letterforms.\nconst lockup = cva('ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]');\n\n// The product name. Marketing serif (Fraunces, `--font-serif`) — permitted\n// here because this file lives under `src/brand/`, never in `src/components/`\n// or `src/patterns/` (constraint 10). Sized to ~95% of the wordmark height so\n// its cap height matches the logo letterforms across every size and theme\n// (the `--logo-size-*` tokens shift up in the accessible themes; the calc\n// keeps the name proportional for free).\nconst productName = cva(\n  [\n    'ds:[font-family:var(--font-serif)]',\n    'ds:font-semibold',\n    'ds:leading-none',\n    'ds:tracking-[0.01em]',\n    'ds:whitespace-nowrap',\n    // Forced-colors: drop the transparent text-fill and paint the label\n    // as solid CanvasText so it never disappears under Windows HCM —\n    // a gradient/transparent fill has no meaning there.\n    'ds:forced-colors:text-[CanvasText]',\n    'ds:forced-colors:[-webkit-text-fill-color:CanvasText]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'ds:text-[calc(var(--logo-size-sm)*0.95)]',\n        md: 'ds:text-[calc(var(--logo-size-md)*0.95)]',\n        lg: 'ds:text-[calc(var(--logo-size-lg)*0.95)]',\n        xl: 'ds:text-[calc(var(--logo-size-xl)*0.95)]',\n      },\n      tone: {\n        // Brand gradient filled into the glyphs via background-clip:text.\n        // `--gradient-wordmark` rides the theme aliases, so it stays\n        // AA-safe and adapts per theme on its own (and flattens to a solid\n        // ink in the accessible / forced-colors blocks — see tokens).\n        gradient: [\n          'ds:italic',\n          'ds:bg-[image:var(--gradient-wordmark)]',\n          'ds:bg-clip-text',\n          'ds:text-transparent',\n          'ds:[-webkit-text-fill-color:transparent]',\n        ],\n        // Monochrome: solid `--foreground` ink, upright, no gradient — for\n        // print, single-colour reproductions, and constrained contexts.\n        solid: 'ds:text-[color:var(--foreground)]',\n      },\n    },\n    defaultVariants: { size: 'md', tone: 'gradient' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types                                                                */\n/* ------------------------------------------------------------------ */\n\ntype LockupSize = NonNullable<VariantProps<typeof productName>['size']>;\n\nexport type ProductLockupProps = {\n  /**\n   * The product name paired with the Alfadocs wordmark — e.g. `\"Builders\"`\n   * renders as \"Alfadocs Builders\". Passed verbatim (product names are not\n   * translated); the lockup's accessible name becomes `Alfadocs <name>`.\n   */\n  name: string;\n  /**\n   * Render the name as a solid `--foreground` ink, upright (no gradient, no\n   * italic), and pair it with the monochrome wordmark. Use for print,\n   * single-colour reproductions, or any constrained context where the\n   * gradient/serif treatment is inappropriate.\n   */\n  monochrome?: boolean;\n  /** Lockup size. Drives both the wordmark and the name's cap height. */\n  size?: LockupSize;\n  className?: string;\n} & Omit<\n  ComponentPropsWithoutRef<'span'>,\n  'role' | 'aria-label' | 'aria-hidden' | 'children' | 'className'\n>;\n\n/* ------------------------------------------------------------------ */\n/* ProductLockup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * The standard lockup pairing the Alfadocs wordmark with a product name\n * (\"Alfadocs Builders\", \"Alfadocs MyApp\"). Every marketplace app should use\n * this rather than hand-rolling a wordmark + typed span.\n *\n * The whole lockup is exposed to assistive tech as a single `img` named\n * `Alfadocs <name>`; the inner wordmark and the visible name are both\n * decorative so the brand isn't announced twice.\n */\nexport const ProductLockup = forwardRef<HTMLSpanElement, ProductLockupProps>(\n  ({ name, monochrome = false, size = 'md', className, ...props }, ref) => {\n    if (import.meta.env.DEV && !name.trim()) {\n      console.warn(\n        '[ProductLockup] `name` is empty — the lockup will render the bare wordmark with no product name. Pass the product name (e.g. \"Builders\").',\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        role=\"img\"\n        aria-label={`Alfadocs ${name}`.trim()}\n        className={lockup({ className })}\n        data-component=\"product-lockup\"\n        {...props}\n      >\n        <Logo\n          variant={monochrome ? 'monochrome' : 'wordmark'}\n          size={size}\n          decorative\n        />\n        <span\n          aria-hidden\n          className={productName({\n            size,\n            tone: monochrome ? 'solid' : 'gradient',\n          })}\n        >\n          {name}\n        </span>\n      </span>\n    );\n  },\n);\nProductLockup.displayName = 'ProductLockup';\n"],"names":["lockup","cva","productName","ProductLockup","forwardRef","name","monochrome","size","className","props","ref","jsxs","jsx","Logo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAASC,EAAI,2DAA2D,GAQxEC,IAAcD;AAAA,EAClB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,QAKJ,UAAU;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA;AAAA;AAAA,QAIF,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB,EAAE,MAAM,MAAM,MAAM,WAAA;AAAA,EAAW;AAEpD,GA2CaE,IAAgBC;AAAA,EAC3B,CAAC,EAAE,MAAAC,GAAM,YAAAC,IAAa,IAAO,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAQ7D,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,cAAY,YAAYL,CAAI,GAAG,KAAA;AAAA,MAC/B,WAAWL,EAAO,EAAE,WAAAQ,GAAW;AAAA,MAC/B,kBAAe;AAAA,MACd,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAASP,IAAa,eAAe;AAAA,YACrC,MAAAC;AAAA,YACA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAWV,EAAY;AAAA,cACrB,MAAAK;AAAA,cACA,MAAMD,IAAa,UAAU;AAAA,YAAA,CAC9B;AAAA,YAEA,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AACAF,EAAc,cAAc;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/patterns/marketplace-app-shell/index.d.ts

@@ -0,0 +1,3 @@
+export { MarketplaceAppShell, ConnectWithAlfadocs, } from './marketplace-app-shell';
+export type { MarketplaceAppShellProps, MarketplaceAppShellLabels, MarketplaceAppUser, MarketplaceNavItem, ConnectWithAlfadocsProps, ConnectStatus, } from './marketplace-app-shell';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/marketplace-app-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/marketplace-app-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,wBAAwB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,GACd,MAAM,yBAAyB,CAAC"}

package/dist/patterns/marketplace-app-shell/index.js

@@ -0,0 +1,6 @@
+import { C as l, M as o } from "../../_chunks/marketplace-app-shell-DXHxy9dj.js";
+export {
+  l as ConnectWithAlfadocs,
+  o as MarketplaceAppShell
+};
+//# sourceMappingURL=index.js.map

package/dist/patterns/marketplace-app-shell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/patterns/marketplace-app-shell/marketplace-app-shell.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Marketplace App Shell — the standard chrome for an app built on top of
+ * AlfaDocs (the kind a partner scaffolds with Claude Code, Lovable, etc.).
+ *
+ * It is a thin, opinionated composition of kit primitives: an `AppFrame` with
+ * a branded `Header` (the `ProductLockup` "Alfadocs <Product>"), a `Sidebar`
+ * for app navigation, and an account menu with sign-out. `ConnectWithAlfadocs`
+ * is the matching pre-auth screen.
+ *
+ * Like `PatientShell`, this pattern ships a RUNTIME component (surfaced via
+ * `src/patterns/index.ts` and the library bundle) because consuming apps mount
+ * it in production rather than copying the source.
+ *
+ * Auth is intentionally decoupled: the shell takes the signed-in `user` and an
+ * `onSignOut` callback as props, and `ConnectWithAlfadocs` takes a `status` +
+ * `onConnect`. Wire them to `@alfadocs/auth/react`'s `useAlfadocsAuth()` in the
+ * consuming app — the kit never touches OAuth or secrets (those live in the
+ * server-side `@alfadocs/auth` BFF).
+ *
+ * All user-visible copy is consumer-provided (props) so each app localises in
+ * its own i18n; the only kit-owned strings reuse existing translated `ui.*`
+ * keys (sidebar label, skip link, menu button).
+ */
+import { type ReactNode } from 'react';
+import { type SidebarMode } from '../../components/sidebar';
+export interface MarketplaceNavItem {
+    id: string;
+    /** Pre-translated label — apps localise their own nav copy. */
+    label: string;
+    href: string;
+    /** Optional leading icon (a lucide-react element or equivalent). */
+    icon?: ReactNode;
+    /** Optional unseen-item count rendered as a pill badge. */
+    badgeCount?: number;
+    /** Mark the item as the current page (`aria-current='page'`). */
+    isActive?: boolean;
+}
+export interface MarketplaceAppUser {
+    /** Display name — drives the avatar initials + the account-menu header. */
+    name: string;
+    /** Optional email shown under the name in the account menu. */
+    email?: string;
+    /** Optional avatar image URL. */
+    avatarSrc?: string;
+}
+export interface MarketplaceAppShellLabels {
+    /** Accessible name for the account-menu trigger, e.g. "Account menu". */
+    accountMenu: string;
+    /** The sign-out menu item, e.g. "Sign out". */
+    signOut: string;
+    /**
+     * Optional fullscreen menu item, e.g. "Toggle fullscreen". When omitted (or
+     * `onToggleFullscreen` is not supplied) the item is not rendered.
+     */
+    fullscreen?: string;
+}
+export interface MarketplaceAppShellProps {
+    /** Product name paired with the Alfadocs wordmark — renders "Alfadocs <productName>". */
+    productName: string;
+    /** Link target for the brand lockup. Default `'/'`. */
+    productHref?: string;
+    /** Sidebar nav items, in order. */
+    nav: MarketplaceNavItem[];
+    /** The signed-in user shown in the account menu. */
+    user: MarketplaceAppUser;
+    /** Consumer-localised chrome labels owned by the shell. */
+    labels: MarketplaceAppShellLabels;
+    /** Fires when the user picks "Sign out". Wire to `useAlfadocsAuth().signOut`. */
+    onSignOut?: () => void;
+    /** Fires when the user toggles fullscreen. Omit to hide the fullscreen item. */
+    onToggleFullscreen?: () => void;
+    /**
+     * Force the sidebar into a specific mode. Apps typically flip to `'overlay'`
+     * on narrow viewports and leave this undefined elsewhere (defaults to
+     * `'expanded'`).
+     */
+    sidebarState?: SidebarMode;
+    /** Override the accessible name of the `<main>` landmark. */
+    mainAriaLabel?: string;
+    /** Children render inside the main content region. */
+    children: ReactNode;
+}
+export declare const MarketplaceAppShell: import("react").ForwardRefExoticComponent<MarketplaceAppShellProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ConnectStatus = 'idle' | 'connecting' | 'error';
+export interface ConnectWithAlfadocsProps {
+    /** Product name for the lockup at the top of the card. */
+    productName: string;
+    /** Heading, e.g. "Connect your AlfaDocs account". */
+    title: string;
+    /** Supporting copy below the heading. */
+    description: ReactNode;
+    /** The connect button label, e.g. "Connect with AlfaDocs". */
+    connectLabel: string;
+    /** Connection lifecycle. `connecting` shows a loading button; `error` shows the alert. */
+    status?: ConnectStatus;
+    /** Error message shown (as an alert) when `status === 'error'`. */
+    error?: ReactNode;
+    /** Fires when the connect button is pressed. Wire to `useAlfadocsAuth().connect`. */
+    onConnect?: () => void;
+    /** Optional footer content below the button (e.g. a "what's this?" link). */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * The pre-auth "Connect with AlfaDocs" screen. Centred card with the product
+ * lockup, copy, an error slot, and the primary connect CTA. Presentational —
+ * `onConnect` should call `useAlfadocsAuth().connect()`, which redirects the
+ * browser to the server-side BFF that runs the real OAuth2 + PKCE flow.
+ */
+export declare const ConnectWithAlfadocs: import("react").ForwardRefExoticComponent<ConnectWithAlfadocsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=marketplace-app-shell.d.ts.map

package/dist/patterns/marketplace-app-shell/marketplace-app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"marketplace-app-shell.d.ts","sourceRoot":"","sources":["../../../src/patterns/marketplace-app-shell/marketplace-app-shell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkB7D,OAAO,EAOL,KAAK,WAAW,EACjB,MAAM,0BAA0B,CAAC;AAUlC,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,wBAAwB;IACvC,yFAAyF;IACzF,WAAW,EAAE,MAAM,CAAC;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,GAAG,EAAE,kBAAkB,EAAE,CAAC;IAC1B,oDAAoD;IACpD,IAAI,EAAE,kBAAkB,CAAC;IACzB,2DAA2D;IAC3D,MAAM,EAAE,yBAAyB,CAAC;IAClC,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AA4GD,eAAO,MAAM,mBAAmB,qHAsG/B,CAAC;AAQF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,wBAAwB;IACvC,0DAA0D;IAC1D,WAAW,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,WAAW,EAAE,SAAS,CAAC;IACvB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IACrB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,qHAyD/B,CAAC"}