@bysages/solid 0.3.1 → 0.4.0

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

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

package/dist/components/pagination/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 { Pagination as Pagination$1 } from "@ark-ui/solid/pagination";
 //#region src/components/pagination/index.tsx
 function PaginationRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Pagination$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("pagination", () => rest.id);
+	return createComponent(Pagination$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Pagination = {
+const Pagination = defineFamily(PaginationRoot, {
 	...Pagination$1,
 	Root: PaginationRoot
-};
+});
 injectComponentStyle("pagination");
 //#endregion
 export { Pagination };

package/dist/components/password-input/index.d.mts

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

package/dist/components/password-input/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 { PasswordInput as PasswordInput$1 } from "@ark-ui/solid/password-input";
 //#region src/components/password-input/index.tsx
 function PasswordInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(PasswordInput$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("password-input", () => rest.id);
+	return createComponent(PasswordInput$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const PasswordInput = {
+const PasswordInput = defineFamily(PasswordInputRoot, {
 	...PasswordInput$1,
 	Root: PasswordInputRoot
-};
+});
 injectComponentStyle("password-input");
 //#endregion
 export { PasswordInput };

package/dist/components/pin-input/index.d.mts

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

package/dist/components/pin-input/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 { PinInput as PinInput$1 } from "@ark-ui/solid/pin-input";
 //#region src/components/pin-input/index.tsx
 function PinInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(PinInput$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("pin-input", () => rest.id);
+	return createComponent(PinInput$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const PinInput = {
+const PinInput = defineFamily(PinInputRoot, {
 	...PinInput$1,
 	Root: PinInputRoot
-};
+});
 injectComponentStyle("pin-input");
 //#endregion
 export { PinInput };

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

@@ -1,3 +1,4 @@
+import { Popover } from "../popover/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/popconfirm/index.d.ts
 export interface PopconfirmProps extends JSX.HTMLAttributes<HTMLButtonElement> {
@@ -13,5 +14,6 @@ export interface PopconfirmProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  * and cancellation are the caller's to act on — the panel closes
  * either way. The children are the trigger's content, riding the
  * machine-driven trigger button. */
-export declare function Popconfirm(props: PopconfirmProps): JSX.Element;
+declare function PopconfirmImpl(props: PopconfirmProps): JSX.Element;
+export declare const Popconfirm: typeof PopconfirmImpl & typeof Popover;
 //#endregion

package/dist/components/popconfirm/index.mjs

@@ -1,6 +1,9 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
+import { Popover as Popover$1 } from "../popover/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createSignal, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Popover } from "@ark-ui/solid/popover";
@@ -13,7 +16,7 @@ var _tmpl$3 = /* @__PURE__ */ template(`<button>`);
 * and cancellation are the caller's to act on — the panel closes
 * either way. The children are the trigger's content, riding the
 * machine-driven trigger button. */
-function Popconfirm(props) {
+function PopconfirmImpl(props) {
 	injectComponentStyle("popconfirm");
 	const [own, rest] = splitProps(props, [
 		"message",
@@ -23,12 +26,16 @@ function Popconfirm(props) {
 		"onCancel",
 		"children"
 	]);
+	const id = useElementId("popconfirm");
 	const [open, setOpen] = createSignal(false);
 	function settle(confirmed) {
 		setOpen(false);
 		(confirmed ? own.onConfirm : own.onCancel)?.();
 	}
-	return createComponent(Popover.Root, {
+	return createComponent(Popover.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get open() {
 			return open();
 		},
@@ -57,21 +64,21 @@ function Popconfirm(props) {
 								var _el$2 = _tmpl$2();
 								var _el$3 = _el$2.firstChild;
 								var _el$4 = _el$3.nextSibling;
-								insert(_el$2, createComponent(Button, {
+								insert(_el$2, createComponent(Popover.CloseTrigger, { asChild: (closeProps) => createComponent(Button, mergeProps(closeProps, {
 									variant: "ghost",
 									size: "sm",
 									onClick: () => settle(false),
 									get children() {
 										return own.cancelText ?? "Cancel";
 									}
-								}), _el$3);
-								insert(_el$2, createComponent(Button, {
+								})) }), _el$3);
+								insert(_el$2, createComponent(Popover.CloseTrigger, { asChild: (closeProps) => createComponent(Button, mergeProps(closeProps, {
 									size: "sm",
 									onClick: () => settle(true),
 									get children() {
 										return own.confirmText ?? "Confirm";
 									}
-								}), _el$4);
+								})) }), _el$4);
 								return _el$2;
 							})()];
 						}
@@ -79,7 +86,8 @@ function Popconfirm(props) {
 				} });
 			} })];
 		}
-	});
+	}));
 }
