@bysages/solid 0.3.1 → 0.4.1

package/dist/components/order-list/index.mjs

@@ -1,39 +1,44 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
-import { For, createSignal, createUniqueId, splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, createSignal, splitProps } from "solid-js";
 //#region src/components/order-list/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=12 height=12 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg><path></svg>`, 2);
-var _tmpl$3 = /* @__PURE__ */ template(`<div><ol data-scope=order-list data-part=list>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<li draggable aria-roledescription="Sortable item"data-scope=order-list data-part=item><span data-scope=order-list data-part=grip aria-hidden=true>⋮⋮</span><span data-scope=order-list data-part=label></span><span data-scope=order-list data-part=controls><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><ol data-scope=order-list data-part=list>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li draggable aria-roledescription="Sortable item"data-scope=order-list data-part=item><span data-scope=order-list data-part=grip aria-hidden=true>⋮⋮</span><span data-scope=order-list data-part=label></span><span data-scope=order-list data-part=controls><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move>`);
 const ARROWS = {
-	up: ["m18 15-6-6-6 6"],
-	down: ["m6 9 6 6 6-6"],
-	top: ["m18 15-6-6-6 6", "M5 4h14"],
-	bottom: ["m6 9 6 6 6-6", "M5 20h14"]
+	up: {
+		name: "chevron-up",
+		rail: ""
+	},
+	down: {
+		name: "chevron-down",
+		rail: ""
+	},
+	top: {
+		name: "chevron-up",
+		rail: "<path d=\"M5 4h14\"/>"
+	},
+	bottom: {
+		name: "chevron-down",
+		rail: "<path d=\"M5 20h14\"/>"
+	}
 };
