@bysages/react 0.3.1 → 0.4.0

package/dist/components/listbox/index.mjs

@@ -1,18 +1,50 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Listbox as Listbox$1, createListCollection } from "@ark-ui/react/listbox";
 //#region src/components/listbox/index.tsx
 function ListboxRoot(props) {
+	injectComponentStyle("listbox");
+	const id = useElementId("listbox", props);
 	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Listbox$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-const Listbox = {
+function toListboxValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+/** The complete listbox behind one model value: options become rows and the
+* label names the quiet register. */
+function ListboxFacade(props) {
+	const { value, defaultValue, options, multiple, disabled, label, size = "md", className, style, onValueChange } = props;
+	const collection = createListCollection({ items: options });
+	return /* @__PURE__ */ jsxs(ListboxRoot, {
+		size,
+		collection,
+		defaultValue: toListboxValue(defaultValue),
+		value: toListboxValue(value),
+		disabled,
+		selectionMode: multiple ? "multiple" : "single",
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(multiple ? event.value : event.value.at(0)),
+		children: [label ? /* @__PURE__ */ jsx(Listbox$1.Label, { children: label }) : null, /* @__PURE__ */ jsx(Listbox$1.Content, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Listbox$1.Item, {
+			item,
+			children: [/* @__PURE__ */ jsx(Listbox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Listbox$1.ItemIndicator, { children: iconNode("check", {
+				width: 14,
+				height: 14
+			}) })]
+		}, item.value)) })]
+	});
+}
+const Listbox = Object.assign(ListboxFacade, {
 	...Listbox$1,
 	Root: ListboxRoot
-};
-injectComponentStyle("listbox");
+});
 //#endregion
 export { Listbox, createListCollection };

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

@@ -1,7 +1,24 @@
+import { CSSProperties, ComponentProps } from "react";
 import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
 //#region src/components/marquee/index.d.ts
 /** 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. */
-export declare const Marquee: typeof Marquee$1;
+declare function MarqueeRoot(props: ComponentProps<typeof Marquee$1.Root>): import("react").JSX.Element;
+type MarqueeItem = string | {
+  label: string;
+};
+type MarqueeFacadeProps = {
+  items: MarqueeItem[];
+  spacing?: string;
+  speed?: number;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+/** The complete ribbon behind a list of short marks. */
+declare function MarqueeFacade(props: MarqueeFacadeProps): import("react").JSX.Element;
+export declare const Marquee: typeof MarqueeFacade & Omit<typeof Marquee$1, "Root"> & {
+  Root: typeof MarqueeRoot;
+};
 //#endregion

package/dist/components/marquee/index.mjs

@@ -1,10 +1,42 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
 //#region src/components/marquee/index.tsx
 /** 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. */
-const Marquee = Marquee$1;
-injectComponentStyle("marquee");
+function MarqueeRoot(props) {
+	injectComponentStyle("marquee");
+	const id = useElementId("marquee", props);
+	return /* @__PURE__ */ jsx(Marquee$1.Root, {
+		...props,
+		id
+	});
+}
+/** The complete ribbon behind a list of short marks. */
+function MarqueeFacade(props) {
+	const { items, spacing, speed, label, className, style } = props;
+	const labels = items.map((item) => typeof item === "string" ? item : item.label);
+	return /* @__PURE__ */ jsx(MarqueeRoot, {
+		"aria-label": label,
+		spacing,
+		speed,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Marquee$1.Viewport, { children: /* @__PURE__ */ jsx(Marquee$1.Content, { children: labels.map((item, index) => /* @__PURE__ */ jsxs(Marquee$1.Item, { children: [/* @__PURE__ */ jsx("svg", {
+			width: 16,
+			height: 16,
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M12 3 3 9l9 12 9-12-9-6Z" })
+		}), /* @__PURE__ */ jsx("span", { children: item })] }, `${item}-${index}`)) }) })
+	});
+}
+const Marquee = Object.assign(MarqueeFacade, {
+	...Marquee$1,
+	Root: MarqueeRoot
+});
 //#endregion
 export { Marquee };

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

@@ -7,5 +7,8 @@ export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
   columns?: number;
   gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 }
-export declare function Masonry({ columns, gap, ...rest }: MasonryProps): import("react").JSX.Element;
+declare function MasonryImpl({ columns, gap, ...rest }: MasonryProps): import("react").JSX.Element;
+export declare const Masonry: typeof MasonryImpl & {
+  Root: typeof MasonryImpl;
+};
 //#endregion

