@bysages/solid 0.4.1 → 0.4.2

package/dist/components/calendar/index.mjs

@@ -2,84 +2,252 @@ 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 { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, delegateEvents, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { For, Show, splitProps } from "solid-js";
+import { For, splitProps } from "solid-js";
 import { DatePicker } from "@ark-ui/solid/date-picker";
 //#region src/components/calendar/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=calendar data-part=header>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button data-scope=calendar data-part=today-trigger>Today`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=calendar data-part=header>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
 function chevron(dir) {
 	return iconNode(dir === "left" ? "chevron-left" : "chevron-right", {
 		width: "16",
 		height: "16"
 	});
 }
-/** 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. */
+/** The date-picker's grid standing on the page. Compact is the popup's
+* quiet card; full opens it into a dashboard calendar. Year mode starts
+* on a month overview; choosing a month drills into its day grid. */
 function CalendarImpl(props) {
 	injectComponentStyle("calendar");
 	injectComponentStyle("date-picker");
 	const [own, rest] = splitProps(props, [
 		"id",
 		"value",
+		"defaultValue",
 		"min",
 		"max",
+		"variant",
+		"mode",
+		"selectionMode",
+		"startOfWeek",
+		"fixedWeeks",
+		"showWeekNumbers",
+		"outsideDaySelectable",
+		"closeOnSelect",
+		"minView",
+		"maxView",
 		"onValueChange"
 	]);
 	const id = useElementId("calendar", () => own.id);
 	const title = (dp) => {
 		const api = dp();
-		const d = api.focusedValue;
-		if (!d) return "";
-		if (api.view === "day") return api.format(d, {
+		const date = api.focusedValue;
+		if (!date) return "";
+		if (api.view === "month") return api.format(date, { year: "numeric" });
+		if (api.view === "day") return api.format(date, {
 			month: "long",
 			year: "numeric"
 		});
-		if (api.view === "month") return api.format(d, { year: "numeric" });
-		const decade = Math.floor(d.year / 10) * 10;
+		const decade = Math.floor(date.year / 10) * 10;
 		return `${decade} - ${decade + 9}`;
 	};
-	const header = () => (() => {
+	const todayTrigger = (dp) => (() => {
 		var _el$ = _tmpl$();
-		insert(_el$, createComponent(DatePicker.ViewControl, { get children() {
+		_el$._$$click = () => {
+			const api = dp();
+			api.selectToday();
+			if ((own.mode ?? "month") === "year" && api.view === "month") api.setView("day");
+		};
+		return _el$;
+	})();
+	const header = (dp) => (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, createComponent(DatePicker.ViewControl, { get children() {
 			return [
 				createComponent(DatePicker.PrevTrigger, { get children() {
 					return chevron("left");
 				} }),
-				createComponent(DatePicker.Context, { children: (dp) => createComponent(DatePicker.ViewTrigger, { get children() {
-					return title(dp);
+				createComponent(DatePicker.Context, { children: (context) => createComponent(DatePicker.ViewTrigger, { get children() {
+					return title(context);
 				} }) }),
+				memo(() => {
+					return memo(() => {
+						return !!(own.variant === "full" && dp);
+					})() ? todayTrigger(dp) : null;
+				}),
 				createComponent(DatePicker.NextTrigger, { get children() {
 					return chevron("right");
 				} })
 			];
 		} }));
-		return _el$;
+		return _el$2;
 	})();
-	var _el$2 = _tmpl$2();
-	var _el$3 = _el$2.firstChild;
-	var _el$4 = _el$3.nextSibling;
-	spread(_el$2, [rest, {
+	const dayTable = (_dp) => createComponent(DatePicker.Table, { get children() {
+		return [createComponent(DatePicker.TableHead, { get children() {
+			return createComponent(DatePicker.TableRow, { get children() {
+				return [memo(() => {
+					return memo(() => {
+						return !!own.showWeekNumbers;
+					})() ? createComponent(DatePicker.WeekNumberHeaderCell, { children: "Wk" }) : null;
+				}), createComponent(DatePicker.Context, { children: (context) => createComponent(For, {
+					get each() {
+						return context().weekDays;
+					},
+					children: (day) => createComponent(DatePicker.TableHeader, {
+						get "aria-label"() {
+							return day.long;
+						},
+						get children() {
+							return day.narrow;
+						}
+					})
+				}) })];
+			} });
+		} }), createComponent(DatePicker.TableBody, { get children() {
+			return createComponent(DatePicker.Context, { children: (context) => createComponent(For, {
+				get each() {
+					return context().weeks;
+				},
+				children: (week, weekIndex) => createComponent(DatePicker.TableRow, { get children() {
+					return [memo(() => {
+						return memo(() => {
+							return !!own.showWeekNumbers;
+						})() ? createComponent(DatePicker.WeekNumberCell, {
+							get weekIndex() {
+								return weekIndex();
+							},
+							week,
+							get children() {
+								return context().getWeekNumber(week);
+							}
+						}) : null;
+					}), createComponent(For, {
+						each: week,
+						children: (day) => createComponent(DatePicker.TableCell, {
+							value: day,
+							get children() {
+								return createComponent(DatePicker.TableCellTrigger, { get children() {
+									return day.day;
+								} });
+							}
+						})
+					})];
+				} })
+			}) });
+		} })];
+	} });
+	const monthGrid = (_dp, columns) => createComponent(DatePicker.Table, {
+		columns,
+		get children() {
+			return createComponent(DatePicker.TableBody, { get children() {
+				return createComponent(DatePicker.Context, { children: (context) => createComponent(For, {
+					get each() {
+						return context().getMonthsGrid({
+							columns,
+							format: columns === 4 ? "short" : "long"
+						});
+					},
+					children: (months) => createComponent(DatePicker.TableRow, { get children() {
+						return createComponent(For, {
+							each: months,
+							children: (month) => createComponent(DatePicker.TableCell, {
+								get value() {
+									return month.value;
+								},
+								columns,
+								get children() {
+									return createComponent(DatePicker.TableCellTrigger, { get children() {
+										return month.label;
+									} });
+								}
+							})
+						});
+					} })
+				}) });
+			} });
+		}
+	});
+	const yearGrid = (_dp) => createComponent(DatePicker.Table, {
+		columns: 3,
+		get children() {
+			return createComponent(DatePicker.TableBody, { get children() {
+				return createComponent(DatePicker.Context, { children: (context) => createComponent(For, {
+					get each() {
+						return context().getYearsGrid({ columns: 3 });
+					},
+					children: (years) => createComponent(DatePicker.TableRow, { get children() {
+						return createComponent(For, {
+							each: years,
+							children: (year) => createComponent(DatePicker.TableCell, {
+								get value() {
+									return year.value;
+								},
+								columns: 3,
+								get children() {
+									return createComponent(DatePicker.TableCellTrigger, { get children() {
+										return year.label;
+									} });
+								}
+							})
+						});
+					} })
+				}) });
+			} });
+		}
+	});
+	var _el$3 = _tmpl$3();
+	spread(_el$3, [rest, {
+		get id() {
+			return id();
+		},
 		"data-scope": "calendar",
-		"data-part": "root"
+		"data-part": "root",
+		get "data-variant"() {
+			return own.variant ?? "compact";
+		},
+		get "data-mode"() {
+			return own.mode ?? "month";
+		}
 	}], true);
-	insert(_el$2, createComponent(DatePicker.Root, mergeProps({
+	insert(_el$3, createComponent(DatePicker.Root, mergeProps({
 		get id() {
-			return id();
+			return `${id()}:date-picker`;
 		},
 		open: true,
-		closeOnSelect: true,
-		inline: true
+		inline: true,
+		get closeOnSelect() {
+			return own.closeOnSelect ?? true;
+		},
+		get outsideDaySelectable() {
+			return own.outsideDaySelectable ?? true;
+		}
 	}, () => {
 		return own.value !== void 0 ? { value: own.value } : {};
+	}, () => {
+		return own.defaultValue !== void 0 ? { defaultValue: own.defaultValue } : {};
 	}, () => {
 		return own.min !== void 0 ? { min: own.min } : {};
 	}, () => {
 		return own.max !== void 0 ? { max: own.max } : {};
+	}, () => {
+		return own.selectionMode !== void 0 ? { selectionMode: own.selectionMode } : {};
+	}, () => {
+		return own.startOfWeek !== void 0 ? { startOfWeek: own.startOfWeek } : {};
+	}, () => {
+		return own.fixedWeeks || own.variant === "full" ? { fixedWeeks: true } : {};
+	}, () => {
+		return own.showWeekNumbers ? { showWeekNumbers: true } : {};
+	}, () => {
+		return own.minView !== void 0 ? { minView: own.minView } : {};
+	}, () => {
+		return own.maxView !== void 0 ? { maxView: own.maxView } : {};
+	}, () => {
+		return own.mode === "year" ? {
+			defaultView: "month",
+			maxView: "month"
+		} : {};
 	}, {
 		onValueChange: (details) => own.onValueChange?.(details.value),
 		get children() {
@@ -89,44 +257,7 @@ function CalendarImpl(props) {
 					get children() {
 						return [memo(() => {
 							return header();
-						}), createComponent(DatePicker.Table, { get children() {
-							return [createComponent(DatePicker.TableHead, { get children() {
-								return createComponent(DatePicker.TableRow, { get children() {
-									return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
-										get each() {
-											return dp().weekDays;
-										},
-										children: (day) => createComponent(DatePicker.TableHeader, {
-											get "aria-label"() {
-												return day.long;
-											},
-											get children() {
-												return day.narrow;
-											}
-										})
-									}) });
-								} });
-							} }), createComponent(DatePicker.TableBody, { get children() {
-								return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
-									get each() {
-										return dp().weeks;
-									},
-									children: (week) => createComponent(DatePicker.TableRow, { get children() {
-										return createComponent(For, {
-											each: week,
-											children: (day) => createComponent(DatePicker.TableCell, {
-												value: day,
-												get children() {
-													return createComponent(DatePicker.TableCellTrigger, { get children() {
-														return day.day;
-													} });
-												}
-											})
-										});
-									} })
-								}) });
-							} })];
-						} })];
+						}), createComponent(DatePicker.Context, { children: (dp) => dayTable(dp) })];
 					}
 				}),
 				createComponent(DatePicker.View, {
@@ -134,84 +265,27 @@ function CalendarImpl(props) {
 					get children() {
 						return [memo(() => {
 							return header();
-						}), createComponent(DatePicker.Table, {
-							columns: 3,
-							get children() {
-								return createComponent(DatePicker.TableBody, { get children() {
-									return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
-										get each() {
-											return dp().getMonthsGrid({ columns: 3 });
-										},
-										children: (months) => createComponent(DatePicker.TableRow, { get children() {
-											return createComponent(For, {
-												each: months,
-												children: (month) => createComponent(DatePicker.TableCell, {
-													get value() {
-														return month.value;
-													},
-													columns: 3,
-													get children() {
-														return createComponent(DatePicker.TableCellTrigger, { get children() {
-															return month.label;
-														} });
-													}
-												})
-											});
-										} })
-									}) });
-								} });
-							}
-						})];
+						}), createComponent(DatePicker.Context, { children: (dp) => monthGrid(dp, own.mode === "year" ? 4 : 3) })];
 					}
 				}),
-				createComponent(DatePicker.View, {
-					view: "year",
-					get children() {
-						return [memo(() => {
-							return header();
-						}), createComponent(DatePicker.Table, {
-							columns: 3,
-							get children() {
-								return createComponent(DatePicker.TableBody, { get children() {
-									return createComponent(DatePicker.Context, { children: (dp) => createComponent(For, {
-										get each() {
-											return dp().getYearsGrid({ columns: 3 });
-										},
-										children: (years) => createComponent(DatePicker.TableRow, { get children() {
-											return createComponent(For, {
-												each: years,
-												children: (year) => createComponent(DatePicker.TableCell, {
-													get value() {
-														return year.value;
-													},
-													columns: 3,
-													get children() {
-														return createComponent(DatePicker.TableCellTrigger, { get children() {
-															return year.label;
-														} });
-													}
-												})
-											});
-										} })
-									}) });
-								} });
-							}
-						})];
-					}
+				memo(() => {
+					return memo(() => {
+						return (own.mode ?? "month") === "month";
+					})() ? createComponent(DatePicker.View, {
+						view: "year",
+						get children() {
+							return [memo(() => {
+								return header();
+							}), createComponent(DatePicker.Context, { children: (dp) => yearGrid(dp) })];
+						}
+					}) : null;
 				})
 			];
 		}
-	})), _el$3);
-	insert(_el$2, createComponent(Show, {
-		get when() {
-			return rest.children;
-		},
-		get children() {
-			return rest.children;
-		}
-	}), _el$4);
-	return _el$2;
+	})));
+	return _el$3;
 }
 const Calendar = defineFamily(CalendarImpl, DatePicker$1);
