@bysages/solid 0.4.1 → 0.4.2

package/dist/components/fieldset/index.mjs

@@ -1,19 +1,61 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, memo } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { createComponent, mergeProps } from "solid-js";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
-//#region src/components/fieldset/index.ts
+//#region src/components/fieldset/index.tsx
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
 * legend heading a column of fields. The API is Ark's own — Root, Legend,
 * HelperText, ErrorText. */
 function FieldsetRoot(props) {
 	const id = useElementId("fieldset", () => props.id);
-	return createComponent(Fieldset$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Fieldset$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Fieldset = defineFamily(FieldsetRoot, {
+function FieldsetFacade(props) {
+	injectComponentStyle("fieldset");
+	return createComponent(FieldsetRoot, {
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get "data-required"() {
+			return props.required || void 0;
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(Fieldset$1.Legend, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				memo(() => {
+					return props.children;
+				}),
+				createComponent(Show, {
+					get when() {
+						return props.description;
+					},
+					get children() {
+						return createComponent(Fieldset$1.HelperText, { get children() {
+							return props.description;
+						} });
+					}
+				})
+			];
+		}
+	});
+}
+const Fieldset = defineFamily(FieldsetFacade, {
 	...Fieldset$1,
 	Root: FieldsetRoot
 });

package/dist/components/file-upload/index.d.mts

@@ -1,5 +1,10 @@
+import { ComponentProps } from "solid-js";
 import { FileUpload as FileUpload$1, FileUploadRootProps } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.d.ts
+/** The inner trigger repeats the click binding the dropzone already
+ * owns: keyboard users enter through the dropzone, so the button
+ * leaves the tab order and the semantic tree entirely. */
+declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("solid-js").JSX.Element;
 /** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
  * dropzone that floods with subtle light on drag-over, and accepted files
  * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
@@ -11,7 +16,22 @@ type FileUploadOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function FileUploadRoot(props: FileUploadRootProps & FileUploadOwnProps): import("solid-js").JSX.Element;
-export declare const FileUpload: typeof FileUploadRoot & Omit<typeof FileUpload$1, "Root"> & {
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+ * rules, directories, and controlled files stay on the anatomy. */
+export interface FileUploadFacadeProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  maxFiles?: number;
+  /** One rung of the control-height ladder for the trigger. */
+  size?: "sm" | "md" | "lg";
+}
+declare function FileUploadFacade(props: FileUploadFacadeProps): import("solid-js").JSX.Element;
+type FileUploadParts = Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
   Root: typeof FileUploadRoot;
+  Trigger: typeof FileUploadTrigger;
 };
+export declare const FileUpload: typeof FileUploadFacade & FileUploadParts;
 //#endregion

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

@@ -1,8 +1,9 @@
 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, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { For, Show, splitProps } from "solid-js";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.tsx
 /** The inner trigger repeats the click binding the dropzone already
@@ -26,7 +27,69 @@ function FileUploadRoot(props) {
 		}
 	}));
 }
-const FileUpload = defineFamily(FileUploadRoot, {
+function FileUploadFacade(props) {
+	injectComponentStyle("file-upload");
+	return createComponent(FileUploadRoot, {
+		get size() {
+			return props.size ?? "md";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get invalid() {
+			return props.invalid;
+		},
+		get required() {
+			return props.required;
+		},
+		get maxFiles() {
+			return props.maxFiles;
+		},
+		get children() {
+			return [
+				createComponent(Show, {
+					get when() {
+						return props.label;
+					},
+					get children() {
+						return createComponent(FileUpload$1.Label, { get children() {
+							return props.label;
+						} });
+					}
+				}),
+				createComponent(FileUpload$1.Dropzone, { get children() {
+					return createComponent(FileUploadTrigger, { get children() {
+						return props.placeholder ?? "Choose files";
+					} });
+				} }),
+				createComponent(FileUpload$1.ItemGroup, { get children() {
+					return createComponent(FileUpload$1.Context, { children: (context) => createComponent(For, {
+						get each() {
+							return context().acceptedFiles;
+						},
+						children: (file) => createComponent(FileUpload$1.Item, {
+							file,
+							get children() {
+								return [
+									createComponent(FileUpload$1.ItemPreview, { get children() {
+										return iconNode("file");
+									} }),
+									createComponent(FileUpload$1.ItemName, {}),
+									createComponent(FileUpload$1.ItemSizeText, {}),
+									createComponent(FileUpload$1.ItemDeleteTrigger, { get children() {
+										return iconNode("x");
+									} })
+								];
+							}
+						})
+					}) });
+				} }),
+				createComponent(FileUpload$1.HiddenInput, {})
+			];
+		}
+	});
+}
+const FileUpload = defineFamily(FileUploadFacade, {
 	...FileUpload$1,
 	Root: FileUploadRoot,
 	Trigger: FileUploadTrigger

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

@@ -1,4 +1,4 @@
-import { ComponentProps } from "solid-js";
+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
@@ -6,8 +6,20 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
  * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
  * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
  * Body. */
-declare function FloatingPanelRoot(props: ComponentProps<typeof FloatingPanel$1.Root>): import("solid-js").JSX.Element;
-export declare const FloatingPanel: typeof FloatingPanelRoot & Omit<typeof FloatingPanel$1, "Root"> & {
+declare function FloatingPanelRoot(props: ComponentProps<typeof FloatingPanel$1.Root>): JSX.Element;
+export interface FloatingPanelFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function FloatingPanelFacade(props: FloatingPanelFacadeProps): JSX.Element;
+export declare const FloatingPanel: typeof FloatingPanelFacade & Omit<typeof FloatingPanel$1, "Root"> & {
   Root: typeof FloatingPanelRoot;
 };
 //#endregion

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

@@ -1,9 +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 { injectComponentStyle } from "@bysages/core/styling";
-import { createComponent, mergeProps } from "solid-js";
+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.ts
+//#region 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,
@@ -11,11 +14,116 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 * Body. */
 function FloatingPanelRoot(props) {
 	const id = useElementId("floating-panel", () => props.id);
-	return createComponent(FloatingPanel$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(FloatingPanel$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const FloatingPanel = defineFamily(FloatingPanelRoot, {
+const resizeAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+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 };
+	}, {
+		get disabled() {
+			return props.disabled;
+		},
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(FloatingPanel$1.Trigger, { get children() {
+				return props.trigger ?? props.label;
+			} }), createComponent(FloatingPanel$1.Positioner, { get children() {
+				return createComponent(FloatingPanel$1.Content, { get children() {
+					return [
+						createComponent(FloatingPanel$1.DragTrigger, { get children() {
+							return createComponent(FloatingPanel$1.Header, { get children() {
+								return [createComponent(FloatingPanel$1.Title, { get children() {
+									return props.label;
+								} }), createComponent(FloatingPanel$1.Control, { get children() {
+									return [
+										createComponent(FloatingPanel$1.StageTrigger, {
+											stage: "minimized",
+											get children() {
+												return iconNode("minus");
+											}
+										}),
+										createComponent(FloatingPanel$1.StageTrigger, {
+											stage: "maximized",
+											get children() {
+												return iconNode("maximize-2");
+											}
+										}),
+										createComponent(FloatingPanel$1.StageTrigger, {
+											stage: "default",
+											"aria-label": "Restore",
+											get children() {
+												return iconNode("minimize-2");
+											}
+										}),
+										createComponent(FloatingPanel$1.CloseTrigger, {
+											"aria-label": "Close",
+											get children() {
+												return iconNode("x");
+											}
+										})
+									];
+								} })];
+							} });
+						} }),
+						createComponent(FloatingPanel$1.Body, { get children() {
+							return [
+								createComponent(Show, {
+									get when() {
+										return props.description;
+									},
+									get children() {
+										var _el$ = _tmpl$();
+										insert(_el$, () => {
+											return props.description;
+										});
+										return _el$;
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return props.content;
+									},
+									get children() {
+										var _el$2 = _tmpl$();
+										insert(_el$2, () => {
+											return props.content;
+										});
+										return _el$2;
+									}
+								}),
+								memo(() => {
+									return props.children;
+								})
+							];
+						} }),
+						createComponent(For, {
+							get each() {
+								return [...resizeAxes];
+							},
+							children: (axis) => createComponent(FloatingPanel$1.ResizeTrigger, { axis })
+						})
+					];
+				} });
+			} })];
+		}
+	}));
+}
+const FloatingPanel = defineFamily(FloatingPanelFacade, {
 	...FloatingPanel$1,
 	Root: FloatingPanelRoot
 });

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

@@ -1,2 +1,44 @@
-import { a as SolidFormApi, c as FormApi, i as FormProps, l as FieldApi, n as FormField, o as createField, r as FormFieldProps, s as createForm, t as Form } from "../../index-B1-quIrl.mjs";
-export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };
+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`,
+ * still pins names to `string`, which a concrete form's literal names
+ * cannot satisfy. */
+interface AnyFormApi {
+  handleSubmit(): Promise<unknown>;
+  setFieldMeta(field: any, updater: (prev: any) => any): void;
+  Field: Component<any>;
+}
+/** The form element itself: native submit interception handing the event
+ * to the engine, one grid, one spacing voice. */
+export interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
+  form: AnyFormApi;
+}
+export declare const Form: ((props: FormProps) => JSX.Element) & {
+  Root: (props: FormProps) => JSX.Element;
+};
+/**
+ * The named slot in the grid: label, control, hint — and the engine's
+ * errors for this name, shown through the same parts the standalone
+ * Field family styles. The children receive the live engine field — in
+ * Solid an accessor to the FieldApi — so every capability the engine
+ * has is right there where the control is wired. Without a Form above
+ * it degrades to a plain labelled field.
+ */
+export interface FormFieldProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  form?: AnyFormApi;
+  name: string;
+  label?: string;
+  hint?: string;
+  required?: boolean;
+  invalid?: boolean;
+  disabled?: boolean;
+  children?: JSX.Element | ((field: any) => JSX.Element);
+}
+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/image-cropper/index.d.mts

@@ -6,7 +6,14 @@ import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
  * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
  * Context. */
 declare function ImageCropperRoot(props: ComponentProps<typeof ImageCropper$1.Root>): import("solid-js").JSX.Element;
-export declare const ImageCropper: typeof ImageCropperRoot & Omit<typeof ImageCropper$1, "Root"> & {
+export interface ImageCropperFacadeProps {
+  src: string;
+  alt?: string;
+}
+/** The complete cropper behind one photograph: the viewport, selection
+ * frame, corner handles, and ruling grid arrive ready to use. */
+declare function ImageCropperFacade(props: ImageCropperFacadeProps): import("solid-js").JSX.Element;
+export declare const ImageCropper: typeof ImageCropperFacade & Omit<typeof ImageCropper$1, "Root"> & {
   Root: typeof ImageCropperRoot;
 };
 //#endregion

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

@@ -1,20 +1,58 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, template } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { createComponent, mergeProps } from "solid-js";
+import { For, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
-//#region src/components/image-cropper/index.ts
+//#region src/components/image-cropper/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
 * holding the photograph, one lit selection window framed by light hairlines.
 * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
 * Context. */
 function ImageCropperRoot(props) {
 	const id = useElementId("image-cropper", () => props.id);
-	return createComponent(ImageCropper$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(ImageCropper$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const ImageCropper = defineFamily(ImageCropperRoot, {
+/** The complete cropper behind one photograph: the viewport, selection
+* frame, corner handles, and ruling grid arrive ready to use. */
+function ImageCropperFacade(props) {
+	injectComponentStyle("image-cropper");
+	return createComponent(ImageCropperRoot, { get children() {
+		return createComponent(ImageCropper$1.Viewport, { get children() {
+			return [createComponent(ImageCropper$1.Image, {
+				get src() {
+					return props.src;
+				},
+				get alt() {
+					return props.alt;
+				}
+			}), createComponent(ImageCropper$1.Selection, { get children() {
+				return [
+					createComponent(For, {
+						each: [
+							"nw",
+							"ne",
+							"se",
+							"sw"
+						],
+						children: (position) => createComponent(ImageCropper$1.Handle, {
+							position,
+							get children() {
+								return _tmpl$();
+							}
+						})
+					}),
+					createComponent(ImageCropper$1.Grid, { axis: "horizontal" }),
+					createComponent(ImageCropper$1.Grid, { axis: "vertical" })
+				];
+			} })];
+		} });
+	} });
+}
+const ImageCropper = defineFamily(ImageCropperFacade, {
 	...ImageCropper$1,
 	Root: ImageCropperRoot
 });

package/dist/components/json-tree-view/index.d.mts

@@ -1,11 +1,20 @@
 import { ComponentProps } from "solid-js";
-import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
+import { JsonTreeView as JsonTreeView$1, JsonTreeViewTreeProps } from "@ark-ui/solid/json-tree-view";
 //#region src/components/json-tree-view/index.d.ts
 /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
  * recipes re-scoped, with value nodes reading as tabular data. The API is
  * Ark's own — Root, Tree, plus createJsonTreeCollection. */
 declare function JsonTreeViewRoot(props: ComponentProps<typeof JsonTreeView$1.Root>): import("solid-js").JSX.Element;
-export declare const JsonTreeView: typeof JsonTreeViewRoot & Omit<typeof JsonTreeView$1, "Root"> & {
+declare function JsonTreeViewTree(props: JsonTreeViewTreeProps): import("solid-js").JSX.Element;
+export interface JsonTreeViewFacadeProps {
+  data: unknown;
+  defaultExpandedDepth?: number;
+}
+/** The one-tag path for a read-only tree: `data` and the initial depth
+ * are all a quiet ledger needs; deeper control stays on the anatomy. */
+declare function JsonTreeViewFacade(props: JsonTreeViewFacadeProps): import("solid-js").JSX.Element;
+export declare const JsonTreeView: typeof JsonTreeViewFacade & Omit<typeof JsonTreeView$1, "Root"> & {
   Root: typeof JsonTreeViewRoot;
+  Tree: typeof JsonTreeViewTree;
 };
 //#endregion

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

@@ -20,7 +20,22 @@ function JsonTreeViewTree(props) {
 		return props.arrow ?? iconNode("chevron-right");
 	} }));
 }
-const JsonTreeView = defineFamily(JsonTreeViewRoot, {
+/** The one-tag path for a read-only tree: `data` and the initial depth
+* are all a quiet ledger needs; deeper control stays on the anatomy. */
+function JsonTreeViewFacade(props) {
+	return createComponent(JsonTreeViewRoot, {
+		get data() {
+			return props.data;
+		},
+		get defaultExpandedDepth() {
+			return props.defaultExpandedDepth ?? 1;
+		},
+		get children() {
+			return createComponent(JsonTreeViewTree, {});
+		}
+	});
+}
+const JsonTreeView = defineFamily(JsonTreeViewFacade, {
 	...JsonTreeView$1,
 	Root: JsonTreeViewRoot,
 	Tree: JsonTreeViewTree

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

@@ -11,7 +11,27 @@ type ListboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ListboxRoot<T extends CollectionItem>(props: ListboxRootProps<T> & ListboxOwnProps): import("solid-js").JSX.Element;
-export declare const Listbox: typeof ListboxRoot & Omit<typeof Listbox$1, "Root"> & {
+type ListboxOption = {
+  label: string;
+  value: string;
+};
+type ListboxFacadeValue = string | string[];
+/** The complete listbox behind one model value: options become rows and the
+ * label names the quiet register. */
+export interface ListboxFacadeProps {
+  value?: ListboxFacadeValue;
+  defaultValue?: ListboxFacadeValue;
+  options: ListboxOption[];
+  multiple?: boolean;
+  disabled?: boolean;
+  label?: string;
+  /** One rung of the ladder for the row register and the filter field. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value?: ListboxFacadeValue) => void;
+}
+declare function ListboxFacade(props: ListboxFacadeProps): import("solid-js").JSX.Element;
+type ListboxParts = Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
+export declare const Listbox: typeof ListboxFacade & ListboxParts;
 //#endregion

package/dist/components/listbox/index.mjs

@@ -1,9 +1,10 @@
 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, mergeProps } from "@solidjs/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
-import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
+import { For, createMemo, splitProps } from "solid-js";
+import { Listbox as Listbox$1, createListCollection } from "@ark-ui/solid/listbox";
 //#region src/components/listbox/index.tsx
 const ArkRoot = Listbox$1.Root;
 function ListboxRoot(props) {
@@ -18,7 +19,61 @@ function ListboxRoot(props) {
 		}
 	}));
 }
-const Listbox = defineFamily(ListboxRoot, {
+function toListboxValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+function ListboxFacade(props) {
+	injectComponentStyle("listbox");
+	const collection = createMemo(() => createListCollection({ items: props.options }));
+	return createComponent(ListboxRoot, mergeProps({
+		get size() {
+			return props.size ?? "md";
+		},
+		get collection() {
+			return collection();
+		},
+		get defaultValue() {
+			return toListboxValue(props.defaultValue);
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get "aria-label"() {
+			return props.label;
+		},
+		get selectionMode() {
+			return props.multiple ? "multiple" : "single";
+		}
+	}, () => {
+		return props.value === void 0 ? {} : { value: toListboxValue(props.value) };
+	}, {
+		onValueChange: (details) => props.onValueChange?.(props.multiple ? details.value : details.value.at(0)),
+		get children() {
+			return createComponent(Listbox$1.Content, { get children() {
+				return createComponent(For, {
+					get each() {
+						return collection().items;
+					},
+					children: (item) => createComponent(Listbox$1.Item, {
+						item,
+						get children() {
+							return [createComponent(Listbox$1.ItemText, { get children() {
+								return item.label;
+							} }), createComponent(Listbox$1.ItemIndicator, { get children() {
+								return iconNode("check", {
+									width: "14",
+									height: "14"
+								});
+							} })];
+						}
+					})
+				});
+			} });
+		}
+	}));
+}
+const Listbox = defineFamily(ListboxFacade, {
 	...Listbox$1,
 	Root: ListboxRoot
 });

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

@@ -5,7 +5,18 @@ import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
  * seal-cut chips that dissolves into the paper at its edges rather than
  * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
 declare function MarqueeRoot(props: ComponentProps<typeof Marquee$1.Root>): import("solid-js").JSX.Element;
-export declare const Marquee: typeof MarqueeRoot & Omit<typeof Marquee$1, "Root"> & {
+type MarqueeItem = string | {
+  label: string;
+};
+export interface MarqueeFacadeProps {
+  items: MarqueeItem[];
+  spacing?: string;
+  speed?: number;
+  label?: string;
+}
+/** The complete ribbon behind a list of short marks. */
+declare function MarqueeFacade(props: MarqueeFacadeProps): import("solid-js").JSX.Element;
+export declare const Marquee: typeof MarqueeFacade & Omit<typeof Marquee$1, "Root"> & {
   Root: typeof MarqueeRoot;
 };
 //#endregion