Feat combobox based on select

v2/pink-sb/src/lib/Combobox.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { Input } from '$lib/index.js';
+    import type { SelectProps } from '$lib/input/types.js';
+
+    type ComboboxProps = SelectProps & {
+        options: SelectProps['options'];
+        placeholder?: SelectProps['placeholder'];
+        label?: SelectProps['label'];
+        value?: SelectProps['value'];
+        id?: SelectProps['id'];
+        state?: SelectProps['state'];
+        helper?: SelectProps['helper'];
+        disabled?: SelectProps['disabled'];
+        readonly?: SelectProps['readonly'];
+    };
+
+    export let options: ComboboxProps['options'];
+    export let placeholder: ComboboxProps['placeholder'];
+    export let label: ComboboxProps['label'];
+    export let value: ComboboxProps['value'];
+    export let id: ComboboxProps['id'];
+    export let state: ComboboxProps['state'];
+    export let helper: ComboboxProps['helper'];
+    export let disabled: ComboboxProps['disabled'] = false;
+    export let readonly: ComboboxProps['readonly'] = false;
+</script>
+
+<div>
+    <Input.Select
+        {options}
+        {placeholder}
+        {label}
+        {value}
+        {id}
+        {state}
+        {helper}
+        {disabled}
+        {readonly}
+        isSearchable={true}
+    />
+</div>

v2/pink-sb/src/lib/input/Select.svelte

@@ -1,39 +1,26 @@
 <script lang="ts">
     import Base from './Base.svelte';
-    import type { States } from './types.js';
+    import type { SelectProps, States } from './types.js';
     import { createSelect } from '@melt-ui/svelte';
     import { Icon, Badge } from '$lib/index.js';
-    import { createEventDispatcher, type ComponentType } from 'svelte';
+    import { createEventDispatcher } from 'svelte';
     import { IconChevronDown, IconChevronUp } from '@appwrite.io/pink-icons-svelte';
-    import type { HTMLInputAttributes } from 'svelte/elements';
-
-    type $$Props = Omit<HTMLInputAttributes, 'value'> & {
-        options: Array<{
-            label: string;
-            value: string | boolean | number | null;
-            disabled?: boolean;
-            readonly?: boolean;
-            badge?: string;
-            leadingIcon?: ComponentType;
-            trailingIcon?: ComponentType;
-            leadingHtml?: string;
-        }>;
-    } & Partial<{
-            value: string | boolean | number | null;
-            label: string;
-            state: States;
-            helper: string;
-        }>;
 
     export let state: States = 'default';
-    export let options: $$Props['options'];
-    export let placeholder: $$Props['placeholder'] = 'Select an option';
-    export let disabled: $$Props['disabled'] = false;
-    export let label: $$Props['label'] = undefined;
-    export let value: $$Props['value'] = undefined;
-    export let id: $$Props['id'] = undefined;
-    export let helper: $$Props['helper'] = undefined;
-    export let readonly: $$Props['readonly'] = false;
+    export let options: SelectProps['options'];
+    export let placeholder: SelectProps['placeholder'] = 'Select an option';
+    export let disabled: SelectProps['disabled'] = false;
+    export let label: SelectProps['label'] = undefined;
+    export let value: SelectProps['value'] = undefined;
+    export let id: SelectProps['id'] = undefined;
+    export let helper: SelectProps['helper'] = undefined;
+    export let readonly: SelectProps['readonly'] = false;
+    export let isSearchable: SelectProps['isSearchable'] = false;
+
+    let searchQuery: string = '';
+    $: filteredOptions = isSearchable
+        ? options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()))
+        : options;
 
     const dispatch = createEventDispatcher();
     let selectedLeadingHtml: undefined | string = undefined;
@@ -59,14 +46,15 @@
             value = event.next?.value;
             selectedLeadingHtml = options.find((option) => option.value === value)?.leadingHtml;
             dispatch('change', value);
