@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/ui/components/FormGrid.js

@@ -14,9 +14,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @example
  * ```tsx
  * <FormGrid>
- *   <FormField><Label>First name</Label><Input name="firstName" /></FormField>
- *   <FormField><Label>Last name</Label><Input name="lastName" /></FormField>
- *   <FormField span="full"><Label>Bio</Label><Textarea name="bio" /></FormField>
+ * <FormField><Label>First name</Label><Input name="firstName" /></FormField>
+ * <FormField><Label>Last name</Label><Input name="lastName" /></FormField>
+ * <FormField span="full"><Label>Bio</Label><Textarea name="bio" /></FormField>
  * </FormGrid>
  * ```
  */

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

@@ -0,0 +1,21 @@
+/**
+ * HorizontalRule — primitive for `<hr>`.
+ *
+ * `tone="accent"` consumes `--appkit-gradient-accent-divider` so the divider
+ * follows the active theme automatically.
+ */
+export type HorizontalRuleTone = "default" | "subtle" | "strong" | "accent";
+export type HorizontalRuleSpacing = "tight" | "comfortable" | "loose" | "none";
+export interface HorizontalRuleProps {
+    /** Visual tone. `"accent"` renders a themed gradient divider. */
+    tone?: HorizontalRuleTone;
+    /** Margin-block preset. Default `"comfortable"`. */
+    spacing?: HorizontalRuleSpacing;
+    /** Dashed instead of solid. */
+    dashed?: boolean;
+    /** Accessible role override; default `"separator"`. */
+    role?: "separator" | "presentation" | "none";
+    /** Accessible aria-orientation override. */
+    "aria-orientation"?: "horizontal" | "vertical";
+}
+export declare function HorizontalRule({ tone, spacing, dashed, role, "aria-orientation": ariaOrientation, }: HorizontalRuleProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/HorizontalRule.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TONE_CLS = {
+    default: "border-t border-[var(--appkit-color-border)]",
+    subtle: "border-t border-[var(--appkit-color-border-subtle)]",
+    strong: "border-t-2 border-[var(--appkit-color-border)]",
+    // Renders a gradient strip via background-image (not a border).
+    accent: "h-px border-0 bg-[image:var(--appkit-gradient-accent-divider)] opacity-60",
+};
+const SPACING_CLS = {
+    none: "my-0",
+    tight: "my-2",
+    comfortable: "my-4",
+    loose: "my-8",
+};
+export function HorizontalRule({ tone = "default", spacing = "comfortable", dashed = false, role = "separator", "aria-orientation": ariaOrientation = "horizontal", }) {
+    const dashedCls = dashed && tone !== "accent" ? " border-dashed" : "";
+    return (_jsx("hr", { role: role, "aria-orientation": ariaOrientation, 
+        // audit-variant-ok: HorizontalRule is the catalogued primitive for <hr>.
+        // tone + spacing + dashed come from typed enums.
+        className: `${TONE_CLS[tone]}${dashedCls} ${SPACING_CLS[spacing]}` }));
+}

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+/**
+ * HotspotMarker — primitive for dynamically-positioned overlay markers
+ * (character image hotspots, pins on a campaign image, etc.).
+ *
+ * Takes percentage coordinates and emits the required inline positioning
+ * style internally. The variant catalogue blocks consumer-side inline
+ * `style={{ left/top }}` writes — this primitive is the source-of-truth for
+ * that pattern.
+ */
+export type HotspotMarkerSize = "sm" | "md" | "lg";
+export type HotspotMarkerTone = "brand" | "accent" | "success" | "warning" | "danger" | "neutral";
+export type HotspotMarkerShape = "dot" | "pin" | "ring" | "halo";
+export interface HotspotMarkerProps {
+    /** Horizontal position as a percentage of the parent's width (0–100). */
+    xPct: number;
+    /** Vertical position as a percentage of the parent's height (0–100). */
+    yPct: number;
+    /** Visual size preset. Default `"md"`. */
+    size?: HotspotMarkerSize;
+    /** Colour tone, drawn from the active theme. Default `"brand"`. */
+    tone?: HotspotMarkerTone;
+    /** Marker shape. Default `"dot"`. */
+    shape?: HotspotMarkerShape;
+    /** Optional child content (number badge, icon). Centred inside the marker. */
+    children?: ReactNode;
+    /** Optional click handler. */
+    onClick?: () => void;
+    /** Optional ARIA label when interactive. */
+    "aria-label"?: string;
+    /** Render mode: `"absolute"` (default — parent is the relative container) or `"fixed"`. */
+    positionMode?: "absolute" | "fixed";
+}
+export declare function HotspotMarker({ xPct, yPct, size, tone, shape, children, onClick, positionMode, ...rest }: HotspotMarkerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/HotspotMarker.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_PX = {
+    sm: 16,
+    md: 24,
+    lg: 32,
+};
+const TONE_BG = {
+    brand: "var(--appkit-color-primary)",
+    accent: "var(--appkit-color-secondary)",
+    success: "var(--appkit-color-success)",
+    warning: "var(--appkit-color-warning)",
+    danger: "var(--appkit-color-error)",
+    neutral: "var(--appkit-color-text-muted)",
+};
+const TONE_TEXT = {
+    brand: "var(--appkit-color-text-on-primary)",
+    accent: "var(--appkit-color-text-on-primary)",
+    success: "var(--appkit-color-text-on-primary)",
+    warning: "var(--appkit-color-text-on-primary)",
+    danger: "var(--appkit-color-text-on-primary)",
+    neutral: "var(--appkit-color-text-on-primary)",
+};
+function clampPct(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    if (value < 0)
+        return 0;
+    if (value > 100)
+        return 100;
+    return value;
+}
+function buildShapeStyle(shape, sizePx) {
+    switch (shape) {
+        case "pin":
+            return {
+                borderRadius: `${sizePx}px ${sizePx}px ${sizePx}px 0`,
+                transform: "translate(-50%, -100%) rotate(-45deg)",
+            };
+        case "ring":
+            return {
+                borderRadius: "9999px",
+                backgroundColor: "transparent",
+                border: `${Math.max(2, Math.round(sizePx / 6))}px solid currentColor`,
+            };
+        case "halo":
+            return {
+                borderRadius: "9999px",
+                boxShadow: "0 0 0 4px color-mix(in srgb, currentColor 20%, transparent), 0 0 0 8px color-mix(in srgb, currentColor 10%, transparent)",
+            };
+        case "dot":
+        default:
+            return { borderRadius: "9999px" };
+    }
+}
+export function HotspotMarker({ xPct, yPct, size = "md", tone = "brand", shape = "dot", children, onClick, positionMode = "absolute", ...rest }) {
+    const sizePx = SIZE_PX[size];
+    const baseTransform = shape === "pin" ? undefined : "translate(-50%, -50%)";
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": rest["aria-label"], "data-shape": shape, "data-tone": tone, 
+        // audit-inline-style-ok: HotspotMarker is the catalogued primitive for dynamic xPct/yPct positioning. Consumer code uses this primitive instead of authoring its own `style={{ left, top }}`.
+        style: {
+            position: positionMode,
+            left: `${clampPct(xPct)}%`,
+            top: `${clampPct(yPct)}%`,
+            width: `${sizePx}px`,
+            height: `${sizePx}px`,
+            backgroundColor: TONE_BG[tone],
+            color: TONE_TEXT[tone],
+            fontSize: `${Math.max(10, Math.round(sizePx * 0.45))}px`,
+            fontWeight: 600,
+            lineHeight: 1,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            border: 0,
+            cursor: onClick ? "pointer" : "default",
+            padding: 0,
+            transform: baseTransform,
+            ...buildShapeStyle(shape, sizePx),
+        }, children: children }));
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/**
+ * IconBox — primitive for the recurrent "square icon container" pattern
+ * (flex-shrink-0 w-N h-N rounded-X flex items-center justify-center).
+ *
+ * Replaces ~13 raw inline implementations across feature views.
+ */
+export type IconBoxSize = "sm" | "md" | "lg" | "xl";
+export type IconBoxTone = "default" | "muted" | "brand" | "accent" | "success" | "warning" | "danger" | "info" | "inverse";
+export type IconBoxRounded = "md" | "lg" | "xl" | "2xl" | "full";
+export interface IconBoxProps {
+    children: ReactNode;
+    size?: IconBoxSize;
+    tone?: IconBoxTone;
+    rounded?: IconBoxRounded;
+    /** Render as `<span>` instead of `<div>` (for inline contexts). */
+    as?: "div" | "span";
+    /** Accessible label when the icon is meaningful. */
+    "aria-label"?: string;
+}
+export declare function IconBox({ children, size, tone, rounded, as, ...rest }: IconBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/IconBox.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_CLS = {
+    sm: "w-8 h-8 text-sm",
+    md: "w-10 h-10 text-base",
+    lg: "w-12 h-12 text-lg",
+    xl: "w-14 h-14 text-xl",
+};
+const ROUNDED_CLS = {
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    full: "rounded-full",
+};
+const TONE_CLS = {
+    default: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text)] border border-[var(--appkit-color-border)]",
+    muted: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)]",
+    brand: "bg-[var(--appkit-color-primary-50)] text-[var(--appkit-color-primary)]",
+    accent: "bg-[var(--appkit-color-secondary-50)] text-[var(--appkit-color-secondary)]",
+    success: "bg-[var(--appkit-color-success-surface)] text-[var(--appkit-color-success)]",
+    warning: "bg-[var(--appkit-color-warning-surface)] text-[var(--appkit-color-warning)]",
+    danger: "bg-[var(--appkit-color-error-surface)] text-[var(--appkit-color-error)]",
+    info: "bg-[var(--appkit-color-info-surface)] text-[var(--appkit-color-info)]",
+    inverse: "bg-[var(--appkit-color-primary)] text-[var(--appkit-color-text-on-primary)]",
+};
+export function IconBox({ children, size = "md", tone = "brand", rounded = "xl", as = "div", ...rest }) {
+    const Tag = as;
+    return (_jsx(Tag, { "aria-label": rest["aria-label"], 
+        // audit-variant-ok: IconBox is the catalogued primitive for the
+        // square-icon-container pattern. size + tone + rounded come from typed enums.
+        className: `inline-flex flex-shrink-0 items-center justify-center ${SIZE_CLS[size]} ${ROUNDED_CLS[rounded]} ${TONE_CLS[tone]}`, children: children }));
+}

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