+const Popconfirm = defineFamily(PopconfirmImpl, Popover$1);
 //#endregion
 export { Popconfirm };

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

@@ -1,8 +1,26 @@
+import { ComponentProps, JSX } from "solid-js";
 import { Popover as Popover$1 } from "@ark-ui/solid/popover";
 //#region src/components/popover/index.d.ts
 /** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
  * dissolves in on elevation, anchored to its trigger by a whisker arrow. The
  * API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
  * Title, Description, CloseTrigger, Arrow, ArrowTip. */
-export declare const Popover: typeof Popover$1;
+declare function PopoverRoot(props: ComponentProps<typeof Popover$1.Root>): JSX.Element;
+type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface PopoverFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string | Element;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: PopoverPlacement;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function PopoverFacade(props: PopoverFacadeProps): JSX.Element;
+export declare const Popover: typeof PopoverFacade & Omit<typeof Popover$1, "Root"> & {
+  Root: typeof PopoverRoot;
+};
 //#endregion

package/dist/components/popover/index.mjs

@@ -1,11 +1,100 @@
+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 { n as withElementProps, t as isElement } from "../../element-dGIhOTJ6.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Popover as Popover$1 } from "@ark-ui/solid/popover";
-//#region src/components/popover/index.ts
+//#region src/components/popover/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<p>`);
 /** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
 * dissolves in on elevation, anchored to its trigger by a whisker arrow. The
 * API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
 * Title, Description, CloseTrigger, Arrow, ArrowTip. */
-const Popover = Popover$1;
+function PopoverRoot(props) {
+	const id = useElementId("popover", () => props.id);
+	return createComponent$1(Popover$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function PopoverFacade(props) {
+	injectComponentStyle("popover");
+	const triggerElement = () => isElement(props.trigger) ? props.trigger : void 0;
+	const triggerChildren = () => triggerElement() ? void 0 : props.trigger ?? props.label;
+	const triggerAsChild = (propsFn) => {
+		const trigger = triggerElement();
+		return trigger ? withElementProps(trigger, propsFn()) : props.trigger ?? props.label;
+	};
+	return createComponent(PopoverRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, () => {
+		return props.placement === void 0 ? {} : { positioning: { placement: props.placement } };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(Popover$1.Trigger, {
+				get disabled() {
+					return props.disabled;
+				},
+				get asChild() {
+					return triggerElement() ? triggerAsChild : void 0;
+				},
+				get children() {
+					return triggerChildren();
+				}
+			}), createComponent(Popover$1.Positioner, { get children() {
+				return createComponent(Popover$1.Content, { get children() {
+					return [
+						createComponent(Popover$1.CloseTrigger, {
+							"aria-label": "Close",
+							get children() {
+								return iconNode("x", {
+									width: "14",
+									height: "14"
+								});
+							}
+						}),
+						createComponent(Popover$1.Title, { get children() {
+							return props.label;
+						} }),
+						createComponent(Show, {
+							get when() {
+								return props.description;
+							},
+							get children() {
+								return createComponent(Popover$1.Description, { get children() {
+									return props.description;
+								} });
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return props.content;
+							},
+							get children() {
+								var _el$ = _tmpl$();
+								insert(_el$, () => {
+									return props.content;
+								});
+								return _el$;
+							}
+						}),
+						memo(() => {
+							return props.children;
+						})
+					];
+				} });
+			} })];
+		}
+	}));
+}
+const Popover = defineFamily(PopoverFacade, {
+	...Popover$1,
+	Root: PopoverRoot
+});
 injectComponentStyle("popover");
 //#endregion
 export { Popover };

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

