tera-system-ui 0.1.64 → 0.1.66

package/dist/components/combobox/Combobox.svelte

@@ -1,8 +1,226 @@
-<script lang="ts">
-    import {type ComboboxProps, styles} from "./Combobox";
-    import {Popover} from "../popover";
-
-    let {children, ...props}: ComboboxProps = $props();
-
-</script>
-
+<script lang="ts">import { Combobox as ComboboxPrimitive } from 'bits-ui';
+import { cn } from '../../utils/utils.js';
+import { IconCheck, IconChevronDown } from '../icons/index.js';
+import IconX from '@tabler/icons-svelte/icons/x';
+let { type, items = [], value = $bindable(undefined), placeholder = 'Search…', disabled, loop, allowDeselect, onchange, class: className, ref = $bindable(null), name, required, scrollAlignment, freeInput = false, } = $props();
+let searchText = $state('');
+let open = $state(false);
+const filteredItems = $derived(searchText.trim()
+    ? items.filter(i => i.label.toLowerCase().includes(searchText.trim().toLowerCase()))
+    : items);
+// Label of the currently selected item (single mode), or '' if none / custom text
+const selectedLabel = $derived(type === 'single' && typeof value === 'string' && value
+    ? (items.find(i => i.value === value)?.label ?? '')
+    : '');
+const selectedChips = $derived(type === 'multiple' && Array.isArray(value)
+    ? value.map(v => ({ value: v, label: items.find(i => i.value === v)?.label ?? v }))
+    : []);
+/**
+ * inputValue passed to Combobox.Root for single mode:
+ * - freeInput mode: always controlled — show selected label when an item
+ *   matches, otherwise show the raw value (custom free text).
+ * - normal mode: undefined → let bits-ui manage it automatically.
+ *
+ * Setting this to '' on clear ensures the input text is wiped even when
+ * the dropdown animation is still playing.
+ */
+const controlledInputValue = $derived.by(() => {
+    if (type !== 'single')
+        return undefined;
+    if (freeInput) {
+        // Show label when value matches an item; otherwise the raw typed value
+        return selectedLabel || (typeof value === 'string' ? value : '') || '';
+    }
+    // Normal mode: after clearing, force the input empty; otherwise let bits-ui handle it
+    if (!value)
+        return '';
+    return undefined;
+});
+// In freeInput mode the X button is visible whenever the input has any text
+const showClearBtn = $derived(type === 'single' && (freeInput ? !!(value) : !!(value)));
+function handleSingleInput(e) {
+    searchText = e.currentTarget.value;
+    if (freeInput) {
+        // Typed text IS the value in free-input mode
+        value = searchText;
+        onchange?.(searchText);
+        // Close immediately (same tick) when no suggestions match —
+        // avoids a "no results" flash before a reactive effect would fire.
+        if (searchText.trim() && !items.some(i => i.label.toLowerCase().includes(searchText.trim().toLowerCase()))) {
+            open = false;
+        }
+    }
+}
+function clearOne(v) {
+    const next = value.filter(x => x !== v);
+    value = next;
+    onchange?.(next);
+}
+function clearAll() {
+    value = type === 'multiple' ? [] : undefined;
+    onchange?.(type === 'multiple' ? [] : '');
+    searchText = '';
+}
+const wrapperClass = $derived(cn('w-full inline-flex items-center gap-1 rounded-md outline-none font-normal text-left', 'border border-border-default bg-surface-control', 'transition-[border-color,box-shadow] ease-ui duration-150', 'hover:border-interactive', open && 'border-interactive-hover shadow-focus', disabled && 'cursor-not-allowed opacity-50 pointer-events-none', className));
+const dropdownClass = `z-50 overflow-hidden
+        bg-surface rounded-container border border-border-default shadow-lg
+        animate-in fade-in zoom-in-95 duration-150
+        data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`;
+const itemClass = `relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none
+        transition-colors ease-ui duration-100
+        data-[highlighted]:bg-surface-hover
+        data-[selected]:font-medium data-[selected]:text-interactive
+        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`;
+</script>
+
+{#if type === 'single'}
+    <ComboboxPrimitive.Root
+        type="single"
+        bind:value={value as string | undefined}
+        bind:open
+        onValueChange={(v) => onchange?.(v)}
+        {disabled}
+        {loop}
+        {allowDeselect}
+        {name}
+        {required}
+        {scrollAlignment}
+        {items}
+        inputValue={controlledInputValue}
+        onOpenChange={(o) => { if (!o) searchText = ''; }}
+    >
+        <div bind:this={ref} class={cn(wrapperClass, 'h-9 px-3')}>
+            <ComboboxPrimitive.Input
+                oninput={handleSingleInput}
+                placeholder={(!freeInput && selectedLabel) ? selectedLabel : placeholder}
+                clearOnDeselect
+                class="flex-1 min-w-0 bg-transparent text-sm text-text-primary placeholder:text-text-tertiary outline-none cursor-default"
+            />
+            {#if showClearBtn}
+                <button
+                    type="button"
+                    onpointerdown={(e) => e.stopPropagation()}
+                    onclick={(e) => { e.stopPropagation(); clearAll(); }}
+                    class="shrink-0 flex items-center justify-center size-4 rounded text-text-tertiary hover:text-text-primary"
+                    aria-label="Clear selection"
+                >
+                    <IconX class="size-3.5" />
+                </button>
+            {/if}
+            <ComboboxPrimitive.Trigger class="shrink-0 flex items-center justify-center text-text-tertiary hover:text-text-primary">
+                <IconChevronDown class={cn('size-4 transition-transform ease-ui duration-150', open && 'rotate-180')} />
+            </ComboboxPrimitive.Trigger>
+        </div>
+
+        {#if !freeInput || filteredItems.length > 0}
+            <ComboboxPrimitive.Portal>
+                <ComboboxPrimitive.Content
+                    sideOffset={4}
+                    customAnchor={ref}
+                    class={cn(dropdownClass, 'min-w-[var(--bits-combobox-anchor-width)]')}
+                >
+                    <ComboboxPrimitive.Viewport class="p-1 max-h-60 overflow-auto">
+                        {#each filteredItems as item (item.value)}
+                            <ComboboxPrimitive.Item
+                                value={item.value}
+                                label={item.label}
+                                disabled={item.disabled}
+                                class={itemClass}
+                            >
+                                {#snippet children({selected})}
+                                    <span class="flex-1">{item.label}</span>
+                                    {#if selected}
+                                        <IconCheck class="size-4 text-interactive shrink-0" />
+                                    {/if}
+                                {/snippet}
+                            </ComboboxPrimitive.Item>
+                        {:else}
+                            <div class="px-3 py-4 text-sm text-center text-text-tertiary">No results found.</div>
+                        {/each}
+                    </ComboboxPrimitive.Viewport>
+                </ComboboxPrimitive.Content>
+            </ComboboxPrimitive.Portal>
+        {/if}
+    </ComboboxPrimitive.Root>
+
+{:else}
+    <ComboboxPrimitive.Root
+        type="multiple"
+        bind:value={value as string[] | undefined}
+        bind:open
+        onValueChange={(v) => onchange?.(v)}
+        {disabled}
+        {loop}
+        {name}
+        {required}
+        {scrollAlignment}
+        onOpenChange={(o) => { if (!o) searchText = ''; }}
+    >
+        <div bind:this={ref} class={cn(wrapperClass, 'min-h-9 h-auto flex-wrap gap-1 px-3 py-1.5')}>
+            {#each selectedChips as chip (chip.value)}
+                <span class="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-full text-xs bg-interactive-subtle text-interactive-text border border-interactive-border shrink-0">
+                    {chip.label}
+                    <button
+                        type="button"
+                        onpointerdown={(e) => e.stopPropagation()}
+                        onclick={(e) => { e.stopPropagation(); clearOne(chip.value); }}
+                        class="flex items-center rounded-full hover:bg-interactive/20"
+                        aria-label="Remove {chip.label}"
+                    >
+                        <IconX class="size-3" />
+                    </button>
+                </span>
+            {/each}
+            <ComboboxPrimitive.Input
+                oninput={(e) => (searchText = e.currentTarget.value)}
+                placeholder={selectedChips.length === 0 ? placeholder : ''}
+                clearOnDeselect
+                class="flex-1 min-w-[80px] bg-transparent text-sm text-text-primary placeholder:text-text-tertiary outline-none cursor-default"
+            />
+            <span class="ml-auto flex items-center gap-1 shrink-0 self-center">
+                {#if selectedChips.length > 0}
+                    <button
+                        type="button"
+                        onpointerdown={(e) => e.stopPropagation()}
+                        onclick={(e) => { e.stopPropagation(); clearAll(); }}
+                        class="flex items-center justify-center size-4 rounded text-text-tertiary hover:text-text-primary"
+                        aria-label="Clear all"
+                    >
+                        <IconX class="size-3.5" />
+                    </button>
+                {/if}
+                <ComboboxPrimitive.Trigger class="flex items-center justify-center text-text-tertiary hover:text-text-primary">
+                    <IconChevronDown class={cn('size-4 transition-transform ease-ui duration-150', open && 'rotate-180')} />
+                </ComboboxPrimitive.Trigger>
+            </span>
+        </div>
+
+        <ComboboxPrimitive.Portal>
+            <ComboboxPrimitive.Content
+                sideOffset={4}
+                customAnchor={ref}
+                class={cn(dropdownClass, 'min-w-[var(--bits-combobox-anchor-width)]')}
+            >
+                <ComboboxPrimitive.Viewport class="p-1 max-h-60 overflow-auto">
+                    {#each filteredItems as item (item.value)}
+                        <ComboboxPrimitive.Item
+                            value={item.value}
+                            label={item.label}
+                            disabled={item.disabled}
+                            class={itemClass}
+                        >
+                            {#snippet children({selected})}
+                                <span class="flex-1">{item.label}</span>
+                                {#if selected}
+                                    <IconCheck class="size-4 text-interactive shrink-0" />
+                                {/if}
+                            {/snippet}
+                        </ComboboxPrimitive.Item>
+                    {:else}
+                        <div class="px-3 py-4 text-sm text-center text-text-tertiary">No results found.</div>
+                    {/each}
+                </ComboboxPrimitive.Viewport>
+            </ComboboxPrimitive.Content>
+        </ComboboxPrimitive.Portal>
+    </ComboboxPrimitive.Root>
+{/if}

package/dist/components/combobox/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ComboboxProps } from "./Combobox";
-declare const Combobox: import("svelte").Component<ComboboxProps, {}, "">;
+import type { ComboboxProps } from './Combobox.js';
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "ref">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/components/combobox/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Combobox } from './Combobox.svelte';
-export type { ComboboxProps } from './Combobox';
+export type { ComboboxProps, ComboboxItem } from './Combobox.js';

package/dist/components/command/components/command-empty.svelte

@@ -1,11 +1,6 @@
-<script lang="ts">
-    import { Command as CommandPrimitive } from "bits-ui";
-    import { cn } from "../../../utils";
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: CommandPrimitive.EmptyProps = $props();
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.Empty
         bind:ref

package/dist/components/command/components/command-group.svelte

@@ -1,16 +1,6 @@
-<script lang="ts">
-    import { Command as CommandPrimitive, useId } from "bits-ui";
-    import { cn } from "../../../utils";
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        heading,
-        value,
-        ...restProps
-    }: CommandPrimitive.GroupProps & {
-        heading?: string;
-    } = $props();
+<script lang="ts">import { Command as CommandPrimitive, useId } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, children, heading, value, ...restProps } = $props();
 </script>
 <CommandPrimitive.Group
         bind:ref

package/dist/components/command/components/command-input.svelte

@@ -1,16 +1,8 @@
-<script lang="ts">
-    import {Command as CommandPrimitive} from "bits-ui";
-    import {cn} from "../../../utils";
-    import {IconSearch} from "../../..";
-    import {styles} from "../../input/Input.js";
-
-    let {
-        autofocus = undefined,
-        ref = $bindable(null),
-        class: className,
-        value = $bindable(""),
-        ...restProps
-    }: CommandPrimitive.InputProps = $props();
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+import { IconSearch } from "../../..";
+import { styles } from "../../input/Input.js";
+let { autofocus = undefined, ref = $bindable(null), class: className, value = $bindable(""), ...restProps } = $props();
 </script>
 <div class="flex items-center border-b px-3" data-slot="command-input-wrapper">
     <IconSearch class="size-4 shrink-0 opacity-50"/>

package/dist/components/command/components/command-item.svelte

@@ -1,12 +1,6 @@
-<script lang="ts">
-    import {Command as CommandPrimitive} from "bits-ui";
-    import {cn} from "../../../utils";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: CommandPrimitive.ItemProps = $props();
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.Item
         bind:ref

package/dist/components/command/components/command-link-item.svelte

@@ -1,11 +1,6 @@
-<script lang="ts">
-    import { Command as CommandPrimitive } from "bits-ui";
-    import { cn } from "../../../utils";
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: CommandPrimitive.LinkItemProps = $props();
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.LinkItem
         bind:ref

package/dist/components/command/components/command-list.svelte

@@ -1,11 +1,6 @@
-<script lang="ts">
-    import { Command as CommandPrimitive } from "bits-ui";
-    import { cn } from "../../../utils";
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: CommandPrimitive.ListProps = $props();
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.List
         bind:ref

package/dist/components/command/components/command-separator.svelte

@@ -1,11 +1,6 @@
-<script lang="ts">
-    import { Command as CommandPrimitive } from "bits-ui";
-    import { cn } from "../../../utils";
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: CommandPrimitive.SeparatorProps = $props();
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
 </script>
 <CommandPrimitive.Separator
         bind:ref

package/dist/components/command/components/command-shortcut.svelte

@@ -1,13 +1,5 @@
-<script lang="ts">
-    import {cn, type WithElementRef} from "../../../utils";
-    import type {HTMLAttributes} from "svelte/elements";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+<script lang="ts">import { cn } from "../../../utils";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
 </script>
 <span
         bind:this={ref}

package/dist/components/command/components/command.svelte

@@ -1,45 +1,32 @@
-<script lang="ts">
-    import {Command as CommandPrimitive} from "bits-ui";
-    import {cn} from "../../../utils";
-    import "../command.scss"
-
-    let {
-        ref = $bindable(null),
-        value = $bindable(""),
-        command = $bindable(),
-        class: className,
-        selectedIndex,
-        ...restProps
-    }: CommandPrimitive.RootProps = $props();
-
-    $effect(() => {
-        if (!command || selectedIndex === undefined) return;
-        const items = command.getValidItems();
-        if (!items?.length) return;
-
-        setTimeout(() => {
-            if (selectedIndex < 0) {
-                const selectedItem = items.find((item: HTMLElement) =>
-                    item.hasAttribute('data-selected')
-                );
-
-                if (selectedItem) {
-                    selectedItem.removeAttribute("data-selected");
-
-                    // Use AbortController for cleanup
-                    const controller = new AbortController();
-                    selectedItem.addEventListener("pointerenter", () => {
-                        selectedItem.setAttribute("data-selected", "");
-                    }, {once: true, signal: controller.signal});
-
-                    // Cleanup on component unmount
-                    return () => controller.abort();
-                }
-            } else if (selectedIndex < items.length) {
-                command.updateSelectedToIndex(selectedIndex);
-            }
-        }, 6)
-    });
+<script lang="ts">import { Command as CommandPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+import "../command.scss";
+let { ref = $bindable(null), value = $bindable(""), command = $bindable(), class: className, selectedIndex, ...restProps } = $props();
+$effect(() => {
+    if (!command || selectedIndex === undefined)
+        return;
+    const items = command.getValidItems();
+    if (!items?.length)
+        return;
+    setTimeout(() => {
+        if (selectedIndex < 0) {
+            const selectedItem = items.find((item) => item.hasAttribute('data-selected'));
+            if (selectedItem) {
+                selectedItem.removeAttribute("data-selected");
+                // Use AbortController for cleanup
+                const controller = new AbortController();
+                selectedItem.addEventListener("pointerenter", () => {
+                    selectedItem.setAttribute("data-selected", "");
+                }, { once: true, signal: controller.signal });
+                // Cleanup on component unmount
+                return () => controller.abort();
+            }
+        }
+        else if (selectedIndex < items.length) {
+            command.updateSelectedToIndex(selectedIndex);
+        }
+    }, 6);
+});
 </script>
 <CommandPrimitive.Root
         bind:value