package/dist/components/masonry/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/masonry/index.tsx
@@ -11,7 +12,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Masonry({ columns = 3, gap = "md", ...rest }) {
+function MasonryImpl({ columns = 3, gap = "md", ...rest }) {
 	injectComponentStyle("masonry");
 	const style = {
 		...rest.style,
@@ -25,5 +26,6 @@ function Masonry({ columns = 3, gap = "md", ...rest }) {
 		"data-part": "root"
 	});
 }
+const Masonry = withSelfRoot(MasonryImpl);
 //#endregion
 export { Masonry };

package/dist/components/media-player/index.d.mts

@@ -0,0 +1,2 @@
+import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-BcRdWGY-.mjs";
+export { Audio, type MediaPlayerProps, type MediaSourceOption, type MediaTextTrackOption, Video, formatMediaTime };

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

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

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

@@ -1,2 +1,2 @@
-import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-Uefyw7Im.mjs";
+import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-Bbg4heDO.mjs";
 export { MentionEntry, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };

package/dist/components/mentions/index.mjs

@@ -1,2 +1,2 @@
-import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-DMIBCBOd.mjs";
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-BuWibdci.mjs";
 export { Mentions, MentionsVessel, useMentions };

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

@@ -1,20 +1,38 @@
+import { ComponentProps } from "react";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
 //#region src/components/menu/index.d.ts
-type MenuRootProps = Parameters<typeof Menu$1.Root>[0] & {
+type MenuRootProps = ComponentProps<typeof Menu$1.Root> & {
   /** One rung of the control-height ladder for the vessel's rows. */
   size?: "sm" | "md" | "lg";
 };
-declare function MenuRoot({ size, ...rest }: MenuRootProps): import("react").JSX.Element;
-declare function MenuContent(props: Parameters<typeof Menu$1.Content>[0]): import("react").JSX.Element;
-/** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
- * elevation, hover as light on the row, checked items as the flat ink fill.
- * The parts — Root, Trigger, ContextTrigger, Indicator, Positioner,
- * Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
- * TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
- * spread copies the members so Root and Content can be the sized
- * wrappers while the rest stay Ark's own parts. */
-export declare const Menu: Omit<typeof Menu$1, "Root" | "Content"> & {
+declare function MenuRoot(props: MenuRootProps): import("react").JSX.Element;
+declare function MenuContent(props: ComponentProps<typeof Menu$1.Content>): import("react").JSX.Element;
+/** One plain row in the callable menu; richer checkboxes, radios, and
+ * nested menus stay on the anatomy. */
+export interface MenuItemOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+type MenuPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface MenuFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string;
+  items: MenuItemOption[];
+  disabled?: boolean;
+  placement?: MenuPlacement;
+  size?: "sm" | "md" | "lg";
+  onSelect?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function MenuFacade({ open, defaultOpen, trigger, items, disabled, placement, size, onSelect, onOpenChange }: MenuFacadeProps): import("react").JSX.Element;
+declare namespace MenuFacade {
+  var displayName: string;
+}
+type MenuParts = Omit<typeof Menu$1, "Root" | "Content"> & {
   Root: typeof MenuRoot;
   Content: typeof MenuContent;
 };
+export declare const Menu: typeof MenuFacade & MenuParts;
 //#endregion

package/dist/components/menu/index.mjs

@@ -1,5 +1,7 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { Menu as Menu$1 } from "@ark-ui/react/menu";
 //#region src/components/menu/index.tsx
@@ -7,10 +9,15 @@ import { Menu as Menu$1 } from "@ark-ui/react/menu";
 * its own — the vessel (Content) is the element the rung can land on,
 * and the Portal breaks CSS ancestry between the two. */
 const MenuSizeContext = createContext("md");
-function MenuRoot({ size = "md", ...rest }) {
+function MenuRoot(props) {
+	const id = useElementId("menu", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(MenuSizeContext.Provider, {
 		value: size,
-		children: /* @__PURE__ */ jsx(Menu$1.Root, { ...rest })
+		children: /* @__PURE__ */ jsx(Menu$1.Root, {
+			...rest,
+			id
+		})
 	});
 }
 function MenuContent(props) {
@@ -20,18 +27,33 @@ function MenuContent(props) {
 		"data-size": size
 	});
 }
-/** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
-* elevation, hover as light on the row, checked items as the flat ink fill.
-* The parts — Root, Trigger, ContextTrigger, Indicator, Positioner,
-* Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
-* TriggerItem, Separator, Arrow, ArrowTip. Ark's namespace is frozen —
-* spread copies the members so Root and Content can be the sized
-* wrappers while the rest stay Ark's own parts. */
-const Menu = {
+function MenuFacade({ open, defaultOpen, trigger, items, disabled = false, placement = "bottom-start", size = "md", onSelect, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(MenuRoot, {
+		size,
+		positioning: { placement },
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onSelect: (details) => onSelect?.(details.value),
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsxs(Menu$1.Trigger, {
+			disabled,
+			children: [trigger, /* @__PURE__ */ jsx(Menu$1.Indicator, { children: iconNode("chevron-down", {
+				width: 14,
+				height: 14
+			}) })]
+		}), /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(MenuContent, { children: items.map((item) => /* @__PURE__ */ jsx(Menu$1.Item, {
+			value: item.value,
+			disabled: item.disabled,
+			children: item.label
+		}, item.value)) }) })]
+	});
+}
+MenuFacade.displayName = "SMenu";
+const Menu = Object.assign(MenuFacade, {
 	...Menu$1,
 	Root: MenuRoot,
 	Content: MenuContent
-};
+});
 injectComponentStyle("menu");
 //#endregion
 export { Menu };

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

@@ -1,3 +1,4 @@
+import { Menu } from "../menu/index.mjs";
 import { HTMLAttributes } from "react";
 //#region src/components/menubar/index.d.ts
 export interface MenubarEntry {
@@ -28,5 +29,6 @@ export interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSe
   /** Called with the entry's `value` when it is chosen. */
   onSelect?: (value: string) => void;
 }
-export declare function Menubar({ items, onSelect, children, ...rest }: MenubarProps): import("react").JSX.Element;
+declare function MenubarImpl({ items, onSelect, children, ...rest }: MenubarProps): import("react").JSX.Element;
+export declare const Menubar: typeof MenubarImpl & typeof Menu;
 //#endregion

package/dist/components/menubar/index.mjs

@@ -1,17 +1,21 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { Menu as Menu$1 } from "../menu/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { Menu } from "@ark-ui/react/menu";
 //#region src/components/menubar/index.tsx
-function Menubar({ items, onSelect, children, ...rest }) {
+function MenubarImpl({ items, onSelect, children, ...rest }) {
 	injectComponentStyle("menubar");
 	injectComponentStyle("menu");
+	const hostId = useElementId("menubar", rest);
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		"data-scope": "menubar",
 		"data-part": "root",
 		role: "menubar",
 		children: [items.map((group) => /* @__PURE__ */ jsxs(Menu.Root, {
+			id: `${hostId}:menu:${group.label}`,
 			positioning: { placement: "bottom-start" },
 			children: [/* @__PURE__ */ jsx(Menu.Trigger, {
 				asChild: true,
@@ -32,5 +36,6 @@ function Menubar({ items, onSelect, children, ...rest }) {
 		}, group.label)), children]
 	});
 }
+const Menubar = Object.assign(MenubarImpl, Menu$1);
 //#endregion
 export { Menubar };

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

@@ -1,8 +1,32 @@
+import { ComponentProps } from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
 //#region src/components/navigation-menu/index.d.ts
 /** 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. */
-export declare const NavigationMenu: typeof NavigationMenu$1;
+declare function NavigationMenuRoot(props: ComponentProps<typeof NavigationMenu$1.Root>): import("react").JSX.Element;
+declare function NavigationMenuLink(props: ComponentProps<typeof NavigationMenu$1.Link>): import("react").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";
+  className?: string;
+}
+declare function NavigationMenuFacade({ items, orientation, className }: NavigationMenuFacadeProps): import("react").JSX.Element;
+declare namespace NavigationMenuFacade {
+  var displayName: string;
+}
+type NavigationMenuParts = Omit<typeof NavigationMenu$1, "Root" | "Link"> & {
+  Root: typeof NavigationMenuRoot;
+  Link: typeof NavigationMenuLink;
+};
+export declare const NavigationMenu: typeof NavigationMenuFacade & NavigationMenuParts;
 //#endregion

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

@@ -1,11 +1,46 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
 //#region src/components/navigation-menu/index.tsx
 /** 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. */
-const NavigationMenu = NavigationMenu$1;
+function NavigationMenuRoot(props) {
+	const id = useElementId("navigation-menu", props);
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
+		...props,
+		id
+	});
+}
+function NavigationMenuLink(props) {
+	injectComponentStyle("navigation-menu");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		...props,
+		"data-motion": "ink-ripple"
+	});
+}
+function NavigationMenuFacade({ items, orientation = "horizontal", className }) {
+	return /* @__PURE__ */ jsx(NavigationMenuRoot, {
+		className,
+		orientation,
+		children: /* @__PURE__ */ jsx(NavigationMenu$1.List, { children: items.map((item) => /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+			value: item.href,
+			children: /* @__PURE__ */ jsxs(NavigationMenuLink, {
+				href: item.href,
+				current: item.current,
+				children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description ? /* @__PURE__ */ jsx("span", { children: item.description }) : null]
+			})
+		}, item.href)) })
+	});
+}
+NavigationMenuFacade.displayName = "SNavigationMenu";
+const NavigationMenu = Object.assign(NavigationMenuFacade, {
+	...NavigationMenu$1,
+	Root: NavigationMenuRoot,
+	Link: NavigationMenuLink
+});
 injectComponentStyle("navigation-menu");
 //#endregion
 export { NavigationMenu };

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

