@miozu/jera 0.0.2 → 0.3.0

package/src/components/forms/Select.svelte

@@ -0,0 +1,326 @@
+<!--
+  @component Select
+
+  An accessible dropdown select component with keyboard navigation.
+  Demonstrates advanced Svelte 5 patterns:
+
+  - $state for local UI state
+  - $derived for computed values
+  - $effect for side effects with cleanup
+  - $bindable for two-way value binding
+  - Actions for click-outside behavior
+  - Keyboard navigation (ArrowUp/Down, Enter, Escape)
+  - ARIA attributes for accessibility
+
+  @example
+  <Select
+    options={[
+      { value: 'opt1', label: 'Option 1' },
+      { value: 'opt2', label: 'Option 2' }
+    ]}
+    bind:value={selected}
+    placeholder="Select an option"
+  />
+
+  // With custom keys
+  <Select
+    options={users}
+    bind:value={selectedUserId}
+    labelKey="name"
+    valueKey="id"
+  />
+-->
+<script>
+  import { cn, cv } from '../../utils/cn.svelte.js';
+  import { clickOutside } from '../../actions/index.js';
+  import { generateId } from '../../utils/reactive.svelte.js';
+
+  /**
+   * @typedef {{ [key: string]: any }} Option
+   */
+
+  let {
+    options = [],
+    value = $bindable(null),
+    placeholder = 'Select...',
+    labelKey = 'label',
+    valueKey = 'value',
+    disabled = false,
+    error = false,
+    class: className = '',
+    onchange
+  } = $props();
+
+  // Generate unique IDs for accessibility
+  const triggerId = generateId();
+  const listboxId = generateId();
+
+  // Local state
+  let isOpen = $state(false);
+  let highlightedIndex = $state(-1);
+  let triggerRef = $state(null);
+  let listRef = $state(null);
+
+  // Derived values
+  const selectedOption = $derived(
+    options.find(opt => opt[valueKey] === value) ?? null
+  );
+
+  const selectedLabel = $derived(
+    selectedOption ? selectedOption[labelKey] : placeholder
+  );
+
+  const hasValue = $derived(value !== null && value !== undefined);
+
+  // Keyboard navigation effect
+  $effect(() => {
+    if (!isOpen) {
+      highlightedIndex = -1;
+      return;
+    }
+
+    // Focus the listbox when opened
+    listRef?.focus();
+
+    // Set initial highlight to selected option
+    const selectedIdx = options.findIndex(opt => opt[valueKey] === value);
+    highlightedIndex = selectedIdx >= 0 ? selectedIdx : 0;
+  });
+
+  // Scroll highlighted option into view
+  $effect(() => {
+    if (!isOpen || highlightedIndex < 0) return;
+
+    const listbox = listRef;
+    const highlighted = listbox?.querySelector(`[data-index="${highlightedIndex}"]`);
+    highlighted?.scrollIntoView({ block: 'nearest' });
+  });
+
+  // Handlers
+  function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+  }
+
+  function close() {
+    isOpen = false;
+  }
+
+  function select(option) {
+    value = option[valueKey];
+    onchange?.(option);
+    close();
+    triggerRef?.focus();
+  }
+
+  function handleKeydown(event) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!isOpen) {
+          isOpen = true;
+        } else {
+          highlightedIndex = Math.min(highlightedIndex + 1, options.length - 1);
+        }
+        break;
+
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!isOpen) {
+          isOpen = true;
+        } else {
+          highlightedIndex = Math.max(highlightedIndex - 1, 0);
+        }
+        break;
+
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (isOpen && highlightedIndex >= 0) {
+          select(options[highlightedIndex]);
+        } else {
+          toggle();
+        }
+        break;
+
+      case 'Escape':
+        event.preventDefault();
+        close();
+        triggerRef?.focus();
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        highlightedIndex = 0;
+        break;
+
+      case 'End':
+        event.preventDefault();
+        highlightedIndex = options.length - 1;
+        break;
+
+      case 'Tab':
+        close();
+        break;
+    }
+  }
+
+  // Styles
+  const triggerStyles = cv({
+    base: [
+      'relative w-full flex items-center justify-between gap-2',
+      'h-10 px-3 rounded-lg border',
+      'text-sm text-left',
+      'transition-colors duration-150',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+      'disabled:opacity-50 disabled:cursor-not-allowed'
+    ].join(' '),
+
+    variants: {
+      error: {
+        true: 'border-error focus-visible:ring-error/50',
+        false: 'border-border hover:border-muted focus-visible:ring-primary/50'
+      },
+      open: {
+        true: 'border-primary ring-2 ring-primary/20',
+        false: ''
+      },
+      hasValue: {
+        true: 'text-text-strong',
+        false: 'text-muted'
+      }
+    },
+
+    defaults: {
+      error: false,
+      open: false,
+      hasValue: false
+    }
+  });
+</script>
+
+<div
+  class={cn('relative', className)}
+  use:clickOutside={close}
+>
+  <!-- Trigger Button -->
+  <button
+    bind:this={triggerRef}
+    id={triggerId}
+    type="button"
+    class={triggerStyles({ error, open: isOpen, hasValue })}
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-controls={listboxId}
+    aria-invalid={error || undefined}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="truncate flex-1">
+      {selectedLabel}
+    </span>
+
+    <!-- Chevron Icon -->
+    <svg
+      class={cn(
+        'w-4 h-4 shrink-0 text-muted transition-transform duration-200',
+        isOpen && 'rotate-180'
+      )}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </button>
+
+  <!-- Dropdown Listbox -->
+  {#if isOpen}
+    <div
+      bind:this={listRef}
+      id={listboxId}
+      role="listbox"
+      tabindex="-1"
+      aria-labelledby={triggerId}
+      aria-activedescendant={highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined}
+      class={cn(
+        'absolute z-50 w-full mt-1',
+        'max-h-60 overflow-auto',
+        'bg-surface border border-border rounded-lg shadow-lg',
+        'py-1',
+        'animate-in fade-in slide-in-from-top-2 duration-150'
+      )}
+      onkeydown={handleKeydown}
+    >
+      {#if options.length === 0}
+        <div class="px-3 py-2 text-sm text-muted text-center">
+          No options available
+        </div>
+      {:else}
+        {#each options as option, index (option[valueKey])}
+          {@const isSelected = option[valueKey] === value}
+          {@const isHighlighted = index === highlightedIndex}
+
+          <button
+            id="{listboxId}-option-{index}"
+            type="button"
+            role="option"
+            data-index={index}
+            aria-selected={isSelected}
+            class={cn(
+              'w-full flex items-center gap-2 px-3 py-2',
+              'text-sm text-left',
+              'transition-colors duration-75',
+              'focus:outline-none',
+              isHighlighted && 'bg-hover',
+              isSelected && 'text-primary font-medium',
+              !isSelected && 'text-text'
+            )}
+            onclick={() => select(option)}
+            onmouseenter={() => highlightedIndex = index}
+          >
+            <!-- Check Icon for Selected -->
+            <span class={cn('w-4 h-4 shrink-0', !isSelected && 'invisible')}>
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            </span>
+
+            <span class="truncate flex-1">
+              {option[labelKey]}
+            </span>
+          </button>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slide-in-from-top-2 {
+    from { transform: translateY(-0.5rem); }
+    to { transform: translateY(0); }
+  }
+
+  .animate-in {
+    animation: fade-in 150ms ease-out, slide-in-from-top-2 150ms ease-out;
+  }
+</style>

package/src/components/forms/Switch.svelte

@@ -0,0 +1,159 @@
+<!--
+  @component Switch
+
+  An accessible toggle switch for boolean values.
+
+  @example
+  <Switch bind:checked={enabled}>Enable notifications</Switch>
+
+  @example
+  <Switch bind:checked={darkMode} size="lg" />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { generateId } from '../../utils/reactive.svelte.js';
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    name = '',
+    id,
+    class: className = '',
+    children,
+    onchange,
+    ...rest
+  } = $props();
+
+  const inputId = id || generateId();
+
+  // Size classes map to CSS classes defined below
+  const sizeClass = $derived(`switch-${size}`);
+</script>
+
+<label
+  class={cn('switch-wrapper', disabled && 'switch-disabled', className)}
+  for={inputId}
+>
+  <input
+    type="checkbox"
+    role="switch"
+    id={inputId}
+    {name}
+    {disabled}
+    bind:checked
+    {onchange}
+    class="switch-input"
+    aria-checked={checked}
+    {...rest}
+  />
+
+  <span class={cn('switch-track', sizeClass, checked && 'switch-track-checked')}>
+    <span class={cn('switch-thumb', checked && 'switch-thumb-checked')} />
+  </span>
+
+  {#if children}
+    <span class="switch-label">
+      {@render children()}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .switch-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .switch-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .switch-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .switch-track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--radius-full);
+    background-color: var(--color-border);
+    transition: var(--transition-colors);
+  }
+
+  .switch-track-checked {
+    background-color: var(--color-primary);
+  }
+
+  .switch-input:focus-visible + .switch-track {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .switch-thumb {
+    position: absolute;
+    left: 2px;
+    border-radius: var(--radius-full);
+    background-color: white;
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--duration-fast) var(--ease-out);
+  }
+
+  .switch-label {
+    font-size: var(--text-sm);
+    color: var(--color-text);
+  }
+
+  /* Size variants - Small */
+  .switch-sm {
+    width: 2rem;
+    height: 1rem;
+  }
+  .switch-sm .switch-thumb {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .switch-sm .switch-thumb-checked {
+    transform: translateX(1rem);
+  }
+
+  /* Size variants - Medium (default) */
+  .switch-md {
+    width: 2.5rem;
+    height: 1.25rem;
+  }
+  .switch-md .switch-thumb {
+    width: 1rem;
+    height: 1rem;
+  }
+  .switch-md .switch-thumb-checked {
+    transform: translateX(1.25rem);
+  }
+
+  /* Size variants - Large */
+  .switch-lg {
+    width: 3rem;
+    height: 1.5rem;
+  }
+  .switch-lg .switch-thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .switch-lg .switch-thumb-checked {
+    transform: translateX(1.5rem);
+  }
+</style>

package/src/components/forms/Textarea.svelte

@@ -0,0 +1,122 @@
+<!--
+  @component Textarea
+
+  A multi-line text input component.
+
+  @example
+  <Textarea bind:value={description} placeholder="Enter description" rows={4} />
+
+  @example
+  // Auto-resize based on content
+  <Textarea bind:value={notes} autoResize />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    value = $bindable(''),
+    ref = $bindable(),
+    placeholder = '',
+    disabled = false,
+    required = false,
+    name = '',
+    id = '',
+    rows = 3,
+    maxlength,
+    minlength,
+    autoResize = false,
+    class: className = '',
+    unstyled = false,
+    error = false,
+    oninput,
+    onchange,
+    onkeydown,
+    onfocus,
+    onblur,
+    ...rest
+  } = $props();
+
+  const textareaClass = $derived(
+    unstyled ? className : cn(
+      'textarea-base',
+      autoResize && 'textarea-auto-resize',
+      error && 'textarea-error',
+      className
+    )
+  );
+
+  function handleInput(e) {
+    if (autoResize && ref) {
+      ref.style.height = 'auto';
+      ref.style.height = ref.scrollHeight + 'px';
+    }
+    oninput?.(e);
+  }
+</script>
+
+<textarea
+  class={textareaClass}
+  bind:this={ref}
+  bind:value
+  {id}
+  {name}
+  {rows}
+  {placeholder}
+  {disabled}
+  {required}
+  {maxlength}
+  {minlength}
+  aria-invalid={error || undefined}
+  oninput={handleInput}
+  {onchange}
+  {onkeydown}
+  {onfocus}
+  {onblur}
+  {...rest}
+></textarea>
+
+<style>
+  .textarea-base {
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    color: var(--color-text-strong);
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-border-muted);
+    border-radius: var(--radius-lg);
+    transition: var(--transition-colors);
+    resize: vertical;
+    font-family: inherit;
+  }
+
+  .textarea-base::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .textarea-base:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  }
+
+  .textarea-base:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  .textarea-auto-resize {
+    resize: none;
+    overflow: hidden;
+  }
+
+  .textarea-error {
+    border-color: var(--color-error);
+  }
+
+  .textarea-error:focus {
+    border-color: var(--color-error);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
+  }
+</style>

