@widgetic/design-system 0.3.68

package/dist/components/toast/ToasterModal.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" module>
+// Import Toast Component from UI Folder
+import { toast, Toaster } from '../ui/sonner';
+
+// Import Icons from Icons Folder
+import Close from '../../icons/Exclamation.svelte';
+import Checked from '../../icons/checked.svelte';
+
+// Import Toast Types directly from the svelte-sonner module
+// import type { ToastTypes } from 'svelte-sonner';
+// Define the ToastTypes type
+type ToastTypes = 'success' | 'error' | 'warning' | 'info' | 'loading';
+
+/* COMPONENT PROPS */
+let className = '';
+export { className as class };
+export let style: string = '';
+// Default Duration
+export let defaultDuration: number = 3000;
+// root element reference
+export let element: HTMLElement | null = null;
+
+
+/* STATE VARIABLES */
+let toastMainClass = 'toast-modal';
+// Track toast visibility to prevent multiple toasts
+let isToastVisible = false;
+
+/**
+ * Shows a toast notification with consistent styling and positioning
+ * @param type Type of toast message (success, error, warning)
+ * @param title Main message text
+ * @param options Additional options including description
+ */
+export function showToast(type: string = 'success', title: string, options: any = null) {
+  
+
+  // Prevent multiple toasts from appearing simultaneously
+  // if (isToastVisible) return;
+  
+  // Set the toast visibility to true
+  isToastVisible = true;
+
+  // If options is null, set it to an empty object
+  if (options === null) {
+    options = {};
+  }
+
+  // Get the duration from the options or use the default duration
+  const duration = options?.duration || defaultDuration;
+
+  // set close icon - not working !!!
+  options.closeIcon = Close;
+
+  // Get the title color from the options or use the default color
+  const titleColor = type === 'success' ? '--grey7' : type === 'error' ? '--error' : '--dark';
+
+  // set icon depending on the type of toast
+  if(type === 'error') options.icon = Close;
+  if(type === 'success') options.icon = Checked;
+
+  // set icon background fill color
+  if(type === 'success') options.iconBgFillColor = '--icon-success';
+  if(type === 'error') options.iconBgFillColor = '--icon-error';
+  if(type === 'warning') options.iconBgFillColor = '--sunny-yellow';
+  // console.log('showToast:', type, title, titleColor, duration);
+
+  // set style of the data-icon element
+  setTimeout(() => {
+    let closeButtonElement = document.querySelector('.' + toastMainClass + '-close-button') as HTMLElement; //console.log('closeButtonElement:', closeButtonElement);
+
+    let iconElement = document.querySelector('.' + toastMainClass + '> [data-icon] > svg') as HTMLElement; //console.log('iconElement:', iconElement);
+    if(iconElement) iconElement.style.color = 'hsl(var(' + options.iconBgFillColor + '))';
+  }, 20);
+  
+  // Call toast with custom styling
+  return toast[type as ToastTypes](title, {
+    ...options,
+    duration,
+    unstyled: true,
+    classes: {
+      title: "text-[hsl(var(" + titleColor + "))]",
+    },
+    onAutoClose: () => {
+      isToastVisible = false;
+    },
+    onDismiss: () => {
+      isToastVisible = false;
+    }
+  });
+} 
+
+</script>
+
+<!-- HTML Template -->
+<Toaster
+  theme="light"
+  position="bottom-right"
+  richColors
+  closeButton
+  toastOptions={{
+    style: "box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); !important;",
+    classes: {
+      toast: toastMainClass + " widgetic-colors widgetic-radius !bg-white !rounded-small !border !border-[hsl(var(--forest-green))] " +
+                              "!min-w-[334px] !max-w-[450px] " +
+                              // "fixed top-auto bottom-[20px] right-[20px] " + 
+                              "!flex !items-center !gap-[24px] !p-[16px] !px-[24px] " + 
+                              // Icon Styling
+                              "[&>[data-icon]]:!w-[24px] [&>[data-icon]]:!h-[24px] [&>[data-icon]]:!m-0 " + 
+                              "[&>[data-icon]>svg]:!w-full [&>[data-icon]>svg]:!h-full " +
+                              // Content Styling
+                              "[&>[data-content]>svg]:flex [&>[data-content]>svg]:flex-col [&>[data-content]>svg]:gap-[2px]",
+      // Title Styling
+      title: toastMainClass + "-title body-medium",
+      // Description Styling
+      description: toastMainClass + "-description caption !text-[hsl(var(--grey5))]",
+      // Action Button Styling
+      actionButton: "",
+      // Cancel Button Styling
+      cancelButton: "",
+      // Close Button Styling
+      closeButton: toastMainClass + '-close-button w-[16px] h-[16px] absolute -translate-x-1/2 -translate-y-1/2 top-[1px] left-[1px] z-10 !bg-[hsl(var(--grey7))] border !border-[hsl(var(--grey5))] !text-white'
+    }
+  }}
+  expand={false}
+  visibleToasts={1}
+  offset="1rem"
+/>

