@bysages/react 0.3.0 → 0.4.0

package/dist/components/calendar/index.mjs

@@ -1,18 +1,14 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker } from "@ark-ui/react/date-picker";
 //#region src/components/calendar/index.tsx
 function chevron(dir) {
-	return /* @__PURE__ */ jsx("svg", {
+	return iconNode(dir === "left" ? "chevron-left" : "chevron-right", {
 		width: 16,
-		height: 16,
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 1.75,
-		"aria-hidden": true,
-		style: dir === "left" ? { transform: "rotate(180deg)" } : void 0,
-		children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" })
+		height: 16
 	});
 }
 /** The date-picker's month grid, standing on the page without its
@@ -20,9 +16,10 @@ function chevron(dir) {
 * title zooms out through month and year grids; the grids themselves
 * are the shared machinery — value, range selection, and focus ride
 * Ark's own contract. */
-function Calendar({ value, min, max, onValueChange, children, ...rest }) {
+function CalendarImpl({ value, min, max, onValueChange, children, ...rest }) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
+	const hostId = useElementId("calendar", rest);
 	const title = (dp) => {
 		const d = dp.focusedValue;
 		if (!d) return "";
@@ -48,6 +45,7 @@ function Calendar({ value, min, max, onValueChange, children, ...rest }) {
 		"data-scope": "calendar",
 		"data-part": "root",
 		children: [/* @__PURE__ */ jsxs(DatePicker.Root, {
+			id: `${hostId}:date-picker`,
 			open: true,
 			closeOnSelect: true,
 			inline: true,
@@ -92,5 +90,6 @@ function Calendar({ value, min, max, onValueChange, children, ...rest }) {
 		}), children]
 	});
 }
+const Calendar = Object.assign(CalendarImpl, DatePicker$1);
 //#endregion
 export { Calendar };

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

@@ -1,3 +1,4 @@
+import { CSSProperties, ComponentProps } from "react";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 //#region src/components/carousel/index.d.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -5,5 +6,24 @@ import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
  * current indicator alone carries the ink. The API is Ark's own — Root,
  * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
  * Indicator, AutoplayTrigger, ProgressText. */
-export declare const Carousel: typeof Carousel$1;
+declare function CarouselRoot(props: ComponentProps<typeof Carousel$1.Root>): import("react").JSX.Element;
+type CarouselSlide = string | {
+  label: string;
+};
+type CarouselFacadeProps = {
+  value?: number;
+  defaultValue?: number;
+  items: CarouselSlide[];
+  spacing?: string;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (page: number) => void;
+};
+/** The complete carousel behind a slide list: arrows, progress, items, and
+ * indicators use the common lane. Custom slides remain anatomy work. */
+declare function CarouselFacade(props: CarouselFacadeProps): import("react").JSX.Element;
+export declare const Carousel: typeof CarouselFacade & Omit<typeof Carousel$1, "Root"> & {
+  Root: typeof CarouselRoot;
+};
 //#endregion

package/dist/components/carousel/index.mjs

@@ -1,4 +1,7 @@
+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 { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 //#region src/components/carousel/index.tsx
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -6,7 +9,45 @@ import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
 * current indicator alone carries the ink. The API is Ark's own — Root,
 * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
 * Indicator, AutoplayTrigger, ProgressText. */
-const Carousel = Carousel$1;
-injectComponentStyle("carousel");
+function CarouselRoot(props) {
+	injectComponentStyle("carousel");
+	const id = useElementId("carousel", props);
+	return /* @__PURE__ */ jsx(Carousel$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete carousel behind a slide list: arrows, progress, items, and
+* indicators use the common lane. Custom slides remain anatomy work. */
+function CarouselFacade(props) {
+	const { value, defaultValue, items, spacing, label, className, style, onValueChange } = props;
+	const slides = items.map((item) => typeof item === "string" ? item : item.label);
+	return /* @__PURE__ */ jsxs(CarouselRoot, {
+		"aria-label": label,
+		slideCount: slides.length,
+		defaultPage: defaultValue,
+		page: value,
+		spacing,
+		className,
+		style,
+		onPageChange: (event) => onValueChange?.(event.page),
+		children: [
+			/* @__PURE__ */ jsxs(Carousel$1.Control, { children: [
+				/* @__PURE__ */ jsx(Carousel$1.PrevTrigger, { children: iconNode("chevron-left") }),
+				/* @__PURE__ */ jsx(Carousel$1.ProgressText, {}),
+				/* @__PURE__ */ jsx(Carousel$1.NextTrigger, { children: iconNode("chevron-right") })
+			] }),
+			/* @__PURE__ */ jsx(Carousel$1.ItemGroup, { children: slides.map((slide, index) => /* @__PURE__ */ jsx(Carousel$1.Item, {
+				index,
+				children: slide
+			}, index)) }),
+			/* @__PURE__ */ jsx(Carousel$1.IndicatorGroup, { children: slides.map((_, index) => /* @__PURE__ */ jsx(Carousel$1.Indicator, { index }, index)) })
+		]
+	});
+}
+const Carousel = Object.assign(CarouselFacade, {
+	...Carousel$1,
+	Root: CarouselRoot
+});
 //#endregion
 export { Carousel };

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

@@ -6,6 +6,8 @@ export interface CascadeSelectNode {
   children?: CascadeSelectNode[];
   disabled?: boolean;
 }
+/**
+
 /**
  * A corridor of linked columns: pick a branch and the next column
  * dissolves open beside it, until a leaf click settles the whole path.
@@ -27,5 +29,8 @@ export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
   size?: "sm" | "md" | "lg";
   onValueChange?: (value: string[][]) => void;
 }
-export declare function CascadeSelect({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+declare function CascadeSelectImpl({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, size, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+export declare const CascadeSelect: typeof CascadeSelectImpl & {
+  Root: typeof CascadeSelectImpl;
+};
 //#endregion

package/dist/components/cascade-select/index.mjs

@@ -1,46 +1,24 @@
-import { t as Input } from "../../input-2oezH-dY.mjs";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as Input } from "../../input-C21Zzuy6.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Portal } from "@ark-ui/react/portal";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
 import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/react";
 //#region src/components/cascade-select/index.tsx
-const chevronDown = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 2,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-});
-const chevronRight = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 2,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
-});
-const checkGlyph = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 3,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
-});
-function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
+const chevronDown = iconNode("chevron-down");
+const chevronRight = iconNode("chevron-right");
+const checkIcon = iconNode("check");
+function CascadeSelectImpl({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, size = "md", onValueChange, ...rest }) {
 	injectComponentStyle("cascade-select");
-	const id = useId();
+	const messages = useComponentMessages();
+	const id = useElementId("cascade-select", rest);
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
 	const collection = cascade.collection({
@@ -158,7 +136,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 						}) : null,
 						/* @__PURE__ */ jsx("span", {
 							...api.getItemIndicatorProps(itemProps),
-							children: checkGlyph
+							children: checkIcon
 						})
 					]
 				}, itemValue);
@@ -176,6 +154,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			...api.getControlProps(),
 			children: /* @__PURE__ */ jsxs("button", {
 				...api.getTriggerProps(),
+				"aria-labelledby": id + ":value-text",
 				onClick: (event) => {
 					api.getTriggerProps().onClick?.(event);
 					setQuery("");
@@ -183,6 +162,7 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 				disabled: disabled || void 0,
 				children: [/* @__PURE__ */ jsx("span", {
 					...api.getValueTextProps(),
+					id: id + ":value-text",
 					children: display || placeholder
 				}), /* @__PURE__ */ jsx("span", {
 					...api.getIndicatorProps(),
@@ -201,8 +181,8 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 						size: "sm",
 						value: query,
 						onValueChange: setQuery,
-						placeholder: "Filter…",
-						"aria-label": "Filter options"
+						placeholder: messages.select.filter,
+						"aria-label": messages.select.filter
 					})
 				}) : null, /* @__PURE__ */ jsx("div", {
 					"data-scope": "cascade-select",
@@ -225,5 +205,6 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 		}) })]
 	});
 }
