@bysages/solid 0.2.2 → 0.3.0

package/dist/components/browser/index.mjs

@@ -0,0 +1,87 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, setAttribute, spread, template } from "@solidjs/web";
+//#region src/components/browser/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=browser data-part=dot>`);
+/** The three lamps are the system's own fixed pigments — the same
+* semantics reserved for danger, warning, and success. */
+function BrowserDots(props) {
+	injectComponentStyle("browser");
+	var _el$ = _tmpl$();
+	spread(_el$, [props, {
+		"data-scope": "browser",
+		"data-part": "dots"
+	}], true);
+	insert(_el$, () => {
+		return [
+			"danger",
+			"warning",
+			"success"
+		].map((tone) => (() => {
+			var _el$2 = _tmpl$2();
+			setAttribute(_el$2, "data-tone", tone);
+			return _el$2;
+		})());
+	});
+	return _el$;
+}
+function BrowserRoot(props) {
+	injectComponentStyle("browser");
+	var _el$3 = _tmpl$();
+	spread(_el$3, [props, {
+		"data-scope": "browser",
+		"data-part": "root"
+	}], true);
+	insert(_el$3, () => {
+		return props.children;
+	});
+	return _el$3;
+}
+function BrowserTitleBar(props) {
+	injectComponentStyle("browser");
+	var _el$4 = _tmpl$();
+	spread(_el$4, [props, {
+		"data-scope": "browser",
+		"data-part": "titlebar"
+	}], true);
+	insert(_el$4, () => {
+		return props.children;
+	});
+	return _el$4;
+}
+function BrowserUrlBar(props) {
+	injectComponentStyle("browser");
+	var _el$5 = _tmpl$();
+	spread(_el$5, [props, {
+		"data-scope": "browser",
+		"data-part": "urlbar"
+	}], true);
+	insert(_el$5, () => {
+		return props.children;
+	});
+	return _el$5;
+}
+function BrowserBody(props) {
+	injectComponentStyle("browser");
+	var _el$6 = _tmpl$();
+	spread(_el$6, [props, {
+		"data-scope": "browser",
+		"data-part": "body"
+	}], true);
+	insert(_el$6, () => {
+		return props.children;
+	});
+	return _el$6;
+}
+/** A browser window as a vessel: title bar, the three lamps, the
+* address well, and a body that carries whatever the site hangs in
+* it — an iframe, a screenshot, a live page. */
+const Browser = Object.assign(BrowserRoot, {
+	Root: BrowserRoot,
+	TitleBar: BrowserTitleBar,
+	Dots: BrowserDots,
+	UrlBar: BrowserUrlBar,
+	Body: BrowserBody
+});
+//#endregion
+export { Browser, BrowserBody, BrowserDots, BrowserRoot, BrowserTitleBar, BrowserUrlBar };

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

@@ -0,0 +1,15 @@
+import { JSX } from "solid-js";
+//#region src/components/button/index.d.ts
+/** The control recipe as a standalone button: the variant chooses how it
+ * rests, the tone chooses the pigment. Ink is the solemn default; any
+ * action can carry the primary weight. The react package's asChild has
+ * no solid equivalent — compose a control around `<Button>` instead. */
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "solid" | "outline" | "ghost" | "subtle";
+  tone?: "ink" | "info" | "success" | "warning" | "danger";
+  size?: "sm" | "md" | "lg";
+  /** Icon-only: the silhouette squares to the control height. */
+  square?: boolean;
+}
+export declare function Button(props: ButtonProps): JSX.Element;
+//#endregion

package/dist/components/button/index.mjs

