@miozu/jera 0.0.2 → 0.3.0

package/src/components/forms/Radio.svelte

@@ -0,0 +1,143 @@
+<!--
+  @component Radio
+
+  A radio button input. Use within RadioGroup for proper grouping.
+
+  @example
+  <Radio value="option1" label="Option 1" />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    value,
+    label = '',
+    description = '',
+    disabled = false,
+    id,
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const group = getContext('radioGroup');
+
+  const radioId = id || `radio-${Math.random().toString(36).slice(2, 9)}`;
+  const isChecked = $derived(group?.value === value);
+  const isDisabled = $derived(disabled || group?.disabled);
+  const name = $derived(group?.name || '');
+
+  function handleChange() {
+    if (!isDisabled && group) {
+      group.setValue(value);
+    }
+  }
+</script>
+
+<label
+  class={cn('radio-label', isDisabled && 'radio-disabled', className)}
+  for={radioId}
+>
+  <input
+    type="radio"
+    id={radioId}
+    {name}
+    {value}
+    checked={isChecked}
+    disabled={isDisabled}
+    onchange={handleChange}
+    class="radio-input"
+    {...rest}
+  />
+  <span class="radio-control"></span>
+  {#if label || description}
+    <span class="radio-content">
+      {#if label}
+        <span class="radio-text">{label}</span>
+      {/if}
+      {#if description}
+        <span class="radio-description">{description}</span>
+      {/if}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .radio-label {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .radio-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .radio-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .radio-control {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-top: 0.125rem;
+    border: 2px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-bg);
+    transition: var(--transition-colors);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .radio-control::after {
+    content: '';
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: var(--color-primary);
+    transform: scale(0);
+    transition: transform 0.15s ease-out;
+  }
+
+  .radio-input:checked + .radio-control {
+    border-color: var(--color-primary);
+  }
+
+  .radio-input:checked + .radio-control::after {
+    transform: scale(1);
+  }
+
+  .radio-input:focus-visible + .radio-control {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  }
+
+  .radio-label:hover:not(.radio-disabled) .radio-control {
+    border-color: var(--color-primary);
+  }
+
+  .radio-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .radio-text {
+    font-size: var(--text-sm);
+    color: var(--color-text-strong);
+    line-height: 1.4;
+  }
+
+  .radio-description {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+    line-height: 1.4;
+  }
+</style>

package/src/components/forms/RadioGroup.svelte

@@ -0,0 +1,62 @@
+<!--
+  @component RadioGroup
+
+  A group container for Radio buttons.
+
+  @example
+  <RadioGroup bind:value={selected} name="options">
+    <Radio value="a" label="Option A" />
+    <Radio value="b" label="Option B" />
+    <Radio value="c" label="Option C" />
+  </RadioGroup>
+-->
+<script>
+  import { setContext } from 'svelte';
+
+  let {
+    value = $bindable(null),
+    name = '',
+    disabled = false,
+    orientation = 'vertical',
+    children,
+    onchange,
+    class: className = ''
+  } = $props();
+
+  function setValue(newValue) {
+    value = newValue;
+    onchange?.({ target: { name, value: newValue } });
+  }
+
+  setContext('radioGroup', {
+    get value() { return value; },
+    get name() { return name; },
+    get disabled() { return disabled; },
+    setValue
+  });
+</script>
+
+<div
+  class="radio-group radio-group-{orientation} {className}"
+  role="radiogroup"
+  aria-disabled={disabled}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .radio-group {
+    display: flex;
+  }
+
+  .radio-group-vertical {
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .radio-group-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+  }
+</style>

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-text);
+    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-surface-alt);
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+
+  .slider-fill {
+    height: 100%;
+    background: var(--color-primary);
+    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-bg);
+    border: 2px solid var(--color-primary);
+    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-primary) 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-primary) 30%, transparent);
+  }
+
+  /* Firefox */
+  .slider::-moz-range-thumb {
+    appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 0.375rem;
+    background: var(--color-bg);
+    border: 2px solid var(--color-primary);
+    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-primary) 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-text-muted);
+  }
+
+  .slider-current {
+    font-weight: 500;
+    color: var(--color-text);
+  }
+</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-text-muted);
+    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-text-strong);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border-muted);
+    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-text-muted);
+  }
+
+  .search-field:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 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-text-muted);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .search-clear:hover {
+    color: var(--color-text);
+    background: var(--color-surface-hover);
+  }
+</style>