package/dist/components/toast/ToasterModal.svelte.d.ts

@@ -0,0 +1,30 @@
+declare let className: string;
+export { className as class };
+export declare let style: string;
+export declare let defaultDuration: number;
+export declare let element: HTMLElement | null;
+/**
+ * Shows a toast notification with consistent styling and positioning
+ * @param type Type of toast message (success, error, warning)
+ * @param title Main message text
+ * @param options Additional options including description
+ */
+export declare function showToast(type: string | undefined, title: string, options?: any): string | number;
+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;
+}
+declare const ToasterModal: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToasterModal = InstanceType<typeof ToasterModal>;
+export default ToasterModal;

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

@@ -0,0 +1,2 @@
+export { default as ToasterModal } from './ToasterModal.svelte';
+export { showToast } from './ToasterModal.svelte';

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+export { default as ToasterModal } from './ToasterModal.svelte';
+export { showToast } from './ToasterModal.svelte';

package/dist/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/dist/components/ui/accordion/accordion-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const AccordionContent: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

package/dist/components/ui/accordion/accordion-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const AccordionItem: import("svelte").Component<AccordionPrimitive.ItemProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/dist/components/ui/accordion/accordion-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps["level"];
+};
+declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

package/dist/components/ui/accordion/index.d.ts

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/ui/accordion/index.js

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/ui/alert/alert-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>

package/dist/components/ui/alert/alert-description.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "svelte/elements";
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AlertDescription: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLDivElement>, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type AlertDescription = InstanceType<typeof AlertDescription>;
+export default AlertDescription;

package/dist/components/ui/alert/alert-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "../../../utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

package/dist/components/ui/alert/alert-title.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { HeadingLevel } from "./index.js";
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AlertTitle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLHeadingElement> & {
+    level?: HeadingLevel;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type AlertTitle = InstanceType<typeof AlertTitle>;
+export default AlertTitle;

package/dist/components/ui/alert/alert.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type Variant, alertVariants } from "./index.js";
+	import { cn } from "../../../utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>

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

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type Variant } from "./index.js";
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAttributes<HTMLDivElement> & {
+    variant?: Variant;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Alert = InstanceType<typeof Alert>;
+export default Alert;

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,43 @@
+import { type VariantProps } from "tailwind-variants";
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export { Root, Description, Title, Root as Alert, Description as AlertDescription, Title as AlertTitle, };

package/dist/components/ui/alert/index.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export const alertVariants = tv({
+    base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+    variants: {
+        variant: {
+            default: "bg-background text-foreground",
+            destructive: "border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export { Root, Description, Title, 
+//
+Root as Alert, Description as AlertDescription, Title as AlertTitle, };

package/dist/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,60 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

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

package/dist/components/ui/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants } from "./badge.svelte";

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
+>
+	<Ellipsis class="size-4" />
+	<span class="sr-only">More</span>
+</span>

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+declare const BreadcrumbEllipsis: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
+type BreadcrumbEllipsis = ReturnType<typeof BreadcrumbEllipsis>;
+export default BreadcrumbEllipsis;

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
+	{@render children?.()}
+</li>

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLLiAttributes } from "svelte/elements";
+declare const BreadcrumbItem: import("svelte").Component<WithElementRef<HTMLLiAttributes>, {}, "ref">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;