kumo-svelte 0.1.0-beta.0

package/dist/command-line/utils/config.js

@@ -0,0 +1,27 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+export const DEFAULT_CONFIG = {
+    blocksDir: 'src/components/kumo',
+    version: '1.0.0'
+};
+export function readConfig(projectRoot = process.cwd()) {
+    const configPath = join(projectRoot, 'kumo.json');
+    if (!existsSync(configPath))
+        return null;
+    try {
+        const config = JSON.parse(readFileSync(configPath, 'utf-8'));
+        return { ...DEFAULT_CONFIG, ...config };
+    }
+    catch (error) {
+        throw new Error(`Failed to parse kumo.json: ${error instanceof Error ? error.message : String(error)}`, { cause: error });
+    }
+}
+export function writeConfig(config, projectRoot = process.cwd()) {
+    const configPath = join(projectRoot, 'kumo.json');
+    const content = JSON.stringify({ ...DEFAULT_CONFIG, ...config }, null, 2) + '\n';
+    writeFileSync(configPath, content, 'utf-8');
+}
+export function configExists(projectRoot = process.cwd()) {
+    return existsSync(join(projectRoot, 'kumo.json'));
+}
+//# sourceMappingURL=config.js.map

package/dist/command-line/utils/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../src/command-line/utils/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,SAAS,EAAE,qBAAqB;IAChC,OAAO,EAAE,OAAO;CACjB,CAAC;AAIF,MAAM,UAAU,UAAU,CAAC,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAClD,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzC,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;QAC7D,OAAO,EAAE,GAAG,cAAc,EAAE,GAAG,MAAM,EAAE,CAAC;IAC1C,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CACb,8BAA8B,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EACtF,EAAE,KAAK,EAAE,KAAK,EAAE,CACjB,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,MAA2B,EAAE,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;IAClF,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,GAAG,cAAc,EAAE,GAAG,MAAM,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC;IACjF,aAAa,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAC9C,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;IACtD,OAAO,UAAU,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;AACpD,CAAC"}

package/dist/command-line/utils/paths.js

@@ -0,0 +1,30 @@
+import { existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+export function packageRootFrom(metaUrl) {
+    const currentDir = dirname(fileURLToPath(metaUrl));
+    const candidates = [
+        join(currentDir, '..', '..', '..'),
+        join(currentDir, '..', '..'),
+        process.cwd()
+    ];
+    for (const candidate of candidates) {
+        if (existsSync(join(candidate, 'package.json')))
+            return candidate;
+    }
+    return candidates[0];
+}
+export function findPackageFile(metaUrl, relativePath) {
+    const root = packageRootFrom(metaUrl);
+    const candidates = [
+        join(root, relativePath),
+        join(root, 'dist', relativePath),
+        join(root, 'src', relativePath)
+    ];
+    for (const candidate of candidates) {
+        if (existsSync(candidate))
+            return candidate;
+    }
+    return null;
+}
+//# sourceMappingURL=paths.js.map

package/dist/command-line/utils/paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.js","sourceRoot":"","sources":["../../../src/command-line/utils/paths.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,UAAU,eAAe,CAAC,OAAe;IAC7C,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QAClC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC;QAC5B,OAAO,CAAC,GAAG,EAAE;KACd,CAAC;IAEF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;YAAE,OAAO,SAAS,CAAC;IACpE,CAAC;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,OAAe,EAAE,YAAoB;IACnE,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,UAAU,GAAG;QACjB,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;QACxB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC;QAChC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC;KAChC,CAAC;IAEF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,UAAU,CAAC,SAAS,CAAC;YAAE,OAAO,SAAS,CAAC;IAC9C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/command-line/utils/registry.js

@@ -0,0 +1,13 @@
+import { readFileSync } from 'node:fs';
+import { findPackageFile } from './paths.js';
+export function loadRegistry(metaUrl = import.meta.url) {
+    const registryPath = findPackageFile(metaUrl, 'ai/component-registry.json');
+    if (!registryPath) {
+        throw new Error('component-registry.json not found.');
+    }
+    return JSON.parse(readFileSync(registryPath, 'utf-8'));
+}
+export function formatComponentName(name) {
+    return String(name).replace(/[\s_-]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''));
+}
+//# sourceMappingURL=registry.js.map

