@nuykon/basecoat-svelte 0.0.0-stage → 1.0.2

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

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

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

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

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

package/dist/ButtonGroup.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('button-group', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

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

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

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

package/dist/CardAction.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('card-action', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

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

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

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

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

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

package/dist/CardTitle.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('card-title', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

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

package/dist/Chart.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ChartPoint } from './core.js';
+  let {
+    data,
+    label,
+    kind = 'line',
+  }: { data: readonly ChartPoint[]; label: string; kind?: 'line' | 'bar' } = $props();
+  const id = $props.id();
+  let finite = $derived(data.map((point) => (Number.isFinite(point.value) ? point.value : 0))),
+    min = $derived(Math.min(0, ...finite)),
+    max = $derived(Math.max(1, ...finite));
+  const y = (value: number) => 180 - ((value - min) / (max - min)) * 160;
+</script>
+
+<figure class="chart">
+  <svg class="bc-chart" viewBox="0 0 400 200" role="img" aria-labelledby={id}
+    ><title {id}>{label}</title>{#if kind === 'line'}<polyline
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        points={finite
+          .map((value, index) => `${20 + (index / Math.max(1, data.length - 1)) * 360},${y(value)}`)
+          .join(' ')}
+      />{:else}{#each finite as value, index}<rect
+          x={20 + (index / Math.max(1, data.length)) * 360}
+          y={Math.min(y(0), y(value))}
+          width={Math.max(1, 360 / Math.max(1, data.length) - 8)}
+          height={Math.abs(y(value) - y(0))}
+          fill="currentColor"
+        />{/each}{/if}</svg
+  >
+  <table class="bc-live">
+    <caption>{label}</caption><tbody
+      >{#each data as point}<tr><th scope="row">{point.label}</th><td>{point.value}</td></tr
+        >{/each}</tbody
+    >
+  </table>
+  <figcaption>{label}</figcaption>
+</figure>

package/dist/Chart.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ChartPoint } from './core.js';
+type $$ComponentProps = {
+    data: readonly ChartPoint[];
+    label: string;
+    kind?: 'line' | 'bar';
+};
+declare const Chart: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/ChartRoot.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { attachWidget } from './core.js';
+  import type { HTMLCanvasAttributes } from 'svelte/elements';
+  let { ...rest }: HTMLCanvasAttributes = $props();
+  let element: HTMLCanvasElement;
+  $effect(() => attachWidget(element));
+</script>
+
+<canvas {...rest} bind:this={element}></canvas>

package/dist/ChartRoot.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLCanvasAttributes } from 'svelte/elements';
+declare const ChartRoot: import("svelte").Component<HTMLCanvasAttributes, {}, "">;
+type ChartRoot = ReturnType<typeof ChartRoot>;
+export default ChartRoot;

package/dist/Checkbox.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cx, formReset } from './core.js';
+  type Props = Omit<HTMLInputAttributes, 'type' | 'checked' | 'defaultChecked'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+  };
+  let {
+    checked = $bindable(undefined),
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate = false,
+    class: className,
+    onchange,
+    ...rest
+  }: Props = $props();
+  let internal = $state((() => defaultChecked)()),
+    element: HTMLInputElement;
+  let current = $derived(checked === undefined ? internal : checked);
+  function set(value: boolean) {
+    if (checked === undefined) internal = value;
+    else if (!onCheckedChange) checked = value;
+    onCheckedChange?.(value);
+  }
+  $effect(() => {
+    element.indeterminate = indeterminate;
+  });
+  $effect(() => formReset(element, () => set(defaultChecked)));
+</script>
+
+<input
+  {...rest}
+  bind:this={element}
+  class={cx('input', typeof className === 'string' ? className : undefined)}
+  type="checkbox"
+  checked={current}
+  onchange={(event) => {
+    onchange?.(event);
+    if (!event.defaultPrevented) set(event.currentTarget.checked);
+  }}
+/>

package/dist/Checkbox.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type' | 'checked' | 'defaultChecked'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;