@@ -1,2 +1,10 @@
-import { Presence, PresenceProps, PresenceProvider, UsePresenceContext, UsePresenceProps, UsePresenceReturn, usePresence, usePresenceContext } from "@ark-ui/solid/presence";
-export { Presence, type PresenceProps, PresenceProvider, type UsePresenceContext, type UsePresenceProps, type UsePresenceReturn, usePresence, usePresenceContext };
+import { PresenceProps, UsePresenceContext, UsePresenceProps, UsePresenceReturn, usePresence, usePresenceContext } from "@ark-ui/solid/presence";
+//#region src/components/presence/index.d.ts
+export declare const Presence: ((props: import("@ark-ui/solid/presence").PresenceProps) => import("solid-js").JSX.Element) & {
+  Root: (props: import("@ark-ui/solid/presence").PresenceProps) => import("solid-js").JSX.Element;
+};
+export declare const PresenceProvider: import("solid-js").ContextProviderComponent<import("@ark-ui/solid/presence").UsePresenceContext> & {
+  Root: import("solid-js").ContextProviderComponent<import("@ark-ui/solid/presence").UsePresenceContext>;
+};
+//#endregion
+export { type PresenceProps, type UsePresenceContext, type UsePresenceProps, type UsePresenceReturn, usePresence, usePresenceContext };

package/dist/components/presence/index.mjs

@@ -1,2 +1,10 @@
-import { Presence, PresenceProvider, usePresence, usePresenceContext } from "@ark-ui/solid/presence";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { Presence as Presence$1, PresenceProvider as PresenceProvider$1, usePresence, usePresenceContext } from "@ark-ui/solid/presence";
+//#region src/components/presence/index.ts
+/** Mount/unmount children in step with CSS presence animations — the
+* engine behind Ark's "postpone unmounting so exit animations finish"
+* contract, exposed for composites of our own. */
+const Presence = withSelfRoot(Presence$1);
+const PresenceProvider = withSelfRoot(PresenceProvider$1);
+//#endregion
 export { Presence, PresenceProvider, usePresence, usePresenceContext };

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

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

package/dist/components/progress/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 { Progress as Progress$1 } from "@ark-ui/solid/progress";
 //#region src/components/progress/index.tsx
 function ProgressRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Progress$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("progress", () => rest.id);
+	return createComponent(Progress$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Progress = {
+const Progress = defineFamily(ProgressRoot, {
 	...Progress$1,
 	Root: ProgressRoot
-};
+});
 injectComponentStyle("progress");
 //#endregion
 export { Progress };

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

@@ -18,5 +18,7 @@ export interface ProgressGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
   max?: number;
   showLegend?: boolean;
 }
-export declare function ProgressGroup(props: ProgressGroupProps): JSX.Element;
+export declare const ProgressGroup: ((props: ProgressGroupProps) => JSX.Element) & {
+  Root: (props: ProgressGroupProps) => JSX.Element;
+};
 //#endregion

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

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
 import { For, Show, splitProps } from "solid-js";
@@ -6,7 +7,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=
 var _tmpl$2 = /* @__PURE__ */ template(`<div><div data-scope=progress-group data-part=track>`);
 var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=segment role=progressbar aria-valuemin=0>`);
 var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=legend-item><span data-scope=progress-group data-part=swatch aria-hidden=true></span><span data-scope=progress-group data-part=legend-label></span><span data-scope=progress-group data-part=legend-value>`);
-function ProgressGroup(props) {
+const ProgressGroup = withSelfRoot(function ProgressGroup(props) {
 	injectComponentStyle("progress-group");
 	const [own, rest] = splitProps(props, [
 		"segments",
@@ -44,7 +45,7 @@ function ProgressGroup(props) {
 				t !== _p$?.t && setAttribute(_el$4, "aria-valuenow", t);
 				a !== _p$?.a && setAttribute(_el$4, "aria-valuemax", a);
 				o !== _p$?.o && setAttribute(_el$4, "aria-label", o);
-				i !== _p$?.i && setStyleProperty(_el$4, "inline-size", i);
+				i !== _p$?.i && setStyleProperty(_el$4, "--bs-progress-group-share", i);
 			});
 			return _el$4;
 		})()
@@ -79,6 +80,6 @@ function ProgressGroup(props) {
 		}
 	}), null);
 	return _el$;
