kumo-svelte 0.1.0-beta.0

package/src/lib/components/combobox/ComboboxList.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { ItemSnippet } from './context';
+  import { getComboboxContext } from './context';
+  import { cn } from '$lib/utils/cn';
+
+  export interface Props {
+    children?: ItemSnippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+  const context = getComboboxContext('Combobox.List');
+</script>
+
+<div
+  class={cn('min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pb-2 scroll-pt-2', className)}
+  {...rest}
+>
+  {#if children}
+    {#each context.filteredItems as item (item.label)}
+      {@render children(item.raw)}
+    {/each}
+  {/if}
+</div>

package/src/lib/components/combobox/ComboboxTrigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getComboboxContext } from './context';
+  import { cn } from '$lib/utils/cn';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+  const context = getComboboxContext('Combobox.Trigger');
+</script>
+
+<button
+  type="button"
+  class={cn('inline-flex items-center gap-2', className)}
+  disabled={context.disabled}
+  onclick={() => (context.open = !context.open)}
+  {...rest}
+>
+  {@render children?.()}
+</button>

package/src/lib/components/combobox/ComboboxTriggerInput.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { CaretDown, X } from 'phosphor-svelte';
+  import { cn } from '$lib/utils/cn';
+  import { embeddedInputStyles, getComboboxContext, iconSizes, inputStyles, type ComboboxSize } from './context';
+
+  export interface Props {
+    class?: string;
+    placeholder?: string;
+    size?: ComboboxSize;
+    clearLabel?: string;
+    showOptionsLabel?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    class: className,
+    placeholder,
+    size,
+    clearLabel = 'Clear selection',
+    showOptionsLabel = 'Show options',
+    ...rest
+  }: Props = $props();
+
+  const context = getComboboxContext('Combobox.TriggerInput');
+  const resolvedSize = $derived(size ?? context.size);
+  const displayValue = $derived(context.open || context.multiple ? context.query : context.labelFor(context.value));
+  const hasValue = $derived(context.multiple ? Array.isArray(context.value) && context.value.length > 0 : Boolean(context.value));
+
+  const iconPadding: Record<ComboboxSize, string> = {
+    xs: 'pr-7',
+    sm: 'pr-9',
+    base: 'pr-12',
+    lg: 'pr-14'
+  };
+
+  const clearRight: Record<ComboboxSize, string> = {
+    xs: 'right-5',
+    sm: 'right-6',
+    base: 'right-8',
+    lg: 'right-9'
+  };
+
+  const caretRight: Record<ComboboxSize, string> = {
+    xs: 'right-1',
+    sm: 'right-1.5',
+    base: 'right-2',
+    lg: 'right-3'
+  };
+</script>
+
+<div
+  class={cn(
+    'relative inline-block w-full max-w-xs',
+    'has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50',
+    className
+  )}
+>
+  <input
+    class={cn(
+      inputStyles[resolvedSize],
+      'w-full border-0 bg-kumo-control text-kumo-default shadow-xs ring ring-kumo-line outline-none',
+      'placeholder:text-kumo-placeholder disabled:cursor-not-allowed disabled:text-kumo-disabled',
+      context.invalid
+        ? '!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]'
+        : 'focus:ring-kumo-focus/50 focus:ring-[1.5px]',
+      iconPadding[resolvedSize]
+    )}
+    value={displayValue}
+    {placeholder}
+    disabled={context.disabled}
+    aria-invalid={context.invalid || undefined}
+    oninput={(event) => {
+      context.query = (event.currentTarget as HTMLInputElement).value;
+      context.open = true;
+    }}
+    onfocus={() => (context.open = true)}
+    {...rest}
+  />
+
+  <button
+    type="button"
+    aria-label={clearLabel}
+    class={cn(
+      'absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0 text-kumo-default',
+      'disabled:pointer-events-none disabled:opacity-0',
+      clearRight[resolvedSize]
+    )}
+    disabled={context.disabled || !hasValue}
+    onclick={() => (context.value = context.multiple ? [] : null)}
+  >
+    <X size={iconSizes[resolvedSize]} />
+  </button>
+
+  <button
+    type="button"
+    aria-label={showOptionsLabel}
+    class={cn(
+      'absolute top-1/2 m-0 flex -translate-y-1/2 cursor-pointer items-center justify-center bg-transparent p-0 text-kumo-subtle',
+      caretRight[resolvedSize]
+    )}
+    disabled={context.disabled}
+    onclick={() => (context.open = !context.open)}
+  >
+    <CaretDown size={iconSizes[resolvedSize]} class="fill-current" />
+  </button>
+</div>

package/src/lib/components/combobox/ComboboxTriggerMultipleWithInput.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { getComboboxContext, inputStyles, type ComboboxInputSide, type ComboboxSize } from './context';
+
+  export interface Props {
+    children?: Snippet<[any]>;
+    class?: string;
+    placeholder?: string;
+    inputSide?: ComboboxInputSide;
+    value?: unknown[];
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    placeholder,
+    inputSide = 'right',
+    value,
+    ...rest
+  }: Props = $props();
+
+  const context = getComboboxContext('Combobox.TriggerMultipleWithInput');
+  const selectedValues = $derived(value ?? (Array.isArray(context.value) ? context.value : []));
+  const sizeToMinHeight: Record<ComboboxSize, string> = {
+    xs: 'min-h-5',
+    sm: 'min-h-6.5',
+    base: 'min-h-9',
+    lg: 'min-h-10'
+  };
+</script>
+
+<div
+  class={cn(
+    inputStyles[context.size],
+    'flex h-auto flex-col gap-1 border-0 bg-kumo-control px-1.5 py-1 text-kumo-default shadow-xs ring ring-kumo-line outline-none',
+    sizeToMinHeight[context.size],
+    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+    className
+  )}
+  data-disabled={context.disabled || undefined}
+  {...rest}
+>
+  {#if inputSide === 'top'}
+    <input
+      class="w-full border-0 bg-inherit px-2 py-1 outline-none placeholder:text-kumo-placeholder"
+      {placeholder}
+      value={context.query}
+      disabled={context.disabled}
+      oninput={(event) => {
+        context.query = (event.currentTarget as HTMLInputElement).value;
+        context.open = true;
+      }}
+      onfocus={() => (context.open = true)}
+    />
+  {/if}
+  <div class="flex flex-1 flex-wrap items-center gap-1.5">
+    {#each selectedValues as selected (typeof selected === 'object' && selected && 'value' in selected ? String(selected.value) : String(selected))}
+      {@render children?.(selected)}
+    {/each}
+    {#if inputSide === 'right'}
+      <input
+        class="min-w-[100px] flex-1 border-0 bg-inherit px-2 py-1 outline-none placeholder:text-kumo-placeholder"
+        {placeholder}
+        value={context.query}
+        disabled={context.disabled}
+        oninput={(event) => {
+          context.query = (event.currentTarget as HTMLInputElement).value;
+          context.open = true;
+        }}
+        onfocus={() => (context.open = true)}
+      />
+    {/if}
+  </div>
+</div>

package/src/lib/components/combobox/ComboboxTriggerValue.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { CaretDown } from 'phosphor-svelte';
+  import { cn } from '$lib/utils/cn';
+  import { getComboboxContext, iconSizes, inputStyles, type ComboboxSize } from './context';
+
+  export interface Props {
+    class?: string;
+    placeholder?: string;
+    size?: ComboboxSize;
+    [key: string]: unknown;
+  }
+
+  let { class: className, placeholder, size, ...rest }: Props = $props();
+  const context = getComboboxContext('Combobox.TriggerValue');
+  const resolvedSize = $derived(size ?? context.size);
+  const displayValue = $derived(context.labelFor(context.value));
+
+  const iconPadding: Record<ComboboxSize, string> = {
+    xs: 'pr-5',
+    sm: 'pr-6',
+    base: 'pr-8',
+    lg: 'pr-10'
+  };
+
+  const iconRight: Record<ComboboxSize, string> = {
+    xs: 'right-1',
+    sm: 'right-1.5',
+    base: 'right-2',
+    lg: 'right-3'
+  };
+</script>
+
+<button
+  type="button"
+  class={cn(
+    inputStyles[resolvedSize],
+    'relative flex w-full items-center border-0 bg-kumo-control text-left font-normal text-kumo-default shadow-xs ring ring-kumo-line outline-none',
+    'focus:ring-kumo-focus/50 focus:ring-[1.5px] disabled:cursor-not-allowed disabled:opacity-50',
+    !displayValue && 'text-kumo-placeholder',
+    iconPadding[resolvedSize],
+    className
+  )}
+  disabled={context.disabled}
+  onclick={() => (context.open = !context.open)}
+  {...rest}
+>
+  <span class="min-w-0 flex-1 truncate">{displayValue || placeholder}</span>
+  <span class={cn('absolute top-1/2 flex -translate-y-1/2 items-center text-kumo-subtle', iconRight[resolvedSize])}>
+    <CaretDown size={iconSizes[resolvedSize]} class="fill-current" />
+  </span>
+</button>

package/src/lib/components/combobox/ComboboxValue.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getComboboxContext } from './context';
+
+  export interface Props {
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let { children, ...rest }: Props = $props();
+  const context = getComboboxContext('Combobox.Value');
+</script>
+
+<span {...rest}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {context.labelFor(context.value)}
+  {/if}
+</span>

package/src/lib/components/combobox/context.ts

@@ -0,0 +1,97 @@
+import type { Snippet } from 'svelte';
+import { getContext, setContext } from 'svelte';
+
+export type ComboboxSize = 'xs' | 'sm' | 'base' | 'lg';
+export type ComboboxInputSide = 'right' | 'top';
+export type ComboboxItem = string | {
+  label?: string;
+  value?: unknown;
+  disabled?: boolean;
+  [key: string]: unknown;
+};
+
+export type NormalizedComboboxItem = {
+  label: string;
+  value: unknown;
+  disabled?: boolean;
+  raw: ComboboxItem;
+};
+
+export type ComboboxContext = {
+  get items(): NormalizedComboboxItem[];
+  get filteredItems(): NormalizedComboboxItem[];
+  get query(): string;
+  set query(value: string);
+  get value(): unknown;
+  set value(value: unknown);
+  get open(): boolean;
+  set open(value: boolean);
+  get multiple(): boolean;
+  get disabled(): boolean;
+  get size(): ComboboxSize;
+  get invalid(): boolean;
+  isSelected(item: NormalizedComboboxItem): boolean;
+  select(item: NormalizedComboboxItem): void;
+  remove(item: unknown): void;
+  labelFor(value: unknown): string;
+};
+
+export type ComboboxGroupContext = {
+  get items(): NormalizedComboboxItem[];
+};
+
+const COMBOBOX_CONTEXT = Symbol('kumo-combobox');
+const COMBOBOX_GROUP_CONTEXT = Symbol('kumo-combobox-group');
+
+export const inputStyles: Record<ComboboxSize, string> = {
+  xs: 'h-5 rounded-sm px-1.5 text-xs',
+  sm: 'h-6.5 rounded-md px-2 text-xs',
+  base: 'h-9 rounded-lg px-3 text-base',
+  lg: 'h-10 rounded-lg px-4 text-base'
+};
+
+export const embeddedInputStyles: Record<ComboboxSize, string> = {
+  xs: 'h-4 text-xs',
+  sm: 'h-4.5 text-xs',
+  base: 'h-6 text-base',
+  lg: 'h-6 text-base'
+};
+
+export const iconSizes: Record<ComboboxSize, number> = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18
+};
+
+export type ItemSnippet = Snippet<[any]>;
+
+export function setComboboxContext(context: ComboboxContext) {
+  setContext(COMBOBOX_CONTEXT, context);
+}
+
+export function getComboboxContext(component: string) {
+  const context = getContext<ComboboxContext | undefined>(COMBOBOX_CONTEXT);
+  if (!context) throw new Error(`${component} must be used inside <Combobox>.`);
+  return context;
+}
+
+export function setComboboxGroupContext(context: ComboboxGroupContext) {
+  setContext(COMBOBOX_GROUP_CONTEXT, context);
+}
+
+export function getComboboxGroupContext() {
+  return getContext<ComboboxGroupContext | undefined>(COMBOBOX_GROUP_CONTEXT);
+}
+
+export function normalizeComboboxItem(item: ComboboxItem): NormalizedComboboxItem {
+  if (typeof item === 'string') return { label: item, value: item, raw: item };
+
+  const value = item;
+  return {
+    label: String(item.label ?? item.value ?? ''),
+    value,
+    disabled: item.disabled,
+    raw: item
+  };
+}

package/src/lib/components/combobox/index.ts

@@ -0,0 +1,55 @@
+import Root from './Combobox.svelte';
+import Content from './ComboboxContent.svelte';
+import TriggerInput from './ComboboxTriggerInput.svelte';
+import TriggerValue from './ComboboxTriggerValue.svelte';
+import TriggerMultipleWithInput from './ComboboxTriggerMultipleWithInput.svelte';
+import Item from './ComboboxItem.svelte';
+import Chip from './ComboboxChip.svelte';
+import Input from './ComboboxInput.svelte';
+import Empty from './ComboboxEmpty.svelte';
+import GroupLabel from './ComboboxGroupLabel.svelte';
+import Group from './ComboboxGroup.svelte';
+import List from './ComboboxList.svelte';
+import Collection from './ComboboxCollection.svelte';
+import Trigger from './ComboboxTrigger.svelte';
+import Value from './ComboboxValue.svelte';
+import Icon from './ComboboxIcon.svelte';
+
+export const Combobox = Object.assign(Root, {
+  Content,
+  TriggerInput,
+  TriggerValue,
+  TriggerMultipleWithInput,
+  Chip,
+  Item,
+  Input,
+  Empty,
+  GroupLabel,
+  Group,
+  List,
+  Collection,
+  Trigger,
+  Value,
+  Icon
+});
+
+export {
+  Root as ComboboxRoot,
+  Content as ComboboxContent,
+  TriggerInput as ComboboxTriggerInput,
+  TriggerValue as ComboboxTriggerValue,
+  TriggerMultipleWithInput as ComboboxTriggerMultipleWithInput,
+  Chip as ComboboxChip,
+  Item as ComboboxItem,
+  Input as ComboboxInput,
+  Empty as ComboboxEmpty,
+  GroupLabel as ComboboxGroupLabel,
+  Group as ComboboxGroup,
+  List as ComboboxList,
+  Collection as ComboboxCollection,
+  Trigger as ComboboxTrigger,
+  Value as ComboboxValue,
+  Icon as ComboboxIcon
+};
+
+export type { ComboboxInputSide, ComboboxItem as ComboboxOption, ComboboxSize } from './context';

package/src/lib/components/command-palette/CommandPalette.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  export interface CommandPaletteCommand {
+    label: string;
+    value?: string;
+    action?: () => void;
+    disabled?: boolean;
+    description?: string;
+    group?: string;
+    keywords?: string[];
+  }
+
+  interface GroupedCommand {
+    label?: string;
+    items: CommandPaletteCommand[];
+  }
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    commands?: CommandPaletteCommand[];
+    placeholder?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onSelect?: (command: CommandPaletteCommand, options: { newTab: boolean }) => void;
+    label?: string;
+    loop?: boolean;
+    shouldFilter?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    inputClass?: string;
+    listClass?: string;
+    itemClass?: string;
+    inputProps?: Record<string, unknown>;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    commands = [],
+    placeholder = 'Type a command...',
+    value = $bindable(''),
+    onValueChange,
+    onSelect,
+    label = 'Command menu',
+    loop = true,
+    shouldFilter = true,
+    loading = false,
+    loadingText = 'Loading...',
+    emptyText = 'No results found.',
+    inputClass,
+    listClass,
+    itemClass,
+    inputProps,
+    ...rest
+  }: Props = $props();
+
+  let search = $state('');
+  let selectInNewTab = false;
+
+  const groupedCommands = $derived.by<GroupedCommand[]>(() => {
+    const grouped: GroupedCommand[] = [];
+    const ungrouped: CommandPaletteCommand[] = [];
+
+    for (const command of commands) {
+      if (!command.group) {
+        ungrouped.push(command);
+        continue;
+      }
+
+      const group = grouped.find((entry) => entry.label === command.group);
+      if (group) {
+        group.items.push(command);
+      } else {
+        grouped.push({ label: command.group, items: [command] });
+      }
+    }
+
+    return [...(ungrouped.length ? [{ items: ungrouped }] : []), ...grouped];
+  });
+
+  function commandValue(command: CommandPaletteCommand) {
+    return command.value ?? command.label;
+  }
+
+  function handleValueChange(nextValue: string) {
+    value = nextValue;
+    onValueChange?.(nextValue);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      selectInNewTab = event.metaKey || event.ctrlKey;
+    }
+  }
+
+  function handleSelect(command: CommandPaletteCommand) {
+    command.action?.();
+    onSelect?.(command, { newTab: selectInNewTab });
+    selectInNewTab = false;
+  }
+</script>
+
+<CommandPrimitive.Root
+  class={cn('overflow-hidden rounded-xl bg-kumo-base shadow-lg ring ring-kumo-hairline', className)}
+  {label}
+  {loop}
+  {shouldFilter}
+  {value}
+  onValueChange={handleValueChange}
+  onkeydown={handleKeydown}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <CommandPrimitive.Input
+      bind:value={search}
+      {placeholder}
+      {...inputProps}
+      class={cn(
+        'h-11 w-full border-b border-kumo-line bg-transparent px-3 text-base text-kumo-default outline-none placeholder:text-kumo-muted',
+        inputClass
+      )}
+    />
+    <CommandPrimitive.List class={cn('max-h-72 overflow-auto p-1', listClass)}>
+      {#if loading}
+        <CommandPrimitive.Loading class="px-2 py-6 text-center text-sm text-kumo-subtle">
+          {loadingText}
+        </CommandPrimitive.Loading>
+      {:else}
+        {#each groupedCommands as group (group.label ?? '__ungrouped')}
+          <CommandPrimitive.Group value={group.label} class="py-1">
+            {#if group.label}
+              <CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-kumo-subtle">
+                {group.label}
+              </CommandPrimitive.GroupHeading>
+            {/if}
+            <CommandPrimitive.GroupItems>
+              {#each group.items as command (commandValue(command))}
+                <CommandPrimitive.Item
+                  value={commandValue(command)}
+                  keywords={command.keywords}
+                  disabled={command.disabled}
+                  onSelect={() => handleSelect(command)}
+                  class={cn(
+                    'flex min-h-8 cursor-default select-none flex-col rounded-md px-2 py-1.5 text-left text-sm text-kumo-default outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-kumo-tint',
+                    itemClass
+                  )}
+                >
+                  <span>{command.label}</span>
+                  {#if command.description}
+                    <span class="text-xs text-kumo-subtle">{command.description}</span>
+                  {/if}
+                </CommandPrimitive.Item>
+              {/each}
+            </CommandPrimitive.GroupItems>
+          </CommandPrimitive.Group>
+        {/each}
+        <CommandPrimitive.Empty class="px-2 py-6 text-center text-sm text-kumo-subtle">
+          {emptyText}
+        </CommandPrimitive.Empty>
+      {/if}
+    </CommandPrimitive.List>
+  {/if}
+</CommandPrimitive.Root>

package/src/lib/components/command-palette/CommandPaletteDialog.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    trigger?: Snippet<[Record<string, unknown>]>;
+    class?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    [key: string]: unknown;
+  }
+
+  let { children, trigger, class: className, open = $bindable(false), onOpenChange, ...rest }: Props = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {onOpenChange}>
+  {#if trigger}
+    <DialogPrimitive.Trigger>
+      {#snippet child({ props })}
+        {@render trigger(props)}
+      {/snippet}
+    </DialogPrimitive.Trigger>
+  {/if}
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay class="fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" />
+    <DialogPrimitive.Content
+      class={cn(
+        'fixed top-1/2 left-1/2 w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default shadow-lg ring ring-kumo-hairline outline-none sm:max-w-xl',
+        className
+      )}
+      {...rest}
+    >
+      {@render children?.()}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/src/lib/components/command-palette/CommandPaletteEmpty.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    forceMount?: boolean;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, forceMount, ...rest }: Props = $props();
+</script>
+
+<CommandPrimitive.Empty {forceMount} class={cn('px-2 py-6 text-center text-sm text-kumo-subtle', className)} {...rest}>
+  {@render children?.()}
+</CommandPrimitive.Empty>