@happyvertical/smrt-ui 0.30.0

package/dist/themes/components/ColorSchemeToggle.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+import { getThemeContext } from '../context.svelte.js';
+import type { ColorScheme } from '../types.js';
+
+interface Props {
+  /** Show labels with icons */
+  showLabels?: boolean;
+  /** Button variant: 'switch' | 'buttons' | 'segmented' */
+  variant?: 'switch' | 'buttons' | 'segmented';
+  /** Additional CSS class */
+  class?: string;
+  /** Accessible label */
+  ariaLabel?: string;
+}
+
+let {
+  showLabels = true,
+  variant = 'switch',
+  class: className = '',
+  ariaLabel = 'Toggle color scheme',
+}: Props = $props();
+
+const context = getThemeContext();
+
+function setScheme(scheme: ColorScheme) {
+  context.setColorScheme(scheme);
+}
+
+function toggle() {
+  context.toggleColorScheme();
+}
+
+// Icons
+const icons = {
+  light: '☀️',
+  dark: '🌙',
+  system: '💻',
+};
+
+const labels = {
+  light: 'Light',
+  dark: 'Dark',
+  system: 'System',
+};
+</script>
+
+<div class="smrt-color-scheme-toggle {variant} {className}">
+  {#if variant === 'switch'}
+    <button
+      class="smrt-color-scheme-toggle__switch"
+      onclick={toggle}
+      type="button"
+      aria-label={ariaLabel}
+      title={labels[context.state.resolvedScheme]}
+    >
+      {#if context.state.isDark}
+        <span class="smrt-color-scheme-toggle__icon">{icons.dark}</span>
+      {:else}
+        <span class="smrt-color-scheme-toggle__icon">{icons.light}</span>
+      {/if}
+      {#if showLabels}
+        <span class="smrt-color-scheme-toggle__label">
+          {labels[context.state.resolvedScheme]}
+        </span>
+      {/if}
+    </button>
+
+  {:else if variant === 'buttons'}
+    <div class="smrt-color-scheme-toggle__buttons">
+      {#each ['light', 'dark', 'system'] as scheme}
+        <button
+          class="smrt-color-scheme-toggle__button"
+          class:active={context.state.colorScheme === scheme}
+          onclick={() => setScheme(scheme as ColorScheme)}
+          type="button"
+        >
+          <span class="smrt-color-scheme-toggle__icon">{icons[scheme as keyof typeof icons]}</span>
+          {#if showLabels}
+            <span class="smrt-color-scheme-toggle__label">
+              {labels[scheme as keyof typeof labels]}
+            </span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+
+  {:else if variant === 'segmented'}
+    <div class="smrt-color-scheme-toggle__segmented" role="radiogroup" aria-label={ariaLabel}>
+      {#each ['light', 'dark', 'system'] as scheme}
+        <button
+          class="smrt-color-scheme-toggle__segment"
+          class:active={context.state.colorScheme === scheme}
+          onclick={() => setScheme(scheme as ColorScheme)}
+          type="button"
+          role="radio"
+          aria-checked={context.state.colorScheme === scheme}
+        >
+          <span class="smrt-color-scheme-toggle__icon">
+            {icons[scheme as keyof typeof icons]}
+          </span>
+          {#if showLabels}
+            <span class="smrt-color-scheme-toggle__label">
+              {labels[scheme as keyof typeof labels]}
+            </span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .smrt-color-scheme-toggle {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .smrt-color-scheme-toggle__switch {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+    border: 1px solid var(--smrt-color-outline, #ccc);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    color: var(--smrt-color-on-surface, inherit);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    transition: all 200ms ease;
+  }
+
+  .smrt-color-scheme-toggle__switch:hover {
+    background: var(--smrt-color-surface-container, #eee);
+  }
+
+  .smrt-color-scheme-toggle__buttons {
+    display: flex;
+    gap: var(--smrt-spacing-1, 0.25rem);
+  }
+
+  .smrt-color-scheme-toggle__button {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    border: 1px solid var(--smrt-color-outline, #ccc);
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    color: var(--smrt-color-on-surface, inherit);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    transition: all 200ms ease;
+  }
+
+  .smrt-color-scheme-toggle__button:hover {
+    background: var(--smrt-color-surface-container, #eee);
+  }
+
+  .smrt-color-scheme-toggle__button.active {
+    background: var(--smrt-color-primary-container, #e3f2fd);
+    color: var(--smrt-color-on-primary-container, #1565c0);
+    border-color: var(--smrt-color-primary, #2196f3);
+  }
+
+  .smrt-color-scheme-toggle__segmented {
+    display: inline-flex;
+    background: var(--smrt-color-surface-container-lowest, #fafafa);
+    border: 1px solid var(--smrt-color-outline, #ccc);
+    border-radius: var(--smrt-radius-lg, 0.75rem);
+    padding: var(--smrt-spacing-0_5, 0.125rem);
+  }
+
+  .smrt-color-scheme-toggle__segment {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    border: none;
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #666);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    transition: all 200ms ease;
+  }
+
+  .smrt-color-scheme-toggle__segment:hover {
+    color: var(--smrt-color-on-surface, inherit);
+  }
+
+  .smrt-color-scheme-toggle__segment.active {
+    background: var(--smrt-color-surface, white);
+    color: var(--smrt-color-on-surface, inherit);
+    box-shadow: var(--smrt-elevation-1, 0 1px 2px rgba(0,0,0,0.1));
+  }
+
+  .smrt-color-scheme-toggle__icon {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    line-height: 1;
+  }
+
+  .smrt-color-scheme-toggle__label {
+    font-size: inherit;
+  }
+</style>

package/dist/themes/components/ColorSchemeToggle.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Show labels with icons */
+    showLabels?: boolean;
+    /** Button variant: 'switch' | 'buttons' | 'segmented' */
+    variant?: 'switch' | 'buttons' | 'segmented';
+    /** Additional CSS class */
+    class?: string;
+    /** Accessible label */
+    ariaLabel?: string;
+}
+declare const ColorSchemeToggle: import("svelte").Component<Props, {}, "">;
+type ColorSchemeToggle = ReturnType<typeof ColorSchemeToggle>;
+export default ColorSchemeToggle;
+//# sourceMappingURL=ColorSchemeToggle.svelte.d.ts.map

package/dist/themes/components/ColorSchemeToggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/themes/components/ColorSchemeToggle.svelte.ts"],"names":[],"mappings":"AAOA,UAAU,KAAK;IACb,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwFD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/themes/components/ThemeSwitcher.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+import { getThemeContext } from '../context.svelte.js';
+import { getThemeOptions } from '../registry.js';
+import type { ThemePreset } from '../types.js';
+
+interface Props {
+  /** Custom label text */
+  label?: string;
+  /** Show icons for each theme */
+  showIcons?: boolean;
+  /** Button variant: 'select' | 'buttons' | 'segmented' */
+  variant?: 'select' | 'buttons' | 'segmented';
+  /** Additional CSS class */
+  class?: string;
+}
+
+let {
+  label = 'Theme',
+  showIcons = true,
+  variant = 'select',
+  class: className = '',
+}: Props = $props();
+
+const context = getThemeContext();
+const options = getThemeOptions();
+
+function handleChange(event: Event) {
+  const select = event.target as HTMLSelectElement;
+  context.setPreset(select.value as ThemePreset);
+}
+
+function handlePresetClick(preset: ThemePreset) {
+  context.setPreset(preset);
+}
+
+// Icons for each theme
+const themeIcons: Record<ThemePreset, string> = {
+  material: '🔷',
+  glass: '💎',
+  studio: '◻️',
+};
+</script>
+
+<div class="smrt-theme-switcher {variant} {className}">
+  {#if label}
+    <span class="smrt-theme-switcher__label">{label}</span>
+  {/if}
+
+  {#if variant === 'select'}
+    <select
+      class="smrt-theme-switcher__select"
+      value={context.state.preset}
+      onchange={handleChange}
+    >
+      {#each options as option}
+        <option value={option.value}>
+          {#if showIcons}{themeIcons[option.value]} {/if}
+          {option.label}
+        </option>
+      {/each}
+    </select>
+
+  {:else if variant === 'buttons'}
+    <div class="smrt-theme-switcher__buttons">
+      {#each options as option}
+        <button
+          class="smrt-theme-switcher__button"
+          class:active={context.state.preset === option.value}
+          onclick={() => handlePresetClick(option.value)}
+          type="button"
+        >
+          {#if showIcons}
+            <span class="smrt-theme-switcher__icon">{themeIcons[option.value]}</span>
+          {/if}
+          <span class="smrt-theme-switcher__text">{option.label}</span>
+        </button>
+      {/each}
+    </div>
+
+  {:else if variant === 'segmented'}
+    <div class="smrt-theme-switcher__segmented" role="radiogroup">
+      {#each options as option}
+        <button
+          class="smrt-theme-switcher__segment"
+          class:active={context.state.preset === option.value}
+          onclick={() => handlePresetClick(option.value)}
+          type="button"
+          role="radio"
+          aria-checked={context.state.preset === option.value}
+        >
+          {#if showIcons}
+            <span class="smrt-theme-switcher__icon">{themeIcons[option.value]}</span>
+          {/if}
+          <span class="smrt-theme-switcher__text">{option.label}</span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .smrt-theme-switcher {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .smrt-theme-switcher__label {
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-body-medium-weight, 400);
+    color: var(--smrt-color-on-surface-variant, inherit);
+  }
+
+  .smrt-theme-switcher__select {
+    padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    border: 1px solid var(--smrt-color-outline, #ccc);
+    background: var(--smrt-color-surface, white);
+    color: var(--smrt-color-on-surface, inherit);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+  }
+
+  .smrt-theme-switcher__buttons {
+    display: flex;
+    gap: var(--smrt-spacing-1, 0.25rem);
+  }
+
+  .smrt-theme-switcher__button {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    border: 1px solid var(--smrt-color-outline, #ccc);
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    background: var(--smrt-color-surface-container-low, #f5f5f5);
+    color: var(--smrt-color-on-surface, inherit);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    transition: all 200ms ease;
+  }
+
+  .smrt-theme-switcher__button:hover {
+    background: var(--smrt-color-surface-container, #eee);
+  }
+
+  .smrt-theme-switcher__button.active {
+    background: var(--smrt-color-primary-container, #e3f2fd);
+    color: var(--smrt-color-on-primary-container, #1565c0);
+    border-color: var(--smrt-color-primary, #2196f3);
+  }
+
+  .smrt-theme-switcher__segmented {
+    display: inline-flex;
+    background: var(--smrt-color-surface-container-lowest, #fafafa);
+    border: 1px solid var(--smrt-color-outline, #ccc);
+    border-radius: var(--smrt-radius-lg, 0.75rem);
+    padding: var(--smrt-spacing-0_5, 0.125rem);
+  }
+
+  .smrt-theme-switcher__segment {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    border: none;
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #666);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    cursor: pointer;
+    transition: all 200ms ease;
+  }
+
+  .smrt-theme-switcher__segment:hover {
+    color: var(--smrt-color-on-surface, inherit);
+  }
+
+  .smrt-theme-switcher__segment.active {
+    background: var(--smrt-color-surface, white);
+    color: var(--smrt-color-on-surface, inherit);
+    box-shadow: var(--smrt-elevation-1, 0 1px 2px rgba(0,0,0,0.1));
+  }
+
+  .smrt-theme-switcher__icon {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+  }
+</style>

package/dist/themes/components/ThemeSwitcher.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Custom label text */
+    label?: string;
+    /** Show icons for each theme */
+    showIcons?: boolean;
+    /** Button variant: 'select' | 'buttons' | 'segmented' */
+    variant?: 'select' | 'buttons' | 'segmented';
+    /** Additional CSS class */
+    class?: string;
+}
+declare const ThemeSwitcher: import("svelte").Component<Props, {}, "">;
+type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
+export default ThemeSwitcher;
+//# sourceMappingURL=ThemeSwitcher.svelte.d.ts.map

package/dist/themes/components/ThemeSwitcher.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/themes/components/ThemeSwitcher.svelte.ts"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACb,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+ED,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/themes/components/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Theme Components
+ *
+ * UI components for theme selection and configuration.
+ */
+export { default as ColorSchemeToggle } from './ColorSchemeToggle.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/themes/components/index.js

@@ -0,0 +1,7 @@
+/**
+ * Theme Components
+ *
+ * UI components for theme selection and configuration.
+ */
+export { default as ColorSchemeToggle } from './ColorSchemeToggle.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/themes/context.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Theme Context
+ *
+ * Svelte 5 runes-based context for theme state management.
+ * Provides reactive theme state and methods to all child components.
+ */
+import type { ColorScheme, ThemeConfig, ThemeContext, ThemePreset } from './types.js';
+/**
+ * Set the theme context in the component tree
+ * @param context - Theme context object
+ */
+export declare function setThemeContext(context: ThemeContext): void;
+/**
+ * Get the theme context from the component tree
+ * @returns Theme context
+ * @throws Error if called outside of ThemeProvider
+ */
+export declare function getThemeContext(): ThemeContext;
+/**
+ * Try to get the theme context without throwing
+ * @returns Theme context or null if not available
+ */
+export declare function tryGetThemeContext(): ThemeContext | null;
+/**
+ * Check if theme context is available
+ * @returns True if inside ThemeProvider
+ */
+export declare function hasThemeContext(): boolean;
+export type { ThemeContext, ThemePreset, ColorScheme, ThemeConfig };
+//# sourceMappingURL=context.svelte.d.ts.map

package/dist/themes/context.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.svelte.d.ts","sourceRoot":"","sources":["../../src/themes/context.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACZ,MAAM,YAAY,CAAC;AAKpB;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAE3D;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAU9C;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,YAAY,GAAG,IAAI,CAExD;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,OAAO,CAEzC;AAGD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC"}

package/dist/themes/context.svelte.js

@@ -0,0 +1,42 @@
+/**
+ * Theme Context
+ *
+ * Svelte 5 runes-based context for theme state management.
+ * Provides reactive theme state and methods to all child components.
+ */
+import { getContext, setContext } from 'svelte';
+/** Context key symbol */
+const THEME_CONTEXT_KEY = Symbol('smrt-theme-context');
+/**
+ * Set the theme context in the component tree
+ * @param context - Theme context object
+ */
+export function setThemeContext(context) {
+    setContext(THEME_CONTEXT_KEY, context);
+}
+/**
+ * Get the theme context from the component tree
+ * @returns Theme context
+ * @throws Error if called outside of ThemeProvider
+ */
+export function getThemeContext() {
+    const context = getContext(THEME_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Theme context not found. Make sure to wrap your app with <ThemeProvider> from @smrt/svelte/themes');
+    }
+    return context;
+}
+/**
+ * Try to get the theme context without throwing
+ * @returns Theme context or null if not available
+ */
+export function tryGetThemeContext() {
+    return getContext(THEME_CONTEXT_KEY) ?? null;
+}
+/**
+ * Check if theme context is available
+ * @returns True if inside ThemeProvider
+ */
+export function hasThemeContext() {
+    return !!tryGetThemeContext();
+}

package/dist/themes/create-theme.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Create Theme Utilities
+ *
+ * Helper functions for creating custom themes that match the SMRT theme system.
+ */
+import type { ColorPalette, EasingScale, ElevationScale, GlassEffects, Theme, ThemePreset, TypographyScale } from './types.js';
+/**
+ * Options for creating a custom theme
+ */
+export interface CreateThemeOptions {
+    /** Theme identifier (must be unique) */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Light mode color palette */
+    light: Partial<ColorPalette> & Pick<ColorPalette, 'primary' | 'background'>;
+    /** Dark mode color palette (optional, will be auto-generated if not provided) */
+    dark?: Partial<ColorPalette>;
+    /** Typography scale (optional, defaults to Material) */
+    typography?: Partial<TypographyScale>;
+    /** Elevation shadows (optional) */
+    elevation?: Partial<ElevationScale>;
+    /** Custom easing curves (optional) */
+    easing?: Partial<EasingScale>;
+    /** Glass effects (optional) */
+    glass?: GlassEffects;
+    /** Font family */
+    fontFamily?: string;
+    /** Base theme to extend (copies all tokens as starting point) */
+    extend?: ThemePreset;
+}
+/**
+ * Create a custom theme
+ *
+ * @example
+ * ```typescript
+ * import { createTheme, registerTheme } from '@happyvertical/smrt-ui/themes';
+ *
+ * const myTheme = createTheme({
+ *   id: 'brand',
+ *   name: 'Brand Theme',
+ *   light: {
+ *     primary: '#ff6b35',
+ *     background: '#fafafa',
+ *     surface: '#ffffff',
+ *   },
+ *   dark: {
+ *     primary: '#ff8c5a',
+ *     background: '#0a0a0a',
+ *     surface: '#1a1a1a',
+ *   },
+ *   fontFamily: 'Inter, sans-serif',
+ * });
+ *
+ * registerTheme(myTheme);
+ * ```
+ */
+export declare function createTheme(options: CreateThemeOptions): Theme;
+/**
+ * Preload the theme registry for extension support
+ * Call this before createTheme if using the extend option
+ */
+export declare function preloadThemeRegistry(): Promise<void>;
+/**
+ * Register a custom theme for use with ThemeProvider
+ *
+ * @example
+ * ```typescript
+ * import { createTheme, registerTheme } from '@happyvertical/smrt-ui/themes';
+ *
+ * const customTheme = createTheme({ id: 'brand', name: 'Brand', ... });
+ * registerTheme(customTheme);
+ *
+ * // Now use in your app
+ * <ThemeProvider preset="brand" />
+ * ```
+ */
+export declare function registerTheme(theme: Theme): void;
+/**
+ * Get a registered custom theme
+ */
+export declare function getRegisteredTheme(_id: string): Theme | undefined;
+/**
+ * Check if a theme is registered
+ * Note: This is async due to ESM dynamic import requirements
+ */
+export declare function isThemeRegistered(id: string): Promise<boolean>;
+/**
+ * Create a simple theme from just a primary color
+ * Auto-generates all other colors
+ *
+ * @example
+ * ```typescript
+ * const brandTheme = createThemeFromColor('#ff6b35', 'brand', 'Brand Theme');
+ * registerTheme(brandTheme);
+ * ```
+ */
+export declare function createThemeFromColor(primaryColor: string, id: string, name: string, options?: Omit<CreateThemeOptions, 'id' | 'name' | 'light'>): Theme;
+//# sourceMappingURL=create-theme.d.ts.map

package/dist/themes/create-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../../src/themes/create-theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,EACL,WAAW,EACX,eAAe,EAChB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;IAC5E,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7B,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACtC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAsPD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,KAAK,CAkD9D;AAkBD;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAG1D;AAgBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAEhD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAIjE;AAED;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,MAAM,EACpB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,GAC1D,KAAK,CAWP"}