@bysages/react 0.3.1 → 0.4.1

package/dist/components/spotlight/index.mjs

@@ -1,10 +1,11 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/spotlight/index.tsx
 /** The ink-light card: a vessel whose rim and face take light from the
 * reader's hand. The wrapper only measures and writes the geometry —
 * the lamp itself is the two layers the stylesheet paints. */
-function Spotlight({ radius, children, ...rest }) {
+function SpotlightImpl({ radius, children, ...rest }) {
 	injectComponentStyle("spotlight");
 	const track = (event) => {
 		const host = event.currentTarget;
@@ -29,5 +30,6 @@ function Spotlight({ radius, children, ...rest }) {
 		children
 	});
 }
+const Spotlight = withSelfRoot(SpotlightImpl);
 //#endregion
 export { Spotlight };

package/dist/components/stack/index.d.mts

@@ -7,5 +7,8 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   align?: string;
   justify?: string;
 }
-export declare function Stack({ direction, gap, wrap, align, justify, ...rest }: StackProps): import("react").JSX.Element;
+declare function StackImpl({ direction, gap, wrap, align, justify, ...rest }: StackProps): import("react").JSX.Element;
+export declare const Stack: typeof StackImpl & {
+  Root: typeof StackImpl;
+};
 //#endregion

package/dist/components/stack/index.mjs

@@ -1,4 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stack/index.tsx
 /** Whitespace chosen by name: the named steps point at the space ramp so
@@ -11,14 +12,14 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Stack({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
+function StackImpl({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
 	injectComponentStyle("stack");
 	const style = {
 		...rest.style,
 		"--bs-stack-gap": gapVars[gap] ?? gapVars.md,
-		alignItems: align,
-		justifyContent: justify,
-		flexWrap: wrap ? "wrap" : void 0
+		"--bs-stack-align": align,
+		"--bs-stack-justify": justify,
+		"--bs-stack-wrap": wrap ? "wrap" : void 0
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -28,5 +29,6 @@ function Stack({ direction = "column", gap = "md", wrap = false, align, justify,
 		"data-direction": direction
 	});
 }
+const Stack = withSelfRoot(StackImpl);
 //#endregion
 export { Stack };

package/dist/components/stat/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stat/index.tsx
 function part(name, tag) {

package/dist/components/steps/index.d.mts

@@ -5,7 +5,28 @@ type StepsRootProps = ComponentProps<typeof Steps$1.Root> & {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
 };
-declare function StepsRoot({ size, ...rest }: StepsRootProps): import("react").JSX.Element;
+declare function StepsRoot(props: StepsRootProps): import("react").JSX.Element;
+type StepsItem = {
+  title: string;
+};
+export interface StepsFacadeProps {
+  items: StepsItem[];
+  step?: number;
+  defaultStep?: number;
+  linear?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder every indicator stands on. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onStepChange?: (step: number) => void;
+}
+declare function StepsFacade({ items, step, defaultStep, linear, orientation, size, className, onStepChange }: StepsFacadeProps): import("react").JSX.Element;
+declare namespace StepsFacade {
+  var displayName: string;
+}
+/** The machine wraps each tab in an item div; presentation keeps the
+ * tablist owned children legal while the tab itself keeps its role. */
+declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("react").JSX.Element;
 /**
  * Steps — linear progress through a sequence.
  *
@@ -13,11 +34,10 @@ declare function StepsRoot({ size, ...rest }: StepsRootProps): import("react").J
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
-/** The machine wraps each tab in an item div; presentation keeps the
- * tablist owned children legal while the tab itself keeps its role. */
-declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("react").JSX.Element;
-export declare const Steps: Omit<typeof Steps$1, "Root" | "Item"> & {
+type StepsParts = Omit<typeof Steps$1, "Root" | "Item"> & {
   Root: typeof StepsRoot;
   Item: typeof StepsItem;
 };
-//#endregion
+export declare const Steps: typeof StepsFacade & StepsParts;
+//#endregion
+export { StepsItem };

package/dist/components/steps/index.mjs

@@ -1,20 +1,35 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Steps as Steps$1 } from "@ark-ui/react/steps";
 //#region src/components/steps/index.tsx
