@bysages/solid 0.4.1 → 0.4.2

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 { createComponent, mergeProps } from "@solidjs/web";
+import { createComponent, effect, insert, memo, mergeProps, setStyleProperty, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
-import { Progress as Progress$1 } from "@ark-ui/solid/progress";
+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/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

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

@@ -1,20 +1,37 @@
 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 { createComponent, mergeProps } from "solid-js";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
-//#region src/components/qr-code/index.ts
+//#region src/components/qr-code/index.tsx
 /** 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. */
 function QrCodeRoot(props) {
 	const id = useElementId("qr-code", () => props.id);
-	return createComponent(QrCode$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(QrCode$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const QrCode = defineFamily(QrCodeRoot, {
+/** The complete printable code behind one payload. */
+function QrCodeFacade(props) {
+	injectComponentStyle("qr-code");
+	return createComponent(QrCodeRoot, mergeProps({ get defaultValue() {
+		return props.defaultValue;
+	} }, () => {
+		return props.value === void 0 ? {} : { value: props.value };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value),
+		get children() {
+			return createComponent(QrCode$1.Frame, { get children() {
+				return createComponent(QrCode$1.Pattern, {});
+			} });
+		}
+	}));
+}
+const QrCode = defineFamily(QrCodeFacade, {
 	...QrCode$1,
 	Root: QrCodeRoot
 });

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

@@ -9,7 +9,29 @@ type RadioGroupOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function RadioGroupRoot(props: RadioGroupRootProps & RadioGroupOwnProps): import("solid-js").JSX.Element;
-export declare const RadioGroup: typeof RadioGroupRoot & Omit<typeof RadioGroup$1, "Root"> & {
+export type RadioGroupItem = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+/** The complete radio group behind one choice and its named rows. */
+export interface RadioGroupFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: RadioGroupItem[];
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung for the dial; the chosen dot rides it. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+declare function RadioGroupFacade(props: RadioGroupFacadeProps): import("solid-js").JSX.Element;
+type RadioGroupParts = Omit<typeof RadioGroup$1, "Root"> & {
   Root: typeof RadioGroupRoot;
 };
+export declare const RadioGroup: typeof RadioGroupFacade & RadioGroupParts;
 //#endregion

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

@@ -2,7 +2,7 @@ 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 { For, Show, splitProps } from "solid-js";
 import { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
 //#region src/components/radio-group/index.tsx
 function RadioGroupRoot(props) {
@@ -17,7 +17,70 @@ function RadioGroupRoot(props) {
 		}
 	}));
 }
-const RadioGroup = defineFamily(RadioGroupRoot, {
+function RadioGroupFacade(props) {
+	injectComponentStyle("radio-group");
+	return createComponent(RadioGroupRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get required() {
+			return props.required;
+		},
+		get orientation() {
+			return props.orientation ?? "vertical";
+		},
+		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(RadioGroup$1.Label, { get children() {
+						return props.label;
+					} });
+				}
+			}), createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item) => createComponent(RadioGroup$1.Item, {
+					get value() {
+						return item.value;
+					},
+					get disabled() {
+						return item.disabled;
+					},
+					get children() {
+						return [
+							createComponent(RadioGroup$1.ItemControl, {}),
+							createComponent(RadioGroup$1.ItemText, { get children() {
+								return item.label;
+							} }),
+							createComponent(RadioGroup$1.ItemHiddenInput, {})
+						];
+					}
+				})
+			})];
+		}
+	}));
+}
+const RadioGroup = defineFamily(RadioGroupFacade, {
 	...RadioGroup$1,
 	Root: RadioGroupRoot
 });

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

@@ -9,7 +9,21 @@ type RatingGroupOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function RatingGroupRoot(props: RatingGroupRootProps & RatingGroupOwnProps): import("solid-js").JSX.Element;
-export declare const RatingGroup: typeof RatingGroupRoot & Omit<typeof RatingGroup$1, "Root"> & {
+/** The complete whole-star rating behind one numeric value. */
+export interface RatingGroupFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  label?: string;
+  count?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** One rung of the control-height ladder every seal stands on. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: number) => void;
+}
+declare function RatingGroupFacade(props: RatingGroupFacadeProps): import("solid-js").JSX.Element;
+type RatingGroupParts = Omit<typeof RatingGroup$1, "Root"> & {
   Root: typeof RatingGroupRoot;
 };
