@mohasinac/appkit 3.3.6 → 3.4.1

package/dist/tokens/index.js

@@ -189,41 +189,6 @@ export const LOCALE_CONFIG = {
 // Projects (letitrip.in, licorice, hobson) import this as their base and
 // extend with brand-specific values. The `primary`/`secondary` Tailwind color
 // names are resolved by each consumer project's tailwind.config.js.
-/**
- * Dark-mode aware classes for backgrounds, text, and borders.
- * Base = zinc (light) / slate (dark — navy-tinted).
- */
-const THEMED = {
-    // Backgrounds
-    bgPrimary: "bg-zinc-50 bg-[var(--appkit-color-bg)]",
-    bgSecondary: "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface)]",
-    bgTertiary: "bg-zinc-200 bg-[var(--appkit-color-surface-elevated)]",
-    bgElevated: "bg-[var(--appkit-color-surface)]",
-    bgInput: "bg-[var(--appkit-color-surface-input)]",
-    // Text
-    textPrimary: "text-[var(--appkit-color-text)]",
-    textSecondary: "text-[var(--appkit-color-text-muted)]",
-    textMuted: "text-[var(--appkit-color-text-faint)]",
-    textError: "text-red-600 dark:text-red-400",
-    textSuccess: "text-emerald-600 dark:text-emerald-400",
-    textOnPrimary: "text-white",
-    textOnDark: "text-white",
-    // Borders
-    border: "border-[var(--appkit-color-border)]",
-    borderSubtle: "border-[var(--appkit-color-border-subtle)]",
-    borderLight: "border-zinc-100 border-[var(--appkit-color-border)]/60",
-    borderError: "border-red-500",
-    borderColor: "border-[var(--appkit-color-border)]",
-    // Interactive
-    hover: "hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)]",
-    hoverCard: "hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]/60",
-    hoverBorder: "hover:border-[var(--appkit-color-border)]",
-    hoverText: "hover:text-zinc-800 dark:hover:text-zinc-100",
-    activeRow: "bg-primary-50 dark:bg-secondary-950/30",
-    focusRing: "focus:ring-primary-500 dark:focus:ring-secondary-400",
-    divider: "divide-zinc-200 divide-[var(--appkit-color-border)]",
-    placeholder: "placeholder-zinc-400 dark:placeholder-zinc-500",
-};
 /**
  * Layout dimension constants (height, width strings for Tailwind).
  */
@@ -287,138 +252,6 @@ export const LAYOUT = {
         full: "w-full",
     },
 };
