@bysages/solid 0.4.1 → 0.4.2

package/dist/components/signature-pad/index.mjs

@@ -1,20 +1,79 @@
 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 { createComponent, mergeProps } from "solid-js";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
-//#region src/components/signature-pad/index.ts
+//#region src/components/signature-pad/index.tsx
 /** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
 * field with a guide hairline where ink — real ink strokes — is laid down.
 * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
 * ClearTrigger, HiddenInput, Context. */
 function SignaturePadRoot(props) {
 	const id = useElementId("signature-pad", () => props.id);
-	return createComponent(SignaturePad$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(SignaturePad$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const SignaturePad = defineFamily(SignaturePadRoot, {
+function SignaturePadFacade(props) {
+	injectComponentStyle("signature-pad");
+	return createComponent(SignaturePadRoot, mergeProps({
+		get disabled() {
+			return props.disabled;
+		},
+		get required() {
+			return props.required;
+		},
+		get defaultPaths() {
+			return props.defaultValue;
+		},
+		get "data-invalid"() {
+			return props.invalid || void 0;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { paths: props.value };
+	}, {
+		onDraw: (details) => props.onValueChange?.(details.paths),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(SignaturePad$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(SignaturePad$1.Control, { get children() {
+					return [
+						createComponent(SignaturePad$1.Segment, {}),
+						createComponent(Show, {
+							get when() {
+								return props.clearable !== false;
+							},
+							get children() {
+								return createComponent(SignaturePad$1.ClearTrigger, { get children() {
+									return iconNode("undo", {
+										width: "14",
+										height: "14"
+									});
+								} });
+							}
+						}),
+						createComponent(SignaturePad$1.Guide, {})
+					];
+				} }),
+				createComponent(SignaturePad$1.Context, { children: (signaturePad) => createComponent(SignaturePad$1.HiddenInput, { get value() {
+					return signaturePad().paths.join(" ");
+				} }) })
+			];
+		}
+	}));
+}
+const SignaturePad = defineFamily(SignaturePadFacade, {
 	...SignaturePad$1,
 	Root: SignaturePadRoot
 });

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

@@ -9,7 +9,26 @@ type SliderOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SliderRoot(props: SliderRootProps & SliderOwnProps): import("solid-js").JSX.Element;
-export declare const Slider: typeof SliderRoot & Omit<typeof Slider$1, "Root"> & {
+export interface SliderFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  label?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the part-size ladder for the thumb seal. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: number) => void;
+}
+/** The common single-value slider; ranges and markers stay on the anatomy. */
+declare function SliderFacade(props: SliderFacadeProps): import("solid-js").JSX.Element;
+type SliderParts = Omit<typeof Slider$1, "Root"> & {
   Root: typeof SliderRoot;
 };
+export declare const Slider: typeof SliderFacade & SliderParts;
 //#endregion

package/dist/components/slider/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 { Show, splitProps } from "solid-js";
 import { Slider as Slider$1 } from "@ark-ui/solid/slider";
 //#region src/components/slider/index.tsx
 function SliderRoot(props) {
@@ -17,7 +17,71 @@ function SliderRoot(props) {
 		}
 	}));
 }
-const Slider = defineFamily(SliderRoot, {
+/** The common single-value slider; ranges and markers stay on the anatomy. */
+function SliderFacade(props) {
+	injectComponentStyle("slider");
+	return createComponent(SliderRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get min() {
+			return props.min ?? 0;
+		},
+		get max() {
+			return props.max ?? 100;
+		},
+		get step() {
+			return props.step ?? 1;
+		},
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get defaultValue() {
+			return [props.defaultValue ?? 50];
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: [props.value] };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(details.value.at(0) ?? props.min ?? 0),
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Slider$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Slider$1.ValueText, {}),
+				createComponent(Slider$1.Control, { get children() {
+					return [createComponent(Slider$1.Track, { get children() {
+						return createComponent(Slider$1.Range, {});
+					} }), createComponent(Slider$1.Thumb, {
+						index: 0,
+						get children() {
+							return createComponent(Slider$1.HiddenInput, { get required() {
+								return props.required;
+							} });
+						}
+					})];
+				} })
+			];
+		}
+	}));
+}
+const Slider = defineFamily(SliderFacade, {
 	...Slider$1,
 	Root: SliderRoot
 });

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

@@ -5,7 +5,21 @@ import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
  * a hairline and a small paper-seal thumb answers the hand. The API is
  * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
 declare function SplitterRoot(props: ComponentProps<typeof Splitter$1.Root>): import("solid-js").JSX.Element;
