@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/**
+ * StickyToolbar — primitive for the recurrent translucent sticky bar pattern
+ * (`sticky top-[calc(var(--header-height,0px)+44px)] z-10 ... backdrop-blur-sm
+ * border-b ...`) used by search-results pages, leaderboards, etc.
+ *
+ * The header offset is sourced from `--header-height`, which the global
+ * AppLayoutShell sets at runtime. Consumer code never authors the offset
+ * manually — only `audit-sticky-offsets` allowlisted files may.
+ */
+export type StickyToolbarOffset = "header" | "header+nav" | number;
+export type StickyToolbarTone = "default" | "muted" | "translucent" | "inverse";
+export type StickyToolbarPadding = "none" | "sm" | "md" | "lg" | "toolbar";
+export interface StickyToolbarProps {
+    children: ReactNode;
+    /** Vertical offset. Default `"header"` (under the AppLayoutShell title bar). */
+    offset?: StickyToolbarOffset;
+    /** Background tone. Default `"translucent"` (white/slate-950 + backdrop blur). */
+    tone?: StickyToolbarTone;
+    /** Show a bottom border. Default `true`. */
+    border?: boolean;
+    /** Padding preset. Default `"toolbar"`. */
+    padding?: StickyToolbarPadding;
+    /** Stacking layer. Default `"above-content"` (z-10). */
+    z?: "below-modal" | "above-content";
+    /** Accessible role override. */
+    role?: string;
+}
+export declare function StickyToolbar({ children, offset, tone, border, padding, z, role, }: StickyToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/StickyToolbar.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TONE_CLS = {
+    default: "bg-[var(--appkit-color-surface)]",
+    muted: "bg-[var(--appkit-color-bg)]",
+    translucent: "backdrop-blur-sm bg-[color-mix(in_srgb,var(--appkit-color-surface)_95%,transparent)]",
+    inverse: "bg-[var(--appkit-color-primary)] text-[var(--appkit-color-text-on-primary)]",
+};
+const PADDING_CLS = {
+    none: "",
+    sm: "px-2 py-1",
+    md: "px-3 py-2",
+    lg: "px-4 py-3",
+    toolbar: "px-3 py-1.5",
+};
+function resolveOffset(offset) {
+    if (offset === "header") {
+        return "top-[var(--header-height,0px)]";
+    }
+    if (offset === "header+nav") {
+        return "top-[calc(var(--header-height,0px)+44px)]";
+    }
+    // Numeric pixel offset.
+    return `top-[${offset}px]`;
+}
+export function StickyToolbar({ children, offset = "header", tone = "translucent", border = true, padding = "toolbar", z = "above-content", role, }) {
+    const offsetCls = resolveOffset(offset);
+    const borderCls = border ? "border-b border-[var(--appkit-color-border)]" : "";
+    const zCls = z === "above-content" ? "z-10" : "z-[5]";
+    return (_jsx("div", { role: role, 
+        // audit-sticky-offset-ok: StickyToolbar is the catalogued primitive
+        // for the translucent sticky-toolbar pattern. The header offset is
+        // sourced from --header-height (set by AppLayoutShell at runtime).
+        className: `sticky ${offsetCls} ${zCls} ${TONE_CLS[tone]} ${borderCls} ${PADDING_CLS[padding]}`, children: children }));
+}

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

@@ -20,13 +20,13 @@ export interface TabStripProps {
  * @example
  * ```tsx
  * <TabStrip
- *   tabs={[
- *     { key: "all", label: "All" },
- *     { key: "active", label: "Active", badge: 3 },
- *     { key: "archived", label: "Archived", disabled: true },
- *   ]}
- *   activeKey={activeTab}
- *   onChange={setActiveTab}
+ * tabs={[
+ * { key: "all", label: "All" },
+ * { key: "active", label: "Active", badge: 3 },
+ * { key: "archived", label: "Archived", disabled: true },
+ * ]}
+ * activeKey={activeTab}
+ * onChange={setActiveTab}
  * />
  * ```
  */

package/dist/ui/components/TabStrip.js

@@ -13,13 +13,13 @@ import { FLUID_GRID_MIN_WIDTHS } from "../../tokens";
  * @example
  * ```tsx
  * <TabStrip
- *   tabs={[
- *     { key: "all", label: "All" },
- *     { key: "active", label: "Active", badge: 3 },
- *     { key: "archived", label: "Archived", disabled: true },
- *   ]}
- *   activeKey={activeTab}
- *   onChange={setActiveTab}
+ * tabs={[
+ * { key: "all", label: "All" },
+ * { key: "active", label: "Active", badge: 3 },
+ * { key: "archived", label: "Archived", disabled: true },
+ * ]}
+ * activeKey={activeTab}
+ * onChange={setActiveTab}
  * />
  * ```
  */

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

@@ -13,10 +13,28 @@ declare const VARIANTS: {
     readonly bare: "";
     readonly none: "";
 };
+type LinkTypographySize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl";
+type LinkTypographyWeight = "light" | "normal" | "medium" | "semibold" | "bold";
+type LinkTruncate = boolean | 1 | 2 | 3 | 4;
+type LinkRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+type LinkPaddingX = "none" | "sm" | "md" | "lg" | "xl";
+type LinkPaddingY = "none" | "xs" | "sm" | "md";
 export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
     children: React.ReactNode;
     variant?: keyof typeof VARIANTS;
+    /** Optional typography size override. */
+    size?: LinkTypographySize;
+    /** Optional typography weight override. */
+    weight?: LinkTypographyWeight;
+    /** Multi-line clamp. `true` = 1 line; pass `2`, `3`, or `4` for line-clamp. */
+    truncate?: LinkTruncate;
+    /** Border radius for card-style links. */
+    rounded?: LinkRounded;
+    /** Horizontal padding — for button-shaped links (e.g. CTA pills). */
+    paddingX?: LinkPaddingX;
+    /** Vertical padding — for button-shaped links. */
+    paddingY?: LinkPaddingY;
     /**
      * Force external rendering (`<a target="_blank" rel="noopener noreferrer">`).
      * Auto-detected when `href` starts with http/https/mailto/tel.
@@ -38,5 +56,5 @@ export interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
  * <TextLink href="#" variant="danger" onClick={handleDelete}>Delete</TextLink>
  * ```
  */
-export declare function TextLink({ href, children, variant, external, className, ...props }: TextLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextLink({ href, children, variant, size, weight, truncate, rounded, paddingX, paddingY, external, className, ...props }: TextLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/TextLink.js

@@ -22,6 +22,51 @@ function isExternalUrl(href) {
         href.startsWith("mailto:") ||
         href.startsWith("tel:"));
 }
+const LINK_SIZE_MAP = {
+    xs: "appkit-text--xs",
+    sm: "appkit-text--sm",
+    base: "appkit-text--base",
+    lg: "appkit-text--lg",
+    xl: "appkit-text--xl",
+    "2xl": "appkit-text--2xl",
+};
+const LINK_WEIGHT_MAP = {
+    light: "appkit-font--light",
+    normal: "appkit-font--normal",
+    medium: "appkit-font--medium",
+    semibold: "appkit-font--semibold",
+    bold: "appkit-font--bold",
+};
+function truncateClass(truncate) {
+    if (!truncate)
+        return "";
+    const lines = typeof truncate === "number" ? truncate : 1;
+    return `appkit-text--truncate-${lines}`;
+}
+const LINK_ROUNDED_MAP = {
+    none: "",
+    default: "rounded",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    "3xl": "rounded-3xl",
+    full: "rounded-full",
+};
+const LINK_PADDING_X_MAP = {
+    none: "",
+    sm: "px-3",
+    md: "px-4",
+    lg: "px-5",
+    xl: "px-6",
+};
+const LINK_PADDING_Y_MAP = {
+    none: "",
+    xs: "py-2",
+    sm: "py-2.5",
+    md: "py-3",
+};
 /**
  * Styled anchor wrapper. Uses `next/link` for internal navigation and
  * a plain `<a>` for external/mailto/tel links.
@@ -37,8 +82,8 @@ function isExternalUrl(href) {
  * <TextLink href="#" variant="danger" onClick={handleDelete}>Delete</TextLink>
  * ```
  */
-export function TextLink({ href, children, variant = "default", external, className = "", ...props }) {
-    const cls = twMerge(VARIANTS[variant], className);
+export function TextLink({ href, children, variant = "default", size, weight, truncate, rounded, paddingX, paddingY, external, className = "", ...props }) {
+    const cls = twMerge(VARIANTS[variant], size ? LINK_SIZE_MAP[size] : "", weight ? LINK_WEIGHT_MAP[weight] : "", truncateClass(truncate), rounded ? LINK_ROUNDED_MAP[rounded] : "", paddingX ? LINK_PADDING_X_MAP[paddingX] : "", paddingY ? LINK_PADDING_Y_MAP[paddingY] : "", className);
     const shouldBeExternal = external ?? isExternalUrl(href);
     if (shouldBeExternal) {
         return (_jsx("a", { href: href, className: cls, target: "_blank", rel: "noopener noreferrer", ...props, children: children }));

package/dist/ui/components/Textarea.js

@@ -10,7 +10,7 @@ export const Textarea = React.forwardRef(function Textarea({ label, error, helpe
             ? defaultValue.length
             : 0;
     const variantClass = error || variant === "error"
-        ? "border-red-400 focus-visible:border-red-500 focus-visible:ring-red-500/20 dark:border-red-500"
+        ? "border-error focus-visible:border-error focus-visible:ring-error/20 dark:border-error"
         : variant === "ghost"
             ? "border-transparent bg-transparent shadow-none"
             : "";

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

@@ -1,14 +1,27 @@
 import React from "react";
-export type ToastVariant = "success" | "error" | "warning" | "info";
+export type ToastVariant = "success" | "error" | "warning" | "info" | "loading";
 export type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
 interface ToastContextValue {
+    /**
+     * Show a toast. Returns the `dismissId` so long-running ops can later finalize
+     * via `updateToast(id, "success" | "error", finalMessage)`. For the "loading"
+     * variant pass `duration: 0` to keep it pinned until finalized.
+     */
     showToast: (message: string, variant?: ToastVariant, duration?: number, action?: {
         label: string;
         onClick: () => void;
-    }) => void;
+    }) => string;
     hideToast: (id: string) => void;
+    /** Replace an existing toast's variant + message (used to finalize loading toasts). */
+    updateToast: (id: string, variant: ToastVariant, message?: string, duration?: number) => void;
 }
 export declare function useToast(): ToastContextValue;
+/**
+ * Like `useToast` but returns `undefined` when no `ToastProvider` is mounted
+ * instead of throwing. Use in primitives (e.g. `Button`) that must be safe to
+ * render outside a toast context.
+ */
+export declare function useToastSafe(): ToastContextValue | undefined;
 export interface ToastProviderProps {
     children: React.ReactNode;
     position?: ToastPosition;

package/dist/ui/components/Toast.js

@@ -16,6 +16,14 @@ export function useToast() {
     }
     return context;
 }
+/**
+ * Like `useToast` but returns `undefined` when no `ToastProvider` is mounted
+ * instead of throwing. Use in primitives (e.g. `Button`) that must be safe to
+ * render outside a toast context.
+ */
+export function useToastSafe() {
+    return React.useContext(ToastContext);
+}
 const UI_TOAST = {
     container: "appkit-toast-container",
     positions: {
@@ -32,6 +40,7 @@ const UI_TOAST = {
         error: "appkit-toast--error",
         warning: "appkit-toast--warning",
         info: "appkit-toast--info",
+        loading: "appkit-toast--info",
     },
     icon: "appkit-toast__icon",
 };
@@ -40,14 +49,26 @@ export function ToastProvider({ children, position = "top-right", }) {
     const hideToast = React.useCallback((id) => {
         setToasts((current) => current.filter((toast) => toast.id !== id));
     }, []);
-    const showToast = React.useCallback((message, variant = "info", duration = 5000, action) => {
+    const showToast = React.useCallback((message, variant = "info", duration, action) => {
         const id = buildToastId();
-        setToasts((current) => [...current, { id, message, variant, duration, action }]);
-        if (duration > 0) {
-            window.setTimeout(() => hideToast(id), duration);
+        // Loading toasts default to pinned (duration: 0) so the caller can finalize.
+        const effectiveDuration = duration ?? (variant === "loading" ? 0 : 5000);
+        setToasts((current) => [...current, { id, message, variant, duration: effectiveDuration, action }]);
+        if (effectiveDuration > 0) {
+            window.setTimeout(() => hideToast(id), effectiveDuration);
+        }
+        return id;
+    }, [hideToast]);
+    const updateToast = React.useCallback((id, variant, message, duration) => {
+        const effectiveDuration = duration ?? (variant === "loading" ? 0 : 5000);
+        setToasts((current) => current.map((t) => t.id === id
+            ? { ...t, variant, message: message ?? t.message, duration: effectiveDuration }
+            : t));
+        if (effectiveDuration > 0) {
+            window.setTimeout(() => hideToast(id), effectiveDuration);
         }
     }, [hideToast]);
-    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": "toast-container", className: [UI_TOAST.container, UI_TOAST.positions[position]]
+    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast, updateToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": "toast-container", className: [UI_TOAST.container, UI_TOAST.positions[position]]
                     .filter(Boolean)
                     .join(" "), "data-section": "toast-div-623", children: _jsx(AnimatePresence, { mode: "popLayout", children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) }) })] }));
 }
@@ -58,6 +79,9 @@ function ToastRow({ toast, onClose, }) {
         error: _jsx("span", { "aria-hidden": "true", children: "!" }),
         warning: _jsx("span", { "aria-hidden": "true", children: "!" }),
         info: _jsx("span", { "aria-hidden": "true", children: "i" }),
+        loading: (_jsx("span", { "aria-hidden": "true", className: "inline-block animate-spin", 
+            // audit-inline-style-ok: built-in CSS spinner geometry, no Tailwind class produces the equivalent border-right-transparent ring without extra config.
+            style: { width: "1em", height: "1em", border: "2px solid currentColor", borderRightColor: "transparent", borderRadius: "9999px" } })),
     };
     return (_jsxs(motion.div, { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), layout: true, initial: reduced ? false : { opacity: 0, x: 24, scale: 0.95 }, animate: { opacity: 1, x: 0, scale: 1 }, exit: { opacity: 0, x: 24, scale: 0.95 }, transition: SPRING_SNAPPY, "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), toast.action && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => { toast.action.onClick(); onClose(toast.id); }, className: "min-h-0 shrink-0 px-2 py-1 font-semibold underline", children: toast.action.label })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
 }

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

@@ -26,7 +26,7 @@ export interface TooltipProps {
  * @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/Tooltip.js

@@ -15,7 +15,7 @@ const POSITION = {
  * @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>
  * ```
  */
@@ -66,8 +66,11 @@ export function Tooltip({ label, children, side = "top", delay = 400, mobileShee
         return () => document.removeEventListener("keydown", handler);
     }, [mobileOpen]);
     // Clone child to inject aria-label + mouse/focus/touch handlers
+    // audit-unknown-ok: ReactElement props clone — children props arbitrary
     const existingProps = children.props;
-    const child = React.cloneElement(children, {
+    const child = React.cloneElement(
+    // audit-unknown-ok: ReactElement props clone — children props arbitrary
+    children, {
         "aria-label": existingProps["aria-label"] ?? label,
         onMouseEnter: (e) => {
             if (typeof existingProps.onMouseEnter === "function")

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

@@ -14,8 +14,16 @@ declare const TYPOGRAPHY: {
         readonly base: "appkit-text--base";
         readonly lg: "appkit-text--lg";
         readonly xl: "appkit-text--xl";
+        readonly "2xl": "appkit-text--2xl";
+        readonly "3xl": "appkit-text--3xl";
+        readonly "4xl": "appkit-text--4xl";
+        readonly "5xl": "appkit-text--5xl";
+        readonly "6xl": "text-6xl";
+        readonly "7xl": "text-7xl";
+        readonly "8xl": "text-8xl";
     };
     readonly textWeight: {
+        readonly light: "appkit-font--light";
         readonly normal: "appkit-font--normal";
         readonly medium: "appkit-font--medium";
         readonly semibold: "appkit-font--semibold";
@@ -34,37 +42,105 @@ declare const TYPOGRAPHY: {
         readonly none: "";
         readonly inherit: "";
         readonly accent: "appkit-color--accent";
+        readonly inverse: "appkit-color--inverse";
     };
 };
 export type ColorVariant = keyof typeof TYPOGRAPHY.colorVariant;
+/** Shared text-shaping modifiers added by the variant-catalogue rollout. */
+export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
+export type TextAlign = "start" | "center" | "end" | "justify";
+export type FontFamily = "sans" | "display" | "editorial" | "mono";
+export type TextGradient = "none" | "brand" | "brand-tri" | "accent";
+/** Multi-line ellipsis: `true` = 1 line; pass `2`, `3`, or `4` for line-clamp. */
+export type TextTruncate = boolean | 1 | 2 | 3 | 4;
+type HeadingSize = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: "primary" | "secondary" | "muted" | "none";
     color?: ColorVariant;
+    /** Optional size override — defaults to the level's heading size. */
+    size?: HeadingSize;
+    /** Responsive size override at the sm breakpoint and up. */
+    smSize?: HeadingSize;
+    /** Responsive size override at the md breakpoint and up. */
+    mdSize?: HeadingSize;
+    /** Responsive size override at the lg breakpoint and up. */
+    lgSize?: HeadingSize;
+    /** Responsive size override at the xl breakpoint and up. */
+    xlSize?: HeadingSize;
+    /** Optional weight override — defaults to the level's heading weight. */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    transform?: TextTransform;
+    truncate?: TextTruncate;
+    numeric?: boolean;
+    italic?: boolean;
+    family?: FontFamily;
+    align?: TextAlign;
+    gradient?: TextGradient;
     children: React.ReactNode;
 }
-export declare function Heading({ level, variant, color, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ level, variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, className, children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+type TextPaddingY = "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+type TextLayout = "default" | "inline-flex" | "flex" | "inline-block";
+type TextGap = "none" | "1" | "1.5" | "2" | "3";
+type TextShadow = "none" | "sm" | "md" | "lg" | "2xl";
 interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
     variant?: "primary" | "secondary" | "muted" | "error" | "success" | "none";
     color?: ColorVariant;
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold" | "bold";
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
+    smSize?: HeadingSize;
+    mdSize?: HeadingSize;
+    lgSize?: HeadingSize;
+    xlSize?: HeadingSize;
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    transform?: TextTransform;
+    truncate?: TextTruncate;
+    numeric?: boolean;
+    italic?: boolean;
+    family?: FontFamily;
+    align?: TextAlign;
+    gradient?: TextGradient;
+    /** Vertical padding — used for empty-state Text wrappers. */
+    paddingY?: TextPaddingY;
+    /** Layout — `inline-flex` / `flex` for icon + label compositions. */
+    layout?: TextLayout;
+    /** Flex gap between children (only when `layout` is `inline-flex` / `flex`). */
+    gap?: TextGap;
+    /** Drop-shadow preset for over-image / hero-section text. */
+    shadow?: TextShadow;
     /** Override the rendered element. Defaults to `p`. */
     as?: React.ElementType;
     children: React.ReactNode;
 }
-export declare function Text({ variant, color, size, weight, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function Text({ variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, paddingY, layout, gap, shadow, className, as: Tag, children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+type LabelLayout = "inline" | "inline-flex" | "flex" | "flex-start";
+type LabelGap = "none" | "xs" | "sm" | "md" | "lg";
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
+    /** Optional size override — defaults to `sm` (the existing label sizing). */
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
+    /** Optional weight override — defaults to the label's medium weight. */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    color?: ColorVariant;
+    transform?: TextTransform;
+    align?: TextAlign;
+    /** Display + cross-axis alignment. flex variants auto-apply items-center. */
+    layout?: LabelLayout;
+    /** Gap between children. Only takes effect when `layout` is set to a flex variant. */
+    gap?: LabelGap;
     children: React.ReactNode;
 }
-export declare function Label({ required, className, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ required, size, weight, color, transform, align, layout, gap, className, children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
 interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** "default" — muted grey (default); "accent" — indigo, semibold; "inverse" — light indigo for use on dark indigo backgrounds */
     variant?: "default" | "accent" | "inverse";
+    /** Optional colour variant override. */
+    color?: ColorVariant;
+    /** Optional typography weight override. */
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
     children: React.ReactNode;
 }
-export declare function Caption({ variant, className, children, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Caption({ variant, color, weight, className, children, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Inline wrapper for styled text fragments. Use instead of a raw `<span>`.
  * When `variant` is "inherit" (default) the element carries no colour classes
@@ -73,19 +149,52 @@ export declare function Caption({ variant, className, children, ...props }: Capt
  * @example
  * ```tsx
  * <Span className="bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
- *   Highlighted
+ * Highlighted
  * </Span>
  *
  * <Span variant="error" weight="semibold">Required</Span>
  * ```
  */
+/** Inline-decorations allowed on Span (pill chips, code-like wraps, etc). */
+type SpanRounded = "none" | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+type SpanBorder = "none" | "default" | "subtle" | "strong";
+type SpanPadding = "none" | "x-xs" | "x-sm" | "x-md" | "y-2xs" | "y-xs" | "y-sm" | "inline-sm" | "inline" | "pill-2xs" | "pill-xs" | "pill-sm" | "pill-sm-tall" | "pill-md" | "pill-lg";
+type SpanBg = "none" | "muted" | "subtle" | "default" | "success-surface" | "danger-surface" | "warning-surface" | "info-surface" | "overlay-xs" | "overlay-sm" | "overlay-md" | "overlay-lg" | "overlay-xl";
+type SpanLayout = "inline" | "inline-flex" | "flex" | "inline-flex-center" | "flex-center" | "inline-block" | "block";
+type SpanGap = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
 interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Colour variant. "inherit" (default) applies no colour class. */
     variant?: "inherit" | "primary" | "secondary" | "muted" | "error" | "success" | "accent";
+    /**
+     * Display + cross-axis alignment preset.
+     * - `"inline-flex"` → `inline-flex items-center` (most chip patterns)
+     * - `"flex"` → `flex items-center` (block-level flex)
+     * - `"inline-block"` / `"block"` → display only
+     * - `"inline"` (default) → no display class
+     */
+    layout?: SpanLayout;
+    /** Gap between flex children. Only takes effect when `layout` is set to a flex variant. */
+    gap?: SpanGap;
     color?: ColorVariant;
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold" | "bold";
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl";
+    smSize?: HeadingSize;
+    mdSize?: HeadingSize;
+    lgSize?: HeadingSize;
+    xlSize?: HeadingSize;
+    weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+    transform?: TextTransform;
+    truncate?: TextTruncate;
+    numeric?: boolean;
+    italic?: boolean;
+    family?: FontFamily;
+    align?: TextAlign;
+    gradient?: TextGradient;
+    /** Optional pill-like decoration. */
+    rounded?: SpanRounded;
+    padding?: SpanPadding;
+    surface?: SpanBg;
+    border?: SpanBorder;
     children?: React.ReactNode;
 }
-export declare function Span({ variant, color, size, weight, className, children, ...props }: SpanProps): import("react/jsx-runtime").JSX.Element;
+export declare function Span({ variant, color, size, smSize, mdSize, lgSize, xlSize, weight, transform, truncate, numeric, italic, family, align, gradient, rounded, padding, surface, border, layout, gap, className, children, ...props }: SpanProps): import("react/jsx-runtime").JSX.Element;
 export {};