@miozu/jera 0.0.2 → 0.4.2

package/src/components/forms/Input.svelte

@@ -0,0 +1,121 @@
+<!--
+  @component Input
+
+  A flexible text input component with full browser feature control.
+
+  @example
+  <Input bind:value={email} type="email" placeholder="Enter email" />
+
+  @example
+  // Disable browser autofill (for sensitive fields)
+  <Input bind:value={password} type="password" disableBrowserFeatures />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    value = $bindable(''),
+    ref = $bindable(),
+    type = 'text',
+    placeholder = '',
+    disabled = false,
+    required = false,
+    name = '',
+    id = '',
+    autocomplete = 'on',
+    autocorrect = 'off',
+    autocapitalize = 'off',
+    spellcheck = 'false',
+    maxlength,
+    minlength,
+    inputmode,
+    class: className = '',
+    unstyled = false,
+    disableBrowserFeatures = false,
+    error = false,
+    oninput,
+    onchange,
+    onkeydown,
+    onfocus,
+    onblur,
+    ...rest
+  } = $props();
+
+  const finalAutocomplete = $derived(
+    disableBrowserFeatures ? 'new-password' : autocomplete
+  );
+
+  const inputClass = $derived(
+    unstyled ? className : cn(
+      'input-base',
+      error && 'input-error',
+      className
+    )
+  );
+</script>
+
+<input
+  class={inputClass}
+  bind:this={ref}
+  bind:value
+  {id}
+  {name}
+  {type}
+  {placeholder}
+  {disabled}
+  {required}
+  {inputmode}
+  {maxlength}
+  {minlength}
+  autocomplete={finalAutocomplete}
+  autocorrect={disableBrowserFeatures ? 'off' : autocorrect}
+  autocapitalize={disableBrowserFeatures ? 'off' : autocapitalize}
+  spellcheck={disableBrowserFeatures ? 'false' : spellcheck}
+  data-form-type={disableBrowserFeatures ? 'other' : undefined}
+  data-lpignore={disableBrowserFeatures ? 'true' : undefined}
+  aria-invalid={error || undefined}
+  {oninput}
+  {onchange}
+  {onkeydown}
+  {onfocus}
+  {onblur}
+  {...rest}
+/>
+
+<style>
+  .input-base {
+    width: 100%;
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    font-size: var(--text-sm, 0.875rem);
+    line-height: var(--leading-normal, 1.5);
+    color: var(--color-base07);
+    background-color: var(--color-base00);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-lg, 0.5rem);
+    transition: border-color 150ms, box-shadow 150ms;
+  }
+
+  .input-base::placeholder {
+    color: var(--color-base04);
+  }
+
+  .input-base:focus {
+    outline: none;
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .input-base:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-error {
+    border-color: var(--color-base08);
+  }
+
+  .input-error:focus {
+    border-color: var(--color-base08);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base08) 20%, transparent);
+  }
+</style>

package/src/components/forms/NumberInput.svelte

