@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/ui/components/Layout.js

@@ -28,21 +28,32 @@ import { buildSurfaceClasses } from "./surface-tokens";
  */
 // --- Token maps --------------------------------------------------------------
 /**
- * Gap tokens — maps to `gap-*` Tailwind classes.
- * Mirrors THEME_CONSTANTS.spacing.gap in the host app.
+ * Gap tokens — maps to compiled `.appkit-gap--*` rules in `Layout.style.css`.
+ *
+ * The variant catalogue ships the canonical names (`dense`, `comfortable`,
+ * `loose`, `section`, `hero`) alongside the legacy scalar names so existing
+ * call sites keep working while new code adopts the catalogue tokens.
  */
 const GAP_MAP = {
     none: "",
     px: "appkit-gap--px",
     xs: "appkit-gap--xs",
+    "1.5": "appkit-gap--1-5",
     sm: "appkit-gap--sm",
     "2.5": "appkit-gap--2-5",
     "3": "appkit-gap--3",
+    "14": "appkit-gap--14",
     md: "appkit-gap--md",
     "5": "appkit-gap--5",
     lg: "appkit-gap--lg",
     xl: "appkit-gap--xl",
     "2xl": "appkit-gap--2xl",
+    // Catalogue aliases — preferred by the variant audit.
+    dense: "appkit-gap--dense",
+    comfortable: "appkit-gap--comfortable",
+    loose: "appkit-gap--loose",
+    section: "appkit-gap--section",
+    hero: "appkit-gap--hero",
 };
 /**
  * Page container sizes.
@@ -149,21 +160,70 @@ export function Container({ size = "2xl", as, surface, padding, rounded, border,
             .filter(Boolean)
             .join(" "), ...props, children: children }));
 }
-export function Stack({ gap = "md", centered = false, align = "stretch", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+const STACK_DIRECTION_MAP = {
+    col: "",
+    "sm-row": "sm:flex-row",
+    "md-row": "md:flex-row",
+    "lg-row": "lg:flex-row",
+};
+function resolveDivideClass(divide, axis) {
+    if (!divide)
+        return "";
+    const base = `appkit-${axis}--divide`;
+    return divide === "subtle" ? `${base}-subtle` : base;
+}
+export function Stack({ gap = "md", centered = false, align = "stretch", justify = "start", textSize, textWeight, color, divide, direction, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-stack",
         GAP_MAP[gap],
         centered ? "appkit-stack--centered" : "",
         !centered && align !== "stretch" ? ITEMS_MAP[align] : "",
-        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+        !centered && justify !== "start" ? JUSTIFY_MAP[justify] : "",
+        textSize ? TEXT_SIZE_MAP[textSize] : "",
+        textWeight ? TEXT_WEIGHT_MAP[textWeight] : "",
+        color ? TEXT_COLOR_MAP[color] : "",
+        direction ? STACK_DIRECTION_MAP[direction] : "",
+        resolveDivideClass(divide, "stack"),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
         className,
     ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));
 }
-export function Row({ gap = "md", centered = false, align = "center", justify = "start", wrap = false, as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+const TEXT_SIZE_MAP = {
+    xs: "text-xs",
+    sm: "text-sm",
+    base: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+};
+const TEXT_WEIGHT_MAP = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+};
+const TEXT_COLOR_MAP = {
+    default: "",
+    primary: "appkit-color--primary",
+    muted: "appkit-color--muted",
+    faint: "appkit-color--faint",
+    inverse: "appkit-color--inverse",
+    success: "appkit-color--success",
+    warning: "appkit-color--warning",
+    error: "appkit-color--error",
+    info: "appkit-color--info",
+};
+const ROW_ODD_EVEN_MAP = {
+    none: "",
+    zebra: "even:bg-[var(--appkit-color-surface-input)] dark:even:bg-[var(--appkit-color-bg)]",
+};
+export function Row({ gap = "md", centered = false, align = "center", justify = "start", textSize, textWeight, color, wrap = false, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const classes = [
         "appkit-row",
@@ -171,17 +231,29 @@ export function Row({ gap = "md", centered = false, align = "center", justify =
         !centered && justify !== "start" ? JUSTIFY_MAP[justify] : "",
         GAP_MAP[gap],
         wrap ? "appkit-row--wrap" : "",
-        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+        oddEven && oddEven !== "none" ? ROW_ODD_EVEN_MAP[oddEven] : "",
+        textSize ? TEXT_SIZE_MAP[textSize] : "",
+        textWeight ? TEXT_WEIGHT_MAP[textWeight] : "",
+        color ? TEXT_COLOR_MAP[color] : "",
+        resolveDivideClass(divide, "row"),
+        buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow }),
         className,
     ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));
 }
-export function Grid({ cols, gap = "md", as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
+export function Grid({ cols, gap = "md", align, justify, as, surface, padding, rounded, border, shadow, className = "", children, ...props }) {
     const Tag = (as ?? "div");
     const baseClass = cols !== undefined ? GRID_MAP[cols] : "appkit-grid";
-    const classes = [baseClass, GAP_MAP[gap], buildSurfaceClasses({ surface, padding, rounded, border, shadow }), className]
+    const classes = [
+        baseClass,
+        GAP_MAP[gap],
+        align ? ITEMS_MAP[align] : "",
+        justify ? JUSTIFY_MAP[justify] : "",
+        buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+        className,
+    ]
         .filter(Boolean)
         .join(" ");
     return (_jsx(Tag, { className: classes, ...props, children: children }));

package/dist/ui/components/Layout.style.css

@@ -12,6 +12,13 @@
   }
 }
 
+@media (min-width: 768px) {
+  .appkit-container {
+    padding-left: 1.75rem;
+    padding-right: 1.75rem;
+  }
+}
+
 @media (min-width: 1024px) {
   .appkit-container {
     padding-left: 2rem;
@@ -72,7 +79,9 @@
 
 .appkit-gap--px { gap: 1px; }
 .appkit-gap--xs { gap: 0.25rem; }
+.appkit-gap--1-5 { gap: 0.375rem; }
 .appkit-gap--sm { gap: 0.5rem; }
+.appkit-gap--14 { gap: 3.5rem; }
 .appkit-gap--2-5 { gap: 0.625rem; }
 .appkit-gap--3 { gap: 0.75rem; }
 .appkit-gap--md { gap: 1rem; }
@@ -81,6 +90,19 @@
 .appkit-gap--xl { gap: 2rem; }
 .appkit-gap--2xl { gap: 3rem; }
 
+/* Catalogue gap aliases — used by the variant API.
+   `dense`/`comfortable`/`loose` are the canonical token names the audit
+   exposes; `section` and `hero` add responsive vertical spacing. */
+.appkit-gap--dense { gap: 0.5rem; }
+.appkit-gap--comfortable { gap: 0.75rem; }
+.appkit-gap--loose { gap: 1rem; }
+.appkit-gap--section { gap: 1.5rem; }
+.appkit-gap--hero { gap: 2.5rem; }
+@media (min-width: 640px) {
+  .appkit-gap--section { gap: 2rem; }
+  .appkit-gap--hero { gap: 3rem; }
+}
+
 .appkit-grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .appkit-grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .appkit-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@@ -228,3 +250,31 @@
     grid-template-columns: 1fr 1fr 320px;
   }
 }