@@ -24,7 +24,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
  * @example
  * ```tsx
  * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
+ * <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
  * </Tooltip>
  * ```
  */

package/dist/ui/components/IconButton.js

@@ -18,7 +18,7 @@ const VARIANTS = {
  * @example
  * ```tsx
  * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
+ * <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
  * </Tooltip>
  * ```
  */

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

@@ -0,0 +1,21 @@
+import type { IframeHTMLAttributes } from "react";
+/**
+ * Iframe — primitive for embedded third-party documents (YouTube, Maps,
+ * payment-provider checkout panels, etc.).
+ *
+ * Owns the sandbox + aspect-ratio + rounded variant so consumer code never
+ * authors a raw `<iframe>` (the variant catalogue forbids it).
+ */
+export type IframeAspect = "video" | "square" | "card" | "portrait" | "auto";
+export type IframeRounded = "none" | "md" | "lg" | "xl" | "2xl";
+export interface IframeProps extends Omit<IframeHTMLAttributes<HTMLIFrameElement>, "className" | "style"> {
+    src: string;
+    title: string;
+    /** Aspect ratio preset. Default `"video"` (16:9). */
+    aspect?: IframeAspect;
+    /** Rounded corners preset. Default `"lg"`. */
+    rounded?: IframeRounded;
+    /** Sandbox attribute. Default permits same-origin only. */
+    sandbox?: string;
+}
+export declare function Iframe({ src, title, aspect, rounded, sandbox, loading, ...rest }: IframeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Iframe.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ASPECT_CLS = {
+    video: "aspect-video",
+    square: "aspect-square",
+    card: "aspect-[4/3]",
+    portrait: "aspect-[3/4]",
+    auto: "",
+};
+const ROUNDED_CLS = {
+    none: "",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+};
+export function Iframe({ src, title, aspect = "video", rounded = "lg", sandbox = "allow-same-origin allow-scripts allow-popups allow-forms", loading = "lazy", ...rest }) {
+    return (_jsx("iframe", { src: src, title: title, loading: loading, sandbox: sandbox, 
+        // audit-variant-ok: Iframe is the catalogued primitive for embedded
+        // third-party content. Aspect + rounded come from typed enums.
+        className: `block w-full border-0 ${ASPECT_CLS[aspect]} ${ROUNDED_CLS[rounded]}`, ...rest }));
+}

package/dist/ui/components/ImageGallery.js

@@ -6,8 +6,16 @@ import { Button } from "./Button";
 import { HorizontalScroller } from "./HorizontalScroller";
 import { useSwipe, useGesture } from "../../react";
 import { MediaImage } from "../../features/media/MediaImage";
-import { THEME_CONSTANTS } from "../../tokens";
-const { themed, flex } = THEME_CONSTANTS;
+import { FLEX_CENTER, THEMED_BG_SECONDARY, THEMED_BG_TERTIARY, THEMED_BORDER, THEMED_TEXT_MUTED, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY, } from "../../_internal/shared/styles/themed";
+const themed = {
+    bgSecondary: THEMED_BG_SECONDARY,
+    bgTertiary: THEMED_BG_TERTIARY,
+    border: THEMED_BORDER,
+    textMuted: THEMED_TEXT_MUTED,
+    textPrimary: THEMED_TEXT_PRIMARY,
+    textSecondary: THEMED_TEXT_SECONDARY,
+};
+const flex = { center: FLEX_CENTER };
 export default function ImageGallery({ images, initialIndex = 0, showThumbnails = true, showCaptions = true, allowZoom = true, className = "", onImageChange, }) {
     const [currentIndex, setCurrentIndex] = useState(initialIndex);
     const [scale, setScale] = useState(1);

package/dist/ui/components/ImageLightbox.js

@@ -6,7 +6,7 @@ import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2 } fr
 import { Button } from "./Button";
 import { Div } from "./Div";
 import { Text, Span } from "./Typography";
-const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/60 text-white flex items-center justify-center";
+const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-error-surface text-white flex items-center justify-center";
 const MIN_ZOOM = 10;
 const MAX_ZOOM = 300;
 const ZOOM_STEP = 20;
@@ -89,7 +89,9 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
     const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), "// audit-inline-style-ok: dynamic CSS", _jsxs("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, 
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { size: "sm", weight: "medium", className: "text-white/70", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: CLS_CLOSE_BTN, "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", 
+                // audit-inline-style-ok: dynamic CSS
+                style: { cursor: zoom > 100 ? "grab" : "default" }, children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, 
                         // audit-inline-style-ok: dynamic CSS
                         style: {
                             transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,

package/dist/ui/components/Input.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Div } from "./Div";
 import { Label, Text } from "./Typography";
-const CLS_INPUT_ERROR = "border-red-400 focus-visible:border-red-500 focus-visible:ring-red-500/20 dark:border-red-500";
-const CLS_INPUT_SUCCESS_ICON = "h-4 w-4 text-green-600 dark:text-green-400";
+const CLS_INPUT_ERROR = "border-error focus-visible:border-error focus-visible:ring-error/20 dark:border-error";
+const CLS_INPUT_SUCCESS_ICON = "h-4 w-4 text-success dark:text-success";
 export const Input = React.forwardRef(function Input({ label, error, helperText, icon, rightIcon, success = false, bare = false, variant = "default", className = "", disabled, required, id, ...props }, ref) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/** Kbd — primitive for `<kbd>` (keyboard key affordance). */
+export type KbdSize = "xs" | "sm" | "md";
+export type KbdTone = "default" | "muted" | "brand";
+export interface KbdProps {
+    children: ReactNode;
+    size?: KbdSize;
+    tone?: KbdTone;
+}
+export declare function Kbd({ children, size, tone }: KbdProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Kbd.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_CLS = {
+    xs: "text-[10px] px-1 py-0.5 rounded",
+    sm: "text-xs px-1.5 py-0.5 rounded-md",
+    md: "text-sm px-2 py-1 rounded-md",
+};
+const TONE_CLS = {
+    default: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text)] border-[var(--appkit-color-border)]",
+    muted: "bg-[var(--appkit-color-border-subtle)] text-[var(--appkit-color-text-muted)] border-[var(--appkit-color-border)]",
+    brand: "bg-[var(--appkit-color-primary-50)] text-[var(--appkit-color-primary)] border-[var(--appkit-color-primary-200)]",
+};
+export function Kbd({ children, size = "sm", tone = "default" }) {
+    return (_jsx("kbd", { 
+        // audit-variant-ok: Kbd is the catalogued primitive for <kbd>.
+        // size + tone come from typed enums.
+        className: `inline-flex items-center font-mono font-semibold border shadow-sm ${SIZE_CLS[size]} ${TONE_CLS[tone]}`, children: children }));
+}

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

@@ -27,21 +27,31 @@ import type { SurfaceProps } from "./surface-tokens";
  * ```
  */
 /**
- * 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.
  */
 declare const GAP_MAP: {
     readonly none: "";
     readonly px: "appkit-gap--px";
     readonly xs: "appkit-gap--xs";
+    readonly "1.5": "appkit-gap--1-5";
     readonly sm: "appkit-gap--sm";
     readonly "2.5": "appkit-gap--2-5";
     readonly "3": "appkit-gap--3";
+    readonly "14": "appkit-gap--14";
     readonly md: "appkit-gap--md";
     readonly "5": "appkit-gap--5";
     readonly lg: "appkit-gap--lg";
     readonly xl: "appkit-gap--xl";
     readonly "2xl": "appkit-gap--2xl";
+    readonly dense: "appkit-gap--dense";
+    readonly comfortable: "appkit-gap--comfortable";
+    readonly loose: "appkit-gap--loose";
+    readonly section: "appkit-gap--section";
+    readonly hero: "appkit-gap--hero";
 };
 export type GapKey = keyof typeof GAP_MAP;
 /**
@@ -163,8 +173,8 @@ type JustifyContent = keyof typeof JUSTIFY_MAP;
  *
  * @example
  * ```tsx
- * <Container>...</Container>                   // max-w-7xl (default)
- * <Container size="lg">...</Container>         // max-w-5xl
+ * <Container>...</Container> // max-w-7xl (default)
+ * <Container size="lg">...</Container> // max-w-5xl
  * <Container size="full" as="main">...</Container>
  * ```
  */
@@ -181,13 +191,13 @@ export declare function Container({ size, as, surface, padding, rounded, border,
  * @example
  * ```tsx
  * <Stack gap="sm">
- *   <Text>Line one</Text>
- *   <Text>Line two</Text>
+ * <Text>Line one</Text>
+ * <Text>Line two</Text>
  * </Stack>
  *
  * // As a list
  * <Stack as="ul" gap="xs">
- *   <Li>Item</Li>
+ * <Li>Item</Li>
  * </Stack>
  * ```
  */
@@ -198,24 +208,46 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement>, SurfacePr
     centered?: boolean;
     /** Cross-axis (horizontal) alignment. Defaults to `"stretch"`. */
     align?: Extract<ItemsAlign, "start" | "center" | "end" | "stretch">;
+    /** Main-axis (vertical) alignment. Defaults to `"start"`. */
+    justify?: JustifyContent;
+    /** Cascade font-size to children. Use sparingly — prefer wrapping in `<Text size=…>`. */
+    textSize?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /** Cascade font-weight to children. Use sparingly — prefer wrapping in `<Text weight=…>`. */
+    textWeight?: TextWeightKey;
+    /** Cascade text color to children. Use sparingly — prefer wrapping in `<Text color=…>`. */
+    color?: TextColorKey;
+    /**
+     * Render a themed top-border between adjacent children. `true` / `"default"`
+     * uses the active theme's border colour; `"subtle"` uses border-subtle.
+     * Replaces the recurrent `divide-y divide-zinc-200 dark:divide-zinc-700`
+     * className pattern (which bypasses theme tokens).
+     */
+    divide?: boolean | "default" | "subtle";
+    /**
+     * Optional responsive direction switch — Stack defaults to column. Use
+     * `sm-row` / `md-row` / `lg-row` to flip to row at the matching breakpoint
+     * (mobile-first columns, row on larger screens). Replaces raw
+     * `className="sm:flex-row"` etc.
+     */
+    direction?: "col" | "sm-row" | "md-row" | "lg-row";
     /** Render as a different element. Defaults to `"div"`. */
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Stack({ gap, centered, align, as, surface, padding, rounded, border, shadow, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ gap, centered, align, justify, textSize, textWeight, color, divide, direction, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Horizontal flex row. Use instead of `<div className="flex items-center gap-3" data-section="layout-div-536">`.
  *
  * @example
  * ```tsx
  * <Row gap="sm" justify="between">
- *   <Heading level={3}>Title</Heading>
- *   <Button>Action</Button>
+ * <Heading level={3}>Title</Heading>
+ * <Button>Action</Button>
  * </Row>
  *
  * <Row gap="xs" wrap>
- *   <Badge>tag</Badge>
- *   <Badge>other</Badge>
+ * <Badge>tag</Badge>
+ * <Badge>other</Badge>
  * </Row>
  * ```
  */
@@ -228,8 +260,23 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProp
     align?: ItemsAlign;
     /** Main-axis (horizontal) distribution. Defaults to `"start"`. */
     justify?: JustifyContent;
+    /** Cascade font-size to children. Use sparingly — prefer wrapping in `<Text size=…>`. */
+    textSize?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /** Cascade font-weight to children. Use sparingly — prefer wrapping in `<Text weight=…>`. */
+    textWeight?: TextWeightKey;
+    /** Cascade text color to children. Use sparingly — prefer wrapping in `<Text color=…>`. */
+    color?: TextColorKey;
     /** Allow children to wrap onto multiple lines. */
     wrap?: boolean;
+    /** Zebra-stripe pattern when this Row is a repeating list element (rendered with `even:bg-*`). */
+    oddEven?: "none" | "zebra";
+    /**
+     * Render a themed left-border between adjacent children. `true` / `"default"`
+     * uses the active theme's border colour; `"subtle"` uses border-subtle.
+     * Replaces the recurrent `divide-x divide-zinc-200 dark:divide-zinc-700`
+     * className pattern (which bypasses theme tokens).
+     */
+    divide?: boolean | "default" | "subtle";
     /** Render as a different element. Defaults to `"div"`. */
     as?: React.ElementType;
     /** Forwarded to the underlying element when `as="button"`. */
@@ -238,20 +285,39 @@ export interface RowProps extends React.HTMLAttributes<HTMLElement>, SurfaceProp
     disabled?: boolean;
     children?: React.ReactNode;
 }
-export declare function Row({ gap, centered, align, justify, wrap, as, surface, padding, rounded, border, shadow, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare const TEXT_WEIGHT_MAP: {
+    readonly normal: "font-normal";
+    readonly medium: "font-medium";
+    readonly semibold: "font-semibold";
+    readonly bold: "font-bold";
+};
+type TextWeightKey = keyof typeof TEXT_WEIGHT_MAP;
+declare const TEXT_COLOR_MAP: {
+    readonly default: "";
+    readonly primary: "appkit-color--primary";
+    readonly muted: "appkit-color--muted";
+    readonly faint: "appkit-color--faint";
+    readonly inverse: "appkit-color--inverse";
+    readonly success: "appkit-color--success";
+    readonly warning: "appkit-color--warning";
+    readonly error: "appkit-color--error";
+    readonly info: "appkit-color--info";
+};
+type TextColorKey = keyof typeof TEXT_COLOR_MAP;
+export declare function Row({ gap, centered, align, justify, textSize, textWeight, color, wrap, oddEven, divide, as, surface, padding, paddingX, paddingY, rounded, border, shadow, className, children, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" data-section="layout-div-537">`.
  *
  * @example
  * ```tsx
  * <Grid cols={3} gap="md">
- *   <ProductCard />
- *   <ProductCard />
+ * <ProductCard />
+ * <ProductCard />
  * </Grid>
  *
  * <Grid cols="sidebar" gap="lg">
- *   <Aside>Filters</Aside>
- *   <Main>Results</Main>
+ * <Aside>Filters</Aside>
+ * <Main>Results</Main>
  * </Grid>
  * ```
  */
@@ -270,9 +336,13 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement>, SurfacePro
     cols?: GridCols;
     /** Space between grid cells. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
+    /** Cross-axis (column) alignment for grid items. */
+    align?: ItemsAlign;
+    /** Main-axis (row) alignment for grid tracks. */
+    justify?: JustifyContent;
     /** Render as a different element. Defaults to `"div"`. */
     as?: React.ElementType;
     children?: React.ReactNode;
 }
-export declare function Grid({ cols, gap, as, surface, padding, rounded, border, shadow, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ cols, gap, align, justify, as, surface, padding, rounded, border, shadow, className, children, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export {};