@miozu/jera 0.8.1 → 0.8.2

package/CLAUDE.md

@@ -58,13 +58,28 @@ Singleton pattern with `miozu-theme` storage key.
 
 **Full reference:** `docs/ai-context/theme-management.md`
 
+**ThemeToggle:** Accessible toggle with animated sun/moon icons
 ```svelte
-<!-- +layout.svelte -->
-<script>
-  import { getTheme } from '@miozu/jera';
-  const themeState = getTheme();
-  onMount(() => { themeState.sync(); themeState.init(); });
-</script>
+import { ThemeToggle } from '@miozu/jera';
+<ThemeToggle />
+<ThemeToggle size="sm" variant="outline" />
+```
+
+**ThemeSelect:** Three-option selector (light/dark/system)
+```svelte
+import { ThemeSelect } from '@miozu/jera';
+<ThemeSelect />
+<ThemeSelect variant="dropdown" />
+```
+
+**ThemeState API:**
+```javascript
+import { getTheme } from '@miozu/jera';
+const theme = getTheme();
+theme.init();        // Call once in root onMount
+theme.toggle();      // Switch dark/light
+theme.set('system'); // Follow OS preference
+theme.isDark;        // boolean reactive property
 ```
 
 ## Svelte 5 Patterns

package/README.md

@@ -176,23 +176,68 @@ button({ variant: 'secondary' }); // => "inline-flex items-center bg-surface h-1
 
 Dark theme is default. Uses singleton pattern with `miozu-theme` storage key.
 
-```javascript
-// In root +layout.svelte
-import { getTheme } from '@miozu/jera';
-import { onMount } from 'svelte';
+### Setup
 
-const theme = getTheme();
-onMount(() => theme.init());
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { getTheme } from '@miozu/jera';
+  import { onMount } from 'svelte';
+
+  const theme = getTheme();
+  onMount(() => theme.init());
+</script>
+```
+
+### ThemeToggle
+
+Accessible toggle button with animated sun/moon icons.
+
+```svelte
+<script>
+  import { ThemeToggle } from '@miozu/jera';
+</script>
+
+<ThemeToggle />
+<ThemeToggle size="sm" variant="outline" />
+<ThemeToggle size="lg" variant="subtle" />
+```
+
+Props: `size` (sm|md|lg), `variant` (ghost|outline|subtle), `themeState` (optional)
+
+### ThemeSelect
+
+Three-option selector for light/dark/system preference.
+
+```svelte
+<script>
+  import { ThemeSelect } from '@miozu/jera';
+</script>
+
+<!-- Segmented control (default) -->
+<ThemeSelect />
+
+<!-- Dropdown -->
+<ThemeSelect variant="dropdown" />
+
+<!-- Custom labels -->
+<ThemeSelect labels={{ light: 'Light', dark: 'Dark', system: 'Auto' }} />
 ```
 
+Props: `variant` (segmented|dropdown), `size` (sm|md|lg), `labels`, `showIcons`
+
+### ThemeState API
+
 ```javascript
-// Anywhere in your app
 import { getTheme } from '@miozu/jera';
 
 const theme = getTheme();
 theme.toggle();        // Switch between light/dark
 theme.set('system');   // Follow system preference
-theme.isDark;          // boolean reactive property
+theme.isDark;          // boolean - resolved dark mode
+theme.isLight;         // boolean - resolved light mode
+theme.current;         // 'light' | 'dark' | 'system'
+theme.dataTheme;       // 'miozu-light' | 'miozu-dark'
 ```
 
 Data-theme values: `miozu-dark` (default) or `miozu-light`.

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@miozu/jera",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
+  "scripts": {
+    "prepublishOnly": "echo 'Publishing @miozu/jera...' && test -f src/index.js"
+  },
   "svelte": "./src/index.js",
   "exports": {
     ".": {
@@ -55,6 +58,5 @@
   "bugs": {
     "url": "https://github.com/miozu-com/jera/issues"
   },
-  "dependencies": {},
-  "scripts": {}
-}
+  "dependencies": {}
+}

package/src/components/primitives/ThemeSelect.svelte

