kumo-svelte 0.1.0-beta.0

package/dist/components/code-highlighted/index.d.ts

@@ -0,0 +1 @@
+export { default as CodeHighlighted } from '../code/CodeHighlighted.svelte';

package/dist/components/code-highlighted/index.js

@@ -0,0 +1 @@
+export { default as CodeHighlighted } from '../code/CodeHighlighted.svelte';

package/dist/components/collapsible/Collapsible.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import CollapsibleRoot from './CollapsibleRoot.svelte';
+  import CollapsibleDefaultTrigger from './CollapsibleDefaultTrigger.svelte';
+  import CollapsibleDefaultPanel from './CollapsibleDefaultPanel.svelte';
+
+  interface Props {
+    trigger?: Snippet;
+    children?: Snippet;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: string;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onOpenChangeComplete?: (open: boolean) => void;
+  }
+
+  let {
+    trigger,
+    children,
+    class: className,
+    defaultOpen = false,
+    open = $bindable(defaultOpen),
+    title,
+    disabled = false,
+    onOpenChange,
+    onOpenChangeComplete
+  }: Props = $props();
+</script>
+
+<CollapsibleRoot bind:open class={className} {disabled} {onOpenChange} {onOpenChangeComplete}>
+  {#if trigger}
+    <CollapsibleDefaultTrigger>{@render trigger()}</CollapsibleDefaultTrigger>
+  {:else if title}
+    <CollapsibleDefaultTrigger>{title}</CollapsibleDefaultTrigger>
+  {/if}
+  <CollapsibleDefaultPanel>
+    {@render children?.()}
+  </CollapsibleDefaultPanel>
+</CollapsibleRoot>

package/dist/components/collapsible/Collapsible.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    trigger?: Snippet;
+    children?: Snippet;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    title?: string;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+declare const Collapsible: import("svelte").Component<Props, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/components/collapsible/CollapsibleDefaultPanel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+  import CollapsiblePanel from './CollapsiblePanel.svelte';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    keepMounted?: boolean;
+    forceMount?: boolean;
+    hiddenUntilFound?: boolean;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    keepMounted = false,
+    forceMount = false,
+    hiddenUntilFound = true,
+    ...rest
+  }: Props = $props();
+</script>
+
+<CollapsiblePanel
+  class={cn('my-2 space-y-4 border-l-2 border-kumo-fill pl-4', className)}
+  {keepMounted}
+  {forceMount}
+  {hiddenUntilFound}
+  {...rest}
+>
+  {@render children?.()}
+</CollapsiblePanel>

package/dist/components/collapsible/CollapsibleDefaultPanel.svelte.d.ts

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

package/dist/components/collapsible/CollapsibleDefaultTrigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { CaretDown } from 'phosphor-svelte';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+  import CollapsibleTrigger from './CollapsibleTrigger.svelte';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, disabled = false, ...rest }: Props = $props();
+</script>
+
+<CollapsibleTrigger
+  class={cn(
+    'group m-0 flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-sm text-kumo-link shadow-none select-none',
+    className
+  )}
+  {disabled}
+  {...rest}
+>
+  {@render children?.()}
+  <CaretDown class="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+</CollapsibleTrigger>

package/dist/components/collapsible/CollapsibleDefaultTrigger.svelte.d.ts

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

package/dist/components/collapsible/CollapsiblePanel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    keepMounted?: boolean;
+    forceMount?: boolean;
+    hiddenUntilFound?: boolean;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    keepMounted = false,
+    forceMount = false,
+    hiddenUntilFound = true,
+    ...rest
+  }: Props = $props();
+
+  let shouldForceMount = $derived(forceMount || keepMounted);
+</script>
+
+<CollapsiblePrimitive.Content
+  class={className}
+  forceMount={shouldForceMount}
+  {hiddenUntilFound}
+  {...rest}
+>
+  {@render children?.()}
+</CollapsiblePrimitive.Content>

package/dist/components/collapsible/CollapsiblePanel.svelte.d.ts

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

package/dist/components/collapsible/CollapsibleRoot.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onOpenChangeComplete?: (open: boolean) => void;
+  }
+
+  let {
+    children,
+    class: className,
+    defaultOpen = false,
+    open = $bindable(defaultOpen),
+    disabled = false,
+    onOpenChange,
+    onOpenChangeComplete
+  }: Props = $props();
+</script>
+
+<CollapsiblePrimitive.Root
+  bind:open
+  class={className}
+  {disabled}
+  {onOpenChange}
+  {onOpenChangeComplete}
+>
+  {@render children?.()}
+</CollapsiblePrimitive.Root>

package/dist/components/collapsible/CollapsibleRoot.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+declare const CollapsibleRoot: import("svelte").Component<Props, {}, "open">;
+type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;
+export default CollapsibleRoot;

