@nuykon/basecoat-svelte 0.0.0-stage → 1.0.2

package/dist/Collapsible.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let {
+    open = $bindable(undefined),
+    defaultOpen = false,
+    onOpenChange,
+    trigger = 'Toggle',
+    children,
+  }: {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: string;
+    children?: Snippet;
+  } = $props();
+  const id = $props.id();
+  let internal = $state((() => defaultOpen)()),
+    current = $derived(open === undefined ? internal : open);
+  function set(next: boolean) {
+    if (open === undefined) internal = next;
+    else if (!onOpenChange) open = next;
+    onOpenChange?.(next);
+  }
+</script>
+
+<div class="collapsible">
+  <button
+    type="button"
+    class="btn"
+    data-variant="ghost"
+    aria-expanded={current}
+    aria-controls={id}
+    onclick={() => set(!current)}>{trigger}</button
+  >
+  <div {id} hidden={!current}>{@render children?.()}</div>
+</div>

package/dist/Collapsible.svelte.d.ts

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

package/dist/Combobox.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Select from './Select.svelte';
+  import type { ComponentProps } from 'svelte';
+  let { value = $bindable(undefined), ...rest }: ComponentProps<typeof Select> = $props();
+</script>
+
+<Select {...rest} bind:value searchable />

package/dist/Combobox.svelte.d.ts

