@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.1

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,344 @@
+import { cn } from "../../lib/cn.js";
+import { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Stepper/Stepper.tsx
+function CheckIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+	});
+}
+function XIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M18 6 6 18" })
+	});
+}
+const StepperContext = createContext({
+	value: 0,
+	linear: true,
+	orientation: "horizontal",
+	size: "md",
+	completedLabel: "Completed",
+	incompleteLabel: "Not completed",
+	invalidLabel: "Error"
+});
+const StepperItemContext = createContext({
+	index: 0,
+	current: false,
+	complete: false,
+	invalid: false,
+	disabled: false,
+	setHasTrigger: () => {}
+});
+function stepStateAttributes(item, orientation) {
+	return {
+		"data-orientation": orientation,
+		"data-current": item.current ? "" : void 0,
+		"data-complete": item.complete ? "" : void 0,
+		"data-incomplete": !item.current && !item.complete ? "" : void 0,
+		"data-invalid": item.invalid ? "" : void 0,
+		"data-disabled": item.disabled ? "" : void 0
+	};
+}
+const listOrientationClasses = {
+	horizontal: "w-full flex-row items-center",
+	vertical: "flex-col"
+};
+const gapClasses = {
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4"
+};
+const itemClasses = "relative data-disabled:pointer-events-none data-disabled:opacity-50";
+const itemOrientationClasses = {
+	horizontal: "flex min-w-0 flex-1 items-center last:flex-initial",
+	vertical: "flex flex-col"
+};
+const itemVerticalGapClasses = {
+	sm: "[&:not(:last-child)]:pb-4",
+	md: "[&:not(:last-child)]:pb-6",
+	lg: "[&:not(:last-child)]:pb-8"
+};
+const triggerClasses = "group/trigger grid cursor-pointer select-none grid-cols-[auto_1fr] items-center gap-y-0.5 rounded-md text-start transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none data-disabled:opacity-50";
+const triggerGapClasses = {
+	sm: "gap-x-2",
+	md: "gap-x-2.5",
+	lg: "gap-x-3"
+};
+const indicatorClasses = "flex shrink-0 items-center justify-center rounded-full border font-sans font-medium tabular-nums transition-colors duration-150 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const indicatorSizeClasses = {
+	sm: "size-6 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+	md: "size-8 text-sm [&_svg:not([class*='size-'])]:size-4",
+	lg: "size-10 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+const indicatorStateClasses = {
+	filled: "border-transparent bg-primary text-primary-foreground",
+	incomplete: "border-border bg-background text-slate-600 group-hover/trigger:border-slate-400",
+	invalid: "border-destructive bg-background text-error-700"
+};
+const titleClasses = "font-sans font-medium transition-colors duration-150";
+const titleSizeClasses = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const descriptionClasses = "col-start-2 font-sans text-muted-foreground";
+const descriptionSizeClasses = {
+	sm: "text-xs",
+	md: "text-xs",
+	lg: "text-sm"
+};
+const separatorClasses = "select-none transition-colors duration-150";
+const separatorHorizontalClasses = "h-px flex-1";
+const separatorVerticalClasses = {
+	sm: "absolute start-3 top-7 bottom-1 w-px",
+	md: "absolute start-4 top-9 bottom-1 w-px",
+	lg: "absolute start-5 top-11 bottom-1 w-px"
+};
+/**
+* Class list for an element laid out and focus-styled as a StepperTrigger.
+*
+* Use it when a foreign interactive element must sit in a step's place — e.g.
+* a router link that re-enters a completed step:
+*
+*   <a href="/checkout/plan" className={stepperTriggerVariants()}>
+*     <StepperIndicator />
+*     <StepperTitle>Choose plan</StepperTitle>
+*   </a>
+*/
+function stepperTriggerVariants({ size = "md", className } = {}) {
+	return cn(triggerClasses, triggerGapClasses[size], className);
+}
+/**
+* Progress through a multi-step flow, marked up as an ordered list with
+* `aria-current="step"` on the current step and visually-hidden state text on
+* the others. It defaults to `aria-label="Progress"`; pass a localized
+* `aria-label` (or `aria-labelledby`) when the page language isn't English.
+*/
+const Stepper = forwardRef(({ value = 0, onValueChange, linear = true, orientation = "horizontal", size = "md", completedLabel = "Completed", incompleteLabel = "Not completed", invalidLabel = "Error", render, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => {
+	const contextValue = useMemo(() => ({
+		value,
+		linear,
+		orientation,
+		size,
+		onValueChange,
+		completedLabel,
+		incompleteLabel,
+		invalidLabel
+	}), [
+		value,
+		linear,
+		orientation,
+		size,
+		onValueChange,
+		completedLabel,
+		incompleteLabel,
+		invalidLabel
+	]);
+	const element = useRender({
+		defaultTagName: "ol",
+		render,
+		ref,
+		props: {
+			role: "list",
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Progress" : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			"data-orientation": orientation,
+			...rest,
+			className: cn("flex", listOrientationClasses[orientation], orientation === "horizontal" && gapClasses[size], className)
+		}
+	});
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: contextValue,
+		children: element
+	});
+});
+Stepper.displayName = "Stepper";
+/**
+* One step in the flow. When it holds no `StepperTrigger` the item itself
+* carries `aria-current="step"` (the USWDS static-indicator pattern); with a
+* trigger, the trigger takes over so keyboard focus announces the state.
+*/
+const StepperItem = forwardRef(({ index, completed, disabled = false, invalid = false, render, className, ...rest }, ref) => {
+	const { value, orientation, size } = useContext(StepperContext);
+	const [hasTrigger, setHasTrigger] = useState(false);
+	const current = index === value;
+	const complete = completed ?? index < value;
+	const contextValue = useMemo(() => ({
+		index,
+		current,
+		complete,
+		invalid,
+		disabled,
+		setHasTrigger
+	}), [
+		index,
+		current,
+		complete,
+		invalid,
+		disabled
+	]);
+	const element = useRender({
+		defaultTagName: "li",
+		render,
+		ref,
+		props: {
+			"aria-current": current && !hasTrigger ? "step" : void 0,
+			...stepStateAttributes(contextValue, orientation),
+			...rest,
+			className: cn(itemClasses, itemOrientationClasses[orientation], orientation === "horizontal" ? gapClasses[size] : itemVerticalGapClasses[size], className)
+		}
+	});
+	return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
+		value: contextValue,
+		children: element
+	});
+});
+StepperItem.displayName = "StepperItem";
+/**
+* Makes a step navigable: activating it calls the stepper's `onValueChange`
+* with this step's index. Under `linear` (the default) upcoming steps are
+* blocked automatically; completed steps stay revisitable, which is the
+* universal wizard convention. Carries `aria-current="step"` on the current
+* step so the state is announced on focus, not only while browsing the list.
+*/
+const StepperTrigger = forwardRef(({ render, className, disabled = false, onClick, ...rest }, ref) => {
+	const { linear, size, orientation, onValueChange } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	const { setHasTrigger } = item;
+	useEffect(() => {
+		setHasTrigger(true);
+		return () => setHasTrigger(false);
+	}, [setHasTrigger]);
+	const explicitlyDisabled = disabled || item.disabled;
+	const blocked = linear && !item.current && !item.complete;
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) onValueChange?.(item.index, event);
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		ref,
+		props: {
+			type: "button",
+			disabled: explicitlyDisabled || blocked,
+			"aria-current": item.current ? "step" : void 0,
+			...stepStateAttributes({
+				...item,
+				disabled: explicitlyDisabled
+			}, orientation),
+			...rest,
+			onClick: handleClick,
+			className: cn(stepperTriggerVariants({ size }), className)
+		}
+	});
+});
+StepperTrigger.displayName = "StepperTrigger";
+/**
+* The step's circular marker: the step number, a check once completed, an
+* error glyph when invalid. Numbers and glyphs are decorative — the
+* visually-hidden status text rendered alongside them (`completedLabel` /
+* `incompleteLabel` / `invalidLabel`) plus the list position carry the state
+* for screen readers, following the USWDS step indicator.
+*/
+const StepperIndicator = forwardRef(({ children, render, className, ...rest }, ref) => {
+	const { orientation, size, completedLabel, incompleteLabel, invalidLabel } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	const stateClasses = item.invalid ? indicatorStateClasses.invalid : item.current || item.complete ? indicatorStateClasses.filled : indicatorStateClasses.incomplete;
+	const glyph = item.invalid ? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }) : item.complete && !item.current ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: item.index + 1
+	});
+	const statusLabel = item.invalid ? invalidLabel : item.current ? null : item.complete ? completedLabel : incompleteLabel;
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...stepStateAttributes(item, orientation),
+			...rest,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [children ?? glyph, statusLabel != null && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: statusLabel
+			})] }),
+			className: cn(indicatorClasses, indicatorSizeClasses[size], stateClasses, orientation === "horizontal" && "row-span-2", className)
+		}
+	});
+});
+StepperIndicator.displayName = "StepperIndicator";
+/** The step's label. Carbon guidance: keep it to one or two words. */
+const StepperTitle = forwardRef(({ render, className, ...rest }, ref) => {
+	const { orientation, size } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	const stateClasses = item.invalid ? "text-error-700" : item.current || item.complete ? "text-foreground" : "text-slate-600";
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...stepStateAttributes(item, orientation),
+			...rest,
+			className: cn(titleClasses, titleSizeClasses[size], stateClasses, !item.invalid && "group-hover/trigger:text-primary", className)
+		}
+	});
+});
+StepperTitle.displayName = "StepperTitle";
+/**
+* Secondary line under the title: helper copy, or the "Optional" marker the
+* W3C multi-page-forms guidance asks for on skippable steps.
+*/
+const StepperDescription = forwardRef(({ render, className, ...rest }, ref) => {
+	const { orientation, size } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			...stepStateAttributes(item, orientation),
+			...rest,
+			className: cn(descriptionClasses, descriptionSizeClasses[size], item.invalid && "text-error-700", className)
+		}
+	});
+});
+StepperDescription.displayName = "StepperDescription";
+/**
+* Connector after a step (omit it on the last item). It fills toward the
+* next step horizontally and hangs below the indicator vertically — where it
+* tracks the item's height, so inline step content stretches it. The line
+* turns primary once its step completes.
+*/
+const StepperSeparator = forwardRef(({ render, className, ...rest }, ref) => {
+	const { orientation, size } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	return useRender({
+		defaultTagName: "span",
+		render,
+		ref,
+		props: {
+			role: "presentation",
+			"aria-hidden": "true",
+			...stepStateAttributes(item, orientation),
+			...rest,
+			className: cn(separatorClasses, orientation === "horizontal" ? separatorHorizontalClasses : separatorVerticalClasses[size], item.complete ? "bg-primary" : "bg-border", className)
+		}
+	});
+});
+StepperSeparator.displayName = "StepperSeparator";
+//#endregion
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, stepperTriggerVariants };

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+import { Stepper, StepperDescription, StepperDescriptionProps, StepperIndicator, StepperIndicatorProps, StepperItem, StepperItemProps, StepperOrientation, StepperProps, StepperSeparator, StepperSeparatorProps, StepperSize, StepperTitle, StepperTitleProps, StepperTrigger, StepperTriggerProps, StepperTriggerVariantsOptions, stepperTriggerVariants } from "./Stepper.js";
+export { Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, stepperTriggerVariants };