package/dist/command-line/utils/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/command-line/utils/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAmC7C,MAAM,UAAU,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;IACpD,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAC;IAC5E,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;IACxD,CAAC;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAsB,CAAC;AAC9E,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAY;IAC9C,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7F,CAAC"}

package/dist/command-line/utils/transformer.js

@@ -0,0 +1,10 @@
+const PACKAGE_NAME = 'kumo-svelte';
+function shouldTransform(path) {
+    return (path.startsWith('$lib/components/') ||
+        path.startsWith('$lib/utils/') ||
+        (path.startsWith('../') && (path.includes('/components/') || path.includes('/utils/'))));
+}
+export function transformImports(content) {
+    return content.replace(/from\s+["'](?:(?:\.\.\/)+(?:components|utils)\/[^"']+|\$lib\/(?:components|utils)\/[^"']+)["'];?/g, `from '${PACKAGE_NAME}';`);
+}
+//# sourceMappingURL=transformer.js.map

package/dist/command-line/utils/transformer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformer.js","sourceRoot":"","sources":["../../../src/command-line/utils/transformer.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,aAAa,CAAC;AAEnC,SAAS,eAAe,CAAC,IAAY;IACnC,OAAO,CACL,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC9B,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CACxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAAe;IAC9C,OAAO,OAAO,CAAC,OAAO,CACpB,mGAAmG,EACnG,SAAS,YAAY,IAAI,CAC1B,CAAC;AACJ,CAAC"}

package/dist/components/autocomplete/Autocomplete.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Field from '../field/Field.svelte';
+  import { cn } from '../../utils/cn';
+  import {
+    normalizeAutocompleteItem,
+    setAutocompleteContext,
+    type AutocompleteItem,
+    type AutocompleteSize,
+    type NormalizedAutocompleteItem
+  } from './context';
+
+  type FieldError = string | { message?: string; match?: boolean };
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    items?: AutocompleteItem[];
+    value?: string;
+    defaultValue?: string;
+    open?: boolean;
+    size?: AutocompleteSize;
+    label?: string | Snippet;
+    description?: string | Snippet;
+    error?: FieldError;
+    required?: boolean;
+    filter?: ((item: AutocompleteItem, query: string) => boolean) | null;
+    onValueChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    items = [],
+    defaultValue,
+    value = $bindable(defaultValue ?? ''),
+    open = $bindable(false),
+    size = 'base',
+    label,
+    description,
+    error,
+    required,
+    filter,
+    onValueChange,
+    onOpenChange,
+    ...rest
+  }: Props = $props();
+
+  let query = $state(value);
+
+  const normalizedItems = $derived(items.map(normalizeAutocompleteItem));
+  const errorMessage = $derived(
+    typeof error === 'string' ? error : error?.match === false ? undefined : error?.message
+  );
+  const filteredItems = $derived.by<NormalizedAutocompleteItem[]>(() => {
+    const term = query.trim().toLowerCase();
+    if (!term) return normalizedItems;
+    if (filter === null) return normalizedItems;
+
+    return normalizedItems.filter((item) => {
+      if (filter) return filter(item.raw, query);
+      return item.label.toLowerCase().includes(term) || item.value.toLowerCase().includes(term);
+    });
+  });
+
+  function select(item: NormalizedAutocompleteItem) {
+    if (item.disabled) return;
+    value = item.value;
+    query = item.label;
+    open = false;
+    onValueChange?.(item.value);
+    onOpenChange?.(false);
+  }
+
+  setAutocompleteContext({
+    get items() {
+      return normalizedItems;
+    },
+    get filteredItems() {
+      return filteredItems;
+    },
+    get query() {
+      return query;
+    },
+    set query(nextQuery: string) {
+      query = nextQuery;
+      value = nextQuery;
+      onValueChange?.(nextQuery);
+    },
+    get value() {
+      return value;
+    },
+    set value(nextValue: string) {
+      value = nextValue;
+      onValueChange?.(nextValue);
+    },
+    get open() {
+      return open;
+    },
+    set open(nextOpen: boolean) {
+      open = nextOpen;
+      onOpenChange?.(nextOpen);
+    },
+    get size() {
+      return size;
+    },
+    get invalid() {
+      return Boolean(errorMessage);
+    },
+    select
+  });
+</script>
+
+{#snippet control()}
+  <div class={cn('relative w-full', className)} {...rest}>
+    {@render children?.()}
+  </div>
+{/snippet}
+
+{#if label || description || errorMessage}
+  <Field {label} {description} error={errorMessage} {required}>
+    {@render control()}
+  </Field>
+{:else}
+  {@render control()}
+{/if}

package/dist/components/autocomplete/Autocomplete.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import { type AutocompleteItem, type AutocompleteSize } from './context';
+type FieldError = string | {
+    message?: string;
+    match?: boolean;
+};
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    items?: AutocompleteItem[];
+    value?: string;
+    defaultValue?: string;
+    open?: boolean;
+    size?: AutocompleteSize;
+    label?: string | Snippet;
+    description?: string | Snippet;
+    error?: FieldError;
+    required?: boolean;
+    filter?: ((item: AutocompleteItem, query: string) => boolean) | null;
+    onValueChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    [key: string]: unknown;
+}
+declare const Autocomplete: import("svelte").Component<Props, {}, "open" | "value">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

package/dist/components/autocomplete/AutocompleteCollection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ItemSnippet } from './context';
+  import { getAutocompleteGroupContext } from './context';
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    children?: ItemSnippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+  const context = getAutocompleteGroupContext();
+</script>
+
+<div class={cn('contents', className)} {...rest}>
+  {#each context?.items ?? [] as item (item.value)}
+    {@render children?.(item.raw)}
+  {/each}
+</div>

package/dist/components/autocomplete/AutocompleteCollection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ItemSnippet } from './context';
+export interface Props {
+    children?: ItemSnippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const AutocompleteCollection: import("svelte").Component<Props, {}, "">;
+type AutocompleteCollection = ReturnType<typeof AutocompleteCollection>;
+export default AutocompleteCollection;

package/dist/components/autocomplete/AutocompleteContent.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getAutocompleteContext } from './context';
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+  const context = getAutocompleteContext('Autocomplete.Content');
+</script>
+
+{#if context.open && context.filteredItems.length}
+  <div
+    class={cn(
+      'absolute z-50 mt-1 flex max-h-96 min-w-full flex-col overflow-hidden rounded-lg bg-kumo-control py-1.5 text-kumo-default shadow-lg ring ring-kumo-line',
+      className
+    )}
+    {...rest}
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/autocomplete/AutocompleteContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const AutocompleteContent: import("svelte").Component<Props, {}, "">;
+type AutocompleteContent = ReturnType<typeof AutocompleteContent>;
+export default AutocompleteContent;

package/dist/components/autocomplete/AutocompleteGroup.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    normalizeAutocompleteItem,
+    setAutocompleteGroupContext,
+    type AutocompleteItem
+  } from './context';
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    items?: AutocompleteItem[];
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, items = [], ...rest }: Props = $props();
+  const normalizedItems = $derived(items.map(normalizeAutocompleteItem));
+
+  setAutocompleteGroupContext({
+    get items() {
+      return normalizedItems;
+    }
+  });
+</script>
+
+<div
+  class={cn('mt-2 border-t border-kumo-line pt-2 first:mt-0 first:border-t-0 first:pt-0', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/autocomplete/AutocompleteGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type AutocompleteItem } from './context';
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    items?: AutocompleteItem[];
+    [key: string]: unknown;
+}
+declare const AutocompleteGroup: import("svelte").Component<Props, {}, "">;
+type AutocompleteGroup = ReturnType<typeof AutocompleteGroup>;
+export default AutocompleteGroup;