-/**
- * Typography scale — fluid steps across sm/md/lg breakpoints.
- */
-const TYPOGRAPHY = {
-    pageTitle: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight leading-tight",
-    pageSubtitle: "text-base md:text-lg text-[var(--appkit-color-text-muted)] leading-relaxed mt-1",
-    sectionTitle: "text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight",
-    sectionSubtitle: "text-sm md:text-base lg:text-lg text-[var(--appkit-color-text-muted)]",
-    cardTitle: "text-base md:text-lg font-semibold leading-snug",
-    cardBody: "text-sm md:text-base leading-relaxed",
-    label: "text-sm font-medium text-[var(--appkit-color-text-muted)]",
-    caption: "text-xs text-[var(--appkit-color-text-muted)]",
-    overline: "text-xs font-semibold uppercase tracking-wider text-[var(--appkit-color-text-muted)]",
-    h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display",
-    h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display",
-    h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display",
-    h4: "text-lg md:text-xl lg:text-2xl font-bold font-display",
-    h5: "text-base md:text-lg lg:text-xl font-medium",
-    h6: "text-sm md:text-base lg:text-lg font-medium",
-    body: "text-base lg:text-lg",
-    small: "text-sm lg:text-base",
-    xs: "text-xs lg:text-sm",
-    display: "text-8xl md:text-9xl font-bold font-display",
-};
-/**
- * Spacing — section, form, and element stacking patterns + gap token map.
- * The gap map mirrors the GAP_MAP inlined in @mohasinac/ui Layout.tsx.
- */
-const SPACING = {
-    section: "space-y-8 md:space-y-12 lg:space-y-16",
-    formGroup: "space-y-6 lg:space-y-8",
-    stack: "space-y-4",
-    stackSmall: "space-y-2",
-    inline: "space-x-4",
-    inlineSmall: "gap-2 lg:gap-3",
-    inlineLarge: "gap-4 lg:gap-6",
-    pageY: "py-6 sm:py-8 lg:py-10",
-    sectionGap: "mt-8 md:mt-12",
-    cardPadding: "p-5 sm:p-6 lg:p-8",
-    padding: {
-        xs: "p-2",
-        sm: "p-3",
-        md: "p-4",
-        lg: "p-6",
-        xl: "p-8",
-    },
-    gap: {
-        none: "",
-        px: "gap-px",
-        xs: "gap-1",
-        sm: "gap-2",
-        "2.5": "gap-2.5",
-        "3": "gap-3",
-        md: "gap-4",
-        lg: "gap-6",
-        xl: "gap-8",
-        "2xl": "gap-12",
-    },
-};
-/**
- * Responsive grid presets — mobile-first, every preset reaches xl: and 2xl:.
- *
- * Rules:
- * - Fixed column grids (cols1–cols6) scale gracefully to widescreen.
- * - Card grids start at 1 col on portrait mobile (≤639 px) for readability.
- * - Auto-fill grids use minmax so columns form naturally at any viewport width.
- */
-const GRID = {
-    /** Single column */
-    cols1: "grid grid-cols-1",
-    /** 1 → 2 */
-    cols2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
-    /** 1 → 2 (md breakpoint) */
-    cols2Md: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
-    /** 1 → 2 → 3 → 4 on widescreen */
-    cols3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
-    /** 1 → 2 → 3 → 4 → 5 on widescreen */
-    cols4: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
-    /** 1 → 2 → 3 → 4 → 5 */
-    cols5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
-    /** 2 → 3 → 4 → 5 → 6 */
-    cols6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
-    /** 2 → 3 → 6 (lg breakpoint) */
-    cols6Lg: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
-    /**
-     * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
-     * Starts at 1 (not 2) so product cards with title+image+price are readable
-     * even on 320 px handsets in portrait orientation.
-     */
-    cards: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5",
-    /** Auto-fill product cards — min 200 px */
-    productCards: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-6",
-    /** Auto-fill store cards — min 220 px */
-    storeCards: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-6",
-    /** Auto-fill category icon+label tiles — min 130 px */
-    categoryCards: "grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-4",
-    /** Auto-fill coupon/promo cards — min 264 px */
-    couponCards: "grid grid-cols-[repeat(auto-fill,minmax(264px,1fr))] gap-6",
-    /** Auto-fill address / wide cards — min 300 px */
-    addressCards: "grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4",
-    /** Auto-fill KPI/stat tiles — min 180 px */
-    statTiles: "grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4",
-    /** Auto-fill account nav tiles — min 160 px */
-    navTiles: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4",
-    /** Auto-fill, min 200 px */
-    autoFillSm: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]",
-    /** Auto-fill, min 280 px */
-    autoFillMd: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]",
-    /** Auto-fill, min 360 px */
-    autoFillLg: "grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))]",
-    /** Fixed 280 px left sidebar + 1fr */
-    sidebar: "grid grid-cols-1 lg:grid-cols-[280px_1fr]",
-    /** 1fr + fixed 280 px right sidebar */
-    sidebarRight: "grid grid-cols-1 lg:grid-cols-[1fr_280px]",
-    /** Fixed 320 px left sidebar + 1fr (admin) */
-    sidebarWide: "grid grid-cols-1 lg:grid-cols-[320px_1fr]",
-    /** Equal halves on md+ */
-    halves: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2",
-    /** 2fr / 1fr */
-    twoThird: "grid grid-cols-1 md:grid-cols-[2fr_1fr]",
-    /** 1fr / 2fr */
-    oneThird: "grid grid-cols-1 md:grid-cols-[1fr_2fr]",
-    // Phase 20 mobile-first named grid presets
-    /** Product grid — 2 cols on mobile, scales to 5 on ultrawide */
-    products: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 xl:gap-6",
-    /** Wide card grid — 1 col on mobile → 3 on xl */
-    wide: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 xl:gap-8",
-    /** Admin stats grid — 1 col → 4 KPI tiles on xl */
-    admin: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4",
-    /** Filter sidebar + main content + optional right aside */
-    withFilter: "grid grid-cols-1 lg:grid-cols-[220px_1fr] xl:grid-cols-[260px_1fr_200px] gap-4 xl:gap-6",
-};
 // --- FLUID GRID -------------------------------------------------------------
 /**
  * Minimum item widths for auto-fill fluid grids matching the four
@@ -442,298 +275,13 @@ export const FLUID_GRID_MIN_WIDTHS = {
     /** Filter chips */
     chip: 80,
 };