package/dist/components/collapsible/CollapsibleTrigger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    disabled = false,
+    type = 'button',
+    ...rest
+  }: Props = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger
+  class={cn('cursor-pointer', className)}
+  {disabled}
+  {type}
+  {...rest}
+>
+  {@render children?.()}
+</CollapsiblePrimitive.Trigger>

package/dist/components/collapsible/CollapsibleTrigger.svelte.d.ts

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

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

@@ -0,0 +1,14 @@
+import Root from './Collapsible.svelte';
+import CollapsibleRoot from './CollapsibleRoot.svelte';
+import Trigger from './CollapsibleTrigger.svelte';
+import Panel from './CollapsiblePanel.svelte';
+import DefaultTrigger from './CollapsibleDefaultTrigger.svelte';
+import DefaultPanel from './CollapsibleDefaultPanel.svelte';
+declare const Collapsible: typeof Root & {
+    Root: typeof CollapsibleRoot;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+    DefaultTrigger: typeof DefaultTrigger;
+    DefaultPanel: typeof DefaultPanel;
+};
+export { Collapsible, CollapsibleRoot, Trigger as CollapsibleTrigger, Panel as CollapsiblePanel, DefaultTrigger as CollapsibleDefaultTrigger, DefaultPanel as CollapsibleDefaultPanel };

package/dist/components/collapsible/index.js

@@ -0,0 +1,14 @@
+import Root from './Collapsible.svelte';
+import CollapsibleRoot from './CollapsibleRoot.svelte';
+import Trigger from './CollapsibleTrigger.svelte';
+import Panel from './CollapsiblePanel.svelte';
+import DefaultTrigger from './CollapsibleDefaultTrigger.svelte';
+import DefaultPanel from './CollapsibleDefaultPanel.svelte';
+const Collapsible = Object.assign(Root, {
+    Root: CollapsibleRoot,
+    Trigger,
+    Panel,
+    DefaultTrigger,
+    DefaultPanel
+});
+export { Collapsible, CollapsibleRoot, Trigger as CollapsibleTrigger, Panel as CollapsiblePanel, DefaultTrigger as CollapsibleDefaultTrigger, DefaultPanel as CollapsibleDefaultPanel };

