@bysages/react 0.3.1 → 0.4.1

package/dist/components/result/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/result/index.tsx
 const MARK = "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>";
@@ -48,12 +48,12 @@ function part(name, tag) {
 /** A verdict drawn after the deed: the mark washes in the fixed
 * pigment, the title rides the serif, and the extra carries the way
 * onward. Any subset composes. */
-const Result = {
+const Result = Object.assign(ResultRoot, {
 	Root: ResultRoot,
 	Icon: ResultIcon,
 	Title: part("title", "h3"),
 	Description: part("description", "p"),
 	Extra: part("extra", "div")
-};
+});
 //#endregion
 export { Result, ResultIcon, ResultRoot };

package/dist/components/scroll-area/index.d.mts

@@ -1,7 +1,20 @@
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/index.d.ts
 /** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
  * give way to quiet ink lanes that surface on hover and scroll. The API
  * is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
-export declare const ScrollArea: typeof ScrollArea$1;
+declare function ScrollAreaRoot(props: ComponentProps<typeof ScrollArea$1.Root>): import("react").JSX.Element;
+type ScrollAreaFacadeProps = {
+  orientation?: "vertical" | "horizontal" | "both";
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+};
+/** The complete scroll vessel around caller content, with one or both quiet
+ * lanes depending on orientation. */
+declare function ScrollAreaFacade(props: ScrollAreaFacadeProps): import("react").JSX.Element;
+export declare const ScrollArea: typeof ScrollAreaFacade & Omit<typeof ScrollArea$1, "Root"> & {
+  Root: typeof ScrollAreaRoot;
+};
 //#endregion

package/dist/components/scroll-area/index.mjs

@@ -1,10 +1,40 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/index.tsx
 /** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
 * give way to quiet ink lanes that surface on hover and scroll. The API
 * is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
-const ScrollArea = ScrollArea$1;
-injectComponentStyle("scroll-area");
+function ScrollAreaRoot(props) {
+	injectComponentStyle("scroll-area");
+	const id = useElementId("scroll-area", props);
+	return /* @__PURE__ */ jsx(ScrollArea$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete scroll vessel around caller content, with one or both quiet
+* lanes depending on orientation. */
+function ScrollAreaFacade(props) {
+	const { orientation = "vertical", className, style, children } = props;
+	const orientations = orientation === "both" ? ["vertical", "horizontal"] : [orientation];
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		className,
+		style,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, { children: /* @__PURE__ */ jsx(ScrollArea$1.Content, { children }) }),
+			orientations.map((item) => /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+				orientation: item,
+				children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {})
+			}, item)),
+			/* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+		]
+	});
+}
+const ScrollArea = Object.assign(ScrollAreaFacade, {
+	...ScrollArea$1,
+	Root: ScrollAreaRoot
+});
 //#endregion
 export { ScrollArea };

package/dist/components/segment-group/index.d.mts

@@ -8,11 +8,37 @@ type SegmentGroupRootProps = ComponentProps<typeof SegmentGroup$1.Root> & {
    * height. */
   size?: "sm" | "md" | "lg";
 };
-declare function SegmentGroupRoot({ size, ...rest }: SegmentGroupRootProps): import("react").JSX.Element;
+declare function SegmentGroupRoot(props: SegmentGroupRootProps): import("react").JSX.Element;
+export type SegmentGroupItem = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+export interface SegmentGroupFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: SegmentGroupItem[];
+  label?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder for the segments. The
+   * family keeps its compact register, so the rungs sit one notch
+   * below the global ladder - the default md rests at the small
+   * height. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: string) => void;
+}
+declare function SegmentGroupFacade({ value, defaultValue, items, label, disabled, readOnly, orientation, size, className, onValueChange }: SegmentGroupFacadeProps): import("react").JSX.Element;
+declare namespace SegmentGroupFacade {
+  var displayName: string;
+}
 /** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
  * where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
  * ItemHiddenInput. */
