@happyvertical/smrt-ui 0.30.0

package/dist/components/ui/Avatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Avatar.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC3E,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8DD,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/ui/Badge.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BadgeSize, BadgeVariant } from '../../types-generic';
+
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children?: Snippet;
+}
+
+const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
+</script>
+
+<span class="badge {variant} {size}" {...rest}>
+  {@render children?.()}
+</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--smrt-typography-body-medium-weight);
+    border-radius: var(--smrt-radius-full);
+    white-space: nowrap;
+  }
+
+  /* Sizes */
+  .sm {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    font-size: var(--smrt-typography-body-small-size);
+  }
+
+  .md {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+    font-size: var(--smrt-typography-body-medium-size);
+  }
+
+  /* Variants */
+  .default {
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .primary {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+
+  .success {
+    background: var(--smrt-color-success-container);
+    color: var(--smrt-color-on-success-container);
+  }
+
+  .warning {
+    background: var(--smrt-color-warning-container);
+    color: var(--smrt-color-on-warning-container);
+  }
+
+  .error {
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+  }
+
+  .info {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+</style>

package/dist/components/ui/Badge.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { BadgeSize, BadgeVariant } from '../../types-generic';
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/components/ui/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnE,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkBD,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/ui/Button.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+/**
+ * Button - Versatile button component
+ *
+ * Supports both button and link rendering. When href is provided,
+ * renders as an anchor tag. Otherwise renders as a button.
+ */
+import type { Snippet } from 'svelte';
+import type {
+  HTMLAnchorAttributes,
+  HTMLButtonAttributes,
+} from 'svelte/elements';
+import type { ButtonSize, ButtonVariant } from '../../types-generic';
+
+/** Props for Button component */
+export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
+  /** Visual variant */
+  variant?: ButtonVariant;
+  /** Size variant */
+  size?: ButtonSize;
+  /** URL for link mode (renders as <a> tag) */
+  href?: string;
+  /** Snippet for button content */
+  children?: Snippet;
+  /** Full width button */
+  fullWidth?: boolean;
+  /** Loading state */
+  loading?: boolean;
+}
+
+const {
+  variant = 'primary',
+  size = 'md',
+  href,
+  disabled = false,
+  loading = false,
+  type = 'button',
+  fullWidth = false,
+  onclick,
+  children,
+  ...rest
+}: Props = $props();
+
+const isLink = $derived(!!href);
+const isDisabled = $derived(disabled || loading);
+
+// Button-specific props to exclude in link mode
+const buttonOnlyProps = new Set([
+  'type',
+  'disabled',
+  'form',
+  'formAction',
+  'formEnctype',
+  'formMethod',
+  'formNoValidate',
+  'formTarget',
+]);
+
+// Filter out button-specific props for link mode
+const linkProps = $derived(() => {
+  return Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !buttonOnlyProps.has(key)),
+  ) as HTMLAnchorAttributes;
+});
+</script>
+
+{#if isLink}
+  <a
+    {href}
+    class="button {variant} {size}"
+    class:disabled={isDisabled}
+    class:full-width={fullWidth}
+    class:loading
+    aria-disabled={isDisabled}
+    aria-busy={loading}
+    onclick={onclick as HTMLAnchorAttributes['onclick']}
+    {...linkProps()}
+  >
+    {#if loading}
+      <span class="spinner" aria-hidden="true"></span>
+    {/if}
+    <span class="content" class:loading>
+      {@render children?.()}
+    </span>
+  </a>
+{:else}
+  <button
+    {type}
+    disabled={isDisabled}
+    aria-busy={loading}
+    class="button {variant} {size}"
+    class:full-width={fullWidth}
+    class:loading
+    {onclick}
+    {...rest}
+  >
+    {#if loading}
+      <span class="spinner" aria-hidden="true"></span>
+    {/if}
+    <span class="content" class:loading>
+      {@render children?.()}
+    </span>
+  </button>
+{/if}
+
+<style>
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--smrt-spacing-2);
+    font-weight: var(--smrt-typography-body-medium-weight);
+    border-radius: var(--smrt-radius-medium);
+    transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
+    cursor: pointer;
+    text-decoration: none;
+    border: 1px solid transparent;
+  }
+
+  /* Sizes */
+  .sm {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    font-size: var(--smrt-typography-body-medium-size);
+  }
+
+  .md {
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+    font-size: var(--smrt-typography-body-large-size);
+  }
+
+  .lg {
+    padding: var(--smrt-spacing-4) var(--smrt-spacing-6);
+    font-size: var(--smrt-typography-title-medium-size);
+  }
+
+  /* Variants */
+  .primary {
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+  }
+
+  .primary:hover:not(:disabled):not(.disabled) {
+    background: var(--smrt-color-primary);
+  }
+
+  .secondary {
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-primary);
+    border-color: var(--smrt-color-primary);
+  }
+
+  .secondary:hover:not(:disabled):not(.disabled) {
+    background: var(--smrt-color-primary-container);
+  }
+
+  .ghost {
+    background: transparent;
+    color: var(--smrt-color-primary);
+  }
+
+  .ghost:hover:not(:disabled):not(.disabled) {
+    background: var(--smrt-color-primary-container);
+  }
+
+  .danger {
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
+  }
+
+  .danger:hover:not(:disabled):not(.disabled) {
+    background: var(--smrt-color-error);
+  }
+
+  /* Full width */
+  .full-width {
+    width: 100%;
+  }
+
+  /* Loading state */
+  .loading {
+    position: relative;
+  }
+
+  .spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--smrt-radius-full, 9999px);
+    animation: spin 0.75s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: translate(-50%, -50%) rotate(0deg); }
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+  }
+
+  .content.loading {
+    opacity: 0;
+  }
+
+  /* Disabled state */
+  .button:disabled,
+  .button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Focus state */
+  .button:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/ui/Button.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Button - Versatile button component
+ *
+ * Supports both button and link rendering. When href is provided,
+ * renders as an anchor tag. Otherwise renders as a button.
+ */
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ButtonSize, ButtonVariant } from '../../types-generic';
+/** Props for Button component */
+export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
+    /** Visual variant */
+    variant?: ButtonVariant;
+    /** Size variant */
+    size?: ButtonSize;
+    /** URL for link mode (renders as <a> tag) */
+    href?: string;
+    /** Snippet for button content */
+    children?: Snippet;
+    /** Full width button */
+    fullWidth?: boolean;
+    /** Loading state */
+    loading?: boolean;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/components/ui/Button.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAEV,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoED,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/ui/Card.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CardPadding, CardVariant } from '../../types-generic';
+
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+  variant?: CardVariant;
+  padding?: CardPadding;
+  hoverable?: boolean;
+  children?: Snippet;
+  header?: Snippet;
+  footer?: Snippet;
+}
+
+const {
+  variant = 'default',
+  padding = 'md',
+  hoverable = false,
+  children,
+  header,
+  footer,
+  ...rest
+}: Props = $props();
+</script>
+
+<div
+  class="card {variant} padding-{padding}"
+  class:hoverable
+  {...rest}
+>
+  {#if header}
+    <div class="card-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class="card-content">
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div class="card-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .card {
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-medium);
+    transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+
+  /* Variants */
+  .default {
+    border: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .outlined {
+    border: 2px solid var(--smrt-color-outline);
+  }
+
+  .elevated {
+    border: 1px solid var(--smrt-color-outline-variant);
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  /* Hoverable state */
+  .hoverable:hover {
+    box-shadow: var(--smrt-elevation-3);
+    transform: translateY(-2px);
+  }
+
+  /* Padding */
+  .padding-none .card-content {
+    padding: var(--smrt-spacing-0);
+  }
+
+  .padding-sm .card-content {
+    padding: var(--smrt-spacing-4);
+  }
+
+  .padding-md .card-content {
+    padding: var(--smrt-spacing-6);
+  }
+
+  .padding-lg .card-content {
+    padding: var(--smrt-spacing-8);
+  }
+
+  /* Header */
+  .card-header {
+    padding: var(--smrt-spacing-6);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .padding-sm .card-header {
+    padding: var(--smrt-spacing-4);
+  }
+
+  .padding-lg .card-header {
+    padding: var(--smrt-spacing-8);
+  }
+
+  /* Footer */
+  .card-footer {
+    padding: var(--smrt-spacing-6);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-container-low);
+    border-bottom-left-radius: var(--smrt-radius-medium);
+    border-bottom-right-radius: var(--smrt-radius-medium);
+  }
+
+  .padding-sm .card-footer {
+    padding: var(--smrt-spacing-4);
+  }
+
+  .padding-lg .card-footer {
+    padding: var(--smrt-spacing-8);
+  }
+</style>

package/dist/components/ui/Card.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CardPadding, CardVariant } from '../../types-generic';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    hoverable?: boolean;
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
+//# sourceMappingURL=Card.svelte.d.ts.map

package/dist/components/ui/Card.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGpE,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACnE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAwCD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/ui/Chip.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+/**
+ * Chip — compact token, optionally selectable (toggle) and/or closeable.
+ *
+ * When `selectable`, the body is a `<button>` reflecting `selected` via
+ * `aria-pressed`. When `closeable`, a labelled remove `<button>` is appended.
+ * Both are native buttons, so keyboard activation is built in.
+ */
+import type { Snippet } from 'svelte';
+
+export type ChipSize = 'sm' | 'md';
+
+export interface Props {
+  /** Text label; also the close button's accessible name (`Remove <label>`). */
+  label?: string;
+  /** Chip content; falls back to `label`. */
+  children?: Snippet;
+  /** Render the body as a toggle button reflecting `selected`. */
+  selectable?: boolean;
+  /** Selected state (only meaningful with `selectable`). */
+  selected?: boolean;
+  /** Append a remove (×) button. */
+  closeable?: boolean;
+  /** Disable both buttons. */
+  disabled?: boolean;
+  /** Size variant. */
+  size?: ChipSize;
+  /** Fired when a selectable chip body is activated. */
+  onselect?: () => void;
+  /** Fired when the remove button is activated. */
+  onclose?: () => void;
+}
+
+const {
+  label,
+  children,
+  selectable = false,
+  selected = false,
+  closeable = false,
+  disabled = false,
+  size = 'md',
+  onselect,
+  onclose,
+}: Props = $props();
+</script>
+
+<span
+  class="chip {size}"
+  class:selected
+  class:disabled
+  class:selectable
+  class:closeable
+>
+  {#if selectable}
+    <button
+      type="button"
+      class="chip__body"
+      aria-pressed={selected}
+      {disabled}
+      onclick={() => onselect?.()}
+    >
+      {#if children}{@render children()}{:else}{label}{/if}
+    </button>
+  {:else}
+    <span class="chip__body">
+      {#if children}{@render children()}{:else}{label}{/if}
+    </span>
+  {/if}
+
+  {#if closeable}
+    <button
+      type="button"
+      class="chip__close"
+      aria-label={label ? `Remove ${label}` : 'Remove'}
+      {disabled}
+      onclick={() => onclose?.()}
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  {/if}
+</span>
+
+<style>
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    max-width: 100%;
+  }
+
+  .chip.sm {
+    padding: 0 var(--smrt-spacing-1, 4px);
+    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+  }
+  .chip.md {
+    padding: 0 var(--smrt-spacing-2, 8px);
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+
+  .chip.selected {
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-color: var(--smrt-color-primary);
+  }
+
+  .chip.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .chip__body {
+    appearance: none;
+    background: none;
+    border: none;
+    color: inherit;
+    font: inherit;
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px);
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .chip.selectable .chip__body {
+    cursor: pointer;
+  }
+
+  .chip__close {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-full, 9999px);
+    opacity: 0.7;
+  }
+  .chip__close:hover {
+    opacity: 1;
+    background: color-mix(in srgb, currentColor 12%, transparent);
+  }
+
+  .chip__body:focus-visible,
+  .chip__close:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 1px;
+  }
+</style>

package/dist/components/ui/Chip.svelte.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Chip — compact token, optionally selectable (toggle) and/or closeable.
+ *
+ * When `selectable`, the body is a `<button>` reflecting `selected` via
+ * `aria-pressed`. When `closeable`, a labelled remove `<button>` is appended.
+ * Both are native buttons, so keyboard activation is built in.
+ */
+import type { Snippet } from 'svelte';
+export type ChipSize = 'sm' | 'md';
+export interface Props {
+    /** Text label; also the close button's accessible name (`Remove <label>`). */
+    label?: string;
+    /** Chip content; falls back to `label`. */
+    children?: Snippet;
+    /** Render the body as a toggle button reflecting `selected`. */
+    selectable?: boolean;
+    /** Selected state (only meaningful with `selectable`). */
+    selected?: boolean;
+    /** Append a remove (×) button. */
+    closeable?: boolean;
+    /** Disable both buttons. */
+    disabled?: boolean;
+    /** Size variant. */
+    size?: ChipSize;
+    /** Fired when a selectable chip body is activated. */
+    onselect?: () => void;
+    /** Fired when the remove button is activated. */
+    onclose?: () => void;
+}
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;
+//# sourceMappingURL=Chip.svelte.d.ts.map

package/dist/components/ui/Chip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Chip.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,KAAK;IACpB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA6CD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}