@questpie/admin 0.0.1

package/dist/components/primitives/number-input.mjs

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { cn } from "../../lib/utils";
+import { Minus, Plus } from "@phosphor-icons/react";
+
+//#region src/components/primitives/number-input.tsx
+/**
+* Number Input Primitive
+*
+* A number input with optional increment/decrement buttons.
+*
+* @example
+* ```tsx
+* <NumberInput
+*   value={count}
+*   onChange={setCount}
+*   min={0}
+*   max={100}
+*   step={1}
+*   showButtons
+* />
+* ```
+*/
+function NumberInput({ value, onChange, min, max, step = 1, showButtons = false, placeholder, disabled, readOnly, className, id, "aria-invalid": ariaInvalid }) {
+	const handleChange = (newValue) => {
+		if (newValue === null) {
+			onChange(null);
+			return;
+		}
+		let clampedValue = newValue;
+		if (min !== void 0 && clampedValue < min) clampedValue = min;
+		if (max !== void 0 && clampedValue > max) clampedValue = max;
+		onChange(clampedValue);
+	};
+	const increment = () => {
+		handleChange((value ?? 0) + step);
+	};
+	const decrement = () => {
+		handleChange((value ?? 0) - step);
+	};
+	if (showButtons) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "icon-sm",
+				onClick: decrement,
+				disabled: disabled || min !== void 0 && (value ?? 0) <= min,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(Minus, { className: "size-3" })
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				type: "number",
+				value: value ?? "",
+				onChange: (e) => {
+					const val = e.target.value;
+					if (val === "") handleChange(null);
+					else handleChange(Number(val));
+				},
+				placeholder,
+				disabled,
+				readOnly,
+				min,
+				max,
+				step,
+				"aria-invalid": ariaInvalid,
+				className: "text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "icon-sm",
+				onClick: increment,
+				disabled: disabled || max !== void 0 && (value ?? 0) >= max,
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(Plus, { className: "size-3" })
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		type: "number",
+		value: value ?? "",
+		onChange: (e) => {
+			const val = e.target.value;
+			if (val === "") handleChange(null);
+			else handleChange(Number(val));
+		},
+		placeholder,
+		disabled,
+		readOnly,
+		min,
+		max,
+		step,
+		"aria-invalid": ariaInvalid,
+		className: cn(className)
+	});
+}
+
+//#endregion
+export { NumberInput };

package/dist/components/primitives/select-input.mjs

