@datum-cloud/datum-ui 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/autocomplete-DZtI97HP.mjs

@@ -0,0 +1,295 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-s0Yv3abE.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-SQlKSz6L.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-DUaQSZQP.mjs";
+import { CheckIcon, ChevronDown } from "lucide-react";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+//#region src/components/features/autocomplete/autocomplete.tsx
+function isGroupedOptions(options) {
+	return options.length > 0 && "options" in options[0];
+}
+function flattenOptions(options) {
+	if (isGroupedOptions(options)) return options.flatMap((g) => g.options);
+	return options;
+}
+function Trigger({ ref, selectedOption, renderValue, placeholder, loading, disabled, open, id, className, ...rest }) {
+	let displayContent;
+	if (!selectedOption) displayContent = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: placeholder
+	});
+	else if (renderValue) displayContent = renderValue(selectedOption);
+	else displayContent = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: selectedOption.label
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		id,
+		role: "combobox",
+		"aria-expanded": open,
+		disabled: disabled || loading,
+		className: cn("text-input-foreground placeholder:text-input-placeholder", "border-input-border bg-input-background/50 relative flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition-all", "focus-visible:border-input-focus-border focus-visible:shadow-(--input-focus-shadow)", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", "aria-invalid:border-destructive", (disabled || loading) && "cursor-not-allowed opacity-50", className),
+		...rest,
+		children: [
+			loading && /* @__PURE__ */ jsx(LoaderOverlay, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: displayContent
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground ml-2 size-4 shrink-0" })
+		]
+	});
+}
+Trigger.displayName = "AutocompleteTrigger";
+function DefaultOptionContent({ option, isSelected }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm",
+				children: option.label
+			}), option.description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs",
+				children: option.description
+			})]
+		}), isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary size-4 shrink-0" })]
+	});
+}
+function StaticOptions({ options, selectedValue, onSelect, renderOption }) {
+	const renderItem = (option) => {
+		const isSelected = option.value === selectedValue;
+		return /* @__PURE__ */ jsx(CommandItem, {
+			value: option.value,
+			keywords: [option.label, option.description ?? ""],
+			disabled: option.disabled,
+			onSelect: () => onSelect(option.value),
+			className: "cursor-pointer justify-between px-3 py-2 text-xs",
+			children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsx(DefaultOptionContent, {
+				option,
+				isSelected
+			})
+		}, option.value);
+	};
+	if (isGroupedOptions(options)) return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((group, index) => /* @__PURE__ */ jsx(CommandGroup, {
+		heading: group.label,
+		className: index > 0 ? "border-t pt-1" : "",
+		children: group.options.map(renderItem)
+	}, group.label)) });
+	return /* @__PURE__ */ jsx(CommandGroup, {
+		className: "p-0",
+		children: options.map(renderItem)
+	});
+}
+function VirtualizedOptions({ options, selectedValue, onSelect, renderOption, itemSize = 36, listClassName }) {
+	const flatOptions = flattenOptions(options);
+	const parentRef = React$1.useRef(null);
+	const virtualizer = useVirtualizer({
+		count: flatOptions.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => itemSize
+	});
+	React$1.useEffect(() => {
+		if (selectedValue) {
+			const index = flatOptions.findIndex((o) => o.value === selectedValue);
+			if (index >= 0) virtualizer.scrollToIndex(index, { align: "center" });
+		}
+	}, [
+		selectedValue,
+		flatOptions,
+		virtualizer
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: parentRef,
+		className: cn("max-h-[200px] overflow-auto", listClassName),
+		children: /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", {
+			style: { height: `${virtualizer.getTotalSize()}px` },
+			className: "relative w-full",
+			children: virtualizer.getVirtualItems().map((virtualItem) => {
+				const option = flatOptions[virtualItem.index];
+				const isSelected = option.value === selectedValue;
+				return /* @__PURE__ */ jsx(CommandItem, {
+					value: option.value,
+					keywords: [option.label, option.description ?? ""],
+					disabled: option.disabled,
+					onSelect: () => onSelect(option.value),
+					className: "absolute top-0 left-0 w-full cursor-pointer justify-between px-3 py-2 text-xs",
+					style: {
+						height: `${virtualItem.size}px`,
+						transform: `translateY(${virtualItem.start}px)`
+					},
+					children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsx(DefaultOptionContent, {
+						option,
+						isSelected
+					})
+				}, option.value);
+			})
+		}) })
+	});
+}
+/**
+* Autocomplete - A searchable select component
+*
+* Standalone, form-agnostic combobox built on Popover + Command (cmdk).
+* Supports flat/grouped options, virtualization, custom rendering, and async search.
+*
+* @example Basic usage
+* ```tsx
+* <Autocomplete
+*   value={country}
+*   onValueChange={setCountry}
+*   options={countries}
+*   placeholder="Select country..."
+* />
+* ```
+*
+* @example Async search
+* ```tsx
+* <Autocomplete
+*   value={userId}
+*   onValueChange={setUserId}
+*   options={users ?? []}
+*   onSearchChange={setSearch}
+*   loading={isLoading}
+*   placeholder="Search users..."
+* />
+* ```
+*/
+function Autocomplete({ options, value, onValueChange, onSearchChange, searchPlaceholder = "Search...", disableSearch = false, renderOption, renderValue, placeholder = "Select...", emptyContent = "No results found", footer, creatable = false, creatableLabel, virtualize = false, itemSize = 36, loading = false, disabled = false, name, id, className, triggerClassName, contentClassName, listClassName }) {
+	const [open, setOpen] = React$1.useState(false);
+	const [search, setSearch] = React$1.useState("");
+	const flatOptions = React$1.useMemo(() => flattenOptions(options), [options]);
+	const selectedOption = React$1.useMemo(() => flatOptions.find((o) => o.value === value), [flatOptions, value]);
+	const displayOption = React$1.useMemo(() => {
+		if (selectedOption) return selectedOption;
+		if (creatable && value) return {
+			value,
+			label: value
+		};
+	}, [
+		selectedOption,
+		creatable,
+		value
+	]);
+	const isExternalSearch = !!onSearchChange;
+	const trimmedSearch = React$1.useMemo(() => search.trim(), [search]);
+	const showCreatableItem = React$1.useMemo(() => {
+		if (!creatable || trimmedSearch.length === 0) return false;
+		const needle = trimmedSearch.toLowerCase();
+		return !flatOptions.some((o) => o.value.toLowerCase() === needle || o.label.toLowerCase() === needle);
+	}, [
+		creatable,
+		trimmedSearch,
+		flatOptions
+	]);
+	const handleSelect = React$1.useCallback((optionValue) => {
+		onValueChange?.(optionValue);
+		setSearch("");
+		setOpen(false);
+	}, [onValueChange]);
+	const handleCreatableSelect = React$1.useCallback(() => {
+		onValueChange?.(trimmedSearch);
+		setSearch("");
+		setOpen(false);
+	}, [onValueChange, trimmedSearch]);
+	const handleOpenChange = React$1.useCallback((nextOpen) => {
+		setOpen(nextOpen);
+		if (!nextOpen) {
+			setSearch("");
+			if (isExternalSearch) onSearchChange?.("");
+		}
+	}, [isExternalSearch, onSearchChange]);
+	const handleSearchChange = React$1.useCallback((val) => {
+		setSearch(val);
+		if (isExternalSearch) onSearchChange?.(val);
+	}, [isExternalSearch, onSearchChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: handleOpenChange,
+			modal: true,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Trigger, {
+					selectedOption: displayOption,
+					renderValue,
+					placeholder,
+					loading,
+					disabled,
+					open,
+					id,
+					className: triggerClassName
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: cn("popover-content-width-full p-0", contentClassName),
+				align: "start",
+				children: /* @__PURE__ */ jsxs(Command, {
+					shouldFilter: !isExternalSearch && !creatable,
+					defaultValue: value,
+					children: [
+						!disableSearch && /* @__PURE__ */ jsx(CommandInput, {
+							className: "placeholder:text-secondary/60 h-7 border-none text-xs placeholder:text-xs focus-visible:ring-0",
+							iconClassName: "text-secondary size-3.5",
+							wrapperClassName: "px-3 py-2",
+							placeholder: searchPlaceholder,
+							value: search,
+							onValueChange: handleSearchChange
+						}),
+						/* @__PURE__ */ jsxs(CommandList, {
+							className: cn(!virtualize && "max-h-[300px]", listClassName),
+							children: [
+								!showCreatableItem && /* @__PURE__ */ jsx(CommandEmpty, { children: typeof emptyContent === "string" ? /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-xs",
+									children: emptyContent
+								}) : emptyContent }),
+								virtualize ? /* @__PURE__ */ jsx(VirtualizedOptions, {
+									options,
+									selectedValue: value,
+									onSelect: handleSelect,
+									renderOption,
+									itemSize,
+									listClassName
+								}) : /* @__PURE__ */ jsx(StaticOptions, {
+									options,
+									selectedValue: value,
+									onSelect: handleSelect,
+									renderOption
+								}),
+								showCreatableItem && /* @__PURE__ */ jsx(CommandGroup, {
+									forceMount: true,
+									className: "p-0",
+									children: /* @__PURE__ */ jsx(CommandItem, {
+										forceMount: true,
+										value: `\0creatable:${trimmedSearch}`,
+										keywords: [trimmedSearch],
+										onSelect: handleCreatableSelect,
+										className: "cursor-pointer px-3 py-2 text-xs",
+										children: creatableLabel ? creatableLabel(trimmedSearch) : `Use "${trimmedSearch}"`
+									})
+								})
+							]
+						}),
+						footer && /* @__PURE__ */ jsx("div", {
+							className: "border-t",
+							children: footer
+						})
+					]
+				})
+			})]
+		}), name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value ?? ""
+		})]
+	});
+}
+Autocomplete.displayName = "Autocomplete";
+
+//#endregion
+export { Autocomplete as t };