@@ -0,0 +1,225 @@
+<!--
+  @component NumberInput
+
+  A number input with increment/decrement buttons.
+
+  @example
+  <NumberInput bind:value={quantity} min={1} max={100} />
+
+  @example
+  // With step
+  <NumberInput bind:value={price} step={0.5} min={0} />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    value = $bindable(0),
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    placeholder = '',
+    disabled = false,
+    required = false,
+    name = '',
+    id = '',
+    size = 'md',
+    class: className = '',
+    error = false,
+    oninput,
+    onchange,
+    ...rest
+  } = $props();
+
+  function ensureNumber(val) {
+    const num = parseFloat(val);
+    return isNaN(num) ? min > -Infinity ? min : 0 : num;
+  }
+
+  function increment() {
+    if (disabled) return;
+    const newValue = Math.min(ensureNumber(value) + step, max);
+    if (newValue !== value) {
+      value = newValue;
+      triggerChange();
+    }
+  }
+
+  function decrement() {
+    if (disabled) return;
+    const newValue = Math.max(ensureNumber(value) - step, min);
+    if (newValue !== value) {
+      value = newValue;
+      triggerChange();
+    }
+  }
+
+  function handleInput(e) {
+    const inputValue = e.target.value;
+    if (inputValue === '' || inputValue === '-') {
+      value = inputValue;
+      oninput?.(e);
+      return;
+    }
+
+    const num = parseFloat(inputValue);
+    if (!isNaN(num)) {
+      value = Math.max(min, Math.min(num, max));
+    }
+    oninput?.(e);
+  }
+
+  function handleBlur(e) {
+    const num = ensureNumber(value);
+    value = Math.max(min, Math.min(num, max));
+    triggerChange();
+  }
+
+  function triggerChange() {
+    onchange?.({ target: { name, value } });
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      increment();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      decrement();
+    }
+  }
+</script>
+
+<div class="number-input number-input-{size} {className}" class:number-input-error={error}>
+  <button
+    type="button"
+    class="number-btn number-btn-decrement"
+    onclick={decrement}
+    disabled={disabled || value <= min}
+    aria-label="Decrease value"
+  >
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+    </svg>
+  </button>
+
+  <input
+    {id}
+    {name}
+    type="text"
+    inputmode="decimal"
+    class="number-field"
+    value={value}
+    {placeholder}
+    {disabled}
+    {required}
+    oninput={handleInput}
+    onblur={handleBlur}
+    onkeydown={handleKeydown}
+    aria-invalid={error || undefined}
+    {...rest}
+  />
+
+  <button
+    type="button"
+    class="number-btn number-btn-increment"
+    onclick={increment}
+    disabled={disabled || value >= max}
+    aria-label="Increase value"
+  >
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <line x1="12" y1="5" x2="12" y2="19"></line>
+      <line x1="5" y1="12" x2="19" y2="12"></line>
+    </svg>
+  </button>
+</div>
+
+<style>
+  .number-input {
+    display: inline-flex;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .number-input-sm { height: 2rem; }
+  .number-input-md { height: 2.25rem; }
+  .number-input-lg { height: 2.75rem; }
+
+  .number-field {
+    flex: 1;
+    min-width: 0;
+    padding: 0 var(--space-3);
+    text-align: center;
+    font-size: var(--text-sm);
+    color: var(--color-base07);
+    background: var(--color-base00);
+    border-top: 1px solid var(--color-base02);
+    border-bottom: 1px solid var(--color-base02);
+    border-left: none;
+    border-right: none;
+    transition: var(--transition-colors);
+    font-family: inherit;
+  }
+
+  .number-field:focus {
+    outline: none;
+    border-color: var(--color-base0D);
+  }
+
+  .number-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .number-field::placeholder {
+    color: var(--color-base04);
+  }
+
+  /* Hide native spinners */
+  .number-field::-webkit-outer-spin-button,
+  .number-field::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .number-field[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .number-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-3);
+    color: var(--color-base04);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .number-btn:hover:not(:disabled) {
+    color: var(--color-base07);
+    background: var(--color-base02);
+  }
+
+  .number-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .number-btn-decrement {
+    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  }
+
+  .number-btn-increment {
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  }
+
+  .number-input-error .number-field {
+    border-color: var(--color-base08);
+  }
+
+  .number-input-error .number-btn {
+    border-color: var(--color-base08);
+  }
+</style>

package/src/components/forms/PinInput.svelte

@@ -0,0 +1,169 @@
+<!--
+  @component PinInput
+
+  A PIN/OTP code input with individual digit fields.
+
+  @example
+  <PinInput bind:value={code} length={6} />
+
+  @example Masked (password style)
+  <PinInput bind:value={pin} length={4} masked />
+-->
+<script>
+  let {
+    value = $bindable(''),
+    length = 4,
+    masked = false,
+    disabled = false,
+    size = 'md',
+    class: className = '',
+    oncomplete,
+    ...rest
+  } = $props();
+
+  let inputs = $state([]);
+
+  // Keep value in sync with inputs
+  $effect(() => {
+    const chars = value.split('').slice(0, length);
+    inputs = Array(length).fill('').map((_, i) => chars[i] || '');
+  });
+
+  function updateValue() {
+    value = inputs.join('');
+    if (value.length === length) {
+      oncomplete?.(value);
+    }
+  }
+
+  function handleInput(index, e) {
+    const char = e.target.value.slice(-1);
+
+    if (!/^\d*$/.test(char)) {
+      e.target.value = inputs[index];
+      return;
+    }
+
+    inputs[index] = char;
+    updateValue();
+
+    // Move to next input
+    if (char && index < length - 1) {
+      const nextInput = e.target.parentElement.querySelector(`input:nth-child(${index + 2})`);
+      nextInput?.focus();
+    }
+  }
+
+  function handleKeydown(index, e) {
+    if (e.key === 'Backspace' && !inputs[index] && index > 0) {
+      const prevInput = e.target.parentElement.querySelector(`input:nth-child(${index})`);
+      prevInput?.focus();
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      const prevInput = e.target.parentElement.querySelector(`input:nth-child(${index})`);
+      prevInput?.focus();
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      const nextInput = e.target.parentElement.querySelector(`input:nth-child(${index + 2})`);
+      nextInput?.focus();
+    }
+  }
+
+  function handlePaste(e) {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, length);
+
+    for (let i = 0; i < length; i++) {
+      inputs[i] = pasted[i] || '';
+    }
+    updateValue();
+
+    // Focus appropriate input
+    const focusIndex = Math.min(pasted.length, length - 1);
+    const input = e.target.parentElement.querySelector(`input:nth-child(${focusIndex + 1})`);
+    input?.focus();
+  }
+
+  function handleFocus(e) {
+    e.target.select();
+  }
+</script>
+
+<div class="pin-input pin-input-{size} {className}" {...rest}>
+  {#each inputs as digit, index}
+    <input
+      type={masked ? 'password' : 'text'}
+      inputmode="numeric"
+      pattern="[0-9]*"
+      maxlength="1"
+      value={digit}
+      {disabled}
+      class="pin-field"
+      class:pin-field-filled={digit}
+      oninput={(e) => handleInput(index, e)}
+      onkeydown={(e) => handleKeydown(index, e)}
+      onpaste={handlePaste}
+      onfocus={handleFocus}
+      autocomplete="one-time-code"
+    />
+  {/each}
+</div>
+
+<style>
+  .pin-input {
+    display: inline-flex;
+    gap: var(--space-2);
+  }
+
+  .pin-field {
+    width: 2.75rem;
+    height: 3rem;
+    padding: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    text-align: center;
+    color: var(--color-base07);
+    background: var(--color-base00);
+    border: 2px solid var(--color-base02);
+    border-radius: var(--radius-lg);
+    transition: var(--transition-colors);
+    font-family: inherit;
+  }
+
+  .pin-input-sm .pin-field {
+    width: 2.25rem;
+    height: 2.5rem;
+    font-size: 1rem;
+  }
+
+  .pin-input-lg .pin-field {
+    width: 3.25rem;
+    height: 3.5rem;
+    font-size: 1.5rem;
+  }
+
+  .pin-field:focus {
+    outline: none;
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .pin-field-filled {
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 5%, transparent);
+  }
+
+  .pin-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .pin-field::placeholder {
+    color: var(--color-base04);
+  }
+
+  /* Hide spin buttons on number input */
+  .pin-field::-webkit-outer-spin-button,
+  .pin-field::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+</style>

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-base03);
+    border-radius: 50%;
+    background: var(--color-base00);
+    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-base0D);
+    transform: scale(0);
+    transition: transform 0.15s ease-out;
+  }
+
+  .radio-input:checked + .radio-control {
+    border-color: var(--color-base0D);
+  }
+
+  .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-base0D) 20%, transparent);
+  }
+
+  .radio-label:hover:not(.radio-disabled) .radio-control {
+    border-color: var(--color-base0D);
+  }
+
+  .radio-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .radio-text {
+    font-size: var(--text-sm);
+    color: var(--color-base07);
+    line-height: 1.4;
+  }
+
+  .radio-description {
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+    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>