@@ -0,0 +1,177 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, useComboboxAnchor } from "../ui/combobox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { cn } from "../../lib/utils";
+import { Check, CircleNotch } from "@phosphor-icons/react";
+import { flattenOptions } from "./types";
+
+//#region src/components/primitives/select-input.tsx
+/**
+* Select Input Primitive
+*
+* A unified select component that supports:
+* - Single select (dropdown)
+* - Multi-select (chips)
+* - Static options
+* - Dynamic loading via loadOptions
+* - Search/filtering
+*
+* @example
+* ```tsx
+* // Single select with static options
+* <SelectInput
+*   value={status}
+*   onChange={setStatus}
+*   options={[
+*     { value: "active", label: "Active" },
+*     { value: "inactive", label: "Inactive" },
+*   ]}
+* />
+*
+* // Multi-select with dynamic loading
+* <SelectInput
+*   value={selectedTags}
+*   onChange={setSelectedTags}
+*   multiple
+*   loadOptions={async (search) => {
+*     const res = await fetch(`/api/tags?search=${search}`)
+*     return res.json()
+*   }}
+* />
+* ```
+*/
+function SelectInput({ value, onChange, options: staticOptions = [], loadOptions, multiple = false, clearable = true, maxSelections, debounceMs = 300, loading: externalLoading = false, emptyMessage = "No options found", placeholder = "Select...", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const [search, setSearch] = useState("");
+	const [dynamicOptions, setDynamicOptions] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const debounceRef = useRef(null);
+	const anchorRef = useComboboxAnchor();
+	const flatStaticOptions = useMemo(() => flattenOptions(staticOptions), [staticOptions]);
+	const allOptions = useMemo(() => {
+		if (loadOptions) return dynamicOptions;
+		return flatStaticOptions;
+	}, [
+		loadOptions,
+		dynamicOptions,
+		flatStaticOptions
+	]);
+	const filteredOptions = useMemo(() => {
+		if (loadOptions) return allOptions;
+		if (!search) return allOptions;
+		return allOptions.filter((opt) => opt.label.toLowerCase().includes(search.toLowerCase()));
+	}, [
+		allOptions,
+		search,
+		loadOptions
+	]);
+	useEffect(() => {
+		if (!loadOptions) return;
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(async () => {
+			setIsLoading(true);
+			try {
+				setDynamicOptions(await loadOptions(search));
+			} catch (error) {
+				console.error("Failed to load options:", error);
+				setDynamicOptions([]);
+			} finally {
+				setIsLoading(false);
+			}
+		}, debounceMs);
+		return () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+		};
+	}, [
+		search,
+		loadOptions,
+		debounceMs
+	]);
+	const getLabel = useCallback((val) => {
+		return allOptions.find((opt) => opt.value === val)?.label ?? String(val);
+	}, [allOptions]);
+	const selectedValues = useMemo(() => {
+		if (value === null || value === void 0) return [];
+		return Array.isArray(value) ? value : [value];
+	}, [value]);
+	const handleMultiSelect = useCallback((selectedValue) => {
+		const currentValues = selectedValues;
+		if (currentValues.includes(selectedValue)) onChange(currentValues.filter((v) => v !== selectedValue));
+		else {
+			if (maxSelections && currentValues.length >= maxSelections) return;
+			onChange([...currentValues, selectedValue]);
+		}
+	}, [
+		selectedValues,
+		onChange,
+		maxSelections
+	]);
+	useCallback((removedValue) => {
+		onChange(selectedValues.filter((v) => v !== removedValue));
+	}, [selectedValues, onChange]);
+	const showLoading = isLoading || externalLoading;
+	if (!multiple && !loadOptions) return /* @__PURE__ */ jsxs(Select, {
+		value: selectedValues[0] ?? "",
+		onValueChange: (val) => onChange(val),
+		disabled,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			id,
+			className: cn("w-full", className),
+			"aria-invalid": ariaInvalid,
+			children: /* @__PURE__ */ jsx(SelectValue, { children: selectedValues[0] ? getLabel(selectedValues[0]) : placeholder })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: filteredOptions.map((option) => /* @__PURE__ */ jsxs(SelectItem, {
+			value: String(option.value),
+			disabled: option.disabled,
+			children: [option.icon, option.label]
+		}, String(option.value))) })]
+	});
+	return /* @__PURE__ */ jsxs(Combobox, {
+		value: multiple ? void 0 : selectedValues[0] ?? null,
+		onValueChange: (val) => {
+			if (val !== null && val !== void 0) if (multiple) handleMultiSelect(val);
+			else onChange(val);
+		},
+		disabled,
+		children: [multiple ? /* @__PURE__ */ jsxs(ComboboxChips, {
+			ref: anchorRef,
+			className: cn(className),
+			"aria-invalid": ariaInvalid,
+			children: [selectedValues.map((val) => /* @__PURE__ */ jsx(ComboboxChip, { children: getLabel(val) }, String(val))), /* @__PURE__ */ jsx(ComboboxChipsInput, {
+				placeholder: selectedValues.length === 0 ? placeholder : void 0,
+				value: search,
+				onChange: (e) => setSearch(e.target.value)
+			})]
+		}) : /* @__PURE__ */ jsx(ComboboxInput, {
+			id,
+			placeholder,
+			value: search,
+			onChange: (e) => setSearch(e.target.value),
+			className: cn(className),
+			"aria-invalid": ariaInvalid,
+			showClear: clearable && selectedValues.length > 0
+		}), /* @__PURE__ */ jsxs(ComboboxContent, {
+			anchor: multiple ? anchorRef : void 0,
+			children: [
+				showLoading && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-4",
+					children: /* @__PURE__ */ jsx(CircleNotch, { className: "size-4 animate-spin text-muted-foreground" })
+				}),
+				/* @__PURE__ */ jsx(ComboboxList, { children: filteredOptions.map((option) => /* @__PURE__ */ jsxs(ComboboxItem, {
+					value: option.value,
+					disabled: option.disabled,
+					children: [
+						option.icon,
+						option.label,
+						multiple && selectedValues.includes(option.value) && /* @__PURE__ */ jsx(Check, { className: "ml-auto size-3.5" })
+					]
+				}, String(option.value))) }),
+				/* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage })
+			]
+		})]
+	});
+}
+
+//#endregion
+export { SelectInput };

package/dist/components/primitives/tag-input.mjs

@@ -0,0 +1,135 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../ui/badge";
+import { cn } from "../../lib/utils";
+import { X } from "@phosphor-icons/react";
+
+//#region src/components/primitives/tag-input.tsx
+/**
+* Tag Input Primitive
+*
+* An input for creating and managing tags/chips.
+* Supports validation patterns, max tags, and autocomplete suggestions.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <TagInput
+*   value={tags}
+*   onChange={setTags}
+*   placeholder="Add tags..."
+* />
+*
+* // With suggestions and validation
+* <TagInput
+*   value={emails}
+*   onChange={setEmails}
+*   suggestions={["user@example.com", "admin@example.com"]}
+*   pattern={/^[^\s@]+@[^\s@]+\.[^\s@]+$/}
+*   maxTags={5}
+* />
+* ```
+*/
+function TagInput({ value, onChange, suggestions = [], maxTags, allowDuplicates = false, pattern, placeholder = "Type and press Enter...", disabled, className, id, "aria-invalid": ariaInvalid }) {
+	const [inputValue, setInputValue] = useState("");
+	const [showSuggestions, setShowSuggestions] = useState(false);
+	const addTag = useCallback((tag) => {
+		const trimmed = tag.trim();
+		if (!trimmed) return;
+		if (maxTags && value.length >= maxTags) return;
+		if (!allowDuplicates && value.includes(trimmed)) return;
+		if (pattern && !pattern.test(trimmed)) return;
+		onChange([...value, trimmed]);
+		setInputValue("");
+		setShowSuggestions(false);
+	}, [
+		value,
+		onChange,
+		maxTags,
+		allowDuplicates,
+		pattern
+	]);
+	const removeTag = useCallback((index) => {
+		if (disabled) return;
+		onChange(value.filter((_, i) => i !== index));
+	}, [
+		value,
+		onChange,
+		disabled
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			addTag(inputValue);
+		} else if (e.key === "Backspace" && !inputValue && value.length > 0) removeTag(value.length - 1);
+		else if (e.key === "Escape") setShowSuggestions(false);
+	}, [
+		inputValue,
+		value,
+		addTag,
+		removeTag
+	]);
+	const handleInputChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setInputValue(newValue);
+		setShowSuggestions(newValue.length > 0 && suggestions.length > 0);
+	}, [suggestions]);
+	const filteredSuggestions = suggestions.filter((suggestion) => suggestion.toLowerCase().includes(inputValue.toLowerCase()) && (allowDuplicates || !value.includes(suggestion)));
+	const canAddMore = !maxTags || value.length < maxTags;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-wrap gap-1.5 min-h-9 w-full border border-input bg-background px-3 py-2", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", ariaInvalid && "border-destructive ring-destructive/20", disabled && "cursor-not-allowed opacity-50"),
+				children: [value.map((tag, index) => /* @__PURE__ */ jsxs(Badge, {
+					variant: "secondary",
+					className: "gap-1 pr-1",
+					children: [tag, !disabled && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => removeTag(index),
+						className: "ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20",
+						"aria-label": `Remove ${tag}`,
+						children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+					})]
+				}, `${tag}-${index}`)), canAddMore && /* @__PURE__ */ jsx("input", {
+					id,
+					type: "text",
+					value: inputValue,
+					onChange: handleInputChange,
+					onKeyDown: handleKeyDown,
+					onFocus: () => setShowSuggestions(inputValue.length > 0 && suggestions.length > 0),
+					onBlur: () => {
+						setTimeout(() => setShowSuggestions(false), 150);
+					},
+					placeholder: value.length === 0 ? placeholder : void 0,
+					disabled,
+					"aria-invalid": ariaInvalid,
+					className: cn("flex-1 min-w-[120px] bg-transparent text-sm outline-none placeholder:text-muted-foreground", "disabled:cursor-not-allowed")
+				})]
+			}),
+			showSuggestions && filteredSuggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: cn("absolute z-50 mt-1 w-full border border-input bg-popover shadow-md", "max-h-[200px] overflow-auto"),
+				children: filteredSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => addTag(suggestion),
+					className: cn("w-full px-3 py-2 text-left text-sm", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground focus:outline-none"),
+					children: suggestion
+				}, suggestion))
+			}),
+			maxTags && /* @__PURE__ */ jsxs("p", {
+				className: "mt-1 text-xs text-muted-foreground",
+				children: [
+					value.length,
+					" / ",
+					maxTags,
+					" tags"
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { TagInput };

package/dist/components/primitives/text-input.mjs

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { Input } from "../ui/input";
+import { cn } from "../../lib/utils";
+
+//#region src/components/primitives/text-input.tsx
+/**
+* Text Input Primitive
+*
+* A basic text input with value/onChange pattern.
+* Supports different input types: text, email, password, url, tel, search.
+*
+* @example
+* ```tsx
+* <TextInput
+*   value={email}
+*   onChange={setEmail}
+*   type="email"
+*   placeholder="Enter email"
+* />
+* ```
+*/
+function TextInput({ value, onChange, type = "text", placeholder, disabled, readOnly, maxLength, autoComplete, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		type,
+		value,
+		onChange: (e) => onChange(e.target.value),
+		placeholder,
+		disabled,
+		readOnly,
+		maxLength,
+		autoComplete,
+		"aria-invalid": ariaInvalid,
+		className: cn(className)
+	});
+}
+
+//#endregion
+export { TextInput };

package/dist/components/primitives/textarea-input.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Textarea } from "../ui/textarea";
+import { cn } from "../../lib/utils";
+
+//#region src/components/primitives/textarea-input.tsx
+/**
+* Textarea Input Primitive
+*
+* A multi-line text input.
+*
+* @example
+* ```tsx
+* <TextareaInput
+*   value={description}
+*   onChange={setDescription}
+*   rows={4}
+*   placeholder="Enter description..."
+* />
+* ```
+*/
+function TextareaInput({ value, onChange, rows = 3, maxLength, placeholder, disabled, readOnly, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		id,
+		value,
+		onChange: (e) => onChange(e.target.value),
+		rows,
+		maxLength,
+		placeholder,
+		disabled,
+		readOnly,
+		"aria-invalid": ariaInvalid,
+		className: cn(className)
+	});
+}
+
+//#endregion
+export { TextareaInput };