package/dist/avatar-stack/index.mjs

@@ -0,0 +1,5 @@
+import "../utils-Bfgoe-Gm.mjs";
+import "../tooltip-Dd3ActSS.mjs";
+import { n as avatarStackVariants, t as AvatarStack } from "../avatar-stack-JCfBlPB9.mjs";
+
+export { AvatarStack, avatarStackVariants };

package/dist/avatar-stack-JCfBlPB9.mjs

@@ -0,0 +1,80 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as cn$1 } from "./utils-Bfgoe-Gm.mjs";
+import { t as Tooltip } from "./tooltip-Dd3ActSS.mjs";
+import { cva } from "class-variance-authority";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+//#region ../shadcn/ui/avatar.tsx
+const Avatar = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+		"data-slot": "avatar",
+		className: cn$1("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
+		...props
+	});
+};
+const AvatarImage = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+		"data-slot": "avatar-image",
+		className: cn$1("aspect-square size-full", className),
+		...props
+	});
+};
+const AvatarFallback = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn$1("bg-muted flex size-full items-center justify-center rounded-full", className),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/features/avatar-stack/avatar-stack.tsx
+const avatarStackVariants = cva("flex", {
+	variants: {
+		orientation: {
+			vertical: "flex-row",
+			horizontal: "flex-col"
+		},
+		spacing: {
+			sm: "-space-x-5 -space-y-5",
+			md: "-space-x-4 -space-y-4",
+			lg: "-space-x-3 -space-y-3",
+			xl: "-space-x-2 -space-y-2"
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		spacing: "md"
+	}
+});
+function AvatarStack({ className, orientation, avatars, spacing, maxAvatarsAmount = 3, avatarClassName, ...props }) {
+	const shownAvatars = avatars.slice(0, maxAvatarsAmount);
+	const hiddenAvatars = avatars.slice(maxAvatarsAmount);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(avatarStackVariants({
+			orientation,
+			spacing
+		}), className, orientation === "horizontal" ? "-space-x-0" : "-space-y-0"),
+		...props,
+		children: [shownAvatars.map(({ name, image }, index) => /* @__PURE__ */ jsx(Tooltip, {
+			message: name,
+			delayDuration: 300,
+			children: /* @__PURE__ */ jsxs(Avatar, {
+				className: cn(avatarStackVariants(), "hover:z-10", avatarClassName),
+				children: [/* @__PURE__ */ jsx(AvatarImage, { src: image }), /* @__PURE__ */ jsx(AvatarFallback, { children: name?.split(" ")?.map((word) => word[0])?.join("")?.toUpperCase() })]
+			})
+		}, `${image}-${index + 1}`)), hiddenAvatars.length ? /* @__PURE__ */ jsx(Tooltip, {
+			message: /* @__PURE__ */ jsx(Fragment$1, { children: hiddenAvatars.map(({ name }, index) => /* @__PURE__ */ jsx("p", { children: name }, `${name}-${index + 1}`)) }),
+			delayDuration: 300,
+			children: /* @__PURE__ */ jsx(Avatar, {
+				className: cn(avatarClassName),
+				children: /* @__PURE__ */ jsxs(AvatarFallback, { children: ["+", avatars.length - shownAvatars.length] })
+			}, "Excesive avatars")
+		}) : null]
+	});
+}
+
+//#endregion
+export { avatarStackVariants as n, AvatarStack as t };

