@bysages/react 0.4.2 → 0.4.4

package/dist/{ai-response-nhDOlELQ.mjs → ai-response-CjjjprMY.mjs}

@@ -1,3 +1,4 @@
+import { n as iconHtml } from "./icon-Cri0-7-x.mjs";
 import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
@@ -5,11 +6,17 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { renderHtml } from "@tanstack/markdown/html";
 //#region src/components/ai-response/code-copy.ts
-/** The two glyphs a copy affordance needs: the stamp and its
+/** The two curated icons a copy affordance needs: the stamp and its
 * confirmation. Inline SVG keeps the enhancement framework-agnostic —
 * it lives beside the renderer's generated code HTML. */
-const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
-const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+const COPY_CODE_ICON = iconHtml("copy", {
+	width: "14",
+	height: "14"
+});
+const COPIED_CODE_ICON = iconHtml("check", {
+	width: "14",
+	height: "14"
+});
 /** How long the confirmation stays before the stamp returns. */
 const REVERT_MS = 1500;
 /** Make sure every fenced block under `host` carries its copy stamp.

package/dist/{chevron-a2nIZKN4.mjs → chevron-BA7kV9m7.mjs}

@@ -1,4 +1,4 @@
-import { t as iconNode } from "./icon-BALgGtNK.mjs";
+import { r as iconNode } from "./icon-Cri0-7-x.mjs";
 //#region src/components/ai/chevron.tsx
 /** The folding chevron the shared indicator turns. */
 const chevron = iconNode("chevron-right");

package/dist/components/accordion/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
 import { injectComponentStyle } from "@bysages/core/styling";

package/dist/components/ai/index.mjs

@@ -4,7 +4,7 @@ import { Action } from "../ai-action/index.mjs";
 import { AiMessage as Message } from "../ai-message/index.mjs";
 import { AiPromptInput as PromptInput } from "../ai-prompt-input/index.mjs";
 import { AiReasoning as Reasoning } from "../ai-reasoning/index.mjs";
-import { t as Response } from "../../ai-response-nhDOlELQ.mjs";
+import { t as Response } from "../../ai-response-CjjjprMY.mjs";
 import { AiSource as Source, AiSources as Sources } from "../ai-source/index.mjs";
 import { AiSuggestion as Suggestion } from "../ai-suggestion/index.mjs";
 import { AiTool as Tool } from "../ai-tool/index.mjs";

package/dist/components/ai-attachments/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";

package/dist/components/ai-prompt-input/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";

package/dist/components/ai-reasoning/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { t as chevron } from "../../chevron-a2nIZKN4.mjs";
+import { t as chevron } from "../../chevron-BA7kV9m7.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-nhDOlELQ.mjs";
+import { t as Response } from "../../ai-response-CjjjprMY.mjs";
 export { Response as AiResponse, Response };

package/dist/components/ai-tool/index.mjs

@@ -1,5 +1,5 @@
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { t as chevron } from "../../chevron-a2nIZKN4.mjs";
+import { t as chevron } from "../../chevron-BA7kV9m7.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/alert/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";

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

@@ -9,7 +9,7 @@ import { Avatar as Avatar$1 } from "@ark-ui/react/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
@@ -17,7 +17,17 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   shape?: "circle" | "square";
 }
 declare function AvatarRoot(props: AvatarProps): import("react").JSX.Element;
-export declare const Avatar: typeof AvatarRoot & typeof Avatar$1 & {
+export interface AvatarFacadeProps extends AvatarProps {
+  /** The person's name; its first two initials wait beneath an image. */
+  name?: string;
+  /** The portrait to load over the name's initials. */
+  src?: string;
+}
+declare function AvatarFacade({ name, src, size, shape, children, ...rest }: AvatarFacadeProps): import("react").JSX.Element;
+declare namespace AvatarFacade {
+  var displayName: string;
+}
+export declare const Avatar: typeof AvatarFacade & typeof Avatar$1 & {
   Root: typeof AvatarRoot;
 };
 //#endregion

package/dist/components/avatar/index.mjs

@@ -1,11 +1,14 @@
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 //#region src/components/avatar/index.tsx
+function initials(name) {
+	return name?.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") ?? "";
+}
 function AvatarRoot(props) {
 	const id = useElementId("avatar", props);
-	const { size, shape = "circle", ...rest } = props;
+	const { size = "md", shape = "circle", ...rest } = props;
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
 		...rest,
 		id,
@@ -13,7 +16,19 @@ function AvatarRoot(props) {
 		"data-shape": shape
 	});
 }