+delegateEvents(["click"]);
 //#endregion
 export { Calendar };

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

@@ -7,7 +7,21 @@ import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
  * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
  * Indicator, AutoplayTrigger, ProgressText. */
 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"> & {
+type CarouselSlide = string | {
+  label: string;
+};
+export interface CarouselFacadeProps {
+  value?: number;
+  defaultValue?: number;
+  items: CarouselSlide[];
+  spacing?: string;
+  label?: string;
+  onValueChange?: (value: number) => void;
+}
+/** The complete carousel behind a slide list: arrows, progress, items, and
+ * indicators use the common lane. Custom slides remain anatomy work. */
+declare function CarouselFacade(props: CarouselFacadeProps): import("solid-js").JSX.Element;
+export declare const Carousel: typeof CarouselFacade & Omit<typeof Carousel$1, "Root"> & {
   Root: typeof CarouselRoot;
 };
 //#endregion

package/dist/components/carousel/index.mjs

@@ -1,9 +1,11 @@
 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 { For, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
-//#region src/components/carousel/index.ts
+//#region src/components/carousel/index.tsx
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
 * hairline-clipped lane, the triggers are quiet outline controls, and the
 * current indicator alone carries the ink. The API is Ark's own — Root,
@@ -11,11 +13,73 @@ import { Carousel as Carousel$1 } from "@ark-ui/solid/carousel";
 * Indicator, AutoplayTrigger, ProgressText. */
 function CarouselRoot(props) {
 	const id = useElementId("carousel", () => props.id);
-	return createComponent(Carousel$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Carousel$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Carousel = defineFamily(CarouselRoot, {
+/** The complete carousel behind a slide list: arrows, progress, items, and
+* indicators use the common lane. Custom slides remain anatomy work. */
+function CarouselFacade(props) {
+	injectComponentStyle("carousel");
+	const slides = () => props.items.map((item) => typeof item === "string" ? item : item.label);
+	return createComponent(CarouselRoot, {
+		get "aria-label"() {
+			return props.label;
+		},
+		get slideCount() {
+			return slides().length;
+		},
+		get defaultPage() {
+			return props.defaultValue;
+		},
+		get page() {
+			return props.value;
+		},
+		get spacing() {
+			return props.spacing;
+		},
+		onPageChange: (page) => props.onValueChange?.(page.page),
+		get children() {
+			return [
+				createComponent(Carousel$1.Control, { get children() {
+					return [
+						createComponent(Carousel$1.PrevTrigger, { get children() {
+							return iconNode("chevron-left");
+						} }),
+						createComponent(Carousel$1.ProgressText, {}),
+						createComponent(Carousel$1.NextTrigger, { get children() {
+							return iconNode("chevron-right");
+						} })
+					];
+				} }),
+				createComponent(Carousel$1.ItemGroup, { get children() {
+					return createComponent(For, {
+						get each() {
+							return slides();
+						},
+						children: (slide, index) => createComponent(Carousel$1.Item, {
+							get index() {
+								return index();
+							},
+							children: slide
+						})
+					});
+				} }),
+				createComponent(Carousel$1.IndicatorGroup, { get children() {
+					return createComponent(For, {
+						get each() {
+							return slides();
+						},
+						children: (_, index) => createComponent(Carousel$1.Indicator, { get index() {
+							return index();
+						} })
+					});
+				} })
+			];
+		}
+	});
+}
+const Carousel = defineFamily(CarouselFacade, {
 	...Carousel$1,
 	Root: CarouselRoot
 });

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

@@ -9,7 +9,22 @@ type CheckboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function CheckboxRoot(props: CheckboxRootProps & CheckboxOwnProps): import("solid-js").JSX.Element;
-export declare const Checkbox: typeof CheckboxRoot & Omit<typeof Checkbox$1, "Root"> & {
+/** The complete checkbox behind one checked state and its label. */
+export interface CheckboxFacadeProps {
+  checked?: boolean;
+  defaultValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** One rung for the control's box: the tick scales with it. */
+  size?: "sm" | "md" | "lg";
+  onCheckedChange?: (checked: boolean) => void;
+}
+declare function CheckboxFacade(props: CheckboxFacadeProps): import("solid-js").JSX.Element;
+type CheckboxParts = Omit<typeof Checkbox$1, "Root"> & {
   Root: typeof CheckboxRoot;
 };
+export declare const Checkbox: typeof CheckboxFacade & CheckboxParts;
 //#endregion

package/dist/components/checkbox/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 { Show, splitProps } from "solid-js";
 import { Checkbox as Checkbox$1 } from "@ark-ui/solid/checkbox";
 //#region src/components/checkbox/index.tsx
 function CheckboxRoot(props) {
@@ -17,7 +18,57 @@ function CheckboxRoot(props) {
 		}
 	}));
 }
-const Checkbox = defineFamily(CheckboxRoot, {
+function CheckboxFacade(props) {
+	injectComponentStyle("checkbox");
+	return createComponent(CheckboxRoot, 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 === true),
+		get children() {
+			return [
+				createComponent(Checkbox$1.Control, { get children() {
+					return createComponent(Checkbox$1.Indicator, { get children() {
+						return iconNode("check", {
+							width: 14,
+							height: 14
+						});
+					} });
+				} }),
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Checkbox$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(Checkbox$1.HiddenInput, {})
+			];
+		}
+	}));
+}
+const Checkbox = defineFamily(CheckboxFacade, {
 	...Checkbox$1,
 	Root: CheckboxRoot
 });

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

@@ -6,7 +6,14 @@ export interface CheckboxOption {
   value: string;
   disabled?: boolean;
 }
-export interface CheckboxGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+/**
+ * One question, many answers: a labelled stack (or row) of the seal-cut
+ * checkboxes bound to a single array. Ark's group owns selection, form
+ * wiring, and limits; the facade maps an options list onto it. Inside a
+ * `Field.Root` the group picks up the field context, so invalid and
+ * disabled states dress every box at once.
+ */
+export interface CheckboxGroupFacadeProps extends JSX.HTMLAttributes<HTMLDivElement> {
   value?: string[];
   defaultValue?: string[];
   options: CheckboxOption[];
@@ -18,6 +25,6 @@ export interface CheckboxGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   onValueChange?: (value: string[]) => void;
 }
-declare function CheckboxGroupImpl(props: CheckboxGroupProps): JSX.Element;
-export declare const CheckboxGroup: typeof CheckboxGroupImpl & typeof Checkbox;
+declare function CheckboxGroupFacade(props: CheckboxGroupFacadeProps): JSX.Element;
+export declare const CheckboxGroup: typeof CheckboxGroupFacade & typeof Checkbox;
 //#endregion

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

@@ -11,7 +11,7 @@ import { Checkbox } from "@ark-ui/solid/checkbox";
 function checkIcon() {
 	return iconNode("check");
 }
-function CheckboxGroupImpl(props) {
+function CheckboxGroupFacade(props) {
 	injectComponentStyle("checkbox-group");
 	injectComponentStyle("checkbox");
 	const field = useFieldContext();
@@ -89,6 +89,6 @@ function CheckboxGroupImpl(props) {
 		}
 	}));
 }
-const CheckboxGroup = defineFamily(CheckboxGroupImpl, Checkbox$1);
+const CheckboxGroup = defineFamily(CheckboxGroupFacade, Checkbox$1);
 //#endregion
 export { CheckboxGroup };

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

@@ -5,7 +5,7 @@ import { JSX } from "solid-js";
 export interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   value: number;
   max?: number;
-  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  tone?: "ink" | "primary" | "success" | "warning" | "danger" | "info";
   variant?: "solid" | "subtle" | "outline";
 }
 export declare const Chip: ((props: ChipProps) => JSX.Element) & {