@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/form/FormSelect.svelte

@@ -9,121 +9,121 @@
 -->
 
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { normalizeOptions, type FieldOption } from './types.js';
+  import Icon from "@iconify/svelte";
+  import { normalizeOptions, type FieldOption } from "./types.js";
 
-	interface Props {
-		/** Field identifier */
-		id: string;
-		/** Current value */
-		value: string;
-		/** Available options - can be string[] or FieldOption[] */
-		options: FieldOption[] | string[];
-		/** Whether the field is required */
-		required?: boolean;
-		/** Whether the field is disabled (read-only) */
-		disabled?: boolean;
-		/** ARIA description ID */
-		ariaDescribedBy?: string;
-		/** Callback when value changes */
-		onChange: (value: string) => void;
-	}
+  interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: string;
+    /** Available options - can be string[] or FieldOption[] */
+    options: FieldOption[] | string[];
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+  }
 
-	let {
-		id,
-		value = '',
-		options = [],
-		required = false,
-		disabled = false,
-		ariaDescribedBy,
-		onChange
-	}: Props = $props();
+  let {
+    id,
+    value = "",
+    options = [],
+    required = false,
+    disabled = false,
+    ariaDescribedBy,
+    onChange,
+  }: Props = $props();
 
-	/**
-	 * Normalize options to consistent FieldOption format
-	 */
-	const normalizedOptions = $derived(normalizeOptions(options));
+  /**
+   * Normalize options to consistent FieldOption format
+   */
+  const normalizedOptions = $derived(normalizeOptions(options));
 
-	/**
-	 * Handle select changes
-	 */
-	function handleChange(event: Event): void {
-		const target = event.currentTarget as HTMLSelectElement;
-		onChange(target.value);
-	}
+  /**
+   * Handle select changes
+   */
+  function handleChange(event: Event): void {
+    const target = event.currentTarget as HTMLSelectElement;
+    onChange(target.value);
+  }
 </script>
 
 <div class="form-select-wrapper">
-	<select
-		{id}
-		class="form-select"
-		value={value ?? ''}
-		{disabled}
-		aria-describedby={ariaDescribedBy}
-		aria-required={required}
-		onchange={handleChange}
-	>
-		{#each normalizedOptions as option (option.value)}
-			<option value={option.value}>{option.label}</option>
-		{/each}
-	</select>
-	<span class="form-select__icon" aria-hidden="true">
-		<Icon icon="heroicons:chevron-down" />
-	</span>
+  <select
+    {id}
+    class="form-select"
+    value={value ?? ""}
+    {disabled}
+    aria-describedby={ariaDescribedBy}
+    aria-required={required}
+    onchange={handleChange}
+  >
+    {#each normalizedOptions as option (option.value)}
+      <option value={option.value}>{option.label}</option>
+    {/each}
+  </select>
+  <span class="form-select__icon" aria-hidden="true">
+    <Icon icon="heroicons:chevron-down" />
+  </span>
 </div>
 
 <style>
-	.form-select-wrapper {
-		position: relative;
-	}
+  .form-select-wrapper {
+    position: relative;
+  }
 
-	.form-select {
-		width: 100%;
-		padding: 0.625rem 2.5rem 0.625rem 0.875rem;
-		border: 1px solid var(--fd-border);
-		border-radius: var(--fd-radius-lg);
-		font-size: var(--fd-text-sm);
-		font-family: inherit;
-		color: var(--fd-foreground);
-		background-color: var(--fd-muted);
-		transition: all var(--fd-transition-normal);
-		box-shadow: var(--fd-shadow-sm);
-		cursor: pointer;
-		appearance: none;
-	}
+  .form-select {
+    width: 100%;
+    padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-lg);
+    font-size: var(--fd-text-sm);
+    font-family: inherit;
+    color: var(--fd-foreground);
+    background-color: var(--fd-muted);
+    transition: all var(--fd-transition-normal);
+    box-shadow: var(--fd-shadow-sm);
+    cursor: pointer;
+    appearance: none;
+  }
 
-	.form-select:hover {
-		border-color: var(--fd-border-strong);
-		background-color: var(--fd-background);
-	}
+  .form-select:hover {
+    border-color: var(--fd-border-strong);
+    background-color: var(--fd-background);
+  }
 
-	.form-select:focus {
-		outline: none;
-		border-color: var(--fd-primary);
-		background-color: var(--fd-background);
-		box-shadow:
-			0 0 0 3px rgba(59, 130, 246, 0.12),
-			var(--fd-shadow-sm);
-	}
+  .form-select:focus {
+    outline: none;
+    border-color: var(--fd-primary);
+    background-color: var(--fd-background);
+    box-shadow:
+      0 0 0 3px rgba(59, 130, 246, 0.12),
+      var(--fd-shadow-sm);
+  }
 
-	.form-select__icon {
-		position: absolute;
-		right: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		pointer-events: none;
-		color: var(--fd-muted-foreground);
-		display: flex;
-		align-items: center;
-		transition: color var(--fd-transition-normal);
-	}
+  .form-select__icon {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--fd-muted-foreground);
+    display: flex;
+    align-items: center;
+    transition: color var(--fd-transition-normal);
+  }
 
-	.form-select__icon :global(svg) {
-		width: 1rem;
-		height: 1rem;
-	}
+  .form-select__icon :global(svg) {
+    width: 1rem;
+    height: 1rem;
+  }
 
-	.form-select:focus + .form-select__icon {
-		color: var(--fd-primary);
-	}
+  .form-select:focus + .form-select__icon {
+    color: var(--fd-primary);
+  }
 </style>

package/dist/components/form/FormSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type FieldOption } from './types.js';
+import { type FieldOption } from "./types.js";
 interface Props {
     /** Field identifier */
     id: string;