+export declare const RatingGroup: typeof RatingGroupFacade & RatingGroupParts;
 //#endregion

package/dist/components/rating-group/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 { createComponent, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { For, Show, splitProps } from "solid-js";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/solid/rating-group";
 //#region src/components/rating-group/index.tsx
 function RatingGroupRoot(props) {
@@ -17,7 +18,55 @@ function RatingGroupRoot(props) {
 		}
 	}));
 }
-const RatingGroup = defineFamily(RatingGroupRoot, {
+function RatingGroupFacade(props) {
+	injectComponentStyle("rating-group");
+	return createComponent(RatingGroupRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get count() {
+			return props.count ?? 5;
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get defaultValue() {
+			return props.defaultValue ?? 0;
+		}
+	}, () => {
+		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(RatingGroup$1.Label, { get children() {
+						return props.label;
+					} });
+				}
+			}), createComponent(RatingGroup$1.Control, { get children() {
+				return [createComponent(RatingGroup$1.Context, { children: (context) => createComponent(For, {
+					get each() {
+						return context().items;
+					},
+					children: (item) => createComponent(RatingGroup$1.Item, {
+						index: item,
+						get children() {
+							return iconNode("star");
+						}
+					})
+				}) }), createComponent(RatingGroup$1.HiddenInput, {})];
+			} })];
+		}
+	}));
+}
+const RatingGroup = defineFamily(RatingGroupFacade, {
 	...RatingGroup$1,
 	Root: RatingGroupRoot
 });

package/dist/components/scroll-area/index.d.mts

@@ -1,11 +1,19 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } 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. */
-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"> & {
+declare function ScrollAreaRoot(props: ComponentProps<typeof ScrollArea$1.Root>): JSX.Element;
+export interface ScrollAreaFacadeProps {
+  class?: string;
+  orientation?: "vertical" | "horizontal" | "both";
+  children?: JSX.Element;
+}
+/** The complete scroll vessel around caller content, with one or both quiet
+ * lanes depending on orientation. */
+declare function ScrollAreaFacade(props: ScrollAreaFacadeProps): JSX.Element;
+export declare const ScrollArea: typeof ScrollAreaFacade & Omit<typeof ScrollArea$1, "Root"> & {
   Root: typeof ScrollAreaRoot;
 };
 //#endregion

package/dist/components/scroll-area/index.mjs

