@bysages/solid 0.4.3 → 0.5.0

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

@@ -1,11 +1,12 @@
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
 import { Button } from "../button/index.mjs";
-import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { n as useComponentMessages } from "../../use-component-messages-DS9ppb4C.mjs";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { createContext, createSignal, splitProps, useContext } from "solid-js";
-//#region src/components/float-button/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
+import { For, Show, createContext, createSignal, splitProps, useContext } from "solid-js";
+// src/components/float-button/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div><span data-scope=float-button data-part=item-label aria-hidden=true>`);
 /** Solid context for {@link FloatButtonContext}, exported so a custom
 * part can read the group's state with `useContext`. */
 const FloatButtonContextKey = createContext();
@@ -41,16 +42,16 @@ function FloatButtonRoot(props) {
 		value: context,
 		get children() {
 			var _el$ = _tmpl$();
-			spread(_el$, [rest, {
+			spread(_el$, mergeProps(rest, {
 				"data-scope": "float-button",
 				"data-part": "root",
-				get "data-placement"() {
+				get ["data-placement"]() {
 					return own.placement ?? "bottom-end";
 				},
-				get "data-state"() {
+				get ["data-state"]() {
 					return open() ? "open" : "closed";
 				}
-			}], false);
+			}), false, false);
 			return _el$;
 		}
 	});
@@ -71,10 +72,10 @@ function FloatButtonTrigger(props) {
 			return context?.size() ?? "lg";
 		},
 		onClick: () => context?.toggle(),
-		get "aria-label"() {
+		get ["aria-label"]() {
 			return own.label || messages().floatButton.actions;
 		},
-		get "aria-expanded"() {
+		get ["aria-expanded"]() {
 			return context?.open() ?? false;
 		},
 		get children() {
@@ -90,42 +91,110 @@ function FloatButtonItem(props) {
 		"children"
 	]);
 	const context = useContext(FloatButtonContextKey);
-	var _el$2 = _tmpl$2();
-	var _el$3 = _el$2.firstChild;
-	spread(_el$2, [rest, {
-		"data-scope": "float-button",
-		"data-part": "item"
-	}], true);
-	insert(_el$2, createComponent(Button, {
-		variant: "outline",
-		square: true,
-		get size() {
-			return context ? STEP_DOWN[context.size()] : "md";
-		},
-		get disabled() {
-			return own.disabled;
+	return (() => {
+		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+		spread(_el$2, mergeProps(rest, {
+			"data-scope": "float-button",
+			"data-part": "item"
+		}), false, true);
+		insert(_el$2, createComponent(Button, {
+			variant: "outline",
+			square: true,
+			get size() {
+				return context ? STEP_DOWN[context.size()] : "md";
+			},
+			get disabled() {
+				return own.disabled;
+			},
+			get ["aria-label"]() {
+				return own.label;
+			},
+			onClick: (event) => {
+				own.onClick?.(event);
+				context?.close();
+			},
+			get children() {
+				return own.children;
+			}
+		}), _el$3);
+		insert(_el$3, () => own.label);
+		return _el$2;
+	})();
+}
+/** The shorthand: a speed dial from plain actions; the trigger and
+* openness stay inside the family. */
+function FloatButtonFacade(props) {
+	const [own, rest] = splitProps(props, [
+		"actions",
+		"children",
+		"defaultOpen",
+		"label",
+		"onOpenChange",
+		"open",
+		"placement",
+		"size"
+	]);
+	const [inner, setInner] = createSignal(own.defaultOpen ?? false);
+	const open = () => own.open ?? inner();
+	const setOpen = (value) => {
+		setInner(value);
+		own.onOpenChange?.(value);
+	};
+	return createComponent(FloatButtonRoot, mergeProps(rest, {
+		onOpenChange: setOpen,
+		get open() {
+			return open();
 		},
-		get "aria-label"() {
-			return own.label;
+		get placement() {
+			return own.placement;
 		},
-		onClick: (event) => {
-			own.onClick?.(event);
-			context?.close();
+		get size() {
+			return own.size;
 		},
 		get children() {
-			return own.children;
+			return createComponent(Show, {
+				get when() {
+					return own.children;
+				},
+				get fallback() {
+					return [createComponent(FloatButtonTrigger, {
+						get label() {
+							return own.label;
+						},
+						get children() {
+							return iconNode("plus");
+						}
+					}), createComponent(For, {
+						get each() {
+							return own.actions ?? [];
+						},
+						children: (action) => createComponent(FloatButtonItem, {
+							get disabled() {
+								return action.disabled;
+							},
+							get label() {
+								return action.label;
+							},
+							get onClick() {
+								return action.onClick;
+							},
+							get children() {
+								return iconNode(action.icon ?? "pencil");
+							}
+						})
+					})];
+				},
+				get children() {
+					return own.children;
+				}
+			});
 		}
-	}), _el$3);
-	insert(_el$3, () => {
-		return own.label;
-	});
-	return _el$2;
+	}));
 }
-const FloatButton = Object.assign(FloatButtonRoot, {
+const FloatButton = Object.assign(FloatButtonFacade, {
 	Root: FloatButtonRoot,
 	Trigger: FloatButtonTrigger,
 	Item: FloatButtonItem
 });
 injectComponentStyle("float-button");
-//#endregion
 export { FloatButton, FloatButtonContextKey };

package/dist/components/floating-panel/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps, JSX } from "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
-//#region src/components/floating-panel/index.d.ts
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
  * popup vessel let loose — a draggable, resizable sheet whose header is the
  * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
@@ -22,4 +21,4 @@ declare function FloatingPanelFacade(props: FloatingPanelFacadeProps): JSX.Eleme
 export declare const FloatingPanel: typeof FloatingPanelFacade & Omit<typeof FloatingPanel$1, "Root"> & {
   Root: typeof FloatingPanelRoot;
 };
-//#endregion
+export {};

package/dist/components/floating-panel/index.mjs

@@ -1,12 +1,12 @@
-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, insert, memo, mergeProps, template } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
-//#region src/components/floating-panel/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<p>`);
+// src/components/floating-panel/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<p>`);
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
 * popup vessel let loose — a draggable, resizable sheet whose header is the
 * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
@@ -30,11 +30,7 @@ const resizeAxes = [
 ];
 function FloatingPanelFacade(props) {
 	injectComponentStyle("floating-panel");
-	return createComponent(FloatingPanelRoot, mergeProps(() => {
-		return props.open === void 0 ? {} : { open: props.open };
-	}, () => {
-		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
-	}, {
+	return createComponent(FloatingPanelRoot, mergeProps(() => props.open === void 0 ? {} : { open: props.open }, () => props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen }, {
 		get disabled() {
 			return props.disabled;
 		},
@@ -88,9 +84,7 @@ function FloatingPanelFacade(props) {
 									},
 									get children() {
 										var _el$ = _tmpl$();
-										insert(_el$, () => {
-											return props.description;
-										});
+										insert(_el$, () => props.description);
 										return _el$;
 									}
 								}),
@@ -100,15 +94,11 @@ function FloatingPanelFacade(props) {
 									},
 									get children() {
 										var _el$2 = _tmpl$();
-										insert(_el$2, () => {
-											return props.content;
-										});
+										insert(_el$2, () => props.content);
 										return _el$2;
 									}
 								}),
-								memo(() => {
-									return props.children;
-								})
+								memo(() => props.children)
 							];
 						} }),
 						createComponent(For, {
@@ -128,5 +118,4 @@ const FloatingPanel = defineFamily(FloatingPanelFacade, {
 	Root: FloatingPanelRoot
 });
 injectComponentStyle("floating-panel");
-//#endregion
 export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -1,7 +1,5 @@
 import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/solid/focus-trap";
-//#region src/components/focus-trap/index.d.ts
 export declare const FocusTrap: ((props: import("@ark-ui/solid/focus-trap").FocusTrapProps) => import("solid-js").JSX.Element) & {
   Root: (props: import("@ark-ui/solid/focus-trap").FocusTrapProps) => import("solid-js").JSX.Element;
 };
-//#endregion
 export type { FocusTrapBaseProps, FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -1,9 +1,8 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
 import { FocusTrap as FocusTrap$1 } from "@ark-ui/solid/focus-trap";
-//#region src/components/focus-trap/index.ts
+// src/components/focus-trap/index.ts
 /** Trap focus within a subtree — for containers that live outside the
 * dialog machine but still owe the keyboard a boundary. Headless, like
 * the rest of Ark's utilities. */
 const FocusTrap = withSelfRoot(FocusTrap$1);
-//#endregion
 export { FocusTrap };

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

@@ -1,6 +1,5 @@
 import { Component, JSX } from "solid-js";
 import { FieldApi, FormApi, SolidFormApi, createField, createForm } from "@tanstack/solid-form";
-//#region src/components/form/index.d.ts
 /** The seam this family passes the engine through — the members the
  * components drive, with the engine's field-name generics opened to
  * `any`. The engine ships no "any form" alias: its loosest, `FormLikeAPI`,
@@ -40,5 +39,4 @@ export interface FormFieldProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
 export declare const FormField: ((props: FormFieldProps) => JSX.Element) & {
   Root: (props: FormFieldProps) => JSX.Element;
 };
-//#endregion
 export { type FieldApi, type FormApi, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };

package/dist/components/form/index.mjs

@@ -1,13 +1,13 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, createContext, splitProps, useContext } from "solid-js";
 import { Field } from "@ark-ui/solid/field";
 import { createField, createForm } from "@tanstack/solid-form";
-//#region src/components/form/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<form>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+// src/components/form/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<form>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
 const FormContext = createContext(null);
 /** A validator's complaint is a string or a Standard Schema issue; both
 * reduce to the sentence the field shows. */
@@ -27,16 +27,15 @@ const Form = withSelfRoot(function Form(props) {
 		},
 		get children() {
 			var _el$ = _tmpl$();
-			claimElement(_el$);
-			spread(_el$, [rest, {
+			spread(_el$, mergeProps(rest, {
 				"data-scope": "form",
 				"data-part": "root",
-				novalidate: true,
-				onSubmit: (event) => {
+				"novalidate": true,
+				"onSubmit": (event) => {
 					event.preventDefault();
 					own.form.handleSubmit();
 				}
-			}], false);
+			}), false, false);
 			return _el$;
 		}
 	});
@@ -61,55 +60,41 @@ const FormField = withSelfRoot(function FormField(props) {
 			const meta = field().state.meta;
 			return (meta.isTouched ? meta.errors ?? [] : [meta.errorMap?.onSubmit].flat().filter(Boolean)).map(errorText).filter(Boolean);
 		};
-		var _el$2 = _tmpl$2();
-		spread(_el$2, [rest, { get "data-form-field"() {
-			return own.name;
-		} }], true);
-		insert(_el$2, createComponent(Field.Root, {
-			get id() {
-				return id();
-			},
-			get invalid() {
-				return own.invalid || errors().length > 0;
-			},
-			get required() {
-				return own.required;
-			},
-			get disabled() {
-				return own.disabled;
-			},
-			get children() {
-				return [
-					memo(() => {
-						return memo(() => {
-							return !!own.label;
-						})() ? createComponent(Field.Label, { get children() {
+		return (() => {
+			var _el$2 = _tmpl$2();
+			spread(_el$2, mergeProps(rest, { get ["data-form-field"]() {
+				return own.name;
+			} }), false, true);
+			insert(_el$2, createComponent(Field.Root, {
+				get id() {
+					return id();
+				},
+				get invalid() {
+					return own.invalid || errors().length > 0;
+				},
+				get required() {
+					return own.required;
+				},
+				get disabled() {
+					return own.disabled;
+				},
+				get children() {
+					return [
+						memo(() => memo(() => !!own.label)() ? createComponent(Field.Label, { get children() {
 							return own.label;
-						} }) : null;
-					}),
-					memo(() => {
-						return memo(() => {
-							return typeof own.children === "function";
-						})() ? own.children(field) : own.children;
-					}),
-					memo(() => {
-						return memo(() => {
-							return !!(own.hint && errors().length === 0);
-						})() ? createComponent(Field.HelperText, { get children() {
+						} }) : null),
+						memo(() => memo(() => typeof own.children === "function")() ? own.children(field) : own.children),
+						memo(() => memo(() => !!(own.hint && errors().length === 0))() ? createComponent(Field.HelperText, { get children() {
 							return own.hint;
-						} }) : null;
-					}),
-					memo(() => {
-						return memo(() => {
-							return errors().length > 0;
-						})() ? createComponent(Field.ErrorText, { get children() {
+						} }) : null),
+						memo(() => memo(() => errors().length > 0)() ? createComponent(Field.ErrorText, { get children() {
 							return errors()[0];
-						} }) : null;
-					})
-				];
-			}
-		}));
-		return _el$2;
+						} }) : null)
+					];
+				}
+			}));
+			return _el$2;
+		})();
 	};
 	return createComponent(Show, {
 		get when() {
@@ -127,5 +112,4 @@ const FormField = withSelfRoot(function FormField(props) {
 		}))
 	});
 });
-//#endregion
 export { Form, FormField, createField, createField as useField, createForm, createForm as useForm };

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

@@ -1,9 +1,7 @@
 import { Format as Format$1 } from "@ark-ui/solid/format";
-//#region src/components/format/index.d.ts
 /** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
  * numbers, currency, bytes and relative time. The components render bare
  * text with no DOM of their own — typography flows from the token layer,
  * so there is no component stylesheet. The API is Ark's own — Number,
  * Byte, Time, RelativeTime. */
-export declare const Format: typeof Format$1;
-//#endregion
+export declare const Format: typeof Format$1;

package/dist/components/format/index.mjs

@@ -1,10 +1,9 @@
 import { Format as Format$1 } from "@ark-ui/solid/format";
-//#region src/components/format/index.ts
+// src/components/format/index.ts
 /** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
 * numbers, currency, bytes and relative time. The components render bare
 * text with no DOM of their own — typography flows from the token layer,
 * so there is no component stylesheet. The API is Ark's own — Number,
 * Byte, Time, RelativeTime. */
 const Format = Format$1;
-//#endregion
 export { Format };

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

@@ -1,6 +1,5 @@
 import { ComponentProps } from "solid-js";
 import { Frame as Frame$1 } from "@ark-ui/solid/frame";
-//#region src/components/frame/index.d.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
  * iframe whose body mounts the children and whose `head` prop
  * carries extra <head> elements — styles the child renders must
@@ -12,4 +11,4 @@ declare function FrameRoot(props: ComponentProps<typeof Frame$1>): import("solid
 export declare const Frame: typeof FrameRoot & {
   Root: typeof FrameRoot;
 };
-//#endregion
+export {};

package/dist/components/frame/index.mjs

@@ -1,8 +1,8 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
 import { createComponent, mergeProps } from "solid-js";
 import { Frame as Frame$1 } from "@ark-ui/solid/frame";
-//#region src/components/frame/index.ts
+// src/components/frame/index.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
 * iframe whose body mounts the children and whose `head` prop
 * carries extra <head> elements — styles the child renders must
@@ -17,5 +17,4 @@ function FrameRoot(props) {
 	} }));
 }
 const Frame = withSelfRoot(FrameRoot);
-//#endregion
 export { Frame };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/grid/index.d.ts
 /** An alignment lattice: tracks of equal measure, sized by column count
  * — or, with `minChildWidth`, as many tracks as the container fits. */
 export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -11,5 +10,4 @@ export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 export declare const Grid: ((props: GridProps) => JSX.Element) & {
   Root: (props: GridProps) => JSX.Element;
-};
-//#endregion
+};

