@bysages/react 0.3.1 → 0.4.0

package/dist/components/qr-code/index.mjs

@@ -1,11 +1,35 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
 import { QrCode as QrCode$1 } from "@ark-ui/react/qr-code";
 //#region src/components/qr-code/index.tsx
 /** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
 * ink on the page, with an optional paper badge and a seal-cut download
 * control. The API is Ark's own — Root, Frame, Pattern, Overlay,
 * DownloadTrigger. */
-const QrCode = QrCode$1;
-injectComponentStyle("qr-code");
+function QrCodeRoot(props) {
+	injectComponentStyle("qr-code");
+	const id = useElementId("qr-code", props);
+	return /* @__PURE__ */ jsx(QrCode$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete printable code behind one payload. */
+function QrCodeFacade(props) {
+	const { value, defaultValue, className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsx(QrCodeRoot, {
+		defaultValue,
+		value,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(event.value),
+		children: /* @__PURE__ */ jsx(QrCode$1.Frame, { children: /* @__PURE__ */ jsx(QrCode$1.Pattern, {}) })
+	});
+}
+const QrCode = Object.assign(QrCodeFacade, {
+	...QrCode$1,
+	Root: QrCodeRoot
+});
 //#endregion
 export { QrCode };

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

@@ -5,12 +5,37 @@ type RadioGroupRootProps = ComponentProps<typeof RadioGroup$1.Root> & {
   /** One rung for the dial; the chosen dot rides it. */
   size?: "sm" | "md" | "lg";
 };
-declare function RadioGroupRoot({ size, ...rest }: RadioGroupRootProps): import("react").JSX.Element;
+declare function RadioGroupRoot(props: RadioGroupRootProps): import("react").JSX.Element;
+export type RadioGroupItem = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+export interface RadioGroupFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: RadioGroupItem[];
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung for the dial; the chosen dot rides it. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: string) => void;
+}
+declare function RadioGroupFacade({ value, defaultValue, items, label, disabled, invalid, required, readOnly, orientation, size, className, onValueChange }: RadioGroupFacadeProps): import("react").JSX.Element;
+declare namespace RadioGroupFacade {
+  var displayName: string;
+}
 /** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
  * full-circle seals that fill flat with primary ink when chosen, the dot
  * punched through as paper. The API is Ark's own — Root, Label, Item,
  * ItemText, ItemControl, Indicator, ItemHiddenInput. */
-export declare const RadioGroup: Omit<typeof RadioGroup$1, "Root"> & {
+type RadioGroupParts = Omit<typeof RadioGroup$1, "Root"> & {
   Root: typeof RadioGroupRoot;
 };
+export declare const RadioGroup: typeof RadioGroupFacade & RadioGroupParts;
 //#endregion

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

@@ -1,21 +1,45 @@
+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 { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
 //#region src/components/radio-group/index.tsx
-function RadioGroupRoot({ size = "md", ...rest }) {
+function RadioGroupRoot(props) {
+	const id = useElementId("radio-group", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(RadioGroup$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
-* full-circle seals that fill flat with primary ink when chosen, the dot
-* punched through as paper. The API is Ark's own — Root, Label, Item,
-* ItemText, ItemControl, Indicator, ItemHiddenInput. */
-const RadioGroup = {
+function RadioGroupFacade({ value, defaultValue, items, label, disabled = false, invalid = false, required = false, readOnly = false, orientation = "vertical", size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(RadioGroupRoot, {
+		className,
+		size,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		orientation,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value ?? ""),
+		children: [label ? /* @__PURE__ */ jsx(RadioGroup$1.Label, { children: label }) : null, items.map((item) => /* @__PURE__ */ jsxs(RadioGroup$1.Item, {
+			value: item.value,
+			disabled: item.disabled,
+			children: [
+				/* @__PURE__ */ jsx(RadioGroup$1.ItemControl, {}),
+				/* @__PURE__ */ jsx(RadioGroup$1.ItemText, { children: item.label }),
+				/* @__PURE__ */ jsx(RadioGroup$1.ItemHiddenInput, {})
+			]
+		}, item.value))]
+	});
+}
+RadioGroupFacade.displayName = "SRadioGroup";
+const RadioGroup = Object.assign(RadioGroupFacade, {
 	...RadioGroup$1,
 	Root: RadioGroupRoot
-};
+});
 injectComponentStyle("radio-group");
 //#endregion
 export { RadioGroup };

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

@@ -5,12 +5,29 @@ type RatingGroupRootProps = ComponentProps<typeof RatingGroup$1.Root> & {
   /** One rung of the control-height ladder every seal stands on. */
   size?: "sm" | "md" | "lg";
 };
-declare function RatingGroupRoot({ size, ...rest }: RatingGroupRootProps): import("react").JSX.Element;
+declare function RatingGroupRoot(props: RatingGroupRootProps): import("react").JSX.Element;
+export interface RatingGroupFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  label?: string;
+  count?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** One rung of the control-height ladder every seal stands on. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: number) => void;
+}
+declare function RatingGroupFacade({ value, defaultValue, label, count, disabled, readOnly, size, className, onValueChange }: RatingGroupFacadeProps): import("react").JSX.Element;
+declare namespace RatingGroupFacade {
+  var displayName: string;
+}
 /** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
- * seals whose glyphs take the primary pigment as they light up. The API is
+ * seals whose icons take the primary pigment as they light up. The API is
  * Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
  * ItemContext render helpers). */
-export declare const RatingGroup: Omit<typeof RatingGroup$1, "Root"> & {
+type RatingGroupParts = Omit<typeof RatingGroup$1, "Root"> & {
   Root: typeof RatingGroupRoot;
 };
+export declare const RatingGroup: typeof RatingGroupFacade & RatingGroupParts;
 //#endregion

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

@@ -1,21 +1,39 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+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 { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
 //#region src/components/rating-group/index.tsx
-function RatingGroupRoot({ size = "md", ...rest }) {
+function RatingGroupRoot(props) {
+	const id = useElementId("rating-group", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(RatingGroup$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
-* seals whose glyphs take the primary pigment as they light up. The API is
-* Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
-* ItemContext render helpers). */
-const RatingGroup = {
+function RatingGroupFacade({ value, defaultValue = 0, label, count = 5, disabled = false, readOnly = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(RatingGroupRoot, {
+		className,
+		size,
+		count,
+		disabled,
+		readOnly,
+		defaultValue,
+		...value === void 0 ? {} : { value },
+		onValueChange: (details) => onValueChange?.(details.value ?? 0),
+		children: [label ? /* @__PURE__ */ jsx(RatingGroup$1.Label, { children: label }) : null, /* @__PURE__ */ jsxs(RatingGroup$1.Control, { children: [/* @__PURE__ */ jsx(RatingGroup$1.Context, { children: (api) => api.items.map((item) => /* @__PURE__ */ jsx(RatingGroup$1.Item, {
+			index: item,
+			children: iconNode("star")
+		}, item)) }), /* @__PURE__ */ jsx(RatingGroup$1.HiddenInput, {})] })]
+	});
+}
+RatingGroupFacade.displayName = "SRatingGroup";
+const RatingGroup = Object.assign(RatingGroupFacade, {
 	...RatingGroup$1,
 	Root: RatingGroupRoot
-};
+});
 injectComponentStyle("rating-group");
 //#endregion
 export { RatingGroup };

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

@@ -15,7 +15,7 @@ export declare function ResultIcon({ children, ...rest }: HTMLAttributes<HTMLDiv
 /** 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. */
-export declare const Result: {
+export declare const Result: typeof ResultRoot & {
   Root: typeof ResultRoot;
   Icon: typeof ResultIcon;
   Title: ({ children, ...rest }: HTMLAttributes<HTMLElement> & {

package/dist/components/result/index.mjs

@@ -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 { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+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 { 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 { 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-ozUFq0zd.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 { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 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 { 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 { 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 { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 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 { 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 { 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 };