@bysages/solid 0.4.2 → 0.4.4

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 //#region src/components/avatar/index.d.ts
 /** Avatar, dressed in the paper-and-ink system: a circular seal on
@@ -9,15 +9,27 @@ import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 export type AvatarSize = "sm" | "md" | "lg";
 export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   /** Seal diameter: the small, medium, or large control rung. The
-   * default (large) stands as tall as the biggest control so an avatar
+   * default (medium) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
   /** The corner: round by default; square cuts it sharp, a stamp
    * beside a round portrait. */
   shape?: "circle" | "square";
 }
-declare function AvatarRoot(props: AvatarProps): import("solid-js").JSX.Element;
-export declare const Avatar: typeof AvatarRoot & Omit<typeof Avatar$1, "Root"> & {
+declare function AvatarRoot(props: AvatarProps): JSX.Element;
+export interface AvatarFacadeProps extends Omit<AvatarProps, "children" | "shape" | "size"> {
+  /** The person's name — the fallback initials and image description. */
+  name?: string;
+  /** The portrait source, loaded above the initials fallback. */
+  src?: string;
+  size?: AvatarSize;
+  shape?: "circle" | "square";
+  children?: JSX.Element;
+}
+/** The shorthand: a complete avatar from a name and image, with the
+ * anatomy still there when a consumer needs to compose its own. */
+declare function AvatarFacade(props: AvatarFacadeProps): JSX.Element;
+export declare const Avatar: typeof AvatarFacade & Omit<typeof Avatar$1, "Root"> & {
   Root: typeof AvatarRoot;
 };
 //#endregion

package/dist/components/avatar/index.mjs

@@ -2,7 +2,7 @@ import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 //#region src/components/avatar/index.tsx
 function AvatarRoot(props) {
@@ -13,14 +13,71 @@ function AvatarRoot(props) {
 			return id();
 		},
 		get "data-size"() {
-			return own.size;
+			return own.size ?? "md";
 		},
 		get "data-shape"() {
 			return own.shape ?? "circle";
 		}
 	}));
 }
-const Avatar = defineFamily(AvatarRoot, {
+function initials(name) {
+	return name?.trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("") ?? "";
+}
+/** The shorthand: a complete avatar from a name and image, with the
+* anatomy still there when a consumer needs to compose its own. */
+function AvatarFacade(props) {
+	const [own, rest] = splitProps(props, [
+		"name",
+		"shape",
+		"size",
+		"src"
+	]);
+	return createComponent(AvatarRoot, mergeProps(rest, {
+		get shape() {
+			return own.shape ?? "circle";
+		},
+		get size() {
+			return own.size ?? "md";
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return props.children;
+				},
+				get fallback() {
+					return [createComponent(Show, {
+						get when() {
+							return own.src;
+						},
+						get children() {
+							return createComponent(Avatar$1.Image, {
+								get alt() {
+									return own.name;
+								},
+								get src() {
+									return own.src;
+								}
+							});
+						}
+					}), createComponent(Show, {
+						get when() {
+							return own.name;
+						},
+						get children() {
+							return createComponent(Avatar$1.Fallback, { get children() {
+								return initials(own.name);
+							} });
+						}
+					})];
+				},
+				get children() {
+					return props.children;
+				}
+			});
+		}
+	}));
+}
+const Avatar = defineFamily(AvatarFacade, {
 	...Avatar$1,
 	Root: AvatarRoot
 });

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