@@ -5,12 +5,34 @@ type NumberInputRootProps = ComponentProps<typeof NumberInput$1.Root> & {
   /** One rung of the control-height ladder for the field and its stepper. */
   size?: "sm" | "md" | "lg";
 };
-declare function NumberInputRoot({ size, ...rest }: NumberInputRootProps): import("react").JSX.Element;
-/** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
- * rides inside the field as one seal split by a hairline, numbers set in
- * tabular figures. The API is Ark's own — Root, Label, Control, Input,
- * ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
-export declare const NumberInput: Omit<typeof NumberInput$1, "Root"> & {
+declare function NumberInputRoot(props: NumberInputRootProps): import("react").JSX.Element;
+interface NumberInputFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  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({ value, defaultValue, label, placeholder, min, max, step, disabled, invalid, required, size, onValueChange }: NumberInputFacadeProps): import("react").JSX.Element;
+export declare const NumberInput: typeof NumberInputFacade & {
   Root: typeof NumberInputRoot;
+  Context: (props: NumberInput$1.ContextProps) => import("react").ReactNode;
+  Control: import("react").ForwardRefExoticComponent<NumberInput$1.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+  DecrementTrigger: import("react").ForwardRefExoticComponent<NumberInput$1.DecrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  IncrementTrigger: import("react").ForwardRefExoticComponent<NumberInput$1.IncrementTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Input: import("react").ForwardRefExoticComponent<NumberInput$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Label: import("react").ForwardRefExoticComponent<NumberInput$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<NumberInput$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+  Scrubber: import("react").ForwardRefExoticComponent<NumberInput$1.ScrubberProps & import("react").RefAttributes<HTMLDivElement>>;
+  ValueText: import("react").ForwardRefExoticComponent<NumberInput$1.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
 };
 //#endregion

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

@@ -1,21 +1,46 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
 //#region src/components/number-input/index.tsx
-function NumberInputRoot({ size = "md", ...rest }) {
+function NumberInputRoot(props) {
+	const id = useElementId("number-input", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(NumberInput$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
-* rides inside the field as one seal split by a hairline, numbers set in
-* tabular figures. The API is Ark's own — Root, Label, Control, Input,
-* ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
-const NumberInput = {
+/** The one-tag path for a stepped number field; formatting, scrubbing,
+* and locale rules stay on the anatomy. */
+function NumberInputFacade({ value, defaultValue, label, placeholder, min, max, step, disabled = false, invalid = false, required = false, size = "md", onValueChange }) {
+	return /* @__PURE__ */ jsxs(NumberInputRoot, {
+		size,
+		min,
+		max,
+		step,
+		disabled,
+		invalid,
+		required,
+		defaultValue,
+		...value === void 0 ? {} : {
+			value,
+			onValueChange: (details) => onValueChange?.(details.value)
+		},
+		children: [label ? /* @__PURE__ */ jsx(NumberInput$1.Label, { children: label }) : null, /* @__PURE__ */ jsxs(NumberInput$1.Control, { children: [
+			/* @__PURE__ */ jsx(NumberInput$1.Input, { placeholder }),
+			/* @__PURE__ */ jsx(NumberInput$1.Scrubber, { children: iconNode("pause") }),
+			/* @__PURE__ */ jsx(NumberInput$1.IncrementTrigger, { children: iconNode("chevron-up") }),
+			/* @__PURE__ */ jsx(NumberInput$1.DecrementTrigger, { children: iconNode("chevron-down") })
+		] })]
+	});
+}
+const NumberInput = Object.assign(NumberInputFacade, {
 	...NumberInput$1,
 	Root: NumberInputRoot
-};
+});
 injectComponentStyle("number-input");
 //#endregion
 export { NumberInput };