-function StepsRoot({ size = "md", ...rest }) {
+function StepsRoot(props) {
+	const id = useElementId("steps", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Steps$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/**
-* Steps — linear progress through a sequence.
-*
-* Parts: Root, List, Item, Trigger, Indicator, Separator, Content,
-* PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
-* data-complete / data-current / data-incomplete.
-*/
+function StepsFacade({ items, step, defaultStep = 0, linear = false, orientation = "horizontal", size = "md", className, onStepChange }) {
+	return /* @__PURE__ */ jsx(StepsRoot, {
+		className,
+		size,
+		count: items.length,
+		linear,
+		orientation,
+		defaultStep,
+		...step === void 0 ? {} : { step },
+		onStepChange: (details) => onStepChange?.(details.step),
+		children: /* @__PURE__ */ jsx(Steps$1.List, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Steps$1.Item, {
+			index,
+			role: "presentation",
+			children: [/* @__PURE__ */ jsxs(Steps$1.Trigger, { children: [/* @__PURE__ */ jsx(Steps$1.Indicator, { children: String(index + 1) }), item.title] }), /* @__PURE__ */ jsx(Steps$1.Separator, {})]
+		}, item.title)) })
+	});
+}
+StepsFacade.displayName = "SSteps";
 /** The machine wraps each tab in an item div; presentation keeps the
 * tablist owned children legal while the tab itself keeps its role. */
 function StepsItem(props) {
@@ -23,11 +38,11 @@ function StepsItem(props) {
 		role: "presentation"
 	});
 }
-const Steps = {
+const Steps = Object.assign(StepsFacade, {
 	...Steps$1,
 	Root: StepsRoot,
 	Item: StepsItem
-};
+});
 injectComponentStyle("steps");
 //#endregion
 export { Steps };

package/dist/components/swap/index.d.mts

@@ -1,8 +1,14 @@
+import { ReactNode } from "react";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
 //#region src/components/swap/index.d.ts
-/** Ark's Swap, dressed in the paper-and-ink system: two impressions
- * occupying one seal, the arriving one growing into place on the spring
- * while the departing one shrinks away. The API is Ark's own — Root,
- * Indicator (type="on" | "off"), RootProvider. */
-export declare const Swap: typeof Swap$1;
+interface SwapFacadeProps {
+  swap?: boolean;
+  on?: ReactNode;
+  off?: ReactNode;
+  children?: ReactNode;
+}
+/** The one-tag path for the default check/cross impression; custom
+ * transitions and indicators stay on the anatomy. */
+declare function SwapFacade({ swap, on, off }: SwapFacadeProps): import("react").JSX.Element;
+export declare const Swap: typeof SwapFacade & typeof Swap$1;
 //#endregion

package/dist/components/swap/index.mjs

@@ -1,11 +1,38 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
 //#region src/components/swap/index.tsx
-/** Ark's Swap, dressed in the paper-and-ink system: two impressions
+/** Swap, dressed in the paper-and-ink system: two impressions
 * occupying one seal, the arriving one growing into place on the spring
-* while the departing one shrinks away. The API is Ark's own — Root,
+* while the departing one shrinks away. The parts — Root,
 * Indicator (type="on" | "off"), RootProvider. */