package/dist/components/combobox/Combobox.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Field from '../field/Field.svelte';
+  import { cn } from '../../utils/cn';
+  import {
+    normalizeComboboxItem,
+    setComboboxContext,
+    type ComboboxItem,
+    type ComboboxSize,
+    type NormalizedComboboxItem
+  } from './context';
+
+  type FieldError = string | { message?: string; match?: boolean };
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    items?: ComboboxItem[];
+    options?: ComboboxItem[];
+    value?: unknown;
+    defaultValue?: unknown;
+    open?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    size?: ComboboxSize;
+    label?: string | Snippet;
+    labelTooltip?: string | Snippet;
+    description?: string | Snippet;
+    error?: FieldError;
+    required?: boolean;
+    filter?: ((item: ComboboxItem, query: string) => boolean) | null;
+    isItemEqualToValue?: (item: unknown, value: unknown) => boolean;
+    onValueChange?: (value: unknown) => void;
+    onOpenChange?: (open: boolean) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    items,
+    options = [],
+    defaultValue,
+    value = $bindable(defaultValue),
+    open = $bindable(false),
+    multiple = false,
+    disabled = false,
+    size = 'base',
+    label,
+    labelTooltip,
+    description,
+    error,
+    required,
+    filter,
+    isItemEqualToValue,
+    onValueChange,
+    onOpenChange,
+    ...rest
+  }: Props = $props();
+
+  let query = $state('');
+
+  const sourceItems = $derived(items ?? options);
+  const normalizedItems = $derived(sourceItems.map(normalizeComboboxItem));
+  const errorMessage = $derived(
+    typeof error === 'string' ? error : error?.match === false ? undefined : error?.message
+  );
+  const filteredItems = $derived.by<NormalizedComboboxItem[]>(() => {
+    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) || String(item.value).toLowerCase().includes(term);
+    });
+  });
+
+  function valuesEqual(itemValue: unknown, selectedValue: unknown) {
+    if (isItemEqualToValue) return isItemEqualToValue(itemValue, selectedValue);
+    if (
+      itemValue &&
+      selectedValue &&
+      typeof itemValue === 'object' &&
+      typeof selectedValue === 'object' &&
+      'value' in itemValue &&
+      'value' in selectedValue
+    ) {
+      return (itemValue as { value: unknown }).value === (selectedValue as { value: unknown }).value;
+    }
+    if (itemValue && typeof itemValue === 'object' && 'value' in itemValue) {
+      return (itemValue as { value: unknown }).value === selectedValue;
+    }
+    if (selectedValue && typeof selectedValue === 'object' && 'value' in selectedValue) {
+      return itemValue === (selectedValue as { value: unknown }).value;
+    }
+    return itemValue === selectedValue;
+  }
+
+  function isSelected(item: NormalizedComboboxItem) {
+    if (multiple) {
+      return Array.isArray(value) && value.some((selected) => valuesEqual(item.value, selected));
+    }
+
+    return valuesEqual(item.value, value);
+  }
+
+  function labelFor(selection: unknown) {
+    return normalizedItems.find((item) => valuesEqual(item.value, selection))?.label ?? String(selection ?? '');
+  }
+
+  function emit(nextValue: unknown) {
+    value = nextValue;
+    onValueChange?.(nextValue);
+  }
+
+  function select(item: NormalizedComboboxItem) {
+    if (item.disabled || disabled) return;
+
+    if (multiple) {
+      const current = Array.isArray(value) ? value : [];
+      const exists = current.some((selected) => valuesEqual(item.value, selected));
+      emit(exists ? current.filter((selected) => !valuesEqual(item.value, selected)) : [...current, item.value]);
+      query = '';
+      return;
+    }
+
+    emit(item.value);
+    query = '';
+    open = false;
+    onOpenChange?.(false);
+  }
+
+  function remove(itemValue: unknown) {
+    if (!Array.isArray(value)) return;
+    emit(value.filter((selected) => !valuesEqual(itemValue, selected)));
+  }
+
+  setComboboxContext({
+    get items() {
+      return normalizedItems;
+    },
+    get filteredItems() {
+      return filteredItems;
+    },
+    get query() {
+      return query;
+    },
+    set query(nextQuery: string) {
+      query = nextQuery;
+    },
+    get value() {
+      return value;
+    },
+    set value(nextValue: unknown) {
+      emit(nextValue);
+    },
+    get open() {
+      return open;
+    },
+    set open(nextOpen: boolean) {
+      open = nextOpen;
+      if (!nextOpen) query = '';
+      onOpenChange?.(nextOpen);
+    },
+    get multiple() {
+      return multiple;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get size() {
+      return size;
+    },
+    get invalid() {
+      return Boolean(errorMessage);
+    },
+    isSelected,
+    select,
+    remove,
+    labelFor
+  });
+</script>
+
+{#snippet control()}
+  <div class={cn('relative inline-block max-w-full', className)} {...rest}>
+    {@render children?.()}
+  </div>
+{/snippet}
+
+{#if label || description || errorMessage}
+  <Field {label} {labelTooltip} {description} error={errorMessage} {required}>
+    {@render control()}
+  </Field>
+{:else}
+  {@render control()}
+{/if}

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

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

package/dist/components/combobox/ComboboxChip.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { X } from 'phosphor-svelte';
+  import { cn } from '../../utils/cn';
+  import { getComboboxContext } from './context';
+
+  export interface Props {
+    children?: Snippet;
+    class?: string;
+    value?: unknown;
+    removeLabel?: string;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, value, removeLabel = 'Remove', ...rest }: Props = $props();
+  const context = getComboboxContext('Combobox.Chip');
+</script>
+
+<span
+  class={cn(
+    'flex h-6 items-center gap-2.5 rounded-sm bg-kumo-overlay pl-2 pr-[3px] text-sm ring-1 ring-kumo-hairline',
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+  <button
+    type="button"
+    aria-label={removeLabel}
+    class="flex cursor-pointer rounded-md bg-transparent p-1 hover:bg-kumo-fill-hover"
+    onclick={() => context.remove(value)}
+  >
+    <X size={10} />
+  </button>
+</span>

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

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

package/dist/components/combobox/ComboboxCollection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ItemSnippet } from './context';
+  import { getComboboxGroupContext } 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 = getComboboxGroupContext();
+</script>
+
+<div class={cn('contents', className)} {...rest}>
+  {#each context?.items ?? [] as item (item.label)}
+    {@render children?.(item.raw)}
+  {/each}
+</div>

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

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

package/dist/components/combobox/ComboboxContent.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getComboboxContext } 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 = getComboboxContext('Combobox.Content');
+</script>
+
+{#if context.open}
+  <div
+    class={cn(
+      'absolute z-50 mt-1 flex max-h-[min(24rem,calc(100vh-8rem))] min-w-full flex-col overflow-hidden rounded-lg bg-kumo-base py-1.5 text-base text-kumo-default shadow-lg ring ring-kumo-line',
+      className
+    )}
+    {...rest}
+  >
+    {@render children?.()}
+  </div>
+{/if}

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

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