@geomak/ui 1.4.0 → 1.5.1

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { C as COLORS, S as SemanticColorKey, a as SemanticRadiusKey, V as VarColorKey, b as VarRadiusKey, c as VarShadowKey, P as palette, s as semanticTokens, v as vars } from './index-DLGzTj3K.cjs';
+export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -965,6 +965,142 @@ interface AppShellProps {
  */
 declare function AppShell({ topBar, sidebarSections, sidebarExpandedWidth, sidebarCollapsedWidth, sidebarDefaultExpanded, sidebarFooter, children, className, }: AppShellProps): react_jsx_runtime.JSX.Element;
 
+interface ThemeColors {
+    background?: string;
+    surface?: string;
+    'surface-raised'?: string;
+    border?: string;
+    'border-strong'?: string;
+    foreground?: string;
+    'foreground-secondary'?: string;
+    'foreground-muted'?: string;
+    accent?: string;
+    'accent-hover'?: string;
+    'accent-foreground'?: string;
+    error?: string;
+    warning?: string;
+    success?: string;
+    info?: string;
+}
+interface ThemeRadius {
+    sm?: string | number;
+    md?: string | number;
+    lg?: string | number;
+    xl?: string | number;
+    '2xl'?: string | number;
+    full?: string | number;
+}
+interface ThemeShadows {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+interface ThemeTypography {
+    /** e.g. '"Geist", sans-serif' */
+    fontFamily?: string;
+    fontSizeXs?: string;
+    fontSizeSm?: string;
+    fontSizeBase?: string;
+    fontSizeLg?: string;
+    fontSizeXl?: string;
+    fontSize2xl?: string;
+    fontSize3xl?: string;
+    fontWeightNormal?: number | string;
+    fontWeightMedium?: number | string;
+    fontWeightSemibold?: number | string;
+    fontWeightBold?: number | string;
+    lineHeightTight?: number | string;
+    lineHeightSnug?: number | string;
+    lineHeightNormal?: number | string;
+    lineHeightRelaxed?: number | string;
+}
+interface ThemeDensity {
+    /** Height of xs control (icon buttons, tiny chips). Default: 24px */
+    controlXs?: string | number;
+    /** Height of sm control (small inputs/buttons). Default: 28px */
+    controlSm?: string | number;
+    /** Height of md control (default inputs/buttons). Default: 36px */
+    controlMd?: string | number;
+    /** Height of lg control (large touch targets). Default: 44px */
+    controlLg?: string | number;
+    /** TopBar height. Default: 56px */
+    topbar?: string | number;
+}
+interface ThemeMotion {
+    durationFast?: string;
+    durationNormal?: string;
+    durationSlow?: string;
+    durationGentle?: string;
+}
+/**
+ * Partial theme override configuration.
+ * Every field is optional — only the keys you provide are overridden.
+ */
+interface ThemeConfig {
+    colors?: ThemeColors;
+    radius?: ThemeRadius;
+    shadows?: ThemeShadows;
+    typography?: ThemeTypography;
+    density?: ThemeDensity;
+    motion?: ThemeMotion;
+}
+interface ThemeProviderProps {
+    /**
+     * Token overrides applied in both light and dark mode (on top of the defaults).
+     * For dark-specific overrides see `darkTheme`.
+     */
+    theme?: ThemeConfig;
+    /**
+     * Additional token overrides applied only when the wrapper element carries
+     * the `.dark` class (i.e. when `colorScheme="dark"` or when a parent sets `.dark`).
+     * Injected via a scoped `<style>` tag — no inline-style limitations.
+     */
+    darkTheme?: ThemeConfig;
+    /**
+     * Managed color scheme.
+     * - `'light'`  — removes `.dark` class from the wrapper
+     * - `'dark'`   — adds `.dark` class to the wrapper
+     * - `'system'` — follows `prefers-color-scheme` media query
+     * - `'auto'`   — do nothing; inherit from an ancestor (default)
+     */
+    colorScheme?: 'light' | 'dark' | 'system' | 'auto';
+    children: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+/**
+ * Scoped theme provider.
+ *
+ * Wraps children in a `<div>` that carries CSS custom-property overrides
+ * as inline styles. A scoped `<style>` tag handles dark-mode overrides.
+ *
+ * @example Basic brand color swap
+ * <ThemeProvider theme={{ colors: { accent: '#e63946', 'accent-hover': '#c1121f' } }}>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @example Compact density + custom font
+ * <ThemeProvider
+ *   theme={{
+ *     density:    { controlMd: 30, controlLg: 38, topbar: 48 },
+ *     typography: { fontFamily: '"Geist", sans-serif' },
+ *   }}
+ * >
+ *   <Dashboard />
+ * </ThemeProvider>
+ *
+ * @example Managed dark mode
+ * <ThemeProvider
+ *   colorScheme="dark"
+ *   theme={{ colors: { accent: '#60a5fa' } }}
+ *   darkTheme={{ colors: { accent: '#93c5fd' } }}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ */
+declare function ThemeProvider({ theme, darkTheme, colorScheme, children, className, style, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
 /** ─────────────────── base ─────────────────── */
 interface SkeletonBaseProps {
     className?: string;
@@ -1447,4 +1583,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, ThemeSwitch, type ThemeSwitchProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { C as COLORS, S as SemanticColorKey, a as SemanticRadiusKey, V as VarColorKey, b as VarRadiusKey, c as VarShadowKey, P as palette, s as semanticTokens, v as vars } from './index-DLGzTj3K.js';
+export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -965,6 +965,142 @@ interface AppShellProps {
  */
 declare function AppShell({ topBar, sidebarSections, sidebarExpandedWidth, sidebarCollapsedWidth, sidebarDefaultExpanded, sidebarFooter, children, className, }: AppShellProps): react_jsx_runtime.JSX.Element;
 
+interface ThemeColors {
+    background?: string;
+    surface?: string;
+    'surface-raised'?: string;
+    border?: string;
+    'border-strong'?: string;
+    foreground?: string;
+    'foreground-secondary'?: string;
+    'foreground-muted'?: string;
+    accent?: string;
+    'accent-hover'?: string;
+    'accent-foreground'?: string;
+    error?: string;
+    warning?: string;
+    success?: string;
+    info?: string;
+}
+interface ThemeRadius {
+    sm?: string | number;
+    md?: string | number;
+    lg?: string | number;
+    xl?: string | number;
+    '2xl'?: string | number;
+    full?: string | number;
+}
+interface ThemeShadows {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+}
+interface ThemeTypography {
+    /** e.g. '"Geist", sans-serif' */
+    fontFamily?: string;
+    fontSizeXs?: string;
+    fontSizeSm?: string;
+    fontSizeBase?: string;
+    fontSizeLg?: string;
+    fontSizeXl?: string;
+    fontSize2xl?: string;
+    fontSize3xl?: string;
+    fontWeightNormal?: number | string;
+    fontWeightMedium?: number | string;
+    fontWeightSemibold?: number | string;
+    fontWeightBold?: number | string;
+    lineHeightTight?: number | string;
+    lineHeightSnug?: number | string;
+    lineHeightNormal?: number | string;
+    lineHeightRelaxed?: number | string;
+}
+interface ThemeDensity {
+    /** Height of xs control (icon buttons, tiny chips). Default: 24px */
+    controlXs?: string | number;
+    /** Height of sm control (small inputs/buttons). Default: 28px */
+    controlSm?: string | number;
+    /** Height of md control (default inputs/buttons). Default: 36px */
+    controlMd?: string | number;
+    /** Height of lg control (large touch targets). Default: 44px */
+    controlLg?: string | number;
+    /** TopBar height. Default: 56px */
+    topbar?: string | number;
+}
+interface ThemeMotion {
+    durationFast?: string;
+    durationNormal?: string;
+    durationSlow?: string;
+    durationGentle?: string;
+}
+/**
+ * Partial theme override configuration.
+ * Every field is optional — only the keys you provide are overridden.
+ */
+interface ThemeConfig {
+    colors?: ThemeColors;
+    radius?: ThemeRadius;
+    shadows?: ThemeShadows;
+    typography?: ThemeTypography;
+    density?: ThemeDensity;
+    motion?: ThemeMotion;
+}
+interface ThemeProviderProps {
+    /**
+     * Token overrides applied in both light and dark mode (on top of the defaults).
+     * For dark-specific overrides see `darkTheme`.
+     */
+    theme?: ThemeConfig;
+    /**
+     * Additional token overrides applied only when the wrapper element carries
+     * the `.dark` class (i.e. when `colorScheme="dark"` or when a parent sets `.dark`).
+     * Injected via a scoped `<style>` tag — no inline-style limitations.
+     */
+    darkTheme?: ThemeConfig;
+    /**
+     * Managed color scheme.
+     * - `'light'`  — removes `.dark` class from the wrapper
+     * - `'dark'`   — adds `.dark` class to the wrapper
+     * - `'system'` — follows `prefers-color-scheme` media query
+     * - `'auto'`   — do nothing; inherit from an ancestor (default)
+     */
+    colorScheme?: 'light' | 'dark' | 'system' | 'auto';
+    children: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+/**
+ * Scoped theme provider.
+ *
+ * Wraps children in a `<div>` that carries CSS custom-property overrides
+ * as inline styles. A scoped `<style>` tag handles dark-mode overrides.
+ *
+ * @example Basic brand color swap
+ * <ThemeProvider theme={{ colors: { accent: '#e63946', 'accent-hover': '#c1121f' } }}>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @example Compact density + custom font
+ * <ThemeProvider
+ *   theme={{
+ *     density:    { controlMd: 30, controlLg: 38, topbar: 48 },
+ *     typography: { fontFamily: '"Geist", sans-serif' },
+ *   }}
+ * >
+ *   <Dashboard />
+ * </ThemeProvider>
+ *
+ * @example Managed dark mode
+ * <ThemeProvider
+ *   colorScheme="dark"
+ *   theme={{ colors: { accent: '#60a5fa' } }}
+ *   darkTheme={{ colors: { accent: '#93c5fd' } }}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ */
+declare function ThemeProvider({ theme, darkTheme, colorScheme, children, className, style, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
 /** ─────────────────── base ─────────────────── */
 interface SkeletonBaseProps {
     className?: string;
@@ -1447,4 +1583,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, ThemeSwitch, type ThemeSwitchProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { colors_default } from './chunk-OSWZRIGC.js';
-export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-OSWZRIGC.js';
+import { colors_default } from './chunk-GKXP6OJJ.js';
+export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React9, { createContext, useMemo, useState, useEffect, useContext, useRef, useCallback, useId } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -2071,6 +2071,131 @@ function AppShell({
     ] })
   ] });
 }
+function px(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
+function str(v) {
+  return v == null ? void 0 : String(v);
+}
+function toCssVars(theme) {
+  if (!theme) return {};
+  const out = {};
+  if (theme.colors) {
+    for (const [k, v] of Object.entries(theme.colors)) {
+      if (v != null) out[`--color-${k}`] = v;
+    }
+  }
+  if (theme.radius) {
+    for (const [k, v] of Object.entries(theme.radius)) {
+      if (v != null) out[`--radius-${k}`] = px(v);
+    }
+  }
+  if (theme.shadows) {
+    for (const [k, v] of Object.entries(theme.shadows)) {
+      if (v != null) out[`--shadow-${k}`] = v;
+    }
+  }
+  if (theme.typography) {
+    const t = theme.typography;
+    const map = [
+      ["--font-family-sans", t.fontFamily],
+      ["--font-size-xs", t.fontSizeXs],
+      ["--font-size-sm", t.fontSizeSm],
+      ["--font-size-base", t.fontSizeBase],
+      ["--font-size-lg", t.fontSizeLg],
+      ["--font-size-xl", t.fontSizeXl],
+      ["--font-size-2xl", t.fontSize2xl],
+      ["--font-size-3xl", t.fontSize3xl],
+      ["--font-weight-normal", t.fontWeightNormal],
+      ["--font-weight-medium", t.fontWeightMedium],
+      ["--font-weight-semibold", t.fontWeightSemibold],
+      ["--font-weight-bold", t.fontWeightBold],
+      ["--line-height-tight", t.lineHeightTight],
+      ["--line-height-snug", t.lineHeightSnug],
+      ["--line-height-normal", t.lineHeightNormal],
+      ["--line-height-relaxed", t.lineHeightRelaxed]
+    ];
+    for (const [cssVar, val] of map) {
+      const s = str(val);
+      if (s != null) out[cssVar] = s;
+    }
+  }
+  if (theme.density) {
+    const d = theme.density;
+    const map = [
+      ["--height-control-xs", d.controlXs],
+      ["--height-control-sm", d.controlSm],
+      ["--height-control-md", d.controlMd],
+      ["--height-control-lg", d.controlLg],
+      ["--height-topbar", d.topbar]
+    ];
+    for (const [cssVar, val] of map) {
+      if (val != null) out[cssVar] = px(val);
+    }
+  }
+  if (theme.motion) {
+    const m = theme.motion;
+    const map = [
+      ["--duration-fast", m.durationFast],
+      ["--duration-normal", m.durationNormal],
+      ["--duration-slow", m.durationSlow],
+      ["--duration-gentle", m.durationGentle]
+    ];
+    for (const [cssVar, val] of map) {
+      if (val != null) out[cssVar] = val;
+    }
+  }
+  return out;
+}
+function varsToStyleString(vars2) {
+  return Object.entries(vars2).map(([k, v]) => `${k}: ${v};`).join(" ");
+}
+function ThemeProvider({
+  theme,
+  darkTheme,
+  colorScheme = "auto",
+  children,
+  className = "",
+  style
+}) {
+  const id = React9.useId().replace(/:/g, "");
+  const scopeClass = `geo-th-${id}`;
+  const divRef = useRef(null);
+  useEffect(() => {
+    const el = divRef.current;
+    if (!el) return;
+    if (colorScheme === "auto") return;
+    if (colorScheme === "system") {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const apply = (e) => {
+        el.classList.toggle("dark", e.matches);
+      };
+      apply(mq);
+      mq.addEventListener("change", apply);
+      return () => mq.removeEventListener("change", apply);
+    }
+    el.classList.toggle("dark", colorScheme === "dark");
+  }, [colorScheme]);
+  const lightVars = useMemo(() => toCssVars(theme), [theme]);
+  const darkVarStr = useMemo(() => {
+    if (!darkTheme) return "";
+    const dvars = toCssVars(darkTheme);
+    if (!Object.keys(dvars).length) return "";
+    return `.${scopeClass}.dark { ${varsToStyleString(dvars)} }`;
+  }, [darkTheme]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    darkVarStr && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: darkVarStr } }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: divRef,
+        className: `${scopeClass} ${className}`.trim(),
+        style: { ...lightVars, ...style },
+        children
+      }
+    )
+  ] });
+}
 var SHIMMER = [
   "animate-shimmer rounded-sm",
   "bg-[length:400%_100%]",
@@ -3065,6 +3190,6 @@ Temporal.DatePicker = DatePickerBase;
 Temporal.TemporalPicker = TemporalPickerBase;
 var DatePicker_default = Temporal;
 
-export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
+export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map