@nuykon/basecoat-svelte 0.0.0-stage → 1.0.2

package/dist/DrawerRoot.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('drawer', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</dialog>

package/dist/DrawerRoot.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 DrawerRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerRoot = ReturnType<typeof DrawerRoot>;
+export default DrawerRoot;

package/dist/DropdownMenu.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import {
+    attachFloating,
+    createTypeahead,
+    dismissableLayer,
+    nextIndex,
+    type MenuItem,
+    type Side,
+    type Align,
+  } from './core.js';
+  type Props = {
+    items: readonly MenuItem[];
+    trigger: string;
+    onSelect?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: Side;
+    align?: Align;
+    label?: string;
+  };
+  let {
+    items,
+    trigger,
+    onSelect,
+    open = $bindable(undefined),
+    defaultOpen = false,
+    onOpenChange,
+    side,
+    align,
+    label = 'Menu',
+  }: Props = $props();
+  const id = $props.id(),
+    typeahead = createTypeahead();
+  let internal = $state((() => defaultOpen)()),
+    current = $derived(open === undefined ? internal : open),
+    anchor: HTMLButtonElement,
+    popup = $state<HTMLDivElement>(),
+    initial = 'Home';
+  const elements: HTMLElement[] = [];
+  let enabled = $derived(
+    items.map((item) => ({ ...item, disabled: item.disabled || item.separator })),
+  );
+  function set(next: boolean) {
+    if (open === undefined) internal = next;
+    else if (!onOpenChange) open = next;
+    onOpenChange?.(next);
+  }
+  function choose(event: MouseEvent, item: MenuItem) {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    item.onSelect?.();
+    onSelect?.(item.value);
+    set(false);
+    anchor.focus();
+  }
+  function keyboard(event: KeyboardEvent, index: number) {
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
+      elements[nextIndex(enabled, index, event.key)]?.focus();
+    } else if (event.key === 'Tab') set(false);
+    else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey)
+      elements[typeahead(event.key, enabled, index)]?.focus();
+  }
+  $effect(() => {
+    if (!current || !popup) return;
+    const content = popup,
+      position = attachFloating(anchor, content, { side, align }),
+      layer = dismissableLayer(anchor.ownerDocument, {
+        elements: () => [anchor, content],
+        dismiss: (reason) => {
+          set(false);
+          if (reason === 'escape') anchor.focus();
+        },
+      });
+    elements[nextIndex(enabled, -1, initial)]?.focus();
+    return () => {
+      layer();
+      position();
+    };
+  });
+</script>
+
+<div class="dropdown-menu">
+  <button
+    bind:this={anchor}
+    type="button"
+    class="btn"
+    data-variant="outline"
+    aria-haspopup="menu"
+    aria-controls={id}
+    aria-expanded={current}
+    onclick={() => {
+      initial = 'Home';
+      set(!current);
+    }}
+    onkeydown={(event) => {
+      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        initial = event.key === 'ArrowUp' ? 'End' : 'Home';
+        set(true);
+      }
+    }}>{trigger}</button
+  >{#if current}<div bind:this={popup} data-popover="" popover="manual" class="bc-floating">
+      <div {id} role="menu" aria-label={label}>
+        {#each items as item, index (item.value)}{#if item.separator}<hr />{:else if item.href}<a
+              bind:this={elements[index]}
+              href={item.href}
+              role="menuitem"
+              tabindex="-1"
+              aria-disabled={item.disabled || undefined}
+              onclick={(event) => choose(event, item)}
+              onkeydown={(event) => keyboard(event, index)}
+              >{item.label}{#if item.shortcut}<kbd data-shortcut="">{item.shortcut}</kbd>{/if}</a
+            >{:else}<button
+              bind:this={elements[index]}
+              type="button"
+              class="btn"
+              data-variant="ghost"
+              role="menuitem"
+              tabindex="-1"
+              disabled={item.disabled}
+              aria-disabled={item.disabled || undefined}
+              onclick={(event) => choose(event, item)}
+              onkeydown={(event) => keyboard(event, index)}
+              >{item.label}{#if item.shortcut}<kbd data-shortcut="">{item.shortcut}</kbd
+                >{/if}</button
+            >{/if}{/each}
+      </div>
+    </div>{/if}
+</div>

package/dist/DropdownMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type MenuItem, type Side, type Align } from './core.js';
+type Props = {
+    items: readonly MenuItem[];
+    trigger: string;
+    onSelect?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: Side;
+    align?: Align;
+    label?: string;
+};
+declare const DropdownMenu: import("svelte").Component<Props, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/DropdownMenuRoot.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('dropdown-menu', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</div>

package/dist/DropdownMenuRoot.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 DropdownMenuRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type DropdownMenuRoot = ReturnType<typeof DropdownMenuRoot>;
+export default DropdownMenuRoot;

package/dist/Empty.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['div'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'div',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('empty', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/Empty.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['div'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const Empty: import("svelte").Component<Props, {}, "element">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/EmptyContent.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/EmptyContent.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 EmptyContent: import("svelte").Component<Props, {}, "element">;
+type EmptyContent = ReturnType<typeof EmptyContent>;
+export default EmptyContent;

package/dist/EmptyDescription.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/EmptyDescription.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 EmptyDescription: import("svelte").Component<Props, {}, "element">;
+type EmptyDescription = ReturnType<typeof EmptyDescription>;
+export default EmptyDescription;

package/dist/EmptyHeader.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/EmptyHeader.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 EmptyHeader: import("svelte").Component<Props, {}, "element">;
+type EmptyHeader = ReturnType<typeof EmptyHeader>;
+export default EmptyHeader;

package/dist/EmptyTitle.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['h3'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'h3',
+    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/EmptyTitle.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['h3'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const EmptyTitle: import("svelte").Component<Props, {}, "element">;
+type EmptyTitle = ReturnType<typeof EmptyTitle>;
+export default EmptyTitle;

package/dist/Field.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['div'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'div',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('field', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/Field.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['div'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const Field: import("svelte").Component<Props, {}, "element">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/FieldDescription.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/FieldDescription.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 FieldDescription: import("svelte").Component<Props, {}, "element">;
+type FieldDescription = ReturnType<typeof FieldDescription>;
+export default FieldDescription;

package/dist/FieldError.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}
+  {...{ role: 'alert' }}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/FieldError.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 FieldError: import("svelte").Component<Props, {}, "element">;
+type FieldError = ReturnType<typeof FieldError>;
+export default FieldError;

package/dist/FieldLabel.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['label'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'label',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('label', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/FieldLabel.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['label'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const FieldLabel: import("svelte").Component<Props, {}, "element">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;