@bysages/solid 0.4.0 → 0.4.2

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

@@ -1,8 +1,9 @@
 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 { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, splitProps } from "solid-js";
 import { NumberInput as NumberInput$1 } from "@ark-ui/solid/number-input";
 //#region src/components/number-input/index.tsx
 function NumberInputRoot(props) {
@@ -17,7 +18,75 @@ function NumberInputRoot(props) {
 		}
 	}));
 }
-const NumberInput = defineFamily(NumberInputRoot, {
+/** The one-tag path for a stepped number field; formatting, scrubbing,
+* and locale rules stay on the anatomy. */
+function NumberInputFacade(props) {
+	injectComponentStyle("number-input");
+	return createComponent(NumberInputRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get min() {
+			return props.min;
+		},
+		get max() {
+			return props.max;
+		},
+		get step() {
+			return props.step;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [createComponent(Show, {
+				get when() {
+					return props.label;
+				},
+				get children() {
+					return createComponent(NumberInput$1.Label, { get children() {
+						return props.label;
+					} });
+				}
+			}), createComponent(NumberInput$1.Control, { get children() {
+				return [
+					createComponent(NumberInput$1.Input, { get placeholder() {
+						return props.placeholder;
+					} }),
+					createComponent(NumberInput$1.Scrubber, { get children() {
+						return iconNode("pause");
+					} }),
+					createComponent(NumberInput$1.IncrementTrigger, {
+						"aria-label": "Increment",
+						get children() {
+							return iconNode("chevron-up");
+						}
+					}),
+					createComponent(NumberInput$1.DecrementTrigger, {
+						"aria-label": "Decrement",
+						get children() {
+							return iconNode("chevron-down");
+						}
+					})
+				];
+			} })];
+		}
+	}));
+}
+const NumberInput = defineFamily(NumberInputFacade, {
 	...NumberInput$1,
 	Root: NumberInputRoot
 });

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

@@ -1,8 +1,8 @@
 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 { injectComponentStyle } from "@bysages/core/styling";
 import { For, createSignal, splitProps } from "solid-js";
 //#region src/components/order-list/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><ol data-scope=order-list data-part=list>`);

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

@@ -9,9 +9,29 @@ import { Pagination as Pagination$1, PaginationRootProps } from "@ark-ui/solid/p
 type PaginationOwnProps = {
   /** One rung of the control-height ladder every page seal shares. */
   size?: "sm" | "md" | "lg";
+  /** full is the page-seal ladder; simple keeps prev, the count, next. */
+  variant?: "default" | "simple";
 };