+
+/* Variant catalogue: divider primitives for Stack/Row. `divide` prop emits a
+   themed border-on-children rule that respects the active theme via CSS vars. */
+.appkit-stack--divide > * + * { border-top: 1px solid var(--appkit-color-border); padding-top: var(--appkit-space-3); }
+.appkit-stack--divide-subtle > * + * { border-top: 1px solid var(--appkit-color-border-subtle); }
+.appkit-row--divide > * + * { border-left: 1px solid var(--appkit-color-border); padding-left: var(--appkit-space-3); margin-left: var(--appkit-space-3); }
+.appkit-row--divide-subtle > * + * { border-left: 1px solid var(--appkit-color-border-subtle); }
+
+
+/* Semantic — Section.tone gradient variants (catalogue). Consume themed
+   gradient tokens so admin custom themes restyle automatically. */
+.appkit-section--tone-page-header { background-image: var(--appkit-gradient-page-header); }
+.appkit-section--tone-hero        { background-image: var(--appkit-gradient-section-mesh); }
+.appkit-section--tone-accent-banner { background-image: var(--appkit-gradient-accent-banner); }
+
+/* Semantic — Ul/Ol marker presets */
+.appkit-list--marker-disc    { list-style: disc; padding-left: 1.25rem; }
+.appkit-list--marker-decimal { list-style: decimal; padding-left: 1.25rem; }
+.appkit-list--marker-none    { list-style: none; padding-left: 0; }
+.appkit-list--marker-check   { list-style: none; padding-left: 0; }
+.appkit-list--marker-check > li::before { content: "✓ "; color: var(--appkit-color-success); margin-right: 0.25rem; }
+.appkit-list--marker-arrow   { list-style: none; padding-left: 0; }
+.appkit-list--marker-arrow > li::before { content: "→ "; color: var(--appkit-color-primary); margin-right: 0.25rem; }
+
+.appkit-list--spacing-tight       > li + li { margin-top: 0.25rem; }
+.appkit-list--spacing-comfortable > li + li { margin-top: 0.5rem; }
+.appkit-list--spacing-loose       > li + li { margin-top: 1rem; }
+

