first commit

resources/js/components/ui/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,3 @@
+<nav aria-label="breadcrumb" class="text-sm">
+    <slot />
+</nav>

resources/js/components/ui/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,3 @@
+<li class="inline-flex items-center gap-1.5">
+    <slot />
+</li>

resources/js/components/ui/breadcrumb/BreadcrumbLink.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '@/lib/utils';
+
+    let {
+        children,
+        asChild = false,
+        class: className = '',
+        ...rest
+    }: {
+        children?: Snippet<[Record<string, unknown>]>;
+        asChild?: boolean;
+        class?: string;
+        [key: string]: unknown;
+    } = $props();
+
+    const classes = () => cn('transition-colors hover:text-foreground', className);
+</script>
+
+{#if asChild}
+    {@render children?.({ class: classes(), ...rest })}
+{:else}
+    <a class={classes()} {...rest}>
+        {@render children?.({})}
+    </a>
+{/if}

resources/js/components/ui/breadcrumb/BreadcrumbList.svelte

@@ -0,0 +1,3 @@
+<ol class="flex flex-wrap items-center gap-1.5">
+    <slot />
+</ol>

resources/js/components/ui/breadcrumb/BreadcrumbPage.svelte

@@ -0,0 +1,3 @@
+<span class="font-medium text-foreground">
+    <slot />
+</span>

resources/js/components/ui/breadcrumb/BreadcrumbSeparator.svelte

@@ -0,0 +1 @@
+<span class="text-muted-foreground">/</span>

resources/js/components/ui/breadcrumb/index.ts

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
+export { default as BreadcrumbLink } from './BreadcrumbLink.svelte';
+export { default as BreadcrumbList } from './BreadcrumbList.svelte';
+export { default as BreadcrumbPage } from './BreadcrumbPage.svelte';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.svelte';