@intellectif/lk-react 23.1.0 → 23.1.2

package/dist/ThemeProvider-BRN1tj4n.cjs

@@ -0,0 +1,187 @@
+'use client';
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/theme/dark-theme.ts
+/**
+* Dark-mode colour overrides, merged over {@link defaultTheme} by
+* `ThemeProvider`. Colours only — spacing/typography/shape/motion are
+* theme-invariant. All pairs verified WCAG 2.2 AA against the dark surface.
+*/
+const darkTheme = {
+	"--lk-color-primary": "#fafafa",
+	"--lk-color-primary-hover": "#e4e4e7",
+	"--lk-color-surface": "#09090b",
+	"--lk-color-surface-raised": "#18181b",
+	"--lk-color-border": "#27272a",
+	"--lk-color-text": "#fafafa",
+	"--lk-color-text-muted": "#a1a1aa",
+	"--lk-color-success": "#4ade80",
+	"--lk-color-error": "#f87171",
+	"--lk-color-warning": "#fbbf24",
+	"--lk-color-focus-ring": "#fafafa"
+};
+//#endregion
+//#region src/theme/tokens.ts
+/**
+* Canonical default theme token values. `defaults.css` mirrors these exactly.
+* Palette is a neutral monochrome, deliberately unbranded, so the SDK carries
+* nobody's look out of the box; consumers rebrand via `ThemeProvider`. All
+* colour pairs are verified to meet WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for
+* UI / focus ring (see theme/__tests__/contrast.test.ts).
+*/
+const defaultTheme = {
+	"--lk-color-primary": "#18181b",
+	"--lk-color-primary-hover": "#27272a",
+	"--lk-color-surface": "#ffffff",
+	"--lk-color-surface-raised": "#fafafa",
+	"--lk-color-border": "#e4e4e7",
+	"--lk-color-text": "#18181b",
+	"--lk-color-text-muted": "#52525b",
+	"--lk-color-success": "#15803d",
+	"--lk-color-error": "#b91c1c",
+	"--lk-color-warning": "#b45309",
+	"--lk-color-focus-ring": "#18181b",
+	"--lk-color-media-accent": "#ffffff",
+	"--lk-iv-caption-color": "#ffffff",
+	"--lk-iv-caption-secondary-color": "#ffe066",
+	"--lk-iv-caption-secondary-scale": "0.85",
+	"--lk-iv-caption-gap": "0.25em",
+	"--lk-spacing-xs": "4px",
+	"--lk-spacing-sm": "8px",
+	"--lk-spacing-md": "16px",
+	"--lk-spacing-lg": "24px",
+	"--lk-spacing-xl": "32px",
+	"--lk-font-family-base": "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+	"--lk-font-size-sm": "0.875rem",
+	"--lk-font-size-base": "1rem",
+	"--lk-font-size-lg": "1.125rem",
+	"--lk-font-weight-normal": "400",
+	"--lk-font-weight-bold": "700",
+	"--lk-line-height-base": "1.5",
+	"--lk-radius-sm": "0.25rem",
+	"--lk-radius-base": "0.5rem",
+	"--lk-radius-lg": "0.75rem",
+	"--lk-transition-fast": "150ms ease",
+	"--lk-transition-base": "250ms ease"
+};
+//#endregion
+//#region src/theme/tailwind.ts
+/**
+* Token-prefix → Tailwind bucket. `--lk-font-weight-*`, `--lk-line-height-*`
+* and `--lk-transition-*` are intentionally absent: the first two have no
+* matching `theme.extend` group here, and the transition tokens hold a
+* `<duration> <easing>` shorthand that would emit invalid
+* `transition-duration: 150ms ease` if mapped to Tailwind's `transitionDuration`.
+*/
+const BUCKETS = [
+	["--lk-color-", "colors"],
+	["--lk-spacing-", "spacing"],
+	["--lk-radius-", "borderRadius"],
+	["--lk-font-family-", "fontFamily"],
+	["--lk-font-size-", "fontSize"]
+];
+/**
+* Converts SDK theme tokens into a Tailwind `theme.extend` object so Tailwind
+* projects consume the same `--lk-*` tokens as the components — one shared
+* source of truth rather than a parallel, conflicting palette.
+*/
+function createTailwindTheme(theme) {
+	const merged = {
+		...defaultTheme,
+		...theme
+	};
+	const extension = {
+		colors: {},
+		spacing: {},
+		borderRadius: {},
+		fontFamily: {},
+		fontSize: {}
+	};
+	for (const [tokenName, fallback] of Object.entries(merged)) for (const [prefix, bucket] of BUCKETS) if (tokenName.startsWith(prefix)) {
+		extension[bucket][`lk-${tokenName.slice(prefix.length)}`] = `var(${tokenName}, ${fallback})`;
+		break;
+	}
+	return extension;
+}
+//#endregion
+//#region src/theme/ThemeProvider.tsx
+const ThemeContext = (0, react.createContext)(defaultTheme);
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+/** Subscribe to OS dark-mode changes; no-op when there is no `window`. */
+function subscribePrefersDark(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const mql = window.matchMedia(DARK_QUERY);
+	mql.addEventListener("change", onChange);
+	return () => mql.removeEventListener("change", onChange);
+}
+/** Current OS dark-mode preference; `false` when there is no `window`. */
+function getPrefersDark() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia(DARK_QUERY).matches;
+}
+/**
+* Provides theme tokens to descendant activity components as scoped inline CSS
+* custom properties on a wrapper `<div>`, and via {@link useTheme}.
+*
+* Resolution: an explicit `theme` prop merges over {@link defaultTheme} (and
+* suppresses dark auto-detect). With no `theme` prop, the OS
+* `prefers-color-scheme: dark` preference auto-applies {@link darkTheme}.
+* SSR-safe: the server snapshot is always light, so hydration never mismatches.
+*/
+function ThemeProvider({ theme, children }) {
+	const prefersDark = (0, react.useSyncExternalStore)(subscribePrefersDark, getPrefersDark, () => false);
+	const activeTheme = (0, react.useMemo)(() => {
+		if (theme !== void 0) return {
+			...defaultTheme,
+			...theme
+		};
+		return prefersDark ? {
+			...defaultTheme,
+			...darkTheme
+		} : defaultTheme;
+	}, [theme, prefersDark]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value: activeTheme,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: activeTheme,
+			children
+		})
+	});
+}
+/** Returns the currently active theme tokens (defaults when no provider). */
+function useTheme() {
+	return (0, react.useContext)(ThemeContext);
+}
+//#endregion
+Object.defineProperty(exports, "ThemeProvider", {
+	enumerable: true,
+	get: function() {
+		return ThemeProvider;
+	}
+});
+Object.defineProperty(exports, "createTailwindTheme", {
+	enumerable: true,
+	get: function() {
+		return createTailwindTheme;
+	}
+});
+Object.defineProperty(exports, "darkTheme", {
+	enumerable: true,
+	get: function() {
+		return darkTheme;
+	}
+});
+Object.defineProperty(exports, "defaultTheme", {
+	enumerable: true,
+	get: function() {
+		return defaultTheme;
+	}
+});
+Object.defineProperty(exports, "useTheme", {
+	enumerable: true,
+	get: function() {
+		return useTheme;
+	}
+});
+
+//# sourceMappingURL=ThemeProvider-BRN1tj4n.cjs.map