@@ -0,0 +1,17 @@
+declare const Combobox: import("svelte").Component<{
+    options: readonly import("./core.js").Option[];
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    label: string;
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+}, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/ComboboxRoot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { attachWidget, cx } from './core.js';
+  let {
+    children,
+    class: className,
+    ...rest
+  }: SvelteHTMLElements['div'] & { children?: Snippet } = $props();
+  let element: HTMLElement;
+  $effect(() => attachWidget(element));
+</script>
+
+<div
+  {...rest}
+  bind:this={element}
+  class={cx('combobox', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</div>

package/dist/ComboboxRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['div'] & {
+    children?: Snippet;
+};
+declare const ComboboxRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComboboxRoot = ReturnType<typeof ComboboxRoot>;
+export default ComboboxRoot;

package/dist/Command.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { nextIndex, type MenuItem } from './core.js';
+  let {
+    items,
+    onSelect,
+    label = 'Commands',
+    placeholder = 'Search commands…',
+    emptyLabel = 'No results',
+  }: {
+    items: readonly MenuItem[];
+    onSelect?: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    emptyLabel?: string;
+  } = $props();
+  const id = $props.id();
+  let query = $state(''),
+    active = $state(0),
+    visible = $derived(
+      items.filter(
+        (item) =>
+          !item.separator && item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+      ),
+    );
+  function choose(index: number) {
+    const item = visible[index];
+    if (item && !item.disabled) {
+      item.onSelect?.();
+      onSelect?.(item.value);
+    }
+  }
+</script>
+
+<div class="command">
+  <header>
+    <input
+      class="input"
+      role="combobox"
+      aria-label={label}
+      aria-autocomplete="list"
+      aria-expanded="true"
+      aria-controls={id}
+      aria-activedescendant={visible[active] ? `${id}-${active}` : undefined}
+      value={query}
+      {placeholder}
+      oninput={(event) => {
+        query = event.currentTarget.value;
+        active = 0;
+      }}
+      onkeydown={(event) => {
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+          event.preventDefault();
+          active = nextIndex(visible, active, event.key);
+        } else if (event.key === 'Enter') {
+          event.preventDefault();
+          choose(active);
+        }
+      }}
+    />
+  </header>
+  <div {id} role="listbox" aria-label={label}>
+    {#each visible as item, index (item.value)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+      <div
+        id={`${id}-${index}`}
+        role="option"
+        tabindex="-1"
+        aria-selected={active === index}
+        aria-disabled={item.disabled || undefined}
+        class:active={active === index}
+        onpointermove={() => {
+          if (!item.disabled) active = index;
+        }}
+        onclick={() => choose(index)}
+      >
+        {item.label}
+      </div>{/each}{#if !visible.length}<p role="status">{emptyLabel}</p>{/if}
+  </div>
+</div>

package/dist/Command.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type MenuItem } from './core.js';
+type $$ComponentProps = {
+    items: readonly MenuItem[];
+    onSelect?: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    emptyLabel?: string;
+};
+declare const Command: import("svelte").Component<$$ComponentProps, {}, "">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/CommandRoot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { attachWidget, cx } from './core.js';
+  let {
+    children,
+    class: className,
+    ...rest
+  }: SvelteHTMLElements['div'] & { children?: Snippet } = $props();
+  let element: HTMLElement;
+  $effect(() => attachWidget(element));
+</script>
+
+<div
+  {...rest}
+  bind:this={element}
+  class={cx('command', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</div>

package/dist/CommandRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['div'] & {
+    children?: Snippet;
+};
+declare const CommandRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type CommandRoot = ReturnType<typeof CommandRoot>;
+export default CommandRoot;

package/dist/Dialog.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { tick } from 'svelte';
+  import { lockScroll, type Side } from './core.js';
+  type Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: string;
+    title: string;
+    description?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    closeOnOutside?: boolean;
+    closeOnEscape?: boolean;
+    closeLabel?: string;
+    kind?: 'dialog' | 'alert-dialog' | 'drawer';
+    side?: Side;
+  };
+  let {
+    open = $bindable(undefined),
+    defaultOpen = false,
+    onOpenChange,
+    trigger,
+    title,
+    description,
+    children,
+    footer,
+    closeOnOutside = true,
+    closeOnEscape = true,
+    closeLabel = 'Close',
+    kind = 'dialog',
+    side = 'right',
+  }: Props = $props();
+  const id = $props.id();
+  let internal = $state((() => defaultOpen)()),
+    current = $derived(open === undefined ? internal : open),
+    element: HTMLDialogElement;
+  function set(next: boolean) {
+    if (open === undefined) internal = next;
+    else if (!onOpenChange) open = next;
+    onOpenChange?.(next);
+  }
+  $effect(() => {
+    if (!current) {
+      if (element.open) element.close();
+      return;
+    }
+    if (!element.open) element.showModal();
+    const unlock = lockScroll(element.ownerDocument);
+    return () => {
+      unlock();
+      if (element.open) element.close();
+    };
+  });
+</script>
+
+{#if trigger !== undefined}<button
+    type="button"
+    class="btn"
+    data-variant="outline"
+    onclick={() => set(true)}>{trigger}</button
+  >{/if}
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+<dialog
+  bind:this={element}
+  class={kind}
+  role={kind === 'alert-dialog' ? 'alertdialog' : undefined}
+  data-side={kind === 'drawer' ? side : undefined}
+  aria-labelledby={`${id}-title`}
+  aria-describedby={description ? `${id}-description` : undefined}
+  oncancel={(event) => {
+    event.preventDefault();
+    if (closeOnEscape) set(false);
+  }}
+  onclose={() => {
+    if (current) {
+      set(false);
+      void tick().then(() => {
+        if (current && element.isConnected && !element.open) element.showModal();
+      });
+    }
+  }}
+  onclick={(event) => {
+    if (closeOnOutside && kind !== 'alert-dialog' && event.target === event.currentTarget)
+      set(false);
+  }}
+>
+  <div class={kind === 'drawer' ? 'bc-drawer-surface' : 'bc-dialog-surface'}>
+    <header>
+      <h2 id={`${id}-title`}>{title}</h2>
+      {#if description}<p id={`${id}-description`}>{description}</p>{/if}
+    </header>
+    <section>{@render children?.()}</section>
+    {#if footer}<footer>{@render footer()}</footer>{/if}{#if kind !== 'alert-dialog'}<button
+        type="button"
+        class="btn"
+        data-variant="ghost"
+        data-size="icon-sm"
+        aria-label={closeLabel}
+        onclick={() => set(false)}>×</button
+      >{/if}
+  </div>
+</dialog>

package/dist/Dialog.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import { type Side } from './core.js';
+type Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: string;
+    title: string;
+    description?: string;
+    children?: Snippet;
+    footer?: Snippet;
+    closeOnOutside?: boolean;
+    closeOnEscape?: boolean;
+    closeLabel?: string;
+    kind?: 'dialog' | 'alert-dialog' | 'drawer';
+    side?: Side;
+};
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/DialogContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['section'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'section',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/DialogContent.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['section'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const DialogContent: import("svelte").Component<Props, {}, "element">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/DialogDescription.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['p'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'p',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/DialogDescription.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['p'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const DialogDescription: import("svelte").Component<Props, {}, "element">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/DialogFooter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['footer'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'footer',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/DialogFooter.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['footer'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const DialogFooter: import("svelte").Component<Props, {}, "element">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/DialogHeader.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['header'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'header',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/DialogHeader.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['header'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const DialogHeader: import("svelte").Component<Props, {}, "element">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/DialogRoot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { attachWidget, cx } from './core.js';
+  let {
+    children,
+    class: className,
+    ...rest
+  }: SvelteHTMLElements['dialog'] & { children?: Snippet } = $props();
+  let element: HTMLElement;
+  $effect(() => attachWidget(element));
+</script>
+
+<dialog
+  {...rest}
+  bind:this={element}
+  class={cx('dialog', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</dialog>

package/dist/DialogRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['dialog'] & {
+    children?: Snippet;
+};
+declare const DialogRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogRoot = ReturnType<typeof DialogRoot>;
+export default DialogRoot;

package/dist/DialogTitle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['h2'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'h2',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/DialogTitle.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['h2'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const DialogTitle: import("svelte").Component<Props, {}, "element">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/Drawer.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Dialog from './Dialog.svelte';
+  import type { ComponentProps } from 'svelte';
+  let { open = $bindable(undefined), ...rest }: ComponentProps<typeof Dialog> = $props();
+</script>
+
+<Dialog {...rest} bind:open kind="drawer" />

package/dist/Drawer.svelte.d.ts

@@ -0,0 +1,17 @@
+declare const Drawer: import("svelte").Component<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: string;
+    title: string;
+    description?: string;
+    children?: import("svelte").Snippet;
+    footer?: import("svelte").Snippet;
+    closeOnOutside?: boolean;
+    closeOnEscape?: boolean;
+    closeLabel?: string;
+    kind?: "dialog" | "alert-dialog" | "drawer";
+    side?: import("./core.js").Side;
+}, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;