-/**
- * Tailwind CSS class strings for fluid auto-fill grids.
- * Use these instead of `grid grid-cols-*` breakpoint classes.
- */
-const FLUID_GRID = {
-    /** Product / store cards — min 220 px */
-    card: "fluid-grid-card",
-    /** Admin stat / user cards — min 260 px */
-    admin: "fluid-grid-admin",
-    /** Blog / event cards — min 300 px */
-    wide: "fluid-grid-wide",
-    /** Gallery thumbnails — min 160 px */
-    thumb: "fluid-grid-thumb",
-};
-/**
- * Page container presets — max-width + centering + responsive horizontal padding.
- * Mirrors the CONTAINER_MAP inlined in @mohasinac/ui Layout.tsx.
- */
-const PAGE = {
-    px: "px-4 sm:px-6 lg:px-8",
-    container: {
-        /** max-w-3xl — blog / policy */
-        sm: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8",
-        /** max-w-4xl — contact / about */
-        md: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8",
-        /** max-w-5xl — checkout / help */
-        lg: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8",
-        /** max-w-6xl — product detail / cart */
-        xl: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8",
-        /** max-w-7xl — main content grids (default) */
-        "2xl": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",
-        /** max-w-screen-2xl — full-bleed content */
-        full: "max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8",
-        /** max-w-screen-2xl — wide store/seller layouts (compact px) */
-        wide: "max-w-screen-2xl mx-auto px-4 sm:px-6",
-        /** max-w-[1920px] — ultra-wide / 4K displays */
-        ultra: "max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8",
-    },
-};
-/**
- * Form input styles — border, bg, focus ring, error/success/disabled states.
- */
-const INPUT = {
-    base: "rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-input)] px-3.5 py-2.5 text-base sm:text-sm text-[var(--appkit-color-text)] focus:ring-2 focus:ring-primary-500/40  focus:border-primary-500  focus:outline-none transition-colors duration-150 placeholder:text-[var(--appkit-color-text-faint)]",
-    error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10",
-    success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500",
-    disabled: "bg-zinc-50 bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-faint)] cursor-not-allowed opacity-60",
-    withIcon: "pl-10",
-};
-/**
- * Card styles — base, hover, elevated, glass, and interactive variants.
- */
-const CARD = {
-    base: "rounded-2xl overflow-hidden transition-all",
-    shadow: "shadow-sm",
-    shadowElevated: "shadow-lg",
-    hover: "hover:shadow-md dark:hover:shadow-xl cursor-pointer transition-shadow duration-200",
-    standard: "rounded-2xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm hover:shadow-md transition-all duration-200",
-    elevated: "rounded-2xl bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] shadow-md hover:shadow-lg transition-shadow duration-200",
-    interactive: "rounded-2xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all duration-200 cursor-pointer",
-    glass: "rounded-2xl backdrop-blur-md bg-[color-mix(in_srgb,var(--appkit-color-surface)_85%,transparent)] border border-[var(--appkit-color-border-subtle)] shadow-lg",
-    // Card anatomy tokens (Phase 20)
-    /** Product card image wrapper — portrait aspect ratio */
-    image: "relative aspect-[3/4] overflow-hidden bg-[var(--appkit-color-surface)]",
-    /** Wide image wrapper — video/landscape ratio */
-    imageWide: "relative aspect-video overflow-hidden bg-[var(--appkit-color-surface)]",
-    /** Square image wrapper */
-    imageSquare: "relative aspect-square overflow-hidden bg-[var(--appkit-color-surface)]",
-    /** Banner aspect ratio — 4:3 on mobile, auto on md+ */
-    aspectBanner: "aspect-[4/3] md:aspect-auto",
-    /** Card body — flex-column, responsive padding */
-    body: "flex flex-col flex-1 gap-1 p-3 sm:p-4",
-    /** Card footer — responsive padding */
-    footer: "px-3 pb-3 sm:px-4 sm:pb-4",
-    /** Badge overlay (top-left) */
-    badge: "absolute top-2 left-2 z-10",
-    /** Action overlay, e.g. wishlist button (top-right) */
-    action: "absolute top-2 right-2 z-10",
-};
-/**
- * Flex layout compositions — pre-composed flex containers.
- * Use these instead of writing flex classes inline.
- */
-const FLEX = {
-    row: "flex flex-row",
-    col: "flex flex-col",
-    rowWrap: "flex flex-row flex-wrap",
-    colWrap: "flex flex-col flex-wrap",
-    inline: "inline-flex",
-    center: "flex items-center justify-center",
-    between: "flex items-center justify-between",
-    betweenStart: "flex items-start justify-between",
-    betweenEnd: "flex items-end justify-between",
-    start: "flex items-center justify-start",
-    end: "flex items-center justify-end",
-    rowCenter: "flex flex-row items-center",
-    rowStart: "flex flex-row items-start",
-    rowEnd: "flex flex-row items-end",
-    centerCol: "flex flex-col items-center justify-center",
-    colStart: "flex flex-col items-start",
-    colCenter: "flex flex-col items-center",
-    colEnd: "flex flex-col items-end",
-    colBetween: "flex flex-col justify-between",
-    inlineCenter: "inline-flex items-center",
-    inlineFull: "inline-flex items-center justify-center",
-    grow: "flex-1",
-    growMin: "flex-1 min-w-0",
-    growMinH: "flex-1 min-h-0",
-    noShrink: "flex-shrink-0",
-    none: "flex-none",
-    hCenter: "flex justify-center",
-};
-/**
- * Position utilities.
- */
-const POSITION = {
-    relative: "relative",
-    absolute: "absolute",
-    fixed: "fixed",
-    sticky: "sticky",
-    static: "static",
-    fill: "absolute inset-0",
-    absoluteCenter: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-    absoluteTop: "absolute top-0 inset-x-0",
-    absoluteBottom: "absolute bottom-0 inset-x-0",
-    absoluteTopRight: "absolute top-0 right-0",
-    absoluteTopLeft: "absolute top-0 left-0",
-    absoluteBottomRight: "absolute bottom-0 right-0",
-    absoluteBottomLeft: "absolute bottom-0 left-0",
-};
-/**
- * Component state modifiers.
- */
-const STATES = {
-    disabled: "opacity-50 cursor-not-allowed pointer-events-none",
-    loading: "opacity-75 cursor-wait",
-    readonly: "bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] cursor-default",
-    error: "border-red-500 dark:border-red-500",
-    success: "border-green-500 dark:border-green-500",
-    focus: "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-secondary-400 dark:focus:ring-offset-[var(--appkit-color-bg)]",
-};
-/**
- * Transition classes.
- */
-const TRANSITIONS = {
-    default: "transition-all duration-200 ease-in-out",
-    fast: "transition-all duration-150 ease-in-out",
-    slow: "transition-all duration-500 ease-in-out",
-    colors: "transition-colors duration-200 ease-in-out",
-    transform: "transition-transform duration-200 ease-in-out",
-    opacity: "transition-opacity duration-200 ease-in-out",
-};
-/**
- * Skeleton loading placeholders.
- *
- * Two variants:
- * - `pulse` (default) — fade in/out via `animate-pulse`.
- * - `shimmer` — left-to-right highlight sweep. Requires `animate-shimmer`
- *   keyframe defined in tailwind.config.js:
- *   ```js
- * // tailwind.config.js
- * theme: { extend: { animation: { shimmer: "shimmer 1.5s infinite" },
- * keyframes: { shimmer: { "0%": { backgroundPosition: "-400% 0" },
- * "100%": { backgroundPosition: "400% 0" } } } } }
- * ```
- */
-const SKELETON = {
-    // - Pulse (fade) variant ----------------------------------------------------------------
-    base: "animate-pulse rounded bg-zinc-200 bg-[var(--appkit-color-border-subtle)]",
-    text: "animate-pulse rounded bg-zinc-200 bg-[var(--appkit-color-border-subtle)] h-4",
-    heading: "animate-pulse rounded bg-zinc-200 bg-[var(--appkit-color-border-subtle)] h-7",
-    image: "animate-pulse rounded-xl bg-zinc-200 bg-[var(--appkit-color-border-subtle)]",
-    card: "animate-pulse rounded-2xl bg-zinc-200 bg-[var(--appkit-color-border-subtle)]",
-    // - Shimmer (sweep) variant ----------------------------------------------------------
-    shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
-    shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
-    shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 from-[var(--appkit-color-border-subtle)] via-[var(--appkit-color-bg)] to-[var(--appkit-color-border-subtle)]",
-};
-/**
- * Touch target sizes — WCAG 2.5.5 (minimum 44 × 44 px).
- */
-const TOUCH = {
-    target: "min-h-[44px] min-w-[44px]",
-    targetSm: "min-h-[36px] min-w-[36px]",
-    targetH: "min-h-[44px]",
-    targetW: "min-w-[44px]",
-    /** 44 px height primary button */
-    button: "h-11 px-5 py-2.5",
-    /** 44×44 icon button */
-    icon: "h-11 w-11 flex items-center justify-center",
-    /** 44 px height input */
-    input: "h-11 px-3 py-2",
-    /** 48 px height tab */
-    tab: "h-12 px-4",
-    /** Secondary chip (smaller but acceptable) */
-    chip: "h-9 px-3",
-};
-/**
- * Scrollbar and safe-area utilities.
- */
-const UTILITIES = {
-    scrollbarHide: "scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-    scrollbarThin: "scrollbar-thin [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-[var(--appkit-color-surface)] dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500",
-    scrollbarThinX: "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-[var(--appkit-color-surface)] dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500",
-    safeAreaBottom: "pb-[env(safe-area-inset-bottom)]",
-    safeAreaTop: "pt-[env(safe-area-inset-top)]",
-    safeAreaInline: "px-[env(safe-area-inset-left)] px-[env(safe-area-inset-right)]",
-    gradientText: "bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent",
-    /** Text truncation utilities */
-    textTruncate: "truncate",
-    textClamp1: "line-clamp-1",
-    textClamp2: "line-clamp-2",
-    textClamp3: "line-clamp-3",
-    textClamp4: "line-clamp-4",
-};
-/**
- * Common component pattern compositions.
- */
-const PATTERNS = {
-    pageContainer: "min-h-screen bg-[var(--appkit-color-bg)]",
-    sectionContainer: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 lg:py-12",
-    formContainer: "bg-[var(--appkit-color-surface)] rounded-2xl border border-[var(--appkit-color-border)] shadow-sm p-6 lg:p-8 space-y-6",
-    listItem: "bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)] rounded-xl p-4 hover:border-[var(--appkit-color-border)] transition-colors",
-    linkDefault: "text-primary-600 dark:text-secondary-400 hover:text-primary-500 dark:hover:text-secondary-300 transition-colors underline-offset-2 hover:underline",
-    iconButton: "p-2 rounded-lg transition-colors hover:bg-[var(--appkit-color-surface)] hover:bg-[var(--appkit-color-surface-elevated)] active:bg-zinc-200 dark:active:bg-slate-700 min-h-[44px] min-w-[44px] flex items-center justify-center",
-    modalOverlay: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50",
-    modalContent: "bg-[var(--appkit-color-surface)] rounded-2xl border border-[var(--appkit-color-border)] shadow-xl max-w-lg w-full mx-4 overflow-hidden",
-    divider: "border-t border-[var(--appkit-color-border)]",
-    emptyState: "flex flex-col items-center justify-center py-12 text-center text-[var(--appkit-color-text-muted)]",
-};
-/** Icon colour variants and sizes. */
-const ICON = {
-    muted: "text-[var(--appkit-color-text-faint)]",
-    primary: "text-primary-600 dark:text-secondary-400",
-    success: "text-emerald-500 dark:text-emerald-400",
-    danger: "text-red-500 dark:text-red-400",
-    warning: "text-amber-500 dark:text-amber-400",
-    size: {
-        sm: "w-4 h-4",
-        md: "w-6 h-6",
-        lg: "w-8 h-8",
-        xl: "w-16 h-16",
-    },
-};
-/** Horizontal tab active / inactive states. */
-const TAB = {
-    active: "border-b-2 border-primary-600 dark:border-secondary-400 text-primary-600 dark:text-secondary-400 font-semibold",
-    inactive: "border-transparent text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)]",
-};
-/**
- * Motion tokens — respect prefers-reduced-motion via motion-safe: prefix.
- * Custom keyframes must be defined in tailwind.config.js:
- *   fade-in, slide-up, scale-in
- */
-const MOTION = {
-    fadeIn: "motion-safe:animate-fade-in",
-    slideUp: "motion-safe:animate-slide-up",
-    scaleIn: "motion-safe:animate-scale-in",
-    skeleton: "motion-safe:animate-pulse",
-    transition: "motion-safe:transition-all motion-safe:duration-200",
-    transitionSlow: "motion-safe:transition-all motion-safe:duration-500 motion-safe:ease-in-out",
-};
-/**
- * Mobile-first typography scale — maps to named semantic sizes.
- * Use in place of raw text-* utilities.
- */
-const TEXT = {
-    h1: "text-2xl sm:text-3xl xl:text-4xl font-bold tracking-tight leading-tight",
-    h2: "text-xl sm:text-2xl xl:text-3xl font-semibold tracking-tight",
-    h3: "text-lg sm:text-xl xl:text-2xl font-semibold",
-    h4: "text-base sm:text-lg font-semibold",
-    body: "text-sm sm:text-base leading-relaxed",
-    bodyLg: "text-base sm:text-lg leading-relaxed",
-    small: "text-xs sm:text-sm",
-    label: "text-xs font-medium uppercase tracking-wide",
-    price: "text-lg sm:text-xl font-bold tabular-nums",
-    priceLg: "text-2xl sm:text-3xl font-bold tabular-nums",
-    muted: "text-[var(--appkit-color-text-muted)]",
-    error: "text-red-600 dark:text-red-400",
-    success: "text-green-600 dark:text-green-400",
-};
-/** Star rating colours. */
-const RATING = {
-    filled: "text-yellow-400",
-    empty: "text-[var(--appkit-color-text-faint)]",
-};
 // THEME_CONSTANTS deleted 2026-06-17 in Phase 8 of the Three-Layer Style
 // System refactor. Use primitive variant props (<Card>, <Section>, <Stack>,
 // <Text>, <Heading>, <Badge>, …) for every styling intent. The handful of
 // legacy raw-className tokens still needed live in typed feature files
-// under `_internal/shared/styles/{page,themed,grid,skeleton}.ts`. The
-// individual token groups (THEMED, LAYOUT, TYPOGRAPHY, SPACING, GRID, PAGE,
-// INPUT, CARD, FLEX, POSITION, STATES, TRANSITIONS, SKELETON, MOTION, TEXT,
-// TOUCH, FLUID_GRID, UTILITIES, PATTERNS, ICON, TAB, RATING) remain exported
-// individually above for any caller that still needs a slice of the old map.
+// under `_internal/shared/styles/{page,themed,grid,skeleton}.ts`. The two
+// token groups still consumed outside this file (LAYOUT, FLUID_GRID_MIN_WIDTHS)
+// remain exported above. The rest of the old THEME_CONSTANTS slice (THEMED,
+// TYPOGRAPHY, SPACING, GRID, PAGE, INPUT, CARD, FLEX, POSITION, STATES,
+// TRANSITIONS, SKELETON, MOTION, TEXT, TOUCH, FLUID_GRID, UTILITIES,
+// PATTERNS, ICON, TAB, RATING) had no remaining callers and was removed.

package/dist/ui/DataTable.js

@@ -144,27 +144,6 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                                 ? col.render(item)
                                                 : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) })), !externalPagination && totalPages > 1 && (_jsx(Div, { className: "appkit-data-table__pagination", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, maxVisible: resolvedPag.maxVisible, showFirstLast: resolvedPag.showFirstLast, showPrevNext: resolvedPag.showPrevNext, size: resolvedPag.size }) }))] }));
 }
