@bysages/solid 0.2.3 → 0.3.0

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,8 +1,8 @@
 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>`);
+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. */
@@ -10,7 +10,7 @@ function part(name, tag, extra = {}) {
 	return ((props) => {
 		return createComponent(tag, mergeProps(extra, props, {
 			"data-scope": "breadcrumb",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
@@ -23,11 +23,13 @@ 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

package/dist/components/calendar/index.mjs

@@ -1,17 +1,17 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, memo, mergeProps, spread, style, template } from "solid-js/web";
+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>`);
+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) {
-	return (() => {
-		var _el$ = _tmpl$();
-		effect((_$p) => style(_el$, dir === "left" ? { transform: "rotate(180deg)" } : void 0, _$p));
-		return _el$;
-	})();
+	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
@@ -56,142 +56,154 @@ function Calendar(props) {
 		} }));
 		return _el$2;
 	})();
-	return (() => {
-		var _el$3 = _tmpl$3();
-		spread(_el$3, mergeProps(rest, {
-			"data-scope": "calendar",
-			"data-part": "root"
-		}), false, true);
-		insert(_el$3, createComponent(DatePicker.Root, mergeProps({
-			open: true,
-			closeOnSelect: true,
-			inline: true
-		}, () => own.value !== void 0 ? { value: own.value } : {}, () => own.min !== void 0 ? { min: own.min } : {}, () => 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(() => 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;
+	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;
 											},
-											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 day.narrow;
+													return createComponent(DatePicker.TableCellTrigger, { get children() {
+														return day.day;
+													} });
 												}
 											})
-										}) });
-									} });
-								} }), createComponent(DatePicker.TableBody, { get children() {
+										});
+									} })
+								}) });
+							} })];
+						} })];
+					}
+				}),
+				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().weeks;
+											return dp().getMonthsGrid({ columns: 3 });
 										},
-										children: (week) => createComponent(DatePicker.TableRow, { get children() {
+										children: (months) => createComponent(DatePicker.TableRow, { get children() {
 											return createComponent(For, {
-												each: week,
-												children: (day) => createComponent(DatePicker.TableCell, {
-													value: day,
+												each: months,
+												children: (month) => createComponent(DatePicker.TableCell, {
+													get value() {
+														return month.value;
+													},
+													columns: 3,
 													get children() {
 														return createComponent(DatePicker.TableCellTrigger, { get children() {
-															return day.day;
+															return month.label;
 														} });
 													}
 												})
 											});
 										} })
 									}) });
-								} })];
-							} })];
-						}
-					}),
-					createComponent(DatePicker.View, {
-						view: "month",
-						get children() {
-							return [memo(() => 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(() => 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;
-															} });
-														}
-													})
-												});
-											} })
-										}) });
-									} });
-								}
-							})];
-						}
-					})
-				];
-			}
-		})), null);
-		insert(_el$3, createComponent(Show, {
-			get when() {
-				return rest.children;
-			},
-			get children() {
-				return rest.children;
-			}
-		}), null);
-		return _el$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;
+														} });
+													}
+												})
+											});
+										} })
+									}) });
+								} });
+							}
+						})];
+					}
+				})
+			];
+		}
+	})), _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.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+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
@@ -8,7 +8,7 @@ function part(name, tag) {
 	return ((props) => {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "card",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));