-export declare const SegmentGroup: Omit<typeof SegmentGroup$1, "Root"> & {
+type SegmentGroupParts = Omit<typeof SegmentGroup$1, "Root"> & {
   Root: typeof SegmentGroupRoot;
 };
+export declare const SegmentGroup: typeof SegmentGroupFacade & SegmentGroupParts;
 //#endregion

package/dist/components/segment-group/index.mjs

@@ -1,20 +1,47 @@
-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 { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
 //#region src/components/segment-group/index.tsx
-function SegmentGroupRoot({ size = "md", ...rest }) {
+function SegmentGroupRoot(props) {
+	const id = useElementId("segment-group", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(SegmentGroup$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
-* where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
-* ItemHiddenInput. */
-const SegmentGroup = {
+function SegmentGroupFacade({ value, defaultValue, items, label, disabled = false, readOnly = false, orientation = "horizontal", size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(SegmentGroupRoot, {
+		className,
+		size,
+		orientation,
+		disabled,
+		readOnly,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value ?? ""),
+		children: [
+			label ? /* @__PURE__ */ jsx(SegmentGroup$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(SegmentGroup$1.Indicator, {}),
+			items.map((item) => /* @__PURE__ */ jsxs(SegmentGroup$1.Item, {
+				value: item.value,
+				disabled: item.disabled,
+				children: [
+					/* @__PURE__ */ jsx(SegmentGroup$1.ItemText, { children: item.label }),
+					/* @__PURE__ */ jsx(SegmentGroup$1.ItemControl, {}),
+					/* @__PURE__ */ jsx(SegmentGroup$1.ItemHiddenInput, {})
+				]
+			}, item.value))
+		]
+	});
+}
+SegmentGroupFacade.displayName = "SSegmentGroup";
+const SegmentGroup = Object.assign(SegmentGroupFacade, {
 	...SegmentGroup$1,
 	Root: SegmentGroupRoot
-};
+});
 injectComponentStyle("segment-group");
 //#endregion
 export { SegmentGroup };

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

@@ -1,2 +1,2 @@
-import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-Iy8m0Qev.mjs";
-export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };
+import { a as NativeSelectProps, i as NativeSelectOption, n as SelectFacadeProps, r as NativeSelect, t as Select } from "../../index-D_iKc2Uw.mjs";
+export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select, SelectFacadeProps };

package/dist/components/select/index.mjs

@@ -1,2 +1,2 @@
-import { n as NativeSelect, t as Select } from "../../select-eAHutw56.mjs";
+import { n as NativeSelect, t as Select } from "../../select-i9UZsQCU.mjs";
 export { NativeSelect, Select };

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

@@ -7,5 +7,8 @@ export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
   orientation?: "horizontal" | "vertical";
   decorative?: boolean;
 }
-export declare function Separator({ orientation, decorative, ...rest }: SeparatorProps): import("react").JSX.Element;
+declare function SeparatorImpl({ orientation, decorative, ...rest }: SeparatorProps): import("react").JSX.Element;
+export declare const Separator: typeof SeparatorImpl & {
+  Root: typeof SeparatorImpl;
+};
 //#endregion

package/dist/components/separator/index.mjs

@@ -1,7 +1,8 @@
-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/separator/index.tsx
-function Separator({ orientation = "horizontal", decorative = false, ...rest }) {
+function SeparatorImpl({ orientation = "horizontal", decorative = false, ...rest }) {
 	injectComponentStyle("separator");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -12,5 +13,6 @@ function Separator({ orientation = "horizontal", decorative = false, ...rest })
 		"aria-orientation": decorative ? void 0 : orientation
 	});
 }
+const Separator = withSelfRoot(SeparatorImpl);
 //#endregion
 export { Separator };

package/dist/components/signature-pad/index.d.mts

@@ -1,8 +1,28 @@
+import { ReactNode } from "react";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
 //#region src/components/signature-pad/index.d.ts
-/** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
- * field with a guide hairline where ink — real ink strokes — is laid down.
- * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
- * ClearTrigger, HiddenInput, Context. */
-export declare const SignaturePad: typeof SignaturePad$1;
+interface SignaturePadFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  label?: string;
+  /** Show the reset control. */
+  clearable?: boolean;
+  disabled?: boolean;
+  onValueChange?: (paths: string[]) => void;
+  children?: ReactNode;
+}
+/** The one-tag path: the paper, guide, clear control, and hidden form
+ * value; stroke previews and drawing events stay on the anatomy. */
+declare function SignaturePadFacade({ value, defaultValue, label, clearable, disabled, onValueChange }: SignaturePadFacadeProps): import("react").JSX.Element;
+export declare const SignaturePad: typeof SignaturePadFacade & {
+  Root: typeof SignaturePad$1.Root;
+  ClearTrigger: import("react").ForwardRefExoticComponent<SignaturePad$1.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Context: (props: SignaturePad$1.ContextProps) => ReactNode;
+  Control: import("react").ForwardRefExoticComponent<SignaturePad$1.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+  Guide: import("react").ForwardRefExoticComponent<SignaturePad$1.GuideProps & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<SignaturePad$1.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Label: import("react").ForwardRefExoticComponent<SignaturePad$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<SignaturePad$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+  Segment: import("react").ForwardRefExoticComponent<SignaturePad$1.SegmentProps & import("react").RefAttributes<SVGSVGElement>>;
+};
 //#endregion

package/dist/components/signature-pad/index.mjs

@@ -1,11 +1,45 @@
-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 { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
 //#region src/components/signature-pad/index.tsx
-/** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
+/** SignaturePad, dressed in the paper-and-ink system: a quiet paper
 * field with a guide hairline where ink — real ink strokes — is laid down.
-* The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
+* The parts — Root, Label, Control, Segment, SegmentPath, Guide,
 * ClearTrigger, HiddenInput, Context. */
-const SignaturePad = SignaturePad$1;
+function SignaturePadRoot(props) {
+	const id = useElementId("signature-pad", props);
+	return /* @__PURE__ */ jsx(SignaturePad$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path: the paper, guide, clear control, and hidden form
+* value; stroke previews and drawing events stay on the anatomy. */
+function SignaturePadFacade({ value, defaultValue, label, clearable = true, disabled = false, onValueChange }) {
+	return /* @__PURE__ */ jsxs(SignaturePadRoot, {
+		disabled,
+		defaultPaths: defaultValue,
+		...value === void 0 ? {} : {
+			paths: value,
+			onDraw: (details) => onValueChange?.(details.paths)
+		},
+		children: [
+			label ? /* @__PURE__ */ jsx(SignaturePad$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs(SignaturePad$1.Control, { children: [
+				/* @__PURE__ */ jsx(SignaturePad$1.Segment, {}),
+				clearable ? /* @__PURE__ */ jsx(SignaturePad$1.ClearTrigger, { children: iconNode("undo") }) : null,
+				/* @__PURE__ */ jsx(SignaturePad$1.Guide, {})
+			] }),
+			/* @__PURE__ */ jsx(SignaturePad$1.HiddenInput, { value: "" })
+		]
+	});
+}
+const SignaturePad = Object.assign(SignaturePadFacade, {
+	...SignaturePad$1,
+	Root: SignaturePadRoot
+});
 injectComponentStyle("signature-pad");
 //#endregion
 export { SignaturePad };

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

@@ -3,5 +3,8 @@ import { HTMLAttributes } from "react";
 /** A waiting sheet of unset paper. Size it from the outside; the breath
  * is the component's own. */
 export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
-export declare function Skeleton({ ...rest }: SkeletonProps): import("react").JSX.Element;
+declare function SkeletonImpl({ ...rest }: SkeletonProps): import("react").JSX.Element;
+export declare const Skeleton: typeof SkeletonImpl & {
+  Root: typeof SkeletonImpl;
+};
 //#endregion

package/dist/components/skeleton/index.mjs

@@ -1,7 +1,8 @@
-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/skeleton/index.tsx
-function Skeleton({ ...rest }) {
+function SkeletonImpl({ ...rest }) {
 	injectComponentStyle("skeleton");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -9,5 +10,6 @@ function Skeleton({ ...rest }) {
 		"data-part": "root"
 	});
 }
+const Skeleton = withSelfRoot(SkeletonImpl);
 //#endregion
 export { Skeleton };

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

@@ -5,12 +5,31 @@ type SliderRootProps = ComponentProps<typeof Slider$1.Root> & {
   /** One rung of the part-size ladder for the thumb seal. */
   size?: "sm" | "md" | "lg";
 };
-declare function SliderRoot({ size, ...rest }: SliderRootProps): import("react").JSX.Element;
+declare function SliderRoot(props: SliderRootProps): import("react").JSX.Element;
+export interface SliderFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  label?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the part-size ladder for the thumb seal. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: number) => void;
+}
+declare function SliderFacade({ value, defaultValue, label, min, max, step, disabled, orientation, size, className, onValueChange }: SliderFacadeProps): import("react").JSX.Element;
+declare namespace SliderFacade {
+  var displayName: string;
+}
 /** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
  * primary ink runs along, a paper-seal thumb, and hairline tick markers.
  * The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
  * Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
-export declare const Slider: Omit<typeof Slider$1, "Root"> & {
+type SliderParts = Omit<typeof Slider$1, "Root"> & {
   Root: typeof SliderRoot;
 };
+export declare const Slider: typeof SliderFacade & SliderParts;
 //#endregion

package/dist/components/slider/index.mjs

@@ -1,21 +1,44 @@
-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 { Slider as Slider$1 } from "@ark-ui/react/slider";
 //#region src/components/slider/index.tsx
-function SliderRoot({ size = "md", ...rest }) {
+function SliderRoot(props) {
+	const id = useElementId("slider", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Slider$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
-* primary ink runs along, a paper-seal thumb, and hairline tick markers.
-* The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
-* Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
-const Slider = {
+function SliderFacade({ value, defaultValue = 50, label, min = 0, max = 100, step = 1, disabled = false, orientation = "horizontal", size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(SliderRoot, {
+		className,
+		size,
+		disabled,
+		min,
+		max,
+		step,
+		orientation,
+		defaultValue: [defaultValue],
+		...value === void 0 ? {} : { value: [value] },
+		onValueChange: (details) => onValueChange?.(details.value.at(0) ?? min),
+		children: [
+			label ? /* @__PURE__ */ jsx(Slider$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Slider$1.ValueText, {}),
+			/* @__PURE__ */ jsxs(Slider$1.Control, { children: [/* @__PURE__ */ jsx(Slider$1.Track, { children: /* @__PURE__ */ jsx(Slider$1.Range, {}) }), /* @__PURE__ */ jsx(Slider$1.Thumb, {
+				index: 0,
+				children: /* @__PURE__ */ jsx(Slider$1.HiddenInput, {})
+			})] })
+		]
+	});
+}
+SliderFacade.displayName = "SSlider";
+const Slider = Object.assign(SliderFacade, {
 	...Slider$1,
 	Root: SliderRoot
-};
+});
 injectComponentStyle("slider");
 //#endregion
 export { Slider };

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 { injectComponentStyle } from "@bysages/core/styling";
 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,6 +1,9 @@
+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 { injectComponentStyle } from "@bysages/core";
+import { Menu as Menu$1 } from "../menu/index.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { Menu } from "@ark-ui/react/menu";
@@ -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 { injectComponentStyle } from "@bysages/core";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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