+const CascadeSelect = withSelfRoot(CascadeSelectImpl);
 //#endregion
 export { CascadeSelect };

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

@@ -5,12 +5,30 @@ type CheckboxRootProps = ComponentProps<typeof Checkbox$1.Root> & {
   /** One rung for the control's box: the tick scales with it. */
   size?: "sm" | "md" | "lg";
 };
-declare function CheckboxRoot({ size, ...rest }: CheckboxRootProps): import("react").JSX.Element;
+declare function CheckboxRoot(props: CheckboxRootProps): import("react").JSX.Element;
+export interface CheckboxFacadeProps {
+  value?: boolean;
+  defaultValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** One rung for the control's box: the tick scales with it. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: boolean) => void;
+}
+declare function CheckboxFacade({ value, defaultValue, label, disabled, invalid, required, readOnly, size, className, onValueChange }: CheckboxFacadeProps): import("react").JSX.Element;
+declare namespace CheckboxFacade {
+  var displayName: string;
+}
 /** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
  * that fills flat with primary ink when ticked, the mark springing into
  * place. The API is Ark's own — Root, Label, Control, Indicator,
  * HiddenInput. */
-export declare const Checkbox: Omit<typeof Checkbox$1, "Root"> & {
+type CheckboxParts = Omit<typeof Checkbox$1, "Root"> & {
   Root: typeof CheckboxRoot;
 };
+export declare const Checkbox: typeof CheckboxFacade & CheckboxParts;
 //#endregion

package/dist/components/checkbox/index.mjs

@@ -1,21 +1,41 @@
+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 { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
 //#region src/components/checkbox/index.tsx
-function CheckboxRoot({ size = "md", ...rest }) {
+function CheckboxRoot(props) {
+	const id = useElementId("checkbox", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
-* that fills flat with primary ink when ticked, the mark springing into
-* place. The API is Ark's own — Root, Label, Control, Indicator,
-* HiddenInput. */
-const Checkbox = {
+function CheckboxFacade({ value, defaultValue = false, label, disabled = false, invalid = false, required = false, readOnly = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(CheckboxRoot, {
+		className,
+		size,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		defaultChecked: defaultValue,
+		...value === void 0 ? {} : { checked: value },
+		onCheckedChange: (details) => onValueChange?.(details.checked === true),
+		children: [
+			/* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: iconNode("check") }) }),
+			label ? /* @__PURE__ */ jsx(Checkbox$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
+		]
+	});
+}
+CheckboxFacade.displayName = "SCheckbox";
+const Checkbox = Object.assign(CheckboxFacade, {
 	...Checkbox$1,
 	Root: CheckboxRoot
-};
+});
 injectComponentStyle("checkbox");
 //#endregion
 export { Checkbox };

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

@@ -1,3 +1,4 @@
+import { Checkbox } from "../checkbox/index.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/checkbox-group/index.d.ts
 export interface CheckboxOption {
@@ -7,6 +8,7 @@ export interface CheckboxOption {
 }
 export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
   value?: string[];
+  defaultValue?: string[];
   options: CheckboxOption[];
   layout?: "vertical" | "horizontal";
   /** One register for every box: falls onto each root's data-size for
@@ -18,11 +20,11 @@ export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * One question, many answers: a labelled stack (or row) of the seal-cut
- * checkboxes bound to a single array. Toggling a box adds or removes its
- * value; the group itself is semantics (`role="group"`), the boxes stay
- * the machine-driven originals. Inside a `Field.Root` the group picks up
- * the field context, so the invalid and disabled states a Form routes to
- * its name dress every box at once.
+ * checkboxes bound to a single array. Ark's group owns selection, form
+ * wiring, and limits; the facade maps an options list onto it. Inside a
+ * `Field.Root` the group picks up the field context, so invalid and
+ * disabled states dress every box at once.
  */
-export declare function CheckboxGroup({ value, options, layout, size, invalid, disabled, onValueChange, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
+declare function CheckboxGroupImpl({ value, defaultValue, options, layout, size, invalid, disabled, onValueChange, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
+export declare const CheckboxGroup: typeof CheckboxGroupImpl & typeof Checkbox;
 //#endregion

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

@@ -1,65 +1,61 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 import { useFieldContext } from "@ark-ui/react/field";
 import { Checkbox } from "@ark-ui/react/checkbox";
 //#region src/components/checkbox-group/index.tsx
-const checkGlyph = /* @__PURE__ */ jsx("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 3,
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
-});
+const checkIcon = iconNode("check");
 /**
 * One question, many answers: a labelled stack (or row) of the seal-cut
-* checkboxes bound to a single array. Toggling a box adds or removes its
-* value; the group itself is semantics (`role="group"`), the boxes stay
-* the machine-driven originals. Inside a `Field.Root` the group picks up
-* the field context, so the invalid and disabled states a Form routes to
-* its name dress every box at once.
+* checkboxes bound to a single array. Ark's group owns selection, form
+* wiring, and limits; the facade maps an options list onto it. Inside a
+* `Field.Root` the group picks up the field context, so invalid and
+* disabled states dress every box at once.
 */
-function CheckboxGroup({ value = [], options, layout = "vertical", size = "md", invalid = false, disabled = false, onValueChange, ...rest }) {
+function CheckboxGroupImpl({ value, defaultValue, options, layout = "vertical", size = "md", invalid = false, disabled = false, onValueChange, ...rest }) {
 	injectComponentStyle("checkbox-group");
 	injectComponentStyle("checkbox");
 	const field = useFieldContext();
-	const uid = useId();
-	const selected = new Set(value);
+	const uid = useElementId("checkbox-group", rest);
 	const isInvalid = invalid || field?.invalid === true;
 	const isDisabled = disabled || field?.disabled === true;
-	function toggle(option) {
-		const next = new Set(selected);
-		if (next.has(option)) next.delete(option);
-		else next.add(option);
-		onValueChange?.([...next]);
-	}
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		role: "group",
-		"data-scope": "checkbox-group",
-		"data-part": "root",
-		"data-layout": layout,
-		"data-invalid": isInvalid ? "" : void 0,
-		children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox.Root, {
-			ids: {
-				label: `${uid}:${option.value}:label`,
-				hiddenInput: `${uid}:${option.value}:input`
-			},
-			"data-size": size,
-			checked: selected.has(option.value),
-			invalid: isInvalid,
-			disabled: isDisabled || option.disabled === true,
-			onCheckedChange: () => toggle(option.value),
-			children: [
-				/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkGlyph }) }),
-				/* @__PURE__ */ jsx(Checkbox.Label, { children: option.label }),
-				/* @__PURE__ */ jsx(Checkbox.HiddenInput, {})
-			]
-		}, option.value))
+	return /* @__PURE__ */ jsx(Checkbox.Group, {
+		asChild: true,
+		...isInvalid ? { invalid: true } : {},
+		...isDisabled ? { disabled: true } : {},
+		...defaultValue === void 0 ? {} : { defaultValue },
+		...value === void 0 ? {} : { value },
+		onValueChange,
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			id: uid,
+			"data-scope": "checkbox-group",
+			"data-part": "root",
+			"data-layout": layout,
+			"data-invalid": isInvalid ? "" : void 0,
+			children: options.map((option) => {
+				const checkboxId = `${uid}:checkbox:${option.value}`;
+				return /* @__PURE__ */ jsxs(Checkbox.Root, {
+					id: checkboxId,
+					value: option.value,
+					ids: {
+						label: `${checkboxId}:label`,
+						hiddenInput: `${checkboxId}:input`
+					},
+					"data-size": size,
+					disabled: isDisabled || option.disabled === true,
+					children: [
+						/* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkIcon }) }),
+						/* @__PURE__ */ jsx(Checkbox.Label, { children: option.label }),
+						/* @__PURE__ */ jsx(Checkbox.HiddenInput, {})
+					]
+				}, option.value);
+			})
+		})
 	});
 }
+const CheckboxGroup = Object.assign(CheckboxGroupImpl, Checkbox$1);
 //#endregion
 export { CheckboxGroup };

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

@@ -8,5 +8,8 @@ export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
   tone?: "ink" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "subtle" | "outline";
 }
-export declare function Chip({ value, max, tone, variant, ...rest }: ChipProps): import("react").JSX.Element;
+declare function ChipImpl({ value, max, tone, variant, ...rest }: ChipProps): import("react").JSX.Element;
+export declare const Chip: typeof ChipImpl & {
+  Root: typeof ChipImpl;
+};
 //#endregion

package/dist/components/chip/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/chip/index.tsx
-function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
+function ChipImpl({ value, max, tone = "ink", variant = "solid", ...rest }) {
 	injectComponentStyle("chip");
 	const text = max != null && value > max ? `${max}+` : String(value);
 	return /* @__PURE__ */ jsx("span", {
@@ -13,5 +14,6 @@ function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
 		children: text
 	});
 }
+const Chip = withSelfRoot(ChipImpl);
 //#endregion
 export { Chip };

package/dist/components/client-only/index.d.mts

@@ -1,2 +1,7 @@
-import { ClientOnly, ClientOnlyProps } from "@ark-ui/react/client-only";
-export { ClientOnly, type ClientOnlyProps };
+import { ClientOnlyProps } from "@ark-ui/react/client-only";
+//#region src/components/client-only/index.d.ts
+export declare const ClientOnly: ((props: import("@ark-ui/react/client-only").ClientOnlyProps) => React.ReactNode) & {
+  Root: (props: import("@ark-ui/react/client-only").ClientOnlyProps) => React.ReactNode;
+};
+//#endregion
+export type { ClientOnlyProps };

package/dist/components/client-only/index.mjs

@@ -1,2 +1,6 @@
-import { ClientOnly } from "@ark-ui/react/client-only";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { ClientOnly as ClientOnly$1 } from "@ark-ui/react/client-only";
+//#region src/components/client-only/index.tsx
+const ClientOnly = withSelfRoot(ClientOnly$1);
+//#endregion
 export { ClientOnly };

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

@@ -1,17 +1,30 @@
-import { ComponentProps } from "react";
+import { CSSProperties, ComponentProps, HTMLAttributes } from "react";
 import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
 //#region src/components/clipboard/index.d.ts
 /** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
  * field beside an icon-sized copy trigger whose ink turns bamboo while the
  * copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
  * Trigger, Indicator, Context, HiddenInput. */
-type ClipboardRootProps = ComponentProps<typeof Clipboard$1.Root> & {
+type ClipboardRootProps = ComponentProps<typeof Clipboard$1.Root> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
   /** One rung of the control-height ladder for the value field and
    * its copy seal. */
   size?: "sm" | "md" | "lg";
 };
-declare function ClipboardRoot({ size, ...rest }: ClipboardRootProps): import("react").JSX.Element;
-export declare const Clipboard: Omit<typeof Clipboard$1, "Root"> & {
+declare function ClipboardRoot(props: ClipboardRootProps): import("react").JSX.Element;
+type ClipboardFacadeProps = {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: string) => void;
+};
+/** The complete copy field behind one value: a labelled read-only input and
+ * its confirmed copy trigger. */
+declare function ClipboardFacade(props: ClipboardFacadeProps): import("react").JSX.Element;
+export declare const Clipboard: typeof ClipboardFacade & Omit<typeof Clipboard$1, "Root"> & {
   Root: typeof ClipboardRoot;
 };
 //#endregion

package/dist/components/clipboard/index.mjs

@@ -1,17 +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 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
 //#region src/components/clipboard/index.tsx
-function ClipboardRoot({ size = "md", ...rest }) {
+function ClipboardRoot(props) {
+	injectComponentStyle("clipboard");
+	const id = useElementId("clipboard", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Clipboard$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-const Clipboard = {
+/** The complete copy field behind one value: a labelled read-only input and
+* its confirmed copy trigger. */
+function ClipboardFacade(props) {
+	const { value, defaultValue, label, placeholder, size = "md", className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsxs(ClipboardRoot, {
+		size,
+		defaultValue,
+		value,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(event.value),
+		children: [label ? /* @__PURE__ */ jsx(Clipboard$1.Label, { children: label }) : null, /* @__PURE__ */ jsxs(Clipboard$1.Control, { children: [/* @__PURE__ */ jsx(Clipboard$1.Input, { placeholder }), /* @__PURE__ */ jsx(Clipboard$1.Trigger, { children: /* @__PURE__ */ jsx(Clipboard$1.Indicator, {
+			copied: iconNode("check", {
+				width: 14,
+				height: 14
+			}),
+			children: iconNode("copy", {
+				width: 14,
+				height: 14
+			})
+		}) })] })]
+	});
+}
+const Clipboard = Object.assign(ClipboardFacade, {
 	...Clipboard$1,
 	Root: ClipboardRoot
-};
-injectComponentStyle("clipboard");
+});
 //#endregion
 export { Clipboard };

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

@@ -1,7 +1,19 @@
+import { ReactNode } from "react";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
 //#region src/components/collapsible/index.d.ts
-/** Ark's Collapsible, dressed in the paper-and-ink system: one control on
- * the paper, its panel dissolving open to the machine's measured height.
- * The API is Ark's own — Root, Trigger, Content, Indicator. */
-export declare const Collapsible: typeof Collapsible$1;
+export interface CollapsibleFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  label: string;
+  disabled?: boolean;
+  className?: string;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function CollapsibleFacade({ open, defaultOpen, label, disabled, className, children, onOpenChange }: CollapsibleFacadeProps): import("react").JSX.Element;
+declare namespace CollapsibleFacade {
+  var displayName: string;
+}
+type CollapsibleParts = typeof Collapsible$1;
+export declare const Collapsible: typeof CollapsibleFacade & CollapsibleParts;
 //#endregion