@@ -0,0 +1,260 @@
+<!--
+  @component ThemeSelect
+
+  A dropdown/segmented selector for theme preference with light/dark/system options.
+  Uses the Jera ThemeState singleton for theme management.
+
+  @example Basic dropdown
+  <ThemeSelect />
+
+  @example Segmented control style
+  <ThemeSelect variant="segmented" />
+
+  @example With custom theme state
+  <ThemeSelect themeState={myThemeState} />
+
+  @example Custom labels
+  <ThemeSelect
+    labels={{ light: 'Light', dark: 'Dark', system: 'Auto' }}
+  />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { getTheme, generateId } from '../../utils/reactive.svelte.js';
+
+  let {
+    themeState,
+    variant = 'segmented',
+    size = 'md',
+    labels = { light: 'Light', dark: 'Dark', system: 'System' },
+    showIcons = true,
+    class: className = '',
+    ...rest
+  } = $props();
+
+  // Use provided themeState or fall back to singleton
+  const theme = themeState ?? getTheme();
+  const groupId = generateId();
+
+  // Current preference (not resolved)
+  const current = $derived(theme.current);
+
+  // Size mappings
+  const sizes = {
+    sm: { wrapper: 'theme-select-sm', icon: 14 },
+    md: { wrapper: 'theme-select-md', icon: 16 },
+    lg: { wrapper: 'theme-select-lg', icon: 18 }
+  };
+
+  const currentSize = $derived(sizes[size] || sizes.md);
+
+  const options = [
+    { value: 'light', label: labels.light, icon: 'sun' },
+    { value: 'dark', label: labels.dark, icon: 'moon' },
+    { value: 'system', label: labels.system, icon: 'monitor' }
+  ];
+
+  function handleChange(value) {
+    theme.set(value);
+  }
+</script>
+
+{#if variant === 'segmented'}
+  <div
+    class={cn('theme-select-segmented', currentSize.wrapper, className)}
+    role="radiogroup"
+    aria-label="Theme preference"
+    {...rest}
+  >
+    {#each options as option (option.value)}
+      {@const isActive = current === option.value}
+      <button
+        type="button"
+        role="radio"
+        aria-checked={isActive}
+        class={cn('theme-select-option', isActive && 'theme-select-option-active')}
+        onclick={() => handleChange(option.value)}
+      >
+        {#if showIcons}
+          <span class="theme-select-icon" aria-hidden="true">
+            {#if option.icon === 'sun'}
+              <svg width={currentSize.icon} height={currentSize.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="4" />
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+              </svg>
+            {:else if option.icon === 'moon'}
+              <svg width={currentSize.icon} height={currentSize.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+              </svg>
+            {:else if option.icon === 'monitor'}
+              <svg width={currentSize.icon} height={currentSize.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="20" height="14" x="2" y="3" rx="2" />
+                <line x1="8" x2="16" y1="21" y2="21" />
+                <line x1="12" x2="12" y1="17" y2="21" />
+              </svg>
+            {/if}
+          </span>
+        {/if}
+        <span class="theme-select-label">{option.label}</span>
+      </button>
+    {/each}
+  </div>
+{:else}
+  <!-- Dropdown variant -->
+  <div class={cn('theme-select-dropdown', currentSize.wrapper, className)} {...rest}>
+    <select
+      id={groupId}
+      value={current}
+      onchange={(e) => handleChange(e.target.value)}
+      aria-label="Theme preference"
+      class="theme-select-native"
+    >
+      {#each options as option (option.value)}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+    <span class="theme-select-dropdown-icon" aria-hidden="true">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </span>
+  </div>
+{/if}
+
+<style>
+  /* ============================================
+     SEGMENTED CONTROL
+     ============================================ */
+  .theme-select-segmented {
+    display: inline-flex;
+    align-items: center;
+    background-color: var(--color-base01, #282828);
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 2px;
+    gap: 2px;
+  }
+
+  .theme-select-option {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1, 0.25rem);
+    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+    border: none;
+    border-radius: calc(var(--radius-md, 0.375rem) - 2px);
+    background-color: transparent;
+    color: var(--color-base04, #665c54);
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      color var(--duration-fast, 150ms) var(--ease-out, ease-out);
+  }
+
+  .theme-select-option:hover:not(.theme-select-option-active) {
+    color: var(--color-base05, #a89984);
+  }
+
+  .theme-select-option:focus-visible {
+    outline: 2px solid var(--color-base0D, #83a598);
+    outline-offset: -2px;
+  }
+
+  .theme-select-option-active {
+    background-color: var(--color-base02, #3c3836);
+    color: var(--color-base06, #d5c4a1);
+    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.1));
+  }
+
+  .theme-select-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .theme-select-label {
+    white-space: nowrap;
+  }
+
+  /* ============================================
+     SIZES - SEGMENTED
+     ============================================ */
+  .theme-select-sm .theme-select-option {
+    padding: 2px var(--space-2, 0.5rem);
+    font-size: var(--text-xs, 0.75rem);
+  }
+
+  .theme-select-md .theme-select-option {
+    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+    font-size: var(--text-sm, 0.875rem);
+  }
+
+  .theme-select-lg .theme-select-option {
+    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
+    font-size: var(--text-base, 1rem);
+  }
+
+  /* ============================================
+     DROPDOWN
+     ============================================ */
+  .theme-select-dropdown {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .theme-select-native {
+    appearance: none;
+    background-color: var(--color-base01, #282828);
+    border: 1px solid var(--color-base03, #504945);
+    border-radius: var(--radius-md, 0.375rem);
+    color: var(--color-base06, #d5c4a1);
+    font-size: var(--text-sm, 0.875rem);
+    padding: var(--space-2, 0.5rem) var(--space-8, 2rem) var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    cursor: pointer;
+    transition:
+      border-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
+      background-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
+  }
+
+  .theme-select-native:hover {
+    border-color: var(--color-base04, #665c54);
+  }
+
+  .theme-select-native:focus {
+    outline: none;
+    border-color: var(--color-base0D, #83a598);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-base0D, #83a598) 20%, transparent);
+  }
+
+  .theme-select-dropdown-icon {
+    position: absolute;
+    right: var(--space-2, 0.5rem);
+    pointer-events: none;
+    color: var(--color-base04, #665c54);
+  }
+
+  /* ============================================
+     SIZES - DROPDOWN
+     ============================================ */
+  .theme-select-dropdown.theme-select-sm .theme-select-native {
+    padding: var(--space-1, 0.25rem) var(--space-6, 1.5rem) var(--space-1, 0.25rem) var(--space-2, 0.5rem);
+    font-size: var(--text-xs, 0.75rem);
+  }
+
+  .theme-select-dropdown.theme-select-lg .theme-select-native {
+    padding: var(--space-3, 0.75rem) var(--space-10, 2.5rem) var(--space-3, 0.75rem) var(--space-4, 1rem);
+    font-size: var(--text-base, 1rem);
+  }
+
+  /* ============================================
+     REDUCED MOTION
+     ============================================ */
+  @media (prefers-reduced-motion: reduce) {
+    .theme-select-option,
+    .theme-select-native {
+      transition: none;
+    }
+  }
+</style>

package/src/components/primitives/ThemeToggle.svelte

@@ -0,0 +1,263 @@
+<!--
+  @component ThemeToggle
+
+  An accessible theme toggle button with animated sun/moon icons.
+  Uses the Jera ThemeState singleton for theme management.
+
+  @example Basic usage
+  <ThemeToggle />
+
+  @example With custom theme state
+  <ThemeToggle themeState={myThemeState} />
+
+  @example Different sizes
+  <ThemeToggle size="sm" />
+  <ThemeToggle size="lg" />
+
+  @example With label
+  <ThemeToggle>
+    {#snippet label()}Dark mode{/snippet}
+  </ThemeToggle>
+
+  @example Custom icons via snippets
+  <ThemeToggle>
+    {#snippet sunIcon()}<MyCustomSun />{/snippet}
+    {#snippet moonIcon()}<MyCustomMoon />{/snippet}
+  </ThemeToggle>
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { getTheme } from '../../utils/reactive.svelte.js';
+
+  let {
+    themeState,
+    size = 'md',
+    variant = 'ghost',
+    class: className = '',
+    sunIcon,
+    moonIcon,
+    label,
+    ...rest
+  } = $props();
+
+  // Use provided themeState or fall back to singleton
+  const theme = themeState ?? getTheme();
+
+  // Derive current state
+  const isDark = $derived(theme.isDark);
+
+  // Size mappings
+  const sizes = {
+    sm: { button: 'theme-toggle-sm', icon: 16 },
+    md: { button: 'theme-toggle-md', icon: 20 },
+    lg: { button: 'theme-toggle-lg', icon: 24 }
+  };
+
+  const currentSize = $derived(sizes[size] || sizes.md);
+
+  function handleToggle() {
+    theme.toggle();
+  }
+</script>
+
+<button
+  type="button"
+  onclick={handleToggle}
+  aria-pressed={isDark}
+  aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+  class={cn('theme-toggle', `theme-toggle-${variant}`, currentSize.button, className)}
+  {...rest}
+>
+  <span class="theme-toggle-icon-wrapper">
+    <!-- Sun icon (visible in dark mode, click to switch to light) -->
+    <span class={cn('theme-toggle-icon', 'theme-toggle-sun', isDark && 'theme-toggle-icon-active')}>
+      {#if sunIcon}
+        {@render sunIcon()}
+      {:else}
+        <svg
+          width={currentSize.icon}
+          height={currentSize.icon}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+      {/if}
+    </span>
+
+    <!-- Moon icon (visible in light mode, click to switch to dark) -->
+    <span class={cn('theme-toggle-icon', 'theme-toggle-moon', !isDark && 'theme-toggle-icon-active')}>
+      {#if moonIcon}
+        {@render moonIcon()}
+      {:else}
+        <svg
+          width={currentSize.icon}
+          height={currentSize.icon}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      {/if}
+    </span>
+  </span>
+
+  {#if label}
+    <span class="theme-toggle-label">
+      {@render label()}
+    </span>
+  {/if}
+</button>
+
+<style>
+  /* ============================================
+     BASE STYLES
+     ============================================ */
+  .theme-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2, 0.5rem);
+    border: none;
+    border-radius: var(--radius-md, 0.375rem);
+    cursor: pointer;
+    transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
+  }
+
+  .theme-toggle:focus-visible {
+    outline: 2px solid var(--color-base0D, #83a598);
+    outline-offset: 2px;
+  }
+
+  /* ============================================
+     VARIANTS
+     ============================================ */
+  .theme-toggle-ghost {
+    background-color: transparent;
+    color: var(--color-base05, #a89984);
+  }
+
+  .theme-toggle-ghost:hover {
+    background-color: var(--color-base02, #3c3836);
+    color: var(--color-base06, #d5c4a1);
+  }
+
+  .theme-toggle-outline {
+    background-color: transparent;
+    color: var(--color-base05, #a89984);
+    border: 1px solid var(--color-base03, #504945);
+  }
+
+  .theme-toggle-outline:hover {
+    background-color: var(--color-base02, #3c3836);
+    border-color: var(--color-base04, #665c54);
+    color: var(--color-base06, #d5c4a1);
+  }
+
+  .theme-toggle-subtle {
+    background-color: var(--color-base01, #282828);
+    color: var(--color-base05, #a89984);
+  }
+
+  .theme-toggle-subtle:hover {
+    background-color: var(--color-base02, #3c3836);
+    color: var(--color-base06, #d5c4a1);
+  }
+
+  /* ============================================
+     SIZES
+     ============================================ */
+  .theme-toggle-sm {
+    padding: var(--space-1, 0.25rem);
+    min-width: 1.75rem;
+    min-height: 1.75rem;
+  }
+
+  .theme-toggle-md {
+    padding: var(--space-2, 0.5rem);
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+  }
+
+  .theme-toggle-lg {
+    padding: var(--space-3, 0.75rem);
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+  }
+
+  /* ============================================
+     ICON ANIMATION
+     ============================================ */
+  .theme-toggle-icon-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .theme-toggle-icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.5);
+    transition:
+      opacity var(--duration-normal, 200ms) var(--ease-out, ease-out),
+      transform var(--duration-normal, 200ms) var(--ease-out, ease-out);
+  }
+
+  .theme-toggle-icon-active {
+    position: relative;
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+
+  /* Sun specific - warm color when active */
+  .theme-toggle-sun.theme-toggle-icon-active {
+    color: var(--color-base0A, #fabd2f);
+  }
+
+  /* Moon specific - cool color when active */
+  .theme-toggle-moon.theme-toggle-icon-active {
+    color: var(--color-base0D, #83a598);
+  }
+
+  /* ============================================
+     REDUCED MOTION
+     ============================================ */
+  @media (prefers-reduced-motion: reduce) {
+    .theme-toggle-icon {
+      transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out);
+      transform: none;
+    }
+
+    .theme-toggle-icon-active {
+      transform: none;
+    }
+  }
+
+  /* ============================================
+     LABEL
+     ============================================ */
+  .theme-toggle-label {
+    font-size: var(--text-sm, 0.875rem);
+    color: var(--color-base05, #a89984);
+  }
+
+  .theme-toggle:hover .theme-toggle-label {
+    color: var(--color-base06, #d5c4a1);
+  }
+</style>

package/src/index.js

@@ -40,6 +40,8 @@ export { default as FilterChip } from './components/primitives/FilterChip.svelte
 export { default as StatusLine } from './components/primitives/StatusLine.svelte';
 export { default as Tooltip } from './components/primitives/Tooltip.svelte';
 export { default as MemberCard } from './components/primitives/MemberCard.svelte';
+export { default as ThemeToggle } from './components/primitives/ThemeToggle.svelte';
+export { default as ThemeSelect } from './components/primitives/ThemeSelect.svelte';
 
 // ============================================
 // COMPONENTS - Forms