@@ -1,19 +1,51 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { createComponent, mergeProps } from "solid-js";
+import { For, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/scroll-area";
-//#region src/components/scroll-area/index.ts
+//#region src/components/scroll-area/index.tsx
 /** 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. */
 function ScrollAreaRoot(props) {
 	const id = useElementId("scroll-area", () => props.id);
-	return createComponent(ScrollArea$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(ScrollArea$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const ScrollArea = defineFamily(ScrollAreaRoot, {
+/** The complete scroll vessel around caller content, with one or both quiet
+* lanes depending on orientation. */
+function ScrollAreaFacade(props) {
+	const orientations = () => props.orientation === "both" ? ["vertical", "horizontal"] : [props.orientation ?? "vertical"];
+	return createComponent(ScrollAreaRoot, {
+		get "class"() {
+			return props.class;
+		},
+		get children() {
+			return [
+				createComponent(ScrollArea$1.Viewport, { get children() {
+					return createComponent(ScrollArea$1.Content, { get children() {
+						return props.children;
+					} });
+				} }),
+				createComponent(For, {
+					get each() {
+						return orientations();
+					},
+					children: (orientation) => createComponent(ScrollArea$1.Scrollbar, {
+						orientation,
+						get children() {
+							return createComponent(ScrollArea$1.Thumb, {});
+						}
+					})
+				}),
+				createComponent(ScrollArea$1.Corner, {})
+			];
+		}
+	});
+}
+const ScrollArea = defineFamily(ScrollAreaFacade, {
 	...ScrollArea$1,
 	Root: ScrollAreaRoot
 });

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

@@ -8,10 +8,33 @@ type SegmentGroupOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SegmentGroupRoot(props: SegmentGroupRootProps & SegmentGroupOwnProps): import("solid-js").JSX.Element;
-/** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
- * where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
- * ItemHiddenInput. */
-export declare const SegmentGroup: typeof SegmentGroupRoot & Omit<typeof SegmentGroup$1, "Root"> & {
+export type SegmentGroupItem = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+/** The complete segmented choice behind one value and its named seals. */
+export interface SegmentGroupFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: SegmentGroupItem[];
+  label?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /** One rung of the control-height ladder for the segments. The
+   * family keeps its compact register, so the rungs sit one notch
+   * below the global ladder - the default md rests at the small
+   * height. */
+  size?: "sm" | "md" | "lg";
+  /** The tray reads as one row of seals; the underlying machine
+   * defaults to a vertical stack, so the horizontal row is ours to
+   * assert. */
+  orientation?: "horizontal" | "vertical";
+  onValueChange?: (value: string) => void;
+}
+declare function SegmentGroupFacade(props: SegmentGroupFacadeProps): import("solid-js").JSX.Element;
+type SegmentGroupParts = Omit<typeof SegmentGroup$1, "Root"> & {
   Root: typeof SegmentGroupRoot;
 };
+export declare const SegmentGroup: typeof SegmentGroupFacade & SegmentGroupParts;
 //#endregion

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

@@ -1,13 +1,14 @@
 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 { createComponent, mergeProps, splitProps } from "solid-js";
+import { For, Show, createComponent as createComponent$1, mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/solid/segment-group";
 //#region src/components/segment-group/index.tsx
 function SegmentGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
 	const id = useElementId("segment-group", () => rest.id);
-	return createComponent(SegmentGroup$1.Root, mergeProps(rest, {
+	return createComponent$1(SegmentGroup$1.Root, mergeProps$1(rest, {
 		get "data-size"() {
 			return own.size ?? "md";
 		},
@@ -16,10 +17,68 @@ function SegmentGroupRoot(props) {
 		}
 	}));
 }
-/** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
-* where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
-* ItemHiddenInput. */
-const SegmentGroup = defineFamily(SegmentGroupRoot, {
+function SegmentGroupFacade(props) {
+	injectComponentStyle("segment-group");
+	return createComponent(SegmentGroupRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		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(SegmentGroup$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(SegmentGroup$1.Indicator, {}),
+				createComponent(For, {
+					get each() {
+						return props.items;
+					},
+					children: (item) => createComponent(SegmentGroup$1.Item, {
+						get value() {
+							return item.value;
+						},
+						get disabled() {
+							return item.disabled;
+						},
+						get children() {
+							return [
+								createComponent(SegmentGroup$1.ItemText, { get children() {
+									return item.label;
+								} }),
+								createComponent(SegmentGroup$1.ItemControl, {}),
+								createComponent(SegmentGroup$1.ItemHiddenInput, {})
+							];
+						}
+					})
+				})
+			];
+		}
+	}));
+}
+const SegmentGroup = defineFamily(SegmentGroupFacade, {
 	...SegmentGroup$1,
 	Root: SegmentGroupRoot
 });

package/dist/components/signature-pad/index.d.mts

@@ -6,7 +6,22 @@ import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
  * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
  * ClearTrigger, HiddenInput, Context. */
 declare function SignaturePadRoot(props: ComponentProps<typeof SignaturePad$1.Root>): import("solid-js").JSX.Element;
-export declare const SignaturePad: typeof SignaturePadRoot & Omit<typeof SignaturePad$1, "Root"> & {
+/** The one-tag path: the paper, guide, clear control, and hidden form
+ * value; stroke previews and drawing events stay on the anatomy. */
+export interface SignaturePadFacadeProps {
+  value?: string[];
+  defaultValue?: string[];
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  /** Show the reset control. */
+  clearable?: boolean;
+  onValueChange?: (value: string[]) => void;
+}
+declare function SignaturePadFacade(props: SignaturePadFacadeProps): import("solid-js").JSX.Element;
+type SignaturePadParts = Omit<typeof SignaturePad$1, "Root"> & {
   Root: typeof SignaturePadRoot;
 };
+export declare const SignaturePad: typeof SignaturePadFacade & SignaturePadParts;
 //#endregion