package/dist/ThemeProvider-BRN1tj4n.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider-BRN1tj4n.cjs","names":["createContext","useSyncExternalStore","useMemo","useContext"],"sources":["../src/theme/dark-theme.ts","../src/theme/tokens.ts","../src/theme/tailwind.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["import type { ThemeTokens } from '@intellectif/lk-core';\n\n/**\n * Dark-mode colour overrides, merged over {@link defaultTheme} by\n * `ThemeProvider`. Colours only — spacing/typography/shape/motion are\n * theme-invariant. All pairs verified WCAG 2.2 AA against the dark surface.\n */\nexport const darkTheme: Partial<ThemeTokens> = {\n  '--lk-color-primary': '#fafafa',\n  '--lk-color-primary-hover': '#e4e4e7',\n  '--lk-color-surface': '#09090b',\n  '--lk-color-surface-raised': '#18181b',\n  '--lk-color-border': '#27272a',\n  '--lk-color-text': '#fafafa',\n  '--lk-color-text-muted': '#a1a1aa',\n  '--lk-color-success': '#4ade80',\n  '--lk-color-error': '#f87171',\n  '--lk-color-warning': '#fbbf24',\n  '--lk-color-focus-ring': '#fafafa',\n};\n","import type { ThemeTokens } from '@intellectif/lk-core';\n\n/**\n * Canonical default theme token values. `defaults.css` mirrors these exactly.\n * Palette is a neutral monochrome, deliberately unbranded, so the SDK carries\n * nobody's look out of the box; consumers rebrand via `ThemeProvider`. All\n * colour pairs are verified to meet WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for\n * UI / focus ring (see theme/__tests__/contrast.test.ts).\n */\nexport const defaultTheme: ThemeTokens = {\n  // ── Colours (light) — neutral monochrome; semantic success/error/warning\n  //    retained for status legibility ────────────────────────────────────────\n  '--lk-color-primary': '#18181b',\n  '--lk-color-primary-hover': '#27272a',\n  '--lk-color-surface': '#ffffff',\n  '--lk-color-surface-raised': '#fafafa',\n  '--lk-color-border': '#e4e4e7',\n  '--lk-color-text': '#18181b',\n  '--lk-color-text-muted': '#52525b',\n  '--lk-color-success': '#15803d',\n  '--lk-color-error': '#b91c1c',\n  '--lk-color-warning': '#b45309',\n  '--lk-color-focus-ring': '#18181b',\n  '--lk-color-media-accent': '#ffffff',\n  // An interactive video's two caption lines. The second is warm yellow, the\n  // convention for a second subtitle line, and clears 4.5:1 on the caption box\n  // whatever the video shows through it (see contrast.test.ts).\n  '--lk-iv-caption-color': '#ffffff',\n  '--lk-iv-caption-secondary-color': '#ffe066',\n  '--lk-iv-caption-secondary-scale': '0.85',\n  '--lk-iv-caption-gap': '0.25em',\n\n  // ── Spacing ──────────────────────────────────────────────────────────────\n  '--lk-spacing-xs': '4px',\n  '--lk-spacing-sm': '8px',\n  '--lk-spacing-md': '16px',\n  '--lk-spacing-lg': '24px',\n  '--lk-spacing-xl': '32px',\n\n  // ── Typography ───────────────────────────────────────────────────────────\n  '--lk-font-family-base':\n    'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n  '--lk-font-size-sm': '0.875rem',\n  '--lk-font-size-base': '1rem',\n  '--lk-font-size-lg': '1.125rem',\n  '--lk-font-weight-normal': '400',\n  '--lk-font-weight-bold': '700',\n  '--lk-line-height-base': '1.5',\n\n  // ── Shape ────────────────────────────────────────────────────────────────\n  '--lk-radius-sm': '0.25rem',\n  '--lk-radius-base': '0.5rem',\n  '--lk-radius-lg': '0.75rem',\n\n  // ── Motion ───────────────────────────────────────────────────────────────\n  '--lk-transition-fast': '150ms ease',\n  '--lk-transition-base': '250ms ease',\n};\n","import type { ThemeTokens } from '@intellectif/lk-core';\nimport { defaultTheme } from './tokens.js';\n\n/**\n * Shape consumed by a Tailwind config's `theme.extend`. Every entry is a\n * `var(--lk-token, <fallback>)` reference: the var keeps utilities live\n * (ThemeProvider / dark-mode override at runtime); the fallback makes them\n * work with zero setup (no provider, no `defaults.css` import).\n */\nexport interface TailwindThemeExtension {\n  colors: Record<string, string>;\n  spacing: Record<string, string>;\n  borderRadius: Record<string, string>;\n  fontFamily: Record<string, string>;\n  fontSize: Record<string, string>;\n}\n\n/**\n * Token-prefix → Tailwind bucket. `--lk-font-weight-*`, `--lk-line-height-*`\n * and `--lk-transition-*` are intentionally absent: the first two have no\n * matching `theme.extend` group here, and the transition tokens hold a\n * `<duration> <easing>` shorthand that would emit invalid\n * `transition-duration: 150ms ease` if mapped to Tailwind's `transitionDuration`.\n */\nconst BUCKETS = [\n  ['--lk-color-', 'colors'],\n  ['--lk-spacing-', 'spacing'],\n  ['--lk-radius-', 'borderRadius'],\n  ['--lk-font-family-', 'fontFamily'],\n  ['--lk-font-size-', 'fontSize'],\n] as const;\n\n/**\n * Converts SDK theme tokens into a Tailwind `theme.extend` object so Tailwind\n * projects consume the same `--lk-*` tokens as the components — one shared\n * source of truth rather than a parallel, conflicting palette.\n */\nexport function createTailwindTheme(theme: Partial<ThemeTokens>): TailwindThemeExtension {\n  const merged: Record<string, string> = { ...defaultTheme, ...theme };\n  const extension: TailwindThemeExtension = {\n    colors: {},\n    spacing: {},\n    borderRadius: {},\n    fontFamily: {},\n    fontSize: {},\n  };\n\n  for (const [tokenName, fallback] of Object.entries(merged)) {\n    for (const [prefix, bucket] of BUCKETS) {\n      if (tokenName.startsWith(prefix)) {\n        extension[bucket][`lk-${tokenName.slice(prefix.length)}`] =\n          `var(${tokenName}, ${fallback})`;\n        break;\n      }\n    }\n  }\n\n  return extension;\n}\n","'use client';\n\nimport type { ThemeTokens } from '@intellectif/lk-core';\nimport {\n  type CSSProperties,\n  createContext,\n  type ReactNode,\n  useContext,\n  useMemo,\n  useSyncExternalStore,\n} from 'react';\nimport { darkTheme } from './dark-theme.js';\nimport { defaultTheme } from './tokens.js';\n\nexport { darkTheme } from './dark-theme.js';\nexport { createTailwindTheme, type TailwindThemeExtension } from './tailwind.js';\nexport { defaultTheme } from './tokens.js';\n\nconst ThemeContext = createContext<ThemeTokens>(defaultTheme);\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n/** Subscribe to OS dark-mode changes; no-op when there is no `window`. */\nfunction subscribePrefersDark(onChange: () => void): () => void {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return () => {};\n  }\n  const mql = window.matchMedia(DARK_QUERY);\n  mql.addEventListener('change', onChange);\n  return () => mql.removeEventListener('change', onChange);\n}\n\n/** Current OS dark-mode preference; `false` when there is no `window`. */\nfunction getPrefersDark(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return false;\n  }\n  return window.matchMedia(DARK_QUERY).matches;\n}\n\nexport interface ThemeProviderProps {\n  /** Partial token overrides. When provided, dark auto-detection is disabled. */\n  theme?: Partial<ThemeTokens>;\n  children: ReactNode;\n}\n\n/**\n * Provides theme tokens to descendant activity components as scoped inline CSS\n * custom properties on a wrapper `<div>`, and via {@link useTheme}.\n *\n * Resolution: an explicit `theme` prop merges over {@link defaultTheme} (and\n * suppresses dark auto-detect). With no `theme` prop, the OS\n * `prefers-color-scheme: dark` preference auto-applies {@link darkTheme}.\n * SSR-safe: the server snapshot is always light, so hydration never mismatches.\n */\nexport function ThemeProvider({ theme, children }: ThemeProviderProps): React.JSX.Element {\n  const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);\n\n  const activeTheme = useMemo<ThemeTokens>(() => {\n    if (theme !== undefined) {\n      return { ...defaultTheme, ...theme };\n    }\n    return prefersDark ? { ...defaultTheme, ...darkTheme } : defaultTheme;\n  }, [theme, prefersDark]);\n\n  return (\n    <ThemeContext.Provider value={activeTheme}>\n      <div style={activeTheme as CSSProperties}>{children}</div>\n    </ThemeContext.Provider>\n  );\n}\n\n/** Returns the currently active theme tokens (defaults when no provider). */\nexport function useTheme(): ThemeTokens {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;;;;AAOA,MAAa,YAAkC;CAC7C,sBAAsB;CACtB,4BAA4B;CAC5B,sBAAsB;CACtB,6BAA6B;CAC7B,qBAAqB;CACrB,mBAAmB;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;AAC3B;;;;;;;;;;ACVA,MAAa,eAA4B;CAGvC,sBAAsB;CACtB,4BAA4B;CAC5B,sBAAsB;CACtB,6BAA6B;CAC7B,qBAAqB;CACrB,mBAAmB;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CACzB,2BAA2B;CAI3B,yBAAyB;CACzB,mCAAmC;CACnC,mCAAmC;CACnC,uBAAuB;CAGvB,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CAGnB,yBACE;CACF,qBAAqB;CACrB,uBAAuB;CACvB,qBAAqB;CACrB,2BAA2B;CAC3B,yBAAyB;CACzB,yBAAyB;CAGzB,kBAAkB;CAClB,oBAAoB;CACpB,kBAAkB;CAGlB,wBAAwB;CACxB,wBAAwB;AAC1B;;;;;;;;;;ACjCA,MAAM,UAAU;CACd,CAAC,eAAe,QAAQ;CACxB,CAAC,iBAAiB,SAAS;CAC3B,CAAC,gBAAgB,cAAc;CAC/B,CAAC,qBAAqB,YAAY;CAClC,CAAC,mBAAmB,UAAU;AAChC;;;;;;AAOA,SAAgB,oBAAoB,OAAqD;CACvF,MAAM,SAAiC;EAAE,GAAG;EAAc,GAAG;CAAM;CACnE,MAAM,YAAoC;EACxC,QAAQ,CAAC;EACT,SAAS,CAAC;EACV,cAAc,CAAC;EACf,YAAY,CAAC;EACb,UAAU,CAAC;CACb;CAEA,KAAK,MAAM,CAAC,WAAW,aAAa,OAAO,QAAQ,MAAM,GACvD,KAAK,MAAM,CAAC,QAAQ,WAAW,SAC7B,IAAI,UAAU,WAAW,MAAM,GAAG;EAChC,UAAU,OAAO,CAAC,MAAM,UAAU,MAAM,OAAO,MAAM,OACnD,OAAO,UAAU,IAAI,SAAS;EAChC;CACF;CAIJ,OAAO;AACT;;;ACxCA,MAAM,gBAAA,GAAeA,MAAAA,cAAAA,CAA2B,YAAY;AAE5D,MAAM,aAAa;;AAGnB,SAAS,qBAAqB,UAAkC;CAC9D,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,aAAa,CAAC;CAEhB,MAAM,MAAM,OAAO,WAAW,UAAU;CACxC,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;;AAGA,SAAS,iBAA0B;CACjC,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,OAAO;CAET,OAAO,OAAO,WAAW,UAAU,CAAC,CAAC;AACvC;;;;;;;;;;AAiBA,SAAgB,cAAc,EAAE,OAAO,YAAmD;CACxF,MAAM,eAAA,GAAcC,MAAAA,qBAAAA,CAAqB,sBAAsB,sBAAsB,KAAK;CAE1F,MAAM,eAAA,GAAcC,MAAAA,QAAAA,OAA2B;EAC7C,IAAI,UAAU,KAAA,GACZ,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EAErC,OAAO,cAAc;GAAE,GAAG;GAAc,GAAG;EAAU,IAAI;CAC3D,GAAG,CAAC,OAAO,WAAW,CAAC;CAEvB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,OAAO;GAA+B;EAAc,CAAA;CACpC,CAAA;AAE3B;;AAGA,SAAgB,WAAwB;CACtC,QAAA,GAAOC,MAAAA,WAAAA,CAAW,YAAY;AAChC"}