package/dist/components/primitives/toggle-input.mjs

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "../ui/switch";
+import { cn } from "../../lib/utils";
+
+//#region src/components/primitives/toggle-input.tsx
+/**
+* Toggle Input Primitive
+*
+* A switch/toggle for boolean values.
+*
+* @example
+* ```tsx
+* <ToggleInput
+*   value={isActive}
+*   onChange={setIsActive}
+* />
+* ```
+*/
+function ToggleInput({ value, onChange, disabled, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Switch, {
+		id,
+		checked: value,
+		onCheckedChange: onChange,
+		disabled,
+		"aria-invalid": ariaInvalid,
+		className: cn(className)
+	});
+}
+
+//#endregion
+export { ToggleInput };

package/dist/components/primitives/types.mjs

@@ -0,0 +1,12 @@
+//#region src/components/primitives/types.ts
+/** Check if options are grouped */
+function isOptionGroup(option) {
+	return "options" in option;
+}
+/** Flatten grouped options */
+function flattenOptions(options) {
+	return options.flatMap((opt) => isOptionGroup(opt) ? opt.options : [opt]);
+}
+
+//#endregion
+export { flattenOptions, isOptionGroup };

package/dist/components/ui/accordion.mjs

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+
+//#region src/components/ui/accordion.tsx
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		"data-slot": "accordion",
+		className: cn("overflow-hidden rounded-md border flex w-full flex-col", className),
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		"data-slot": "accordion-item",
+		className: cn("data-open:bg-muted/50 not-last:border-b", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50", className),
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(CaretDownIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				}),
+				/* @__PURE__ */ jsx(CaretUpIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				})
+			]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
+		"data-slot": "accordion-content",
+		className: "data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/avatar.mjs

@@ -0,0 +1,54 @@
+"use client";
+
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+
+//#region src/components/ui/avatar.tsx
+function Avatar({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: cn("rounded-full aspect-square size-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs", className),
+		...props
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("bg-muted text-muted-foreground size-8 rounded-full text-xs/relaxed group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className),
+		...props
+	});
+}
+
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/components/ui/badge.mjs

@@ -0,0 +1,34 @@
+import { cn } from "../../lib/utils";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+
+//#region src/components/ui/badge.tsx
+const badgeVariants = cva("h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge", {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn(badgeVariants({
+			className,
+			variant
+		})) }, props),
+		render,
+		state: {
+			slot: "badge",
+			variant
+		}
+	});
+}
+
+//#endregion
+export { Badge, badgeVariants };