-function DataTableViewToggle({ showViewToggle, showTableView, activeViewMode, labels, onViewModeChange, }) {
-    if (!showViewToggle)
-        return null;
-    return (_jsxs(Div, { className: "appkit-data-table__view-toggle", role: "toolbar", "aria-label": "View mode", children: [showTableView && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onViewModeChange("table"), "aria-label": labels.tableView, "aria-pressed": activeViewMode === "table", className: `appkit-data-table__view-btn ${activeViewMode === "table" ? "appkit-data-table__view-btn--active" : ""} hidden sm:flex`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10h18M3 6h18M3 14h18M3 18h18" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onViewModeChange("grid"), "aria-label": labels.gridView, "aria-pressed": activeViewMode === "grid", className: `appkit-data-table__view-btn ${activeViewMode === "grid" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onViewModeChange("list"), "aria-label": labels.listView, "aria-pressed": activeViewMode === "list", className: `appkit-data-table__view-btn ${activeViewMode === "list" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" }) }) })] }));
-}
-function DataTableTableView({ columns, paginatedData, keyExtractor, selectable, selectedIds, stickyHeader, striped, sortKey, sortDirection, actions, labelActions, onRowClick, onSelectionChange, onSort, onRowSelectionChange, }) {
-    return (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 && paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
-                                            const pageIds = paginatedData.map(keyExtractor);
-                                            onSelectionChange?.(e.target.checked
-                                                ? [...new Set([...selectedIds, ...pageIds])]
-                                                : selectedIds.filter((id) => !pageIds.includes(id)));
-                                        } }) })), columns.map((col) => (_jsx("th", { scope: "col", "aria-sort": col.sortable
-                                        ? sortKey === col.key
-                                            ? sortDirection === "asc" ? "ascending" : "descending"
-                                            : "none"
-                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx(Span, { "aria-hidden": "true", color: "faint", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx(Span, { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 divide-[var(--appkit-color-border)]", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
-                                "appkit-data-table__row",
-                                striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
-                                onRowClick ? "appkit-data-table__row--clickable" : "",
-                            ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => onRowSelectionChange(item, e.target.checked) }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render ? col.render(item) : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) }));
-}
 function SelectableCard({ id, selectable, selected, onToggle, children, listMode = false, }) {
     if (!selectable)
         return _jsx(Div, { className: "h-full", children: children });

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

@@ -12,7 +12,9 @@ export type AnchorGap = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
  * `href` shape (`http(s)://…`, `mailto:`, `tel:`, `#fragment` → `Anchor`;
  * everything else → `TextLink`).
  */
-export type AnchorTone = "default" | "muted" | "brand" | "accent" | "danger" | "success" | "inverse";
+export type AnchorTone = "default" | "muted" | "brand" | "accent" | "danger" | "success" | "inverse"
+/** No colour applied — for card/button-style anchors that fully own their own colour via `className`. */
+ | "none";
 export type AnchorUnderline = "none" | "hover" | "always";
 export type AnchorSize = "xs" | "sm" | "base" | "lg";
 export interface AnchorProps extends AnchorHTMLAttributes<HTMLAnchorElement> {

package/dist/ui/components/Anchor.js

@@ -26,6 +26,7 @@ const TONE_CLS = {
     danger: "text-[var(--appkit-color-error)] hover:text-[var(--appkit-color-error-hover)]",
     success: "text-[var(--appkit-color-success)]",
     inverse: "text-[var(--appkit-color-text-on-primary)]",
+    none: "",
 };
 const UNDERLINE_CLS = {
     none: "no-underline",

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

@@ -1,6 +1,9 @@
 /* Avatar — circular image or initials display with size variants */
 
 .appkit-avatar {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
   border-radius: 9999px;
   object-fit: cover;
   background: var(--appkit-color-zinc-100);

package/dist/ui/components/Breadcrumb.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { Nav, Ol, Li } from "./Semantic";
 import { Span } from "./Typography";
+import { TextLink } from "./TextLink";
 export function Breadcrumb({ items, className = "" }) {
     return (_jsx(Nav, { "aria-label": "Breadcrumb", className: `appkit-breadcrumb ${className}`, children: _jsx(Ol, { className: "appkit-breadcrumb__list", children: items.map((item, i) => {
                 const isLast = i === items.length - 1;
                 return (_jsxs(Li, { className: "appkit-breadcrumb__item", children: [i > 0 && (_jsx(ChevronRight, { className: "appkit-breadcrumb__separator", "aria-hidden": "true" })), isLast || !item.href ? (_jsx(Span, { className: isLast
                                 ? "appkit-breadcrumb__current"
-                                : "appkit-breadcrumb__text", "aria-current": isLast ? "page" : undefined, children: item.label })) : (_jsx("a", { href: item.href, className: "appkit-breadcrumb__link", children: item.label }))] }, i));
+                                : "appkit-breadcrumb__text", "aria-current": isLast ? "page" : undefined, children: item.label })) : (_jsx(TextLink, { href: item.href, variant: "none", className: "appkit-breadcrumb__link", children: item.label }))] }, i));
             }) }) }));
 }

