@bysages/react 0.3.1 → 0.4.0

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

@@ -1,18 +1,38 @@
-import { ComponentProps } from "react";
+import { CSSProperties, ComponentProps } from "react";
 import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
 //#region src/components/pagination/index.d.ts
 type PaginationRootProps = ComponentProps<typeof Pagination$1.Root> & {
   /** One rung of the control-height ladder every page seal shares. */
   size?: "sm" | "md" | "lg";
 };
-declare function PaginationRoot({ size, ...rest }: PaginationRootProps): import("react").JSX.Element;
+declare function PaginationRoot(props: PaginationRootProps): import("react").JSX.Element;
 /**
  * Pagination — paged navigation.
  *
  * Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
  * FirstTrigger, LastTrigger. Items carry data-selected.
  */
-export declare const Pagination: Omit<typeof Pagination$1, "Root"> & {
+type PaginationFacadeProps = {
+  value?: number;
+  defaultValue?: number;
+  count?: number;
+  pageSize?: number;
+  defaultPageSize?: number;
+  siblingCount?: number;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (page: number) => void;
+};
+declare const PaginationPrevTrigger: import("react").ForwardRefExoticComponent<Pagination$1.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<Pagination$1.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** The complete pagination bar behind one page: count and page size become
+ * the visible ladder, with edge semantics left to anatomy. */
+declare function PaginationFacade(props: PaginationFacadeProps): import("react").JSX.Element;
+export declare const Pagination: typeof PaginationFacade & Omit<typeof Pagination$1, "Root" | "PrevTrigger" | "NextTrigger"> & {
   Root: typeof PaginationRoot;
+  PrevTrigger: typeof PaginationPrevTrigger;
+  NextTrigger: typeof PaginationNextTrigger;
 };
 //#endregion

package/dist/components/pagination/index.mjs

@@ -1,23 +1,68 @@
+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 { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
 //#region src/components/pagination/index.tsx
-function PaginationRoot({ size = "md", ...rest }) {
+function PaginationRoot(props) {
+	injectComponentStyle("pagination");
+	const id = useElementId("pagination", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Pagination$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/**
-* Pagination — paged navigation.
-*
-* Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
-* FirstTrigger, LastTrigger. Items carry data-selected.
-*/
-const Pagination = {
+const PaginationPrevTrigger = Pagination$1.PrevTrigger;
+const PaginationNextTrigger = Pagination$1.NextTrigger;
+/** The complete pagination bar behind one page: count and page size become
+* the visible ladder, with edge semantics left to anatomy. */
+function PaginationFacade(props) {
+	const { value, defaultValue, count = 0, pageSize, defaultPageSize, siblingCount = 1, label, size = "md", className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsxs(PaginationRoot, {
+		size,
+		"aria-label": label,
+		count,
+		defaultPage: defaultValue,
+		page: value,
+		...pageSize === void 0 ? {} : { pageSize },
+		...defaultPageSize === void 0 ? {} : { defaultPageSize },
+		siblingCount,
+		className,
+		style,
+		onPageChange: (event) => onValueChange?.(event.page),
+		children: [
+			/* @__PURE__ */ jsx(PaginationPrevTrigger, {
+				"aria-label": "Previous page",
+				children: iconNode("chevron-left", {
+					width: 14,
+					height: 14
+				})
+			}),
+			/* @__PURE__ */ jsx(Pagination$1.Context, { children: (pagination) => pagination.pages.map((page, index) => page.type === "page" ? /* @__PURE__ */ jsx(Pagination$1.Item, {
+				type: "page",
+				value: page.value,
+				children: page.value
+			}, page.value) : /* @__PURE__ */ jsx(Pagination$1.Ellipsis, {
+				index,
+				children: "…"
+			}, `ellipsis-${index}`)) }),
+			/* @__PURE__ */ jsx(PaginationNextTrigger, {
+				"aria-label": "Next page",
+				children: iconNode("chevron-right", {
+					width: 14,
+					height: 14
+				})
+			})
+		]
+	});
+}
+const Pagination = Object.assign(PaginationFacade, {
 	...Pagination$1,
-	Root: PaginationRoot
-};
-injectComponentStyle("pagination");
+	Root: PaginationRoot,
+	PrevTrigger: PaginationPrevTrigger,
+	NextTrigger: PaginationNextTrigger
+});
 //#endregion
 export { Pagination };

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

@@ -5,12 +5,30 @@ type PasswordInputRootProps = ComponentProps<typeof PasswordInput$1.Root> & {
   /** One rung of the control-height ladder for the field and its eye. */
   size?: "sm" | "md" | "lg";
 };
-declare function PasswordInputRoot({ size, ...rest }: PasswordInputRootProps): import("react").JSX.Element;
-/** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
- * eye sits quiet at the field's edge and swaps in place — no shift, no
- * noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
- * VisibilityTrigger. */
-export declare const PasswordInput: Omit<typeof PasswordInput$1, "Root"> & {
+declare function PasswordInputRoot(props: PasswordInputRootProps): import("react").JSX.Element;
+interface PasswordInputFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  autoComplete?: "current-password" | "new-password";
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+/** The one-tag path: the masked field and reveal control. Visibility
+ * state, password-manager rules, and validation stay on the anatomy. */
+declare function PasswordInputFacade({ value, defaultValue, label, placeholder, autoComplete, disabled, invalid, required, size, onValueChange }: PasswordInputFacadeProps): import("react").JSX.Element;
+export declare const PasswordInput: typeof PasswordInputFacade & {
   Root: typeof PasswordInputRoot;
+  Context: (props: PasswordInput$1.ContextProps) => import("react").ReactNode;
+  Control: import("react").ForwardRefExoticComponent<PasswordInput$1.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+  Indicator: import("react").ForwardRefExoticComponent<PasswordInput$1.IndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Input: import("react").ForwardRefExoticComponent<PasswordInput$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Label: import("react").ForwardRefExoticComponent<PasswordInput$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<PasswordInput$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+  VisibilityTrigger: import("react").ForwardRefExoticComponent<PasswordInput$1.VisibilityTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion

package/dist/components/password-input/index.mjs

@@ -1,21 +1,44 @@
+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 { PasswordInput as PasswordInput$1 } from "@ark-ui/react/password-input";
 //#region src/components/password-input/index.tsx
-function PasswordInputRoot({ size = "md", ...rest }) {
+function PasswordInputRoot(props) {
+	const id = useElementId("password-input", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(PasswordInput$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
-* eye sits quiet at the field's edge and swaps in place — no shift, no
-* noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
-* VisibilityTrigger. */
-const PasswordInput = {
+/** The one-tag path: the masked field and reveal control. Visibility
+* state, password-manager rules, and validation stay on the anatomy. */
+function PasswordInputFacade({ value, defaultValue, label, placeholder, autoComplete, disabled = false, invalid = false, required = false, size = "md", onValueChange }) {
+	return /* @__PURE__ */ jsxs(PasswordInputRoot, {
+		size,
+		autoComplete,
+		disabled,
+		invalid,
+		required,
+		children: [label ? /* @__PURE__ */ jsx(PasswordInput$1.Label, { children: label }) : null, /* @__PURE__ */ jsxs(PasswordInput$1.Control, { children: [/* @__PURE__ */ jsx(PasswordInput$1.Input, {
+			placeholder,
+			defaultValue,
+			...value === void 0 ? {} : {
+				value,
+				onChange: (event) => onValueChange?.(event.target.value)
+			}
+		}), /* @__PURE__ */ jsx(PasswordInput$1.VisibilityTrigger, { children: /* @__PURE__ */ jsx(PasswordInput$1.Indicator, {
+			fallback: iconNode("eye-off"),
+			children: iconNode("eye")
+		}) })] })]
+	});
+}
+const PasswordInput = Object.assign(PasswordInputFacade, {
 	...PasswordInput$1,
 	Root: PasswordInputRoot
-};
+});
 injectComponentStyle("password-input");
 //#endregion
 export { PasswordInput };

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

@@ -5,11 +5,29 @@ type PinInputRootProps = ComponentProps<typeof PinInput$1.Root> & {
   /** One rung of the control-height ladder each seal stands on. */
   size?: "sm" | "md" | "lg";
 };
-declare function PinInputRoot({ size, ...rest }: PinInputRootProps): import("react").JSX.Element;
-/** Ark's PinInput, dressed in the paper-and-ink system: one character per
- * square-cut seal, centered ink in tabular figures. The API is Ark's own —
- * Root, Label, Control, Input, HiddenInput. */
-export declare const PinInput: Omit<typeof PinInput$1, "Root"> & {
+declare function PinInputRoot(props: PinInputRootProps): import("react").JSX.Element;
+interface PinInputFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  length?: number;
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[]) => void;
+}
+/** The one-tag path for an even run of seals; OTP, masks, and custom
+ * validation stay on the anatomy. */
+declare function PinInputFacade({ value, defaultValue, label, placeholder, disabled, invalid, required, length, size, onValueChange }: PinInputFacadeProps): import("react").JSX.Element;
+export declare const PinInput: typeof PinInputFacade & {
   Root: typeof PinInputRoot;
+  Context: (props: PinInput$1.ContextProps) => import("react").ReactNode;
+  Control: import("react").ForwardRefExoticComponent<PinInput$1.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<PinInput$1.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Input: import("react").ForwardRefExoticComponent<PinInput$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Label: import("react").ForwardRefExoticComponent<PinInput$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<PinInput$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion

package/dist/components/pin-input/index.mjs

@@ -1,20 +1,42 @@
+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 { PinInput as PinInput$1 } from "@ark-ui/react/pin-input";
 //#region src/components/pin-input/index.tsx
-function PinInputRoot({ size = "md", ...rest }) {
+function PinInputRoot(props) {
+	const id = useElementId("pin-input", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(PinInput$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's PinInput, dressed in the paper-and-ink system: one character per
-* square-cut seal, centered ink in tabular figures. The API is Ark's own —
-* Root, Label, Control, Input, HiddenInput. */
-const PinInput = {
+/** The one-tag path for an even run of seals; OTP, masks, and custom
+* validation stay on the anatomy. */
+function PinInputFacade({ value, defaultValue, label, placeholder = "·", disabled = false, invalid = false, required = false, length = 4, size = "md", onValueChange }) {
+	return /* @__PURE__ */ jsxs(PinInputRoot, {
+		size,
+		disabled,
+		invalid,
+		required,
+		placeholder,
+		defaultValue,
+		...value === void 0 ? {} : {
+			value,
+			onValueChange: (details) => onValueChange?.(details.value)
+		},
+		children: [
+			label ? /* @__PURE__ */ jsx(PinInput$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(PinInput$1.Control, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(PinInput$1.Input, { index }, index)) }),
+			/* @__PURE__ */ jsx(PinInput$1.HiddenInput, {})
+		]
+	});
+}
+const PinInput = Object.assign(PinInputFacade, {
 	...PinInput$1,
 	Root: PinInputRoot
-};
+});
 injectComponentStyle("pin-input");
 //#endregion
 export { PinInput };

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

@@ -1,13 +1,16 @@
+import { t as Popover } from "../../index-Eu-Bttta.mjs";
 import { ReactNode } from "react";
 //#region src/components/popconfirm/index.d.ts
 /**
  * A question at the point of no return: the trigger opens a small
- * anchored vessel carrying the message and two answers. Confirmation
- * and cancellation are the caller's to act on — the panel closes
- * either way. The children are the trigger; give it a single element
- * (wrap a group in a span otherwise).
+ * anchored vessel carrying the message and two answers. Each answer is
+ * a close trigger: the answer reports through its own handler and the
+ * popover machine folds the panel either way. The children are the
+ * trigger; give it a single element (wrap a group in a span
+ * otherwise).
  */
 export interface PopconfirmProps {
+  id?: string;
   /** The question the reader is answering. */
   message: string;
   confirmText?: string;
@@ -16,5 +19,6 @@ export interface PopconfirmProps {
   onConfirm?: () => void;
   onCancel?: () => void;
 }
-export declare function Popconfirm({ message, confirmText, cancelText, children, onConfirm, onCancel }: PopconfirmProps): import("react").JSX.Element;
+declare function PopconfirmImpl({ message, confirmText, cancelText, children, onConfirm, onCancel, id }: PopconfirmProps): import("react").JSX.Element;
+export declare const Popconfirm: typeof PopconfirmImpl & typeof Popover;
 //#endregion

package/dist/components/popconfirm/index.mjs

@@ -1,20 +1,16 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { Button } from "../button/index.mjs";
+import { Popover as Popover$1 } from "../popover/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Popover } from "@ark-ui/react/popover";
 import { Portal } from "@ark-ui/react/portal";
 //#region src/components/popconfirm/index.tsx
-function Popconfirm({ message, confirmText = "Confirm", cancelText = "Cancel", children, onConfirm, onCancel }) {
+function PopconfirmImpl({ message, confirmText = "Confirm", cancelText = "Cancel", children, onConfirm, onCancel, id }) {
 	injectComponentStyle("popconfirm");
-	const [open, setOpen] = useState(false);
-	function settle(confirmed) {
-		setOpen(false);
-		(confirmed ? onConfirm : onCancel)?.();
-	}
+	const hostId = useElementId("popconfirm", { id });
 	return /* @__PURE__ */ jsxs(Popover.Root, {
-		open,
-		onOpenChange: (details) => setOpen(details.open),
+		id: `${hostId}:popover`,
 		positioning: { placement: "top" },
 		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 			asChild: true,
@@ -26,19 +22,28 @@ function Popconfirm({ message, confirmText = "Confirm", cancelText = "Cancel", c
 				children: message
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-part": "actions",
-				children: [/* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "sm",
-					onClick: () => settle(false),
-					children: cancelText
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					onClick: () => settle(true),
-					children: confirmText
+				children: [/* @__PURE__ */ jsx(Popover.CloseTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						"aria-label": cancelText,
+						onClick: () => onCancel?.(),
+						children: cancelText
+					})
+				}), /* @__PURE__ */ jsx(Popover.CloseTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						"aria-label": confirmText,
+						onClick: () => onConfirm?.(),
+						children: confirmText
+					})
 				})]
 			})]
 		}) }) })]
 	});
 }
+const Popconfirm = Object.assign(PopconfirmImpl, Popover$1);
 //#endregion
 export { Popconfirm };

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

@@ -1,8 +1,2 @@
-import { Popover as Popover$1 } from "@ark-ui/react/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;
-//#endregion
+import { n as PopoverFacadeProps, t as Popover } from "../../index-Eu-Bttta.mjs";
+export { Popover, PopoverFacadeProps };

package/dist/components/popover/index.mjs

@@ -1,11 +1,51 @@
+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 { isValidElement } from "react";
 import { Popover as Popover$1 } from "@ark-ui/react/popover";
 //#region src/components/popover/index.tsx
 /** 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;
+* 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. */
+function PopoverRoot(props) {
+	const id = useElementId("popover", props);
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		...props,
+		id
+	});
+}
+function PopoverFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, placement, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		...placement === void 0 ? {} : { positioning: { placement } },
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
+			asChild: isValidElement(trigger),
+			disabled,
+			children: trigger ?? label
+		}), /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, { children: [
+			/* @__PURE__ */ jsx(Popover$1.CloseTrigger, {
+				"aria-label": "Close",
+				children: iconNode("x", {
+					width: 14,
+					height: 14
+				})
+			}),
+			/* @__PURE__ */ jsx(Popover$1.Title, { children: label }),
+			description ? /* @__PURE__ */ jsx(Popover$1.Description, { children: description }) : null,
+			content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+			children
+		] }) })]
+	});
+}
+PopoverFacade.displayName = "SPopover";
+const Popover = Object.assign(PopoverFacade, {
+	...Popover$1,
+	Root: PopoverRoot
+});
 injectComponentStyle("popover");
 //#endregion
 export { Popover };

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