package/dist/components/grid/index.mjs

@@ -1,9 +1,9 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/grid/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+// src/components/grid/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 /** The same named steps of the space ramp the stack uses — one
 * vocabulary of distance across the layout primitives. */
 const gapVars = {
@@ -21,23 +21,24 @@ const Grid = withSelfRoot(function Grid(props) {
 		"gap",
 		"minChildWidth"
 	]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		get style() {
-			return {
-				...rest.style,
-				"--bs-grid-columns": String(own.columns ?? 12),
-				"--bs-grid-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
-				...own.minChildWidth != null ? { "--bs-grid-min-child-width": own.minChildWidth } : {}
-			};
-		},
-		"data-scope": "grid",
-		"data-part": "root",
-		get "data-autofill"() {
-			return own.minChildWidth != null ? "" : void 0;
-		}
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-grid-columns": String(own.columns ?? 12),
+					"--bs-grid-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
+					...own.minChildWidth != null ? { "--bs-grid-min-child-width": own.minChildWidth } : {}
+				};
+			},
+			"data-scope": "grid",
+			"data-part": "root",
+			get ["data-autofill"]() {
+				return own.minChildWidth != null ? "" : void 0;
+			}
+		}), false, false);
+		return _el$;
+	})();
 });
-//#endregion
 export { Grid };

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