-const Swap = Swap$1;
+function SwapRoot(props) {
+	const id = useElementId("swap", props);
+	return /* @__PURE__ */ jsx(Swap$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path for the default check/cross impression; custom
+* transitions and indicators stay on the anatomy. */
+function SwapFacade({ swap = false, on, off }) {
+	return /* @__PURE__ */ jsxs(SwapRoot, {
+		swap,
+		children: [/* @__PURE__ */ jsx(Swap$1.Indicator, {
+			type: "on",
+			children: on ?? iconNode("check")
+		}), /* @__PURE__ */ jsx(Swap$1.Indicator, {
+			type: "off",
+			children: off ?? iconNode("x")
+		})]
+	});
+}
+const Swap = Object.assign(SwapFacade, {
+	...Swap$1,
+	Root: SwapRoot
+});
 injectComponentStyle("swap");
 //#endregion
 export { Swap };

package/dist/components/switch/index.d.mts

@@ -5,12 +5,30 @@ type SwitchRootProps = ComponentProps<typeof Switch$1.Root> & {
   /** One rung for the thumb; the track travels with it. */
   size?: "sm" | "md" | "lg";
 };
-declare function SwitchRoot({ size, ...rest }: SwitchRootProps): import("react").JSX.Element;
+declare function SwitchRoot(props: SwitchRootProps): import("react").JSX.Element;
+export interface SwitchFacadeProps {
+  value?: boolean;
+  defaultValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** One rung for the thumb; the track travels with it. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: boolean) => void;
+}
+declare function SwitchFacade({ value, defaultValue, label, disabled, invalid, required, readOnly, size, className, onValueChange }: SwitchFacadeProps): import("react").JSX.Element;
+declare namespace SwitchFacade {
+  var displayName: string;
+}
 /** Ark's Switch, dressed in the paper-and-ink system: a track that rests
  * in the inset shade of the paper and fills flat with primary ink when on,
  * the thumb sliding on the spring. The API is Ark's own — Root, Label,
  * Control, Thumb, HiddenInput. */
-export declare const Switch: Omit<typeof Switch$1, "Root"> & {
+type SwitchParts = Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
+export declare const Switch: typeof SwitchFacade & SwitchParts;
 //#endregion

package/dist/components/switch/index.mjs

@@ -1,21 +1,40 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@ark-ui/react/switch";
 //#region src/components/switch/index.tsx
-function SwitchRoot({ size = "md", ...rest }) {
+function SwitchRoot(props) {
+	const id = useElementId("switch", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's Switch, dressed in the paper-and-ink system: a track that rests
-* in the inset shade of the paper and fills flat with primary ink when on,
-* the thumb sliding on the spring. The API is Ark's own — Root, Label,
-* Control, Thumb, HiddenInput. */
-const Switch = {
+function SwitchFacade({ value, defaultValue = false, label, disabled = false, invalid = false, required = false, readOnly = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(SwitchRoot, {
+		className,
+		size,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		defaultChecked: defaultValue,
+		...value === void 0 ? {} : { checked: value },
+		onCheckedChange: (details) => onValueChange?.(details.checked),
+		children: [
+			/* @__PURE__ */ jsx(Switch$1.Control, { children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) }),
+			label ? /* @__PURE__ */ jsx(Switch$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Switch$1.HiddenInput, {})
+		]
+	});
+}
+SwitchFacade.displayName = "SSwitch";
+const Switch = Object.assign(SwitchFacade, {
 	...Switch$1,
 	Root: SwitchRoot
-};
+});
 injectComponentStyle("switch");
 //#endregion
 export { Switch };

package/dist/components/table/index.d.mts

@@ -74,6 +74,9 @@ export interface DataTableProps {
   /** Applied to the root vessel. */
   style?: CSSProperties;
 }
-export declare function DataTable(rawProps: DataTableProps): import("react").JSX.Element;
+declare function DataTableImpl(rawProps: DataTableProps): import("react").JSX.Element;
+export declare const DataTable: typeof DataTableImpl & {
+  Root: typeof DataTableImpl;
+};
 //#endregion
 export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };

package/dist/components/table/index.mjs

@@ -1,43 +1,25 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-eAHutw56.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Select$1 } from "../../select-i9UZsQCU.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { createListCollection } from "@ark-ui/react/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/table/index.tsx
-/** The pagination bar's arrows — thin chevrons for the row of seals. */
-function pageGlyph(direction) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
+function pageIcon(direction) {
+	return iconNode(direction === "start" ? "chevron-left" : "chevron-right", {
 		width: 14,
-		height: 14,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
-	});
-}
-/** The page-size select's pointing chevron. */
-function chevronDownGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		width: 14,
-		height: 14,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		height: 14
 	});
 }
+const chevronDownIcon = iconNode("chevron-down", {
+	width: 14,
+	height: 14
+});
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
 /** The list holding `id` and the index inside it, or null when absent. */
@@ -88,18 +70,7 @@ function mark(el, attr, on) {
 	if (on) el.setAttribute(attr, "");
 	else el.removeAttribute(attr);
 }
-function ChevronGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": true,
-		children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
-	});
-}
+const chevronIcon = iconNode("chevron-right");
 /** React keeps `indeterminate` off the JSX types; the DOM property is the
 * only channel, so the checkbox owns its ref. */
 function SelectBox(props) {
@@ -115,7 +86,7 @@ function SelectBox(props) {
 		onChange: props.onToggle
 	});
 }
-function DataTable(rawProps) {
+function DataTableImpl(rawProps) {
 	injectComponentStyle("table");
 	const props = rawProps;
 	const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
@@ -213,6 +184,7 @@ function DataTable(rawProps) {
 	});
 	const viewport = useRef(null);
 	const rows = table.getRowModel().rows;
+	const [hydrated, setHydrated] = useState(false);
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
 	* actually renders. It is read once and re-read only when the density
@@ -240,8 +212,15 @@ function DataTable(rawProps) {
 		});
 		return () => observer.disconnect();
 	}, [virtual]);
-	const virtualRows = virtualizer.getVirtualItems();
-	const totalSize = virtualizer.getTotalSize();
+	useEffect(() => setHydrated(true), []);
+	const fallbackRows = virtual ? rows.slice(0, Math.max(1, Math.ceil(320 / rowHeight))).map((row, index) => ({
+		key: row.id ?? index,
+		index,
+		start: index * rowHeight,
+		size: rowHeight
+	})) : [];
+	const virtualRows = hydrated ? virtualizer.getVirtualItems() : fallbackRows;
+	const totalSize = hydrated ? virtualizer.getTotalSize() : rows.length * rowHeight;
 	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
 	const leafIds = table.getAllLeafColumns().map((c) => c.id);
 	const expandHostId = tree ? leafIds.find((id) => id !== SELECT_COL_ID) : void 0;
@@ -431,7 +410,7 @@ function DataTable(rawProps) {
 		const style = { ...pin.style };
 		delete pin.style;
 		const rowSpan = cell.getRowSpan();
-		if (rowSpan > 1) style.gridRow = `span ${rowSpan}`;
+		if (rowSpan > 1) style["--bs-table-row-span"] = String(rowSpan);
 		const spanned = rowSpan > 1 ? { "data-spanned": "" } : {};
 		let content;
 		if (column.id === SELECT_COL_ID) content = /* @__PURE__ */ jsx(SelectBox, {
@@ -452,7 +431,7 @@ function DataTable(rawProps) {
 				"data-leaf": !row.getCanExpand() || void 0,
 				"aria-label": row.getIsExpanded() ? messages.table.collapseRow : messages.table.expandRow,
 				onClick: () => row.toggleExpanded(),
-				children: /* @__PURE__ */ jsx(ChevronGlyph, {})
+				children: chevronIcon
 			}), /* @__PURE__ */ jsx(FlexRender, { cell })]
 		});
 		else content = /* @__PURE__ */ jsx(FlexRender, { cell });
@@ -509,11 +488,8 @@ function DataTable(rawProps) {
 		const style = {};
 		if (virtual) {
 			const item = virtualRows[virtualIndex];
-			style.position = "absolute";
-			style.insetInlineStart = "0";
-			style.inlineSize = "100%";
-			style.transform = `translateY(${item.start}px)`;
-			style.blockSize = `${item.size}px`;
+			style["--bs-table-virtual-row-start"] = `${item.start}px`;
+			style["--bs-table-virtual-row-size"] = `${item.size}px`;
 		}
 		return /* @__PURE__ */ jsx("div", {
 			role: "row",
@@ -564,10 +540,8 @@ function DataTable(rawProps) {
 		"data-scope": "table",
 		"data-part": "body",
 		"data-merge": mergeMode || void 0,
-		style: virtual ? {
-			position: "relative",
-			blockSize: `${totalSize}px`
-		} : void 0,
+		"data-virtual": virtual || void 0,
+		style: virtual ? { "--bs-table-virtual-total": `${totalSize}px` } : void 0,
 		children: [virtual ? virtualRows.map((_, index) => renderRow(rows[index], index)) : rows.map((row) => renderRow(row, -1)), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
 			"data-scope": "table",
 			"data-part": "empty",
@@ -609,10 +583,13 @@ function DataTable(rawProps) {
 			positioning: { placement: "top-start" },
 			children: [/* @__PURE__ */ jsx(Select$1.Control, { children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
 				"aria-label": messages.table.rowsPerPage,
-				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownGlyph() })]
+				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownIcon })]
 			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
 				item,
-				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: "✓" })]
+				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: iconNode("check", {
+					width: 14,
+					height: 14
+				}) })]
 			}, item.value)) }) })]
 		});
 		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
@@ -621,13 +598,13 @@ function DataTable(rawProps) {
 			page: pagination.pageIndex + 1,
 			onPageChange: (details) => table.setPageIndex(details.page - 1),
 			children: [
-				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
+				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageIcon("start") }),
 				/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
 					type: "page",
 					value: page.value,
 					children: String(page.value)
 				}, page.value)) }),
-				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
+				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageIcon("end") })
 			]
 		});
 		return /* @__PURE__ */ jsxs("div", {
@@ -688,5 +665,6 @@ function DataTable(rawProps) {
 		]
 	});
 }
+const DataTable = withSelfRoot(DataTableImpl);
 //#endregion
 export { DataTable, FlexRender, createColumnHelper };

package/dist/components/tabs/index.d.mts

@@ -1,6 +1,27 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.d.ts
+export type TabsItem = {
+  value: string;
+  label: string;
+  content?: ReactNode;
+};
+export interface TabsFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: TabsItem[];
+  /** The register: a ruled line (default), or each tab its own card. */
+  variant?: "line" | "card";
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder for the tab rows. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: string) => void;
+}
+declare function TabsFacade({ value, defaultValue, items, variant, orientation, size, className, onValueChange }: TabsFacadeProps): import("react").JSX.Element;
+declare namespace TabsFacade {
+  var displayName: string;
+}
 type TabsRootProps = ComponentProps<typeof Tabs$1.Root> & {
   /** One rung of the control-height ladder for the tab rows. */
   size?: "sm" | "md" | "lg";
@@ -14,7 +35,8 @@ declare function TabsRoot({ size, variant, ...rest }: TabsRootProps): import("re
  * Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
  * bar on the list rule).
  */
-export declare const Tabs: Omit<typeof Tabs$1, "Root"> & {
+type TabsParts = Omit<typeof Tabs$1, "Root"> & {
   Root: typeof TabsRoot;
 };
+export declare const Tabs: typeof TabsFacade & TabsParts;
 //#endregion

package/dist/components/tabs/index.mjs

@@ -1,24 +1,40 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
 //#region src/components/tabs/index.tsx
+function TabsFacade({ value, defaultValue, items, variant = "line", orientation = "horizontal", size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(TabsRoot, {
+		className,
+		size,
+		variant,
+		orientation,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value),
+		children: [/* @__PURE__ */ jsxs(Tabs$1.List, { children: [items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+			value: item.value,
+			children: item.label
+		}, item.value)), /* @__PURE__ */ jsx(Tabs$1.Indicator, {})] }), items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Content, {
+			value: item.value,
+			children: item.content
+		}, item.value))]
+	});
+}
+TabsFacade.displayName = "STabs";
 function TabsRoot({ size = "md", variant = "line", ...rest }) {
+	const id = useElementId("tabs", rest);
 	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		...rest,
+		id,
 		"data-size": size,
 		"data-variant": variant
 	});
 }
-/**
-* Tabs — tabbed navigation.
-*
-* Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
-* bar on the list rule).
-*/
-const Tabs = {
+const Tabs = Object.assign(TabsFacade, {
 	...Tabs$1,
 	Root: TabsRoot
-};
+});
 injectComponentStyle("tabs");
 //#endregion
 export { Tabs };