package/dist/components/Stepper/index.js

@@ -0,0 +1,2 @@
+import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, stepperTriggerVariants } from "./Stepper.js";
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, stepperTriggerVariants };

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,56 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/Switch/Switch.d.ts
+type SwitchSize = "sm" | "md" | "lg";
+type SwitchLabelPosition = "start" | "end";
+interface SwitchVariantsOptions {
+  size?: SwitchSize;
+  className?: string;
+}
+/**
+ * Class list for the switch track itself. State styling hangs off Base UI's
+ * data-attributes (`data-checked`, `data-disabled`, `data-readonly`,
+ * `data-invalid`) plus `aria-invalid`.
+ */
+declare function switchVariants({ size, className }?: SwitchVariantsOptions): string;
+interface SwitchProps extends Omit<ComponentPropsWithoutRef<typeof Switch.Root>, "className"> {
+  /**
+   * Track size. The 24px-tall `lg` track meets the WCAG 2.5.8 target-size
+   * floor on its own; `sm`/`md` rely on the clickable `label` (or surrounding
+   * spacing) to extend the target. Prefer `md`+ with a label on touch-first
+   * surfaces.
+   */
+  size?: SwitchSize;
+  /**
+   * Visible label rendered in an enclosing `<label>`, so clicking it flips
+   * the switch and it names the control. Without it, provide an accessible
+   * name another way: `aria-label`, `aria-labelledby`, or an external
+   * `<label>`. When `required` is set, the label shows a decorative asterisk.
+   */
+  label?: ReactNode;
+  /**
+   * Supporting copy below the label, linked via `aria-describedby`. Rendered
+   * outside the `<label>` element so screen readers announce it as the
+   * description instead of reading it into the accessible name.
+   */
+  description?: ReactNode;
+  /**
+   * Side of the switch the `label` text sits on. `end` (the default) reads
+   * label-after like a Checkbox row; `start` reads text-first and pushes the
+   * switch to the far edge when the row is stretched — the settings-list
+   * pattern. Ignored without `label`.
+   */
+  labelPosition?: SwitchLabelPosition;
+  /** Applied to the switch track itself, also when `label`/`description` wrap it. */
+  className?: string;
+}
+/**
+ * On/off control built on Base UI's Switch. Reach for it when flipping the
+ * value takes effect immediately (settings); for choices collected until a
+ * form submit, prefer Checkbox. The thumb slide is built in behind
+ * `motion-safe`. `ref` and `className` always target the track element,
+ * whether or not the labelled layout wraps it.
+ */
+declare const Switch$1: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Switch$1 as Switch, SwitchLabelPosition, SwitchProps, SwitchSize, SwitchVariantsOptions, switchVariants };

