@miozu/jera 0.0.2 → 0.4.2

package/src/components/forms/RangeSlider.svelte

@@ -0,0 +1,212 @@
+<!--
+  @component RangeSlider
+
+  A range slider input for selecting numeric values.
+
+  @example
+  <RangeSlider bind:value={volume} min={0} max={100} />
+
+  @example With label and formatting
+  <RangeSlider
+    bind:value={price}
+    min={0}
+    max={1000}
+    label="Price"
+    formatValue={(v) => `$${v}`}
+  />
+-->
+<script>
+  let {
+    value = $bindable(50),
+    min = 0,
+    max = 100,
+    step = 1,
+    label = '',
+    disabled = false,
+    showValues = true,
+    showCurrentValue = true,
+    formatValue = (val) => val.toString(),
+    size = 'md',
+    class: className = '',
+    id,
+    oninput,
+    onchange,
+    ...rest
+  } = $props();
+
+  const inputId = id || `slider-${Math.random().toString(36).slice(2, 9)}`;
+  const percentage = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<div class="slider-container slider-{size} {className}">
+  {#if label}
+    <label class="slider-label" for={inputId}>{label}</label>
+  {/if}
+
+  <div class="slider-wrapper">
+    <input
+      type="range"
+      id={inputId}
+      bind:value
+      {min}
+      {max}
+      {step}
+      {disabled}
+      class="slider"
+      style="--percentage: {percentage}%"
+      {oninput}
+      {onchange}
+      {...rest}
+    />
+    <div class="slider-track">
+      <div class="slider-fill" style="width: {percentage}%"></div>
+    </div>
+  </div>
+
+  {#if showValues}
+    <div class="slider-values">
+      <span class="slider-min">{formatValue(min)}</span>
+      {#if showCurrentValue}
+        <span class="slider-current">{formatValue(value)}</span>
+      {/if}
+      <span class="slider-max">{formatValue(max)}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .slider-container {
+    width: 100%;
+  }
+
+  .slider-label {
+    display: block;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base05);
+    margin-bottom: var(--space-2);
+  }
+
+  .slider-wrapper {
+    position: relative;
+    width: 100%;
+    height: 0.5rem;
+  }
+
+  .slider-sm .slider-wrapper { height: 0.375rem; }
+  .slider-lg .slider-wrapper { height: 0.625rem; }
+
+  .slider {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    z-index: 10;
+    outline: none;
+  }
+
+  .slider:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .slider-track {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--color-base02);
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+
+  .slider-fill {
+    height: 100%;
+    background: var(--color-base0D);
+    border-radius: 9999px;
+  }
+
+  /* Webkit (Chrome, Safari, Edge) */
+  .slider::-webkit-slider-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 0.375rem;
+    background: var(--color-base00);
+    border: 2px solid var(--color-base0D);
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+    margin-top: -0.375rem;
+  }
+
+  .slider-sm .slider::-webkit-slider-thumb {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.3125rem;
+  }
+
+  .slider-lg .slider::-webkit-slider-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: -0.4375rem;
+  }
+
+  .slider::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .slider:active::-webkit-slider-thumb {
+    transform: scale(0.95);
+  }
+
+  .slider:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-base0D) 30%, transparent);
+  }
+
+  /* Firefox */
+  .slider::-moz-range-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 0.375rem;
+    background: var(--color-base00);
+    border: 2px solid var(--color-base0D);
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .slider::-moz-range-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .slider::-webkit-slider-runnable-track {
+    appearance: none;
+    background: transparent;
+    height: 100%;
+  }
+
+  .slider::-moz-range-track {
+    appearance: none;
+    background: transparent;
+    height: 100%;
+  }
+
+  .slider-values {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+  }
+
+  .slider-current {
+    font-weight: 500;
+    color: var(--color-base05);
+  }
+</style>

package/src/components/forms/SearchInput.svelte

