@ctrl-ui/react 0.8.0

package/dist/ui/stepper.js

@@ -0,0 +1,232 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { createContext, useContext, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CircleAlertIcon } from "lucide-react";
+//#region src/ui/stepper.tsx
+const StepperContext = createContext(null);
+function useStepper() {
+	const context = useContext(StepperContext);
+	if (!context) throw new Error("Stepper parts must be used within <Stepper>.");
+	return context;
+}
+const StepperItemContext = createContext(null);
+function useStepperItem() {
+	const context = useContext(StepperItemContext);
+	if (!context) throw new Error("Stepper item parts must be used within <StepperItem>.");
+	return context;
+}
+function stateForStep(value, step) {
+	if (value === null) return "neutral";
+	if (step < value) return "complete";
+	if (step === value) return "current";
+	return "upcoming";
+}
+function indicatorStateLabel(state, invalid) {
+	if (invalid) return "invalid";
+	if (state === "neutral") return null;
+	return state;
+}
+function defaultIndicatorContent(step, state, invalid) {
+	if (invalid) return /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4" });
+	if (state === "complete") return /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" });
+	return step + 1;
+}
+function itemLayout(orientation, responsive) {
+	if (orientation === "vertical") return "grid min-w-0 grid-cols-[2rem_minmax(0,1fr)]";
+	return cn("relative grid min-w-0 flex-1 grid-cols-1 justify-items-center", responsive && "@max-md/stepper:w-full @max-md/stepper:flex-none @max-md/stepper:grid-cols-[2rem_minmax(0,1fr)] @max-md/stepper:justify-items-stretch");
+}
+function partLayout(orientation, responsive, part) {
+	const vertical = {
+		indicator: "col-start-1 row-span-2 row-start-1",
+		title: "col-start-2 row-start-1",
+		description: "col-start-2 row-start-2"
+	}[part];
+	if (orientation === "vertical") return vertical;
+	const horizontal = {
+		indicator: "col-start-1 row-start-1",
+		title: "col-start-1 row-start-2",
+		description: "col-start-1 row-start-3"
+	}[part];
+	if (!responsive) return horizontal;
+	const narrow = {
+		indicator: "@max-md/stepper:col-start-1 @max-md/stepper:row-span-2 @max-md/stepper:row-start-1",
+		title: "@max-md/stepper:col-start-2 @max-md/stepper:row-start-1",
+		description: "@max-md/stepper:col-start-2 @max-md/stepper:row-start-2"
+	}[part];
+	return cn(horizontal, narrow);
+}
+function Stepper({ value, defaultValue = null, onValueChange, orientation = "horizontal", contentMode = "current", responsive = true, id, className, children, ...props }) {
+	const generatedId = useId();
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const controlled = value !== void 0;
+	const currentValue = value !== void 0 ? value : internalValue;
+	const selectStep = (step) => {
+		if (!controlled) setInternalValue(step);
+		onValueChange?.(step);
+	};
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: {
+			value: currentValue,
+			orientation,
+			contentMode,
+			responsive,
+			baseId: id ?? generatedId,
+			selectStep
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			id,
+			"data-control-ui": "stepper",
+			"data-control-family": "stepper",
+			"data-slot": "root",
+			"data-orientation": orientation,
+			"data-content-mode": contentMode,
+			"data-responsive": responsive ? "true" : void 0,
+			className: cn(responsive && "@container/stepper", "w-full", className),
+			children
+		})
+	});
+}
+function StepperList({ className, ...props }) {
+	const { orientation, responsive } = useStepper();
+	return /* @__PURE__ */ jsx("ol", {
+		...props,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "list",
+		"data-orientation": orientation,
+		className: cn(orientation === "horizontal" ? "flex w-full items-start" : "flex w-full flex-col", orientation === "horizontal" && responsive && "@max-md/stepper:flex-col @max-md/stepper:items-stretch", className)
+	});
+}
+function StepperItem({ step, disabled = false, invalid = false, className, children, ...props }) {
+	const { value, orientation, responsive, baseId } = useStepper();
+	const state = stateForStep(value, step);
+	const contextValue = {
+		step,
+		state,
+		disabled,
+		invalid,
+		titleId: `${baseId}-step-${step}-title`,
+		contentId: `${baseId}-step-${step}-content`
+	};
+	return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("li", {
+			...props,
+			"data-control-ui": "stepper",
+			"data-control-family": "stepper",
+			"data-slot": "item",
+			"data-step": step,
+			"data-state": state,
+			"data-disabled": disabled ? "true" : void 0,
+			"data-invalid": invalid ? "true" : void 0,
+			"aria-current": state === "current" ? "step" : void 0,
+			className: cn("relative", itemLayout(orientation, responsive), className),
+			children
+		})
+	});
+}
+function StepperTrigger({ disabled: disabledProp, className, onClick, type = "button", ...props }) {
+	const { orientation, responsive, selectStep } = useStepper();
+	const { step, state, disabled, invalid, contentId } = useStepperItem();
+	const isDisabled = disabled || Boolean(disabledProp);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "trigger",
+		"data-state": state,
+		"data-invalid": invalid ? "true" : void 0,
+		type,
+		disabled: isDisabled,
+		"aria-controls": contentId,
+		className: cn("group/stepper-trigger col-span-full row-span-3 row-start-1 grid w-full min-w-0 grid-cols-1 justify-items-center disabled:pointer-events-none disabled:cursor-not-allowed", orientation === "vertical" && "row-span-2 grid-cols-[2rem_minmax(0,1fr)] justify-items-stretch", orientation === "horizontal" && responsive && "@max-md/stepper:row-span-2 @max-md/stepper:grid-cols-[2rem_minmax(0,1fr)] @max-md/stepper:justify-items-stretch", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented && !isDisabled) selectStep(step);
+		}
+	});
+}
+function StepperIndicator({ className, children, ...props }) {
+	const { orientation, responsive } = useStepper();
+	const { step, state, disabled, invalid } = useStepperItem();
+	const stateLabel = indicatorStateLabel(state, invalid);
+	const status = [
+		`Step ${step + 1}`,
+		stateLabel,
+		disabled ? "disabled" : null
+	].filter(Boolean).join(", ");
+	const indicatorContent = children ?? defaultIndicatorContent(step, state, invalid);
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "indicator",
+		"data-state": state,
+		"data-invalid": invalid ? "true" : void 0,
+		className: cn("relative z-10 flex shrink-0 items-center justify-center", partLayout(orientation, responsive, "indicator"), className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: indicatorContent
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: status
+		})]
+	});
+}
+function StepperSeparator({ className, ...props }) {
+	const { orientation, responsive } = useStepper();
+	const { state, invalid } = useStepperItem();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "separator",
+		"data-state": state,
+		"data-invalid": invalid ? "true" : void 0,
+		"aria-hidden": "true",
+		className: cn("absolute", orientation === "horizontal" && "top-4 right-[calc(-50%+1rem)] left-[calc(50%+1rem)]", orientation === "vertical" && "top-8 bottom-0 left-4", orientation === "horizontal" && responsive && "@max-md/stepper:top-8 @max-md/stepper:right-auto @max-md/stepper:bottom-0 @max-md/stepper:left-4", className)
+	});
+}
+function StepperTitle({ className, ...props }) {
+	const { orientation, responsive } = useStepper();
+	const { titleId } = useStepperItem();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		id: titleId,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "title",
+		className: cn("min-w-0", partLayout(orientation, responsive, "title"), className)
+	});
+}
+function StepperDescription({ className, ...props }) {
+	const { orientation, responsive } = useStepper();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "description",
+		className: cn("min-w-0", partLayout(orientation, responsive, "description"), className)
+	});
+}
+function StepperContent({ step, keepMounted = true, className, ...props }) {
+	const { value, contentMode, baseId } = useStepper();
+	const active = value === step;
+	const hidden = contentMode === "current" && !active;
+	if (hidden && !keepMounted) return null;
+	return /* @__PURE__ */ jsx("section", {
+		...props,
+		id: `${baseId}-step-${step}-content`,
+		"data-control-ui": "stepper",
+		"data-control-family": "stepper",
+		"data-slot": "content",
+		"data-state": active ? "active" : "inactive",
+		hidden,
+		"aria-labelledby": `${baseId}-step-${step}-title`,
+		className
+	});
+}
+//#endregion
+export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger };

package/dist/ui/switch.d.ts

@@ -0,0 +1,26 @@
+import { SwitchKnobStyle } from "../knob-contracts/switch-knobs.js";
+import { CSSProperties, ReactNode } from "react";
+//#region src/ui/switch.d.ts
+type SwitchProps = Omit<{
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  id?: string;
+  className?: string;
+  icon?: ReactNode;
+  checkedIcon?: ReactNode;
+  uncheckedIcon?: ReactNode;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+}, "style"> & {
+  style?: CSSProperties & SwitchKnobStyle;
+};
+declare function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { Switch, SwitchProps };

package/dist/ui/switch.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/ui/switch.tsx
+function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, ...props }) {
+	const hasStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
+	const hasIcon = icon !== void 0 || hasStateIcons;
+	const singleIcon = hasStateIcons ? void 0 : icon;
+	const onIcon = checkedIcon ?? icon;
+	const offIcon = uncheckedIcon ?? icon;
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-control-ui": "switch",
+		"data-control-family": "switch",
+		"data-slot": "root",
+		checked,
+		defaultChecked,
+		onCheckedChange,
+		disabled,
+		readOnly,
+		required,
+		name,
+		value,
+		id,
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		className: cn("relative inline-flex shrink-0 cursor-pointer items-center", "data-[disabled]:cursor-not-allowed", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-control-ui": "switch",
+			"data-control-family": "switch",
+			"data-slot": "thumb",
+			className: "pointer-events-none relative block",
+			children: hasIcon ? /* @__PURE__ */ jsx(SwitchThumbIcon, {
+				icon: singleIcon,
+				checkedIcon: onIcon,
+				uncheckedIcon: offIcon
+			}) : null
+		})
+	});
+}
+function SwitchThumbIcon({ icon, checkedIcon, uncheckedIcon }) {
+	const base = "absolute inset-0 flex items-center justify-center [&_svg]:size-2.5 [&_svg]:stroke-[2.5]";
+	if (icon !== void 0) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-control-ui": "switch",
+		"data-control-family": "switch",
+		"data-slot": "thumb-icon",
+		className: base,
+		children: icon
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [uncheckedIcon !== void 0 ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-control-ui": "switch",
+		"data-control-family": "switch",
+		"data-slot": "thumb-icon",
+		"data-switch-icon": "unchecked",
+		className: base,
+		children: uncheckedIcon
+	}) : null, checkedIcon !== void 0 ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-control-ui": "switch",
+		"data-control-family": "switch",
+		"data-slot": "thumb-icon",
+		"data-switch-icon": "checked",
+		className: base,
+		children: checkedIcon
+	}) : null] });
+}
+//#endregion
+export { Switch };