@@ -0,0 +1,43 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/button/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+function Button(props) {
+	injectComponentStyle("button");
+	const [own, rest] = splitProps(props, [
+		"variant",
+		"tone",
+		"size",
+		"square",
+		"type",
+		"disabled"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get type() {
+			return own.type ?? "button";
+		},
+		get disabled() {
+			return own.disabled;
+		},
+		"data-scope": "button",
+		"data-part": "root",
+		get "data-variant"() {
+			return own.variant ?? "solid";
+		},
+		get "data-tone"() {
+			return own.tone ?? "ink";
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		},
+		get "data-square"() {
+			return own.square ? "true" : void 0;
+		},
+		"data-motion": "ink-ripple lit"
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Button };

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

@@ -0,0 +1,23 @@
+import { JSX } from "solid-js";
+//#region src/components/button-group/index.d.ts
+export interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The seam runs across the group (default) or down it. */
+  orientation?: "horizontal" | "vertical";
+  /** One register for every member: falls onto data-size for the
+   * stylesheet to retune the buttons' heights. */
+  size?: "sm" | "md" | "lg";
+  /** The members' corner register: retunes --bs-radius-control for the
+   * whole fused shape — edges and trimmed seams keep one story. */
+  radius?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+}
+/**
+ * Buttons fused into one control: the group owns only the joinery, so
+ * members keep every variant they were given — a solid action can sit
+ * beside an outline one and the seam still reads. Selection belongs to
+ * the toggle group; this is layout alone.
+ */
+export declare function ButtonGroupRoot(props: ButtonGroupProps): JSX.Element;
+export declare const ButtonGroup: typeof ButtonGroupRoot & {
+  Root: typeof ButtonGroupRoot;
+};
+//#endregion

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

@@ -0,0 +1,38 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/button-group/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/**
+* Buttons fused into one control: the group owns only the joinery, so
+* members keep every variant they were given — a solid action can sit
+* beside an outline one and the seam still reads. Selection belongs to
+* the toggle group; this is layout alone.
+*/
+function ButtonGroupRoot(props) {
+	injectComponentStyle("button-group");
+	const [own, rest] = splitProps(props, [
+		"orientation",
+		"size",
+		"radius"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		role: "group",
+		"data-scope": "button-group",
+		"data-part": "root",
+		get "data-orientation"() {
+			return own.orientation ?? "horizontal";
+		},
+		get "data-size"() {
+			return own.size;
+		},
+		get "data-radius"() {
+			return own.radius;
+		}
+	}], false);
+	return _el$;
+}
+const ButtonGroup = Object.assign(ButtonGroupRoot, { Root: ButtonGroupRoot });
+//#endregion
+export { ButtonGroup, ButtonGroupRoot };

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

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+import { DatePickerRootProps } from "@ark-ui/solid/date-picker";
+//#region src/components/calendar/index.d.ts
+export interface CalendarProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Selected date(s) — an array, as the machine speaks in ranges. */
+  value?: DatePickerRootProps["value"];
+  min?: DatePickerRootProps["min"];
+  max?: DatePickerRootProps["max"];
+  onValueChange?: (value: NonNullable<DatePickerRootProps["value"]>) => void;
+}
+/** 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. */
+export declare function Calendar(props: CalendarProps): JSX.Element;
+//#endregion

package/dist/components/calendar/index.mjs