package/dist/ThemeProvider-C7K9iMLX.js

@@ -0,0 +1,158 @@
+'use client';
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/dark-theme.ts
+/**
+* Dark-mode colour overrides, merged over {@link defaultTheme} by
+* `ThemeProvider`. Colours only — spacing/typography/shape/motion are
+* theme-invariant. All pairs verified WCAG 2.2 AA against the dark surface.
+*/
+const darkTheme = {
+	"--lk-color-primary": "#fafafa",
+	"--lk-color-primary-hover": "#e4e4e7",
+	"--lk-color-surface": "#09090b",
+	"--lk-color-surface-raised": "#18181b",
+	"--lk-color-border": "#27272a",
+	"--lk-color-text": "#fafafa",
+	"--lk-color-text-muted": "#a1a1aa",
+	"--lk-color-success": "#4ade80",
+	"--lk-color-error": "#f87171",
+	"--lk-color-warning": "#fbbf24",
+	"--lk-color-focus-ring": "#fafafa"
+};
+//#endregion
+//#region src/theme/tokens.ts
+/**
+* Canonical default theme token values. `defaults.css` mirrors these exactly.
+* Palette is a neutral monochrome, deliberately unbranded, so the SDK carries
+* nobody's look out of the box; consumers rebrand via `ThemeProvider`. All
+* colour pairs are verified to meet WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for
+* UI / focus ring (see theme/__tests__/contrast.test.ts).
+*/
+const defaultTheme = {
+	"--lk-color-primary": "#18181b",
+	"--lk-color-primary-hover": "#27272a",
+	"--lk-color-surface": "#ffffff",
+	"--lk-color-surface-raised": "#fafafa",
+	"--lk-color-border": "#e4e4e7",
+	"--lk-color-text": "#18181b",
+	"--lk-color-text-muted": "#52525b",
+	"--lk-color-success": "#15803d",
+	"--lk-color-error": "#b91c1c",
+	"--lk-color-warning": "#b45309",
+	"--lk-color-focus-ring": "#18181b",
+	"--lk-color-media-accent": "#ffffff",
+	"--lk-iv-caption-color": "#ffffff",
+	"--lk-iv-caption-secondary-color": "#ffe066",
+	"--lk-iv-caption-secondary-scale": "0.85",
+	"--lk-iv-caption-gap": "0.25em",
+	"--lk-spacing-xs": "4px",
+	"--lk-spacing-sm": "8px",
+	"--lk-spacing-md": "16px",
+	"--lk-spacing-lg": "24px",
+	"--lk-spacing-xl": "32px",
+	"--lk-font-family-base": "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+	"--lk-font-size-sm": "0.875rem",
+	"--lk-font-size-base": "1rem",
+	"--lk-font-size-lg": "1.125rem",
+	"--lk-font-weight-normal": "400",
+	"--lk-font-weight-bold": "700",
+	"--lk-line-height-base": "1.5",
+	"--lk-radius-sm": "0.25rem",
+	"--lk-radius-base": "0.5rem",
+	"--lk-radius-lg": "0.75rem",
+	"--lk-transition-fast": "150ms ease",
+	"--lk-transition-base": "250ms ease"
+};
+//#endregion
+//#region src/theme/tailwind.ts
+/**
+* Token-prefix → Tailwind bucket. `--lk-font-weight-*`, `--lk-line-height-*`
+* and `--lk-transition-*` are intentionally absent: the first two have no
+* matching `theme.extend` group here, and the transition tokens hold a
+* `<duration> <easing>` shorthand that would emit invalid
+* `transition-duration: 150ms ease` if mapped to Tailwind's `transitionDuration`.
+*/
+const BUCKETS = [
+	["--lk-color-", "colors"],
+	["--lk-spacing-", "spacing"],
+	["--lk-radius-", "borderRadius"],
+	["--lk-font-family-", "fontFamily"],
+	["--lk-font-size-", "fontSize"]
+];
+/**
+* Converts SDK theme tokens into a Tailwind `theme.extend` object so Tailwind
+* projects consume the same `--lk-*` tokens as the components — one shared
+* source of truth rather than a parallel, conflicting palette.
+*/
+function createTailwindTheme(theme) {
+	const merged = {
+		...defaultTheme,
+		...theme
+	};
+	const extension = {
+		colors: {},
+		spacing: {},
+		borderRadius: {},
+		fontFamily: {},
+		fontSize: {}
+	};
+	for (const [tokenName, fallback] of Object.entries(merged)) for (const [prefix, bucket] of BUCKETS) if (tokenName.startsWith(prefix)) {
+		extension[bucket][`lk-${tokenName.slice(prefix.length)}`] = `var(${tokenName}, ${fallback})`;
+		break;
+	}
+	return extension;
+}
+//#endregion
+//#region src/theme/ThemeProvider.tsx
+const ThemeContext = createContext(defaultTheme);
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+/** Subscribe to OS dark-mode changes; no-op when there is no `window`. */
+function subscribePrefersDark(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const mql = window.matchMedia(DARK_QUERY);
+	mql.addEventListener("change", onChange);
+	return () => mql.removeEventListener("change", onChange);
+}
+/** Current OS dark-mode preference; `false` when there is no `window`. */
+function getPrefersDark() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia(DARK_QUERY).matches;
+}
+/**
+* Provides theme tokens to descendant activity components as scoped inline CSS
+* custom properties on a wrapper `<div>`, and via {@link useTheme}.
+*
+* Resolution: an explicit `theme` prop merges over {@link defaultTheme} (and
+* suppresses dark auto-detect). With no `theme` prop, the OS
+* `prefers-color-scheme: dark` preference auto-applies {@link darkTheme}.
+* SSR-safe: the server snapshot is always light, so hydration never mismatches.
+*/
+function ThemeProvider({ theme, children }) {
+	const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);
+	const activeTheme = useMemo(() => {
+		if (theme !== void 0) return {
+			...defaultTheme,
+			...theme
+		};
+		return prefersDark ? {
+			...defaultTheme,
+			...darkTheme
+		} : defaultTheme;
+	}, [theme, prefersDark]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: activeTheme,
+		children: /* @__PURE__ */ jsx("div", {
+			style: activeTheme,
+			children
+		})
+	});
+}
+/** Returns the currently active theme tokens (defaults when no provider). */
+function useTheme() {
+	return useContext(ThemeContext);
+}
+//#endregion
+export { darkTheme as a, defaultTheme as i, useTheme as n, createTailwindTheme as r, ThemeProvider as t };
+
+//# sourceMappingURL=ThemeProvider-C7K9iMLX.js.map