-const Avatar = Object.assign(AvatarRoot, {
+function AvatarFacade({ name, src, size = "md", shape, children, ...rest }) {
+	return /* @__PURE__ */ jsx(AvatarRoot, {
+		size,
+		shape,
+		...rest,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [src ? /* @__PURE__ */ jsx(Avatar$1.Image, {
+			src,
+			alt: name
+		}) : null, name ? /* @__PURE__ */ jsx(Avatar$1.Fallback, { children: initials(name) }) : null] })
+	});
+}
+AvatarFacade.displayName = "SAvatar";
+const Avatar = Object.assign(AvatarFacade, {
 	...Avatar$1,
 	Root: AvatarRoot
 });

package/dist/components/back-top/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";

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

@@ -1,10 +1,24 @@
-import { ButtonHTMLAttributes, HTMLAttributes } from "react";
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 //#region src/components/banner/index.d.ts
 export type BannerStatus = "ink" | "info" | "success" | "warning" | "danger";
 export interface BannerRootProps extends HTMLAttributes<HTMLElement> {
   status?: BannerStatus;
 }
-export declare const Banner: (({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element) & {
+export interface BannerFacadeProps extends Omit<BannerRootProps, "title"> {
+  /** The glance line, set in the serif. */
+  title?: string;
+  /** The supporting line beneath the title. */
+  message?: string;
+  /** Adds the close control and lets the facade own dismissal. */
+  dismissible?: boolean;
+  /** The reader's answers, laid beside the notice's prose. */
+  actions?: ReactNode;
+}
+declare function BannerFacade({ status, title, message, dismissible, actions, children, ...rest }: BannerFacadeProps): import("react").JSX.Element | null;
+declare namespace BannerFacade {
+  var displayName: string;
+}
+export declare const Banner: typeof BannerFacade & {
   Root: ({ status, children, ...rest }: BannerRootProps) => import("react").JSX.Element;
   Icon: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/components/banner/index.mjs

@@ -1,7 +1,8 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/banner/index.tsx
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
@@ -44,7 +45,22 @@ const Close = (rest) => {
 		children: iconNode("x")
 	});
 };
-const Banner = Object.assign(Root, {
+function BannerFacade({ status = "ink", title, message, dismissible = false, actions, children, ...rest }) {
+	const [open, setOpen] = useState(true);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs(Root, {
+		status,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(Body, { children: [
+			title ? /* @__PURE__ */ jsx(Title, { children: title }) : null,
+			message ? /* @__PURE__ */ jsx(Description, { children: message }) : null,
+			children,
+			actions ? /* @__PURE__ */ jsx(Actions, { children: actions }) : null
+		] }), dismissible ? /* @__PURE__ */ jsx(Close, { onClick: () => setOpen(false) }) : null]
+	});
+}
+BannerFacade.displayName = "SBanner";
+const Banner = Object.assign(BannerFacade, {
 	Root,
 	Icon,
 	Body,

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

@@ -1,7 +1,21 @@
 import { AnchorHTMLAttributes, HTMLAttributes } from "react";
 //#region src/components/breadcrumb/index.d.ts
 declare function Root({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
-export declare const Breadcrumb: typeof Root & {
+export type BreadcrumbItem = string | {
+  label: string;
+  href?: string;
+};
+export interface BreadcrumbFacadeProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  /** The trail, ordered from its origin to the current page. */
+  items: BreadcrumbItem[];
+  /** Replaces the shared accessible name for the trail. */
+  label?: string;
+}
+declare function BreadcrumbFacade({ items, label, className, ...rest }: BreadcrumbFacadeProps): import("react").JSX.Element;
+declare namespace BreadcrumbFacade {
+  var displayName: string;
+}
+export declare const Breadcrumb: typeof BreadcrumbFacade & {
   Root: typeof Root;
   List: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/components/breadcrumb/index.mjs

@@ -1,6 +1,7 @@
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 //#region src/components/breadcrumb/index.tsx
 /** 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
@@ -32,7 +33,24 @@ const Item = part("Item", "li");
 const Link = part("Link", "a");
 const Current = part("Current", "span", { "aria-current": "page" });
 const Separator = part("Separator", "span", { "aria-hidden": "true" }, "/");
-const Breadcrumb = Object.assign(Root, {
+function BreadcrumbFacade({ items, label, className, ...rest }) {
+	const last = items.length - 1;
+	return /* @__PURE__ */ jsx(Root, {
+		className,
+		...rest,
+		"aria-label": rest["aria-label"] ?? label,
+		children: /* @__PURE__ */ jsx(List, { children: items.map((item, index) => {
+			const text = typeof item === "string" ? item : item.label;
+			const href = typeof item === "string" ? void 0 : item.href;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item, { children: index === last ? /* @__PURE__ */ jsx(Current, { children: text }) : /* @__PURE__ */ jsx(Link, {
+				href,
+				children: text
+			}) }), index < last ? /* @__PURE__ */ jsx(Separator, {}) : null] }, `${text}-${index}`);
+		}) })
+	});
+}
+BreadcrumbFacade.displayName = "SBreadcrumb";
+const Breadcrumb = Object.assign(BreadcrumbFacade, {
 	Root,
 	List,
 	Item,

package/dist/components/calendar/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { DatePicker as DatePicker$1 } from "../date-picker/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";

package/dist/components/carousel/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";

package/dist/components/checkbox/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/checkbox-group/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";

package/dist/components/clipboard/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/collapsible/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -21,6 +21,8 @@ type ColorPickerFacadeProps = {
   invalid?: boolean;
   required?: boolean;
   label?: string;
+  /** Saved colors rendered as a flat swatch row. */
+  swatches?: string[];
   size?: "sm" | "md" | "lg";
   className?: string;
   style?: CSSProperties;

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

@@ -1,9 +1,13 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/react/color-picker";
 //#region src/components/color-picker/index.tsx
+const checkIcon = iconNode("check", {
+	width: 12,
+	height: 12
+});
 function ColorPickerRoot(props) {
 	injectComponentStyle("color-picker");
 	const id = useElementId("color-picker", props);
@@ -18,7 +22,7 @@ function ColorPickerRoot(props) {
 * swatch trigger, while the popup carries the area and hue/alpha tracks.
 * Saved swatches and format switches remain anatomy work. */
 function ColorPickerFacade(props) {
-	const { value, defaultValue, disabled, invalid, required, label, size = "md", className, style, onValueChange } = props;
+	const { value, defaultValue, disabled, invalid, required, label, swatches = [], size = "md", className, style, onValueChange } = props;
 	const toColor = (color) => typeof color === "string" ? parseColor(color) : color;
 	return /* @__PURE__ */ jsxs(ColorPickerRoot, {
 		size,
@@ -33,28 +37,38 @@ function ColorPickerFacade(props) {
 		children: [
 			label ? /* @__PURE__ */ jsx(ColorPicker$1.Label, { children: label }) : null,
 			/* @__PURE__ */ jsxs(ColorPicker$1.Control, { children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelInput, { channel: "hex" }), /* @__PURE__ */ jsxs(ColorPicker$1.Trigger, { children: [/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}), /* @__PURE__ */ jsx(ColorPicker$1.ValueSwatch, {})] })] }),
-			/* @__PURE__ */ jsx(ColorPicker$1.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker$1.Content, { children: [/* @__PURE__ */ jsxs(ColorPicker$1.Area, { children: [/* @__PURE__ */ jsx(ColorPicker$1.AreaBackground, {}), /* @__PURE__ */ jsx(ColorPicker$1.AreaThumb, {})] }), /* @__PURE__ */ jsxs("div", {
-				"data-scope": "color-picker",
-				"data-part": "channel-controls",
-				children: [/* @__PURE__ */ jsx(ColorPicker$1.EyeDropperTrigger, { children: iconNode("pipette", {
-					width: 14,
-					height: 14
-				}) }), /* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx(ColorPicker$1.Positioner, { children: /* @__PURE__ */ jsxs(ColorPicker$1.Content, { children: [
+				/* @__PURE__ */ jsxs(ColorPicker$1.Area, { children: [/* @__PURE__ */ jsx(ColorPicker$1.AreaBackground, {}), /* @__PURE__ */ jsx(ColorPicker$1.AreaThumb, {})] }),
+				/* @__PURE__ */ jsxs("div", {
 					"data-scope": "color-picker",
-					"data-part": "channel-sliders",
-					children: [/* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
-						channel: "hue",
-						children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}), /* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})]
-					}), /* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
-						channel: "alpha",
-						children: [
-							/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}),
-							/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}),
-							/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})
-						]
+					"data-part": "channel-controls",
+					children: [/* @__PURE__ */ jsx(ColorPicker$1.EyeDropperTrigger, { children: iconNode("pipette", {
+						width: 14,
+						height: 14
+					}) }), /* @__PURE__ */ jsxs("div", {
+						"data-scope": "color-picker",
+						"data-part": "channel-sliders",
+						children: [/* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
+							channel: "hue",
+							children: [/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}), /* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})]
+						}), /* @__PURE__ */ jsxs(ColorPicker$1.ChannelSlider, {
+							channel: "alpha",
+							children: [
+								/* @__PURE__ */ jsx(ColorPicker$1.TransparencyGrid, {}),
+								/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderTrack, {}),
+								/* @__PURE__ */ jsx(ColorPicker$1.ChannelSliderThumb, {})
+							]
+						})]
 					})]
-				})]
-			})] }) }),
+				}),
+				swatches.length > 0 ? /* @__PURE__ */ jsx(ColorPicker$1.SwatchGroup, { children: swatches.map((color) => /* @__PURE__ */ jsx(ColorPicker$1.SwatchTrigger, {
+					value: color,
+					children: /* @__PURE__ */ jsx(ColorPicker$1.Swatch, {
+						value: color,
+						children: /* @__PURE__ */ jsx(ColorPicker$1.SwatchIndicator, { children: checkIcon })
+					})
+				}, color)) }) : null
+			] }) }),
 			/* @__PURE__ */ jsx(ColorPicker$1.HiddenInput, {})
 		]
 	});