@@ -0,0 +1,209 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, memo, mergeProps, readShallow, spread, style, 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><!><!>`);
+function chevron(dir) {
+	var _el$ = _tmpl$();
+	effect(() => readShallow(dir === "left" ? { transform: "rotate(180deg)" } : void 0), (_v$, _$p) => {
+		style(_el$, _v$, _$p);
+	});
+	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) {
+	injectComponentStyle("calendar");
+	injectComponentStyle("date-picker");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"min",
+		"max",
+		"onValueChange"
+	]);
+	const title = (dp) => {
+		const api = dp();
+		const d = api.focusedValue;
+		if (!d) return "";
+		if (api.view === "day") return api.format(d, {
+			month: "long",
+			year: "numeric"
+		});
+		if (api.view === "month") return api.format(d, { year: "numeric" });
+		const decade = Math.floor(d.year / 10) * 10;
+		return `${decade} - ${decade + 9}`;
+	};
+	const header = () => (() => {
+		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.NextTrigger, { get children() {
+					return chevron("right");
+				} })
+			];
+		} }));
+		return _el$2;
+	})();
+	var _el$3 = _tmpl$3();
+	var _el$4 = _el$3.firstChild;
+	var _el$5 = _el$4.nextSibling;
+	spread(_el$3, [rest, {
+		"data-scope": "calendar",
+		"data-part": "root"
+	}], true);
+	insert(_el$3, createComponent(DatePicker.Root, mergeProps({
+		open: true,
+		closeOnSelect: true,
+		inline: true
+	}, () => {
+		return own.value !== void 0 ? { value: own.value } : {};
+	}, () => {
+		return own.min !== void 0 ? { min: own.min } : {};
+	}, () => {
+		return own.max !== void 0 ? { max: own.max } : {};
+	}, {
+		onValueChange: (details) => own.onValueChange?.(details.value),
+		get children() {
+			return [
+				createComponent(DatePicker.View, {
+					view: "day",
+					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.View, {
+					view: "month",
+					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.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;
+														} });
+													}
+												})
+											});
+										} })
+									}) });
+								} });
+							}
+						})];
+					}
+				})
+			];
+		}
+	})), _el$4);
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return rest.children;
+		},
+		get children() {
+			return rest.children;
+		}
+	}), _el$5);
+	return _el$3;
+}
+//#endregion
+export { Calendar };

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

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+//#region src/components/card/index.d.ts
+export declare const Card: Component<Record<string, unknown>> & {
+  Root: Component<Record<string, unknown>>;
+  Header: Component<Record<string, unknown>>;
+  Title: Component<Record<string, unknown>>;
+  Description: Component<Record<string, unknown>>;
+  Content: Component<Record<string, unknown>>;
+  Footer: Component<Record<string, unknown>>;
+};
+//#endregion

package/dist/components/card/index.mjs

@@ -0,0 +1,33 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+//#region src/components/card/index.tsx
+/** A vessel: round, resting at the first elevation, one hairline for its
+* edge. Root, Header, Title, Description, Content, Footer — sections
+* carry their own whitespace, so any subset composes. */
+function part(name, tag) {
+	return ((props) => {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "card",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}));
+	});
+}
+const Root = part("Root", "section");
+const Header = part("Header", "header");
+const Title = part("Title", "h3");
+const Description = part("Description", "p");
+const Content = part("Content", "div");
+const Footer = part("Footer", "footer");
+const Card = Object.assign(Root, {
+	Root,
+	Header,
+	Title,
+	Description,
+	Content,
+	Footer
+});
+injectComponentStyle("card");
+//#endregion
+export { Card };

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

@@ -0,0 +1,9 @@
+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
+ * hairline-clipped lane, the triggers are quiet outline controls, and the
+ * 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;
+//#endregion

package/dist/components/carousel/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+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
+* hairline-clipped lane, the triggers are quiet outline controls, and the
+* 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;
+injectComponentStyle("carousel");
+//#endregion
+export { Carousel };

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

@@ -0,0 +1,31 @@
+import { JSX } from "solid-js";
+//#region src/components/cascade-select/index.d.ts
+export interface CascadeSelectNode {
+  label: string;
+  value: string;
+  children?: CascadeSelectNode[];
+  disabled?: boolean;
+}
+export interface CascadeSelectProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  value?: string[][];
+  data: CascadeSelectNode[];
+  placeholder?: string;
+  highlightTrigger?: "click" | "hover";
+  filterable?: boolean;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[][]) => void;
+}
+/**
+ * A corridor of linked columns: pick a branch and the next column
+ * dissolves open beside it, until a leaf click settles the whole path.
+ * `value` is the selected path (or paths, when `multiple`) — the
+ * joined labels ride the trigger. `highlightTrigger: "hover"` turns the
+ * classic cascading menu: pointing is enough to unfold. `filterable`
+ * 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;
+//#endregion