-export declare const Splitter: typeof SplitterRoot & Omit<typeof Splitter$1, "Root"> & {
+export type SplitterItem = {
+  id: string;
+  label: string;
+};
+export interface SplitterFacadeProps {
+  items: SplitterItem[];
+  defaultValue?: number[];
+  value?: number[];
+  orientation?: "horizontal" | "vertical";
+  onValueChange?: (value: number[]) => void;
+}
+/** The complete equal-height splitter; collapsed panels and custom panel
+ * bodies stay on the anatomy. */
+declare function SplitterFacade(props: SplitterFacadeProps): import("solid-js").JSX.Element;
+export declare const Splitter: typeof SplitterFacade & Omit<typeof Splitter$1, "Root"> & {
   Root: typeof SplitterRoot;
 };
 //#endregion

package/dist/components/splitter/index.mjs

@@ -1,19 +1,72 @@
 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 { For, Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
-//#region src/components/splitter/index.ts
+//#region src/components/splitter/index.tsx
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
 function SplitterRoot(props) {
 	const id = useElementId("splitter", () => props.id);
-	return createComponent(Splitter$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Splitter$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Splitter = defineFamily(SplitterRoot, {
+/** The complete equal-height splitter; collapsed panels and custom panel
+* bodies stay on the anatomy. */
+function SplitterFacade(props) {
+	injectComponentStyle("splitter");
+	const panels = () => props.items.map((item) => ({ id: item.id }));
+	return createComponent(SplitterRoot, mergeProps({
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get panels() {
+			return panels();
+		},
+		get defaultSize() {
+			return props.defaultValue;
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { size: props.value };
+	}, {
+		onResize: (size) => props.onValueChange?.(size.size),
+		get children() {
+			return createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item, index) => {
+					const next = () => props.items.at(index() + 1);
+					return [createComponent(Splitter$1.Panel, {
+						get id() {
+							return item.id;
+						},
+						get children() {
+							return item.label;
+						}
+					}), createComponent(Show, {
+						get when() {
+							return next();
+						},
+						children: (nextItem) => createComponent(Splitter$1.ResizeTrigger, {
+							get id() {
+								return `${item.id}:${nextItem().id}`;
+							},
+							"aria-label": "Resize panels",
+							get children() {
+								return createComponent(Splitter$1.ResizeTriggerIndicator, {});
+							}
+						})
+					})];
+				}
+			});
+		}
+	}));
+}
+const Splitter = defineFamily(SplitterFacade, {
 	...Splitter$1,
 	Root: SplitterRoot
 });

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

@@ -8,11 +8,13 @@ import { Steps as Steps$1, StepsRootProps } from "@ark-ui/solid/steps";
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
-type StepsRootProps$1 = StepsRootProps & StepsOwnProps;
 type StepsOwnProps = {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
+  /** Default renders numbered seals; dot reduces each step to a bead. */
+  variant?: "default" | "dot";
 };
+type StepsRootProps$1 = StepsRootProps & StepsOwnProps;
 declare function StepsRoot(props: StepsRootProps$1): import("solid-js").JSX.Element;
 type StepsItem = {
   title: string;
@@ -25,6 +27,8 @@ export interface StepsFacadeProps {
   orientation?: "horizontal" | "vertical";
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
+  /** Default renders numbered seals; dot reduces each step to a bead. */
+  variant?: "default" | "dot";
   class?: string;
   onStepChange?: (step: number) => void;
 }

package/dist/components/steps/index.mjs

@@ -6,7 +6,7 @@ import { For, splitProps } from "solid-js";
 import { Steps as Steps$1 } from "@ark-ui/solid/steps";
 //#region src/components/steps/index.tsx
 function StepsRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
+	const [own, rest] = splitProps(props, ["size", "variant"]);
 	const id = useElementId("steps", () => rest.id);
 	return createComponent(Steps$1.Root, mergeProps(rest, {
 		get id() {
@@ -14,11 +14,17 @@ function StepsRoot(props) {
 		},
 		get "data-size"() {
 			return own.size ?? "md";
+		},
+		get "data-variant"() {
+			return memo(() => {
+				return own.variant === "dot";
+			})() ? own.variant : void 0;
 		}
 	}));
 }
 function StepsFacade(props) {
 	injectComponentStyle("steps");
+	const variant = props.variant ?? "default";
 	return createComponent(StepsRoot, mergeProps({
 		get "class"() {
 			return props.class;
@@ -26,6 +32,7 @@ function StepsFacade(props) {
 		get size() {
 			return props.size ?? "md";
 		},
+		variant,
 		get count() {
 			return props.items.length;
 		},
@@ -56,7 +63,7 @@ function StepsFacade(props) {
 						get children() {
 							return [createComponent(Steps$1.Trigger, { get children() {
 								return [createComponent(Steps$1.Indicator, { get children() {
-									return String(index() + 1);
+									return variant === "dot" ? null : String(index() + 1);
 								} }), memo(() => {
 									return item.title;
 								})];

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

@@ -1,12 +1,20 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { Swap as Swap$1 } from "@ark-ui/solid/swap";
 //#region src/components/swap/index.d.ts
 /** Ark's Swap, dressed in the paper-and-ink system: two impressions
  * occupying one seal, the arriving one growing into place on the spring
  * while the departing one shrinks away. The API is Ark's own — Root,
  * Indicator (type="on" | "off"), RootProvider. */
-declare function SwapRoot(props: ComponentProps<typeof Swap$1.Root>): import("solid-js").JSX.Element;
-export declare const Swap: typeof SwapRoot & Omit<typeof Swap$1, "Root"> & {
+declare function SwapRoot(props: ComponentProps<typeof Swap$1.Root>): JSX.Element;
+export interface SwapFacadeProps {
+  swap?: boolean;
+  on?: JSX.Element;
+  off?: JSX.Element;
+}
+/** The one-tag path for the default check/cross impression; custom
+ * transitions and indicators stay on the anatomy with `on`/`off` props. */
+declare function SwapFacade(props: SwapFacadeProps): JSX.Element;
+export declare const Swap: typeof SwapFacade & Omit<typeof Swap$1, "Root"> & {
   Root: typeof SwapRoot;
 };
 //#endregion

package/dist/components/swap/index.mjs

@@ -1,20 +1,50 @@
 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 } 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 { Swap as Swap$1 } from "@ark-ui/solid/swap";
-//#region src/components/swap/index.ts
+//#region src/components/swap/index.tsx
 /** Ark's Swap, dressed in the paper-and-ink system: two impressions
 * occupying one seal, the arriving one growing into place on the spring
 * while the departing one shrinks away. The API is Ark's own — Root,
 * Indicator (type="on" | "off"), RootProvider. */
 function SwapRoot(props) {
 	const id = useElementId("swap", () => props.id);
-	return createComponent(Swap$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Swap$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Swap = defineFamily(SwapRoot, {
+/** The one-tag path for the default check/cross impression; custom
+* transitions and indicators stay on the anatomy with `on`/`off` props. */
+function SwapFacade(props) {
+	return createComponent(SwapRoot, {
+		get swap() {
+			return props.swap ?? false;
+		},
+		get children() {
+			return [createComponent(Swap$1.Indicator, {
+				type: "on",
+				get children() {
+					return props.on ?? iconNode("check", {
+						width: "14",
+						height: "14"
+					});
+				}
+			}), createComponent(Swap$1.Indicator, {
+				type: "off",
+				get children() {
+					return props.off ?? iconNode("x", {
+						width: "14",
+						height: "14"
+					});
+				}
+			})];
+		}
+	});
+}
+const Swap = defineFamily(SwapFacade, {
 	...Swap$1,
 	Root: SwapRoot
 });

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

@@ -9,7 +9,22 @@ type SwitchOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function SwitchRoot(props: SwitchRootProps & SwitchOwnProps): import("solid-js").JSX.Element;
-export declare const Switch: typeof SwitchRoot & Omit<typeof Switch$1, "Root"> & {
+/** The complete switch behind one on/off state and its label. */
+export interface SwitchFacadeProps {
+  checked?: boolean;
+  defaultValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** One rung for the thumb; the track travels with it. */
+  size?: "sm" | "md" | "lg";
+  onCheckedChange?: (checked: boolean) => void;
+}
+declare function SwitchFacade(props: SwitchFacadeProps): import("solid-js").JSX.Element;
+type SwitchParts = Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
+export declare const Switch: typeof SwitchFacade & SwitchParts;
 //#endregion

package/dist/components/switch/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 { Show, splitProps } from "solid-js";
 import { Switch as Switch$1 } from "@ark-ui/solid/switch";
 //#region src/components/switch/index.tsx
 function SwitchRoot(props) {
@@ -17,7 +17,52 @@ function SwitchRoot(props) {
 		}
 	}));
 }
-const Switch = defineFamily(SwitchRoot, {
+function SwitchFacade(props) {
+	injectComponentStyle("switch");
+	return createComponent(SwitchRoot, 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 defaultChecked() {
+			return props.defaultValue ?? false;
+		}
+	}, () => {
+		return props.checked === void 0 ? {} : { checked: props.checked };
+	}, {
+		onCheckedChange: (details) => props.onCheckedChange?.(details.checked),
+		get children() {
+			return [
+				createComponent(Switch$1.Control, { get children() {
+					return createComponent(Switch$1.Thumb, {});
+				} }),
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Switch$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Switch$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const Switch = defineFamily(SwitchFacade, {
 	...Switch$1,
 	Root: SwitchRoot
 });

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

@@ -58,6 +58,8 @@ export interface DataTableProps {
   pageSizeOptions?: number[];
   /** Keep the (optional) footer row pinned to the viewport bottom. */
   stickyFooter?: boolean;
+  /** Band every other body row so wide measures keep the eye on line. */
+  striped?: boolean;
   initialSorting?: SortingState;
   globalFilterPlaceholder?: string;
   emptyText?: string;

package/dist/components/table/index.mjs

@@ -866,19 +866,21 @@ const DataTable = withSelfRoot(function DataTable(props) {
 	effect(() => {
 		return {
 			e: props.reorderable || void 0,
-			t: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
-			a: colsTemplate(),
-			o: mergeMode() || void 0,
-			i: virtual() || void 0,
-			n: readShallow(virtual() ? { "--bs-table-virtual-total": `${totalSize()}px` } : void 0)
+			t: props.striped || void 0,
+			a: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
+			o: colsTemplate(),
+			i: mergeMode() || void 0,
+			n: virtual() || void 0,
+			s: readShallow(virtual() ? { "--bs-table-virtual-total": `${totalSize()}px` } : void 0)
 		};
-	}, ({ e, t, a, o, i, n }, _p$) => {
+	}, ({ e, t, a, o, i, n, s }, _p$) => {
 		e !== _p$?.e && setAttribute(_el$11, "data-reorderable", e);
-		t !== _p$?.t && setStyleProperty(_el$11, "--bs-table-row-height", t);
-		a !== _p$?.a && setStyleProperty(_el$13, "--bs-table-cols", a);
-		o !== _p$?.o && setAttribute(_el$15, "data-merge", o);
-		i !== _p$?.i && setAttribute(_el$15, "data-virtual", i);
-		style(_el$15, n, _p$?.n);
+		t !== _p$?.t && setAttribute(_el$11, "data-striped", t);
+		a !== _p$?.a && setStyleProperty(_el$11, "--bs-table-row-height", a);
+		o !== _p$?.o && setStyleProperty(_el$13, "--bs-table-cols", o);
+		i !== _p$?.i && setAttribute(_el$15, "data-merge", i);
+		n !== _p$?.n && setAttribute(_el$15, "data-virtual", n);
+		style(_el$15, s, _p$?.s);
 	});
 	return _el$11;
 });

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

@@ -0,0 +1,29 @@
+import { JSX } from "solid-js";
+//#region src/components/tag/index.d.ts
+type TagTone = "ink" | "primary" | "success" | "warning" | "danger" | "info";
+type TagVariant = "solid" | "outline" | "subtle";
+export interface TagProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "ref"> {
+  /** The pigment the tag is inked with; ink is the solemn default,
+   * and the fixed pigments speak for their meaning. */
+  tone?: TagTone;
+  /** How the tag rests: a solid fill, an outline shell, a subtle
+   * wash. The pressed state always reads as solid. */
+  variant?: TagVariant;
+  /** Render the tag as a pressed button the consumer can toggle. */
+  checkable?: boolean;
+  /** The pressed state held from outside; omit it and the tag keeps
+   * its own state from `defaultValue`. */
+  checked?: boolean;
+  defaultValue?: boolean;
+  /** Render the quiet removal seal. */
+  closable?: boolean;
+  disabled?: boolean;
+  /** Reports the next pressed state from a checkable tag. */
+  onValueChange?: (checked: boolean) => void;
+  /** Reports a dismissal from the removal seal. */
+  onClose?: () => void;
+}
+export declare const Tag: ((props: TagProps) => JSX.Element) & {
+  Root: (props: TagProps) => JSX.Element;
+};
+//#endregion