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

package/README.md

@@ -19,8 +19,7 @@ bun add @datum-cloud/datum-ui
 Wrap your app with `DatumProvider` to enable theming and styles:
 
 ```tsx
-import { DatumProvider } from '@datum-cloud/datum-ui'
-import '@datum-cloud/datum-ui/styles'
+import { DatumProvider } from '@datum-cloud/datum-ui/provider'
 
 function App() {
   return (
@@ -31,17 +30,43 @@ function App() {
 }
 ```
 
-## Entry Points
+`DatumProvider` automatically loads all design tokens, theme variables, and component styles — no extra CSS import needed.
 
-| Import Path                        | Description                                     |
-| ---------------------------------- | ----------------------------------------------- |
-| `@datum-cloud/datum-ui`            | All components, hooks, providers, and utilities |
-| `@datum-cloud/datum-ui/components` | Components only (base + features)               |
-| `@datum-cloud/datum-ui/providers`  | `DatumProvider`                                 |
-| `@datum-cloud/datum-ui/hooks`      | `useCopyToClipboard`, `useDebounce`             |
-| `@datum-cloud/datum-ui/icons`      | `CloseIcon`, `IconWrapper`, `SpinnerIcon`       |
-| `@datum-cloud/datum-ui/utils`      | `cn` (className merge utility)                  |
-| `@datum-cloud/datum-ui/styles`     | Global CSS (fonts, tokens, component styles)    |
+## Imports
+
+Each component has its own subpath export. Import only what you need:
+
+```tsx
+import { Button } from '@datum-cloud/datum-ui/button'
+import { Dialog } from '@datum-cloud/datum-ui/dialog'
+import { Form, FormField, FormInput } from '@datum-cloud/datum-ui/form'
+```
+
+This keeps your bundle small and means you only install peer dependencies for the components you actually use.
+
+### Shared Exports
+
+| Import Path                      | Description                                           |
+| -------------------------------- | ----------------------------------------------------- |
+| `@datum-cloud/datum-ui`          | Root barrel — all components (requires all peer deps) |
+| `@datum-cloud/datum-ui/provider` | `DatumProvider` (loads CSS + theme)                   |
+| `@datum-cloud/datum-ui/theme`    | Theme utilities and types                             |
+| `@datum-cloud/datum-ui/hooks`    | `useCopyToClipboard`, `useDebounce`                   |
+| `@datum-cloud/datum-ui/icons`    | `CloseIcon`, `IconWrapper`, `SpinnerIcon`             |
+| `@datum-cloud/datum-ui/utils`    | `cn` (className merge utility)                        |
+| `@datum-cloud/datum-ui/styles`   | Global CSS (fonts, tokens, component styles)          |
+
+### Grouped Exports
+
+Some components with shared heavy dependencies are grouped under a single subpath:
+
+| Import Path                         | Includes                                   | Peer Dependencies                             |
+| ----------------------------------- | ------------------------------------------ | --------------------------------------------- |
+| `@datum-cloud/datum-ui/date-picker` | `CalendarDatePicker`, `TimeRangePicker`    | `react-day-picker`, `date-fns`, `date-fns-tz` |
+| `@datum-cloud/datum-ui/map`         | `Map`, `PlaceAutocomplete`, + map controls | `leaflet`, `react-leaflet`, + leaflet plugins |
+| `@datum-cloud/datum-ui/dropzone`    | `Dropzone`, `FileInputButton`              | `react-dropzone`                              |
+| `@datum-cloud/datum-ui/chart`       | `ChartContainer`, `ChartTooltip`, etc.     | `recharts`                                    |
+| `@datum-cloud/datum-ui/form`        | `Form`, `FormField`, `FormInput`, etc.     | `@conform-to/react`, `@conform-to/zod`, `zod` |
 
 ## Components
 
@@ -117,7 +142,7 @@ Complex, fully-customized components with significant business logic.
 ### Button
 
 ```tsx
-import { Button } from '@datum-cloud/datum-ui'
+import { Button } from '@datum-cloud/datum-ui/button'
 
 // Variants: type × theme
 <Button type="primary" theme="solid">Save</Button>
@@ -128,7 +153,7 @@ import { Button } from '@datum-cloud/datum-ui'
 ### Typography
 
 ```tsx
-import { Title, Text, Paragraph, Code } from '@datum-cloud/datum-ui'
+import { Title, Text, Paragraph, Code } from '@datum-cloud/datum-ui/typography'
 
 <Title level={1}>Page Title</Title>
 <Title level={3} color="primary">Section</Title>
@@ -140,7 +165,7 @@ import { Title, Text, Paragraph, Code } from '@datum-cloud/datum-ui'
 ### Form with Validation
 
 ```tsx
-import { Form, FormField, FormInput, FormSelect } from '@datum-cloud/datum-ui'
+import { Form, FormField, FormInput, FormSelect } from '@datum-cloud/datum-ui/form'
 import { z } from 'zod'
 
 const schema = z.object({
@@ -166,7 +191,7 @@ const schema = z.object({
 ```tsx
 import {
   Map, MapTileLayer, MapMarker, MapPopup, MapZoomControl,
-} from '@datum-cloud/datum-ui'
+} from '@datum-cloud/datum-ui/map'
 
 <div className="h-[500px] w-full">
   <Map center={[51.505, -0.09]} zoom={13}>
