@miozu/jera 0.0.2 → 0.3.0

package/src/components/forms/IconInput.svelte

@@ -0,0 +1,184 @@
+<!--
+  @component IconInput
+
+  An input wrapper that supports left/right icons, loading states, and clearable functionality.
+
+  @example Basic with icon
+  <IconInput bind:value={email} placeholder="Email">
+    {#snippet leftIcon()}
+      <MailIcon size={16} />
+    {/snippet}
+  </IconInput>
+
+  @example With loading and clearable
+  <IconInput
+    bind:value={search}
+    placeholder="Search..."
+    loading
+    clearable
+    onclear={() => search = ''}
+  >
+    {#snippet leftIcon()}
+      <SearchIcon size={16} />
+    {/snippet}
+  </IconInput>
+-->
+<script>
+  import Input from './Input.svelte';
+
+  let {
+    value = $bindable(''),
+    type = 'text',
+    placeholder = '',
+    disabled = false,
+    size = 'md',
+    loading = false,
+    clearable = false,
+    class: className = '',
+    leftIcon,
+    rightIcon,
+    oninput,
+    onchange,
+    onclear,
+    ...rest
+  } = $props();
+
+  function handleClear() {
+    value = '';
+    onclear?.();
+  }
+
+  const showClearButton = $derived(clearable && value && !loading);
+  const hasLeftIcon = $derived(!!leftIcon);
+  const hasRightIcon = $derived(!!rightIcon || loading || showClearButton);
+</script>
+
+<div class="icon-input icon-input-{size} {className}">
+  {#if leftIcon}
+    <span class="icon-left">
+      {#if loading}
+        <svg class="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}
+        {@render leftIcon()}
+      {/if}
+    </span>
+  {/if}
+
+  <Input
+    {type}
+    bind:value
+    {placeholder}
+    {disabled}
+    {size}
+    class="icon-input-field"
+    style="padding-left: {hasLeftIcon ? '2.5rem' : ''}; padding-right: {hasRightIcon ? '2.5rem' : ''};"
+    {oninput}
+    {onchange}
+    {...rest}
+  />
+
+  {#if showClearButton}
+    <button
+      type="button"
+      class="icon-clear"
+      onclick={handleClear}
+      aria-label="Clear input"
+    >
+      <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>
+  {:else if rightIcon && !loading}
+    <span class="icon-right">
+      {@render rightIcon()}
+    </span>
+  {:else if loading && !leftIcon}
+    <span class="icon-right">
+      <svg class="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>
+    </span>
+  {/if}
+</div>
+
+<style>
+  .icon-input {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .icon-input :global(.icon-input-field) {
+    width: 100%;
+  }
+
+  .icon-left,
+  .icon-right {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    pointer-events: none;
+  }
+
+  .icon-left {
+    left: 0.75rem;
+  }
+
+  .icon-right {
+    right: 0.75rem;
+  }
+
+  .icon-input-sm .icon-left,
+  .icon-input-sm .icon-right {
+    left: 0.625rem;
+  }
+
+  .icon-input-sm .icon-right {
+    right: 0.625rem;
+  }
+
+  .icon-input-lg .icon-left {
+    left: 1rem;
+  }
+
+  .icon-input-lg .icon-right {
+    right: 1rem;
+  }
+
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .icon-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);
+  }
+
+  .icon-clear:hover {
+    color: var(--color-text);
+    background: var(--color-surface-hover);
+  }
+</style>

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) var(--space-3);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+    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);
+  }
+
+  .input-base::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .input-base:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  }
+
+  .input-base:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-error {
+    border-color: var(--color-error);
+  }
+
+  .input-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/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-text-strong);
+    background: var(--color-bg);
+    border-top: 1px solid var(--color-border-muted);
+    border-bottom: 1px solid var(--color-border-muted);
+    border-left: none;
+    border-right: none;
+    transition: var(--transition-colors);
+    font-family: inherit;
+  }
+
+  .number-field:focus {
+    outline: none;
+    border-color: var(--color-primary);
+  }
+
+  .number-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .number-field::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  /* 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-text-muted);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-muted);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .number-btn:hover:not(:disabled) {
+    color: var(--color-text-strong);
+    background: var(--color-surface-hover);
+  }
+
+  .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-error);
+  }
+
+  .number-input-error .number-btn {
+    border-color: var(--color-error);
+  }
+</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-text-strong);
+    background: var(--color-bg);
+    border: 2px solid var(--color-border-muted);
+    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-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+  }
+
+  .pin-field-filled {
+    border-color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+  }
+
+  .pin-field:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .pin-field::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  /* Hide spin buttons on number input */
+  .pin-field::-webkit-outer-spin-button,
+  .pin-field::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+</style>