{
  "name": "WidgetThemeProvider",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetThemeProvider.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "theme-provider",
  "elName": "WidgetThemeProvider",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#theme-provider",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetThemeProvider",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "useWidgetTheme",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WIDGET_DEFAULTS",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetThemeProviderProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetTheme",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetDirection",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetPosition",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetTextAlign",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetTimestampFormat",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetSendIconPosition",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetButtonStyle",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WidgetMessageSideStyle",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WidgetThemeProvider } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "theme",
      "optional": true,
      "type": "WidgetTheme",
      "doc": "The theme config — every lever optional, deeply merged with defaults."
    },
    {
      "name": "config",
      "optional": true,
      "type": "WidgetThemeConfig",
      "doc": "The v2 theming engine's config: two source colours plus presets, with every foreground derived for contrast. Emitted BENEATH `theme`, so a granular `theme` value still wins — presets are the primary API, `theme` the override layer. Omit it and the widget uses the CSS defaults, which are identical."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Children — typically `<WidgetLauncher>` + `<WidgetShell>`."
    },
    {
      "name": "withWrapper",
      "optional": true,
      "type": "boolean",
      "doc": "Render as a transparent wrapper. Default `true`. Pass `false` to skip the wrapper div (useful when nesting inside an existing layout)."
    }
  ],
  "classesUsed": [
    "widget-theme-scope"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"widget-theme-scope\" style=\"\n          --w-shell-header-bg: #C69C6D;\n          --w-shell-header-text: #FCFCFC;\n          --w-shell-chat-bg: #FCFCFC;\n          padding: var(--s-4);\n          border-radius: var(--r-md);\n          border: 1px dashed var(--hair);\n          display: flex;\n          flex-direction: column;\n          gap: var(--s-2);\n        \">\n          <div style=\"font: 500 12px/1 var(--f-mono); color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.08em;\">widget-theme-scope</div>\n          <div style=\"font: 400 13px/1.5 var(--f-body); color: var(--fg-soft);\">All <code>--w-*</code> custom properties are injected here. Child components read them directly — no prop-drilling required.</div>\n          <div style=\"font: 400 12.5px/1.5 var(--f-mono); color: var(--fg-faint);\">--w-shell-header-bg: #C69C6D<br>--w-shell-header-text: #FCFCFC<br>--w-shell-chat-bg: #FCFCFC<br>…</div>\n        </div>",
    "css": ".widget-theme-scope {\n  /* ── Widget v2 theming engine ──────────────────────────────────────\n   * These are the defaults. <WidgetThemeProvider> overwrites the\n   * config-dependent ones inline from resolveWidgetTheme() (packages/ui/\n   * src/lib/widgetTheme.ts), so the widget renders correctly with or\n   * without a provider — the provider only ever narrows, never enables.\n   *\n   * Two source colours drive the rest. Foregrounds are DERIVED from\n   * their own background by WCAG relative luminance, so a consumer\n   * cannot configure an unreadable pair.\n   */\n  --w-accent: #FF3F7A;\n  --w-accent-fg: #FFFFFF;\n  --w-secondary: #191E32;\n  --w-secondary-fg: #FFFFFF;\n\n  /* Derivations of --w-accent. Kept in CSS rather than the engine so they\n   * follow any override of --w-accent automatically. --w-accent-text is\n   * NOT here: its formula changes in dark, so the engine owns it. */\n  --w-accent-soft: color-mix(in oklab, var(--w-accent) 14%, transparent);\n  --w-accent-lift: color-mix(in oklab, var(--w-accent) 55%, transparent);\n  --w-accent-text: color-mix(in oklab, var(--w-accent) 72%, var(--ink));\n  --w-glow: 0 12px 40px color-mix(in oklab, var(--w-accent) 30%, transparent);\n  --w-bubble-shadow: 0 6px 18px color-mix(in oklab, var(--w-accent) 24%, transparent);\n\n  /* Surfaces */\n  --w-chat-bg: var(--bg-paper);\n  --w-field-bg: var(--warm-1);\n  --w-field-bg-solid: #FBF6F0;\n  --w-field-hover: var(--warm-3);\n\n  /* Header — --w-header-dim/-soft derive from whatever fg the preset chose */\n  --w-header-bg: var(--w-field-bg);\n  --w-header-fg: var(--ink);\n  --w-header-dim: color-mix(in oklab, var(--w-header-fg) 62%, transparent);\n  --w-header-soft: color-mix(in oklab, var(--w-header-fg) 12%, transparent);\n\n  /* Bubbles */\n  --w-agent-bg: var(--warm-2);\n  --w-agent-fg: var(--fg);\n  --w-agent-border: var(--hair-warm-soft);\n  --w-visitor-bg: var(--w-accent);\n  --w-visitor-fg: #FFFFFF;\n\n  /* Controls */\n  --w-send-bg: var(--ink);\n  --w-send-fg: #FFFFFF;\n  --w-launch-bg: var(--w-accent);\n  --w-launch-fg: #FFFFFF;\n  --w-launch-radius: 50%;\n\n  /* Radii — the `corners` preset sets all four together */\n  --w-r-panel: var(--r-2xl);\n  --w-r-bubble: 16px;\n  --w-r-field: var(--r-xl);\n  --w-r-card: var(--r-lg);\n\n  /* Metrics. The mobile ladder below raises every touch target at once. */\n  --w-tap: 34px;\n  --w-send-size: 36px;\n  --w-close: 32px;\n  --w-vote: 24px;\n  --w-vote-gap: 2px;\n  --w-msg-size: 15px;\n  --w-line-clamp3: 66px;\n  --w-safe: env(safe-area-inset-bottom, 0px);\n\n  --w-font-family: var(--f-body);\n  --w-font-weight: 400;\n  --w-font-size: 14px;\n  --w-line-height: 22px;\n  font-family: var(--w-font-family);\n  font-weight: var(--w-font-weight);\n  font-size: var(--w-font-size);\n  line-height: var(--w-line-height);\n  color-scheme: light;\n}"
  }
}