package/dist/ui/components/ListingToolbar.js

@@ -4,8 +4,8 @@ import { CheckSquare, Search, SlidersHorizontal, LayoutGrid, List, Table2, Rotat
 import { SortDropdown } from "./SortDropdown";
 import { Div } from "./Div";
 import { Span } from "./Typography";
-const CLS_CLEAR_LINK = "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-400 transition-colors";
-const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors";
+const CLS_CLEAR_LINK = "text-xs text-zinc-400 hover:text-error dark:text-zinc-400 transition-colors";
+const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-error dark:hover:text-error transition-colors";
 const DEFAULT_LABELS = {
     search: "Search",
     filters: "Filters",
@@ -35,7 +35,7 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-zinc-500 dark:text-zinc-400", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
                                     ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
                                     : "border-zinc-300 dark:border-slate-600 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/Motion.js

@@ -6,7 +6,9 @@ import { MOTION_PRESETS, SPRING_SNAPPY, EASE_OUT } from "../../tokens/motion";
 // Re-export AnimatePresence for consumer convenience
 export const AnimatePresence = MotionAnimatePresence;
 // ── Reduced motion helper ────────────────────────────────────────────────────
-function useMotionProps(props) {
+function useMotionProps(
+// audit-unknown-ok: Motion props passthrough — framer-motion props arbitrary
+props) {
     const reduced = useReducedMotion();
     if (!reduced)
         return props;

package/dist/ui/components/NavbarChevron.d.ts

@@ -0,0 +1,5 @@
+export interface NavbarChevronProps {
+    direction: "left" | "right";
+    onClick: () => void;
+}
+export declare function NavbarChevron({ direction, onClick }: NavbarChevronProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/NavbarChevron.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * NavbarChevron — scroll-direction button used by NavbarLayout when its
+ * horizontal item list overflows. Encapsulates the white→transparent edge
+ * fade so the chevron icon stays legible over scrolling content underneath.
+ */
+import { ChevronLeft, ChevronRight } from "lucide-react";
+// audit-variant-ok: NavbarChevron is the catalogued primitive for the
+// navbar's overflow-scroll fade — the gradient classes implement the
+// edge-fade affordance, not consumer styling.
+const BASE_CLS = "absolute top-0 bottom-0 z-10 flex items-center justify-center w-8 text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors";
+const FADE_LEFT = "bg-gradient-to-r from-white/95 dark:from-slate-950/95 to-transparent";
+const FADE_RIGHT = "bg-gradient-to-l from-white/95 dark:from-slate-950/95 to-transparent";
+export function NavbarChevron({ direction, onClick }) {
+    const Icon = direction === "left" ? ChevronLeft : ChevronRight;
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": `Scroll navigation ${direction}`, className: [
+            BASE_CLS,
+            direction === "left" ? `left-0 ${FADE_LEFT}` : `right-0 ${FADE_RIGHT}`,
+        ].join(" "), children: _jsx(Icon, { className: "w-4 h-4", "aria-hidden": "true" }) }));
+}

package/dist/ui/components/PaginatedSelect.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
 import type { QuickFieldDef } from "../../features/shell/QuickFormDrawer";
+import type { FirestoreDocument, FormValues } from "../../schemas/types";
 export interface PaginatedSelectOption<V = string> {
     value: V;
     label: string;
-    meta?: Record<string, unknown>;
+    meta?: FirestoreDocument;
 }
 export interface AsyncPage<T> {
     items: T[];
@@ -27,7 +28,9 @@ interface BaseProps<V> {
         onCancel: () => void;
     }) => ReactNode;
     createFields?: QuickFieldDef[];
-    onCreateSubmit?: (values: Record<string, unknown>) => Promise<PaginatedSelectOption<V>>;
+    /** Zod schema for the inline create form — forwarded to QuickFormDrawer. */
+    createSchema?: import("zod").ZodType<FormValues> | import("zod").ZodType<unknown>;
+    onCreateSubmit?: (values: FormValues) => Promise<PaginatedSelectOption<V>>;
     createSubmitLabel?: string;
 }
 interface SingleProps<V> extends BaseProps<V> {

package/dist/ui/components/PaginatedSelect.js

@@ -50,7 +50,7 @@ const CREATE_SENTINEL = "__paginated_select_create__";
  * <PaginatedSelect multiple value={tagIds} onChange={setTagIds} loadOptions={loadTags} />
  */
 export function PaginatedSelect(props) {
-    const { options, loadOptions, placeholder = "Select...", searchPlaceholder = "Search...", noResultsText = "No results", disabled, className = "", ariaLabel, createLabel, drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, } = props;
+    const { options, loadOptions, placeholder = "Select...", searchPlaceholder = "Search...", noResultsText = "No results", disabled, className = "", ariaLabel, createLabel, drawerTitle, renderCreateForm, createFields, createSchema, onCreateSubmit, createSubmitLabel, } = props;
     const isMulti = props.multiple === true;
     const maxChipsVisible = isMulti ? props.maxChipsVisible ?? 3 : 0;
     const [query, setQuery] = useState("");
@@ -193,7 +193,7 @@ export function PaginatedSelect(props) {
                                             }, children: ["+ Create new ", createLabel] }) }, CREATE_SENTINEL))] })] }))] }), hasCreate && renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: () => setDrawerOpen(false), title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: () => setDrawerOpen(false), children: "Cancel" }), children: renderCreateForm({
                     onCreated: handleCreated,
                     onCancel: () => setDrawerOpen(false),
-                }) })) : hasCreate && createFields && onCreateSubmit ? (_jsx(QuickFormDrawer, { isOpen: drawerOpen, onClose: () => setDrawerOpen(false), title: drawerTitle ?? `Create ${createLabel}`, fields: createFields, submitLabel: createSubmitLabel ?? `Create ${createLabel}`, onSubmit: async (values) => {
+                }) })) : hasCreate && createFields && onCreateSubmit ? (_jsx(QuickFormDrawer, { isOpen: drawerOpen, onClose: () => setDrawerOpen(false), title: drawerTitle ?? `Create ${createLabel}`, fields: createFields, schema: createSchema, submitLabel: createSubmitLabel ?? `Create ${createLabel}`, onSubmit: async (values) => {
                     const option = await onCreateSubmit(values);
                     handleCreated(option);
                 } })) : null] }));