@@ -0,0 +1,175 @@
+<!--
+  @component SearchInput
+
+  A search input with icon and clearable functionality.
+
+  @example
+  <SearchInput bind:value={query} placeholder="Search..." />
+
+  @example With loading state
+  <SearchInput bind:value={query} loading={isSearching} />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Search...',
+    disabled = false,
+    loading = false,
+    size = 'md',
+    class: className = '',
+    oninput,
+    onchange,
+    onclear,
+    ...rest
+  } = $props();
+
+  function handleClear() {
+    value = '';
+    onclear?.();
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Escape' && value) {
+      handleClear();
+    }
+  }
+</script>
+
+<div class={cn('search-input', `search-input-${size}`, className)}>
+  <span class="search-icon">
+    {#if loading}
+      <svg class="search-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10" opacity="0.2" />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
+      </svg>
+    {:else}
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    {/if}
+  </span>
+
+  <input
+    type="search"
+    bind:value
+    {placeholder}
+    {disabled}
+    class="search-field"
+    onkeydown={handleKeydown}
+    {oninput}
+    {onchange}
+    {...rest}
+  />
+
+  {#if value && !loading}
+    <button
+      type="button"
+      class="search-clear"
+      onclick={handleClear}
+      aria-label="Clear search"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-base04);
+    pointer-events: none;
+  }
+
+  .search-spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .search-field {
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    padding-left: 2.5rem;
+    padding-right: 2.25rem;
+    font-size: var(--text-sm);
+    color: var(--color-base07);
+    background: var(--color-base00);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-lg);
+    transition: var(--transition-colors);
+  }
+
+  .search-input-sm .search-field {
+    padding: var(--space-1) var(--space-2);
+    padding-left: 2rem;
+    padding-right: 2rem;
+    font-size: var(--text-xs);
+  }
+
+  .search-input-lg .search-field {
+    padding: var(--space-3) var(--space-4);
+    padding-left: 3rem;
+    padding-right: 2.75rem;
+    font-size: var(--text-base);
+  }
+
+  .search-field::placeholder {
+    color: var(--color-base04);
+  }
+
+  .search-field:focus {
+    outline: none;
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .search-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Hide native search clear button */
+  .search-field::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .search-clear {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-base04);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .search-clear:hover {
+    color: var(--color-base05);
+    background: var(--color-base02);
+  }
+</style>

package/src/components/forms/Select.svelte

@@ -0,0 +1,324 @@
+<!--
+  @component Select
+
+  An accessible dropdown select component with keyboard navigation.
+
+  @example
+  <Select
+    options={[
+      { value: 'opt1', label: 'Option 1' },
+      { value: 'opt2', label: 'Option 2' }
+    ]}
+    bind:value={selected}
+    placeholder="Select an option"
+  />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+  import { clickOutside } from '../../actions/index.js';
+  import { generateId } from '../../utils/reactive.svelte.js';
+
+  let {
+    options = [],
+    value = $bindable(null),
+    placeholder = 'Select...',
+    labelKey = 'label',
+    valueKey = 'value',
+    disabled = false,
+    error = false,
+    class: className = '',
+    onchange
+  } = $props();
+
+  const triggerId = generateId();
+  const listboxId = generateId();
+
+  let isOpen = $state(false);
+  let highlightedIndex = $state(-1);
+  let triggerRef = $state(null);
+  let listRef = $state(null);
+
+  const selectedOption = $derived(
+    options.find(opt => opt[valueKey] === value) ?? null
+  );
+  const selectedLabel = $derived(
+    selectedOption ? selectedOption[labelKey] : placeholder
+  );
+  const hasValue = $derived(value !== null && value !== undefined);
+
+  $effect(() => {
+    if (!isOpen) {
+      highlightedIndex = -1;
+      return;
+    }
+    listRef?.focus();
+    const selectedIdx = options.findIndex(opt => opt[valueKey] === value);
+    highlightedIndex = selectedIdx >= 0 ? selectedIdx : 0;
+  });
+
+  $effect(() => {
+    if (!isOpen || highlightedIndex < 0) return;
+    const highlighted = listRef?.querySelector(`[data-index="${highlightedIndex}"]`);
+    highlighted?.scrollIntoView({ block: 'nearest' });
+  });
+
+  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;
+    }
+  }
+</script>
+
+<div class={cn('select-wrapper', className)} use:clickOutside={close}>
+  <button
+    bind:this={triggerRef}
+    id={triggerId}
+    type="button"
+    class={cn('select-trigger', isOpen && 'select-open', error && 'select-error', hasValue && 'has-value')}
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-controls={listboxId}
+    aria-invalid={error || undefined}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="select-value">{selectedLabel}</span>
+    <svg class={cn('select-chevron', isOpen && 'rotated')} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div
+      bind:this={listRef}
+      id={listboxId}
+      role="listbox"
+      tabindex="-1"
+      aria-labelledby={triggerId}
+      class="select-dropdown"
+      onkeydown={handleKeydown}
+    >
+      {#if options.length === 0}
+        <div class="select-empty">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('select-option', isHighlighted && 'highlighted', isSelected && 'selected')}
+            onclick={() => select(option)}
+            onmouseenter={() => highlightedIndex = index}
+          >
+            <span class={cn('select-check', !isSelected && 'invisible')}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            </span>
+            <span class="select-option-label">{option[labelKey]}</span>
+          </button>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .select-wrapper {
+    position: relative;
+  }
+
+  .select-trigger {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-base03);
+    background-color: var(--color-base00);
+    color: var(--color-base04);
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 150ms, box-shadow 150ms;
+  }
+
+  .select-trigger:hover:not(:disabled) {
+    border-color: var(--color-base04);
+  }
+
+  .select-trigger:focus-visible {
+    outline: none;
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .select-trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select-trigger.has-value {
+    color: var(--color-base07);
+  }
+
+  .select-trigger.select-open {
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .select-trigger.select-error {
+    border-color: var(--color-base08);
+  }
+
+  .select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .select-chevron {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--color-base04);
+    transition: transform 200ms;
+  }
+
+  .select-chevron.rotated {
+    transform: rotate(180deg);
+  }
+
+  .select-dropdown {
+    position: absolute;
+    z-index: 50;
+    width: 100%;
+    margin-top: 0.25rem;
+    max-height: 15rem;
+    overflow: auto;
+    background-color: var(--color-base01);
+    border: 1px solid var(--color-base03);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    padding: 0.25rem 0;
+    animation: dropdown-in 150ms ease-out;
+  }
+
+  .select-empty {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--color-base04);
+    text-align: center;
+  }
+
+  .select-option {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    text-align: left;
+    color: var(--color-base05);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 75ms;
+  }
+
+  .select-option.highlighted {
+    background-color: var(--color-base02);
+  }
+
+  .select-option.selected {
+    color: var(--color-base0D);
+    font-weight: 500;
+  }
+
+  .select-check {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .select-check.invisible {
+    visibility: hidden;
+  }
+
+  .select-option-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @keyframes dropdown-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>