@happyvertical/smrt-svelte 0.30.0

package/dist/components/forms/SearchInput.svelte

@@ -0,0 +1,358 @@
+<script lang="ts">
+/**
+ * SMRTSearchInput - A search input with built-in functionality
+ *
+ * Features:
+ * - Search icon
+ * - Clear button
+ * - Optional debounce
+ * - Loading state
+ * - Keyboard shortcuts
+ * - Material 3 styling
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../../i18n/strings.forms.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Current search value */
+  value?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Debounce delay in ms (0 for no debounce) */
+  debounce?: number;
+  /** Show loading indicator */
+  loading?: boolean;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** ID for the input element */
+  id?: string;
+  /** Name attribute */
+  name?: string;
+  /** ARIA label */
+  ariaLabel?: string;
+  /** Callback when value changes (after debounce) */
+  onsearch?: (value: string) => void;
+  /** Callback for immediate value changes */
+  oninput?: (value: string) => void;
+  /** Callback when Enter is pressed */
+  onsubmit?: (value: string) => void;
+}
+
+let {
+  value = $bindable(''),
+  placeholder = 'Search...',
+  debounce = 300,
+  loading = false,
+  disabled = false,
+  size = 'md',
+  id,
+  name,
+  ariaLabel = 'Search',
+  onsearch,
+  oninput,
+  onsubmit,
+}: Props = $props();
+
+let inputEl: HTMLInputElement | null = $state(null);
+let debounceTimer: ReturnType<typeof setTimeout> | null = $state(null);
+
+// Cleanup debounce timer on component destroy
+$effect(() => {
+  return () => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+  };
+});
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  value = target.value;
+  oninput?.(value);
+
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+
+  if (debounce > 0) {
+    debounceTimer = setTimeout(() => {
+      onsearch?.(value);
+    }, debounce);
+  } else {
+    onsearch?.(value);
+  }
+}
+
+function handleClear() {
+  value = '';
+  oninput?.('');
+  onsearch?.('');
+  inputEl?.focus();
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    // Cancel pending debounce and fire immediately
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    onsearch?.(value);
+    onsubmit?.(value);
+  } else if (event.key === 'Escape') {
+    if (value) {
+      event.preventDefault();
+      handleClear();
+    }
+  }
+}
+
+/** Focus the search input programmatically */
+export function focus() {
+  inputEl?.focus();
+}
+
+/** Clear and focus the search input */
+export function clear() {
+  handleClear();
+}
+
+const sizeClasses = {
+  sm: 'search-input--sm',
+  md: 'search-input--md',
+  lg: 'search-input--lg',
+};
+</script>
+
+<div
+  class="search-input {sizeClasses[size]}"
+  class:search-input--disabled={disabled}
+  class:search-input--loading={loading}
+>
+  <span class="search-input__icon" aria-hidden="true">
+    {#if loading}
+      <svg
+        class="search-input__spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32">
+          <animate
+            attributeName="stroke-dashoffset"
+            values="32;0"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </circle>
+      </svg>
+    {:else}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        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
+    bind:this={inputEl}
+    type="search"
+    class="search-input__field"
+    {id}
+    {name}
+    {placeholder}
+    {disabled}
+    {value}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    aria-label={ariaLabel}
+  />
+
+  {#if value && !disabled}
+    <button
+      type="button"
+      class="search-input__clear"
+      onclick={handleClear}
+      aria-label={t(M['ui.search_input.clear_aria_label'])}
+    >
+      <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"
+      >
+        <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%;
+    background: var(--smrt-color-surface-container-low, #f9fafb);
+    border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
+    border-radius: var(--smrt-radius-md, 0.5rem);
+    transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .search-input:focus-within {
+    background: var(--smrt-color-surface, #ffffff);
+    border-color: var(--smrt-color-primary, #005ac1);
+    box-shadow: 0 0 0 3px var(--smrt-color-primary-container, rgba(0, 90, 193, 0.1));
+  }
+
+  .search-input--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .search-input__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+  }
+
+  .search-input__spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .search-input__field {
+    flex: 1;
+    width: 100%;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    color: var(--smrt-color-on-surface, #111827);
+    outline: none;
+  }
+
+  .search-input__field::placeholder {
+    color: var(--smrt-color-on-surface-variant, #9ca3af);
+  }
+
+  /* Hide default search clear button */
+  .search-input__field::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .search-input__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    cursor: pointer;
+    border-radius: var(--smrt-radius-full, 9999px);
+    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .search-input__clear:hover {
+    color: var(--smrt-color-on-surface, #111827);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+  }
+
+  .search-input__clear:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 2px;
+  }
+
+  /* Size: Small */
+  .search-input--sm {
+    height: 32px;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .search-input--sm .search-input__icon {
+    padding-left: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .search-input--sm .search-input__field {
+    padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-2, 0.5rem);
+  }
+
+  .search-input--sm .search-input__clear {
+    width: 24px;
+    height: 24px;
+    margin-right: var(--smrt-spacing-1, 0.25rem);
+  }
+
+  /* Size: Medium (default) */
+  .search-input--md {
+    height: 40px;
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+
+  .search-input--md .search-input__icon {
+    padding-left: var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .search-input--md .search-input__field {
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-3, 0.75rem);
+  }
+
+  .search-input--md .search-input__clear {
+    width: 28px;
+    height: 28px;
+    margin-right: var(--smrt-spacing-2, 0.5rem);
+  }
+
+  /* Size: Large */
+  .search-input--lg {
+    height: 48px;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+  }
+
+  .search-input--lg .search-input__icon {
+    padding-left: var(--smrt-spacing-4, 1rem);
+  }
+
+  .search-input--lg .search-input__field {
+    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
+  }
+
+  .search-input--lg .search-input__clear {
+    width: 32px;
+    height: 32px;
+    margin-right: var(--smrt-spacing-3, 0.75rem);
+  }
+</style>

package/dist/components/forms/SearchInput.svelte.d.ts

@@ -0,0 +1,33 @@
+export interface Props {
+    /** Current search value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Debounce delay in ms (0 for no debounce) */
+    debounce?: number;
+    /** Show loading indicator */
+    loading?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** ID for the input element */
+    id?: string;
+    /** Name attribute */
+    name?: string;
+    /** ARIA label */
+    ariaLabel?: string;
+    /** Callback when value changes (after debounce) */
+    onsearch?: (value: string) => void;
+    /** Callback for immediate value changes */
+    oninput?: (value: string) => void;
+    /** Callback when Enter is pressed */
+    onsubmit?: (value: string) => void;
+}
+declare const SearchInput: import("svelte").Component<Props, {
+    focus: () => void;
+    clear: () => void;
+}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;
+//# sourceMappingURL=SearchInput.svelte.d.ts.map

package/dist/components/forms/SearchInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SearchInput.svelte.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgID,QAAA,MAAM,WAAW;;;WAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/Select.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+import { tryGetFormGroupContext } from '../../state/form-group-context.js';
+
+export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+  value?: string;
+  class?: string;
+  children: Snippet;
+}
+
+let {
+  id,
+  value = $bindable(''),
+  disabled = false,
+  required = false,
+  name,
+  class: className = '',
+  children,
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: Props = $props();
+
+// Inherit id / hint+error association / error state from a wrapping FormGroup.
+const formGroup = tryGetFormGroupContext();
+const resolvedId = $derived(id ?? formGroup?.().inputId);
+const resolvedDescribedBy = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInvalid = $derived(
+  ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
+);
+</script>
+
+<select
+	id={resolvedId}
+	bind:value
+	{disabled}
+	{required}
+	{name}
+	aria-describedby={resolvedDescribedBy}
+	aria-invalid={resolvedInvalid}
+	class="select {className}"
+	{...rest}
+>
+	{@render children()}
+</select>
+
+<style>
+	.select {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 2rem 0.5rem 0.75rem;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+		color: var(--smrt-color-on-surface, #1f2937);
+		background-color: var(--smrt-color-surface, #fff);
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+		background-position: right 0.5rem center;
+		background-repeat: no-repeat;
+		background-size: 1.5em 1.5em;
+		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border-radius: 0.375rem;
+		appearance: none;
+		cursor: pointer;
+		transition:
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out;
+	}
+
+	.select:focus {
+		outline: none;
+		border-color: var(--smrt-color-primary, #005ac1);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+	}
+
+	.select:disabled {
+		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+</style>

package/dist/components/forms/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLSelectAttributes, 'class' | 'value'> {
+    value?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/components/forms/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACnB;AAuCD,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}