@@ -1,2 +1,10 @@
-import { Presence, PresenceBaseProps, PresenceProps, PresenceProvider, UsePresenceContext, UsePresenceProps, UsePresenceReturn, usePresence, usePresenceContext } from "@ark-ui/react/presence";
-export { Presence, type PresenceBaseProps, type PresenceProps, PresenceProvider, type UsePresenceContext, type UsePresenceProps, type UsePresenceReturn, usePresence, usePresenceContext };
+import { PresenceBaseProps, PresenceProps, UsePresenceContext, UsePresenceProps, UsePresenceReturn, usePresence, usePresenceContext } from "@ark-ui/react/presence";
+//#region src/components/presence/index.d.ts
+export declare const Presence: import("react").ForwardRefExoticComponent<import("@ark-ui/react/presence").PresenceProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/presence").PresenceProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const PresenceProvider: import("react").Provider<import("@ark-ui/react/presence").UsePresenceContext> & {
+  Root: import("react").Provider<import("@ark-ui/react/presence").UsePresenceContext>;
+};
+//#endregion
+export { type PresenceBaseProps, type PresenceProps, type UsePresenceContext, type UsePresenceProps, type UsePresenceReturn, usePresence, usePresenceContext };

package/dist/components/presence/index.mjs

@@ -1,2 +1,7 @@
-import { Presence, PresenceProvider, usePresence, usePresenceContext } from "@ark-ui/react/presence";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { Presence as Presence$1, PresenceProvider as PresenceProvider$1, usePresence, usePresenceContext } from "@ark-ui/react/presence";
+//#region src/components/presence/index.tsx
+const Presence = withSelfRoot(Presence$1);
+const PresenceProvider = withSelfRoot(PresenceProvider$1);
+//#endregion
 export { Presence, PresenceProvider, usePresence, usePresenceContext };

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