-}
+});
 //#endregion
 export { ProgressGroup };

package/dist/components/qr-code/index.d.mts

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
 //#region src/components/qr-code/index.d.ts
 /** 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. */
-export declare const QrCode: typeof QrCode$1;
+declare function QrCodeRoot(props: ComponentProps<typeof QrCode$1.Root>): import("solid-js").JSX.Element;
+export declare const QrCode: typeof QrCodeRoot & Omit<typeof QrCode$1, "Root"> & {
+  Root: typeof QrCodeRoot;
+};
 //#endregion

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

@@ -1,11 +1,23 @@
+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 "solid-js";
 import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
 //#region src/components/qr-code/index.ts
 /** 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;
+function QrCodeRoot(props) {
+	const id = useElementId("qr-code", () => props.id);
+	return createComponent(QrCode$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const QrCode = defineFamily(QrCodeRoot, {
+	...QrCode$1,
+	Root: QrCodeRoot
+});
 injectComponentStyle("qr-code");
 //#endregion
 export { QrCode };

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

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

package/dist/components/radio-group/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 { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
 //#region src/components/radio-group/index.tsx
 function RadioGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(RadioGroup$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("radio-group", () => rest.id);
+	return createComponent(RadioGroup$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const RadioGroup = {
+const RadioGroup = defineFamily(RadioGroupRoot, {
 	...RadioGroup$1,
 	Root: RadioGroupRoot
-};
+});
 injectComponentStyle("radio-group");
 //#endregion
 export { RadioGroup };

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

@@ -1,7 +1,7 @@
 import { RatingGroup as RatingGroup$1, RatingGroupRootProps } from "@ark-ui/solid/rating-group";
 //#region src/components/rating-group/index.d.ts
 /** 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). */
 type RatingGroupOwnProps = {
@@ -9,7 +9,7 @@ type RatingGroupOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function RatingGroupRoot(props: RatingGroupRootProps & RatingGroupOwnProps): import("solid-js").JSX.Element;
-export declare const RatingGroup: Omit<typeof RatingGroup$1, "Root"> & {
+export declare const RatingGroup: typeof RatingGroupRoot & Omit<typeof RatingGroup$1, "Root"> & {
   Root: typeof RatingGroupRoot;
 };
 //#endregion

package/dist/components/rating-group/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 { RatingGroup as RatingGroup$1 } from "@ark-ui/solid/rating-group";
 //#region src/components/rating-group/index.tsx
 function RatingGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(RatingGroup$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("rating-group", () => rest.id);
+	return createComponent(RatingGroup$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const RatingGroup = {
+const RatingGroup = defineFamily(RatingGroupRoot, {
 	...RatingGroup$1,
 	Root: RatingGroupRoot
-};
+});
 injectComponentStyle("rating-group");
 //#endregion
 export { RatingGroup };

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

@@ -12,7 +12,7 @@ export declare function ResultIcon(props: JSX.HTMLAttributes<HTMLDivElement>): J
 /** 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: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;

package/dist/components/result/index.mjs

@@ -1,10 +1,12 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as iconBody } from "../../icon-DTqmJCd5.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/result/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
-const MARK = { __html: "<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>" };
+const MARK = { __html: `<g data-for="success">${iconBody("check")}</g><g data-for="warning">${iconBody("triangle-alert")}</g><g data-for="danger">${iconBody("circle-x")}</g><g data-for="info">${iconBody("info")}</g>` };
 function ResultRoot(props) {
 	injectComponentStyle("result");
 	const [own, rest] = splitProps(props, ["status"]);
@@ -55,12 +57,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 = defineFamily(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,11 @@
+import { ComponentProps } from "solid-js";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/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("solid-js").JSX.Element;
+export declare const ScrollArea: typeof ScrollAreaRoot & Omit<typeof ScrollArea$1, "Root"> & {
+  Root: typeof ScrollAreaRoot;
+};
 //#endregion