package/dist/ui/components/PasswordStrengthIndicator.js

@@ -24,12 +24,12 @@ export function PasswordStrengthIndicator({ password, minLength = 8, showRequire
                 ? (labels?.good ?? "Good")
                 : (labels?.strong ?? "Strong");
     const strengthColor = strength <= 25
-        ? "bg-red-500"
+        ? "bg-error-surface"
         : strength <= 50
-            ? "bg-orange-500"
+            ? "bg-warning-surface"
             : strength <= 75
-                ? "bg-yellow-500"
-                : "bg-green-500";
+                ? "bg-warning-surface"
+                : "bg-success-surface";
     return (_jsxs("div", { className: "appkit-password-strength", "aria-live": "polite", "aria-atomic": "true", "data-section": "passwordstrengthindicator-div-567", children: [_jsxs(Row, { gap: "sm", className: "mb-2", children: [_jsx("div", { className: "appkit-password-strength__track", "data-section": "passwordstrengthindicator-div-568", children: _jsx("div", { className: `appkit-password-strength__fill ${strengthColor}`, 
                             // audit-inline-style-ok: computed percentage
                             style: { width: `${strength}%` }, role: "progressbar", "aria-valuenow": Math.round(strength), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Password strength: ${strengthLabel}` }) }), _jsx(Span, { className: "appkit-password-strength__label", children: strengthLabel })] }), showRequirements ? (_jsx(Ul, { className: "appkit-password-strength__requirements", children: requirements.map((req) => (_jsxs(Li, { className: `appkit-password-strength__requirement ${req.met ? "appkit-password-strength__requirement--met" : ""}`, children: [_jsx(Span, { className: "sr-only", children: req.met ? "Met: " : "Not met: " }), req.label] }, req.label))) })) : null] }));

package/dist/ui/components/Quote.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+/** Quote — primitive for inline `<q>` (short inline quotation). */
+export type QuoteTone = "default" | "muted" | "brand" | "accent";
+export interface QuoteProps {
+    children: ReactNode;
+    cite?: string;
+    tone?: QuoteTone;
+    /** Use a `<blockquote>` instead of inline `<q>` for multi-line excerpts. */
+    block?: boolean;
+}
+export declare function Quote({ children, cite, tone, block }: QuoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Quote.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TONE_CLS = {
+    default: "text-[var(--appkit-color-text)]",
+    muted: "text-[var(--appkit-color-text-muted)]",
+    brand: "text-[var(--appkit-color-primary)]",
+    accent: "text-[var(--appkit-color-secondary)]",
+};
+export function Quote({ children, cite, tone = "default", block = false }) {
+    if (block) {
+        return (_jsx("blockquote", { cite: cite, 
+            // audit-variant-ok: Quote(block) is the catalogued primitive for
+            // <blockquote>. tone comes from typed enum.
+            className: `border-l-4 border-[var(--appkit-color-border)] pl-4 italic ${TONE_CLS[tone]}`, children: children }));
+    }
+    return (_jsx("q", { cite: cite, 
+        // audit-variant-ok: Quote is the catalogued primitive for <q>.
+        className: TONE_CLS[tone], children: children }));
+}

package/dist/ui/components/Responsive.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+/**
+ * Show / Hide — primitives for breakpoint-conditional rendering.
+ *
+ * Both render the same tree on the server and let CSS handle visibility,
+ * so they're hydration-safe. Use these instead of authoring `sm:hidden` /
+ * `md:block` className strings at the call site — the variant catalogue
+ * forbids raw responsive prefixes in feature views.
+ */
+export type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
+interface ResponsiveProps {
+    children: ReactNode;
+    /** Show / hide when the viewport is **at or above** this breakpoint. */
+    above?: Breakpoint;
+    /** Show / hide when the viewport is **below** this breakpoint. */
+    below?: Breakpoint;
+    /** Render as `<span>` instead of `<div>` for inline contexts. */
+    inline?: boolean;
+}
+export interface ShowProps extends ResponsiveProps {
+}
+export interface HideProps extends ResponsiveProps {
+}
+export declare function Show({ children, above, below, inline }: ShowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Hide({ children, above, below, inline }: HideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Responsive.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Mapping of breakpoint → Tailwind utility for the lower-bound visibility class.
+ *
+ * `hidden` flips to `block` (or `inline-block`) at the breakpoint when used as
+ * `<breakpoint>:block`, and vice versa.
+ */
+const SHOW_ABOVE_BLOCK = {
+    sm: "hidden sm:block",
+    md: "hidden md:block",
+    lg: "hidden lg:block",
+    xl: "hidden xl:block",
+    "2xl": "hidden 2xl:block",
+};
+const SHOW_ABOVE_INLINE = {
+    sm: "hidden sm:inline",
+    md: "hidden md:inline",
+    lg: "hidden lg:inline",
+    xl: "hidden xl:inline",
+    "2xl": "hidden 2xl:inline",
+};
+const SHOW_BELOW_BLOCK = {
+    sm: "block sm:hidden",
+    md: "block md:hidden",
+    lg: "block lg:hidden",
+    xl: "block xl:hidden",
+    "2xl": "block 2xl:hidden",
+};
+const SHOW_BELOW_INLINE = {
+    sm: "inline sm:hidden",
+    md: "inline md:hidden",
+    lg: "inline lg:hidden",
+    xl: "inline xl:hidden",
+    "2xl": "inline 2xl:hidden",
+};
+function buildShowClass(above, below, inline) {
+    if (above && !below)
+        return inline ? SHOW_ABOVE_INLINE[above] : SHOW_ABOVE_BLOCK[above];
+    if (below && !above)
+        return inline ? SHOW_BELOW_INLINE[below] : SHOW_BELOW_BLOCK[below];
+    if (above && below) {
+        // Window: show between [above, below).
+        const display = inline ? "inline" : "block";
+        return `hidden ${above}:${display} ${below}:hidden`;
+    }
+    return inline ? "inline" : "block";
+}
+function buildHideClass(above, below, inline) {
+    if (above && !below)
+        return inline ? SHOW_BELOW_INLINE[above] : SHOW_BELOW_BLOCK[above];
+    if (below && !above)
+        return inline ? SHOW_ABOVE_INLINE[below] : SHOW_ABOVE_BLOCK[below];
+    if (above && below) {
+        const display = inline ? "inline" : "block";
+        return `${display} ${above}:hidden ${below}:${display}`;
+    }
+    return "hidden";
+}
+export function Show({ children, above, below, inline = false }) {
+    const Tag = inline ? "span" : "div";
+    return (_jsx(Tag
+    // audit-variant-ok: Show is the catalogued primitive for responsive
+    // conditional render. above/below come from typed enums.
+    , { 
+        // audit-variant-ok: Show is the catalogued primitive for responsive
+        // conditional render. above/below come from typed enums.
+        className: buildShowClass(above, below, inline), children: children }));
+}
+export function Hide({ children, above, below, inline = false }) {
+    const Tag = inline ? "span" : "div";
+    return (_jsx(Tag
+    // audit-variant-ok: Hide is the catalogued primitive for responsive
+    // conditional render. above/below come from typed enums.
+    , { 
+        // audit-variant-ok: Hide is the catalogued primitive for responsive
+        // conditional render. above/below come from typed enums.
+        className: buildHideClass(above, below, inline), children: children }));
+}

package/dist/ui/components/Scrim.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Scrim — primitive for dark fade overlays.
+ *
+ * Use over images / hero banners / cards to ensure foreground text remains
+ * legible regardless of the underlying media's tonality. Replaces raw
+ * `bg-gradient-to-X from-black/Y to-transparent` utilities.
+ *
+ * Direction determines the gradient orientation; intensity selects the
+ * starting black opacity. The class is rendered as `position: absolute`
+ * with `inset: 0` and `pointer-events: none` by default — its parent
+ * needs `position: relative` so the scrim covers the right area.
+ */
+export type ScrimDirection = "bottom-up" | "top-down" | "left-to-right" | "right-to-left" | "diagonal";
+export type ScrimIntensity = "subtle" | "medium" | "strong";
+export interface ScrimProps {
+    /** Gradient orientation. Defaults to `"bottom-up"` (darken bottom edge). */
+    direction?: ScrimDirection;
+    /** Strength of the darkest end-stop. Defaults to `"medium"`. */
+    intensity?: ScrimIntensity;
+    /** When true, the scrim multiplies against the underlying image. */
+    multiply?: boolean;
+    /** Extra positioning className (e.g. `inset-x-0 bottom-0 h-12`). */
+    className?: string;
+}
+export declare function Scrim({ direction, intensity, multiply, className, }: ScrimProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Scrim.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const DIRECTION_CLS = {
+    "bottom-up": "bg-gradient-to-t",
+    "top-down": "bg-gradient-to-b",
+    "left-to-right": "bg-gradient-to-r",
+    "right-to-left": "bg-gradient-to-l",
+    diagonal: "bg-gradient-to-br",
+};
+const INTENSITY_CLS = {
+    subtle: "from-black/40 to-transparent",
+    medium: "from-black/60 via-black/30 to-transparent",
+    strong: "from-black/80 via-black/30 to-transparent",
+};
+export function Scrim({ direction = "bottom-up", intensity = "medium", multiply = false, className = "", }) {
+    // audit-variant-ok: Scrim is the catalogued primitive for dark fade overlays.
+    // direction + intensity come from typed enums; the gradient classes are the
+    // primitive's internal CSS, not consumer-authored utilities.
+    return (_jsx("div", { "aria-hidden": "true", className: [
+            "pointer-events-none",
+            DIRECTION_CLS[direction],
+            INTENSITY_CLS[intensity],
+            multiply ? "mix-blend-multiply" : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" ") }));
+}