package/dist/badge/index.mjs

@@ -0,0 +1,3 @@
+import { n as badgeVariants, t as Badge } from "../badge-bFgeYceE.mjs";
+
+export { Badge, badgeVariants };

package/dist/badge-bFgeYceE.mjs

@@ -0,0 +1,185 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { cva } from "class-variance-authority";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/base/badge/badge.tsx
+/**
+* Datum Badge Component
+* Similar to Button component but with badge-specific styling
+* Supports types: primary, secondary, tertiary, quaternary, warning, danger, success
+* Supports themes: solid, outline, light
+*/
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-all focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: {
+		type: {
+			primary: "",
+			secondary: "",
+			tertiary: "",
+			quaternary: "",
+			info: "",
+			warning: "",
+			danger: "",
+			success: "",
+			muted: ""
+		},
+		theme: {
+			solid: "",
+			outline: "border",
+			light: "border"
+		}
+	},
+	compoundVariants: [
+		{
+			type: "primary",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-primary)] text-[var(--color-badge-primary-foreground)]"
+		},
+		{
+			type: "primary",
+			theme: "outline",
+			className: "border-[var(--color-badge-primary)] text-[var(--color-badge-primary)] dark:border-[var(--color-badge-primary)] dark:text-[var(--color-badge-primary)]"
+		},
+		{
+			type: "primary",
+			theme: "light",
+			className: "border-[var(--color-badge-primary)]/30 text-[var(--color-badge-primary)] bg-[var(--color-badge-primary)]/10 dark:border-[var(--color-badge-primary)] dark:text-[var(--color-badge-primary)] dark:bg-[var(--color-badge-primary)]/20"
+		},
+		{
+			type: "secondary",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-secondary)] text-[var(--color-badge-secondary-foreground)]"
+		},
+		{
+			type: "secondary",
+			theme: "outline",
+			className: "border-[var(--color-badge-secondary)] text-[var(--color-badge-secondary)] dark:border-[var(--color-badge-secondary)] dark:text-[var(--color-badge-secondary)]"
+		},
+		{
+			type: "secondary",
+			theme: "light",
+			className: "border-[var(--color-badge-secondary)] text-[var(--color-badge-secondary)] bg-[var(--color-badge-secondary)]/20 dark:border-[var(--color-badge-secondary)] dark:text-[var(--color-badge-secondary)] dark:bg-[var(--color-badge-secondary)]/20"
+		},
+		{
+			type: "tertiary",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-tertiary)] text-[var(--color-badge-tertiary-foreground)]"
+		},
+		{
+			type: "tertiary",
+			theme: "outline",
+			className: "border-[var(--color-badge-tertiary)] text-[var(--color-badge-tertiary)] dark:border-[var(--color-badge-tertiary)] dark:text-[var(--color-badge-tertiary)]"
+		},
+		{
+			type: "tertiary",
+			theme: "light",
+			className: "border-[var(--color-badge-tertiary)] text-[var(--color-badge-tertiary)] bg-[var(--color-badge-tertiary)]/20 dark:border-[var(--color-badge-tertiary)] dark:text-[var(--color-badge-tertiary)] dark:bg-[var(--color-badge-tertiary)]/20"
+		},
+		{
+			type: "quaternary",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-quaternary)] text-[var(--color-badge-quaternary-foreground)]"
+		},
+		{
+			type: "quaternary",
+			theme: "outline",
+			className: "border-[var(--color-badge-quaternary)] text-[var(--color-badge-quaternary-foreground)] dark:border-[var(--color-badge-quaternary)] dark:text-[var(--color-badge-quaternary-foreground)]"
+		},
+		{
+			type: "quaternary",
+			theme: "light",
+			className: "border-[var(--color-badge-quaternary)] text-[var(--color-badge-quaternary-foreground)] bg-[var(--color-badge-quaternary)]/20 dark:border-[var(--color-badge-quaternary)] dark:text-[var(--color-badge-quaternary-foreground)] dark:bg-[var(--color-badge-quaternary)]/20"
+		},
+		{
+			type: "info",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-info)] text-[var(--color-badge-info-foreground)]"
+		},
+		{
+			type: "info",
+			theme: "outline",
+			className: "border-[var(--color-badge-info)] text-[var(--color-badge-info)] dark:border-[var(--color-badge-info)] dark:text-[var(--color-badge-info)]"
+		},
+		{
+			type: "info",
+			theme: "light",
+			className: "border-[var(--color-badge-info)] text-[var(--color-badge-info)] bg-[var(--color-badge-info)]/20 dark:border-[var(--color-badge-info)] dark:text-[var(--color-badge-info)] dark:bg-[var(--color-badge-info)]/20"
+		},
+		{
+			type: "warning",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-warning)] text-[var(--color-badge-warning-foreground)]"
+		},
+		{
+			type: "warning",
+			theme: "outline",
+			className: "border-[var(--color-badge-warning)] text-[var(--color-badge-warning)] dark:border-[var(--color-badge-warning)] dark:text-[var(--color-badge-warning)]"
+		},
+		{
+			type: "warning",
+			theme: "light",
+			className: "border-[var(--color-badge-warning)] text-[var(--color-badge-warning)] bg-[var(--color-badge-warning)]/20 dark:border-[var(--color-badge-warning)] dark:text-[var(--color-badge-warning)] dark:bg-[var(--color-badge-warning)]/20"
+		},
+		{
+			type: "danger",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-danger)] text-[var(--color-badge-danger-foreground)]"
+		},
+		{
+			type: "danger",
+			theme: "outline",
+			className: "border-[var(--color-badge-danger)] text-[var(--color-badge-danger)] dark:border-[var(--color-badge-danger)] dark:text-[var(--color-badge-danger)]"
+		},
+		{
+			type: "danger",
+			theme: "light",
+			className: "border-[var(--color-badge-danger)] text-[var(--color-badge-danger)] bg-[var(--color-badge-danger)]/20 dark:border-[var(--color-badge-danger)] dark:text-[var(--color-badge-danger)] dark:bg-[var(--color-badge-danger)]/20"
+		},
+		{
+			type: "success",
+			theme: "solid",
+			className: "border-transparent bg-[var(--color-badge-success)] text-[var(--color-badge-success-foreground)]"
+		},
+		{
+			type: "success",
+			theme: "outline",
+			className: "border-[var(--color-badge-success)] text-[var(--color-badge-success)] dark:border-[var(--color-badge-success)] dark:text-[var(--color-badge-success)]"
+		},
+		{
+			type: "success",
+			theme: "light",
+			className: "border-[var(--color-badge-success)] text-[var(--color-badge-success)] bg-[var(--color-badge-success)]/20 dark:border-[var(--color-badge-success)] dark:text-[var(--color-badge-success)] dark:bg-[var(--color-badge-success)]/20"
+		},
+		{
+			type: "muted",
+			theme: "solid",
+			className: "border-transparent text-[var(--color-badge-muted-foreground)]  bg-[var(--color-badge-muted)] dark:border-[var(--color-badge-muted)]/20 dark:text-[var(--color-badge-muted)] dark:bg-[var(--color-badge-muted)]/20"
+		},
+		{
+			type: "muted",
+			theme: "outline",
+			className: "border-[var(--color-badge-muted)] text-[var(--color-badge-muted)] dark:border-[var(--color-badge-muted)] dark:text-[var(--color-badge-muted)]"
+		},
+		{
+			type: "muted",
+			theme: "light",
+			className: "border-[var(--color-badge-muted)] text-[var(--color-badge-muted)] bg-[var(--color-badge-muted)]/20 dark:border-[var(--color-badge-muted)] dark:text-[var(--color-badge-muted)] dark:bg-[var(--color-badge-muted)]/20"
+		}
+	],
+	defaultVariants: {
+		type: "muted",
+		theme: "solid"
+	}
+});
+function Badge({ className, type, theme, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(badgeVariants({
+			type,
+			theme
+		}), className),
+		...props
+	});
+}
+
+//#endregion
+export { badgeVariants as n, Badge as t };