@@ -12,7 +12,23 @@ declare function Root(props: BannerRootProps): JSX.Element;
 /** The quiet close: a plain square-cut button; dismissal stays the
  * consumer's state. */
 declare function Close(props: JSX.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-export declare const Banner: typeof Root & {
+export interface BannerFacadeProps extends Omit<BannerRootProps, "status" | "title"> {
+  /** The status pigment; ink is the neutral register. */
+  status?: BannerStatus;
+  /** What the notice says at a glance. */
+  title?: string;
+  /** The supporting line, in the quiet register. */
+  message?: string;
+  /** Give the reader a way to fold the notice. */
+  dismissible?: boolean;
+  /** Where the reader answers — a row of buttons. */
+  actions?: JSX.Element;
+  children?: JSX.Element;
+}
+/** The shorthand: a complete notice from text, with actions and the
+ * close folded away until asked for. Once closed, it stays closed. */
+declare function BannerFacade(props: BannerFacadeProps): JSX.Element;
+export declare const Banner: typeof BannerFacade & {
   Root: typeof Root;
   Icon: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
   Body: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/dist/components/banner/index.mjs

@@ -2,7 +2,7 @@ import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { Show, createSignal, splitProps } from "solid-js";
 //#region src/components/banner/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
@@ -59,7 +59,83 @@ function Close(props) {
 	});
 	return _el$2;
 }
-const Banner = Object.assign(Root, {
+/** The shorthand: a complete notice from text, with actions and the
+* close folded away until asked for. Once closed, it stays closed. */
+function BannerFacade(props) {
+	const [own, rest] = splitProps(props, [
+		"actions",
+		"children",
+		"dismissible",
+		"message",
+		"status",
+		"title"
+	]);
+	const [visible, setVisible] = createSignal(true);
+	return createComponent(Show, {
+		get when() {
+			return visible();
+		},
+		get children() {
+			return createComponent(Root, mergeProps(rest, {
+				get status() {
+					return own.status;
+				},
+				get children() {
+					return [createComponent(Body, { get children() {
+						return [
+							createComponent(Show, {
+								get when() {
+									return own.title;
+								},
+								get children() {
+									return createComponent(Title, { get children() {
+										return own.title;
+									} });
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return own.message;
+								},
+								get children() {
+									return createComponent(Description, { get children() {
+										return own.message;
+									} });
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return own.children;
+								},
+								get children() {
+									return own.children;
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return own.actions;
+								},
+								get children() {
+									return createComponent(Actions, { get children() {
+										return own.actions;
+									} });
+								}
+							})
+						];
+					} }), createComponent(Show, {
+						get when() {
+							return own.dismissible;
+						},
+						get children() {
+							return createComponent(Close, { onClick: () => setVisible(false) });
+						}
+					})];
+				}
+			}));
+		}
+	});
+}
+const Banner = Object.assign(BannerFacade, {
 	Root,
 	Icon,
 	Body,

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

@@ -1,6 +1,19 @@
 import { Component, JSX } from "solid-js";
 //#region src/components/breadcrumb/index.d.ts
-export declare const Breadcrumb: Component<Record<string, unknown>> & {
+export type BreadcrumbItem = string | {
+  label: string;
+  href?: string;
+};
+export interface BreadcrumbFacadeProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** The waymarks, in walking order. */
+  items: BreadcrumbItem[];
+  /** The trail's name, when the default is not enough. */
+  label?: string;
+}
+/** The shorthand: the whole trail from plain labels and destinations,
+ * with the last waymark set down as the current page. */
+declare function BreadcrumbFacade(props: BreadcrumbFacadeProps): JSX.Element;
+export declare const Breadcrumb: typeof BreadcrumbFacade & {
   Root: Component<Record<string, unknown>>;
   List: Component<Record<string, unknown>>;
   Item: Component<Record<string, unknown>>;

package/dist/components/breadcrumb/index.mjs

@@ -1,7 +1,7 @@
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { mergeProps as mergeProps$1 } from "solid-js";
+import { For, Show, mergeProps as mergeProps$1, splitProps } from "solid-js";
 //#region src/components/breadcrumb/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 function part(name, tag, extra = {}) {
@@ -32,7 +32,56 @@ const Separator = (props) => (() => {
 	}], false);
 	return _el$;
 })();
-const Breadcrumb = Object.assign(Root, {
+/** The shorthand: the whole trail from plain labels and destinations,
+* with the last waymark set down as the current page. */
+function BreadcrumbFacade(props) {
+	const [own, rest] = splitProps(props, ["items", "label"]);
+	return createComponent(Root, mergeProps(rest, () => {
+		return own.label ? { "aria-label": own.label } : {};
+	}, { get children() {
+		return createComponent(List, { get children() {
+			return createComponent(For, {
+				get each() {
+					return own.items;
+				},
+				children: (item, index) => {
+					const entry = typeof item === "string" ? { label: item } : item;
+					const current = () => index() === own.items.length - 1;
+					return [createComponent(Item, { get children() {
+						return createComponent(Show, {
+							get when() {
+								return !current();
+							},
+							get fallback() {
+								return createComponent(Current, { get children() {
+									return entry.label;
+								} });
+							},
+							get children() {
+								return createComponent(Link, {
+									get href() {
+										return entry.href;
+									},
+									get children() {
+										return entry.label;
+									}
+								});
+							}
+						});
+					} }), createComponent(Show, {
+						get when() {
+							return !current();
+						},
+						get children() {
+							return createComponent(Separator, {});
+						}
+					})];
+				}
+			});
+		} });
+	} }));
+}
+const Breadcrumb = Object.assign(BreadcrumbFacade, {
 	Root,
 	List,
 	Item,

package/dist/components/color-picker/index.d.mts

@@ -12,6 +12,8 @@ import { Color, ColorPicker as ColorPicker$1, ColorPickerRootProps } from "@ark-
 type ColorPickerOwnProps = {
   /** One rung of the control-height ladder for the swatch seal. */
   size?: "sm" | "md" | "lg";
+  /** Saved colors rendered as a flat swatch row. */
+  swatches?: string[];
 };
 declare function ColorPickerRoot(props: ColorPickerRootProps & ColorPickerOwnProps): import("solid-js").JSX.Element;
 type ColorPickerFacadeProps = Omit<ComponentProps<typeof ColorPickerRoot>, "children" | "defaultValue" | "disabled" | "invalid" | "label" | "onValueChange" | "required" | "value"> & {
@@ -21,6 +23,8 @@ type ColorPickerFacadeProps = Omit<ComponentProps<typeof ColorPickerRoot>, "chil
   invalid?: boolean;
   required?: boolean;
   label?: string;
+  /** Saved colors rendered as a flat swatch row. */
+  swatches?: string[];
   onValueChange?: (value: unknown) => void;
 };
 declare function ColorPickerFacade(props: ColorPickerFacadeProps): import("solid-js").JSX.Element;

package/dist/components/color-picker/index.mjs

@@ -3,7 +3,7 @@ import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, insert, mergeProps, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { Show, splitProps } from "solid-js";
+import { For, Show, splitProps } from "solid-js";
 import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/solid/color-picker";
 //#region src/components/color-picker/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=color-picker data-part=channel-controls><div data-scope=color-picker data-part=channel-sliders><!><!>`);
@@ -21,8 +21,9 @@ function ColorPickerRoot(props) {
 }
 function ColorPickerFacade(props) {
 	injectComponentStyle("color-picker");
+	const [own, rootProps] = splitProps(props, ["size", "swatches"]);
 	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
-	return createComponent(ColorPickerRoot, mergeProps(props, {
+	return createComponent(ColorPickerRoot, mergeProps(rootProps, {
 		get value() {
 			return toColor(props.value);
 		},
@@ -58,37 +59,70 @@ function ColorPickerFacade(props) {
 				} }),
 				createComponent(ColorPicker$1.Positioner, { get children() {
 					return createComponent(ColorPicker$1.Content, { get children() {
-						return [createComponent(ColorPicker$1.Area, { get children() {
-							return [createComponent(ColorPicker$1.AreaBackground, {}), createComponent(ColorPicker$1.AreaThumb, {})];
-						} }), (() => {
-							var _el$ = _tmpl$();
-							var _el$2 = _el$.firstChild;
-							var _el$3 = _el$2.firstChild;
-							var _el$4 = _el$3.nextSibling;
-							insert(_el$, createComponent(ColorPicker$1.EyeDropperTrigger, { get children() {
-								return iconNode("pipette", {
-									width: 14,
-									height: 14
-								});
-							} }), _el$2);
-							insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
-								channel: "hue",
+						return [
+							createComponent(ColorPicker$1.Area, { get children() {
+								return [createComponent(ColorPicker$1.AreaBackground, {}), createComponent(ColorPicker$1.AreaThumb, {})];
+							} }),
+							(() => {
+								var _el$ = _tmpl$();
+								var _el$2 = _el$.firstChild;
+								var _el$3 = _el$2.firstChild;
+								var _el$4 = _el$3.nextSibling;
+								insert(_el$, createComponent(ColorPicker$1.EyeDropperTrigger, { get children() {
+									return iconNode("pipette", {
+										width: 14,
+										height: 14
+									});
+								} }), _el$2);
+								insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+									channel: "hue",
+									get children() {
+										return [createComponent(ColorPicker$1.ChannelSliderTrack, {}), createComponent(ColorPicker$1.ChannelSliderThumb, {})];
+									}
+								}), _el$3);
+								insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
+									channel: "alpha",
+									get children() {
+										return [
+											createComponent(ColorPicker$1.TransparencyGrid, {}),
+											createComponent(ColorPicker$1.ChannelSliderTrack, {}),
+											createComponent(ColorPicker$1.ChannelSliderThumb, {})
+										];
+									}
+								}), _el$4);
+								return _el$;
+							})(),
+							createComponent(Show, {
+								get when() {
+									return (own.swatches ?? []).length > 0;
+								},
 								get children() {
-									return [createComponent(ColorPicker$1.ChannelSliderTrack, {}), createComponent(ColorPicker$1.ChannelSliderThumb, {})];
+									return createComponent(ColorPicker$1.SwatchGroup, { get children() {
+										return createComponent(For, {
+											get each() {
+												return own.swatches;
+											},
+											children: (color) => createComponent(ColorPicker$1.SwatchTrigger, {
+												value: color,
+												get children() {
+													return createComponent(ColorPicker$1.Swatch, {
+														value: color,
+														get children() {
+															return createComponent(ColorPicker$1.SwatchIndicator, { get children() {
+																return iconNode("check", {
+																	width: "12",
+																	height: "12"
+																});
+															} });
+														}
+													});
+												}
+											})
+										});
+									} });
 								}
-							}), _el$3);
-							insert(_el$2, createComponent(ColorPicker$1.ChannelSlider, {
-								channel: "alpha",
-								get children() {
-									return [
-										createComponent(ColorPicker$1.TransparencyGrid, {}),
-										createComponent(ColorPicker$1.ChannelSliderTrack, {}),
-										createComponent(ColorPicker$1.ChannelSliderThumb, {})
-									];
-								}
-							}), _el$4);
-							return _el$;
-						})()];
+							})
+						];
 					} });
 				} }),
 				createComponent(ColorPicker$1.HiddenInput, {})

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

@@ -53,7 +53,30 @@ export interface FloatButtonItemProps extends Omit<JSX.HTMLAttributes<HTMLDivEle
   onClick?: (event: MouseEvent) => void;
 }
 declare function FloatButtonItem(props: FloatButtonItemProps): JSX.Element;
-export declare const FloatButton: typeof FloatButtonRoot & {
+export interface FloatButtonAction {
+  label: string;
+  /** A curated core icon; pencil is the fallback mark. */
+  icon?: string;
+  disabled?: boolean;
+  /** The action fires before the fan folds. */
+  onClick?: () => void;
+}
+export interface FloatButtonFacadeProps extends Omit<FloatButtonRootProps, "open"> {
+  /** Controlled openness; leave unset for the facade to hold it. */
+  open?: boolean;
+  /** The accessible name for the floating trigger. */
+  label?: string;
+  /** The fanned-out actions, in reading order. */
+  actions?: FloatButtonAction[];
+  placement?: FloatButtonPlacement;
+  size?: FloatButtonSize;
+  /** Open the dial when it mounts. */
+  defaultOpen?: boolean;
+}
+/** The shorthand: a speed dial from plain actions; the trigger and
+ * openness stay inside the family. */
+declare function FloatButtonFacade(props: FloatButtonFacadeProps): JSX.Element;
+export declare const FloatButton: typeof FloatButtonFacade & {
   Root: typeof FloatButtonRoot;
   Trigger: typeof FloatButtonTrigger;
   Item: typeof FloatButtonItem;

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

@@ -1,8 +1,9 @@
+import { r as iconNode } from "../../icon-DTqmJCd5.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 { injectComponentStyle } from "@bysages/core/styling";
-import { createContext, createSignal, splitProps, useContext } from "solid-js";
+import { For, Show, 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>`);
@@ -121,7 +122,77 @@ function FloatButtonItem(props) {
 	});
 	return _el$2;
 }
-const FloatButton = Object.assign(FloatButtonRoot, {
+/** 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 placement() {
+			return own.placement;
+		},
+		get size() {
+			return own.size;
+		},
+		get 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;
+				}
+			});
+		}
+	}));
+}
+const FloatButton = Object.assign(FloatButtonFacade, {
 	Root: FloatButtonRoot,
 	Trigger: FloatButtonTrigger,
 	Item: FloatButtonItem