@classic-homes/theme-svelte 0.1.3 → 0.1.5

package/dist/lib/components/OTPInput.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Current OTP value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Callback when all digits are entered */
+    onComplete?: (code: string) => void;
+    /** Number of digits (default: 6) */
+    length?: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Input type: numeric only or alphanumeric */
+    type?: 'numeric' | 'alphanumeric';
+    /** Name attribute for form submission */
+    name?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the container */
+    class?: string;
+  }
+
+  let {
+    value = $bindable(''),
+    onValueChange,
+    onComplete,
+    length = 6,
+    disabled = false,
+    type = 'numeric',
+    name,
+    error,
+    class: className,
+  }: Props = $props();
+
+  let inputs: HTMLInputElement[] = [];
+
+  // Split value into individual digits, ensuring we always have `length` elements
+  const digits = $derived.by(() => {
+    const arr = value.split('').slice(0, length);
+    // Pad array to always have `length` elements
+    while (arr.length < length) {
+      arr.push('');
+    }
+    return arr;
+  });
+
+  // Pattern for input validation
+  const pattern = $derived(type === 'numeric' ? '[0-9]' : '[0-9a-zA-Z]');
+  const inputMode = $derived(type === 'numeric' ? 'numeric' : 'text');
+
+  function isValidChar(char: string): boolean {
+    if (type === 'numeric') {
+      return /^[0-9]$/.test(char);
+    }
+    return /^[0-9a-zA-Z]$/.test(char);
+  }
+
+  // Track if we've already fired onComplete for the current complete value
+  let lastCompletedValue = $state<string | null>(null);
+
+  function updateValue(newDigits: string[]) {
+    // Filter out empty strings and join to get actual value
+    const newValue = newDigits
+      .filter((d) => d !== '')
+      .join('')
+      .slice(0, length);
+    value = newValue;
+    onValueChange?.(newValue);
+
+    // Only fire onComplete once when all digits are filled and it's a new complete value
+    if (newValue.length === length && newValue !== lastCompletedValue) {
+      lastCompletedValue = newValue;
+      onComplete?.(newValue);
+    } else if (newValue.length < length) {
+      // Reset tracking when value becomes incomplete
+      lastCompletedValue = null;
+    }
+  }
+
+  function handleInput(index: number, e: Event) {
+    const target = e.target as HTMLInputElement;
+    const inputValue = target.value;
+
+    if (!inputValue) return;
+
+    // Handle paste of multiple characters
+    if (inputValue.length > 1) {
+      const chars = inputValue.split('').filter(isValidChar);
+      const newDigits = [...digits];
+
+      chars.forEach((char, i) => {
+        if (index + i < length) {
+          newDigits[index + i] = char;
+        }
+      });
+
+      updateValue(newDigits);
+
+      // Focus the next empty input or the last input
+      const nextIndex = Math.min(index + chars.length, length - 1);
+      inputs[nextIndex]?.focus();
+      return;
+    }
+
+    // Handle single character
+    const char = inputValue.slice(-1);
+    if (!isValidChar(char)) {
+      target.value = digits[index] || '';
+      return;
+    }
+
+    const newDigits = [...digits];
+    newDigits[index] = char;
+    updateValue(newDigits);
+
+    // Move to next input
+    if (index < length - 1) {
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handleKeyDown(index: number, e: KeyboardEvent) {
+    const target = e.target as HTMLInputElement;
+
+    if (e.key === 'Backspace') {
+      e.preventDefault();
+
+      if (digits[index]) {
+        // Clear current digit
+        const newDigits = [...digits];
+        newDigits[index] = '';
+        updateValue(newDigits);
+      } else if (index > 0) {
+        // Move to previous input and clear it
+        const newDigits = [...digits];
+        newDigits[index - 1] = '';
+        updateValue(newDigits);
+        inputs[index - 1]?.focus();
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      inputs[index - 1]?.focus();
+    } else if (e.key === 'ArrowRight' && index < length - 1) {
+      e.preventDefault();
+      inputs[index + 1]?.focus();
+    } else if (e.key === 'Delete') {
+      e.preventDefault();
+      const newDigits = [...digits];
+      newDigits[index] = '';
+      updateValue(newDigits);
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    e.preventDefault();
+    const pastedData = e.clipboardData?.getData('text') || '';
+    const chars = pastedData.split('').filter(isValidChar).slice(0, length);
+
+    if (chars.length > 0) {
+      const newDigits = chars.concat(Array(length - chars.length).fill(''));
+      updateValue(newDigits);
+
+      // Focus the input after the last pasted character
+      const focusIndex = Math.min(chars.length, length - 1);
+      inputs[focusIndex]?.focus();
+    }
+  }
+
+  function handleFocus(e: FocusEvent) {
+    const target = e.target as HTMLInputElement;
+    target.select();
+  }
+</script>
+
+<div class={cn('flex gap-2', className)} role="group" aria-label="One-time password input">
+  {#each { length } as _, index}
+    <input
+      bind:this={inputs[index]}
+      type="text"
+      inputmode={inputMode}
+      maxlength="1"
+      {pattern}
+      {disabled}
+      value={digits[index] || ''}
+      oninput={(e) => handleInput(index, e)}
+      onkeydown={(e) => handleKeyDown(index, e)}
+      onpaste={handlePaste}
+      onfocus={handleFocus}
+      class={cn(
+        'h-12 w-12 text-center text-lg font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
+        'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        error && 'border-destructive focus:ring-destructive'
+      )}
+      aria-label={`Digit ${index + 1} of ${length}`}
+      aria-invalid={error ? 'true' : undefined}
+      autocomplete="one-time-code"
+    />
+  {/each}
+</div>
+
+<!-- Hidden input for form submission -->
+{#if name}
+  <input type="hidden" {name} {value} />
+{/if}
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

package/dist/lib/components/OTPInput.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    /** Current OTP value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Callback when all digits are entered */
+    onComplete?: (code: string) => void;
+    /** Number of digits (default: 6) */
+    length?: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Input type: numeric only or alphanumeric */
+    type?: 'numeric' | 'alphanumeric';
+    /** Name attribute for form submission */
+    name?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the container */
+    class?: string;
+}
+declare const OTPInput: import("svelte").Component<Props, {}, "value">;
+type OTPInput = ReturnType<typeof OTPInput>;
+export default OTPInput;

package/dist/lib/components/RadioGroup.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import { validateNonEmptyArray } from '../validation.js';
+
+  export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+  }
+
+  interface Props {
+    /** Current selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Array of radio options */
+    options: RadioOption[];
+    /** Whether the entire group is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label for the group */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the container */
+    class?: string;
+  }
+
+  let {
+    value = $bindable(''),
+    onValueChange,
+    options,
+    disabled = false,
+    required = false,
+    name,
+    orientation = 'vertical',
+    label,
+    error,
+    class: className,
+  }: Props = $props();
+
+  // Validate props in development
+  $effect(() => {
+    validateNonEmptyArray(options, 'options', 'RadioGroup');
+  });
+
+  function handleValueChange(newValue: string) {
+    value = newValue;
+    onValueChange?.(newValue);
+  }
+</script>
+
+{#if label}
+  <span
+    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block"
+    id={name ? `${name}-label` : undefined}
+  >
+    {label}
+    {#if required}
+      <span class="text-destructive">*</span>
+    {/if}
+  </span>
+{/if}
+
+<RadioGroupPrimitive.Root
+  {value}
+  {disabled}
+  {required}
+  {name}
+  onValueChange={handleValueChange}
+  class={cn(
+    'grid gap-2',
+    orientation === 'horizontal' ? 'grid-flow-col auto-cols-max' : 'grid-flow-row',
+    className
+  )}
+  aria-labelledby={label && name ? `${name}-label` : undefined}
+  aria-invalid={error ? 'true' : undefined}
+>
+  {#each options as option}
+    <div class="flex items-start gap-3">
+      <RadioGroupPrimitive.Item
+        value={option.value}
+        disabled={option.disabled || disabled}
+        id={name ? `${name}-${option.value}` : undefined}
+        class={cn(
+          'relative aspect-square h-5 w-5 rounded-full border border-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center',
+          error && 'border-destructive'
+        )}
+      >
+        <!-- Touch target expansion (invisible, extends clickable area to 44x44px) -->
+        <span class="absolute inset-0 -m-3" aria-hidden="true"></span>
+        <!-- Indicator dot - shown when this option is selected -->
+        {#if value === option.value}
+          <span class="h-2.5 w-2.5 rounded-full bg-primary"></span>
+        {/if}
+      </RadioGroupPrimitive.Item>
+      <label
+        for={name ? `${name}-${option.value}` : undefined}
+        class={cn(
+          'text-sm leading-none cursor-pointer select-none',
+          (option.disabled || disabled) && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        <span class="font-medium">{option.label}</span>
+        {#if option.description}
+          <span class="block text-muted-foreground mt-1">{option.description}</span>
+        {/if}
+      </label>
+    </div>
+  {/each}
+</RadioGroupPrimitive.Root>
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

package/dist/lib/components/RadioGroup.svelte.d.ts

@@ -0,0 +1,31 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+}
+interface Props {
+    /** Current selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Array of radio options */
+    options: RadioOption[];
+    /** Whether the entire group is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional label for the group */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the container */
+    class?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;