-declare function PaginationRoot(props: PaginationRootProps & PaginationOwnProps): import("solid-js").JSX.Element;
-export declare const Pagination: typeof PaginationRoot & Omit<typeof Pagination$1, "Root"> & {
+type PaginationRootProps$1 = PaginationRootProps & PaginationOwnProps;
+declare function PaginationRoot(props: PaginationRootProps$1): import("solid-js").JSX.Element;
+export interface PaginationFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  count?: number;
+  pageSize?: number;
+  defaultPageSize?: number;
+  siblingCount?: number;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  /** full is the page-seal ladder; simple keeps prev, the count, next. */
+  variant?: "default" | "simple";
+  class?: string;
+  onValueChange?: (value: number) => void;
+}
+/** 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("solid-js").JSX.Element;
+export declare const Pagination: typeof PaginationFacade & Omit<typeof Pagination$1, "Root"> & {
   Root: typeof PaginationRoot;
 };
 //#endregion

package/dist/components/pagination/index.mjs

@@ -1,23 +1,122 @@
 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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, splitProps } from "solid-js";
 import { Pagination as Pagination$1 } from "@ark-ui/solid/pagination";
 //#region src/components/pagination/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span data-scope=pagination data-part=status> / <!>`);
 function PaginationRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
-	const id = useElementId("pagination", () => rest.id);
+	injectComponentStyle("pagination");
+	const [own, rest] = splitProps(props, [
+		"id",
+		"size",
+		"variant"
+	]);
+	const id = useElementId("pagination", () => props.id);
 	return createComponent(Pagination$1.Root, mergeProps(rest, {
 		get id() {
 			return id();
 		},
 		get "data-size"() {
 			return own.size ?? "md";
+		},
+		get "data-variant"() {
+			return memo(() => {
+				return own.variant === "simple";
+			})() ? own.variant : void 0;
 		}
 	}));
 }
-const Pagination = defineFamily(PaginationRoot, {
+/** 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 variant = props.variant ?? "default";
+	return createComponent(PaginationRoot, {
+		get "class"() {
+			return props.class;
+		},
+		get size() {
+			return props.size ?? "md";
+		},
+		variant,
+		get "aria-label"() {
+			return props.label;
+		},
+		get count() {
+			return props.count ?? 0;
+		},
+		get defaultPage() {
+			return props.defaultValue;
+		},
+		get page() {
+			return props.value;
+		},
+		get pageSize() {
+			return props.pageSize;
+		},
+		get defaultPageSize() {
+			return props.defaultPageSize;
+		},
+		get siblingCount() {
+			return props.siblingCount ?? 1;
+		},
+		onPageChange: (details) => props.onValueChange?.(details.page),
+		get children() {
+			return [
+				createComponent(Pagination$1.PrevTrigger, {
+					"aria-label": "Previous page",
+					get children() {
+						return iconNode("chevron-left", {
+							width: "14",
+							height: "14"
+						});
+					}
+				}),
+				memo(() => {
+					return variant === "simple" ? createComponent(Pagination$1.Context, { children: (pagination) => (() => {
+						var _el$ = _tmpl$();
+						var _el$2 = _el$.firstChild;
+						var _el$3 = _el$2.nextSibling;
+						insert(_el$, () => {
+							return pagination().page;
+						}, _el$2);
+						insert(_el$, () => {
+							return pagination().totalPages;
+						}, _el$3);
+						return _el$;
+					})() }) : createComponent(Pagination$1.Context, { children: (pagination) => createComponent(For, {
+						get each() {
+							return pagination().pages;
+						},
+						children: (page, index) => page.type === "ellipsis" ? createComponent(Pagination$1.Ellipsis, { get index() {
+							return index();
+						} }) : createComponent(Pagination$1.Item, {
+							type: "page",
+							get value() {
+								return page.value;
+							},
+							get children() {
+								return page.value;
+							}
+						})
+					}) });
+				}),
+				createComponent(Pagination$1.NextTrigger, {
+					"aria-label": "Next page",
+					get children() {
+						return iconNode("chevron-right", {
+							width: "14",
+							height: "14"
+						});
+					}
+				})
+			];
+		}
+	});
+}
+const Pagination = defineFamily(PaginationFacade, {
 	...Pagination$1,
 	Root: PaginationRoot
 });

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

@@ -9,7 +9,24 @@ type PasswordInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function PasswordInputRoot(props: PasswordInputRootProps & PasswordInputOwnProps): import("solid-js").JSX.Element;
-export declare const PasswordInput: typeof PasswordInputRoot & Omit<typeof PasswordInput$1, "Root"> & {
+export interface PasswordInputFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  autoComplete?: "current-password" | "new-password";
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  /** One rung of the control-height ladder for the field and its eye. */
+  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(props: PasswordInputFacadeProps): import("solid-js").JSX.Element;
+type PasswordInputParts = Omit<typeof PasswordInput$1, "Root"> & {
   Root: typeof PasswordInputRoot;
 };
+export declare const PasswordInput: typeof PasswordInputFacade & PasswordInputParts;
 //#endregion

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

@@ -1,8 +1,9 @@
 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 { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, 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) {
@@ -17,7 +18,60 @@ function PasswordInputRoot(props) {
 		}
 	}));
 }