package/dist/ui/table-of-contents.d.ts

@@ -0,0 +1,22 @@
+import { TableOfContentsKnobStyle } from "../knob-contracts/table-of-contents-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/table-of-contents.d.ts
+type TocItem = {
+  href: string;
+  label: string;
+  level?: number;
+  children?: TocItem[];
+};
+declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
+type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
+type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
+  style?: CSSProperties & TableOfContentsKnobStyle;
+} & {
+  items: TocItem[];
+  label?: string;
+  variant?: TableOfContentsVariant;
+};
+declare function useVisibleSections(ids: string[]): string[];
+declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
+//#endregion
+export { TableOfContents, TableOfContentsProps, TableOfContentsVariant, TocItem, tableOfContentsVariants, useVisibleSections };

package/dist/ui/table-of-contents.js

@@ -0,0 +1,181 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/table-of-contents.tsx
+const tableOfContentsVariants = [
+	"background",
+	"trail",
+	"both"
+];
+const DETECTION_MARGIN = "-80px 0px -20% 0px";
+const TOC_ITEM_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"]";
+const TOC_ACTIVE_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"][data-active]";
+const tableOfContentsItemClass = "block";
+const tableOfContentsHighlightClass = "";
+const tableOfContentsTrailClass = "absolute inset-y-0 left-0 w-0.5";
+function getScrollContainer(el) {
+	let node = el.parentElement;
+	while (node) {
+		if (/(auto|scroll|overlay)/.test(getComputedStyle(node).overflowY)) return node;
+		node = node.parentElement;
+	}
+	return null;
+}
+function useVisibleSections(ids) {
+	const [visibleState, setVisibleState] = useState({
+		idsKey: "",
+		visibleIds: []
+	});
+	const idsKey = ids.join("|");
+	useEffect(() => {
+		const elements = (idsKey ? idsKey.split("|") : []).map((id) => document.getElementById(id)).filter((el) => el !== null);
+		const firstElement = elements[0];
+		if (!firstElement) return;
+		const order = new Map(elements.map((el, index) => [el.id, index]));
+		const visible = /* @__PURE__ */ new Set();
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) if (entry.isIntersecting) visible.add(entry.target.id);
+			else visible.delete(entry.target.id);
+			setVisibleState({
+				idsKey,
+				visibleIds: [...visible].sort((a, b) => (order.get(a) ?? 0) - (order.get(b) ?? 0))
+			});
+		}, {
+			root: getScrollContainer(firstElement),
+			rootMargin: DETECTION_MARGIN,
+			threshold: 0
+		});
+		for (const el of elements) observer.observe(el);
+		return () => observer.disconnect();
+	}, [idsKey]);
+	return visibleState.idsKey === idsKey ? visibleState.visibleIds : [];
+}
+function collectLevels(items, fallbackLevel = 2) {
+	return items.flatMap((item) => {
+		const level = item.level ?? fallbackLevel;
+		return [level, ...collectLevels(item.children ?? [], level + 1)];
+	});
+}
+function normalizeItems(items, baseLevel, fallbackLevel = 2, nestingDepth = 0) {
+	return items.map((item) => {
+		const level = item.level ?? fallbackLevel;
+		const depth = Math.max(nestingDepth, Math.max(0, level - baseLevel));
+		const nestedItems = item.children;
+		const children = nestedItems && nestedItems.length > 0 ? normalizeItems(nestedItems, baseLevel, level + 1, nestingDepth + 1) : void 0;
+		return {
+			...item,
+			level,
+			depth,
+			children
+		};
+	});
+}
+function flattenItems(items) {
+	return items.flatMap((item) => [item, ...flattenItems(item.children ?? [])]);
+}
+function activeIdsInRange(visibleIds, targetIds) {
+	let firstIndex = targetIds.length;
+	let lastIndex = -1;
+	for (const id of visibleIds) {
+		const index = targetIds.indexOf(id);
+		if (index < 0) continue;
+		firstIndex = Math.min(firstIndex, index);
+		lastIndex = Math.max(lastIndex, index);
+	}
+	if (lastIndex < 0) return /* @__PURE__ */ new Set();
+	return new Set(targetIds.slice(firstIndex, lastIndex + 1));
+}
+function TableOfContents({ items, label = "On this page", variant = "both", className, style, ...props }) {
+	const normalizedItems = normalizeItems(items, Math.min(...collectLevels(items), 2));
+	const targetIds = flattenItems(normalizedItems).map((item) => item.href.replace(/^#/, ""));
+	const activeSet = activeIdsInRange(useVisibleSections(targetIds), targetIds);
+	const railStyle = style;
+	const highlightStyle = style;
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs("nav", {
+		"data-control-ui": "table-of-contents",
+		"data-control-family": "table-of-contents",
+		"data-slot": "root",
+		"data-variant": variant,
+		"aria-label": label,
+		className: cn("sticky top-6", className),
+		style,
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			"data-control-ui": "table-of-contents",
+			"data-control-family": "table-of-contents",
+			"data-slot": "label",
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "table-of-contents",
+			"data-control-family": "table-of-contents",
+			"data-slot": "track",
+			className: "relative isolate",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					"data-control-ui": "table-of-contents",
+					"data-control-family": "table-of-contents",
+					"data-slot": "rail",
+					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px",
+					style: railStyle
+				}),
+				/* @__PURE__ */ jsx(TrackHighlight, {
+					"data-variant": variant,
+					itemSelector: TOC_ITEM_SELECTOR,
+					activeSelector: TOC_ACTIVE_SELECTOR,
+					range: true,
+					followHover: false,
+					style: highlightStyle,
+					className: tableOfContentsHighlightClass,
+					children: variant !== "background" && /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-control-ui": "table-of-contents",
+						"data-control-family": "table-of-contents",
+						"data-slot": "trail",
+						className: tableOfContentsTrailClass
+					})
+				}),
+				/* @__PURE__ */ jsx(TocList, {
+					items: normalizedItems,
+					activeSet,
+					variant,
+					root: true
+				})
+			]
+		})]
+	});
+}
+function TocList({ items, activeSet, variant, root = false }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "table-of-contents",
+		"data-control-family": "table-of-contents",
+		"data-slot": "list",
+		"data-nested": root ? void 0 : "true",
+		children: items.map((item) => {
+			const targetId = item.href.replace(/^#/, "");
+			const isActive = activeSet.has(targetId);
+			return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+				"data-control-ui": "table-of-contents",
+				"data-control-family": "table-of-contents",
+				"data-slot": "item",
+				"data-active": isActive || void 0,
+				"data-variant": variant,
+				"data-level": item.level,
+				"data-depth": item.depth,
+				"aria-current": isActive ? "location" : void 0,
+				href: item.href,
+				className: tableOfContentsItemClass,
+				children: item.label
+			}), item.children && /* @__PURE__ */ jsx(TocList, {
+				items: item.children,
+				activeSet,
+				variant
+			})] }, item.href);
+		})
+	});
+}
+//#endregion
+export { TableOfContents, tableOfContentsVariants, useVisibleSections };