@@ -1,16 +1,31 @@
-import { ComponentProps } from "react";
+import { CSSProperties, ComponentProps } from "react";
 import { Progress as Progress$1 } from "@ark-ui/react/progress";
 //#region src/components/progress/index.d.ts
 type ProgressRootProps = ComponentProps<typeof Progress$1.Root> & {
   /** One rung of the groove ladder — the track's thickness. */
   size?: "sm" | "md" | "lg";
 };
-declare function ProgressRoot({ size, ...rest }: ProgressRootProps): import("react").JSX.Element;
+declare function ProgressRoot(props: ProgressRootProps): import("react").JSX.Element;
 /** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
  * groove that the primary ink fills at the machine's pace. The API is
  * Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
  * CircleTrack, CircleRange. */
-export declare const Progress: Omit<typeof Progress$1, "Root"> & {
+type ProgressFacadeProps = {
+  value?: number | null;
+  defaultValue?: number | null;
+  min?: number;
+  max?: number;
+  label?: string;
+  variant?: "linear" | "circle";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: number | null) => void;
+};
+/** The complete progress behind one value: a labelled linear groove by
+ * default, with a circular variant for compact status. */
+declare function ProgressFacade(props: ProgressFacadeProps): import("react").JSX.Element;
+export declare const Progress: typeof ProgressFacade & Omit<typeof Progress$1, "Root"> & {
   Root: typeof ProgressRoot;
 };
 //#endregion