-function arrowGlyph(paths) {
-	var _el$ = _tmpl$();
-	insert(_el$, createComponent(For, {
-		each: paths,
-		children: (d) => (() => {
-			var _el$2 = _tmpl$2();
-			setAttribute(_el$2, "d", d);
-			return _el$2;
-		})()
-	}));
-	return _el$;
+function arrowIcon(arrow) {
+	return iconNode(arrow.name, {
+		width: "12",
+		height: "12"
+	}, arrow.rail);
 }
 /** A ledger the reader may rewrite: rows move by grip or by the side
 * arrows, and the group reports the new order as the value itself —
 * the model is the order. Dragging rides the native drag events — a
 * hairline of primary ink marks the seam the row will land on — so
 * touch keeps the buttons as its route. */
-function OrderList(props) {
+const OrderList = withSelfRoot(function OrderList(props) {
 	const messages = useComponentMessages();
 	injectComponentStyle("order-list");
-	const uid = createUniqueId();
 	const [own, rest] = splitProps(props, [
 		"value",
 		"options",
@@ -68,34 +73,33 @@ function OrderList(props) {
 		own.onValueChange?.(next);
 		reset();
 	}
-	var _el$3 = _tmpl$3();
-	var _el$4 = _el$3.firstChild;
-	spread(_el$3, [rest, {
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
 		"data-scope": "order-list",
 		"data-part": "root",
-		"data-uid": uid,
 		onDragLeave: (event) => {
 			const host = event.currentTarget;
 			if (!event.relatedTarget || !host.contains(event.relatedTarget)) setDropLine(null);
 		}
 	}], true);
-	insert(_el$4, createComponent(For, {
+	insert(_el$2, createComponent(For, {
 		get each() {
 			return rows();
 		},
 		children: (option, index) => {
 			const seam = () => dropLine() && dropLine().index === index() ? dropLine().before ? "top" : "bottom" : void 0;
-			var _el$5 = _tmpl$4();
-			var _el$7 = _el$5.firstChild.nextSibling;
-			var _el$9 = _el$7.nextSibling.firstChild;
+			var _el$3 = _tmpl$2();
+			var _el$5 = _el$3.firstChild.nextSibling;
+			var _el$7 = _el$5.nextSibling.firstChild;
+			var _el$8 = _el$7.nextSibling;
+			var _el$9 = _el$8.nextSibling;
 			var _el$10 = _el$9.nextSibling;
-			var _el$11 = _el$10.nextSibling;
-			var _el$12 = _el$11.nextSibling;
-			_el$5.addEventListener("drop", (event) => {
+			_el$3.addEventListener("drop", (event) => {
 				event.preventDefault();
 				drop();
 			});
-			_el$5.addEventListener("dragover", (event) => {
+			_el$3.addEventListener("dragover", (event) => {
 				event.preventDefault();
 				if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
 				const rect = event.currentTarget.getBoundingClientRect();
@@ -105,30 +109,30 @@ function OrderList(props) {
 					before
 				} : null);
 			});
-			_el$5.addEventListener("dragend", reset);
-			_el$5.addEventListener("dragstart", (event) => {
+			_el$3.addEventListener("dragend", reset);
+			_el$3.addEventListener("dragstart", (event) => {
 				setDragging(option.value);
 				event.dataTransfer?.setData("text/plain", option.value);
 				if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
 			});
-			insert(_el$7, () => {
+			insert(_el$5, () => {
 				return option.label;
 			});
-			_el$9._$$click = () => move(option.value, -index());
-			insert(_el$9, () => {
-				return arrowGlyph(ARROWS.top);
+			_el$7._$$click = () => move(option.value, -index());
+			insert(_el$7, () => {
+				return arrowIcon(ARROWS.top);
 			});
-			_el$10._$$click = () => move(option.value, -1);
-			insert(_el$10, () => {
-				return arrowGlyph(ARROWS.up);
+			_el$8._$$click = () => move(option.value, -1);
+			insert(_el$8, () => {
+				return arrowIcon(ARROWS.up);
 			});
-			_el$11._$$click = () => move(option.value, 1);
-			insert(_el$11, () => {
-				return arrowGlyph(ARROWS.down);
+			_el$9._$$click = () => move(option.value, 1);
+			insert(_el$9, () => {
+				return arrowIcon(ARROWS.down);
 			});
-			_el$12._$$click = () => move(option.value, rows().length - 1 - index());
-			insert(_el$12, () => {
-				return arrowGlyph(ARROWS.bottom);
+			_el$10._$$click = () => move(option.value, rows().length - 1 - index());
+			insert(_el$10, () => {
+				return arrowIcon(ARROWS.bottom);
 			});
 			effect(() => {
 				return {
@@ -144,25 +148,25 @@ function OrderList(props) {
 					d: index() === rows().length - 1
 				};
 			}, ({ e, t, a, o, i, n, s, h, r, d }, _p$) => {
-				e !== _p$?.e && setAttribute(_el$5, "data-dragging", e);
-				t !== _p$?.t && setAttribute(_el$5, "data-drop-line", t);
-				a !== _p$?.a && setAttribute(_el$9, "aria-label", a);
-				o !== _p$?.o && setAttribute(_el$9, "disabled", o);
-				i !== _p$?.i && setAttribute(_el$10, "aria-label", i);
-				n !== _p$?.n && setAttribute(_el$10, "disabled", n);
-				s !== _p$?.s && setAttribute(_el$11, "aria-label", s);
-				h !== _p$?.h && setAttribute(_el$11, "disabled", h);
-				r !== _p$?.r && setAttribute(_el$12, "aria-label", r);
-				d !== _p$?.d && setAttribute(_el$12, "disabled", d);
+				e !== _p$?.e && setAttribute(_el$3, "data-dragging", e);
+				t !== _p$?.t && setAttribute(_el$3, "data-drop-line", t);
+				a !== _p$?.a && setAttribute(_el$7, "aria-label", a);
+				o !== _p$?.o && setAttribute(_el$7, "disabled", o);
+				i !== _p$?.i && setAttribute(_el$8, "aria-label", i);
+				n !== _p$?.n && setAttribute(_el$8, "disabled", n);
+				s !== _p$?.s && setAttribute(_el$9, "aria-label", s);
+				h !== _p$?.h && setAttribute(_el$9, "disabled", h);
+				r !== _p$?.r && setAttribute(_el$10, "aria-label", r);
+				d !== _p$?.d && setAttribute(_el$10, "disabled", d);
 			});
-			return _el$5;
+			return _el$3;
 		}
 	}));
 	effect(() => own.label, (_v$) => {
-		setAttribute(_el$4, "aria-label", _v$);
+		setAttribute(_el$2, "aria-label", _v$);
 	});
-	return _el$3;
-}
+	return _el$;
+});
 delegateEvents(["click"]);
 //#endregion
 export { OrderList };

package/dist/components/page-header/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/page-header/index.tsx
 /** The page's face: an eyebrow whisper, a serif title, one line of
 * description, and the actions resting beside the title on the same

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,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 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,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 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,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, spread, template } from "@solidjs/web";
+import { Popover as Popover$1 } from "../popover/index.mjs";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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 { injectComponentStyle } from "@bysages/core";
+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 { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+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,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 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