package/dist/ui/components/FormActionBar.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronRight } from "lucide-react";
 import { Button } from "./Button";
+import { TextLink } from "./TextLink";
 export function FormActionBar({ title, breadcrumbs, onSaveDraft, onPublish, publishLabel = "Publish", onPreview, onDiscard, isDirty, isSubmitting, className, }) {
-    return (_jsxs("div", { className: `appkit-form-action-bar${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "appkit-form-action-bar__meta", children: [breadcrumbs && breadcrumbs.length > 0 && (_jsx("div", { className: "appkit-form-action-bar__breadcrumbs", children: breadcrumbs.map((crumb, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), crumb.href ? (_jsx("a", { href: crumb.href, className: "hover:underline truncate", children: crumb.label })) : (_jsx("span", { className: "truncate", children: crumb.label }))] }, i))) })), title && (_jsxs("div", { className: "appkit-form-action-bar__title", children: [isDirty && (_jsx("span", { className: "appkit-form-action-bar__dirty-dot mr-1.5", "aria-label": "Unsaved changes" })), title] }))] }), _jsxs("div", { className: "appkit-form-action-bar__actions", children: [isDirty && onDiscard && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSubmitting, children: "Discard" })), onPreview && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPreview, disabled: isSubmitting, children: "Preview" })), onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: "Save draft" })), _jsx(Button, { type: "button", size: "sm", onClick: onPublish, isLoading: isSubmitting, disabled: isSubmitting, children: publishLabel })] })] }));
+    return (_jsxs("div", { className: `appkit-form-action-bar${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "appkit-form-action-bar__meta", children: [breadcrumbs && breadcrumbs.length > 0 && (_jsx("div", { className: "appkit-form-action-bar__breadcrumbs", children: breadcrumbs.map((crumb, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(ChevronRight, { className: "h-3 w-3 flex-shrink-0" }), crumb.href ? (_jsx(TextLink, { href: crumb.href, variant: "inherit", truncate: true, children: crumb.label })) : (_jsx("span", { className: "truncate", children: crumb.label }))] }, i))) })), title && (_jsxs("div", { className: "appkit-form-action-bar__title", children: [isDirty && (_jsx("span", { className: "appkit-form-action-bar__dirty-dot mr-1.5", "aria-label": "Unsaved changes" })), title] }))] }), _jsxs("div", { className: "appkit-form-action-bar__actions", children: [isDirty && onDiscard && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSubmitting, children: "Discard" })), onPreview && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onPreview, disabled: isSubmitting, children: "Preview" })), onSaveDraft && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSaveDraft, isLoading: isSubmitting, disabled: isSubmitting, children: "Save draft" })), _jsx(Button, { type: "button", size: "sm", onClick: onPublish, isLoading: isSubmitting, disabled: isSubmitting, children: publishLabel })] })] }));
 }

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