package/dist/breadcrumb/index.mjs

@@ -0,0 +1,4 @@
+import "../utils-Bfgoe-Gm.mjs";
+import { a as BreadcrumbList, i as BreadcrumbLink, n as BreadcrumbEllipsis, o as BreadcrumbPage, r as BreadcrumbItem, s as BreadcrumbSeparator, t as Breadcrumb } from "../breadcrumb-BGYJgom_.mjs";
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/breadcrumb-BGYJgom_.mjs

@@ -0,0 +1,71 @@
+import { t as cn } from "./utils-Bfgoe-Gm.mjs";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region ../shadcn/ui/breadcrumb.tsx
+const Breadcrumb = ({ ...props }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		...props
+	});
+};
+const BreadcrumbList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className),
+		...props
+	});
+};
+const BreadcrumbItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex items-center gap-1.5", className),
+		...props
+	});
+};
+const BreadcrumbLink = ({ asChild, className, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		"data-slot": "breadcrumb-link",
+		className: cn("hover:text-foreground transition-colors", className),
+		...props
+	});
+};
+const BreadcrumbPage = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: cn("text-foreground font-normal", className),
+		...props
+	});
+};
+const BreadcrumbSeparator = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("[&>svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+	});
+};
+const BreadcrumbEllipsis = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("flex size-9 items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+};
+
+//#endregion
+export { BreadcrumbList as a, BreadcrumbLink as i, BreadcrumbEllipsis as n, BreadcrumbPage as o, BreadcrumbItem as r, BreadcrumbSeparator as s, Breadcrumb as t };

package/dist/button/index.mjs

@@ -0,0 +1,4 @@
+import { n as buttonVariants, t as Button } from "../button-C1wRfGtT.mjs";
+import { t as LinkButton } from "../link-button-TIF2Zdrk.mjs";
+
+export { Button, LinkButton, buttonVariants };