package/src/components/navigation/Accordion.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component Accordion
+
+  Collapsible content sections.
+
+  @example Single item
+  <Accordion>
+    <AccordionItem title="Section 1">
+      Content for section 1
+    </AccordionItem>
+    <AccordionItem title="Section 2">
+      Content for section 2
+    </AccordionItem>
+  </Accordion>
+
+  @example Controlled
+  <Accordion bind:expanded={openSections} multiple>
+    ...
+  </Accordion>
+-->
+<script>
+  import { setContext } from 'svelte';
+
+  let {
+    expanded = $bindable([]),
+    multiple = false,
+    children,
+    class: className = ''
+  } = $props();
+
+  function toggle(id) {
+    if (multiple) {
+      if (expanded.includes(id)) {
+        expanded = expanded.filter(i => i !== id);
+      } else {
+        expanded = [...expanded, id];
+      }
+    } else {
+      expanded = expanded.includes(id) ? [] : [id];
+    }
+  }
+
+  function isExpanded(id) {
+    return expanded.includes(id);
+  }
+
+  setContext('accordion', {
+    toggle,
+    isExpanded: (id) => expanded.includes(id)
+  });
+</script>
+
+<div class="accordion {className}">
+  {@render children?.()}
+</div>
+
+<style>
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+</style>