package/dist/components/progress/index.mjs

@@ -1,21 +1,46 @@
+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 { Progress as Progress$1 } from "@ark-ui/react/progress";
 //#region src/components/progress/index.tsx
-function ProgressRoot({ size = "md", ...rest }) {
+const ProgressView = Progress$1.View;
+function ProgressRoot(props) {
+	injectComponentStyle("progress");
+	const id = useElementId("progress", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Progress$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
-* groove that the primary ink fills at the machine's pace. The API is
-* Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
-* CircleTrack, CircleRange. */
-const Progress = {
+/** The complete progress behind one value: a labelled linear groove by
+* default, with a circular variant for compact status. */
+function ProgressFacade(props) {
+	const { value, defaultValue, min, max, label, variant = "linear", size = "md", className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsxs(ProgressRoot, {
+		size,
+		"data-variant": variant,
+		defaultValue,
+		value,
+		min,
+		max,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(event.value),
+		children: [
+			label ? /* @__PURE__ */ jsx(Progress$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Progress$1.ValueText, {}),
+			variant === "circle" ? /* @__PURE__ */ jsx(ProgressView, {
+				view: "circle",
+				children: /* @__PURE__ */ jsx(Progress$1.Circle, { children: /* @__PURE__ */ jsx(Progress$1.CircleRange, {}) })
+			}) : /* @__PURE__ */ jsx(Progress$1.Track, { children: /* @__PURE__ */ jsx(Progress$1.Range, {}) })
+		]
+	});
+}
+const Progress = Object.assign(ProgressFacade, {
 	...Progress$1,
 	Root: ProgressRoot
-};
-injectComponentStyle("progress");
+});
 //#endregion
 export { Progress };

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

@@ -18,5 +18,8 @@ export interface ProgressGroupProps extends HTMLAttributes<HTMLDivElement> {
   max?: number;
   showLegend?: boolean;
 }
-export declare function ProgressGroup({ segments, max, showLegend, ...rest }: ProgressGroupProps): import("react").JSX.Element;
+declare function ProgressGroupImpl({ segments, max, showLegend, ...rest }: ProgressGroupProps): import("react").JSX.Element;
+export declare const ProgressGroup: typeof ProgressGroupImpl & {
+  Root: typeof ProgressGroupImpl;
+};
 //#endregion

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

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/progress-group/index.tsx
-function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
+function ProgressGroupImpl({ segments, max, showLegend = true, ...rest }) {
 	injectComponentStyle("progress-group");
 	const total = max ?? segments.reduce((sum, segment) => sum + segment.value, 0);
 	const share = (value) => total > 0 ? `${value / total * 100}%` : "0%";
@@ -22,7 +23,7 @@ function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
 				"aria-valuemin": 0,
 				"aria-valuemax": total,
 				"aria-label": nameOf(segment, index),
-				style: { inlineSize: share(segment.value) }
+				style: { "--bs-progress-group-share": share(segment.value) }
 			}, index))
 		}), showLegend ? /* @__PURE__ */ jsx("div", {
 			"data-scope": "progress-group",
@@ -52,5 +53,6 @@ function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
 		}) : null]
 	});
 }
+const ProgressGroup = withSelfRoot(ProgressGroupImpl);
 //#endregion
 export { ProgressGroup };

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

@@ -1,8 +1,21 @@
+import { CSSProperties, ComponentProps } from "react";
 import { QrCode as QrCode$1 } from "@ark-ui/react/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("react").JSX.Element;
+type QrCodeFacadeProps = {
+  value?: string;
+  defaultValue?: string;
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: string) => void;
+};
+/** The complete printable code behind one payload. */
+declare function QrCodeFacade(props: QrCodeFacadeProps): import("react").JSX.Element;
+export declare const QrCode: typeof QrCodeFacade & Omit<typeof QrCode$1, "Root"> & {
+  Root: typeof QrCodeRoot;
+};
 //#endregion