@bysages/solid 0.4.0 → 0.4.2

package/dist/components/hover-card/index.mjs

@@ -1,8 +1,8 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as withElementProps, t as isElement } from "../../element-dGIhOTJ6.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
 //#region src/components/hover-card/index.tsx

package/dist/components/icon/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.tsx

package/dist/components/image/index.mjs

@@ -1,7 +1,7 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, ref, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, createEffect, createSignal, on, splitProps } from "solid-js";
 //#region src/components/image/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);

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 { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+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/image-viewer/index.mjs

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

package/dist/components/input/index.mjs

@@ -1,2 +1,2 @@
-import { t as Input } from "../../input-CPAJdwDb.mjs";
+import { t as Input } from "../../input-BL3N3L8g.mjs";
 export { Input };

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

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/input-group/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /**

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

@@ -1,8 +1,8 @@
 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 { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
 //#region src/components/json-tree-view/index.tsx
@@ -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/kbd/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/kbd/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<kbd>`);
 const Kbd = withSelfRoot(function Kbd(props) {

package/dist/components/layout/index.mjs

@@ -1,6 +1,6 @@
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, memo, ref, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createContext, createEffect, createSignal, splitProps, useContext } from "solid-js";
 //#region src/components/layout/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/components/link/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { claimElement, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/link/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<a>`);

package/dist/components/list/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, splitProps } from "solid-js";
 //#region src/components/list/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<li>`);

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 { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
-import { splitProps } from "solid-js";
-import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
+import { injectComponentStyle } from "@bysages/core/styling";
+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

package/dist/components/marquee/index.mjs

@@ -1,19 +1,60 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, insert, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Index, createComponent as createComponent$1, createMemo, mergeProps as mergeProps$1 } from "solid-js";
 import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
-//#region src/components/marquee/index.ts
+//#region src/components/marquee/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=currentColor aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span>`);
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
 * 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. */
 function MarqueeRoot(props) {
 	const id = useElementId("marquee", () => props.id);
-	return createComponent(Marquee$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(Marquee$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const Marquee = defineFamily(MarqueeRoot, {
+/** The complete ribbon behind a list of short marks. */
+function MarqueeFacade(props) {
+	injectComponentStyle("marquee");
+	const items = createMemo(() => props.items.map((item) => typeof item === "string" ? item : item.label));
+	return createComponent(MarqueeRoot, {
+		get "aria-label"() {
+			return props.label;
+		},
+		get spacing() {
+			return props.spacing;
+		},
+		get speed() {
+			return props.speed;
+		},
+		get children() {
+			return createComponent(Marquee$1.Viewport, { get children() {
+				return createComponent(Marquee$1.Content, { get children() {
+					return createComponent(Index, {
+						get each() {
+							return items();
+						},
+						children: (item) => createComponent(Marquee$1.Item, { get children() {
+							return [(() => {
+								var _el$ = _tmpl$();
+								_el$.innerHTML = "<path d=\"M12 3 3 9l9 12 9-12-9-6Z\" />";
+								return _el$;
+							})(), (() => {
+								var _el$2 = _tmpl$2();
+								insert(_el$2, item);
+								return _el$2;
+							})()];
+						} })
+					});
+				} });
+			} });
+		}
+	});
+}
+const Marquee = defineFamily(MarqueeFacade, {
 	...Marquee$1,
 	Root: MarqueeRoot
 });

package/dist/components/masonry/index.mjs

@@ -1,6 +1,6 @@
 import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/masonry/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);

package/dist/components/media-player/index.mjs

@@ -1,2 +1,2 @@
-import { n as Video, r as formatMediaTime, t as Audio } from "../../media-player-BC8D_d29.mjs";
+import { n as Video, r as formatMediaTime, t as Audio } from "../../media-player-yF7KVUxM.mjs";
 export { Audio, Video, formatMediaTime };

package/dist/components/mentions/index.mjs

@@ -1,3 +1,3 @@
 import "../popover/index.mjs";
-import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-CeG5u8Qm.mjs";
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-DKUG7eHt.mjs";
 export { Mentions, MentionsVessel, useMentions };

package/dist/components/menu/index.mjs

@@ -1,8 +1,8 @@
 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 { injectComponentStyle } from "@bysages/core";
 import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createContext, splitProps, useContext } from "solid-js";
 import { Menu as Menu$1 } from "@ark-ui/solid/menu";
 //#region src/components/menu/index.tsx

package/dist/components/menubar/index.mjs

@@ -1,8 +1,8 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Menu as Menu$1 } from "../menu/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Menu } from "@ark-ui/solid/menu";

package/dist/components/meter/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/meter/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span><span data-scope=meter data-part=range>`);

package/dist/components/navigation-menu/index.d.mts

@@ -6,7 +6,23 @@ import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/solid/navigation-men
  * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
  * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
 declare function NavigationMenuRoot(props: ComponentProps<typeof NavigationMenu$1.Root>): import("solid-js").JSX.Element;
-export declare const NavigationMenu: typeof NavigationMenuRoot & Omit<typeof NavigationMenu$1, "Root"> & {
+declare function NavigationMenuLink(props: ComponentProps<typeof NavigationMenu$1.Link>): import("solid-js").JSX.Element;
+/** One flat destination in the callable bar; grouped panels and mega
+ * menus stay on the anatomy. */
+export interface NavigationMenuLinkOption {
+  label: string;
+  href: string;
+  current?: boolean;
+  description?: string;
+}
+export interface NavigationMenuFacadeProps {
+  items: NavigationMenuLinkOption[];
+  orientation?: "horizontal" | "vertical";
+}
+/** The common path: a quiet rung of destinations, horizontal or vertical. */
+declare function NavigationMenuFacade(props: NavigationMenuFacadeProps): import("solid-js").JSX.Element;
+export declare const NavigationMenu: typeof NavigationMenuFacade & Omit<typeof NavigationMenu$1, "Root"> & {
   Root: typeof NavigationMenuRoot;
+  Link: typeof NavigationMenuLink;
 };
 //#endregion

package/dist/components/navigation-menu/index.mjs

@@ -1,22 +1,82 @@
 import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
 import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js";
+import { createComponent, insert, mergeProps, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/solid/navigation-menu";
-//#region src/components/navigation-menu/index.ts
+//#region src/components/navigation-menu/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 /** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
 * ghost triggers with one sliding stroke of primary ink, opening the shared
 * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
 * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
 function NavigationMenuRoot(props) {
 	const id = useElementId("navigation-menu", () => props.id);
-	return createComponent(NavigationMenu$1.Root, mergeProps(props, { get id() {
+	return createComponent$1(NavigationMenu$1.Root, mergeProps$1(props, { get id() {
 		return id();
 	} }));
 }
-const NavigationMenu = defineFamily(NavigationMenuRoot, {
+function NavigationMenuLink(props) {
+	injectComponentStyle("navigation-menu");
+	return createComponent(NavigationMenu$1.Link, mergeProps(props, { "data-motion": "ink-ripple" }));
+}
+/** The common path: a quiet rung of destinations, horizontal or vertical. */
+function NavigationMenuFacade(props) {
+	injectComponentStyle("navigation-menu");
+	return createComponent(NavigationMenuRoot, {
+		get orientation() {
+			return props.orientation ?? "horizontal";
+		},
+		get children() {
+			return createComponent(NavigationMenu$1.List, { get children() {
+				return createComponent(For, {
+					get each() {
+						return props.items;
+					},
+					children: (item) => createComponent(NavigationMenu$1.Item, {
+						get value() {
+							return item.href;
+						},
+						get children() {
+							return createComponent(NavigationMenuLink, {
+								get href() {
+									return item.href;
+								},
+								get current() {
+									return item.current;
+								},
+								get children() {
+									return [(() => {
+										var _el$ = _tmpl$();
+										insert(_el$, () => {
+											return item.label;
+										});
+										return _el$;
+									})(), createComponent(Show, {
+										get when() {
+											return item.description;
+										},
+										get children() {
+											var _el$2 = _tmpl$();
+											insert(_el$2, () => {
+												return item.description;
+											});
+											return _el$2;
+										}
+									})];
+								}
+							});
+						}
+					})
+				});
+			} });
+		}
+	});
+}
+const NavigationMenu = defineFamily(NavigationMenuFacade, {
 	...NavigationMenu$1,
-	Root: NavigationMenuRoot
+	Root: NavigationMenuRoot,
+	Link: NavigationMenuLink
 });
 injectComponentStyle("navigation-menu");
 //#endregion

package/dist/components/number-input/index.d.mts

@@ -9,7 +9,26 @@ type NumberInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function NumberInputRoot(props: NumberInputRootProps & NumberInputOwnProps): import("solid-js").JSX.Element;
-export declare const NumberInput: typeof NumberInputRoot & Omit<typeof NumberInput$1, "Root"> & {
+export interface NumberInputFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  /** One rung of the control-height ladder for the field and its stepper. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+/** The one-tag path for a stepped number field; formatting, scrubbing,
+ * and locale rules stay on the anatomy. */
+declare function NumberInputFacade(props: NumberInputFacadeProps): import("solid-js").JSX.Element;
+type NumberInputParts = Omit<typeof NumberInput$1, "Root"> & {
   Root: typeof NumberInputRoot;
 };
+export declare const NumberInput: typeof NumberInputFacade & NumberInputParts;
 //#endregion