@bysages/solid 0.2.3 → 0.3.1

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();
 			}
 		}));

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

@@ -1,23 +1,25 @@
-import { Input } from "../input/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, delegateEvents, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+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 { 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-part=branch-indicator aria-hidden=true>`);
-var _tmpl$6 = /*#__PURE__*/ template(`<li><span></span><span>`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div data-part=search>`);
-var _tmpl$8 = /*#__PURE__*/ template(`<div><div><div data-part=corridor>`);
-var _tmpl$9 = /*#__PURE__*/ template(`<div><div><button><span></span><span>`);
-var _tmpl$0 = /*#__PURE__*/ template(`<p data-part=empty>Nothing matches`);
-var _tmpl$1 = /*#__PURE__*/ template(`<button type=button data-part=match>`);
+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>`);
 function chevronDown() {
 	return _tmpl$();
 }
@@ -37,6 +39,7 @@ function checkGlyph() {
 * runs — each hit still reads as its full route.
 */
 function CascadeSelect(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("cascade-select");
 	const [own, rest] = splitProps(props, [
 		"value",
@@ -140,52 +143,73 @@ function CascadeSelect(props) {
 		};
 		const nodeState = () => api().getItemState(nodeProps);
 		const children = collection().getNodeChildren(node);
-		const list = (() => {
-			var _el$4 = _tmpl$4();
-			spread(_el$4, mergeProps(() => mergeProps$1(() => api().getListProps(nodeProps))), false, true);
-			insert(_el$4, createComponent(For, {
-				each: children,
-				children: (item, index) => {
-					const itemValue = collection().getNodeValue(item);
-					const itemProps = {
-						item,
-						indexPath: [...indexPath, index()],
-						value: [...valuePath, itemValue]
-					};
-					const itemState = () => api().getItemState(itemProps);
-					return (() => {
-						var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild, _el$8 = _el$6.nextSibling;
-						spread(_el$5, mergeProps(() => mergeProps$1(() => api().getItemProps(itemProps))), false, true);
-						spread(_el$6, mergeProps(() => mergeProps$1(() => api().getItemTextProps(itemProps))), false, true);
-						insert(_el$6, () => item.label);
-						insert(_el$5, createComponent(Show, {
-							get when() {
-								return itemState().hasChildren;
-							},
-							get children() {
-								var _el$7 = _tmpl$5();
-								insert(_el$7, chevronRight);
-								return _el$7;
-							}
-						}), _el$8);
-						spread(_el$8, mergeProps(() => mergeProps$1(() => api().getItemIndicatorProps(itemProps))), false, true);
-						insert(_el$8, checkGlyph);
-						return _el$5;
-					})();
-				}
-			}));
-			return _el$4;
-		})();
+		var _el$4 = _tmpl$4();
+		spread(_el$4, () => {
+			return mergeProps$1(() => api().getListProps(nodeProps));
+		}, true);
+		insert(_el$4, createComponent(For, {
+			each: children,
+			children: (item, index) => {
+				const itemValue = collection().getNodeValue(item);
+				const itemProps = {
+					item,
+					indexPath: [...indexPath, index()],
+					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, () => {
+					return mergeProps$1(() => api().getItemProps(itemProps));
+				}, true);
+				spread(_el$6, () => {
+					return mergeProps$1(() => api().getItemTextProps(itemProps));
+				}, true);
+				insert(_el$6, () => {
+					return item.label;
+				});
+				insert(_el$5, createComponent(Show, {
+					get when() {
+						return itemState().hasChildren;
+					},
+					get children() {
+						var _el$7 = _tmpl$5();
+						insert(_el$7, chevronRight);
+						return _el$7;
+					}
+				}), _el$8);
+				spread(_el$8, () => {
+					return mergeProps$1(() => api().getItemIndicatorProps(itemProps));
+				}, true);
+				insert(_el$8, checkGlyph);
+				return _el$5;
+			}
+		}));
+		const list = _el$4;
 		const next = nodeState().highlightedChild;
 		return [list, next != null && collection().isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState().highlightedIndex], [...valuePath, collection().getNodeValue(next)]) : null];
 	}
-	return (() => {
-		var _el$9 = _tmpl$9(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
-		spread(_el$9, mergeProps(rest, () => mergeProps$1(() => api().getRootProps()), { get ["data-size"]() {
+	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, [
+		rest,
+		() => {
+			return mergeProps$1(() => api().getRootProps());
+		},
+		{ get "data-size"() {
 			return own.size ?? "md";
-		} }), false, true);
-		spread(_el$0, mergeProps(() => mergeProps$1(() => api().getControlProps())), false, true);
-		spread(_el$1, mergeProps(() => mergeProps$1(() => api().getTriggerProps(), {
+		} }
+	], true);
+	spread(_el$10, () => {
+		return mergeProps$1(() => api().getControlProps());
+	}, true);
+	spread(_el$11, () => {
+		return mergeProps$1(() => api().getTriggerProps(), {
+			"aria-labelledby": id + ":value-text",
 			get disabled() {
 				return own.disabled || void 0;
 			},
@@ -193,72 +217,94 @@ function CascadeSelect(props) {
 				api().getTriggerProps().onclick?.(event);
 				setQuery("");
 			}
-		})), false, true);
-		spread(_el$10, mergeProps(() => mergeProps$1(() => api().getValueTextProps())), false, true);
-		insert(_el$10, () => display() ?? own.placeholder ?? "Select…");
-		spread(_el$11, mergeProps(() => mergeProps$1(() => api().getIndicatorProps())), false, true);
-		insert(_el$11, chevronDown);
-		insert(_el$9, createComponent(Portal, { get children() {
-			var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild, _el$15 = _el$13.firstChild;
-			spread(_el$12, mergeProps(() => mergeProps$1(() => api().getPositionerProps())), false, true);
-			spread(_el$13, mergeProps(() => mergeProps$1(() => api().getContentProps()), { get ["data-size"]() {
-				return own.size ?? "md";
-			} }), false, true);
-			insert(_el$13, createComponent(Show, {
-				get when() {
-					return own.filterable;
-				},
-				get children() {
-					var _el$14 = _tmpl$7();
-					insert(_el$14, createComponent(Input, {
-						size: "sm",
-						get value() {
-							return query();
-						},
-						onValueChange: setQuery,
-						placeholder: "Filter…",
-						"aria-label": "Filter options"
-					}));
-					return _el$14;
-				}
-			}), _el$15);
-			insert(_el$15, createComponent(Show, {
-				get when() {
-					return !filtering();
-				},
-				get fallback() {
-					return createComponent(Show, {
-						get when() {
-							return matchPaths().length > 0;
-						},
-						get fallback() {
-							return _tmpl$0();
-						},
-						get children() {
-							return createComponent(For, {
-								get each() {
-									return matchPaths();
-								},
-								children: (hit) => (() => {
-									var _el$17 = _tmpl$1();
-									_el$17.$$click = () => pickMatch(hit.path);
-									insert(_el$17, () => hit.labels.join(" / "));
-									effect(() => setAttribute(_el$17, "data-selected", isSelected(hit.path) || void 0));
-									return _el$17;
-								})()
-							});
-						}
-					});
-				},
-				get children() {
-					return renderColumn(collection().rootNode, [], []);
-				}
-			}));
-			effect(() => setAttribute(_el$15, "data-flow", filtering() ? "flat" : "columns"));
-			return _el$12;
-		} }), null);
-		return _el$9;
-	})();
+		});
+	}, true);
+	spread(_el$12, () => {
+		return mergeProps$1(() => api().getValueTextProps(), { id: id + ":value-text" });
+	}, true);
+	insert(_el$12, () => {
+		return display() ?? own.placeholder ?? "Select…";
+	});
+	spread(_el$13, () => {
+		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, () => {
+			return mergeProps$1(() => api().getPositionerProps());
+		}, true);
+		spread(_el$15, [() => {
+			return mergeProps$1(() => api().getContentProps());
+		}, { get "data-size"() {
+			return own.size ?? "md";
+		} }], true);
+		insert(_el$15, createComponent(Show, {
+			get when() {
+				return own.filterable;
+			},
+			get children() {
+				var _el$16 = _tmpl$7();
+				insert(_el$16, createComponent(Input, {
+					size: "sm",
+					get value() {
+						return query();
+					},
+					onValueChange: setQuery,
+					get placeholder() {
+						return messages().select.filter;
+					},
+					get "aria-label"() {
+						return messages().select.filter;
+					}
+				}));
+				return _el$16;
+			}
+		}), _el$17);
+		insert(_el$17, createComponent(Show, {
+			get when() {
+				return !filtering();
+			},
+			get fallback() {
+				return createComponent(Show, {
+					get when() {
+						return matchPaths().length > 0;
+					},
+					get fallback() {
+						return _tmpl$10();
+					},
+					get children() {
+						return createComponent(For, {
+							get each() {
+								return matchPaths();
+							},
+							children: (hit) => (() => {
+								var _el$19 = _tmpl$11();
+								_el$19._$$click = () => pickMatch(hit.path);
+								insert(_el$19, () => {
+									return hit.labels.join(" / ");
+								});
+								effect(() => isSelected(hit.path) || void 0, (_v$) => {
+									setAttribute(_el$19, "data-selected", _v$);
+								});
+								return _el$19;
+							})()
+						});
+					}
+				});
+			},
+			get children() {
+				return renderColumn(collection().rootNode, [], []);
+			}
+		}));
+		effect(() => filtering() ? "flat" : "columns", (_v$) => {
+			setAttribute(_el$17, "data-flow", _v$);
+		});
+		return _el$14;
+	} }), null);
+	return _el$9;
 }
 delegateEvents(["click"]);
 //#endregion