@lmb-it/kitsconcerto-native 0.1.236

package/packages/types/src/Theme/defaultTheme.js

@@ -0,0 +1,1246 @@
+import { DEFAULT_NATIVE_SHADOWS } from './shadows.js';
+
+const defaultTheme = {
+  /* ─────────────────────────────────────────────────────────────
+   * Palettes
+   *
+   * `primary` and `brand` share the same teal scale so consumers
+   * can target either name. Anchors taken from the prototype:
+   *   AM.tealPale '#F0F8F8' → 50
+   *   AM.tealSoft '#E3F5F5' → 100
+   *   AM.teal     '#20AAB0' → 500
+   *   AM.tealDark '#1A8E93' → 600
+   * Other shades interpolated to keep the scale usable for tints
+   * (50–300) and pressed/dark text on light surfaces (700–900).
+   * ───────────────────────────────────────────────────────────── */
+  colors: {
+    blue: {
+      50: "#EFF6FF",
+      100: "#DBEAFE",
+      200: "#BFDBFE",
+      300: "#93C5FD",
+      400: "#60A5FA",
+      500: "#3B82F6",
+      600: "#2563EB",
+      700: "#1D4ED8",
+      800: "#1E40AF",
+      900: "#1E3A8A"
+    },
+    green: {
+      50: "#F0FDF4",
+      100: "#DCFCE7",
+      200: "#BBF7D0",
+      300: "#86EFAC",
+      400: "#4ADE80",
+      500: "#22C55E",
+      600: "#16A34A",
+      700: "#15803D",
+      800: "#166534",
+      900: "#14532D"
+    },
+    red: {
+      50: "#FEF2F2",
+      100: "#FEE2E2",
+      200: "#FECACA",
+      300: "#FCA5A5",
+      400: "#F87171",
+      500: "#EF4444",
+      600: "#DC2626",
+      700: "#B91C1C",
+      800: "#991B1B",
+      900: "#7F1D1D"
+    },
+    yellow: {
+      50: "#FEFCE8",
+      100: "#FEF9C3",
+      200: "#FEF08A",
+      300: "#FDE047",
+      400: "#FACC15",
+      500: "#EAB308",
+      600: "#CA8A04",
+      700: "#A16207",
+      800: "#854D0E",
+      900: "#713F12"
+    },
+    orange: {
+      50: "#FFF7ED",
+      100: "#FFEDD5",
+      200: "#FED7AA",
+      300: "#FDBA74",
+      400: "#FB923C",
+      500: "#F97316",
+      600: "#EA580C",
+      700: "#C2410C",
+      800: "#9A3412",
+      900: "#7C2D12"
+    },
+    purple: {
+      50: "#FAF5FF",
+      100: "#F3E8FF",
+      200: "#E9D5FF",
+      300: "#D8B4FE",
+      400: "#C084FC",
+      500: "#8B5CF6",
+      600: "#7C3AED",
+      700: "#6D28D9",
+      800: "#5B21B6",
+      900: "#4C1D95"
+    },
+    teal: {
+      50: "#F0FDFA",
+      100: "#CCFBF1",
+      200: "#99F6E4",
+      300: "#5EEAD4",
+      400: "#2DD4BF",
+      500: "#14B8A6",
+      600: "#0D9488",
+      700: "#0F766E",
+      800: "#115E59",
+      900: "#134E4A"
+    },
+    cyan: {
+      50: "#ECFEFF",
+      100: "#CFFAFE",
+      200: "#A5F3FC",
+      300: "#67E8F9",
+      400: "#22D3EE",
+      500: "#06B6D4",
+      600: "#0891B2",
+      700: "#0E7490",
+      800: "#155E75",
+      900: "#164E63"
+    },
+    pink: {
+      50: "#FDF2F8",
+      100: "#FCE7F3",
+      200: "#FBCFE8",
+      300: "#F9A8D4",
+      400: "#F472B6",
+      500: "#EC4899",
+      600: "#DB2777",
+      700: "#BE185D",
+      800: "#9D174D",
+      900: "#831843"
+    },
+    gray: {
+      50: "#F9FAFB",
+      100: "#F3F4F6",
+      200: "#E5E7EB",
+      300: "#D1D5DB",
+      400: "#9CA3AF",
+      500: "#6B7280",
+      600: "#4B5563",
+      700: "#374151",
+      800: "#1F2937",
+      900: "#111827"
+    },
+    indigo: {
+      50: "#EEF2FF",
+      100: "#E0E7FF",
+      200: "#C7D2FE",
+      300: "#A5B4FC",
+      400: "#818CF8",
+      500: "#6366F1",
+      600: "#4F46E5",
+      700: "#4338CA",
+      800: "#3730A3",
+      900: "#312E81"
+    },
+    // Brand: warm gold. Anchors:
+    //   400 = --gold-bright (#E5C661) — accents / glow / highlights
+    //   500 = --gold-primary (#C9A84C) — primary brand
+    //   700 = --gold-deep (#9A7E2E)   — pressed / on-light text emphasis
+    //   900 = --gold-muted (#5C4920)  — deepest tone / dark surfaces
+    // The 50–300 / 600 / 800 stops are interpolated to keep the scale usable.
+    gold: {
+      50: "#FBF7E8",
+      100: "#F5EBC3",
+      200: "#EFDD9A",
+      300: "#E5C661",
+      400: "#D7B554",
+      500: "#C9A84C",
+      600: "#B69241",
+      700: "#9A7E2E",
+      800: "#7A632A",
+      900: "#5C4920"
+    },
+    primary: {
+      50: "#F0F8F8",
+      // AM.tealPale
+      100: "#E3F5F5",
+      // AM.tealSoft
+      200: "#B7E5E7",
+      300: "#85D2D6",
+      400: "#4DBEC4",
+      500: "#20AAB0",
+      // AM.teal
+      600: "#1A8E93",
+      // AM.tealDark
+      700: "#157479",
+      800: "#0F5A5F",
+      900: "#0A4045"
+    },
+    brand: {
+      50: "#F0F8F8",
+      100: "#E3F5F5",
+      200: "#B7E5E7",
+      300: "#85D2D6",
+      400: "#4DBEC4",
+      500: "#20AAB0",
+      600: "#1A8E93",
+      700: "#157479",
+      800: "#0F5A5F",
+      900: "#0A4045"
+    },
+    /* Ink scale — reflects the prototype's ink/inkDim/inkMute trio
+     * plus a few stops above/below for shadow text and disabled. */
+    ink: {
+      50: "#F5F7F7",
+      // AM.lineSoft
+      100: "#EEEEEE",
+      // AM.line
+      200: "#D6DCDF",
+      300: "#B7C0C5",
+      400: "#8896A0",
+      // AM.inkMute
+      500: "#75808E",
+      // splash text-secondary
+      600: "#546067",
+      // AM.inkDim
+      700: "#3D464C",
+      800: "#263238",
+      // AM.ink
+      900: "#0F1A1C"
+    }
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Semantic tokens
+   *
+   * Light is the prototype's day mode; the user lands here. Cards
+   * (`#FFFFFF`) stack on the cream `bg-page` (`#F0EEE9`).
+   * Dark mirrors AM_DARK exactly — same hierarchy of bg / bgAlt /
+   * bgSunk so depth reads consistently across modes.
+   * ───────────────────────────────────────────────────────────── */
+  semanticTokens: {
+    light: {
+      // Brand
+      primary: "primary.500",
+      // #20AAB0
+      "primary-hover": "primary.600",
+      // #1A8E93 = AM.tealDark
+      "primary-active": "primary.700",
+      // pressed
+      secondary: "ink.600",
+      // #546067 = AM.inkDim
+      brand: "primary.500",
+      "brand-bright": "primary.300",
+      "brand-deep": "primary.700",
+      "brand-muted": "primary.900",
+      // Status — prototype's amber / rose / indigo, synthetic green for success
+      success: "#16A34A",
+      danger: "#E3595B",
+      // AM.rose
+      warning: "#F59E0B",
+      // AM.amber
+      info: "#4F5BD5",
+      // AM.indigo
+      help: "#4F5BD5",
+      "ai-accent": "#4F5BD5",
+      // Text
+      text: "ink.800",
+      // #263238 = AM.ink
+      "text-primary": "ink.800",
+      "text-secondary": "ink.600",
+      // #546067 = AM.inkDim
+      "text-subtle": "ink.400",
+      // #8896A0 = AM.inkMute
+      "text-muted": "ink.400",
+      "text-on-primary": "#FFFFFF",
+      "text-link": "primary.500",
+      // Backgrounds — cream page, white cards
+      bg: "#FFFFFF",
+      // AM.bg
+      "bg-subtle": "#F5F7F6",
+      // AM.bgAlt — card well
+      "bg-muted": "#EEF3F2",
+      // AM.bgSunk — deepest layer
+      "bg-accent": "#E3F5F5",
+      // AM.tealSoft — selected/highlight wash
+      "bg-input": "#EEF3F2",
+      // AM.bgSunk — input wells
+      "bg-page": "#F0EEE9",
+      // splash body background
+      // Surfaces
+      "surface-ground": "#F0EEE9",
+      // page (cream)
+      "surface-card": "#FFFFFF",
+      // AM.bg
+      "surface-muted": "#F3F4F6",
+      // subtle muted panel (chat system pill / separator / typing)
+      "surface-overlay": "#FFFFFF",
+      // popovers / dropdowns
+      "surface-hover": "#F5F7F6",
+      // AM.bgAlt
+      "surface-sidebar": "#FAF8F3",
+      // slightly tinted cream for sidebar
+      "surface-border": "#EEEEEE",
+      // AM.line
+      // Borders
+      border: "#EEEEEE",
+      // AM.line
+      "border-default": "#EEEEEE",
+      "border-subtle": "#F5F7F7",
+      // AM.lineSoft
+      "border-strong": "#D6DCDF",
+      // ink.200
+      divider: "#EEEEEE",
+      // Status tints (~12–15% alpha of the named hex)
+      "success-tint": "rgba(22,163,74,0.12)",
+      "danger-tint": "rgba(227,89,91,0.12)",
+      // rose 12%
+      "warning-tint": "rgba(245,158,11,0.14)",
+      // amber 14%
+      "info-tint": "rgba(79,91,213,0.12)",
+      // indigo 12%
+      "brand-tint": "rgba(32,170,176,0.14)",
+      // AM.tealGlow
+      "ai-tint": "rgba(79,91,213,0.14)",
+      // Status text — dark-aware, legible on the matching -tint bg (ChatBubble system tones)
+      "brand-text": "#0A4E54",
+      "success-text": "#065F46",
+      "warning-text": "#92400E",
+      // Switch
+      "switch-bg": "#D6DCDF"
+      // ink.200
+    },
+    dark: {
+      // Brand — flip the anchor so OFF-state is brighter (AM_DARK.teal)
+      primary: "primary.400",
+      // visually #4DBEC4 — close to AM_DARK.teal '#2DC0C7'
+      "primary-hover": "primary.300",
+      "primary-active": "primary.600",
+      secondary: "#B6C1BF",
+      // AM_DARK.inkDim
+      brand: "primary.400",
+      "brand-bright": "primary.300",
+      "brand-deep": "primary.700",
+      "brand-muted": "primary.900",
+      // Status (slightly punchier on dark)
+      success: "#22C55E",
+      danger: "#FF7A7C",
+      // lifted rose for dark
+      warning: "#FBBF24",
+      info: "#7C84F5",
+      // lifted indigo for dark
+      help: "#7C84F5",
+      "ai-accent": "#7C84F5",
+      // Text — cream-ish near-white on near-black
+      text: "#ECF1F0",
+      // AM_DARK.ink
+      "text-primary": "#ECF1F0",
+      "text-secondary": "#B6C1BF",
+      // AM_DARK.inkDim
+      "text-subtle": "#7F8C8B",
+      // AM_DARK.inkMute
+      "text-muted": "#7F8C8B",
+      "text-on-primary": "#0F1A1C",
+      // ink.900 — readable on bright teal in dark
+      "text-link": "primary.300",
+      // Backgrounds — AM_DARK trio
+      bg: "#161D1E",
+      // AM_DARK.bgAlt — card surface
+      "bg-subtle": "#10161A",
+      // AM_DARK.bg
+      "bg-muted": "#0C1114",
+      // AM_DARK.bgSunk
+      "bg-accent": "rgba(45,192,199,0.12)",
+      "bg-input": "#0C1114",
+      "bg-page": "#10161A",
+      // AM_DARK.bg
+      // Surfaces
+      "surface-ground": "#10161A",
+      "surface-card": "#161D1E",
+      "surface-muted": "#374151",
+      "surface-overlay": "#161D1E",
+      "surface-hover": "#1B2426",
+      "surface-sidebar": "#10161A",
+      "surface-border": "#2A302F",
+      // AM_DARK.line
+      // Borders
+      border: "#2A302F",
+      // AM_DARK.line
+      "border-default": "#2A302F",
+      "border-subtle": "#1F2424",
+      // AM_DARK.lineSoft
+      "border-strong": "#3D464C",
+      divider: "#2A302F",
+      // Status tints
+      "success-tint": "rgba(34,197,94,0.18)",
+      "danger-tint": "rgba(255,122,124,0.20)",
+      "warning-tint": "rgba(251,191,36,0.20)",
+      "info-tint": "rgba(124,132,245,0.18)",
+      "brand-tint": "rgba(45,192,199,0.20)",
+      // AM_DARK.tealGlow
+      "ai-tint": "rgba(124,132,245,0.20)",
+      // Status text — dark-aware, legible on the matching -tint bg (ChatBubble system tones)
+      "brand-text": "#B2EBF2",
+      "success-text": "#A7F3D0",
+      "warning-text": "#FDE68A",
+      // Switch
+      "switch-bg": "#3D464C"
+    }
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Severity (Button / Alert / Toast / Dialog)
+   * Brand lane = teal. Other lanes use the prototype's accent colours
+   * via direct hex on the slots that don't have a palette name.
+   * ───────────────────────────────────────────────────────────── */
+  severity: {
+    brand: {
+      solid: "brand.500",
+      solidText: "#FFFFFF",
+      bgTint: "brand.50",
+      iconFg: "brand.600",
+      iconBg: "brand.100",
+      text: "brand.700",
+      border: "brand.500"
+    },
+    success: {
+      solid: "green.500",
+      solidText: "#FFFFFF",
+      bgTint: "green.50",
+      iconFg: "green.600",
+      iconBg: "green.100",
+      text: "green.700",
+      border: "green.500"
+    },
+    danger: {
+      // AM.rose lane — kits palette has no `rose`, so we use red shades
+      // and override the solid with the exact AM hex for fidelity.
+      solid: "#E3595B",
+      solidText: "#FFFFFF",
+      bgTint: "red.50",
+      iconFg: "red.600",
+      iconBg: "red.100",
+      text: "red.700",
+      border: "#E3595B"
+    },
+    warning: {
+      // AM.amber lane — yellow-ish palette plus exact amber on solid.
+      solid: "#F59E0B",
+      solidText: "#FFFFFF",
+      bgTint: "yellow.50",
+      iconFg: "#B45309",
+      iconBg: "yellow.100",
+      text: "#92400E",
+      border: "#F59E0B"
+    },
+    info: {
+      // AM.indigo lane.
+      solid: "#4F5BD5",
+      solidText: "#FFFFFF",
+      bgTint: "indigo.50",
+      iconFg: "indigo.600",
+      iconBg: "indigo.100",
+      text: "indigo.700",
+      border: "#4F5BD5"
+    },
+    secondary: {
+      solid: "gray.500",
+      solidText: "#FFFFFF",
+      bgTint: "gray.50",
+      iconFg: "gray.600",
+      iconBg: "gray.100",
+      text: "gray.700",
+      border: "gray.400"
+    },
+    help: {
+      // Same as info — prototype uses one indigo for both lanes.
+      solid: "#4F5BD5",
+      solidText: "#FFFFFF",
+      bgTint: "indigo.50",
+      iconFg: "indigo.600",
+      iconBg: "indigo.100",
+      text: "indigo.700",
+      border: "#4F5BD5"
+    }
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Spacing — kits default scale (matches existing dashboard theme).
+   * ───────────────────────────────────────────────────────────── */
+  spacing: {
+    "0": "0",
+    "0.5": "0.125rem",
+    "1": "0.25rem",
+    "1.5": "0.375rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "8": "2rem",
+    "10": "2.5rem",
+    "12": "3rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem"
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Radii — taken from the prototype's `AM.r`:
+   *   AM.r.sm   = 8
+   *   AM.r.md   = 12
+   *   AM.r.lg   = 16
+   *   AM.r.xl   = 24
+   *   AM.r.pill = 999
+   * Slightly softer than `theme.ts` (10px lg) — matches the
+   * prototype's airier card chrome.
+   * ───────────────────────────────────────────────────────────── */
+  radii: {
+    none: "0",
+    sm: "8px",
+    base: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "20px",
+    "2xl": "24px",
+    "3xl": "32px",
+    pill: "999px",
+    full: "9999px"
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Shadows — lifted from `AM.shadow` and `AM.shadowLg`. Both use
+   * `rgba(15,26,28,…)` to tint the shadow toward the ink colour for
+   * a softer, less neutral elevation.
+   * ───────────────────────────────────────────────────────────── */
+  shadows: {
+    // Cross-platform presets (web `box-shadow` + native params). `native`
+    // values are the single source `DEFAULT_NATIVE_SHADOWS` so the web var
+    // and the native scale never drift. Override either field per consumer.
+    none: { web: "none", native: DEFAULT_NATIVE_SHADOWS.none },
+    xs: { web: "0 1px 1px rgba(15,26,28,0.03)", native: DEFAULT_NATIVE_SHADOWS.xs },
+    sm: { web: "0 1px 2px rgba(15,26,28,0.04)", native: DEFAULT_NATIVE_SHADOWS.sm },
+    md: { web: "0 2px 4px rgba(15,26,28,0.05), 0 6px 16px rgba(15,26,28,0.06)", native: DEFAULT_NATIVE_SHADOWS.md },
+    lg: { web: "0 4px 16px rgba(15,26,28,0.06), 0 20px 40px rgba(15,26,28,0.08)", native: DEFAULT_NATIVE_SHADOWS.lg },
+    // Web-only legacy levels (no cross-platform native mapping).
+    base: "0 1px 2px rgba(15,26,28,0.04), 0 4px 12px rgba(15,26,28,0.04)",
+    // AM.shadow
+    xl: "0 8px 24px rgba(15,26,28,0.10), 0 30px 60px rgba(15,26,28,0.12)",
+    "2xl": "0 25px 50px rgba(15,26,28,0.20)",
+    inner: "inset 0 2px 4px rgba(15,26,28,0.05)"
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Fonts — Roboto, mirroring the prototype's
+   *   font: 'Roboto, -apple-system, system-ui, sans-serif'
+   * The KitsThemeProvider emits `--kits-font-body` and applies it
+   * globally (see KitsThemeProvider.web.tsx — kits-global-fonts
+   * style tag), so changing `body` here flips the entire app.
+   * ───────────────────────────────────────────────────────────── */
+  fonts: {
+    heading: 'Roboto, -apple-system, system-ui, "Segoe UI", sans-serif',
+    body: 'Roboto, -apple-system, system-ui, "Segoe UI", sans-serif',
+    mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    sans: 'Roboto, -apple-system, system-ui, "Segoe UI", sans-serif'
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem"
+  },
+  fontWeights: {
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeights: {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2
+  },
+  /* ─────────────────────────────────────────────────────────────
+   * Component slot defaults
+   *
+   * Identical structurally to `./theme.ts` — only token references
+   * change (radii are `12` instead of `8` on Cards, shadows resolve
+   * to `AM.shadow`, etc.). Slots that don't reference colour-bound
+   * tokens (paddings, gaps, line-heights) are unchanged.
+   * ───────────────────────────────────────────────────────────── */
+  components: {
+    // ─── Button ────────────────────────────────────────────
+    Button: {
+      root: {
+        props: {
+          rounded: true,
+          size: "sm"
+        },
+        style: {
+          borderRadius: 12,
+          // AM.r.md
+          fontWeight: "600"
+        }
+      }
+    },
+    // ─── Input (base group) ────────────────────────────────
+    // FormElement (label/helperText/error) is configured by the kits
+    // default theme — leaving those slots off here so they inherit.
+    //
+    // `borderWidth: 0` is required alongside `border: 'none'` so the
+    // inner input is borderless on BOTH platforms — the visual frame
+    // is owned by `inputGroup`. Web reads `border: 'none'` (CSS
+    // shorthand → resets borderWidth/style/color). React Native
+    // silently ignores the `border` string but accepts the explicit
+    // `borderWidth: 0`. Both end up with no inner border.
+    Input: {
+      root: {
+        props: {
+          inputSize: "md"
+        },
+        style: {
+          borderRadius: 0,
+          border: "none",
+          borderWidth: 0,
+          fontSize: 14,
+          color: "text"
+        }
+      },
+      container: {
+        style: { gap: 6 }
+      },
+      // `borderWidth: 1` is a number, not the CSS string `'1px'`.
+      // RN's ViewStyle requires numeric borderWidth; web CSS accepts
+      // `1` and treats it as `1px`, so both platforms render the same
+      // 1px frame around the input group.
+      inputGroup: {
+        style: {
+          borderColor: "bg-accent",
+          borderRadius: 10,
+          borderStyle: "solid",
+          borderWidth: 1,
+          fontSize: 14,
+          height: 52,
+          color: "text"
+        }
+      },
+      leftAddon: {
+        style: { backgroundColor: "transparent" }
+      }
+    },
+    // Members inherit the Input chrome via baseGroup="Input"
+    InputText: {},
+    InputNumber: {},
+    InputMask: {},
+    InputPassword: {},
+    ColorPicker: {},
+    PhoneInput: {},
+    // ─── Datepicker ────────────────────────────────────────
+    // The `panel` slot is the calendar popup (web-only; the native
+    // Datepicker uses platform-native UI). Keeping `borderWidth: 1`
+    // as a number for consistency with the rest of the theme.
+    Datepicker: {
+      panel: {
+        style: {
+          backgroundColor: "surface-overlay",
+          borderColor: "bg-accent",
+          borderRadius: 10,
+          borderStyle: "solid",
+          borderWidth: 1,
+          padding: 8,
+          overflow: "hidden"
+        }
+      },
+      calendarHeader: {
+        style: {
+          backgroundColor: "transparent",
+          borderBottom: "1px solid",
+          borderColor: "bg-accent",
+          paddingBottom: 8,
+          marginBottom: 4,
+          color: "text-primary",
+          fontWeight: "600"
+        }
+      },
+      calendarNavButton: {
+        // style: { color: 'text-secondary', width: 28, height: 28, borderRadius: 8 },
+      },
+      weekDay: {
+        style: {
+          color: "text-muted",
+          fontSize: 11,
+          fontWeight: "600",
+          textTransform: "uppercase",
+          letterSpacing: "0.04em"
+        }
+      },
+      dayCell: {
+        style: {
+          color: "text-primary",
+          borderRadius: 8,
+          transition: "background-color 0.12s ease, color 0.12s ease"
+        }
+      },
+      // Selected day — teal pill
+      daySelected: {
+        style: { backgroundColor: "primary", color: "text-on-primary", fontWeight: "600" }
+      },
+      // Today — teal-tinted ring + bold
+      dayToday: {
+        style: { color: "brand-deep", backgroundColor: "brand-tint", fontWeight: "700" }
+      },
+      dayDisabled: {
+        style: { color: "text-muted", opacity: 0.45, cursor: "not-allowed" }
+      }
+    },
+    // ─── Textarea ──────────────────────────────────────────
+    // Textarea is borderless internally on native (its own visual frame
+    // is drawn here on the root, not on a separate inputGroup wrapper,
+    // because textareas rarely host addons). `borderWidth: 1` is a
+    // number for RN compatibility.
+    Textarea: {
+      root: {
+        props: { inputSize: "md" },
+        style: {
+          borderColor: "bg-accent",
+          borderRadius: 10,
+          borderStyle: "solid",
+          borderWidth: 1,
+          backgroundColor: "transparent",
+          fontSize: 14,
+          color: "text"
+        }
+      }
+    },
+    // ─── Select base group ─────────────────────────────────
+    // `borderWidth: 0` alongside `border: 'none'` for RN parity — same
+    // rationale as `Input.root.style` above.
+    Select: {
+      root: {
+        props: { inputSize: "md" },
+        style: {
+          borderRadius: 0,
+          border: "none",
+          borderWidth: 0,
+          fontSize: 14,
+          color: "text",
+          backgroundColor: "transparent"
+        }
+      },
+      container: {
+        style: { height: "100%", gap: 6 }
+      },
+      // `borderWidth: 1` (number, not the string `'1px'`) for RN
+      // compatibility — same rationale as `Input.inputGroup` above.
+      inputGroup: {
+        style: {
+          borderColor: "bg-accent",
+          height: 52,
+          borderRadius: 10,
+          borderStyle: "solid",
+          borderWidth: 1,
+          fontSize: 14,
+          color: "text"
+        }
+      },
+      /* Option-list (popover panel) */
+      panel: {
+        style: {
+          backgroundColor: "surface-overlay",
+          border: "1px solid",
+          borderColor: "bg-accent",
+          borderRadius: 16,
+          // AM.r.lg
+          overflow: "hidden"
+        }
+      },
+      item: {
+        style: {
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 8,
+          paddingBottom: 8,
+          fontSize: 14,
+          color: "text-primary",
+          borderRadius: 8,
+          margin: 2,
+          transition: "background-color 0.12s ease, color 0.12s ease"
+        }
+      },
+      itemSelected: {
+        style: {
+          backgroundColor: "brand-tint",
+          // AM.tealGlow
+          color: "brand-deep",
+          fontWeight: "600"
+        }
+      },
+      itemFocused: {
+        style: { backgroundColor: "bg-subtle", color: "text-primary" }
+      },
+      itemHover: {
+        style: { backgroundColor: "bg-subtle", color: "text-primary" }
+      },
+      itemDisabled: {
+        style: { color: "text-muted", opacity: 0.55, cursor: "not-allowed" }
+      }
+    },
+    // ─── MultiSelect (chip + per-item checkbox slots) ─────
+    MultiSelect: {
+      token: {
+        style: {
+          backgroundColor: "brand-tint",
+          color: "brand-deep",
+          borderRadius: 999,
+          // AM.r.pill
+          paddingLeft: 10,
+          paddingRight: 8,
+          paddingTop: 2,
+          paddingBottom: 2,
+          fontSize: 12,
+          fontWeight: "500",
+          margin: 2
+        }
+      },
+      tokenIcon: {
+        style: { color: "brand-deep", marginLeft: 4, fontSize: 12, cursor: "pointer" }
+      },
+      checkboxBox: {
+        style: {
+          borderColor: "border-strong",
+          backgroundColor: "transparent",
+          borderRadius: 4
+        }
+      },
+      checkboxBoxChecked: {
+        style: { backgroundColor: "primary", borderColor: "primary" }
+      },
+      checkboxIcon: {
+        style: { color: "text-on-primary" }
+      }
+    },
+    // Select members (inherit via baseGroup="Select")
+    DropdownSelect: {},
+    TreeSelect: {},
+    ListBox: {},
+    CascadeSelect: {},
+    AutoComplete: {
+      container: { style: { height: "auto" } }
+    },
+    // ─── Switch ────────────────────────────────────────────
+    // Slot keys use the post-refactor names (track / trackOn / thumb /
+    // thumbOn). Prototype never animates the thumb colour, so OFF and
+    // ON both stay white.
+    Switch: {
+      track: {
+        style: {
+          backgroundColor: "switch-bg",
+          borderRadius: 999,
+          transition: "background-color 0.18s ease"
+        }
+      },
+      trackOn: {
+        style: { backgroundColor: "primary" }
+      },
+      thumb: { style: { backgroundColor: "#FFFFFF" } },
+      thumbOn: { style: { backgroundColor: "#FFFFFF" } }
+    },
+    // ─── Checkbox / Radio ──────────────────────────────────
+    Checkbox: {
+      container: { style: { backgroundColor: "transparent" } }
+    },
+    Radio: {
+      container: { style: { backgroundColor: "transparent" } }
+    },
+    // ─── Card ──────────────────────────────────────────────
+    // Slightly larger radius and softer shadow than `theme.ts` —
+    // matches the prototype's airier feel.
+    Card: {
+      root: {
+        props: { variant: "elevated" },
+        style: {
+          borderRadius: 16,
+          // AM.r.lg
+          padding: 16,
+          backgroundColor: "surface-card",
+          borderWidth: 1,
+          borderColor: "border"
+        }
+      },
+      header: { style: { paddingBottom: 12 } },
+      title: { style: { fontSize: 16, fontWeight: "600", color: "text" } },
+      subTitle: { style: { fontSize: 13, color: "text-secondary" } },
+      content: { style: { padding: 0 } },
+      footer: { style: { paddingTop: 12 } }
+    },
+    // ─── Badge / Chip ─────────────────────────────────────
+    Badge: {
+      root: {
+        style: {
+          borderRadius: 999,
+          // AM.r.pill
+          paddingLeft: 12,
+          paddingRight: 12,
+          paddingTop: 4,
+          paddingBottom: 4,
+          fontSize: 12,
+          fontWeight: "500",
+          letterSpacing: "0.01em"
+        }
+      }
+    },
+    // ─── Table ────────────────────────────────────────────
+    Table: {
+      paginatorTemplate: "PrevPageLink PageLinks NextPageLink CurrentPageReport RowsPerPageDropdown",
+      currentPageReportTemplate: "Showing {first}\u2013{last} of {totalRecords}",
+      rowsPerPageOptions: [10, 25, 50, 100],
+      root: {
+        style: {
+          borderRadius: 16,
+          // AM.r.lg
+          overflow: "hidden",
+          backgroundColor: "surface-card",
+          border: "1px solid",
+          borderColor: "border"
+        }
+      },
+      header: {
+        style: { border: "none", backgroundColor: "transparent" }
+      },
+      headerRow: {
+        style: { border: "none", backgroundColor: "transparent" }
+      },
+      headerCell: {
+        style: {
+          fontSize: 11,
+          fontWeight: "700",
+          textTransform: "uppercase",
+          letterSpacing: "0.06em",
+          color: "text-secondary",
+          paddingLeft: 20,
+          paddingRight: 20,
+          paddingTop: 14,
+          paddingBottom: 14,
+          border: "none",
+          backgroundColor: "bg-subtle"
+        }
+      },
+      bodyRow: {
+        style: {
+          border: "none",
+          transition: "background-color 0.15s ease"
+        }
+      },
+      // Selected row left accent — teal bar
+      selectedRowAccent: {
+        style: { boxShadow: "inset 3px 0 0 0 var(--primary-color, #20AAB0)" }
+      },
+      bodyCell: {
+        style: {
+          paddingLeft: 20,
+          paddingRight: 20,
+          paddingTop: 16,
+          paddingBottom: 16,
+          fontSize: 14,
+          color: "text-primary"
+        }
+      },
+      tableHeader: {
+        style: {
+          backgroundColor: "transparent",
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          border: "none"
+        }
+      },
+      /* In-header filter row (the <tr> containing per-column filter inputs).
+         Override to re-skin the whole row (background, borders, etc.). */
+      filterRow: {
+        style: {
+          backgroundColor: "bg-subtle",
+          borderTop: "1px solid",
+          borderColor: "bg-accent"
+        }
+      },
+      /* In-header filter cell (each <td> inside the filter row). */
+      filterCell: {
+        style: {
+          backgroundColor: "bg-subtle",
+          padding: "0.5rem 1rem"
+        }
+      },
+      /* External filter bar */
+      filterBar: {
+        style: {
+          backgroundColor: "bg",
+          border: "1px solid",
+          borderColor: "bg-accent",
+          borderRadius: 12,
+          padding: 12,
+          gap: 12,
+          marginBottom: 12
+        }
+      },
+      filterInput: {
+        style: {
+          height: "2.5rem",
+          backgroundColor: "bg-input",
+          borderRadius: 8,
+          // AM.r.sm
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: "bg-accent"
+        }
+      },
+      filterLabel: {
+        style: {
+          fontSize: 11,
+          fontWeight: "600",
+          letterSpacing: "0.05em",
+          color: "text-secondary",
+          textTransform: "uppercase"
+        }
+      },
+      searchInput: {
+        style: {
+          minWidth: 260,
+          maxWidth: 460,
+          backgroundColor: "bg-input",
+          borderRadius: 8,
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: "bg-accent"
+        }
+      },
+      toolbarRight: { style: { gap: 8 } },
+      toolbarButton: {
+        style: { height: "2.5rem", width: "2.5rem", padding: 0, borderRadius: 8 }
+      },
+      clearFilterButton: {
+        props: { severity: "danger", outlined: true, rounded: false },
+        style: { height: "2.5rem", width: "2.5rem", padding: 0, borderRadius: 8 }
+      },
+      columnPicker: { style: { minWidth: 160, height: "2.5rem" } },
+      /* Pagination */
+      paginator: {
+        style: {
+          border: "none",
+          borderTop: "1px solid",
+          borderColor: "bg-accent",
+          paddingTop: 10,
+          paddingBottom: 10,
+          paddingLeft: 16,
+          paddingRight: 16,
+          backgroundColor: "bg-subtle"
+        }
+      },
+      paginatorPageButton: {
+        style: { color: "text-secondary", minWidth: 32, height: 32, borderRadius: 8, fontSize: 13 }
+      },
+      paginatorPageLink: {
+        style: { color: "text-primary", minWidth: 32, height: 32, borderRadius: 8, fontSize: 13, fontWeight: "500" }
+      },
+      paginatorActivePageButton: {
+        style: {
+          backgroundColor: "primary",
+          color: "text-on-primary",
+          height: 32,
+          minWidth: 32,
+          borderRadius: 8,
+          fontWeight: "600"
+        }
+      },
+      paginatorPageReport: {
+        style: { color: "text-secondary", fontSize: 13 }
+      },
+      paginatorRowsPerPage: {
+        style: {
+          height: 32,
+          justifyContent: "center",
+          alignItems: "center",
+          color: "text-secondary",
+          fontSize: 13,
+          margin: "0 10px"
+        }
+      },
+      paginatorRowsPerPageDropdown: {
+        style: {
+          height: 32,
+          border: "1px solid",
+          borderColor: "bg-accent",
+          borderRadius: 8,
+          color: "text-primary",
+          fontSize: 13
+        }
+      },
+      emptyMessage: {
+        style: {
+          paddingTop: 40,
+          paddingBottom: 40,
+          textAlign: "center",
+          color: "text-subtle",
+          fontSize: 14
+        }
+      }
+    },
+    // ─── Sidebar ──────────────────────────────────────────
+    Sidebar: {
+      root: {
+        style: {
+          backgroundColor: "surface-sidebar",
+          color: "text",
+          borderLeft: "1px solid",
+          borderColor: "border"
+        }
+      },
+      header: {
+        style: {
+          paddingLeft: 24,
+          paddingRight: 24,
+          paddingTop: 20,
+          paddingBottom: 20,
+          borderBottom: "1px solid",
+          borderColor: "border"
+        }
+      },
+      headerTitle: {
+        style: { fontSize: 18, fontWeight: "700", color: "text" }
+      },
+      closeButton: {
+        style: { borderRadius: "50%", color: "text-subtle" }
+      },
+      content: {
+        style: { paddingLeft: 24, paddingRight: 24, paddingTop: 24, paddingBottom: 24 }
+      },
+      mask: {
+        style: { backgroundColor: "rgba(15, 26, 28, 0.40)" }
+      }
+    },
+    // ─── Accordion ────────────────────────────────────────
+    Accordion: {
+      root: {
+        style: {
+          backgroundColor: "surface-card",
+          border: "1px solid",
+          borderColor: "bg-accent",
+          borderRadius: 16,
+          // AM.r.lg
+          overflow: "hidden"
+        }
+      },
+      title: {
+        style: {
+          backgroundColor: "bg-subtle",
+          color: "text-primary",
+          fontSize: 16,
+          fontWeight: "600",
+          padding: 16,
+          borderBottom: "1px solid",
+          borderColor: "bg-accent"
+        }
+      },
+      header: {
+        style: {
+          backgroundColor: "transparent",
+          color: "text-primary",
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 14,
+          paddingBottom: 14,
+          fontWeight: "500",
+          fontSize: 14,
+          borderBottom: "1px solid",
+          borderColor: "bg-accent",
+          transition: "background-color 0.15s ease, color 0.15s ease"
+        }
+      },
+      headerActive: {
+        style: { backgroundColor: "bg-subtle", color: "brand-deep", fontWeight: "600" }
+      },
+      headerHover: {
+        style: { backgroundColor: "bg-subtle", color: "text-primary" }
+      },
+      icon: {
+        style: { color: "text-secondary", transition: "transform 0.2s ease, color 0.15s ease" }
+      },
+      content: {
+        style: {
+          backgroundColor: "surface-card",
+          color: "text-primary",
+          padding: 16,
+          borderBottom: "1px solid",
+          borderColor: "bg-accent"
+        }
+      }
+    },
+    // ─── Group (repeatable field array) ───────────────────
+    Group: {
+      root: { style: { gap: 12 } },
+      header: { style: { paddingBottom: 8 } },
+      body: { style: { gap: 8 } },
+      row: { style: { gap: 8, paddingBottom: 8 } },
+      addButton: { props: { severity: "success", size: "sm", outlined: true } },
+      removeButton: { props: { severity: "danger", size: "sm", outlined: true } }
+    },
+    // ─── Header (app-shell top bar) ───────────────────────
+    Header: {
+      root: {
+        style: {
+          backgroundColor: "bg",
+          borderBottom: "1px solid",
+          borderColor: "border",
+          fontFamily: "var(--kits-font-body, Roboto, -apple-system, system-ui, sans-serif)",
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 10,
+          paddingBottom: 10
+        }
+      },
+      container: {
+        style: { minWidth: 0, paddingLeft: 8, paddingRight: 8 }
+      },
+      toggleModeButton: { style: { width: 36, height: 36 } },
+      avatarButton: { style: { width: 36, height: 36 } },
+      breadcrumb: { style: {} }
+    },
+    // ─── AlphaMatch component set (v2) — default knob values ──────────
+    // `root.props` carry each component's default props; user props always
+    // win (merged by useComponentDefaults). Colour values are theme tokens
+    // that resolve per platform — one source for web AND native.
+    Avatar: { root: { props: { size: "md", shape: "circle", status: "none", ring: false, ringColor: "brand", maskFillColor: "indigo.600" } } },
+    AvatarStack: { root: { props: { max: 4, size: "md", overlap: 0.35, ringColor: "brand" } } },
+    Stepper: { root: { props: { variant: "bar", size: "md", activeColor: "brand", trackColor: "gray.200" } } },
+    StatCard: { root: { props: { variant: "card", size: "md", align: "left", accentColor: "brand" } } },
+    StatGroup: { root: { props: { gap: 8 } } },
+    ProgressBar: { root: { props: { max: 100, color: "brand", trackColor: "gray.200", thickness: 8, rounded: true } } },
+    Timeline: { root: { props: { size: "md", activeColor: "brand", trackColor: "gray.200" } } },
+    EmptyState: { root: { props: { size: "md", accentColor: "brand" } } },
+    Tabs: { root: { props: { size: "md", activeColor: "brand", scrollable: true, gap: 8 } } },
+    BottomTabBar: { root: { props: { activeColor: "brand", inactiveColor: "text-secondary", background: "surface-card", showLabels: true } } },
+    Gallery: { root: { props: { columns: 2, gap: 8, aspectRatio: 1, radius: 12 } } },
+    Carousel: { root: { props: { aspectRatio: 1.2, radius: 0, showCounter: true, showDots: true } } },
+    ChatBubble: { root: { props: { variant: "incoming", tone: "neutral", incomingColor: "gray.100", outgoingColor: "brand", authorColor: "text-secondary" } } },
+    MessageComposer: { root: { props: { placeholder: "Message\u2026", accentColor: "brand" } } },
+    MessageReceipt: { root: { props: { size: "sm", color: "text-secondary", seenColor: "brand", failedColor: "danger" } } },
+    DateSeparator: { root: { props: { color: "text-secondary", backgroundColor: "surface-muted" } } },
+    TypingIndicator: { root: { props: { dotColor: "text-secondary", bubble: true, bubbleColor: "surface-muted" } } }
+  },
+  config: {
+    initialColorMode: "light",
+    useSystemColorMode: false
+  }
+};
+
+export { defaultTheme };
+//# sourceMappingURL=defaultTheme.js.map