@nuykon/basecoat-svelte 0.0.0-stage → 1.0.2

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

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

package/dist/Tabs.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { nextIndex, type Option } from './core.js';
+  type Props = {
+    items: readonly Option[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    activation?: 'automatic' | 'manual';
+    variant?: 'default' | 'line';
+    panel: Snippet<[Option]>;
+    keepMounted?: boolean;
+    label?: string;
+  };
+  let {
+    items,
+    value = $bindable(undefined),
+    defaultValue,
+    onValueChange,
+    orientation = 'horizontal',
+    activation = 'automatic',
+    variant,
+    panel,
+    keepMounted = false,
+    label = 'Tabs',
+  }: Props = $props();
+  const id = $props.id();
+  let internal = $state(
+    (() => defaultValue ?? items.find((item) => !item.disabled)?.value ?? '')(),
+  );
+  let current = $derived(value === undefined ? internal : value),
+    active = $derived(items.findIndex((item) => item.value === current && !item.disabled)),
+    selected = $derived(active >= 0 ? active : items.findIndex((item) => !item.disabled));
+  const elements: HTMLButtonElement[] = [];
+  function set(next: string) {
+    if (value === undefined) internal = next;
+    else if (!onValueChange) value = next;
+    onValueChange?.(next);
+  }
+  function keyboard(event: KeyboardEvent, index: number) {
+    const arrows =
+      orientation === 'vertical' ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
+    if (!arrows.includes(event.key) && !['Home', 'End'].includes(event.key)) return;
+    event.preventDefault();
+    let key = event.key;
+    if (orientation === 'horizontal' && (event.currentTarget as HTMLElement).closest('[dir="rtl"]'))
+      key = key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;
+    const next = nextIndex(items, index, key);
+    elements[next]?.focus();
+    if (activation === 'automatic' && next >= 0) set(items[next].value);
+  }
+</script>
+
+<div class="tabs">
+  <div role="tablist" aria-label={label} aria-orientation={orientation} data-variant={variant}>
+    {#each items as item, index (item.value)}<button
+        bind:this={elements[index]}
+        type="button"
+        role="tab"
+        id={`${id}-tab-${index}`}
+        aria-controls={`${id}-panel-${index}`}
+        aria-selected={selected === index}
+        disabled={item.disabled}
+        tabindex={selected === index ? 0 : -1}
+        onclick={() => set(item.value)}
+        onkeydown={(event) => keyboard(event, index)}>{item.label}</button
+      >{/each}
+  </div>
+  {#each items as item, index (item.value)}<div
+      role="tabpanel"
+      id={`${id}-panel-${index}`}
+      aria-labelledby={`${id}-tab-${index}`}
+      tabindex="0"
+      hidden={selected !== index}
+    >
+      {#if keepMounted || selected === index}{@render panel(item)}{/if}
+    </div>{/each}
+</div>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import { type Option } from './core.js';
+type Props = {
+    items: readonly Option[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+    activation?: 'automatic' | 'manual';
+    variant?: 'default' | 'line';
+    panel: Snippet<[Option]>;
+    keepMounted?: boolean;
+    label?: string;
+};
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

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

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

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

package/dist/ThemeSwitcher.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  let {
+    value = $bindable(undefined),
+    defaultValue = 'light',
+    onValueChange,
+    label = 'Dark mode',
+  }: {
+    value?: 'light' | 'dark';
+    defaultValue?: 'light' | 'dark';
+    onValueChange?: (theme: 'light' | 'dark') => void;
+    label?: string;
+  } = $props();
+  let internal = $state((() => defaultValue)()),
+    current = $derived(value === undefined ? internal : value);
+  function set(next: 'light' | 'dark') {
+    if (value === undefined) internal = next;
+    else if (!onValueChange) value = next;
+    onValueChange?.(next);
+  }
+</script>
+
+<button
+  type="button"
+  class="btn"
+  data-variant="outline"
+  role="switch"
+  aria-label={label}
+  aria-checked={current === 'dark'}
+  onclick={() => set(current === 'dark' ? 'light' : 'dark')}
+  >{current === 'dark' ? '☾' : '☀'}</button
+>

package/dist/ThemeSwitcher.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    value?: 'light' | 'dark';
+    defaultValue?: 'light' | 'dark';
+    onValueChange?: (theme: 'light' | 'dark') => void;
+    label?: string;
+};
+declare const ThemeSwitcher: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
+export default ThemeSwitcher;

package/dist/Toast.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { ToastMessage } from './core.js';
+  let { message, onDismiss }: { message: ToastMessage; onDismiss: () => void } = $props();
+  let timer: ReturnType<typeof setTimeout> | undefined,
+    remaining = 5000,
+    started = 0;
+  function pause() {
+    clearTimeout(timer);
+    if (started) remaining = Math.max(0, remaining - (Date.now() - started));
+    started = 0;
+  }
+  function resume() {
+    if ((message.duration ?? 5000) <= 0 || started) return;
+    started = Date.now();
+    timer = setTimeout(onDismiss, remaining);
+  }
+  onMount(() => {
+    remaining = message.duration ?? 5000;
+    resume();
+    return pause;
+  });
+</script>
+
+<div
+  class="toast"
+  role="group"
+  data-variant={message.variant}
+  onpointerenter={pause}
+  onpointerleave={resume}
+  onfocusin={pause}
+  onfocusout={(event) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node)) resume();
+  }}
+>
+  <div class="toast-content">
+    <section>
+      <h2>{message.title}</h2>
+      {#if message.description}<p>{message.description}</p>{/if}
+    </section>
+    <footer>
+      <button
+        type="button"
+        class="btn"
+        data-variant="ghost"
+        data-size="icon-sm"
+        aria-label="Dismiss notification"
+        onclick={onDismiss}>×</button
+      >
+    </footer>
+  </div>
+</div>

package/dist/Toast.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ToastMessage } from './core.js';
+type $$ComponentProps = {
+    message: ToastMessage;
+    onDismiss: () => void;
+};
+declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/Toaster.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { ToastMessage } from './core.js';
+  import Toast from './Toast.svelte';
+  let {
+    messages,
+    onDismiss,
+    label = 'Notifications',
+  }: {
+    messages: readonly ToastMessage[];
+    onDismiss: (id: string) => void;
+    label?: string;
+  } = $props();
+</script>
+
+<section class="toaster" aria-label={label}>
+  <div class="bc-live" role="status" aria-live="polite" aria-atomic="true">
+    {messages.at(-1)?.title}
+  </div>
+  {#each messages as message (message.id)}<Toast
+      {message}
+      onDismiss={() => onDismiss(message.id)}
+    />{/each}
+</section>

package/dist/Toaster.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToastMessage } from './core.js';
+type $$ComponentProps = {
+    messages: readonly ToastMessage[];
+    onDismiss: (id: string) => void;
+    label?: string;
+};
+declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/Tooltip.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { attachFloating, dismissableLayer, type Side } from './core.js';
+  let {
+    content,
+    children,
+    delay = 300,
+    side = 'top',
+  }: { content: string; children: Snippet; delay?: number; side?: Side } = $props();
+  const id = $props.id();
+  let open = $state(false),
+    anchor: HTMLSpanElement,
+    popup = $state<HTMLDivElement>();
+  let timer: ReturnType<typeof setTimeout>;
+  function close() {
+    clearTimeout(timer);
+    open = false;
+  }
+  $effect(() => {
+    if (!open || !popup) return;
+    const content = popup,
+      position = attachFloating(anchor, content, { side, align: 'center' }),
+      layer = dismissableLayer(anchor.ownerDocument, {
+        elements: () => [anchor, content],
+        dismiss: close,
+      });
+    return () => {
+      layer();
+      position();
+    };
+  });
+  $effect(() => () => clearTimeout(timer));
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<span
+  bind:this={anchor}
+  role="group"
+  tabindex="0"
+  aria-describedby={open ? id : undefined}
+  onpointerenter={() => (timer = setTimeout(() => (open = true), delay))}
+  onpointerleave={close}
+  onfocusin={() => (open = true)}
+  onfocusout={close}
+  >{@render children()}{#if open}<div
+      bind:this={popup}
+      {id}
+      role="tooltip"
+      popover="manual"
+      class="bc-floating tooltip"
+    >
+      {content}
+    </div>{/if}</span
+>

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type Side } from './core.js';
+type $$ComponentProps = {
+    content: string;
+    children: Snippet;
+    delay?: number;
+    side?: Side;
+};
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/core.d.ts

@@ -0,0 +1,145 @@
+/** Composition adapter for Basecoat's semantic markup. Frameworks own mount/unmount. */
+declare function attachWidget(root: HTMLElement): () => void;
+
+type Variant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+type Size = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+type StylePack = 'vega' | 'nova' | 'maia' | 'lyra' | 'mira' | 'luma' | 'sera' | 'rhea';
+interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+}
+interface TabItem extends Option {
+}
+interface AccordionItem extends Option {
+}
+interface MenuItem extends Option {
+    href?: string;
+    shortcut?: string;
+    separator?: boolean;
+    onSelect?: () => void;
+}
+interface ToastMessage {
+    id: string;
+    title: string;
+    description?: string;
+    variant?: 'default' | 'destructive';
+    duration?: number;
+}
+interface ChartPoint {
+    label: string;
+    value: number;
+}
+declare const stylePacks: readonly StylePack[];
+declare function cx(...values: (string | undefined | false | null)[]): string;
+declare function percentage(value: number, min?: number, max?: number): number;
+declare function nextIndex(items: readonly {
+    disabled?: boolean;
+}[], current: number, key: string, loop?: boolean): number;
+declare function createTypeahead(): (key: string, items: readonly Option[], current: number) => number;
+type Layer = {
+    elements: () => (HTMLElement | null)[];
+    dismiss: (reason: 'escape' | 'outside') => void;
+};
+declare function dismissableLayer(doc: Document, layer: Layer): () => void;
+interface FloatingOptions {
+    side?: Side;
+    align?: Align;
+    offset?: number;
+    matchWidth?: boolean;
+}
+declare function floatingPosition(anchor: DOMRect, popup: DOMRect, width: number, height: number, options?: FloatingOptions): {
+    x: number;
+    y: number;
+    side: Side;
+    maxHeight: number;
+};
+declare function attachFloating(anchor: HTMLElement, popup: HTMLElement, options?: FloatingOptions): () => void;
+declare function lockScroll(doc: Document): () => void;
+declare function focusFirst(root: HTMLElement): void;
+declare function scrollWithin(container: HTMLElement, item: HTMLElement): void;
+declare function formReset(element: HTMLElement, reset: () => void): () => void;
+declare const primitiveDefinitions: {
+    readonly ChartRoot: readonly ["canvas", "chart-canvas"];
+    readonly SelectRoot: readonly ["div", "select"];
+    readonly ComboboxRoot: readonly ["div", "combobox"];
+    readonly DropdownMenuRoot: readonly ["div", "dropdown-menu"];
+    readonly PopoverRoot: readonly ["div", "popover"];
+    readonly TabsRoot: readonly ["div", "tabs"];
+    readonly AccordionRoot: readonly ["div", "accordion"];
+    readonly CommandRoot: readonly ["div", "command"];
+    readonly SidebarRoot: readonly ["div", "sidebar"];
+    readonly DialogRoot: readonly ["dialog", "dialog"];
+    readonly DrawerRoot: readonly ["dialog", "drawer"];
+    readonly AlertDialogRoot: readonly ["dialog", "alert-dialog"];
+    readonly Button: readonly ["button", "btn"];
+    readonly Badge: readonly ["span", "badge"];
+    readonly Card: readonly ["article", "card"];
+    readonly CardHeader: readonly ["header", ""];
+    readonly CardTitle: readonly ["h3", "card-title"];
+    readonly CardDescription: readonly ["p", ""];
+    readonly CardContent: readonly ["section", ""];
+    readonly CardFooter: readonly ["footer", ""];
+    readonly CardAction: readonly ["div", "card-action"];
+    readonly Alert: readonly ["div", "alert"];
+    readonly AlertTitle: readonly ["h2", ""];
+    readonly AlertDescription: readonly ["section", ""];
+    readonly Avatar: readonly ["span", "avatar"];
+    readonly AvatarImage: readonly ["img", ""];
+    readonly AvatarFallback: readonly ["span", ""];
+    readonly Breadcrumb: readonly ["nav", "breadcrumb"];
+    readonly BreadcrumbList: readonly ["ol", ""];
+    readonly BreadcrumbItem: readonly ["li", ""];
+    readonly BreadcrumbLink: readonly ["a", ""];
+    readonly BreadcrumbSeparator: readonly ["li", ""];
+    readonly ButtonGroup: readonly ["div", "button-group"];
+    readonly Field: readonly ["div", "field"];
+    readonly FieldLabel: readonly ["label", "label"];
+    readonly FieldDescription: readonly ["p", ""];
+    readonly FieldError: readonly ["p", ""];
+    readonly Label: readonly ["label", "label"];
+    readonly Input: readonly ["input", "input"];
+    readonly Textarea: readonly ["textarea", "textarea"];
+    readonly NativeSelect: readonly ["select", "select"];
+    readonly InputGroup: readonly ["div", "input-group"];
+    readonly InputGroupAddon: readonly ["div", ""];
+    readonly Empty: readonly ["div", "empty"];
+    readonly EmptyHeader: readonly ["header", ""];
+    readonly EmptyTitle: readonly ["h3", ""];
+    readonly EmptyDescription: readonly ["p", ""];
+    readonly EmptyContent: readonly ["section", ""];
+    readonly Item: readonly ["div", "item"];
+    readonly ItemContent: readonly ["section", ""];
+    readonly ItemTitle: readonly ["h3", ""];
+    readonly ItemDescription: readonly ["p", ""];
+    readonly ItemActions: readonly ["div", ""];
+    readonly Kbd: readonly ["kbd", "kbd"];
+    readonly ScrollArea: readonly ["div", "scrollbar"];
+    readonly Skeleton: readonly ["div", "skeleton"];
+    readonly Spinner: readonly ["span", "bc-spinner"];
+    readonly Separator: readonly ["hr", ""];
+    readonly Table: readonly ["table", "table"];
+    readonly TableHeader: readonly ["thead", ""];
+    readonly TableBody: readonly ["tbody", ""];
+    readonly TableFooter: readonly ["tfoot", ""];
+    readonly TableRow: readonly ["tr", ""];
+    readonly TableHead: readonly ["th", ""];
+    readonly TableCell: readonly ["td", ""];
+    readonly TableCaption: readonly ["caption", ""];
+    readonly DialogHeader: readonly ["header", ""];
+    readonly DialogTitle: readonly ["h2", ""];
+    readonly DialogDescription: readonly ["p", ""];
+    readonly DialogContent: readonly ["section", ""];
+    readonly DialogFooter: readonly ["footer", ""];
+    readonly SidebarHeader: readonly ["header", ""];
+    readonly SidebarContent: readonly ["section", ""];
+    readonly SidebarFooter: readonly ["footer", ""];
+    readonly SidebarGroup: readonly ["section", ""];
+    readonly SidebarItem: readonly ["a", ""];
+};
+type PrimitiveName = keyof typeof primitiveDefinitions;
+
+export { type AccordionItem, type Align, type ChartPoint, type FloatingOptions, type MenuItem, type Option, type PrimitiveName, type Side, type Size, type StylePack, type TabItem, type ToastMessage, type Variant, attachFloating, attachWidget, createTypeahead, cx, dismissableLayer, floatingPosition, focusFirst, formReset, lockScroll, nextIndex, percentage, primitiveDefinitions, scrollWithin, stylePacks };