-const PasswordInput = defineFamily(PasswordInputRoot, {
+/** The one-tag path: the masked field and reveal control. Visibility
+* state, password-manager rules, and validation stay on the anatomy. */
+function PasswordInputFacade(props) {
+	injectComponentStyle("password-input");
+	return createComponent(PasswordInputRoot, {
+		get size() {
+			return props.size ?? "md";
+		},
+		get autoComplete() {
+			return props.autoComplete;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get children() {
+			return [createComponent(Show, {
+				get when() {
+					return props.label;
+				},
+				get children() {
+					return createComponent(PasswordInput$1.Label, { get children() {
+						return props.label;
+					} });
+				}
+			}), createComponent(PasswordInput$1.Control, { get children() {
+				return [createComponent(PasswordInput$1.Input, {
+					get placeholder() {
+						return props.placeholder;
+					},
+					get value() {
+						return props.value ?? props.defaultValue;
+					},
+					onInput: (event) => props.onValueChange?.(event.currentTarget.value)
+				}), createComponent(PasswordInput$1.VisibilityTrigger, { get children() {
+					return createComponent(PasswordInput$1.Indicator, {
+						get fallback() {
+							return iconNode("eye-off");
+						},
+						get children() {
+							return iconNode("eye");
+						}
+					});
+				} })];
+			} })];
+		}
+	});
+}
+const PasswordInput = defineFamily(PasswordInputFacade, {
 	...PasswordInput$1,
 	Root: PasswordInputRoot
 });

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

@@ -8,7 +8,24 @@ type PinInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function PinInputRoot(props: PinInputRootProps & PinInputOwnProps): import("solid-js").JSX.Element;
-export declare const PinInput: typeof PinInputRoot & Omit<typeof PinInput$1, "Root"> & {
+export interface PinInputFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  length?: number;
+  /** One rung of the control-height ladder each seal stands on. */
+  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(props: PinInputFacadeProps): import("solid-js").JSX.Element;
+type PinInputParts = Omit<typeof PinInput$1, "Root"> & {
   Root: typeof PinInputRoot;
 };
+export declare const PinInput: typeof PinInputFacade & PinInputParts;
 //#endregion

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

@@ -1,8 +1,8 @@
 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";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, 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) {
@@ -17,7 +17,59 @@ function PinInputRoot(props) {
 		}
 	}));
 }