+            searchQuery = event.next?.label;
             return event.next;
         }
     });
 </script>
 
 <Base {id} {label} {helper} {state}>
     <input type="hidden" {...$$restProps} {disabled} {readonly} {value} on:invalid />
-    <button
+    <div
         {...$trigger}
         use:trigger
         class="input"
@@ -77,22 +65,27 @@
         class:warning={state === 'warning'}
         class:error={state === 'error'}
         disabled={disabled || readonly}
+        role={!isSearchable && 'button'}
     >
-        <span>
-            {#if $selectedLabel}
-                {#if selectedLeadingHtml}
-                    {@html selectedLeadingHtml}
+        {#if isSearchable}
+            <input type="text" class="search-input" bind:value={searchQuery} />
+        {:else}
+            <span>
+                {#if $selectedLabel}
+                    {#if selectedLeadingHtml}
+                        {@html selectedLeadingHtml}
+                    {/if}
+                    {$selectedLabel}
+                {:else}
+                    {placeholder}
                 {/if}
-                {$selectedLabel}
-            {:else}
-                {placeholder}
-            {/if}
-        </span>
+            </span>
+        {/if}
         <Icon size="m" icon={$open ? IconChevronUp : IconChevronDown} />
-    </button>
+    </div>
     {#if $open}
         <ul {...$menu} use:menu>
-            {#each options as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon, leadingHtml }}
+            {#each filteredOptions as { value, label, badge, disabled, readonly, leadingIcon, trailingIcon, leadingHtml }}
                 <li {...$option({ value, label, disabled })} use:option>
                     {#if leadingHtml}
                         {@html leadingHtml}
@@ -183,4 +176,8 @@
             }
         }
     }
+    .search-input {
+        flex-grow: 1;
+        color: var(--color-fgcolor-neutral-primary);
+    }
 </style>

v2/pink-sb/src/lib/input/types.ts

@@ -1 +1,23 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type ComponentType } from 'svelte';
+
 export type States = 'default' | 'success' | 'warning' | 'error';
+
+export type SelectProps = Omit<HTMLInputAttributes, 'value'> & {
+    options: Array<{
+        label: string;
+        value: string | boolean | number | null;
+        disabled?: boolean;
+        readonly?: boolean;
+        badge?: string;
+        leadingIcon?: ComponentType;
+        trailingIcon?: ComponentType;
+        leadingHtml?: string;
+    }>;
+    isSearchable?: boolean;
+} & Partial<{
+        value: string | boolean | number | null;
+        label: string;
+        state: States;
+        helper: string;
+    }>;

v2/pink-sb/src/stories/Combobox.stories.svelte

@@ -0,0 +1,65 @@
+<script context="module" lang="ts">
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+    import Combobox from '$lib/Combobox.svelte';
+
+    export const meta: MetaProps = {
+        title: 'Components/Combobox',
+        component: Combobox,
+        args: {
+            id: 'id',
+            name: 'name',
+            label: 'Label',
+            placeholder: 'Select option',
+            value: '',
+            options: [
+                {
+                    label: 'Option 1',
+                    value: 'option1'
+                },
+                {
+                    label: 'Option 2',
+                    value: 'option2'
+                },
+                {
+                    label: 'Option 3',
+                    value: 'option3'
+                },
+                {
+                    label: 'Option 4',
+                    badge: 'badge',
+                    value: 'option4'
+                },
+                {
+                    label: 'Option 5',
+                    disabled: true,
+                    value: 'option5'
+                }
+            ]
+        },
+        argTypes: {
+            state: {
+                options: ['default', 'success', 'warning', 'error'],
+                control: { type: 'select' }
+            }
+        }
+    };
+</script>
+
+<div class="container">
+    <div class="wrapper">
+        <Story name="Default" let:args>
+            <Combobox {...args} />
+        </Story>
+    </div>
+</div>
+
+<style>
+    .container {
+        margin: 100px auto;
+        width: fit-content;
+    }
+    .wrapper {
+        padding: 100px;
+    }
+</style>