@bysages/solid 0.2.3 → 0.3.1

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

@@ -0,0 +1,24 @@
+import { JSX } from "solid-js";
+//#region src/components/bento/index.d.ts
+export interface BentoProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+}
+export interface BentoCellProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Columns this tile claims. */
+  span?: number;
+  /** Rows this tile claims. */
+  rowSpan?: number;
+}
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+ * The container owns the track count; each cell claims its own span. */
+export declare function BentoRoot(props: BentoProps): JSX.Element;
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+ * of the plate stays in measure. */
+export declare function BentoCell(props: BentoCellProps): JSX.Element;
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+export declare const Bento: typeof BentoRoot & {
+  Root: typeof BentoRoot;
+  Cell: typeof BentoCell;
+};
+//#endregion

package/dist/components/bento/index.mjs

@@ -0,0 +1,51 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/bento/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** The bento lattice: a grid of unequal tiles that reads as one plate.
+* The container owns the track count; each cell claims its own span. */
+function BentoRoot(props) {
+	injectComponentStyle("bento");
+	const [own, rest] = splitProps(props, ["columns"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "bento",
+		"data-part": "root",
+		get style() {
+			return { "--bs-bento-columns": String(own.columns ?? 3) };
+		}
+	}], true);
+	insert(_el$, () => {
+		return rest.children;
+	});
+	return _el$;
+}
+/** One tile: `span` claims columns, `rowSpan` claims rows — the rest
+* of the plate stays in measure. */
+function BentoCell(props) {
+	injectComponentStyle("bento");
+	const [own, rest] = splitProps(props, ["span", "rowSpan"]);
+	var _el$2 = _tmpl$();
+	spread(_el$2, [rest, {
+		"data-scope": "bento",
+		"data-part": "cell",
+		get style() {
+			return {
+				"--bs-bento-span-x": String(own.span ?? 1),
+				"--bs-bento-span-y": String(own.rowSpan ?? 1)
+			};
+		}
+	}], true);
+	insert(_el$2, () => {
+		return rest.children;
+	});
+	return _el$2;
+}
+/** The whole family under one handle — Bento.Root, Bento.Cell. */
+const Bento = Object.assign(BentoRoot, {
+	Root: BentoRoot,
+	Cell: BentoCell
+});
+//#endregion
+export { Bento, BentoCell, BentoRoot };

package/dist/components/block-ui/index.d.mts

@@ -0,0 +1,12 @@
+import { JSX } from "solid-js";
+//#region src/components/block-ui/index.d.ts
+export interface BlockUIProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: JSX.Element;
+}
+/** A curtain over content that must wait: the blocked region keeps its
+ * shape and dims under frosted paper while a quiet wheel reports the
+ * wait. Callers own the state; the curtain only answers it. */
+export declare function BlockUI(props: BlockUIProps): JSX.Element;
+//#endregion

package/dist/components/block-ui/index.mjs

@@ -0,0 +1,43 @@
+import { Spinner } from "../spinner/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, spread, template } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/block-ui/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=block-ui data-part=mask>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
+/** A curtain over content that must wait: the blocked region keeps its
+* shape and dims under frosted paper while a quiet wheel reports the
+* wait. Callers own the state; the curtain only answers it. */
+function BlockUI(props) {
+	injectComponentStyle("block-ui");
+	const [own, rest] = splitProps(props, ["blocked", "children"]);
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	var _el$4 = _el$2.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "block-ui",
+		"data-part": "root",
+		get "data-blocked"() {
+			return own.blocked ? "" : void 0;
+		},
+		get "aria-busy"() {
+			return own.blocked || void 0;
+		}
+	}], true);
+	insert(_el$, () => {
+		return own.children;
+	}, _el$2);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return own.blocked;
+		},
+		get children() {
+			var _el$3 = _tmpl$();
+			insert(_el$3, createComponent(Spinner, { size: "lg" }));
+			return _el$3;
+		}
+	}), _el$4);
+	return _el$;
+}
+//#endregion
+export { BlockUI };

package/dist/components/breadcrumb/index.mjs

@@ -1,33 +1,35 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { mergeProps as mergeProps$1 } from "solid-js";
 //#region src/components/breadcrumb/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
-/** A trail of waymarks: Root wraps the nav, List the ordered trail, and
-* each Item carries a Link — or the Current page — parted by a quiet
-* Separator. Links take href and the rest through attributes. */
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 function part(name, tag, extra = {}) {
 	return ((props) => {
-		return createComponent(tag, mergeProps(extra, props, {
+		const messages = useComponentMessages();
+		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
+		return createComponent(tag, mergeProps(partExtra, props, {
 			"data-scope": "breadcrumb",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
 	});
 }
-const Root = part("Root", "nav", { "aria-label": "Breadcrumb" });
+const Root = part("Root", "nav", (messages) => ({ "aria-label": messages.breadcrumb.label }));
 const List = part("List", "ol");
 const Item = part("Item", "li");
 const Link = part("Link", "a");
 const Current = part("Current", "span", { "aria-current": "page" });
 const Separator = (props) => (() => {
 	var _el$ = _tmpl$();
-	spread(_el$, mergeProps(() => mergeProps$1({ children: "/" }, props), {
+	spread(_el$, [() => {
+		return mergeProps$1({ children: "/" }, props);
+	}, {
 		"aria-hidden": "true",
 		"data-scope": "breadcrumb",
 		"data-part": "separator"
-	}), false, false);
+	}], false);
 	return _el$;
 })();
 const Breadcrumb = Object.assign(Root, {

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

@@ -0,0 +1,21 @@
+import { JSX } from "solid-js";
+//#region src/components/browser/index.d.ts
+export interface BrowserPartProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+/** The three lamps are the system's own fixed pigments — the same
+ * semantics reserved for danger, warning, and success. */
+export declare function BrowserDots(props: BrowserPartProps): JSX.Element;
+export declare function BrowserRoot(props: BrowserPartProps): JSX.Element;
+export declare function BrowserTitleBar(props: BrowserPartProps): JSX.Element;
+export declare function BrowserUrlBar(props: BrowserPartProps): JSX.Element;
+export declare function BrowserBody(props: BrowserPartProps): JSX.Element;
+/** 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. */
+export declare const Browser: typeof BrowserRoot & {
+  Root: typeof BrowserRoot;
+  TitleBar: typeof BrowserTitleBar;
+  Dots: typeof BrowserDots;
+  UrlBar: typeof BrowserUrlBar;
+  Body: typeof BrowserBody;
+};
+//#endregion

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.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/button/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<button>`);
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
 function Button(props) {
 	injectComponentStyle("button");
 	const [own, rest] = splitProps(props, [
@@ -13,33 +13,31 @@ function Button(props) {
 		"type",
 		"disabled"
 	]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(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, false);
-		return _el$;
-	})();
+	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.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/button-group/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+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
@@ -16,24 +16,22 @@ function ButtonGroupRoot(props) {
 		"size",
 		"radius"
 	]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(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, false);
-		return _el$;
-	})();
+	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