package/dist/ThemeProvider-C7K9iMLX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider-C7K9iMLX.js","names":[],"sources":["../src/theme/dark-theme.ts","../src/theme/tokens.ts","../src/theme/tailwind.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["import type { ThemeTokens } from '@intellectif/lk-core';\n\n/**\n * Dark-mode colour overrides, merged over {@link defaultTheme} by\n * `ThemeProvider`. Colours only — spacing/typography/shape/motion are\n * theme-invariant. All pairs verified WCAG 2.2 AA against the dark surface.\n */\nexport const darkTheme: Partial<ThemeTokens> = {\n  '--lk-color-primary': '#fafafa',\n  '--lk-color-primary-hover': '#e4e4e7',\n  '--lk-color-surface': '#09090b',\n  '--lk-color-surface-raised': '#18181b',\n  '--lk-color-border': '#27272a',\n  '--lk-color-text': '#fafafa',\n  '--lk-color-text-muted': '#a1a1aa',\n  '--lk-color-success': '#4ade80',\n  '--lk-color-error': '#f87171',\n  '--lk-color-warning': '#fbbf24',\n  '--lk-color-focus-ring': '#fafafa',\n};\n","import type { ThemeTokens } from '@intellectif/lk-core';\n\n/**\n * Canonical default theme token values. `defaults.css` mirrors these exactly.\n * Palette is a neutral monochrome, deliberately unbranded, so the SDK carries\n * nobody's look out of the box; consumers rebrand via `ThemeProvider`. All\n * colour pairs are verified to meet WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for\n * UI / focus ring (see theme/__tests__/contrast.test.ts).\n */\nexport const defaultTheme: ThemeTokens = {\n  // ── Colours (light) — neutral monochrome; semantic success/error/warning\n  //    retained for status legibility ────────────────────────────────────────\n  '--lk-color-primary': '#18181b',\n  '--lk-color-primary-hover': '#27272a',\n  '--lk-color-surface': '#ffffff',\n  '--lk-color-surface-raised': '#fafafa',\n  '--lk-color-border': '#e4e4e7',\n  '--lk-color-text': '#18181b',\n  '--lk-color-text-muted': '#52525b',\n  '--lk-color-success': '#15803d',\n  '--lk-color-error': '#b91c1c',\n  '--lk-color-warning': '#b45309',\n  '--lk-color-focus-ring': '#18181b',\n  '--lk-color-media-accent': '#ffffff',\n  // An interactive video's two caption lines. The second is warm yellow, the\n  // convention for a second subtitle line, and clears 4.5:1 on the caption box\n  // whatever the video shows through it (see contrast.test.ts).\n  '--lk-iv-caption-color': '#ffffff',\n  '--lk-iv-caption-secondary-color': '#ffe066',\n  '--lk-iv-caption-secondary-scale': '0.85',\n  '--lk-iv-caption-gap': '0.25em',\n\n  // ── Spacing ──────────────────────────────────────────────────────────────\n  '--lk-spacing-xs': '4px',\n  '--lk-spacing-sm': '8px',\n  '--lk-spacing-md': '16px',\n  '--lk-spacing-lg': '24px',\n  '--lk-spacing-xl': '32px',\n\n  // ── Typography ───────────────────────────────────────────────────────────\n  '--lk-font-family-base':\n    'system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n  '--lk-font-size-sm': '0.875rem',\n  '--lk-font-size-base': '1rem',\n  '--lk-font-size-lg': '1.125rem',\n  '--lk-font-weight-normal': '400',\n  '--lk-font-weight-bold': '700',\n  '--lk-line-height-base': '1.5',\n\n  // ── Shape ────────────────────────────────────────────────────────────────\n  '--lk-radius-sm': '0.25rem',\n  '--lk-radius-base': '0.5rem',\n  '--lk-radius-lg': '0.75rem',\n\n  // ── Motion ───────────────────────────────────────────────────────────────\n  '--lk-transition-fast': '150ms ease',\n  '--lk-transition-base': '250ms ease',\n};\n","import type { ThemeTokens } from '@intellectif/lk-core';\nimport { defaultTheme } from './tokens.js';\n\n/**\n * Shape consumed by a Tailwind config's `theme.extend`. Every entry is a\n * `var(--lk-token, <fallback>)` reference: the var keeps utilities live\n * (ThemeProvider / dark-mode override at runtime); the fallback makes them\n * work with zero setup (no provider, no `defaults.css` import).\n */\nexport interface TailwindThemeExtension {\n  colors: Record<string, string>;\n  spacing: Record<string, string>;\n  borderRadius: Record<string, string>;\n  fontFamily: Record<string, string>;\n  fontSize: Record<string, string>;\n}\n\n/**\n * Token-prefix → Tailwind bucket. `--lk-font-weight-*`, `--lk-line-height-*`\n * and `--lk-transition-*` are intentionally absent: the first two have no\n * matching `theme.extend` group here, and the transition tokens hold a\n * `<duration> <easing>` shorthand that would emit invalid\n * `transition-duration: 150ms ease` if mapped to Tailwind's `transitionDuration`.\n */\nconst BUCKETS = [\n  ['--lk-color-', 'colors'],\n  ['--lk-spacing-', 'spacing'],\n  ['--lk-radius-', 'borderRadius'],\n  ['--lk-font-family-', 'fontFamily'],\n  ['--lk-font-size-', 'fontSize'],\n] as const;\n\n/**\n * Converts SDK theme tokens into a Tailwind `theme.extend` object so Tailwind\n * projects consume the same `--lk-*` tokens as the components — one shared\n * source of truth rather than a parallel, conflicting palette.\n */\nexport function createTailwindTheme(theme: Partial<ThemeTokens>): TailwindThemeExtension {\n  const merged: Record<string, string> = { ...defaultTheme, ...theme };\n  const extension: TailwindThemeExtension = {\n    colors: {},\n    spacing: {},\n    borderRadius: {},\n    fontFamily: {},\n    fontSize: {},\n  };\n\n  for (const [tokenName, fallback] of Object.entries(merged)) {\n    for (const [prefix, bucket] of BUCKETS) {\n      if (tokenName.startsWith(prefix)) {\n        extension[bucket][`lk-${tokenName.slice(prefix.length)}`] =\n          `var(${tokenName}, ${fallback})`;\n        break;\n      }\n    }\n  }\n\n  return extension;\n}\n","'use client';\n\nimport type { ThemeTokens } from '@intellectif/lk-core';\nimport {\n  type CSSProperties,\n  createContext,\n  type ReactNode,\n  useContext,\n  useMemo,\n  useSyncExternalStore,\n} from 'react';\nimport { darkTheme } from './dark-theme.js';\nimport { defaultTheme } from './tokens.js';\n\nexport { darkTheme } from './dark-theme.js';\nexport { createTailwindTheme, type TailwindThemeExtension } from './tailwind.js';\nexport { defaultTheme } from './tokens.js';\n\nconst ThemeContext = createContext<ThemeTokens>(defaultTheme);\n\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n/** Subscribe to OS dark-mode changes; no-op when there is no `window`. */\nfunction subscribePrefersDark(onChange: () => void): () => void {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return () => {};\n  }\n  const mql = window.matchMedia(DARK_QUERY);\n  mql.addEventListener('change', onChange);\n  return () => mql.removeEventListener('change', onChange);\n}\n\n/** Current OS dark-mode preference; `false` when there is no `window`. */\nfunction getPrefersDark(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n    return false;\n  }\n  return window.matchMedia(DARK_QUERY).matches;\n}\n\nexport interface ThemeProviderProps {\n  /** Partial token overrides. When provided, dark auto-detection is disabled. */\n  theme?: Partial<ThemeTokens>;\n  children: ReactNode;\n}\n\n/**\n * Provides theme tokens to descendant activity components as scoped inline CSS\n * custom properties on a wrapper `<div>`, and via {@link useTheme}.\n *\n * Resolution: an explicit `theme` prop merges over {@link defaultTheme} (and\n * suppresses dark auto-detect). With no `theme` prop, the OS\n * `prefers-color-scheme: dark` preference auto-applies {@link darkTheme}.\n * SSR-safe: the server snapshot is always light, so hydration never mismatches.\n */\nexport function ThemeProvider({ theme, children }: ThemeProviderProps): React.JSX.Element {\n  const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);\n\n  const activeTheme = useMemo<ThemeTokens>(() => {\n    if (theme !== undefined) {\n      return { ...defaultTheme, ...theme };\n    }\n    return prefersDark ? { ...defaultTheme, ...darkTheme } : defaultTheme;\n  }, [theme, prefersDark]);\n\n  return (\n    <ThemeContext.Provider value={activeTheme}>\n      <div style={activeTheme as CSSProperties}>{children}</div>\n    </ThemeContext.Provider>\n  );\n}\n\n/** Returns the currently active theme tokens (defaults when no provider). */\nexport function useTheme(): ThemeTokens {\n  return useContext(ThemeContext);\n}\n"],"mappings":";;;;;;;;AAOA,MAAa,YAAkC;CAC7C,sBAAsB;CACtB,4BAA4B;CAC5B,sBAAsB;CACtB,6BAA6B;CAC7B,qBAAqB;CACrB,mBAAmB;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;AAC3B;;;;;;;;;;ACVA,MAAa,eAA4B;CAGvC,sBAAsB;CACtB,4BAA4B;CAC5B,sBAAsB;CACtB,6BAA6B;CAC7B,qBAAqB;CACrB,mBAAmB;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CACzB,2BAA2B;CAI3B,yBAAyB;CACzB,mCAAmC;CACnC,mCAAmC;CACnC,uBAAuB;CAGvB,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CACnB,mBAAmB;CAGnB,yBACE;CACF,qBAAqB;CACrB,uBAAuB;CACvB,qBAAqB;CACrB,2BAA2B;CAC3B,yBAAyB;CACzB,yBAAyB;CAGzB,kBAAkB;CAClB,oBAAoB;CACpB,kBAAkB;CAGlB,wBAAwB;CACxB,wBAAwB;AAC1B;;;;;;;;;;ACjCA,MAAM,UAAU;CACd,CAAC,eAAe,QAAQ;CACxB,CAAC,iBAAiB,SAAS;CAC3B,CAAC,gBAAgB,cAAc;CAC/B,CAAC,qBAAqB,YAAY;CAClC,CAAC,mBAAmB,UAAU;AAChC;;;;;;AAOA,SAAgB,oBAAoB,OAAqD;CACvF,MAAM,SAAiC;EAAE,GAAG;EAAc,GAAG;CAAM;CACnE,MAAM,YAAoC;EACxC,QAAQ,CAAC;EACT,SAAS,CAAC;EACV,cAAc,CAAC;EACf,YAAY,CAAC;EACb,UAAU,CAAC;CACb;CAEA,KAAK,MAAM,CAAC,WAAW,aAAa,OAAO,QAAQ,MAAM,GACvD,KAAK,MAAM,CAAC,QAAQ,WAAW,SAC7B,IAAI,UAAU,WAAW,MAAM,GAAG;EAChC,UAAU,OAAO,CAAC,MAAM,UAAU,MAAM,OAAO,MAAM,OACnD,OAAO,UAAU,IAAI,SAAS;EAChC;CACF;CAIJ,OAAO;AACT;;;ACxCA,MAAM,eAAe,cAA2B,YAAY;AAE5D,MAAM,aAAa;;AAGnB,SAAS,qBAAqB,UAAkC;CAC9D,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,aAAa,CAAC;CAEhB,MAAM,MAAM,OAAO,WAAW,UAAU;CACxC,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;;AAGA,SAAS,iBAA0B;CACjC,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,OAAO;CAET,OAAO,OAAO,WAAW,UAAU,CAAC,CAAC;AACvC;;;;;;;;;;AAiBA,SAAgB,cAAc,EAAE,OAAO,YAAmD;CACxF,MAAM,cAAc,qBAAqB,sBAAsB,sBAAsB,KAAK;CAE1F,MAAM,cAAc,cAA2B;EAC7C,IAAI,UAAU,KAAA,GACZ,OAAO;GAAE,GAAG;GAAc,GAAG;EAAM;EAErC,OAAO,cAAc;GAAE,GAAG;GAAc,GAAG;EAAU,IAAI;CAC3D,GAAG,CAAC,OAAO,WAAW,CAAC;CAEvB,OACE,oBAAC,aAAa,UAAd;EAAuB,OAAO;EAC5B,UAAA,oBAAC,OAAD;GAAK,OAAO;GAA+B;EAAc,CAAA;CACpC,CAAA;AAE3B;;AAGA,SAAgB,WAAwB;CACtC,OAAO,WAAW,YAAY;AAChC"}