@@ -69,4 +69,4 @@ export interface ListingLayoutProps {
     /** When provided, the entire layout is replaced with this view (detail/edit mode). */
     detailView?: ReactNode;
 }
-export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading, errorSlot, labels, portal, overlays, detailView, }: ListingLayoutProps): import("react").JSX.Element;
+export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading: _loading, errorSlot, labels, portal, overlays, detailView, }: ListingLayoutProps): import("react").JSX.Element;

package/dist/ui/components/ListingLayout.js

@@ -35,7 +35,7 @@ const DEFAULT_LABELS = {
     hideFilters: "Hide filters",
     filterActiveCount: (count) => `${count} active`,
 };
-export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen = false, filterPendingCount, className = "", loading = false, errorSlot, labels, portal, overlays, detailView, }) {
+export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen = false, filterPendingCount, className = "", loading: _loading = false, errorSlot, labels, portal, overlays, detailView, }) {
     // useState must run unconditionally on every render — these were
     // previously declared after the detail-view early return below, which
     // skipped both hook calls whenever `detailView` was passed, violating the

package/dist/ui/components/Motion.js

@@ -10,7 +10,7 @@ function useMotionProps(props) {
     const reduced = useReducedMotion();
     if (!reduced)
         return props;
-    const { initial, animate, exit, whileHover, whileTap, whileInView, transition, ...rest } = props;
+    const { initial: _initial, animate: _animate, exit: _exit, whileHover: _whileHover, whileTap: _whileTap, whileInView: _whileInView, transition: _transition, ...rest } = props;
     return { ...rest, initial: false, animate: false };
 }
 export function FadeIn({ delay = 0, duration = 0.3, children, ...props }) {

package/dist/ui/components/QuickCreateModal.js

@@ -6,6 +6,7 @@ import { Button } from "./Button";
 import { Div } from "./Div";
 import { Heading } from "./Typography";
 import { Row } from "./Layout";
+import { TextLink } from "./TextLink";
 export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, children, fullPageHref, saveLabel = "Save", cancelLabel = "Cancel", isSaving = false, saveDisabled = false, }) {
     const [busy, setBusy] = React.useState(false);
     const titleId = React.useId();
@@ -44,5 +45,5 @@ export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, chi
     if (!isOpen || typeof document === "undefined")
         return null;
     const saving = busy || isSaving;
-    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(Div, { className: "appkit-quick-create-modal__footer", children: [fullPageHref ? (_jsx("a", { href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : (_jsx("span", {})), _jsxs(Row, { className: "appkit-quick-create-modal__actions", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] })] }), document.body);
+    return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(Div, { className: "appkit-quick-create-modal__footer", children: [fullPageHref ? (_jsx(TextLink, { variant: "none", href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : (_jsx("span", {})), _jsxs(Row, { className: "appkit-quick-create-modal__actions", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] })] }), document.body);
 }