xiod-ui 1.0.0

package/dist/components/label.d.ts

@@ -0,0 +1,6 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/label.d.ts
+declare function Label({ className, render, ...props }: useRender.ComponentProps<"label">): React$1.ReactElement;
+//#endregion
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/label.tsx
+function Label({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("inline-flex items-center gap-2 text-base/4.5 sm:text-sm/4 font-medium text-foreground", className),
+		"data-slot": "label"
+	};
+	return useRender({
+		defaultTagName: "label",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Label };

package/dist/components/list-box.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/list-box.d.ts
+type ListBoxValue = string | string[];
+interface ListBoxProps extends useRender.ComponentProps<"div"> {
+  value?: ListBoxValue;
+  onValueChange?: (value: ListBoxValue) => void;
+  multiple?: boolean;
+}
+declare function ListBox({ className, value, onValueChange, multiple, render, ...props }: ListBoxProps): React$1.JSX.Element;
+interface ListBoxItemProps extends useRender.ComponentProps<"div"> {
+  value: string;
+  disabled?: boolean;
+}
+declare function ListBoxItem({ className, value, disabled, render, ...props }: ListBoxItemProps): React$1.ReactElement;
+declare function ListBoxGroup({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function ListBoxLabel({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function ListBoxSeparator({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+//#endregion
+export { ListBox, ListBoxGroup, ListBoxItem, ListBoxLabel, ListBoxSeparator };

package/dist/components/list-box.js

@@ -0,0 +1,148 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/list-box.tsx
+const ListBoxContext = React$1.createContext(null);
+function useListBox() {
+	const context = React$1.useContext(ListBoxContext);
+	if (!context) throw new Error("ListBox components must be used within a ListBox");
+	return context;
+}
+function ListBox({ className, value, onValueChange, multiple, render, ...props }) {
+	const [internalValue, setInternalValue] = React$1.useState(multiple ? [] : void 0);
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? value : internalValue;
+	const handleValueChange = React$1.useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	}, [isControlled, onValueChange]);
+	const contextValue = React$1.useMemo(() => ({
+		value: currentValue,
+		onValueChange: handleValueChange,
+		multiple
+	}), [
+		currentValue,
+		handleValueChange,
+		multiple
+	]);
+	const internalRef = React$1.useRef(null);
+	const handleKeyDown = (e) => {
+		if (!internalRef.current) return;
+		const items = Array.from(internalRef.current.querySelectorAll("[role='option']:not([data-disabled='true'])"));
+		if (!items.length) return;
+		const currentIndex = items.indexOf(document.activeElement);
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			items[currentIndex < items.length - 1 ? currentIndex + 1 : 0]?.focus();
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			items[currentIndex > 0 ? currentIndex - 1 : items.length - 1]?.focus();
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			items[0]?.focus();
+		} else if (e.key === "End") {
+			e.preventDefault();
+			items[items.length - 1]?.focus();
+		}
+	};
+	const defaultProps = {
+		className: cn("flex flex-col gap-0.5 rounded-lg border bg-popover p-[calc(--spacing(1)-1px)] text-popover-foreground shadow-xs/5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", className),
+		role: "listbox",
+		"aria-multiselectable": multiple,
+		"data-slot": "list-box",
+		onKeyDown: handleKeyDown,
+		tabIndex: 0
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		ref: internalRef,
+		render
+	});
+	return /* @__PURE__ */ jsx(ListBoxContext.Provider, {
+		value: contextValue,
+		children: element
+	});
+}
+function ListBoxItem({ className, value, disabled, render, ...props }) {
+	const context = useListBox();
+	const isSelected = React$1.useMemo(() => {
+		if (context.multiple && Array.isArray(context.value)) return context.value.includes(value);
+		return context.value === value;
+	}, [
+		context.value,
+		context.multiple,
+		value
+	]);
+	const handleSelect = () => {
+		if (disabled) return;
+		if (context.multiple) {
+			const current = Array.isArray(context.value) ? context.value : [];
+			if (current.includes(value)) context.onValueChange?.(current.filter((v) => v !== value));
+			else context.onValueChange?.([...current, value]);
+		} else context.onValueChange?.(value);
+	};
+	const defaultProps = {
+		className: cn("relative flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1.5 outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground sm:min-h-7 sm:text-sm [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg]:pointer-events-none [&>svg]:shrink-0 gap-2 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		role: "option",
+		"aria-selected": isSelected,
+		"data-selected": isSelected,
+		"data-disabled": disabled,
+		"data-slot": "list-box-item",
+		onClick: (_e) => {
+			handleSelect();
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleSelect();
+			}
+		},
+		tabIndex: disabled ? -1 : -1
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function ListBoxGroup({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("py-1", className),
+		role: "group",
+		"data-slot": "list-box-group"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function ListBoxLabel({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className),
+		"data-slot": "list-box-label"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function ListBoxSeparator({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		role: "separator",
+		"data-slot": "list-box-separator"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { ListBox, ListBoxGroup, ListBoxItem, ListBoxLabel, ListBoxSeparator };

package/dist/components/loader.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/loader.d.ts
+declare const loaderVariants: (props?: ({
+  intent?: "default" | "success" | "warning" | "primary" | "danger" | "muted" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+  variant?: "expressive" | "ring" | "pulse" | "dots" | "circular-arrows" | "radial-pulse" | "arc-head" | "segmented-ring" | "chunked-circular" | "petal" | "orbiting-dots" | "dotted-ring" | "radial-arrow" | "bar-segment" | "orbiting-ball" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface LoaderProps extends useRender.ComponentProps<"div">, VariantProps<typeof loaderVariants> {}
+declare function Loader({ className, intent, size, variant, render, ...props }: LoaderProps): React$1.ReactElement;
+//#endregion
+export { Loader, loaderVariants };

package/dist/components/loader.js

@@ -0,0 +1,430 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/loader.tsx
+const loaderVariants = cva("inline-flex items-center justify-center relative", {
+	variants: {
+		intent: {
+			default: "text-foreground",
+			primary: "text-primary",
+			success: "text-success",
+			warning: "text-warning",
+			danger: "text-destructive",
+			muted: "text-muted-foreground"
+		},
+		size: {
+			sm: "size-4",
+			md: "size-6",
+			lg: "size-8",
+			xl: "size-12"
+		},
+		variant: {
+			ring: "",
+			expressive: "",
+			pulse: "",
+			dots: "",
+			"circular-arrows": "",
+			"radial-pulse": "",
+			"arc-head": "",
+			"segmented-ring": "",
+			"chunked-circular": "",
+			petal: "",
+			"orbiting-dots": "",
+			"dotted-ring": "",
+			"radial-arrow": "",
+			"bar-segment": "",
+			"orbiting-ball": ""
+		}
+	},
+	defaultVariants: {
+		intent: "default",
+		size: "md",
+		variant: "ring"
+	}
+});
+const morphPaths = [
+	"M 12 2 C 17.52 2 22 6.48 22 12 C 22 17.52 17.52 22 12 22 C 6.48 22 2 17.52 2 12 C 2 6.48 6.48 2 12 2 Z",
+	"M 12 2 C 19 2 22 5 22 12 C 22 19 19 22 12 22 C 5 22 2 19 2 12 C 2 5 5 2 12 2 Z",
+	"M 12 2 C 21.5 2 22 2.5 22 12 C 22 21.5 21.5 22 12 22 C 2.5 22 2 21.5 2 12 C 2 2.5 2.5 2 12 2 Z",
+	"M 12 2 C 14 4 18 10 22 12 C 18 14 14 18 12 22 C 10 18 6 14 2 12 C 6 10 10 4 12 2 Z",
+	"M 12 2 C 15 5 19 8 22 12 C 19 16 15 19 12 22 C 9 19 5 16 2 12 C 5 8 9 5 12 2 Z",
+	"M 12 4 C 16 2 20 8 20 12 C 20 16 16 22 12 20 C 8 22 4 16 4 12 C 4 8 8 2 12 4 Z",
+	"M 12 2 C 13 8 14 10 22 12 C 14 14 13 16 12 22 C 11 16 10 14 2 12 C 10 10 11 8 12 2 Z",
+	"M 12 3 C 15 5 18 9 19 12 C 18 15 15 19 12 21 C 9 19 6 15 5 12 C 6 9 9 5 12 3 Z",
+	"M 12 5 C 18 5 22 8 22 12 C 22 16 18 19 12 19 C 6 19 2 16 2 12 C 2 8 6 5 12 5 Z",
+	"M 12 2 C 15 2 18 6 18 12 C 18 18 15 22 12 22 C 9 22 6 18 6 12 C 6 6 9 2 12 2 Z",
+	"M 12 2 C 17.52 2 22 6.48 22 12 C 22 17.52 17.52 22 12 22 C 6.48 22 2 17.52 2 12 C 2 6.48 6.48 2 12 2 Z"
+].join(";");
+function Loader({ className, intent, size, variant, render, ...props }) {
+	const rootProps = {
+		className: cn(loaderVariants({
+			intent,
+			size,
+			variant,
+			className
+		})),
+		role: "status",
+		"aria-label": "Loading",
+		"data-slot": "loader"
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps(rootProps, props),
+		render
+	});
+	const gradientId = `loader-fade-${React$1.useId().replace(/:/g, "")}`;
+	const content = React$1.useMemo(() => {
+		switch (variant) {
+			case "expressive": return /* @__PURE__ */ jsxs("svg", {
+				className: "h-full w-full animate-spin text-current",
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				"data-slot": "loader-expressive",
+				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id: gradientId,
+					x1: "0%",
+					y1: "0%",
+					x2: "100%",
+					y2: "0%",
+					children: [
+						/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: "currentColor",
+							stopOpacity: "0"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "50%",
+							stopColor: "currentColor",
+							stopOpacity: "0.5"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: "currentColor",
+							stopOpacity: "1"
+						})
+					]
+				}) }), /* @__PURE__ */ jsx("path", {
+					stroke: `url(#${gradientId})`,
+					strokeWidth: "3",
+					strokeLinecap: "round",
+					pathLength: "100",
+					strokeDasharray: "75 25",
+					children: /* @__PURE__ */ jsx("animate", {
+						attributeName: "d",
+						dur: "6s",
+						repeatCount: "indefinite",
+						values: morphPaths
+					})
+				})]
+			});
+			case "circular-arrows": return /* @__PURE__ */ jsxs("svg", {
+				className: "h-full w-full animate-spin text-current",
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				"data-slot": "loader-circular-arrows",
+				children: [
+					/* @__PURE__ */ jsx("path", {
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: "2.5",
+						d: "M12 22c5.523 0 10-4.477 10-10a10 10 0 0 0-4.713-8.495"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: "2.5",
+						d: "M17 3l.287.495m0 0L20 6.5M17.287 3.495 14 5"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: "2.5",
+						d: "M12 2C6.477 2 2 6.477 2 12a10 10 0 0 0 4.713 8.495"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						stroke: "currentColor",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: "2.5",
+						d: "M7 21l-.287-.495m0 0L4 17.5m2.713 3.005L10 19"
+					})
+				]
+			});
+			case "radial-pulse": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-radial-pulse",
+				children: [...Array(12)].map((_, i) => /* @__PURE__ */ jsx("rect", {
+					x: "11",
+					y: "1",
+					width: "2",
+					height: "6",
+					rx: "1",
+					fill: "currentColor",
+					opacity: "0",
+					transform: `rotate(${i * 30} 12 12)`,
+					children: /* @__PURE__ */ jsx("animate", {
+						attributeName: "opacity",
+						values: "1;0",
+						dur: "1s",
+						begin: `${i * .083}s`,
+						repeatCount: "indefinite"
+					})
+				}, i))
+			});
+			case "arc-head": return /* @__PURE__ */ jsxs("svg", {
+				className: "h-full w-full animate-spin text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				"data-slot": "loader-arc-head",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					strokeOpacity: "0.15",
+					strokeWidth: "3"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "M12 2a10 10 0 0 1 10 10",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					strokeLinecap: "round"
+				})]
+			});
+			case "segmented-ring": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full animate-spin text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-segmented-ring",
+				style: { animationDuration: "3s" },
+				children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx("path", {
+					d: "M 12 2 A 10 10 0 0 1 19.07 4.93",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					fill: "none",
+					transform: `rotate(${i * 45} 12 12)`,
+					opacity: 1 - i * .1
+				}, i))
+			});
+			case "chunked-circular": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-chunked-circular",
+				children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("path", {
+					d: "M 12 2 A 10 10 0 0 1 22 12",
+					stroke: "currentColor",
+					strokeWidth: "4",
+					strokeLinecap: "round",
+					fill: "none",
+					transform: `rotate(${i * 90} 12 12)`,
+					strokeDasharray: "10 20",
+					opacity: "0.2",
+					children: /* @__PURE__ */ jsx("animate", {
+						attributeName: "opacity",
+						values: "0.2;1;0.2",
+						dur: "1.5s",
+						begin: `${i * .375}s`,
+						repeatCount: "indefinite"
+					})
+				}, i))
+			});
+			case "petal": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full animate-spin text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-petal",
+				style: { animationDuration: "4s" },
+				children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsx("path", {
+					d: "M12 2 C 14 2 15 5 15 8 C 15 11 12 12 12 12 C 12 12 9 11 9 8 C 9 5 10 2 12 2 Z",
+					fill: "currentColor",
+					transform: `rotate(${i * 60} 12 12)`,
+					opacity: 1 - i * .15
+				}, i))
+			});
+			case "orbiting-dots": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full animate-spin text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-orbiting-dots",
+				style: { animationDuration: "2.5s" },
+				children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "3",
+					r: "2.5",
+					fill: "currentColor",
+					transform: `rotate(${i * 120} 12 12)`,
+					children: /* @__PURE__ */ jsx("animateTransform", {
+						attributeName: "transform",
+						type: "rotate",
+						from: `${i * 120} 12 12`,
+						to: `${i * 120 + 360} 12 12`,
+						dur: "1.5s",
+						repeatCount: "indefinite",
+						additive: "sum"
+					})
+				}, i))
+			});
+			case "dotted-ring": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-dotted-ring",
+				children: [...Array(16)].map((_, i) => /* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "2",
+					r: "1.5",
+					fill: "currentColor",
+					transform: `rotate(${i * 22.5} 12 12)`,
+					opacity: "0.1",
+					children: /* @__PURE__ */ jsx("animate", {
+						attributeName: "opacity",
+						values: "0.1;1;0.1",
+						dur: "1.2s",
+						begin: `${i * .075}s`,
+						repeatCount: "indefinite"
+					})
+				}, i))
+			});
+			case "radial-arrow": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full animate-spin text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-radial-arrow",
+				children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("path", {
+					d: "M12 2 L15 6 L9 6 Z",
+					fill: "currentColor",
+					transform: `rotate(${i * 90} 12 12)`,
+					children: /* @__PURE__ */ jsx("animateTransform", {
+						attributeName: "transform",
+						type: "translate",
+						values: "0,0; 0,2; 0,0",
+						dur: "1s",
+						begin: `${i * .25}s`,
+						repeatCount: "indefinite",
+						additive: "sum"
+					})
+				}, i))
+			});
+			case "bar-segment": return /* @__PURE__ */ jsx("svg", {
+				className: "h-full w-full animate-spin text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-bar-segment",
+				style: { animationDuration: "2s" },
+				children: /* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					strokeWidth: "4",
+					strokeDasharray: "10 15",
+					fill: "none",
+					strokeLinecap: "square"
+				})
+			});
+			case "orbiting-ball": return /* @__PURE__ */ jsxs("svg", {
+				className: "h-full w-full text-current",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				"data-slot": "loader-orbiting-ball",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "10",
+					stroke: "currentColor",
+					strokeOpacity: "0.15",
+					strokeWidth: "2",
+					fill: "none"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "2",
+					r: "3",
+					fill: "currentColor",
+					children: /* @__PURE__ */ jsx("animateTransform", {
+						attributeName: "transform",
+						type: "rotate",
+						from: "0 12 12",
+						to: "360 12 12",
+						dur: "1.5s",
+						repeatCount: "indefinite"
+					})
+				})]
+			});
+			case "pulse": return /* @__PURE__ */ jsx("span", {
+				className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75",
+				"data-slot": "loader-pulse"
+			});
+			case "dots": return /* @__PURE__ */ jsxs("span", {
+				className: "flex h-full w-full items-center justify-between",
+				"data-slot": "loader-dots",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "h-[30%] w-[30%] animate-bounce rounded-full bg-current",
+						style: { animationDelay: "0ms" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-[30%] w-[30%] animate-bounce rounded-full bg-current",
+						style: { animationDelay: "150ms" }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "h-[30%] w-[30%] animate-bounce rounded-full bg-current",
+						style: { animationDelay: "300ms" }
+					})
+				]
+			});
+			default: return /* @__PURE__ */ jsxs("svg", {
+				className: "h-full w-full animate-spin text-current",
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				"data-slot": "loader-ring",
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id: gradientId,
+						x1: "0%",
+						y1: "0%",
+						x2: "100%",
+						y2: "0%",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: "currentColor",
+							stopOpacity: "0"
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: "currentColor",
+							stopOpacity: "1"
+						})]
+					}) }),
+					/* @__PURE__ */ jsx("path", {
+						d: "M 22 12 A 10 10 0 0 0 2 12",
+						stroke: `url(#${gradientId})`,
+						strokeWidth: "3",
+						strokeLinecap: "round"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: "M 22 12 A 10 10 0 0 1 12 22",
+						stroke: "currentColor",
+						strokeWidth: "3",
+						strokeLinecap: "round"
+					})
+				]
+			});
+		}
+	}, [variant, gradientId]);
+	return React$1.cloneElement(element, {}, content);
+}
+//#endregion
+export { Loader, loaderVariants };

package/dist/components/marker.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/marker.d.ts
+export declare const markerVariants: (props?: ({
+  variant?: "default" | "border" | "separator" | null | undefined;
+  size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MarkerProps extends useRender.ComponentProps<"div">, VariantProps<typeof markerVariants> {}
+export declare function Marker({ className, variant, size, render, ...props }: MarkerProps): React$1.ReactElement;
+export interface MarkerIconProps extends React$1.HTMLAttributes<HTMLSpanElement> {}
+export declare function MarkerIcon({ className, ...props }: MarkerIconProps): React$1.JSX.Element;
+export interface MarkerContentProps extends React$1.HTMLAttributes<HTMLSpanElement> {}
+export declare function MarkerContent({ className, ...props }: MarkerContentProps): React$1.JSX.Element;
+//#endregion