@classic-homes/theme-svelte 0.1.3 → 0.1.5

package/dist/lib/components/MultiSelect.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import { Combobox as ComboboxPrimitive } from 'bits-ui';
+  import { cn } from '../utils.js';
+  import Spinner from './Spinner.svelte';
+
+  export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    /** Currently selected values */
+    value?: string[];
+    /** Callback when values change */
+    onValueChange?: (values: string[]) => void;
+    /** Array of selectable options */
+    options: MultiSelectOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display when no results found */
+    emptyMessage?: string;
+    /** Whether the multiselect is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Maximum number of selections allowed */
+    max?: number;
+    /** Whether async data is loading */
+    loading?: boolean;
+    /** Callback when search query changes (for async loading) */
+    onSearch?: (query: string) => void;
+    /** Debounce delay in ms for search callback (default: 300) */
+    debounceMs?: number;
+    /** Additional class for the trigger */
+    class?: string;
+  }
+
+  let {
+    value = $bindable([]),
+    onValueChange,
+    options,
+    placeholder = 'Select options...',
+    emptyMessage = 'No results found.',
+    disabled = false,
+    required = false,
+    name,
+    id,
+    error,
+    max,
+    loading = false,
+    onSearch,
+    debounceMs = 300,
+    class: className,
+  }: Props = $props();
+
+  let searchQuery = $state('');
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let open = $state(false);
+
+  // Get labels for selected values
+  const selectedLabels = $derived(
+    value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean) as string[]
+  );
+
+  // Always filter options locally based on search query
+  const filteredOptions = $derived.by(() => {
+    if (!searchQuery) return options;
+    const query = searchQuery.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(query));
+  });
+
+  // Check if max selections reached
+  const maxReached = $derived(max !== undefined && value.length >= max);
+
+  function handleSearchInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    searchQuery = target.value;
+
+    if (onSearch) {
+      // Debounce the search callback
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        onSearch(searchQuery);
+      }, debounceMs);
+    }
+  }
+
+  function handleValueChange(newValues: string[] | undefined) {
+    if (newValues !== undefined) {
+      value = newValues;
+      onValueChange?.(newValues);
+    }
+  }
+
+  function removeValue(valueToRemove: string) {
+    const newValues = value.filter((v) => v !== valueToRemove);
+    value = newValues;
+    onValueChange?.(newValues);
+  }
+
+  function handleOpenChange(isOpen: boolean) {
+    open = isOpen;
+    if (!isOpen) {
+      searchQuery = '';
+    }
+  }
+
+  // Cleanup debounce timer on unmount
+  $effect(() => {
+    return () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+    };
+  });
+</script>
+
+<div class={cn('w-full', className)}>
+  <!-- Selected tags -->
+  {#if selectedLabels.length > 0}
+    <div class="flex flex-wrap gap-1 mb-2">
+      {#each value as selectedValue}
+        {@const label = options.find((o) => o.value === selectedValue)?.label}
+        {#if label}
+          <span
+            class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground"
+          >
+            {label}
+            <button
+              type="button"
+              onclick={() => removeValue(selectedValue)}
+              class="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+              {disabled}
+              aria-label={`Remove ${label}`}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+            </button>
+          </span>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  <ComboboxPrimitive.Root
+    type="multiple"
+    {disabled}
+    {required}
+    {name}
+    bind:open
+    onOpenChange={handleOpenChange}
+    onValueChange={handleValueChange}
+    {value}
+  >
+    <div class="relative">
+      <ComboboxPrimitive.Input
+        {id}
+        placeholder={value.length > 0 ? `${value.length} selected` : placeholder}
+        oninput={handleSearchInput}
+        onfocus={() => (open = true)}
+        onclick={() => (open = true)}
+        class={cn(
+          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground 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-invalid={error ? 'true' : undefined}
+      />
+    </div>
+
+    <ComboboxPrimitive.Content
+      class="relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+      sideOffset={4}
+    >
+      <div class="p-1 max-h-[300px] overflow-y-auto">
+        {#if loading}
+          <div class="flex items-center justify-center py-6">
+            <Spinner size="sm" />
+            <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+          </div>
+        {:else if filteredOptions.length === 0}
+          <div class="py-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        {:else}
+          {#each filteredOptions as option}
+            {@const isSelected = value.includes(option.value)}
+            {@const isDisabledByMax = maxReached && !isSelected}
+            <ComboboxPrimitive.Item
+              value={option.value}
+              label={option.label}
+              disabled={option.disabled || isDisabledByMax}
+              class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
+            >
+              <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                {#if isSelected}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="h-4 w-4"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                {:else}
+                  <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
+                {/if}
+              </span>
+              {option.label}
+            </ComboboxPrimitive.Item>
+          {/each}
+        {/if}
+      </div>
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Root>
+</div>
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

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

@@ -0,0 +1,40 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    /** Currently selected values */
+    value?: string[];
+    /** Callback when values change */
+    onValueChange?: (values: string[]) => void;
+    /** Array of selectable options */
+    options: MultiSelectOption[];
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Message to display when no results found */
+    emptyMessage?: string;
+    /** Whether the multiselect is disabled */
+    disabled?: boolean;
+    /** Whether selection is required */
+    required?: boolean;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Error message to display */
+    error?: string;
+    /** Maximum number of selections allowed */
+    max?: number;
+    /** Whether async data is loading */
+    loading?: boolean;
+    /** Callback when search query changes (for async loading) */
+    onSearch?: (query: string) => void;
+    /** Debounce delay in ms for search callback (default: 300) */
+    debounceMs?: number;
+    /** Additional class for the trigger */
+    class?: string;
+}
+declare const MultiSelect: import("svelte").Component<Props, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/lib/components/NumberInput.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Current numeric value */
+    value?: number | null;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for stepper buttons and arrow keys */
+    step?: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is readonly */
+    readonly?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Whether to show +/- stepper buttons */
+    showStepper?: boolean;
+    /** Callback when value changes */
+    onValueChange?: (value: number | null) => void;
+    /** Error state */
+    error?: string;
+    /** Additional class for the container */
+    class?: string;
+  }
+
+  let {
+    value = $bindable(null),
+    min,
+    max,
+    step = 1,
+    disabled = false,
+    readonly = false,
+    required = false,
+    placeholder,
+    name,
+    id,
+    showStepper = true,
+    onValueChange,
+    error,
+    class: className,
+  }: Props = $props();
+
+  function clampValue(val: number): number {
+    let result = val;
+    if (min !== undefined && result < min) result = min;
+    if (max !== undefined && result > max) result = max;
+    return result;
+  }
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    const inputValue = target.value;
+
+    if (inputValue === '' || inputValue === '-') {
+      value = null;
+      onValueChange?.(null);
+      return;
+    }
+
+    const parsed = parseFloat(inputValue);
+    if (!isNaN(parsed)) {
+      value = parsed;
+      onValueChange?.(parsed);
+    }
+  }
+
+  function handleBlur() {
+    // Clamp value on blur
+    if (value !== null) {
+      const clamped = clampValue(value);
+      if (clamped !== value) {
+        value = clamped;
+        onValueChange?.(clamped);
+      }
+    }
+  }
+
+  function increment() {
+    if (disabled || readonly) return;
+    const currentValue = value ?? min ?? 0;
+    const newValue = clampValue(currentValue + step);
+    value = newValue;
+    onValueChange?.(newValue);
+  }
+
+  function decrement() {
+    if (disabled || readonly) return;
+    const currentValue = value ?? max ?? 0;
+    const newValue = clampValue(currentValue - step);
+    value = newValue;
+    onValueChange?.(newValue);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      increment();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      decrement();
+    }
+  }
+
+  const canDecrement = $derived(
+    !disabled && !readonly && (min === undefined || (value ?? 0) > min)
+  );
+  const canIncrement = $derived(
+    !disabled && !readonly && (max === undefined || (value ?? 0) < max)
+  );
+
+  const displayValue = $derived(value !== null ? String(value) : '');
+</script>
+
+<div class={cn('relative flex items-center', className)}>
+  {#if showStepper}
+    <button
+      type="button"
+      onclick={decrement}
+      disabled={disabled || !canDecrement}
+      class={cn(
+        'flex h-11 w-11 items-center justify-center rounded-l-md border border-r-0 border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        error && 'border-destructive'
+      )}
+      aria-label="Decrease value"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M5 12h14" />
+      </svg>
+    </button>
+  {/if}
+
+  <input
+    type="text"
+    inputmode="decimal"
+    value={displayValue}
+    {placeholder}
+    {disabled}
+    {readonly}
+    {required}
+    {name}
+    {id}
+    class={cn(
+      'flex h-11 w-full bg-background px-3 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      showStepper ? 'border-y border-input' : 'border border-input rounded-md',
+      error && 'border-destructive focus-visible:ring-destructive'
+    )}
+    oninput={handleInput}
+    onblur={handleBlur}
+    onkeydown={handleKeyDown}
+    aria-invalid={error ? 'true' : undefined}
+  />
+
+  {#if showStepper}
+    <button
+      type="button"
+      onclick={increment}
+      disabled={disabled || !canIncrement}
+      class={cn(
+        'flex h-11 w-11 items-center justify-center rounded-r-md border border-l-0 border-input bg-background text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        error && 'border-destructive'
+      )}
+      aria-label="Increase value"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M5 12h14" />
+        <path d="M12 5v14" />
+      </svg>
+    </button>
+  {/if}
+</div>
+
+{#if error}
+  <p class="text-sm text-destructive mt-1.5" role="alert">
+    {error}
+  </p>
+{/if}

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

@@ -0,0 +1,33 @@
+interface Props {
+    /** Current numeric value */
+    value?: number | null;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for stepper buttons and arrow keys */
+    step?: number;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is readonly */
+    readonly?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Whether to show +/- stepper buttons */
+    showStepper?: boolean;
+    /** Callback when value changes */
+    onValueChange?: (value: number | null) => void;
+    /** Error state */
+    error?: string;
+    /** Additional class for the container */
+    class?: string;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;