package/dist/components/Switch/Switch.js

@@ -0,0 +1,87 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef, useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/Switch/Switch.tsx
+const trackClasses = "inline-flex shrink-0 cursor-pointer select-none items-center rounded-full border border-border bg-muted p-px transition-colors duration-150 hover:border-slate-300 hover:bg-slate-200 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
+const trackSizeClasses = {
+	sm: "h-4 w-7",
+	md: "h-5 w-9",
+	lg: "h-6 w-11"
+};
+const thumbSizeClasses = {
+	sm: "size-3 data-checked:translate-x-3",
+	md: "size-4 data-checked:translate-x-4",
+	lg: "size-5 data-checked:translate-x-5"
+};
+const trackOffsetClasses = {
+	sm: "mt-0.5",
+	md: "",
+	lg: ""
+};
+const labelTextClasses = {
+	sm: "text-sm",
+	md: "text-sm",
+	lg: "text-base"
+};
+const descriptionTextClasses = {
+	sm: "text-xs",
+	md: "text-xs",
+	lg: "text-sm"
+};
+const descriptionIndentClasses = {
+	sm: "ps-9",
+	md: "ps-11",
+	lg: "ps-13"
+};
+/**
+* Class list for the switch track itself. State styling hangs off Base UI's
+* data-attributes (`data-checked`, `data-disabled`, `data-readonly`,
+* `data-invalid`) plus `aria-invalid`.
+*/
+function switchVariants({ size = "md", className } = {}) {
+	return cn(trackClasses, trackSizeClasses[size], className);
+}
+/**
+* On/off control built on Base UI's Switch. Reach for it when flipping the
+* value takes effect immediately (settings); for choices collected until a
+* form submit, prefer Checkbox. The thumb slide is built in behind
+* `motion-safe`. `ref` and `className` always target the track element,
+* whether or not the labelled layout wraps it.
+*/
+const Switch$1 = forwardRef(({ size = "md", label, description, labelPosition = "end", required, className, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+	const descriptionId = useId();
+	const hasLabel = label != null;
+	const hasText = hasLabel || description != null;
+	const control = /* @__PURE__ */ jsx(Switch.Root, {
+		ref,
+		required,
+		"aria-describedby": [ariaDescribedBy, description != null ? descriptionId : void 0].filter(Boolean).join(" ") || void 0,
+		className: cn(switchVariants({ size }), hasText && "data-disabled:opacity-100", hasLabel && trackOffsetClasses[size], className),
+		...rest,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cn("pointer-events-none block rounded-full bg-background shadow-sm", "motion-safe:transition-[translate] motion-safe:duration-150", thumbSizeClasses[size]) })
+	});
+	if (!hasText) return control;
+	const labelText = /* @__PURE__ */ jsxs("span", {
+		className: cn("font-medium text-foreground select-none", labelTextClasses[size]),
+		children: [label, required && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "ms-0.5 text-destructive",
+			children: "*"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
+		children: [hasLabel ? /* @__PURE__ */ jsx("label", {
+			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default", labelPosition === "start" && "justify-between"),
+			children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelText, control] }) : /* @__PURE__ */ jsxs(Fragment, { children: [control, labelText] })
+		}) : control, description != null && /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: cn("text-muted-foreground", descriptionTextClasses[size], labelPosition === "end" && descriptionIndentClasses[size]),
+			children: description
+		})]
+	});
+});
+Switch$1.displayName = "Switch";
+//#endregion
+export { Switch$1 as Switch, switchVariants };

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchLabelPosition, SwitchProps, SwitchSize, SwitchVariantsOptions, switchVariants } from "./Switch.js";
+export { Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, switchVariants };