package/dist/ui/table.d.ts

@@ -0,0 +1,37 @@
+import { TableKnobStyle } from "../knob-contracts/table-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/table.d.ts
+type TableProps = Omit<ComponentProps<"table">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableHeaderProps = Omit<ComponentProps<"thead">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableBodyProps = Omit<ComponentProps<"tbody">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableFooterProps = Omit<ComponentProps<"tfoot">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableRowProps = Omit<ComponentProps<"tr">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableHeadProps = Omit<ComponentProps<"th">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableCellProps = ComponentProps<"td"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+type TableCaptionProps = Omit<ComponentProps<"caption">, "style"> & {
+  style?: CSSProperties & TableKnobStyle;
+};
+declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;
+declare function TableHeader({ className, ...props }: TableHeaderProps): import("react").JSX.Element;
+declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
+declare function TableFooter({ className, ...props }: TableFooterProps): import("react").JSX.Element;
+declare function TableRow({ className, ...props }: TableRowProps): import("react").JSX.Element;
+declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
+declare function TableCell({ className, ...props }: TableCellProps): import("react").JSX.Element;
+declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
+//#endregion
+export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps };

package/dist/ui/table.js

@@ -0,0 +1,83 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/table.tsx
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "container",
+		className: "relative w-full overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			"data-control-ui": "table",
+			"data-control-family": "table",
+			"data-slot": "root",
+			className: cn("w-full caption-bottom", className),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "header",
+		className,
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "body",
+		className,
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "footer",
+		className,
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "row",
+		className,
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "head",
+		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "cell",
+		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-control-ui": "table",
+		"data-control-family": "table",
+		"data-slot": "caption",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };