@bysages/react 0.3.1 → 0.4.0

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

@@ -5,5 +5,8 @@ export interface SpinnerProps extends HTMLAttributes<HTMLElement> {
 }
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
  * default — it reports progress without claiming attention. */
-export declare function Spinner({ size, children, ...rest }: SpinnerProps): import("react").JSX.Element;
+declare function SpinnerImpl({ size, children, ...rest }: SpinnerProps): import("react").JSX.Element;
+export declare const Spinner: typeof SpinnerImpl & {
+  Root: typeof SpinnerImpl;
+};
 //#endregion

package/dist/components/spinner/index.mjs

@@ -1,10 +1,11 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner/index.tsx
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
 * default — it reports progress without claiming attention. */
-function Spinner({ size = "md", children, ...rest }) {
+function SpinnerImpl({ size = "md", children, ...rest }) {
 	injectComponentStyle("spinner");
 	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("span", {
@@ -34,5 +35,6 @@ function Spinner({ size = "md", children, ...rest }) {
 		}), children]
 	});
 }
+const Spinner = withSelfRoot(SpinnerImpl);
 //#endregion
 export { Spinner };

package/dist/components/split-button/index.d.mts

@@ -1,3 +1,4 @@
+import { Menu } from "../menu/index.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/split-button/index.d.ts
 export interface SplitButtonEntry {
@@ -32,5 +33,6 @@ export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  * button stylesheet's trigger register dresses it. The popup keeps the
  * menu parts untouched.
  */
-export declare function SplitButton({ label, items, variant, tone, size, disabled, onClick, onSelect, ...rest }: SplitButtonProps): import("react").JSX.Element;
+declare function SplitButtonImpl({ label, items, variant, tone, size, disabled, onClick, onSelect, ...rest }: SplitButtonProps): import("react").JSX.Element;
+export declare const SplitButton: typeof SplitButtonImpl & typeof Menu;
 //#endregion

package/dist/components/split-button/index.mjs

@@ -1,5 +1,8 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
+import { Menu as Menu$1 } from "../menu/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
@@ -14,9 +17,10 @@ import { Menu } from "@ark-ui/react/menu";
 * button stylesheet's trigger register dresses it. The popup keeps the
 * menu parts untouched.
 */
-function SplitButton({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
+function SplitButtonImpl({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
 	injectComponentStyle("split-button");
 	injectComponentStyle("menu");
+	const hostId = useElementId("split-button", rest);
 	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
@@ -30,6 +34,7 @@ function SplitButton({ label, items = [], variant = "solid", tone = "ink", size
 			onClick,
 			children: label
 		}), /* @__PURE__ */ jsxs(Menu.Root, {
+			id: `${hostId}:menu`,
 			positioning: { placement: "bottom-end" },
 			children: [/* @__PURE__ */ jsx(Menu.Trigger, {
 				asChild: true,
@@ -42,7 +47,7 @@ function SplitButton({ label, items = [], variant = "solid", tone = "ink", size
 					"data-square": "true",
 					"data-motion": "ink-ripple lit",
 					"aria-label": messages.more.actions,
-					children: chevronDown()
+					children: chevronDown
 				})
 			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
 				value: entry.value,
@@ -54,20 +59,10 @@ function SplitButton({ label, items = [], variant = "solid", tone = "ink", size
 		})]
 	});
 }
-/** One stroke pointing down: all a fitted dropdown arrow needs. */
-function chevronDown() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-	});
-}
+const SplitButton = Object.assign(SplitButtonImpl, Menu$1);
+const chevronDown = iconNode("chevron-down", {
+	width: 16,
+	height: 16
+});
 //#endregion
 export { SplitButton };

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

@@ -1,7 +1,20 @@
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
 //#region src/components/splitter/index.d.ts
-/** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
- * a hairline and a small paper-seal thumb answers the hand. The API is
- * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-export declare const Splitter: typeof Splitter$1;
+export type SplitterItem = {
+  id: string;
+  label: string;
+};
+export interface SplitterFacadeProps {
+  items: SplitterItem[];
+  defaultValue?: number[];
+  value?: number[];
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+declare function SplitterFacade({ items, defaultValue, value, orientation, className }: SplitterFacadeProps): import("react").JSX.Element;
+declare namespace SplitterFacade {
+  var displayName: string;
+}
+type SplitterParts = typeof Splitter$1;
+export declare const Splitter: typeof SplitterFacade & SplitterParts;
 //#endregion

package/dist/components/splitter/index.mjs

@@ -1,10 +1,44 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
 //#region src/components/splitter/index.tsx
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-const Splitter = Splitter$1;
+function SplitterRoot(props) {
+	const id = useElementId("splitter", props);
+	return /* @__PURE__ */ jsx(Splitter$1.Root, {
+		...props,
+		id
+	});
+}
+function SplitterFacade({ items, defaultValue, value, orientation = "horizontal", className }) {
+	return /* @__PURE__ */ jsx(SplitterRoot, {
+		className,
+		orientation,
+		panels: items.map((item) => ({ id: item.id })),
+		...defaultValue === void 0 ? {} : { defaultSize: defaultValue },
+		...value === void 0 ? {} : { size: value },
+		children: items.map((item, index) => {
+			const next = items.at(index + 1);
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Splitter$1.Panel, {
+				id: item.id,
+				children: item.label
+			}), next ? /* @__PURE__ */ jsx(Splitter$1.ResizeTrigger, {
+				id: `${item.id}:${next.id}`,
+				"aria-label": "Resize panels",
+				children: /* @__PURE__ */ jsx(Splitter$1.ResizeTriggerIndicator, {})
+			}) : null] }, item.id);
+		})
+	});
+}
+SplitterFacade.displayName = "SSplitter";
+const Splitter = Object.assign(SplitterFacade, {
+	...Splitter$1,
+	Root: SplitterRoot
+});
 injectComponentStyle("splitter");
 //#endregion
 export { Splitter };

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

@@ -8,5 +8,8 @@ export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
 /** 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. */
-export declare function Spotlight({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+declare function SpotlightImpl({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+export declare const Spotlight: typeof SpotlightImpl & {
+  Root: typeof SpotlightImpl;
+};
 //#endregion

package/dist/components/spotlight/index.mjs

@@ -1,10 +1,11 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 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,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stack/index.tsx
@@ -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/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 { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+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 { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+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 { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+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 };