@@ -185,7 +210,7 @@ import {
 import {
   Dialog, DialogTrigger, DialogContent,
   DialogHeader, DialogTitle, DialogDescription,
-} from '@datum-cloud/datum-ui'
+} from '@datum-cloud/datum-ui/dialog'
 
 <Dialog>
   <DialogTrigger asChild>
@@ -203,7 +228,7 @@ import {
 ### Toast
 
 ```tsx
-import { Toaster, useToast } from '@datum-cloud/datum-ui'
+import { Toaster, useToast } from '@datum-cloud/datum-ui/toast'
 
 function App() {
   return (
@@ -225,7 +250,7 @@ function MyComponent() {
 ```tsx
 import {
   TaskQueueProvider, TaskQueueDropdown, useTaskQueue,
-} from '@datum-cloud/datum-ui'
+} from '@datum-cloud/datum-ui/task-queue'
 
 <TaskQueueProvider config={{ concurrency: 3 }}>
   <TaskQueueDropdown />
@@ -252,7 +277,7 @@ function MyComponent() {
 `DatumProvider` includes a theme provider with dark mode support:
 
 ```tsx
-import { DatumProvider } from '@datum-cloud/datum-ui'
+import { DatumProvider } from '@datum-cloud/datum-ui/provider'
 
 // Props: defaultTheme, storageKey, disableTransitionOnChange
 <DatumProvider defaultTheme="system">
@@ -265,7 +290,7 @@ Theme values: `'light'`, `'dark'`, `'system'`.
 Access the current theme:
 
 ```tsx
-import { useTheme } from '@datum-cloud/datum-ui'
+import { useTheme } from '@datum-cloud/datum-ui/theme'
 
 const { theme, setTheme, resolvedTheme } = useTheme()
 ```

package/dist/alert/index.mjs

@@ -0,0 +1,3 @@
+import { n as AlertDescription, r as AlertTitle, t as Alert } from "../alert-BC2Mccfo.mjs";
+
+export { Alert, AlertDescription, AlertTitle };

package/dist/alert-BC2Mccfo.mjs

@@ -0,0 +1,95 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { cva } from "class-variance-authority";
+import { CircleXIcon } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/base/alert/alert.tsx
+/**
+* Datum Alert Component
+* Extends shadcn Alert with Datum-specific variants: success, info, warning
+*/
+const variantDefinitions = {
+	default: {
+		classes: "bg-background text-foreground",
+		closeButtonColor: "text-foreground"
+	},
+	secondary: {
+		classes: "bg-muted text-primary [&>svg]:text-primary",
+		closeButtonColor: "text-primary"
+	},
+	outline: {
+		classes: "border-muted text-muted-foreground",
+		closeButtonColor: "text-muted-foreground"
+	},
+	destructive: {
+		classes: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+		closeButtonColor: "text-destructive"
+	},
+	success: {
+		classes: "border-success-300 bg-success-100 text-success-500",
+		closeButtonColor: "text-success-500"
+	},
+	info: {
+		classes: "border-info-300 bg-info-100 text-info-500! [&>svg]:text-info-500",
+		closeButtonColor: "text-info-500"
+	},
+	warning: {
+		classes: "border-yellow-500 bg-yellow-50 text-yellow-700! [&>svg]:text-yellow-700",
+		closeButtonColor: "text-yellow-700"
+	}
+};
+const alertVariants = cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", {
+	variants: { variant: {
+		default: variantDefinitions.default.classes,
+		secondary: variantDefinitions.secondary.classes,
+		outline: variantDefinitions.outline.classes,
+		destructive: variantDefinitions.destructive.classes,
+		success: variantDefinitions.success.classes,
+		info: variantDefinitions.info.classes,
+		warning: variantDefinitions.warning.classes
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, closable = false, onClose, ...props }) {
+	const [isVisible, setIsVisible] = React$1.useState(true);
+	const handleClose = () => {
+		if (onClose) onClose();
+		else setIsVisible(false);
+	};
+	if (!isVisible) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: cn(alertVariants({ variant }), closable && "pr-10", className),
+		...props,
+		children: [props.children, closable && /* @__PURE__ */ jsx("span", {
+			onClick: handleClose,
+			role: "button",
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					handleClose();
+				}
+			},
+			className: "absolute top-4 right-4 z-10 cursor-pointer opacity-70 transition-opacity hover:opacity-100",
+			"aria-label": "Close alert",
+			children: /* @__PURE__ */ jsx(CircleXIcon, { className: cn("size-4", variant && variantDefinitions[variant]?.closeButtonColor) })
+		})]
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+		...props
+	});
+}
+
+//#endregion
+export { AlertDescription as n, AlertTitle as r, Alert as t };

package/dist/autocomplete/index.mjs

@@ -0,0 +1,7 @@
+import "../utils-Bfgoe-Gm.mjs";
+import "../dialog-DXBaT9gA.mjs";
+import "../command-s0Yv3abE.mjs";
+import "../popover-SQlKSz6L.mjs";
+import { t as Autocomplete } from "../autocomplete-DZtI97HP.mjs";
+
+export { Autocomplete };

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 };