package/dist/components/autocomplete/AutocompleteGroupLabel.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, ...rest }: Props = $props();
+</script>
+
+<div class={cn('mx-1.5 px-2 py-1.5 text-sm text-kumo-strong', className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/autocomplete/AutocompleteGroupLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const AutocompleteGroupLabel: import("svelte").Component<Props, {}, "">;
+type AutocompleteGroupLabel = ReturnType<typeof AutocompleteGroupLabel>;
+export default AutocompleteGroupLabel;

package/dist/components/autocomplete/AutocompleteInputGroup.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getAutocompleteContext, type AutocompleteSize } from './context';
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    class?: string;
+    placeholder?: string;
+    size?: AutocompleteSize;
+    [key: string]: unknown;
+  }
+
+  let { class: className, placeholder, size, ...rest }: Props = $props();
+  const context = getAutocompleteContext('Autocomplete.InputGroup');
+
+  const sizes: Record<AutocompleteSize, 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'
+  };
+</script>
+
+<input
+  class={cn(
+    'w-full border-0 bg-kumo-control text-kumo-default shadow-xs ring ring-kumo-line outline-none focus:outline-none',
+    'placeholder:text-kumo-placeholder 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]',
+    sizes[size ?? context.size],
+    className
+  )}
+  value={context.query}
+  {placeholder}
+  aria-invalid={context.invalid || undefined}
+  oninput={(event) => {
+    context.query = (event.currentTarget as HTMLInputElement).value;
+    context.open = true;
+  }}
+  onfocus={() => (context.open = true)}
+  onkeydown={(event) => {
+    if (event.key === 'Escape') context.open = false;
+  }}
+  {...rest}
+/>

package/dist/components/autocomplete/AutocompleteInputGroup.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type AutocompleteSize } from './context';
+export interface Props {
+    class?: string;
+    placeholder?: string;
+    size?: AutocompleteSize;
+    [key: string]: unknown;
+}
+declare const AutocompleteInputGroup: import("svelte").Component<Props, {}, "">;
+type AutocompleteInputGroup = ReturnType<typeof AutocompleteInputGroup>;
+export default AutocompleteInputGroup;

package/dist/components/autocomplete/AutocompleteItem.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Check } from 'phosphor-svelte';
+  import { getAutocompleteContext, normalizeAutocompleteItem, type AutocompleteItem } from './context';
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    value: AutocompleteItem;
+    disabled?: boolean;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, value, disabled, ...rest }: Props = $props();
+  const context = getAutocompleteContext('Autocomplete.Item');
+  const item = $derived.by(() => {
+    const normalized = normalizeAutocompleteItem(value);
+    return { ...normalized, disabled: disabled ?? normalized.disabled };
+  });
+</script>
+
+<button
+  type="button"
+  disabled={item.disabled}
+  class={cn(
+    'group mx-1.5 grid w-[calc(100%-0.75rem)] cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-left text-base outline-none',
+    'hover:bg-kumo-overlay focus-visible:z-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    context.value === item.value && 'font-medium',
+    className
+  )}
+  onclick={() => context.select(item)}
+  {...rest}
+>
+  <span class="col-start-1 min-w-0 truncate">{@render children?.()}</span>
+  {#if context.value === item.value}
+    <Check class="col-start-2 size-3.5 self-center text-kumo-default" aria-hidden="true" />
+  {/if}
+</button>

package/dist/components/autocomplete/AutocompleteItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type AutocompleteItem } from './context';
+export interface Props {
+    children?: Snippet;
+    class?: string;
+    value: AutocompleteItem;
+    disabled?: boolean;
+    [key: string]: unknown;
+}
+declare const AutocompleteItem: import("svelte").Component<Props, {}, "">;
+type AutocompleteItem = ReturnType<typeof AutocompleteItem>;
+export default AutocompleteItem;

package/dist/components/autocomplete/AutocompleteList.svelte

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

package/dist/components/autocomplete/AutocompleteList.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ItemSnippet } from './context';
+export interface Props {
+    children?: ItemSnippet;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const AutocompleteList: import("svelte").Component<Props, {}, "">;
+type AutocompleteList = ReturnType<typeof AutocompleteList>;
+export default AutocompleteList;

package/dist/components/autocomplete/AutocompleteSeparator.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { cn } from '../../utils/cn';
+
+  export interface Props {
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { class: className, ...rest }: Props = $props();
+</script>
+
+<div class={cn('mx-0 my-1 h-px bg-kumo-line', className)} {...rest}></div>

package/dist/components/autocomplete/AutocompleteSeparator.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface Props {
+    class?: string;
+    [key: string]: unknown;
+}
+declare const AutocompleteSeparator: import("svelte").Component<Props, {}, "">;
+type AutocompleteSeparator = ReturnType<typeof AutocompleteSeparator>;
+export default AutocompleteSeparator;

package/dist/components/autocomplete/context.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from 'svelte';
+export type AutocompleteSize = 'xs' | 'sm' | 'base' | 'lg';
+export type AutocompleteItem = string | {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    group?: string;
+};
+export type NormalizedAutocompleteItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    group?: string;
+    raw: AutocompleteItem;
+};
+export type AutocompleteContext = {
+    get items(): NormalizedAutocompleteItem[];
+    get filteredItems(): NormalizedAutocompleteItem[];
+    get query(): string;
+    set query(value: string);
+    get value(): string;
+    set value(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    get size(): AutocompleteSize;
+    get invalid(): boolean;
+    select(item: NormalizedAutocompleteItem): void;
+};
+export type AutocompleteGroupContext = {
+    get items(): NormalizedAutocompleteItem[];
+};
+export declare function setAutocompleteContext(context: AutocompleteContext): void;
+export declare function getAutocompleteContext(component: string): AutocompleteContext;
+export declare function setAutocompleteGroupContext(context: AutocompleteGroupContext): void;
+export declare function getAutocompleteGroupContext(): AutocompleteGroupContext | undefined;
+export declare function normalizeAutocompleteItem(item: AutocompleteItem): NormalizedAutocompleteItem;
+export type ItemSnippet = Snippet<[any]>;

package/dist/components/autocomplete/context.js

@@ -0,0 +1,30 @@
+import { getContext, setContext } from 'svelte';
+const AUTOCOMPLETE_CONTEXT = Symbol('kumo-autocomplete');
+const AUTOCOMPLETE_GROUP_CONTEXT = Symbol('kumo-autocomplete-group');
+export function setAutocompleteContext(context) {
+    setContext(AUTOCOMPLETE_CONTEXT, context);
+}
+export function getAutocompleteContext(component) {
+    const context = getContext(AUTOCOMPLETE_CONTEXT);
+    if (!context)
+        throw new Error(`${component} must be used inside <Autocomplete>.`);
+    return context;
+}
+export function setAutocompleteGroupContext(context) {
+    setContext(AUTOCOMPLETE_GROUP_CONTEXT, context);
+}
+export function getAutocompleteGroupContext() {
+    return getContext(AUTOCOMPLETE_GROUP_CONTEXT);
+}
+export function normalizeAutocompleteItem(item) {
+    if (typeof item === 'string') {
+        return { label: item, value: item, raw: item };
+    }
+    return {
+        label: item.label,
+        value: item.value,
+        disabled: item.disabled,
+        group: item.group,
+        raw: item
+    };
+}

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

@@ -0,0 +1,21 @@
+import Root from './Autocomplete.svelte';
+import InputGroup from './AutocompleteInputGroup.svelte';
+import Content from './AutocompleteContent.svelte';
+import List from './AutocompleteList.svelte';
+import Item from './AutocompleteItem.svelte';
+import Group from './AutocompleteGroup.svelte';
+import GroupLabel from './AutocompleteGroupLabel.svelte';
+import Collection from './AutocompleteCollection.svelte';
+import Separator from './AutocompleteSeparator.svelte';
+export declare const Autocomplete: import("svelte").Component<import("./Autocomplete.svelte").Props, {}, "open" | "value"> & {
+    InputGroup: import("svelte").Component<import("./AutocompleteInputGroup.svelte").Props, {}, "">;
+    Content: import("svelte").Component<import("./AutocompleteContent.svelte").Props, {}, "">;
+    List: import("svelte").Component<import("./AutocompleteList.svelte").Props, {}, "">;
+    Item: import("svelte").Component<import("./AutocompleteItem.svelte").Props, {}, "">;
+    Group: import("svelte").Component<import("./AutocompleteGroup.svelte").Props, {}, "">;
+    GroupLabel: import("svelte").Component<import("./AutocompleteGroupLabel.svelte").Props, {}, "">;
+    Collection: import("svelte").Component<import("./AutocompleteCollection.svelte").Props, {}, "">;
+    Separator: import("svelte").Component<import("./AutocompleteSeparator.svelte").Props, {}, "">;
+};
+export { Root as AutocompleteRoot, InputGroup as AutocompleteInputGroup, Content as AutocompleteContent, List as AutocompleteList, Item as AutocompleteItem, Group as AutocompleteGroup, GroupLabel as AutocompleteGroupLabel, Collection as AutocompleteCollection, Separator as AutocompleteSeparator };
+export type { AutocompleteItem as AutocompleteOption, AutocompleteSize } from './context';