kumo-svelte 0.1.0-beta.0

package/dist/components/autocomplete/index.js

@@ -0,0 +1,20 @@
+import Root from './Autocomplete.svelte';
+import InputGroup from './AutocompleteInputGroup.svelte';
+import Content from './AutocompleteContent.svelte';
+import List from './AutocompleteList.svelte';
+import Item from './AutocompleteItem.svelte';
+import Group from './AutocompleteGroup.svelte';
+import GroupLabel from './AutocompleteGroupLabel.svelte';
+import Collection from './AutocompleteCollection.svelte';
+import Separator from './AutocompleteSeparator.svelte';
+export const Autocomplete = Object.assign(Root, {
+    InputGroup,
+    Content,
+    List,
+    Item,
+    Group,
+    GroupLabel,
+    Collection,
+    Separator
+});
+export { Root as AutocompleteRoot, InputGroup as AutocompleteInputGroup, Content as AutocompleteContent, List as AutocompleteList, Item as AutocompleteItem, Group as AutocompleteGroup, GroupLabel as AutocompleteGroupLabel, Collection as AutocompleteCollection, Separator as AutocompleteSeparator };

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  export const KUMO_BADGE_BASE_STYLES = 'inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap';
+  export const KUMO_BADGE_VARIANTS = {
+    primary: 'bg-kumo-badge-inverted text-kumo-badge-inverted',
+    secondary: 'bg-kumo-fill text-kumo-badge-neutral-subtle',
+    error: 'bg-kumo-danger-tint/60 text-kumo-danger',
+    warning: 'bg-kumo-warning-tint/70 text-kumo-warning',
+    success: 'bg-kumo-success-tint/70 text-kumo-success',
+    destructive: 'bg-kumo-badge-red text-white',
+    info: 'bg-kumo-info-tint/70 text-kumo-info',
+    beta: 'border border-dashed border-kumo-brand bg-transparent text-kumo-link',
+    outline: 'border border-kumo-fill bg-transparent text-kumo-default',
+    red: 'bg-kumo-badge-red text-white',
+    green: 'bg-kumo-badge-green text-white',
+    neutral: 'bg-kumo-badge-neutral text-white',
+    orange: 'bg-kumo-badge-orange text-black',
+    purple: 'bg-kumo-badge-purple text-white',
+    teal: 'bg-kumo-badge-teal text-white',
+    'teal-subtle': 'bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle',
+    blue: 'bg-kumo-badge-blue text-white'
+  } as const;
+
+  export type BadgeVariant = keyof typeof KUMO_BADGE_VARIANTS;
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    children?: Snippet;
+    class?: string;
+    variant?: BadgeVariant;
+    [key: string]: unknown;
+  }
+
+  let { children, class: className, variant = 'primary', ...rest }: Props = $props();
+</script>
+
+<span class={cn(KUMO_BADGE_BASE_STYLES, KUMO_BADGE_VARIANTS[variant], className)} {...rest}>
+  {@render children?.()}
+</span>

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

@@ -0,0 +1,31 @@
+export declare const KUMO_BADGE_BASE_STYLES = "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";
+export declare const KUMO_BADGE_VARIANTS: {
+    readonly primary: "bg-kumo-badge-inverted text-kumo-badge-inverted";
+    readonly secondary: "bg-kumo-fill text-kumo-badge-neutral-subtle";
+    readonly error: "bg-kumo-danger-tint/60 text-kumo-danger";
+    readonly warning: "bg-kumo-warning-tint/70 text-kumo-warning";
+    readonly success: "bg-kumo-success-tint/70 text-kumo-success";
+    readonly destructive: "bg-kumo-badge-red text-white";
+    readonly info: "bg-kumo-info-tint/70 text-kumo-info";
+    readonly beta: "border border-dashed border-kumo-brand bg-transparent text-kumo-link";
+    readonly outline: "border border-kumo-fill bg-transparent text-kumo-default";
+    readonly red: "bg-kumo-badge-red text-white";
+    readonly green: "bg-kumo-badge-green text-white";
+    readonly neutral: "bg-kumo-badge-neutral text-white";
+    readonly orange: "bg-kumo-badge-orange text-black";
+    readonly purple: "bg-kumo-badge-purple text-white";
+    readonly teal: "bg-kumo-badge-teal text-white";
+    readonly 'teal-subtle': "bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle";
+    readonly blue: "bg-kumo-badge-blue text-white";
+};
+export type BadgeVariant = keyof typeof KUMO_BADGE_VARIANTS;
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    class?: string;
+    variant?: BadgeVariant;
+    [key: string]: unknown;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge, KUMO_BADGE_BASE_STYLES } from './Badge.svelte';
+export type { BadgeVariant } from './Badge.svelte';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { default as Badge, KUMO_BADGE_BASE_STYLES } from './Badge.svelte';

