@bysages/solid 0.3.0 → 0.4.0

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

@@ -1,32 +1,33 @@
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as Input } from "../../input-CPAJdwDb.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
-import { For, Show, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { For, Show, createMemo, createSignal, mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { useEnvironmentContext } from "@ark-ui/solid/environment";
 import { useFilter, useLocaleContext } from "@ark-ui/solid/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 //#region src/components/cascade-select/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<ul>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<span data-scope=cascade-select data-part=branch-indicator aria-hidden=true>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<li><span></span><span>`);
-var _tmpl$7 = /* @__PURE__ */ template(`<div data-scope=cascade-select data-part=search>`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div><div><div data-scope=cascade-select data-part=corridor>`);
-var _tmpl$9 = /* @__PURE__ */ template(`<div><div><button><span></span><span>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<p data-scope=cascade-select data-part=empty>Nothing matches`);
-var _tmpl$11 = /* @__PURE__ */ template(`<button type=button data-scope=cascade-select data-part=match>`);
+var _tmpl$ = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=cascade-select data-part=branch-indicator aria-hidden=true>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<li><span></span><span>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=cascade-select data-part=search>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><div><div data-scope=cascade-select data-part=corridor>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><div><button><span></span><span>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<p data-scope=cascade-select data-part=empty>Nothing matches`);
+var _tmpl$8 = /* @__PURE__ */ template(`<button type=button data-scope=cascade-select data-part=match>`);
 function chevronDown() {
-	return _tmpl$();
+	return iconNode("chevron-down");
 }
 function chevronRight() {
-	return _tmpl$2();
+	return iconNode("chevron-right");
 }
-function checkGlyph() {
-	return _tmpl$3();
+function checkIcon() {
+	return iconNode("check");
 }
 /**
 * A corridor of linked columns: pick a branch and the next column
@@ -37,7 +38,8 @@ function checkGlyph() {
 * swaps the corridor for a flat list of matching paths while a query
 * runs — each hit still reads as its full route.
 */
-function CascadeSelect(props) {
+const CascadeSelect = withSelfRoot(function CascadeSelect(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("cascade-select");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -47,10 +49,11 @@ function CascadeSelect(props) {
 		"filterable",
 		"multiple",
 		"disabled",
+		"id",
 		"size",
 		"onValueChange"
 	]);
-	const id = createUniqueId();
+	const id = useElementId("cascade-select", () => own.id)();
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
 	const collection = createMemo(() => cascade.collection({
@@ -141,11 +144,11 @@ function CascadeSelect(props) {
 		};
 		const nodeState = () => api().getItemState(nodeProps);
 		const children = collection().getNodeChildren(node);
-		var _el$4 = _tmpl$4();
-		spread(_el$4, () => {
+		var _el$ = _tmpl$();
+		spread(_el$, () => {
 			return mergeProps$1(() => api().getListProps(nodeProps));
 		}, true);
-		insert(_el$4, createComponent(For, {
+		insert(_el$, createComponent(For, {
 			each: children,
 			children: (item, index) => {
 				const itemValue = collection().getNodeValue(item);
@@ -155,45 +158,45 @@ function CascadeSelect(props) {
 					value: [...valuePath, itemValue]
 				};
 				const itemState = () => api().getItemState(itemProps);
-				var _el$5 = _tmpl$6();
-				var _el$6 = _el$5.firstChild;
-				var _el$8 = _el$6.nextSibling;
-				spread(_el$5, () => {
+				var _el$2 = _tmpl$3();
+				var _el$3 = _el$2.firstChild;
+				var _el$5 = _el$3.nextSibling;
+				spread(_el$2, () => {
 					return mergeProps$1(() => api().getItemProps(itemProps));
 				}, true);
-				spread(_el$6, () => {
+				spread(_el$3, () => {
 					return mergeProps$1(() => api().getItemTextProps(itemProps));
 				}, true);
-				insert(_el$6, () => {
+				insert(_el$3, () => {
 					return item.label;
 				});
-				insert(_el$5, createComponent(Show, {
+				insert(_el$2, createComponent(Show, {
 					get when() {
 						return itemState().hasChildren;
 					},
 					get children() {
-						var _el$7 = _tmpl$5();
-						insert(_el$7, chevronRight);
-						return _el$7;
+						var _el$4 = _tmpl$2();
+						insert(_el$4, chevronRight);
+						return _el$4;
 					}
-				}), _el$8);
-				spread(_el$8, () => {
+				}), _el$5);
+				spread(_el$5, () => {
 					return mergeProps$1(() => api().getItemIndicatorProps(itemProps));
 				}, true);
-				insert(_el$8, checkGlyph);
-				return _el$5;
+				insert(_el$5, checkIcon);
+				return _el$2;
 			}
 		}));
-		const list = _el$4;
+		const list = _el$;
 		const next = nodeState().highlightedChild;
 		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
 	}
-	var _el$9 = _tmpl$9();
-	var _el$10 = _el$9.firstChild;
-	var _el$11 = _el$10.firstChild;
-	var _el$12 = _el$11.firstChild;
-	var _el$13 = _el$12.nextSibling;
-	spread(_el$9, [
+	var _el$6 = _tmpl$6();
+	var _el$7 = _el$6.firstChild;
+	var _el$8 = _el$7.firstChild;
+	var _el$9 = _el$8.firstChild;
+	var _el$10 = _el$9.nextSibling;
+	spread(_el$6, [
 		rest,
 		() => {
 			return mergeProps$1(() => api().getRootProps());
@@ -202,11 +205,12 @@ function CascadeSelect(props) {
 			return own.size ?? "md";
 		} }
 	], true);
-	spread(_el$10, () => {
+	spread(_el$7, () => {
 		return mergeProps$1(() => api().getControlProps());
 	}, true);
-	spread(_el$11, () => {
+	spread(_el$8, () => {
 		return mergeProps$1(() => api().getTriggerProps(), {
+			"aria-labelledby": id + ":value-text",
 			get disabled() {
 				return own.disabled || void 0;
 			},
@@ -216,47 +220,51 @@ function CascadeSelect(props) {
 			}
 		});
 	}, true);
-	spread(_el$12, () => {
-		return mergeProps$1(() => api().getValueTextProps());
+	spread(_el$9, () => {
+		return mergeProps$1(() => api().getValueTextProps(), { id: `${id}:value-text` });
 	}, true);
-	insert(_el$12, () => {
+	insert(_el$9, () => {
 		return display() ?? own.placeholder ?? "Select…";
 	});
-	spread(_el$13, () => {
+	spread(_el$10, () => {
 		return mergeProps$1(() => api().getIndicatorProps());
 	}, true);
-	insert(_el$13, chevronDown);
-	insert(_el$9, createComponent(Portal, { get children() {
-		var _el$14 = _tmpl$8();
-		var _el$15 = _el$14.firstChild;
-		var _el$17 = _el$15.firstChild;
-		spread(_el$14, () => {
+	insert(_el$10, chevronDown);
+	insert(_el$6, createComponent(Portal, { get children() {
+		var _el$11 = _tmpl$5();
+		var _el$12 = _el$11.firstChild;
+		var _el$14 = _el$12.firstChild;
+		spread(_el$11, () => {
 			return mergeProps$1(() => api().getPositionerProps());
 		}, true);
-		spread(_el$15, [() => {
+		spread(_el$12, [() => {
 			return mergeProps$1(() => api().getContentProps());
 		}, { get "data-size"() {
 			return own.size ?? "md";
 		} }], true);
-		insert(_el$15, createComponent(Show, {
+		insert(_el$12, createComponent(Show, {
 			get when() {
 				return own.filterable;
 			},
 			get children() {
-				var _el$16 = _tmpl$7();
-				insert(_el$16, createComponent(Input, {
+				var _el$13 = _tmpl$4();
+				insert(_el$13, createComponent(Input, {
 					size: "sm",
 					get value() {
 						return query();
 					},
 					onValueChange: setQuery,
-					placeholder: "Filter…",
-					"aria-label": "Filter options"
+					get placeholder() {
+						return messages().select.filter;
+					},
+					get "aria-label"() {
+						return messages().select.filter;
+					}
 				}));
-				return _el$16;
+				return _el$13;
 			}
-		}), _el$17);
-		insert(_el$17, createComponent(Show, {
+		}), _el$14);
+		insert(_el$14, createComponent(Show, {
 			get when() {
 				return !filtering();
 			},
@@ -266,7 +274,7 @@ function CascadeSelect(props) {
 						return matchPaths().length > 0;
 					},
 					get fallback() {
-						return _tmpl$10();
+						return _tmpl$7();
 					},
 					get children() {
 						return createComponent(For, {
@@ -274,15 +282,15 @@ function CascadeSelect(props) {
 								return matchPaths();
 							},
 							children: (hit) => (() => {
-								var _el$19 = _tmpl$11();
-								_el$19._$$click = () => pickMatch(hit.path);
-								insert(_el$19, () => {
+								var _el$16 = _tmpl$8();
+								_el$16._$$click = () => pickMatch(hit.path);
+								insert(_el$16, () => {
 									return hit.labels.join(" / ");
 								});
 								effect(() => isSelected(hit.path) || void 0, (_v$) => {
-									setAttribute(_el$19, "data-selected", _v$);
+									setAttribute(_el$16, "data-selected", _v$);
 								});
-								return _el$19;
+								return _el$16;
 							})()
 						});
 					}
@@ -293,12 +301,12 @@ function CascadeSelect(props) {
 			}
 		}));
 		effect(() => filtering() ? "flat" : "columns", (_v$) => {
-			setAttribute(_el$17, "data-flow", _v$);
+			setAttribute(_el$14, "data-flow", _v$);
 		});
-		return _el$14;
+		return _el$11;
 	} }), null);
-	return _el$9;
-}
+	return _el$6;
+});
 delegateEvents(["click"]);
 //#endregion
 export { CascadeSelect };

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

@@ -9,7 +9,7 @@ type CheckboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function CheckboxRoot(props: CheckboxRootProps & CheckboxOwnProps): import("solid-js").JSX.Element;
-export declare const Checkbox: Omit<typeof Checkbox$1, "Root"> & {
+export declare const Checkbox: typeof CheckboxRoot & Omit<typeof Checkbox$1, "Root"> & {
   Root: typeof CheckboxRoot;
 };
 //#endregion

package/dist/components/checkbox/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { Checkbox as Checkbox$1 } from "@ark-ui/solid/checkbox";
 //#region src/components/checkbox/index.tsx
 function CheckboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Checkbox$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("checkbox", () => rest.id);
+	return createComponent(Checkbox$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Checkbox = {
+const Checkbox = defineFamily(CheckboxRoot, {
 	...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 { JSX } from "solid-js";
 //#region src/components/checkbox-group/index.d.ts
 export interface CheckboxOption {
@@ -7,6 +8,7 @@ export interface CheckboxOption {
 }
 export interface CheckboxGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
   value?: string[];
+  defaultValue?: string[];
   options: CheckboxOption[];
   layout?: "vertical" | "horizontal";
   /** One register for every box: falls onto each root's data-size for
@@ -16,13 +18,6 @@ export interface CheckboxGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   onValueChange?: (value: string[]) => void;
 }
-/**
- * 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.
- */
-export declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+declare function CheckboxGroupImpl(props: CheckboxGroupProps): JSX.Element;
+export declare const CheckboxGroup: typeof CheckboxGroupImpl & typeof Checkbox;
 //#endregion

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

@@ -1,29 +1,24 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, spread, template } from "@solidjs/web";
-import { For, createUniqueId, splitProps } from "solid-js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { For, splitProps } from "solid-js";
 import { useFieldContext } from "@ark-ui/solid/field";
 import { Checkbox } from "@ark-ui/solid/checkbox";
 //#region src/components/checkbox-group/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
-function checkGlyph() {
-	return _tmpl$();
+function checkIcon() {
+	return 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.
-*/
-function CheckboxGroup(props) {
+function CheckboxGroupImpl(props) {
 	injectComponentStyle("checkbox-group");
 	injectComponentStyle("checkbox");
 	const field = useFieldContext();
-	const uid = createUniqueId();
 	const [own, rest] = splitProps(props, [
+		"id",
 		"value",
+		"defaultValue",
 		"options",
 		"layout",
 		"size",
@@ -31,67 +26,69 @@ function CheckboxGroup(props) {
 		"disabled",
 		"onValueChange"
 	]);
-	const selected = () => new Set(own.value ?? []);
+	const id = useElementId("checkbox-group", () => own.id);
+	const selectedValue = own.value === void 0 ? void 0 : () => own.value;
 	const isInvalid = () => own.invalid || field?.().invalid === true;
 	const isDisabled = () => own.disabled || field?.().disabled === true;
-	function toggle(value) {
-		const next = new Set(selected());
-		if (next.has(value)) next.delete(value);
-		else next.add(value);
-		own.onValueChange?.([...next]);
-	}
-	var _el$2 = _tmpl$2();
-	spread(_el$2, [rest, {
-		role: "group",
-		"data-scope": "checkbox-group",
-		"data-part": "root",
+	return createComponent(Checkbox.Group, mergeProps(rest, { get id() {
+		return id();
+	} }, selectedValue === void 0 ? {} : { value: selectedValue }, () => {
+		return own.defaultValue === void 0 ? {} : { defaultValue: own.defaultValue };
+	}, {
+		get disabled() {
+			return isDisabled();
+		},
+		get invalid() {
+			return isInvalid();
+		},
+		get onValueChange() {
+			return own.onValueChange;
+		},
 		get "data-layout"() {
 			return own.layout ?? "vertical";
 		},
 		get "data-invalid"() {
 			return isInvalid() ? "" : void 0;
-		}
-	}], true);
-	insert(_el$2, createComponent(For, {
-		get each() {
-			return own.options;
 		},
-		children: (option) => createComponent(Checkbox.Root, {
-			get ids() {
-				return {
-					label: `${uid}:${option.value}:label`,
-					hiddenInput: `${uid}:${option.value}:input`
-				};
-			},
-			get checked() {
-				return selected().has(option.value);
-			},
-			get "data-size"() {
-				return own.size ?? "md";
-			},
-			get invalid() {
-				return isInvalid();
-			},
-			get disabled() {
-				return isDisabled() || option.disabled === true;
-			},
-			onCheckedChange: () => toggle(option.value),
-			get children() {
-				return [
-					createComponent(Checkbox.Control, { get children() {
-						return createComponent(Checkbox.Indicator, { get children() {
-							return checkGlyph();
-						} });
-					} }),
-					createComponent(Checkbox.Label, { get children() {
-						return option.label;
-					} }),
-					createComponent(Checkbox.HiddenInput, {})
-				];
-			}
-		})
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return own.options;
+				},
+				children: (option) => createComponent(Checkbox.Root, {
+					get value() {
+						return option.value;
+					},
+					get ids() {
+						return {
+							label: `${id()}:${option.value}:label`,
+							hiddenInput: `${id()}:${option.value}:input`
+						};
+					},
+					get "data-size"() {
+						return own.size ?? "md";
+					},
+					get disabled() {
+						return option.disabled === true;
+					},
+					get children() {
+						return [
+							createComponent(Checkbox.Control, { get children() {
+								return createComponent(Checkbox.Indicator, { get children() {
+									return checkIcon();
+								} });
+							} }),
+							createComponent(Checkbox.Label, { get children() {
+								return option.label;
+							} }),
+							createComponent(Checkbox.HiddenInput, {})
+						];
+					}
+				})
+			});
+		}
 	}));
-	return _el$2;
 }
+const CheckboxGroup = defineFamily(CheckboxGroupImpl, Checkbox$1);
 //#endregion
 export { CheckboxGroup };

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

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

package/dist/components/chip/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { insert, memo, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/chip/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-function Chip(props) {
+const Chip = withSelfRoot(function Chip(props) {
 	injectComponentStyle("chip");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -31,6 +32,6 @@ function Chip(props) {
 		};
 	})());
 	return _el$;
-}
+});
 //#endregion
 export { Chip };

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

@@ -1,2 +1,7 @@
-import { ClientOnly, ClientOnlyProps } from "@ark-ui/solid/client-only";
-export { ClientOnly, type ClientOnlyProps };
+import { ClientOnly as ClientOnly$1, ClientOnlyProps } from "@ark-ui/solid/client-only";
+//#region src/components/client-only/index.d.ts
+export declare const ClientOnly: typeof ClientOnly$1 & {
+  Root: typeof ClientOnly$1;
+};
+//#endregion
+export type { ClientOnlyProps };

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

@@ -1,2 +1,9 @@
-import { ClientOnly } from "@ark-ui/solid/client-only";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { ClientOnly as ClientOnly$1 } from "@ark-ui/solid/client-only";
+//#region src/components/client-only/index.ts
+/** Render children on the client only, after hydration — the escape
+* hatch for browser-only widgets inside server-rendered pages. Headless,
+* like the rest of Ark's utilities: no visual layer of our own. */
+const ClientOnly = withSelfRoot(ClientOnly$1);
+//#endregion
 export { ClientOnly };

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

@@ -10,7 +10,7 @@ type ClipboardOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ClipboardRoot(props: ClipboardRootProps & ClipboardOwnProps): import("solid-js").JSX.Element;
-export declare const Clipboard: Omit<typeof Clipboard$1, "Root"> & {
+export declare const Clipboard: typeof ClipboardRoot & Omit<typeof Clipboard$1, "Root"> & {
   Root: typeof ClipboardRoot;
 };
 //#endregion

package/dist/components/clipboard/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -6,14 +8,20 @@ import { Clipboard as Clipboard$1 } from "@ark-ui/solid/clipboard";
 const ArkRoot = Clipboard$1.Root;
 function ClipboardRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("clipboard", () => rest.id);
+	return createComponent(ArkRoot, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Clipboard = {
+const Clipboard = defineFamily(ClipboardRoot, {
 	...Clipboard$1,
 	Root: ClipboardRoot
-};
+});
 injectComponentStyle("clipboard");
 //#endregion
 export { Clipboard };

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

@@ -1,7 +1,21 @@
+import { ComponentProps, JSX } from "solid-js";
 import { Collapsible as Collapsible$1 } from "@ark-ui/solid/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;
+declare function CollapsibleRoot(props: ComponentProps<typeof Collapsible$1.Root>): JSX.Element;
+export interface CollapsibleFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  label: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function CollapsibleFacade(props: CollapsibleFacadeProps): JSX.Element;
+type CollapsibleParts = Omit<typeof Collapsible$1, "Root"> & {
+  Root: typeof CollapsibleRoot;
+};
+export declare const Collapsible: typeof CollapsibleFacade & CollapsibleParts;
 //#endregion