@bysages/solid 0.3.1 → 0.4.0

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

@@ -1,3 +1,4 @@
+import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { JSX } from "solid-js";
 import { DatePickerRootProps } from "@ark-ui/solid/date-picker";
 //#region src/components/calendar/index.d.ts
@@ -13,5 +14,6 @@ export interface CalendarProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * title zooms out through month and year grids; the grids themselves
  * are the shared machinery — value, range selection, and focus ride
  * Ark's own contract. */
-export declare function Calendar(props: CalendarProps): JSX.Element;
+declare function CalendarImpl(props: CalendarProps): JSX.Element;
+export declare const Calendar: typeof CalendarImpl & typeof DatePicker$1;
 //#endregion

package/dist/components/calendar/index.mjs

@@ -1,32 +1,36 @@
+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 { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, memo, mergeProps, readShallow, spread, style, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, splitProps } from "solid-js";
 import { DatePicker } from "@ark-ui/solid/date-picker";
 //#region src/components/calendar/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 aria-hidden=true><path d="m9 5 7 7-7 7">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=calendar data-part=header>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=calendar data-part=header>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
 function chevron(dir) {
-	var _el$ = _tmpl$();
-	effect(() => readShallow(dir === "left" ? { transform: "rotate(180deg)" } : void 0), (_v$, _$p) => {
-		style(_el$, _v$, _$p);
+	return iconNode(dir === "left" ? "chevron-left" : "chevron-right", {
+		width: "16",
+		height: "16"
 	});
-	return _el$;
 }
 /** The date-picker's month grid, standing on the page without its
 * popup: always open, the trigger gone, the vessel a quiet card. The
 * title zooms out through month and year grids; the grids themselves
 * are the shared machinery — value, range selection, and focus ride
 * Ark's own contract. */
-function Calendar(props) {
+function CalendarImpl(props) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
 	const [own, rest] = splitProps(props, [
+		"id",
 		"value",
 		"min",
 		"max",
 		"onValueChange"
 	]);
+	const id = useElementId("calendar", () => own.id);
 	const title = (dp) => {
 		const api = dp();
 		const d = api.focusedValue;
@@ -40,8 +44,8 @@ function Calendar(props) {
 		return `${decade} - ${decade + 9}`;
 	};
 	const header = () => (() => {
-		var _el$2 = _tmpl$2();
-		insert(_el$2, createComponent(DatePicker.ViewControl, { get children() {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(DatePicker.ViewControl, { get children() {
 			return [
 				createComponent(DatePicker.PrevTrigger, { get children() {
 					return chevron("left");
@@ -54,16 +58,19 @@ function Calendar(props) {
 				} })
 			];
 		} }));
-		return _el$2;
+		return _el$;
 	})();
-	var _el$3 = _tmpl$3();
-	var _el$4 = _el$3.firstChild;
-	var _el$5 = _el$4.nextSibling;
-	spread(_el$3, [rest, {
+	var _el$2 = _tmpl$2();
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.nextSibling;
+	spread(_el$2, [rest, {
 		"data-scope": "calendar",
 		"data-part": "root"
 	}], true);
-	insert(_el$3, createComponent(DatePicker.Root, mergeProps({
+	insert(_el$2, createComponent(DatePicker.Root, mergeProps({
+		get id() {
+			return id();
+		},
 		open: true,
 		closeOnSelect: true,
 		inline: true
@@ -194,16 +201,17 @@ function Calendar(props) {
 				})
 			];
 		}
-	})), _el$4);
-	insert(_el$3, createComponent(Show, {
+	})), _el$3);
+	insert(_el$2, createComponent(Show, {
 		get when() {
 			return rest.children;
 		},
 		get children() {
 			return rest.children;
 		}
-	}), _el$5);
-	return _el$3;
+	}), _el$4);
+	return _el$2;
 }
+const Calendar = defineFamily(CalendarImpl, DatePicker$1);
 //#endregion
 export { Calendar };

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

@@ -1,3 +1,4 @@
+import { ComponentProps } from "solid-js";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 //#region src/components/carousel/index.d.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -5,5 +6,8 @@ import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
  * current indicator alone carries the ink. The API is Ark's own — Root,
  * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
  * Indicator, AutoplayTrigger, ProgressText. */
-export declare const Carousel: typeof Carousel$1;
+declare function CarouselRoot(props: ComponentProps<typeof Carousel$1.Root>): import("solid-js").JSX.Element;
+export declare const Carousel: typeof CarouselRoot & Omit<typeof Carousel$1, "Root"> & {
+  Root: typeof CarouselRoot;
+};
 //#endregion

package/dist/components/carousel/index.mjs

@@ -1,4 +1,7 @@
+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 "solid-js";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 //#region src/components/carousel/index.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -6,7 +9,16 @@ import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 * current indicator alone carries the ink. The API is Ark's own — Root,
 * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
 * Indicator, AutoplayTrigger, ProgressText. */
-const Carousel = Carousel$1;
+function CarouselRoot(props) {
+	const id = useElementId("carousel", () => props.id);
+	return createComponent(Carousel$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Carousel = defineFamily(CarouselRoot, {
+	...Carousel$1,
+	Root: CarouselRoot
+});
 injectComponentStyle("carousel");
 //#endregion
 export { Carousel };

package/dist/components/cascade-select/index.d.mts

@@ -27,5 +27,7 @@ export interface CascadeSelectProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * swaps the corridor for a flat list of matching paths while a query
  * runs — each hit still reads as its full route.
  */
-export declare function CascadeSelect(props: CascadeSelectProps): JSX.Element;
+export declare const CascadeSelect: ((props: CascadeSelectProps) => JSX.Element) & {
+  Root: (props: CascadeSelectProps) => JSX.Element;
+};
 //#endregion

package/dist/components/cascade-select/index.mjs

@@ -1,33 +1,33 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { t as Input } from "../../input-CPAJdwDb.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
-import { For, Show, createMemo, createSignal, createUniqueId, mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { For, Show, createMemo, createSignal, mergeProps as mergeProps$1, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { useEnvironmentContext } from "@ark-ui/solid/environment";
 import { useFilter, useLocaleContext } from "@ark-ui/solid/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/solid";
 //#region src/components/cascade-select/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<ul>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<span data-scope=cascade-select data-part=branch-indicator aria-hidden=true>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<li><span></span><span>`);
-var _tmpl$7 = /* @__PURE__ */ template(`<div data-scope=cascade-select data-part=search>`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div><div><div data-scope=cascade-select data-part=corridor>`);
-var _tmpl$9 = /* @__PURE__ */ template(`<div><div><button><span></span><span>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<p data-scope=cascade-select data-part=empty>Nothing matches`);
-var _tmpl$11 = /* @__PURE__ */ template(`<button type=button data-scope=cascade-select data-part=match>`);
+var _tmpl$ = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=cascade-select data-part=branch-indicator aria-hidden=true>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<li><span></span><span>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=cascade-select data-part=search>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><div><div data-scope=cascade-select data-part=corridor>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><div><button><span></span><span>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<p data-scope=cascade-select data-part=empty>Nothing matches`);
+var _tmpl$8 = /* @__PURE__ */ template(`<button type=button data-scope=cascade-select data-part=match>`);
 function chevronDown() {
-	return _tmpl$();
+	return iconNode("chevron-down");
 }
 function chevronRight() {
-	return _tmpl$2();
+	return iconNode("chevron-right");
 }
-function checkGlyph() {
-	return _tmpl$3();
+function checkIcon() {
+	return iconNode("check");
 }
 /**
 * A corridor of linked columns: pick a branch and the next column
@@ -38,7 +38,7 @@ function checkGlyph() {
 * swaps the corridor for a flat list of matching paths while a query
 * runs — each hit still reads as its full route.
 */
-function CascadeSelect(props) {
+const CascadeSelect = withSelfRoot(function CascadeSelect(props) {
 	const messages = useComponentMessages();
 	injectComponentStyle("cascade-select");
 	const [own, rest] = splitProps(props, [
@@ -49,10 +49,11 @@ function CascadeSelect(props) {
 		"filterable",
 		"multiple",
 		"disabled",
+		"id",
 		"size",
 		"onValueChange"
 	]);
-	const id = createUniqueId();
+	const id = useElementId("cascade-select", () => own.id)();
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
 	const collection = createMemo(() => cascade.collection({
@@ -143,11 +144,11 @@ function CascadeSelect(props) {
 		};
 		const nodeState = () => api().getItemState(nodeProps);
 		const children = collection().getNodeChildren(node);
-		var _el$4 = _tmpl$4();
-		spread(_el$4, () => {
+		var _el$ = _tmpl$();
+		spread(_el$, () => {
 			return mergeProps$1(() => api().getListProps(nodeProps));
 		}, true);
-		insert(_el$4, createComponent(For, {
+		insert(_el$, createComponent(For, {
 			each: children,
 			children: (item, index) => {
 				const itemValue = collection().getNodeValue(item);
@@ -157,45 +158,45 @@ function CascadeSelect(props) {
 					value: [...valuePath, itemValue]
 				};
 				const itemState = () => api().getItemState(itemProps);
-				var _el$5 = _tmpl$6();
-				var _el$6 = _el$5.firstChild;
-				var _el$8 = _el$6.nextSibling;
-				spread(_el$5, () => {
+				var _el$2 = _tmpl$3();
+				var _el$3 = _el$2.firstChild;
+				var _el$5 = _el$3.nextSibling;
+				spread(_el$2, () => {
 					return mergeProps$1(() => api().getItemProps(itemProps));
 				}, true);
-				spread(_el$6, () => {
+				spread(_el$3, () => {
 					return mergeProps$1(() => api().getItemTextProps(itemProps));
 				}, true);
-				insert(_el$6, () => {
+				insert(_el$3, () => {
 					return item.label;
 				});
-				insert(_el$5, createComponent(Show, {
+				insert(_el$2, createComponent(Show, {
 					get when() {
 						return itemState().hasChildren;
 					},
 					get children() {
-						var _el$7 = _tmpl$5();
-						insert(_el$7, chevronRight);
-						return _el$7;
+						var _el$4 = _tmpl$2();
+						insert(_el$4, chevronRight);
+						return _el$4;
 					}
-				}), _el$8);
-				spread(_el$8, () => {
+				}), _el$5);
+				spread(_el$5, () => {
 					return mergeProps$1(() => api().getItemIndicatorProps(itemProps));
 				}, true);
-				insert(_el$8, checkGlyph);
-				return _el$5;
+				insert(_el$5, checkIcon);
+				return _el$2;
 			}
 		}));
-		const list = _el$4;
+		const list = _el$;
 		const next = nodeState().highlightedChild;
 		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
 	}
-	var _el$9 = _tmpl$9();
-	var _el$10 = _el$9.firstChild;
-	var _el$11 = _el$10.firstChild;
-	var _el$12 = _el$11.firstChild;
-	var _el$13 = _el$12.nextSibling;
-	spread(_el$9, [
+	var _el$6 = _tmpl$6();
+	var _el$7 = _el$6.firstChild;
+	var _el$8 = _el$7.firstChild;
+	var _el$9 = _el$8.firstChild;
+	var _el$10 = _el$9.nextSibling;
+	spread(_el$6, [
 		rest,
 		() => {
 			return mergeProps$1(() => api().getRootProps());
@@ -204,10 +205,10 @@ function CascadeSelect(props) {
 			return own.size ?? "md";
 		} }
 	], true);
-	spread(_el$10, () => {
+	spread(_el$7, () => {
 		return mergeProps$1(() => api().getControlProps());
 	}, true);
-	spread(_el$11, () => {
+	spread(_el$8, () => {
 		return mergeProps$1(() => api().getTriggerProps(), {
 			"aria-labelledby": id + ":value-text",
 			get disabled() {
@@ -219,35 +220,35 @@ function CascadeSelect(props) {
 			}
 		});
 	}, true);
-	spread(_el$12, () => {
-		return mergeProps$1(() => api().getValueTextProps(), { id: id + ":value-text" });
+	spread(_el$9, () => {
+		return mergeProps$1(() => api().getValueTextProps(), { id: `${id}:value-text` });
 	}, true);
-	insert(_el$12, () => {
+	insert(_el$9, () => {
 		return display() ?? own.placeholder ?? "Select…";
 	});
-	spread(_el$13, () => {
+	spread(_el$10, () => {
 		return mergeProps$1(() => api().getIndicatorProps());
 	}, true);
-	insert(_el$13, chevronDown);
-	insert(_el$9, createComponent(Portal, { get children() {
-		var _el$14 = _tmpl$8();
-		var _el$15 = _el$14.firstChild;
-		var _el$17 = _el$15.firstChild;
-		spread(_el$14, () => {
+	insert(_el$10, chevronDown);
+	insert(_el$6, createComponent(Portal, { get children() {
+		var _el$11 = _tmpl$5();
+		var _el$12 = _el$11.firstChild;
+		var _el$14 = _el$12.firstChild;
+		spread(_el$11, () => {
 			return mergeProps$1(() => api().getPositionerProps());
 		}, true);
-		spread(_el$15, [() => {
+		spread(_el$12, [() => {
 			return mergeProps$1(() => api().getContentProps());
 		}, { get "data-size"() {
 			return own.size ?? "md";
 		} }], true);
-		insert(_el$15, createComponent(Show, {
+		insert(_el$12, createComponent(Show, {
 			get when() {
 				return own.filterable;
 			},
 			get children() {
-				var _el$16 = _tmpl$7();
-				insert(_el$16, createComponent(Input, {
+				var _el$13 = _tmpl$4();
+				insert(_el$13, createComponent(Input, {
 					size: "sm",
 					get value() {
 						return query();
@@ -260,10 +261,10 @@ function CascadeSelect(props) {
 						return messages().select.filter;
 					}
 				}));
-				return _el$16;
+				return _el$13;
 			}
-		}), _el$17);
-		insert(_el$17, createComponent(Show, {
+		}), _el$14);
+		insert(_el$14, createComponent(Show, {
 			get when() {
 				return !filtering();
 			},
@@ -273,7 +274,7 @@ function CascadeSelect(props) {
 						return matchPaths().length > 0;
 					},
 					get fallback() {
-						return _tmpl$10();
+						return _tmpl$7();
 					},
 					get children() {
 						return createComponent(For, {
@@ -281,15 +282,15 @@ function CascadeSelect(props) {
 								return matchPaths();
 							},
 							children: (hit) => (() => {
-								var _el$19 = _tmpl$11();
-								_el$19._$$click = () => pickMatch(hit.path);
-								insert(_el$19, () => {
+								var _el$16 = _tmpl$8();
+								_el$16._$$click = () => pickMatch(hit.path);
+								insert(_el$16, () => {
 									return hit.labels.join(" / ");
 								});
 								effect(() => isSelected(hit.path) || void 0, (_v$) => {
-									setAttribute(_el$19, "data-selected", _v$);
+									setAttribute(_el$16, "data-selected", _v$);
 								});
-								return _el$19;
+								return _el$16;
 							})()
 						});
 					}
@@ -300,12 +301,12 @@ function CascadeSelect(props) {
 			}
 		}));
 		effect(() => filtering() ? "flat" : "columns", (_v$) => {
-			setAttribute(_el$17, "data-flow", _v$);
+			setAttribute(_el$14, "data-flow", _v$);
 		});
-		return _el$14;
+		return _el$11;
 	} }), null);
-	return _el$9;
-}
+	return _el$6;
+});
 delegateEvents(["click"]);
 //#endregion
 export { CascadeSelect };

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

@@ -9,7 +9,7 @@ type CheckboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function CheckboxRoot(props: CheckboxRootProps & CheckboxOwnProps): import("solid-js").JSX.Element;
-export declare const Checkbox: Omit<typeof Checkbox$1, "Root"> & {
+export declare const Checkbox: typeof CheckboxRoot & Omit<typeof Checkbox$1, "Root"> & {
   Root: typeof CheckboxRoot;
 };
 //#endregion

package/dist/components/checkbox/index.mjs

@@ -1,3 +1,5 @@
+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";
@@ -5,14 +7,20 @@ import { Checkbox as Checkbox$1 } from "@ark-ui/solid/checkbox";
 //#region src/components/checkbox/index.tsx
 function CheckboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Checkbox$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("checkbox", () => rest.id);
+	return createComponent(Checkbox$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Checkbox = {
+const Checkbox = defineFamily(CheckboxRoot, {
 	...Checkbox$1,
 	Root: CheckboxRoot
-};
+});
 injectComponentStyle("checkbox");
 //#endregion
 export { Checkbox };

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

@@ -1,3 +1,4 @@
+import { Checkbox } from "../checkbox/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/checkbox-group/index.d.ts
 export interface CheckboxOption {
@@ -7,6 +8,7 @@ export interface CheckboxOption {
 }
 export interface CheckboxGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
   value?: string[];
+  defaultValue?: string[];
   options: CheckboxOption[];
   layout?: "vertical" | "horizontal";
   /** One register for every box: falls onto each root's data-size for
@@ -16,13 +18,6 @@ export interface CheckboxGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   onValueChange?: (value: string[]) => void;
 }
-/**
- * One question, many answers: a labelled stack (or row) of the seal-cut
- * checkboxes bound to a single array. Toggling a box adds or removes its
- * value; the group itself is semantics (`role="group"`), the boxes stay
- * the machine-driven originals. Inside a `Field.Root` the group picks up
- * the field context, so the invalid and disabled states a Form routes to
- * its name dress every box at once.
- */
-export declare function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;
+declare function CheckboxGroupImpl(props: CheckboxGroupProps): JSX.Element;
+export declare const CheckboxGroup: typeof CheckboxGroupImpl & typeof Checkbox;
 //#endregion