package/dist/components/banner/Banner.svelte

@@ -0,0 +1,115 @@
+<script module lang="ts">
+  import { cn } from '../../utils/cn';
+
+  export const KUMO_BANNER_BASE_STYLES =
+    'flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base';
+
+  export const KUMO_BANNER_VARIANTS = {
+    variant: {
+      default: {
+        classes: 'bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info',
+        iconClasses: 'text-kumo-info',
+        description: 'Informational banner for general messages'
+      },
+      alert: {
+        classes: 'bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning',
+        iconClasses: 'text-kumo-warning',
+        description: 'Warning banner for cautionary messages'
+      },
+      error: {
+        classes: 'bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger',
+        iconClasses: 'text-kumo-danger',
+        description: 'Error banner for critical issues'
+      }
+    }
+  } as const;
+
+  export const KUMO_BANNER_DEFAULT_VARIANTS = {
+    variant: 'default'
+  } as const;
+
+  type Variant = keyof typeof KUMO_BANNER_VARIANTS.variant;
+  export type BannerVariant = Variant;
+
+  export function bannerVariants({
+    variant = KUMO_BANNER_DEFAULT_VARIANTS.variant
+  }: {
+    variant?: Variant;
+  } = {}) {
+    const variantConfig =
+      KUMO_BANNER_VARIANTS.variant[variant] ??
+      KUMO_BANNER_VARIANTS.variant[KUMO_BANNER_DEFAULT_VARIANTS.variant];
+
+    return cn(KUMO_BANNER_BASE_STYLES, variantConfig.classes);
+  }
+</script>
+
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    action?: Snippet;
+    class?: string;
+    icon?: Component;
+    variant?: Variant;
+    title?: string;
+    description?: string | Snippet;
+    text?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    action,
+    class: className,
+    icon: IconComponent,
+    variant = 'default',
+    title,
+    description,
+    text,
+    ...rest
+  }: Props = $props();
+
+  const variantConfig = $derived(
+    KUMO_BANNER_VARIANTS.variant[variant] ??
+      KUMO_BANNER_VARIANTS.variant[KUMO_BANNER_DEFAULT_VARIANTS.variant]
+  );
+  const classes = $derived(cn(bannerVariants({ variant }), className));
+</script>
+
+<div class={classes} {...rest}>
+  {#if title || description}
+    {#if IconComponent}
+      <span class={cn('shrink-0 flex items-center h-[1.375em]', variantConfig.iconClasses)}>
+        <IconComponent weight="fill" />
+      </span>
+    {/if}
+    <div class="flex min-w-0 flex-1 items-center justify-between gap-3">
+      <div class="flex flex-col gap-0.5">
+        {#if title}<p class="font-medium leading-snug">{title}</p>{/if}
+        {#if description}
+          <div class="text-sm leading-snug">
+            {#if typeof description === 'function'}
+              {@render description()}
+            {:else}
+              <p>{description}</p>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      {#if action}<div class="flex shrink-0 items-center gap-2">{@render action()}</div>{/if}
+    </div>
+  {:else}
+    {#if IconComponent}
+      <span class={cn('shrink-0', variantConfig.iconClasses)}>
+        <IconComponent />
+      </span>
+    {/if}
+    {#if children}
+      {@render children()}
+    {:else}
+      <p>{text}</p>
+    {/if}
+  {/if}
+</div>

package/dist/components/banner/Banner.svelte.d.ts

@@ -0,0 +1,43 @@
+export declare const KUMO_BANNER_BASE_STYLES = "flex w-full items-start gap-3 rounded-lg border px-4 py-3 text-base";
+export declare const KUMO_BANNER_VARIANTS: {
+    readonly variant: {
+        readonly default: {
+            readonly classes: "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info";
+            readonly iconClasses: "text-kumo-info";
+            readonly description: "Informational banner for general messages";
+        };
+        readonly alert: {
+            readonly classes: "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning";
+            readonly iconClasses: "text-kumo-warning";
+            readonly description: "Warning banner for cautionary messages";
+        };
+        readonly error: {
+            readonly classes: "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger";
+            readonly iconClasses: "text-kumo-danger";
+            readonly description: "Error banner for critical issues";
+        };
+    };
+};
+export declare const KUMO_BANNER_DEFAULT_VARIANTS: {
+    readonly variant: "default";
+};
+type Variant = keyof typeof KUMO_BANNER_VARIANTS.variant;
+export type BannerVariant = Variant;
+export declare function bannerVariants({ variant }?: {
+    variant?: Variant;
+}): string;
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    action?: Snippet;
+    class?: string;
+    icon?: Component;
+    variant?: Variant;
+    title?: string;
+    description?: string | Snippet;
+    text?: string;
+    [key: string]: unknown;
+}
+declare const Banner: Component<Props, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Banner, KUMO_BANNER_BASE_STYLES, KUMO_BANNER_DEFAULT_VARIANTS, KUMO_BANNER_VARIANTS, bannerVariants } from './Banner.svelte';
+export type { BannerVariant } from './Banner.svelte';

package/dist/components/banner/index.js

@@ -0,0 +1 @@
+export { default as Banner, KUMO_BANNER_BASE_STYLES, KUMO_BANNER_DEFAULT_VARIANTS, KUMO_BANNER_VARIANTS, bannerVariants } from './Banner.svelte';

package/dist/components/breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,107 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils/cn';
+
+  export const KUMO_BREADCRUMBS_VARIANTS = {
+    size: {
+      sm: {
+        classes: 'text-sm h-10 gap-0.5',
+        description: 'Compact breadcrumbs for dense UIs'
+      },
+      base: {
+        classes: 'text-base h-12 gap-1',
+        description: 'Default breadcrumbs size'
+      }
+    }
+  } as const;
+
+  export const KUMO_BREADCRUMBS_DEFAULT_VARIANTS = {
+    size: 'base'
+  } as const;
+
+  export type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;
+
+  export interface KumoBreadcrumbsVariantsProps {
+    size?: KumoBreadcrumbsSize;
+  }
+
+  export interface BreadcrumbsItem {
+    label: string;
+    href?: string;
+  }
+
+  export function breadcrumbsVariants({
+    size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size
+  }: KumoBreadcrumbsVariantsProps = {}) {
+    return cn(
+      'group mr-4 flex min-w-0 grow items-center overflow-hidden whitespace-nowrap',
+      KUMO_BREADCRUMBS_VARIANTS.size[size]?.classes ??
+        KUMO_BREADCRUMBS_VARIANTS.size[KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size].classes
+    );
+  }
+
+  function getMobileItems(items: BreadcrumbsItem[]) {
+    if (items.length <= 2) return items;
+    return items.slice(-2);
+  }
+</script>
+
+<script lang="ts">
+  import BreadcrumbsCurrent from './BreadcrumbsCurrent.svelte';
+  import BreadcrumbsLink from './BreadcrumbsLink.svelte';
+  import BreadcrumbsSeparator from './BreadcrumbsSeparator.svelte';
+
+  interface Props extends KumoBreadcrumbsVariantsProps {
+    children?: Snippet;
+    class?: string;
+    className?: string;
+    items?: BreadcrumbsItem[];
+    [key: string]: unknown;
+  }
+
+  let {
+    children,
+    class: className,
+    className: classNameAlias,
+    size = KUMO_BREADCRUMBS_DEFAULT_VARIANTS.size,
+    items = [],
+    ...rest
+  }: Props = $props();
+
+  const mobileItems = $derived(getMobileItems(items));
+</script>
+
+<nav class={cn(breadcrumbsVariants({ size }), className, classNameAlias)} aria-label="breadcrumb" {...rest}>
+  {#if children}
+    {@render children()}
+  {:else if items.length > 0}
+    <div class="contents sm:hidden">
+      {#if items.length > 2}
+        <span class="flex shrink-0 items-center text-kumo-subtle" aria-hidden="true">...</span>
+        <BreadcrumbsSeparator />
+      {/if}
+      {#each mobileItems as item, index}
+        {#if index > 0}
+          <BreadcrumbsSeparator />
+        {/if}
+        {#if item.href && index < mobileItems.length - 1}
+          <BreadcrumbsLink href={item.href}>{item.label}</BreadcrumbsLink>
+        {:else}
+          <BreadcrumbsCurrent>{item.label}</BreadcrumbsCurrent>
+        {/if}
+      {/each}
+    </div>
+    <div class="hidden sm:contents">
+      {#each items as item, index}
+        {#if index > 0}
+          <BreadcrumbsSeparator />
+        {/if}
+        {#if item.href && index < items.length - 1}
+          <BreadcrumbsLink href={item.href}>{item.label}</BreadcrumbsLink>
+        {:else}
+          <BreadcrumbsCurrent>{item.label}</BreadcrumbsCurrent>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</nav>

package/dist/components/breadcrumbs/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+export declare const KUMO_BREADCRUMBS_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "text-sm h-10 gap-0.5";
+            readonly description: "Compact breadcrumbs for dense UIs";
+        };
+        readonly base: {
+            readonly classes: "text-base h-12 gap-1";
+            readonly description: "Default breadcrumbs size";
+        };
+    };
+};
+export declare const KUMO_BREADCRUMBS_DEFAULT_VARIANTS: {
+    readonly size: "base";
+};
+export type KumoBreadcrumbsSize = keyof typeof KUMO_BREADCRUMBS_VARIANTS.size;
+export interface KumoBreadcrumbsVariantsProps {
+    size?: KumoBreadcrumbsSize;
+}
+export interface BreadcrumbsItem {
+    label: string;
+    href?: string;
+}
+export declare function breadcrumbsVariants({ size }?: KumoBreadcrumbsVariantsProps): string;
+interface Props extends KumoBreadcrumbsVariantsProps {
+    children?: Snippet;
+    class?: string;
+    className?: string;
+    items?: BreadcrumbsItem[];
+    [key: string]: unknown;
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/breadcrumbs/BreadcrumbsClipboard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Check, Copy } from 'phosphor-svelte';
+  import { Button } from '../button';
+
+  interface Props {
+    text: string;
+    [key: string]: unknown;
+  }
+
+  let { text, ...rest }: Props = $props();
+  let isCopied = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  async function handleCopyDeeplink() {
+    if (!text) return;
+
+    try {
+      await navigator.clipboard.writeText(text);
+      isCopied = true;
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        isCopied = false;
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy deeplink:', err);
+    }
+  }
+</script>
+
+<Button
+  variant="ghost"
+  shape="square"
+  size="sm"
+  class="opacity-0 transition-[opacity] group-hover:opacity-100"
+  onclick={handleCopyDeeplink}
+  title="Click to copy"
+  aria-label="Copy"
+  {...rest}
+>
+  {#if isCopied}
+    <Check class="text-kumo-success" weight="bold" />
+  {:else}
+    <Copy />
+  {/if}
+</Button>

package/dist/components/breadcrumbs/BreadcrumbsClipboard.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    text: string;
+    [key: string]: unknown;
+}
+declare const BreadcrumbsClipboard: import("svelte").Component<Props, {}, "">;
+type BreadcrumbsClipboard = ReturnType<typeof BreadcrumbsClipboard>;
+export default BreadcrumbsClipboard;

package/dist/components/breadcrumbs/BreadcrumbsCurrent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+  import { SkeletonLine } from '../loader';
+
+  interface Props {
+    children?: Snippet;
+    icon?: Component;
+    loading?: boolean;
+    [key: string]: unknown;
+  }
+
+  let { children, icon: Icon, loading = false, ...rest }: Props = $props();
+</script>
+
+{#if loading}
+  <div class="flex w-[125px] min-w-0 items-center gap-1" {...rest}>
+    {#if Icon}
+      <span class="flex shrink-0 items-center">
+        <Icon size={16} />
+      </span>
+    {/if}
+    <SkeletonLine />
+  </div>
+{:else}
+  <div class="flex min-w-0 max-w-full items-center gap-1 font-medium" aria-current="page" {...rest}>
+    {#if Icon}
+      <span class="flex shrink-0 items-center">
+        <Icon size={16} />
+      </span>
+    {/if}
+    <span class="truncate">{@render children?.()}</span>
+  </div>
+{/if}

package/dist/components/breadcrumbs/BreadcrumbsCurrent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    icon?: Component;
+    loading?: boolean;
+    [key: string]: unknown;
+}
+declare const BreadcrumbsCurrent: Component<Props, {}, "">;
+type BreadcrumbsCurrent = ReturnType<typeof BreadcrumbsCurrent>;
+export default BreadcrumbsCurrent;

package/dist/components/breadcrumbs/BreadcrumbsLink.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+
+  interface Props {
+    children?: Snippet;
+    href: string;
+    icon?: Component;
+    [key: string]: unknown;
+  }
+
+  let { children, href, icon: Icon, ...rest }: Props = $props();
+</script>
+
+<a href={href} class="flex min-w-0 max-w-full items-center gap-1 text-kumo-subtle no-underline" {...rest}>
+  {#if Icon}
+    <span class="flex shrink-0 items-center">
+      <Icon size={16} />
+    </span>
+  {/if}
+  <span class="truncate">{@render children?.()}</span>
+</a>

package/dist/components/breadcrumbs/BreadcrumbsLink.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+    href: string;
+    icon?: Component;
+    [key: string]: unknown;
+}
+declare const BreadcrumbsLink: Component<Props, {}, "">;
+type BreadcrumbsLink = ReturnType<typeof BreadcrumbsLink>;
+export default BreadcrumbsLink;

package/dist/components/breadcrumbs/BreadcrumbsSeparator.svelte

@@ -0,0 +1,11 @@
+<span class="flex shrink-0 items-center text-kumo-inactive" aria-hidden="true">
+  <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M10.75 8.75L14.25 12L10.75 15.25"
+    />
+  </svg>
+</span>

package/dist/components/breadcrumbs/BreadcrumbsSeparator.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BreadcrumbsSeparator;
+type BreadcrumbsSeparator = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BreadcrumbsSeparator: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/breadcrumbs/index.d.ts

@@ -0,0 +1,13 @@
+import Root from './Breadcrumbs.svelte';
+import Link from './BreadcrumbsLink.svelte';
+import Current from './BreadcrumbsCurrent.svelte';
+import Separator from './BreadcrumbsSeparator.svelte';
+import Clipboard from './BreadcrumbsClipboard.svelte';
+export declare const Breadcrumbs: typeof Root & {
+    Link: typeof Link;
+    Current: typeof Current;
+    Separator: typeof Separator;
+    Clipboard: typeof Clipboard;
+};
+export { Root as BreadcrumbsRoot, Link as BreadcrumbsLink, Current as BreadcrumbsCurrent, Separator as BreadcrumbsSeparator, Clipboard as BreadcrumbsClipboard };
+export { breadcrumbsVariants, KUMO_BREADCRUMBS_VARIANTS, KUMO_BREADCRUMBS_DEFAULT_VARIANTS, type BreadcrumbsItem, type KumoBreadcrumbsSize, type KumoBreadcrumbsVariantsProps } from './Breadcrumbs.svelte';

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,13 @@
+import Root from './Breadcrumbs.svelte';
+import Link from './BreadcrumbsLink.svelte';
+import Current from './BreadcrumbsCurrent.svelte';
+import Separator from './BreadcrumbsSeparator.svelte';
+import Clipboard from './BreadcrumbsClipboard.svelte';
+export const Breadcrumbs = Object.assign(Root, {
+    Link,
+    Current,
+    Separator,
+    Clipboard
+});
+export { Root as BreadcrumbsRoot, Link as BreadcrumbsLink, Current as BreadcrumbsCurrent, Separator as BreadcrumbsSeparator, Clipboard as BreadcrumbsClipboard };
+export { breadcrumbsVariants, KUMO_BREADCRUMBS_VARIANTS, KUMO_BREADCRUMBS_DEFAULT_VARIANTS } from './Breadcrumbs.svelte';