package/dist/components/combobox/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/dialog/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/drawer/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/dynamic-input/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";

package/dist/components/editable/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/file-upload/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -35,10 +35,6 @@ const fileIcon = iconNode("file", {
 	width: 16,
 	height: 16
 });
-const uploadIcon = iconNode("upload", {
-	width: 28,
-	height: 28
-});
 const closeIcon = iconNode("x", {
 	width: 14,
 	height: 14
@@ -54,7 +50,7 @@ function FileUploadFacade({ label, placeholder, disabled = false, invalid = fals
 		maxFiles,
 		children: [
 			label ? /* @__PURE__ */ jsx(FileUpload$1.Label, { children: label }) : null,
-			/* @__PURE__ */ jsx(FileUpload$1.Dropzone, { children: /* @__PURE__ */ jsxs(FileUploadTrigger, { children: [uploadIcon, placeholder ?? "Choose files"] }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.Dropzone, { children: /* @__PURE__ */ jsx(FileUploadTrigger, { children: placeholder ?? "Choose files" }) }),
 			/* @__PURE__ */ jsx(FileUpload$1.ItemGroup, { children: /* @__PURE__ */ jsx(FileUpload$1.Context, { children: (api) => api.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload$1.Item, {
 				file,
 				children: [

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

@@ -51,7 +51,28 @@ interface FloatButtonItemProps {
   children?: ReactNode;
 }
 declare function Item({ label, disabled, onClick, children }: FloatButtonItemProps): import("react").JSX.Element;
-export declare const FloatButton: typeof Root & {
+export interface FloatButtonAction {
+  /** The action's accessible name and its surfaced annotation. */
+  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 FloatButtonRootProps {
+  /** The trigger's accessible name. */
+  label?: string;
+  /** The fanned actions behind the trigger. */
+  actions?: FloatButtonAction[];
+  /** Starts the speed dial open before the reader touches it. */
+  defaultOpen?: boolean;
+}
+declare function FloatButtonFacade({ label, actions, placement, size, defaultOpen, children, open: openProp, onOpenChange, ...rest }: FloatButtonFacadeProps): import("react").JSX.Element;
+declare namespace FloatButtonFacade {
+  var displayName: string;
+}
+export declare const FloatButton: typeof FloatButtonFacade & {
   Root: typeof Root;
   Trigger: typeof Trigger;
   Item: typeof Item;

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

@@ -1,7 +1,8 @@
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 //#region src/components/float-button/index.tsx
 /** Context for {@link FloatButtonContextValue}, exported so a custom
@@ -82,7 +83,32 @@ function Item({ label, disabled = false, onClick, children }) {
 		})]
 	});
 }
-const FloatButton = Object.assign(Root, {
+function FloatButtonFacade({ label, actions = [], placement, size, defaultOpen = false, children, open: openProp, onOpenChange, ...rest }) {
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const open = openProp ?? innerOpen;
+	const setOpen = (value) => {
+		setInnerOpen(value);
+		onOpenChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(Root, {
+		open,
+		onOpenChange: setOpen,
+		placement,
+		size,
+		...rest,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Trigger, {
+			label,
+			children: iconNode("plus")
+		}), actions.map((action) => /* @__PURE__ */ jsx(Item, {
+			label: action.label,
+			disabled: action.disabled,
+			onClick: action.onClick,
+			children: iconNode(action.icon ?? "pencil")
+		}, action.label))] })
+	});
+}
+FloatButtonFacade.displayName = "SFloatButton";
+const FloatButton = Object.assign(FloatButtonFacade, {
 	Root,
 	Trigger,
 	Item

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

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -42,6 +42,11 @@ function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, descr
 					stage: "maximized",
 					children: iconNode("maximize-2")
 				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "default",
+					"aria-label": "Restore",
+					children: iconNode("minimize-2")
+				}),
 				/* @__PURE__ */ jsx(FloatingPanel$1.CloseTrigger, {
 					"aria-label": "Close",
 					children: iconNode("x")

package/dist/components/image/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/image-viewer/index.mjs

@@ -1,4 +1,4 @@
 import "../button-group/index.mjs";
 import "../dialog/index.mjs";
-import { t as ImageViewer } from "../../image-viewer-B-hKFkEw.mjs";
+import { t as ImageViewer } from "../../image-viewer-D4FuYrk6.mjs";
 export { ImageViewer };

package/dist/components/json-tree-view/index.mjs

@@ -1,4 +1,4 @@
-import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
 import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";