@@ -1,9 +1,7 @@
-//#region src/components/highlight/index.d.ts
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
  * strokes of pigment on the page — a quiet tint of the accent behind the
  * ink, never neon. The component renders bare <mark> elements, so the
  * document-wide mark default carries the look. The API is Ark's own. */
 export declare const Highlight: ((props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element) & {
   Root: (props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element;
-};
-//#endregion
+};

package/dist/components/highlight/index.mjs

@@ -1,12 +1,11 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
-//#region src/components/highlight/index.ts
+// src/components/highlight/index.ts
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
 * strokes of pigment on the page — a quiet tint of the accent behind the
 * ink, never neon. The component renders bare <mark> elements, so the
 * document-wide mark default carries the look. The API is Ark's own. */
 const Highlight = withSelfRoot(Highlight$1);
 injectComponentStyle("highlight");
-//#endregion
 export { Highlight };

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

@@ -1,6 +1,5 @@
 import { ComponentProps, JSX } from "solid-js";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
-//#region src/components/hover-card/index.d.ts
 /** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
  * that dissolves in over a quiet inline link, never stealing focus. The
  * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
@@ -22,4 +21,4 @@ declare function HoverCardFacade(props: HoverCardFacadeProps): JSX.Element;
 export declare const HoverCard: typeof HoverCardFacade & Omit<typeof HoverCard$1, "Root"> & {
   Root: typeof HoverCardRoot;
 };
-//#endregion
+export {};