@nuykon/basecoat-svelte 0.0.0-stage → 1.0.2

package/dist/Input.svelte

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/Pagination.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  let {
+    page = $bindable(1),
+    count,
+    onPageChange,
+    label = 'Pagination',
+  }: {
+    page?: number;
+    count: number;
+    onPageChange?: (page: number) => void;
+    label?: string;
+  } = $props();
+  let total = $derived(Math.max(1, Math.floor(count))),
+    current = $derived(Math.max(1, Math.min(page, total)));
+  function set(next: number) {
+    if (!onPageChange) page = next;
+    onPageChange?.(next);
+  }
+</script>
+
+<nav class="bc-pagination" aria-label={label}>
+  <button
+    type="button"
+    class="btn"
+    data-variant="outline"
+    disabled={current === 1}
+    aria-label="Previous page"
+    onclick={() => set(current - 1)}>‹</button
+  ><span aria-live="polite">{current} / {total}</span><button
+    type="button"
+    class="btn"
+    data-variant="outline"
+    disabled={current === total}
+    aria-label="Next page"
+    onclick={() => set(current + 1)}>›</button
+  >
+</nav>

package/dist/Pagination.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    page?: number;
+    count: number;
+    onPageChange?: (page: number) => void;
+    label?: string;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/Popover.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import {
+    attachFloating,
+    dismissableLayer,
+    focusFirst,
+    type Side,
+    type Align,
+  } from './core.js';
+  type Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger: string;
+    side?: Side;
+    align?: Align;
+    label?: string;
+    children?: Snippet;
+  };
+  let {
+    open = $bindable(undefined),
+    defaultOpen = false,
+    onOpenChange,
+    trigger,
+    side,
+    align,
+    label = 'Popover',
+    children,
+  }: Props = $props();
+  const id = $props.id();
+  let internal = $state((() => defaultOpen)()),
+    current = $derived(open === undefined ? internal : open),
+    anchor: HTMLButtonElement,
+    popup = $state<HTMLDivElement>();
+  function set(next: boolean) {
+    if (open === undefined) internal = next;
+    else if (!onOpenChange) open = next;
+    onOpenChange?.(next);
+  }
+  $effect(() => {
+    if (!current || !popup) return;
+    const position = attachFloating(anchor, popup, { side, align });
+    const layer = dismissableLayer(anchor.ownerDocument, {
+      elements: () => [anchor, popup ?? null],
+      dismiss: (reason) => {
+        set(false);
+        if (reason === 'escape') anchor.focus();
+      },
+    });
+    focusFirst(popup);
+    return () => {
+      layer();
+      position();
+    };
+  });
+</script>
+
+<div class="popover">
+  <button
+    bind:this={anchor}
+    type="button"
+    class="btn"
+    data-variant="outline"
+    aria-haspopup="dialog"
+    aria-expanded={current}
+    aria-controls={id}
+    onclick={() => set(!current)}>{trigger}</button
+  >{#if current}<div
+      bind:this={popup}
+      {id}
+      data-popover=""
+      popover="manual"
+      class="bc-floating"
+      role="dialog"
+      aria-label={label}
+      tabindex="-1"
+    >
+      {@render children?.()}
+    </div>{/if}
+</div>

package/dist/Popover.svelte.d.ts

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