package/dist/components/order-list/index.d.mts

@@ -17,5 +17,8 @@ export interface OrderListProps extends HTMLAttributes<HTMLDivElement> {
  * the model is the order. Dragging rides the native drag events — a
  * hairline of primary ink marks the seam the row will land on — so
  * touch keeps the buttons as its route. */
-export declare function OrderList({ value, options, label, onValueChange, ...rest }: OrderListProps): import("react").JSX.Element;
+declare function OrderListImpl({ value, options, label, onValueChange, ...rest }: OrderListProps): import("react").JSX.Element;
+export declare const OrderList: typeof OrderListImpl & {
+  Root: typeof OrderListImpl;
+};
 //#endregion

package/dist/components/order-list/index.mjs

@@ -1,34 +1,35 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 //#region src/components/order-list/index.tsx
-const ARROWS = {
-	up: ["m18 15-6-6-6 6"],
-	down: ["m6 9 6 6 6-6"],
-	top: ["m18 15-6-6-6 6", "M5 4h14"],
-	bottom: ["m6 9 6 6 6-6", "M5 20h14"]
+const ORDER_ICONS = {
+	up: { name: "chevron-up" },
+	down: { name: "chevron-down" },
+	top: {
+		name: "chevron-up",
+		rail: `<path d="M5 4h14" />`
+	},
+	bottom: {
+		name: "chevron-down",
+		rail: `<path d="M5 20h14" />`
+	}
 };
-function arrowGlyph(paths) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
+function orderIcon(direction) {
+	const icon = ORDER_ICONS[direction];
+	return iconNode(icon.name, {
 		width: 12,
-		height: 12,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: paths.map((d) => /* @__PURE__ */ jsx("path", { d }, d))
-	});
+		height: 12
+	}, icon.rail ?? "");
 }
 /** A ledger the reader may rewrite: rows move by grip or by the side
 * arrows, and the group reports the new order as the value itself —
 * the model is the order. Dragging rides the native drag events — a
 * hairline of primary ink marks the seam the row will land on — so
 * touch keeps the buttons as its route. */