package/dist/components/Switch/index.js

@@ -0,0 +1,2 @@
+import { Switch, switchVariants } from "./Switch.js";
+export { Switch, switchVariants };

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,116 @@
+import { ComponentPropsWithoutRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Table/Table.d.ts
+type TableSize = "sm" | "md" | "lg";
+type TableLayout = "auto" | "fixed";
+type TableContainerVariant = "plain" | "outline" | "elevated";
+type TableCaptionSide = "top" | "bottom";
+interface TableRenderState extends Record<string, unknown> {
+  /** Density applied to header and data cells. */
+  size: TableSize;
+  /** Browser column-sizing algorithm. */
+  layout: TableLayout;
+  /** Whether alternating body rows receive a supporting surface. */
+  striped: boolean;
+  /** Whether body rows receive a hover affordance. */
+  hoverable: boolean;
+  /** Whether column headers stay pinned inside a scrolling container. */
+  stickyHeader: boolean;
+  /** Whether adjacent cells are visually separated. */
+  showColumnBorders: boolean;
+}
+interface TableContainerRenderState extends Record<string, unknown> {
+  /** Surface treatment surrounding the scroll area. */
+  variant: TableContainerVariant;
+}
+interface TableCaptionRenderState extends Record<string, unknown> {
+  /** Visual edge where the native caption is placed. */
+  side: TableCaptionSide;
+}
+interface TableRowRenderState extends Record<string, unknown> {
+  /** Whether the row receives the selected visual treatment. */
+  selected: boolean;
+}
+interface TableContainerProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
+  /** Surface around the responsive scroll area. `elevated` is the rich card default, `outline` removes depth, and `plain` keeps only overflow behavior. */
+  variant?: TableContainerVariant;
+  /** Replace the rendered `div` or inspect `{ variant }` in a render callback. Preserve a suitable grouping element. */
+  render?: useRender.RenderProp<TableContainerRenderState>;
+  /** Additional classes merged after the container recipe; set `max-height` here to activate a sticky header. */
+  className?: string;
+}
+declare const TableContainer: import("react").ForwardRefExoticComponent<TableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+interface TableProps extends Omit<ComponentPropsWithoutRef<"table">, "className"> {
+  /** Cell density. `sm` is optimized for desktop data review; prefer `md` or `lg` for touch-heavy rows containing controls. */
+  size?: TableSize;
+  /** `auto` lets content size columns; `fixed` obeys explicit widths and makes truncation predictable. */
+  layout?: TableLayout;
+  /** Add a supporting surface to alternating rows to improve scanning across wide datasets. */
+  striped?: boolean;
+  /** Add a subtle body-row hover affordance. This is visual only and does not make a row interactive. */
+  hoverable?: boolean;
+  /** Pin column headers to the top of the nearest scrolling `TableContainer`; give the container a max height for vertical scrolling. */
+  stickyHeader?: boolean;
+  /** Draw semantic-border separators between adjacent columns. */
+  showColumnBorders?: boolean;
+  /** Replace the rendered `table` or inspect the visual state in a render callback. Preserve native table semantics. */
+  render?: useRender.RenderProp<TableRenderState>;
+  /** Additional classes for table width, minimum width, or context-specific layout. */
+  className?: string;
+}
+declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+interface TableHeaderProps extends Omit<ComponentPropsWithoutRef<"thead">, "className"> {
+  /** Replace the rendered `thead`. Preserve its row-group semantics. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the header recipe. */
+  className?: string;
+}
+declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface TableBodyProps extends Omit<ComponentPropsWithoutRef<"tbody">, "className"> {
+  /** Replace the rendered `tbody`. Preserve its row-group semantics. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the body recipe. */
+  className?: string;
+}
+declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface TableFooterProps extends Omit<ComponentPropsWithoutRef<"tfoot">, "className"> {
+  /** Replace the rendered `tfoot`. Preserve its row-group semantics. */
+  render?: useRender.RenderProp;
+  /** Additional classes merged after the footer recipe. */
+  className?: string;
+}
+declare const TableFooter: import("react").ForwardRefExoticComponent<TableFooterProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends Omit<ComponentPropsWithoutRef<"tr">, "className"> {
+  /** Apply the selected visual treatment. In a native data table, the composed checkbox or control must expose the accessible checked state; use an advanced grid for row-level selection semantics. */
+  selected?: boolean;
+  /** Replace the rendered `tr` or inspect `{ selected }` in a render callback. Preserve its row semantics. */
+  render?: useRender.RenderProp<TableRowRenderState>;
+  /** Additional classes merged after the row recipe. */
+  className?: string;
+}
+declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends Omit<ComponentPropsWithoutRef<"th">, "className"> {
+  /** Replace the rendered `th`. Preserve header-cell semantics and set `scope`, `id`, and `headers` as the table structure requires. */
+  render?: useRender.RenderProp;
+  /** Additional classes for alignment, width, truncation, or a sortable-header button. */
+  className?: string;
+}
+declare const TableHead: import("react").ForwardRefExoticComponent<TableHeadProps & import("react").RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends Omit<ComponentPropsWithoutRef<"td">, "className"> {
+  /** Replace the rendered `td`. Preserve data-cell semantics; use `headers` for complex header relationships. */
+  render?: useRender.RenderProp;
+  /** Additional classes for alignment, width, truncation, or tabular numeric data. */
+  className?: string;
+}
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+interface TableCaptionProps extends Omit<ComponentPropsWithoutRef<"caption">, "className"> {
+  /** Place the native caption above or below the data. Captions identify tables for screen-reader navigation. */
+  side?: TableCaptionSide;
+  /** Replace the rendered `caption`. Preserve caption semantics so the table keeps its accessible name. */
+  render?: useRender.RenderProp<TableCaptionRenderState>;
+  /** Additional classes merged after the caption recipe. */
+  className?: string;
+}
+declare const TableCaption: import("react").ForwardRefExoticComponent<TableCaptionProps & import("react").RefAttributes<HTMLTableCaptionElement>>;
+//#endregion
+export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCaptionRenderState, TableCaptionSide, TableCell, TableCellProps, TableContainer, TableContainerProps, TableContainerRenderState, TableContainerVariant, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableLayout, TableProps, TableRenderState, TableRow, TableRowProps, TableRowRenderState, TableSize };