xiod-ui 1.0.0

package/dist/components/sortable.js

@@ -0,0 +1,327 @@
+"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 { Cancel } from "xiod-icons/icons/Cancel";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { GripVertical } from "xiod-icons/icons/GripVertical";
+//#region src/components/sortable.tsx
+const sortableVariants = cva("relative flex select-none transition-colors duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		orientation: {
+			vertical: "flex-col gap-2 w-full",
+			horizontal: "flex-row gap-2 items-center overflow-x-auto",
+			grid: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 w-full"
+		},
+		variant: {
+			default: "",
+			ghost: "bg-transparent p-0",
+			bordered: "border border-border/60 bg-background/50 rounded-xl p-3 backdrop-blur-xs"
+		}
+	},
+	defaultVariants: {
+		orientation: "vertical",
+		variant: "default"
+	}
+});
+const sortableItemVariants = cva("relative flex items-center gap-3 rounded-lg border text-card-foreground shadow-xs/5 transition-[transform,box-shadow,border-color,opacity] duration-150 group overflow-hidden touch-none", {
+	variants: {
+		variant: {
+			default: "border-border/80 bg-card hover:border-foreground/20",
+			accent: "border-primary/30 bg-primary/5 hover:border-primary/50",
+			flat: "border-border/40 bg-muted/40 shadow-none"
+		},
+		isDragging: {
+			true: "z-30 opacity-30 border-dashed border-primary shadow-none scale-[0.98]",
+			false: ""
+		},
+		isHoveredTarget: {
+			true: "border-primary bg-primary/10 scale-[1.02] shadow-md/10 z-20",
+			false: ""
+		},
+		isKeyboardActive: {
+			true: "ring-2 ring-ring ring-offset-2 ring-offset-background border-primary z-20",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		isDragging: false,
+		isHoveredTarget: false,
+		isKeyboardActive: false
+	}
+});
+const SortableContext = React$1.createContext(null);
+function Sortable({ className, orientation = "vertical", variant, items, onReorder, onRemove, render, children, ...props }) {
+	const containerRef = React$1.useRef(null);
+	const [activeIndex, setActiveIndex] = React$1.useState(null);
+	const [overIndex, setOverIndex] = React$1.useState(null);
+	const [keyboardActiveIndex, setKeyboardActiveIndex] = React$1.useState(null);
+	const [dragOverlayPos, setDragOverlayPos] = React$1.useState(null);
+	const activeIndexRef = React$1.useRef(null);
+	const overIndexRef = React$1.useRef(null);
+	const itemsRef = React$1.useRef(items);
+	const onReorderRef = React$1.useRef(onReorder);
+	React$1.useEffect(() => {
+		itemsRef.current = items;
+		onReorderRef.current = onReorder;
+	}, [items, onReorder]);
+	const handlePointerDown = React$1.useCallback((index, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		activeIndexRef.current = index;
+		overIndexRef.current = index;
+		setActiveIndex(index);
+		setOverIndex(index);
+		setDragOverlayPos({
+			x: e.clientX,
+			y: e.clientY
+		});
+		const container = containerRef.current;
+		const onPointerMove = (moveEvent) => {
+			setDragOverlayPos({
+				x: moveEvent.clientX,
+				y: moveEvent.clientY
+			});
+			if (!container) return;
+			const elementUnder = document.elementFromPoint(moveEvent.clientX, moveEvent.clientY);
+			if (!elementUnder) return;
+			const itemEl = elementUnder.closest("[data-sortable-index]");
+			if (itemEl && container.contains(itemEl)) {
+				const hoverIdx = Number(itemEl.getAttribute("data-sortable-index"));
+				if (!Number.isNaN(hoverIdx) && hoverIdx !== overIndexRef.current) {
+					overIndexRef.current = hoverIdx;
+					setOverIndex(hoverIdx);
+				}
+			}
+		};
+		const onPointerUp = () => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			const fromIdx = activeIndexRef.current;
+			const toIdx = overIndexRef.current;
+			if (fromIdx !== null && toIdx !== null && fromIdx !== toIdx && fromIdx >= 0 && fromIdx < itemsRef.current.length && toIdx >= 0 && toIdx < itemsRef.current.length) {
+				const reordered = [...itemsRef.current];
+				const [removed] = reordered.splice(fromIdx, 1);
+				reordered.splice(toIdx, 0, removed);
+				onReorderRef.current(reordered);
+			}
+			activeIndexRef.current = null;
+			overIndexRef.current = null;
+			setActiveIndex(null);
+			setOverIndex(null);
+			setDragOverlayPos(null);
+		};
+		window.addEventListener("pointermove", onPointerMove);
+		window.addEventListener("pointerup", onPointerUp);
+	}, []);
+	const handleKeyDown = React$1.useCallback((index, e) => {
+		if (keyboardActiveIndex === null) {
+			if (e.key === " " || e.key === "Enter") {
+				e.preventDefault();
+				setKeyboardActiveIndex(index);
+			}
+			return;
+		}
+		if (e.key === "Escape") {
+			e.preventDefault();
+			setKeyboardActiveIndex(null);
+			return;
+		}
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			setKeyboardActiveIndex(null);
+			return;
+		}
+		let nextIdx = keyboardActiveIndex;
+		if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+			e.preventDefault();
+			nextIdx = Math.min(items.length - 1, keyboardActiveIndex + 1);
+		} else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+			e.preventDefault();
+			nextIdx = Math.max(0, keyboardActiveIndex - 1);
+		}
+		if (nextIdx !== keyboardActiveIndex) {
+			const reordered = [...items];
+			const [removed] = reordered.splice(keyboardActiveIndex, 1);
+			reordered.splice(nextIdx, 0, removed);
+			setKeyboardActiveIndex(nextIdx);
+			onReorder(reordered);
+		}
+	}, [
+		keyboardActiveIndex,
+		items,
+		onReorder
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		items,
+		activeIndex,
+		overIndex,
+		keyboardActiveIndex,
+		orientation,
+		onItemPointerDown: handlePointerDown,
+		onItemKeyDown: handleKeyDown,
+		onItemRemove: onRemove
+	}), [
+		items,
+		activeIndex,
+		overIndex,
+		keyboardActiveIndex,
+		orientation,
+		onRemove,
+		handlePointerDown,
+		handleKeyDown
+	]);
+	const activeItemValue = activeIndex !== null ? items[activeIndex] : null;
+	const defaultProps = {
+		ref: containerRef,
+		className: cn(sortableVariants({
+			orientation,
+			variant,
+			className
+		})),
+		role: "list",
+		"data-slot": "sortable",
+		children: /* @__PURE__ */ jsxs(SortableContext.Provider, {
+			value: contextValue,
+			children: [children, activeItemValue && dragOverlayPos && /* @__PURE__ */ jsx("div", {
+				className: "fixed pointer-events-none z-50 rounded-lg border border-primary bg-card/95 px-[calc(--spacing(4)-1px)] py-[calc(--spacing(3)-1px)] shadow-xl/20 backdrop-blur-md text-foreground opacity-95 scale-105 transition-none",
+				style: {
+					left: dragOverlayPos.x - 24,
+					top: dragOverlayPos.y - 20
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs font-medium",
+					children: [/* @__PURE__ */ jsx(GripVertical, { className: "size-4 text-primary shrink-0" }), /* @__PURE__ */ jsx("span", { children: activeItemValue })]
+				})
+			})]
+		})
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function SortableItem({ className, variant, id, render, children, ...props }) {
+	const context = React$1.useContext(SortableContext);
+	const index = context ? context.items.indexOf(id) : -1;
+	const isDragging = context?.activeIndex === index;
+	const isHoveredTarget = context?.overIndex === index && context?.activeIndex !== index;
+	const isKeyboardActive = context?.keyboardActiveIndex === index;
+	const handleItemPointerDown = React$1.useCallback((e) => {
+		if (!context || index < 0) return;
+		if (e.target.closest("button, input, textarea, select, a, [data-slot='sortable-handle'], [data-slot='sortable-remove']")) return;
+		context.onItemPointerDown(index, e);
+	}, [context, index]);
+	const defaultProps = {
+		tabIndex: 0,
+		role: "listitem",
+		"aria-label": id,
+		className: cn(sortableItemVariants({
+			variant,
+			isDragging,
+			isHoveredTarget,
+			isKeyboardActive,
+			className
+		})),
+		onPointerDown: handleItemPointerDown,
+		"data-slot": "sortable-item",
+		"data-sortable-id": id,
+		"data-sortable-index": index,
+		"aria-roledescription": "sortable item",
+		onKeyDown: (e) => context?.onItemKeyDown(index, e),
+		children
+	};
+	const renderedElement = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+	if (!context) return null;
+	return renderedElement;
+}
+function SortableItemHandle({ className, id: _id, render, children, ...props }) {
+	const context = React$1.useContext(SortableContext);
+	const handlePointerDown = React$1.useCallback((e) => {
+		if (!context) return;
+		const parentItem = e.currentTarget.closest("[data-sortable-index]");
+		if (parentItem) {
+			const idx = Number(parentItem.getAttribute("data-sortable-index"));
+			if (!Number.isNaN(idx)) context.onItemPointerDown(idx, e);
+		}
+	}, [context]);
+	const defaultProps = {
+		className: cn("flex items-center justify-center p-2 text-muted-foreground/60 hover:text-foreground cursor-grab active:cursor-grabbing select-none shrink-0 touch-none pointer-coarse:after:absolute pointer-coarse:after:size-11", className),
+		onPointerDown: handlePointerDown,
+		"data-slot": "sortable-handle",
+		children: children || /* @__PURE__ */ jsx(GripVertical, { className: "size-4 shrink-0" })
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function SortableItemRemove({ className, id, render, children, ...props }) {
+	const context = React$1.useContext(SortableContext);
+	const handleClick = React$1.useCallback((e) => {
+		e.stopPropagation();
+		context?.onItemRemove?.(id);
+	}, [context, id]);
+	const defaultProps = {
+		type: "button",
+		"aria-label": `Remove ${id}`,
+		className: cn("flex items-center justify-center p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors shrink-0 pointer-coarse:after:absolute pointer-coarse:after:size-11", className),
+		onClick: handleClick,
+		"data-slot": "sortable-remove",
+		children: children || /* @__PURE__ */ jsx(Cancel, { className: "size-3.5 shrink-0" })
+	};
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function SortableColumn({ className, id, render, children, ...props }) {
+	const defaultProps = {
+		role: "listitem",
+		"aria-label": id,
+		className: cn("flex flex-col gap-2.5 w-72 shrink-0 rounded-xl border border-border/60 bg-muted/20 p-3 backdrop-blur-xs shadow-xs/5", className),
+		"data-slot": "sortable-column",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function SortableColumnHeader({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("flex items-center justify-between gap-2 px-1 py-0.5 text-xs font-semibold text-foreground select-none", className),
+		"data-slot": "sortable-column-header",
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function SortableColumnTitle({ className, render, children, ...props }) {
+	const defaultProps = {
+		className: cn("font-medium text-xs text-foreground truncate", className),
+		"data-slot": "sortable-column-title",
+		children
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Sortable, SortableColumn, SortableColumnHeader, SortableColumnTitle, SortableItem, SortableItemHandle, SortableItemRemove, sortableItemVariants, sortableVariants };

package/dist/components/switch.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch.d.ts
+declare const switchVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+  variant?: "default" | "expressive" | "sharp" | "classic" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const switchThumbVariants: (props?: ({
+  variant?: "default" | "expressive" | "sharp" | "classic" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SwitchProps extends Switch$1.Root.Props, VariantProps<typeof switchVariants> {}
+declare function Switch({ className, size, variant, ...props }: SwitchProps): React$1.JSX.Element;
+//#endregion
+export { Switch, switchThumbVariants, switchVariants };

package/dist/components/switch.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch.tsx
+const switchVariants = cva("relative inline-flex shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow,inset-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-checked:not-data-disabled:inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] data-checked:shadow-primary/24 data-checked:shadow-xs data-unchecked:bg-input data-unchecked:inset-shadow-[0_1px_var(--border)] data-disabled:pointer-events-none data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", {
+	variants: {
+		size: {
+			sm: "[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3.5)]",
+			md: "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
+			lg: "[--thumb-size:--spacing(6)] sm:[--thumb-size:--spacing(5)]",
+			xl: "[--thumb-size:--spacing(7)] sm:[--thumb-size:--spacing(6)]",
+			"2xl": "[--thumb-size:--spacing(8)] sm:[--thumb-size:--spacing(7)]"
+		},
+		variant: {
+			default: "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2.5+2px)]",
+			classic: "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]",
+			expressive: "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]",
+			sharp: "rounded-md h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+const switchThumbVariants = cva("pointer-events-none relative flex h-full origin-left items-center justify-center rounded-full bg-background shadow-xs border border-black/8 dark:border-white/8 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] will-change-transform", {
+	variants: { variant: {
+		default: "block w-[calc(var(--thumb-size)*1.5)] border-[0.5px] border-black/5 dark:border-white/5 [transition:translate_.15s,scale_.1s_.1s,transform-origin_.15s] in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-125 data-checked:origin-[calc(var(--thumb-size)*1.3)_50%] data-checked:translate-x-[calc(var(--thumb-size))]",
+		classic: "block aspect-square in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
+		expressive: "aspect-square origin-center scale-60 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-75 [transition:translate_.15s,scale_.15s,transform-origin_.15s] data-checked:scale-100 data-checked:translate-x-[calc(var(--thumb-size)-4px)]",
+		sharp: "block aspect-square rounded-sm in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active,[data-slot=field-label]:active]:rounded-md [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Switch({ className, size, variant, ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		className: cn(switchVariants({
+			size,
+			variant
+		}), className),
+		"data-slot": "switch",
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			className: cn(switchThumbVariants({ variant })),
+			"data-slot": "switch-thumb",
+			children: variant === "expressive" && /* @__PURE__ */ jsx("svg", {
+				className: "size-[calc(var(--thumb-size)*0.75)] text-primary transition-opacity duration-150 opacity-0 in-data-checked:opacity-100",
+				fill: "none",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "3",
+				viewBox: "0 0 24 24",
+				"data-slot": "switch-icon",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		})
+	});
+}
+//#endregion
+export { Switch, switchThumbVariants, switchVariants };

package/dist/components/table.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+//#region src/components/table.d.ts
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/table.js

@@ -0,0 +1,65 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table.tsx
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative w-full overflow-x-auto",
+		"data-slot": "table-container",
+		children: /* @__PURE__ */ jsx("table", {
+			className: cn("w-full caption-bottom in-data-[slot=frame]:border-separate in-data-[slot=frame]:border-spacing-0 text-sm", className),
+			"data-slot": "table",
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		className: cn("[&_tr]:border-b in-data-[slot=frame]:**:[th]:h-9 in-data-[slot=frame]:*:[tr]:border-none in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className),
+		"data-slot": "table-header",
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		className: cn("relative in-data-[slot=frame]:rounded-xl in-data-[slot=frame]:shadow-xs/5 before:pointer-events-none before:absolute before:inset-px not-in-data-[slot=frame]:before:hidden before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_tr:last-child]:border-0 in-data-[slot=frame]:*:[tr]:border-0 in-data-[slot=frame]:*:[tr]:*:[td]:border-b in-data-[slot=frame]:*:[tr]:*:[td]:bg-background in-data-[slot=frame]:*:[tr]:*:[td]:bg-clip-padding in-data-[slot=frame]:*:[tr]:first:*:[td]:first:rounded-ss-xl in-data-[slot=frame]:*:[tr]:*:[td]:first:border-s in-data-[slot=frame]:*:[tr]:first:*:[td]:border-t in-data-[slot=frame]:*:[tr]:last:*:[td]:last:rounded-ee-xl in-data-[slot=frame]:*:[tr]:*:[td]:last:border-e in-data-[slot=frame]:*:[tr]:first:*:[td]:last:rounded-se-xl in-data-[slot=frame]:*:[tr]:last:*:[td]:first:rounded-es-xl in-data-[slot=frame]:*:[tr]:hover:*:[td]:bg-transparent in-data-[slot=frame]:*:[tr]:data-[state=selected]:*:[td]:bg-muted/72", className),
+		"data-slot": "table-body",
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		className: cn("border-t in-data-[slot=frame]:border-none bg-muted/72 in-data-[slot=frame]:bg-transparent font-medium [&>tr]:last:border-b-0 in-data-[slot=frame]:*:[tr]:hover:bg-transparent", className),
+		"data-slot": "table-footer",
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		className: cn("border-b transition-colors hover:bg-muted/72 in-data-[slot=frame]:hover:bg-transparent data-[state=selected]:bg-muted/72 in-data-[slot=frame]:data-[state=selected]:bg-transparent", className),
+		"data-slot": "table-row",
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		className: cn("h-10 whitespace-nowrap px-2.5 text-left align-middle font-medium text-muted-foreground leading-none has-[[role=checkbox]]:w-px has-[[role=checkbox]]:pe-0", className),
+		"data-slot": "table-head",
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("whitespace-nowrap p-2.5 align-middle leading-none in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)] has-[[role=checkbox]]:pe-0", className),
+		"data-slot": "table-cell",
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		className: cn("in-data-[slot=frame]:my-4 mt-4 text-muted-foreground text-sm", className),
+		"data-slot": "table-caption",
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/components/tabs.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/components/tabs.d.ts
+type TabsVariant = "default" | "underline";
+declare function Tabs({ className, ...props }: Tabs$1.Root.Props): React$1.JSX.Element;
+declare function TabsList({ variant, className, children, ...props }: Tabs$1.List.Props & {
+  variant?: TabsVariant;
+}): React$1.JSX.Element;
+declare function TabsTab({ className, ...props }: Tabs$1.Tab.Props): React$1.JSX.Element;
+declare function TabsPanel({ className, ...props }: Tabs$1.Panel.Props): React$1.JSX.Element;
+//#endregion
+export { Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger };

package/dist/components/tabs.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+//#region src/components/tabs.tsx
+function Tabs({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		className: cn("flex flex-col gap-2 data-[orientation=vertical]:flex-row", className),
+		"data-slot": "tabs",
+		...props
+	});
+}
+function TabsList({ variant = "default", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Tabs$1.List, {
+		className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground", "data-[orientation=vertical]:flex-col", variant === "default" ? "rounded-lg bg-muted p-0.5 text-muted-foreground/72" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent", className),
+		"data-slot": "tabs-list",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Tabs$1.Indicator, {
+			className: cn("-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out", variant === "underline" ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "-z-1 rounded-md bg-background shadow-sm/5 dark:bg-input"),
+			"data-slot": "tab-indicator"
+		})]
+	});
+}
+function TabsTab({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		className: cn("[&_svg]:-mx-0.5 relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "tabs-tab",
+		...props
+	});
+}
+function TabsPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		className: cn("flex-1 outline-none", className),
+		"data-slot": "tabs-content",
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger };

package/dist/components/text.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text.d.ts
+declare const textVariants: (props?: ({
+  variant?: "error" | "info" | "secondary" | "success" | "warning" | "body" | "heading1" | "heading2" | "heading3" | "heading4" | "mono" | "mono-secondary" | null | undefined;
+  size?: "sm" | "lg" | "xs" | "xl" | "default" | "none" | null | undefined;
+  weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
+  truncate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextProps extends useRender.ComponentProps<"p">, VariantProps<typeof textVariants> {}
+declare function Text({ className, variant, size, weight, truncate, render, ...props }: TextProps): React$1.ReactElement;
+//#endregion
+export { Text, textVariants };

package/dist/components/text.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text.tsx
+const textVariants = cva("", {
+	variants: {
+		variant: {
+			heading1: "text-3xl font-semibold tracking-tight",
+			heading2: "text-2xl font-semibold tracking-tight",
+			heading3: "text-xl font-semibold tracking-tight",
+			heading4: "text-lg font-semibold tracking-tight",
+			body: "text-foreground",
+			secondary: "text-muted-foreground",
+			success: "text-success-foreground",
+			error: "text-destructive-foreground",
+			warning: "text-warning-foreground",
+			info: "text-info-foreground",
+			mono: "font-mono text-foreground",
+			"mono-secondary": "font-mono text-muted-foreground"
+		},
+		size: {
+			xs: "text-xs",
+			sm: "text-sm sm:text-xs",
+			default: "text-base sm:text-sm",
+			lg: "text-lg sm:text-base",
+			xl: "text-xl sm:text-lg",
+			none: ""
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold",
+			bold: "font-bold"
+		},
+		truncate: { true: "truncate min-w-0" }
+	},
+	defaultVariants: {
+		variant: "body",
+		size: "default"
+	}
+});
+function Text({ className, variant, size, weight, truncate, render, ...props }) {
+	let defaultTagName = "p";
+	if (variant === "heading1") defaultTagName = "h1";
+	else if (variant === "heading2") defaultTagName = "h2";
+	else if (variant === "heading3") defaultTagName = "h3";
+	else if (variant === "heading4") defaultTagName = "h4";
+	else if (variant === "mono" || variant === "mono-secondary") defaultTagName = "span";
+	const effectiveSize = variant?.startsWith("heading") && !size ? "none" : size;
+	const defaultProps = {
+		className: cn(textVariants({
+			variant,
+			size: effectiveSize,
+			weight,
+			truncate,
+			className
+		})),
+		"data-slot": "text"
+	};
+	return useRender({
+		defaultTagName,
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Text, textVariants };

package/dist/components/textarea.d.ts

@@ -0,0 +1,9 @@
+import * as React$1 from "react";
+//#region src/components/textarea.d.ts
+type TextareaProps = React$1.ComponentProps<"textarea"> & {
+  size?: "sm" | "default" | "lg" | number;
+  unstyled?: boolean;
+};
+declare function Textarea({ className, size, unstyled, ...props }: TextareaProps): React$1.JSX.Element;
+//#endregion
+export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -0,0 +1,20 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Field } from "@base-ui/react/field";
+//#region src/components/textarea.tsx
+function Textarea({ className, size = "default", unstyled = false, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(!unstyled && "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+		"data-size": size,
+		"data-slot": "textarea-control",
+		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
+			className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", size === "sm" && "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5", size === "lg" && "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"),
+			"data-slot": "textarea",
+			...mergeProps(defaultProps, props)
+		}) })
+	});
+}
+//#endregion
+export { Textarea };