-const PinInput = defineFamily(PinInputRoot, {
+/** The one-tag path for an even run of seals; OTP, masks, and custom
+* validation stay on the anatomy. */
+function PinInputFacade(props) {
+	injectComponentStyle("pin-input");
+	return createComponent(PinInputRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get placeholder() {
+			return props.placeholder ?? "·";
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(PinInput$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(PinInput$1.Control, { get children() {
+					return createComponent(For, {
+						get each() {
+							return Array.from({ length: props.length ?? 4 }, (_, index) => index);
+						},
+						children: (index) => createComponent(PinInput$1.Input, { index })
+					});
+				} }),
+				createComponent(PinInput$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const PinInput = defineFamily(PinInputFacade, {
 	...PinInput$1,
 	Root: PinInputRoot
 });

package/dist/components/popconfirm/index.mjs

@@ -2,8 +2,8 @@ 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, 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";

package/dist/components/popover/index.mjs

@@ -2,8 +2,8 @@ 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 { 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.tsx

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

@@ -7,9 +7,27 @@ import { Progress as Progress$1, ProgressRootProps } from "@ark-ui/solid/progres
 type ProgressOwnProps = {
   /** One rung of the groove ladder — the track's thickness. */
   size?: "sm" | "md" | "lg";
+  /** Linear is the groove; circle and dashboard are compact dials. */
+  variant?: "linear" | "circle" | "dashboard";
+  /** The accessible name shown beside the dashboard dial. */
+  label?: string;
 };
 declare function ProgressRoot(props: ProgressRootProps & ProgressOwnProps): import("solid-js").JSX.Element;
-export declare const Progress: typeof ProgressRoot & Omit<typeof Progress$1, "Root"> & {
+export interface ProgressFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  label?: string;
+  variant?: "linear" | "circle" | "dashboard";
+  /** One rung of the groove ladder — the track's thickness. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: number | null) => void;
+}
+/** The complete progress behind one value: a labelled linear groove by
+ * default, with circular and dashboard dials for compact status. */
+declare function ProgressFacade(props: ProgressFacadeProps): import("solid-js").JSX.Element;
+export declare const Progress: typeof ProgressFacade & Omit<typeof Progress$1, "Root"> & {
   Root: typeof ProgressRoot;
 };
 //#endregion

package/dist/components/progress/index.mjs

@@ -1,23 +1,122 @@
 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";
-import { Progress as Progress$1 } from "@ark-ui/solid/progress";
+import { createComponent, effect, insert, memo, mergeProps, setStyleProperty, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createMemo, splitProps } from "solid-js";
+import { Progress as Progress$1, useProgressContext } from "@ark-ui/solid/progress";
 //#region src/components/progress/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=progress data-part=view data-view=dashboard><div aria-hidden=true data-scope=progress data-part=dash-ring>`);
 function ProgressRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
-	const id = useElementId("progress", () => rest.id);
+	injectComponentStyle("progress");
+	const [own, rest] = splitProps(props, [
+		"id",
+		"size",
+		"variant",
+		"label",
+		"value",
+		"defaultValue",
+		"min",
+		"max"
+	]);
+	const id = useElementId("progress", () => own.id);
+	const dashboardPercent = createMemo(() => {
+		const min = own.min ?? 0;
+		const max = own.max ?? 100;
+		const percent = ((own.value ?? own.defaultValue ?? min + (max - min) / 2) - min) / (max - min) * 100;
+		return !Number.isFinite(percent) ? 0 : Math.min(100, Math.max(0, percent));
+	});
 	return createComponent(Progress$1.Root, mergeProps(rest, {
 		get id() {
 			return id();
 		},
 		get "data-size"() {
 			return own.size ?? "md";
+		},
+		get "data-variant"() {
+			return own.variant ?? "linear";
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return own.variant === "dashboard";
+				},
+				get fallback() {
+					return rest.children;
+				},
+				get children() {
+					return [memo(() => {
+						return memo(() => {
+							return !!own.label;
+						})() ? createComponent(Progress$1.Label, { get children() {
+							return own.label;
+						} }) : null;
+					}), (() => {
+						var _el$ = _tmpl$();
+						var _el$2 = _el$.firstChild;
+						insert(_el$, createComponent(Progress$1.ValueText, {}), null);
+						effect(() => String(dashboardPercent()), (_v$) => {
+							setStyleProperty(_el$2, "--percent", _v$);
+						});
+						return _el$;
+					})()];
+				}
+			});
+		}
+	}));
+}
+function ProgressCircleView() {
+	const progress = useProgressContext();
+	const value = progress().value;
+	const max = progress().max;
+	const state = value === null ? "indeterminate" : value === max ? "complete" : "loading";
+	return createComponent(Progress$1.View, {
+		state,
+		get children() {
+			return createComponent(Progress$1.Circle, { get children() {
+				return createComponent(Progress$1.CircleRange, {});
+			} });
+		}
+	});
+}
+/** The complete progress behind one value: a labelled linear groove by
+* default, with circular and dashboard dials for compact status. */
+function ProgressFacade(props) {
+	const variant = () => props.variant ?? "linear";
+	return createComponent(ProgressRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get variant() {
+			return variant();
+		},
+		get label() {
+			return props.label;
+		},
+		get defaultValue() {
+			return props.defaultValue;
+		},
+		get min() {
+			return props.min;
+		},
+		get max() {
+			return props.max;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return memo(() => {
+				return variant() === "dashboard";
+			})() ? null : [props.label ? createComponent(Progress$1.Label, { get children() {
+				return props.label;
+			} }) : null, variant() === "circle" ? createComponent(ProgressCircleView, {}) : createComponent(Progress$1.Track, { get children() {
+				return createComponent(Progress$1.Range, {});
+			} })];
 		}
 	}));
 }
-const Progress = defineFamily(ProgressRoot, {
+const Progress = defineFamily(ProgressFacade, {
 	...Progress$1,
 	Root: ProgressRoot
 });

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

@@ -1,6 +1,6 @@
 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 { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, splitProps } from "solid-js";
 //#region src/components/progress-group/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=legend>`);

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

@@ -6,7 +6,14 @@ import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
  * control. The API is Ark's own — Root, Frame, Pattern, Overlay,
  * DownloadTrigger. */
 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"> & {
+export interface QrCodeFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+/** The complete printable code behind one payload. */
+declare function QrCodeFacade(props: QrCodeFacadeProps): import("solid-js").JSX.Element;
+export declare const QrCode: typeof QrCodeFacade & Omit<typeof QrCode$1, "Root"> & {
   Root: typeof QrCodeRoot;
 };
 //#endregion