-function OrderList({ value, options, label, onValueChange, ...rest }) {
+function OrderListImpl({ value, options, label, onValueChange, ...rest }) {
 	injectComponentStyle("order-list");
 	const messages = useComponentMessages();
 	const dragging = useRef(null);
@@ -119,36 +120,36 @@ function OrderList({ value, options, label, onValueChange, ...rest }) {
 							children: [
 								[
 									messages.orderList.toTop,
-									ARROWS.top,
+									"top",
 									-index,
 									0
 								],
 								[
 									messages.orderList.moveUp,
-									ARROWS.up,
+									"up",
 									-1,
 									0
 								],
 								[
 									messages.orderList.moveDown,
-									ARROWS.down,
+									"down",
 									1,
 									rows.length - 1
 								],
 								[
 									messages.orderList.toBottom,
-									ARROWS.bottom,
+									"bottom",
 									rows.length - 1 - index,
 									rows.length - 1
 								]
-							].map(([aria, paths, offset, edge]) => /* @__PURE__ */ jsx("button", {
+							].map(([aria, direction, offset, edge]) => /* @__PURE__ */ jsx("button", {
 								type: "button",
 								"aria-label": aria,
 								"data-scope": "order-list",
 								"data-part": "move",
 								disabled: index === edge,
 								onClick: () => move(option.value, offset),
-								children: arrowGlyph([...paths])
+								children: orderIcon(direction)
 							}, aria))
 						})
 					]
@@ -157,5 +158,6 @@ function OrderList({ value, options, label, onValueChange, ...rest }) {
 		})
 	});
 }
+const OrderList = withSelfRoot(OrderListImpl);
 //#endregion
 export { OrderList };