@bysages/react 0.3.0 → 0.4.0

package/dist/components/collapsible/index.mjs

@@ -1,10 +1,34 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
 //#region src/components/collapsible/index.tsx
 /** Ark's Collapsible, dressed in the paper-and-ink system: one control on
 * the paper, its panel dissolving open to the machine's measured height.
 * The API is Ark's own — Root, Trigger, Content, Indicator. */
-const Collapsible = Collapsible$1;
+function CollapsibleRoot(props) {
+	const id = useElementId("collapsible", props);
+	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		...props,
+		id
+	});
+}
+function CollapsibleFacade({ open, defaultOpen = false, label, disabled = false, className, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(CollapsibleRoot, {
+		className,
+		disabled,
+		defaultOpen,
+		...open === void 0 ? {} : { open },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsxs(Collapsible$1.Trigger, { children: [label, /* @__PURE__ */ jsx(Collapsible$1.Indicator, { children: iconNode("chevron-right") })] }), /* @__PURE__ */ jsx(Collapsible$1.Content, { children })]
+	});
+}
+CollapsibleFacade.displayName = "SCollapsible";
+const Collapsible = Object.assign(CollapsibleFacade, {
+	...Collapsible$1,
+	Root: CollapsibleRoot
+});
 injectComponentStyle("collapsible");
 //#endregion
 export { Collapsible };

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

@@ -1,11 +1,11 @@
-import { ComponentProps } from "react";
-import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
+import { CSSProperties, ComponentProps } from "react";
+import { Color, ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
 //#region src/components/color-picker/index.d.ts
 type ColorPickerRootProps = ComponentProps<typeof ColorPicker$1.Root> & {
   /** One rung of the control-height ladder for the swatch seal. */
   size?: "sm" | "md" | "lg";
 };
-declare function ColorPickerRoot({ size, ...rest }: ColorPickerRootProps): import("react").JSX.Element;
+declare function ColorPickerRoot(props: ColorPickerRootProps): import("react").JSX.Element;
 /** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
  * on the paper, opening into an area and channel sliders where pigment is
  * picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
@@ -14,7 +14,23 @@ declare function ColorPickerRoot({ size, ...rest }: ColorPickerRootProps): impor
  * ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
  * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
  * FormatSelect, HiddenInput, Context. */
-export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+type ColorPickerFacadeProps = {
+  value?: string | Color;
+  defaultValue?: string | Color;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: unknown) => void;
+};
+/** The complete picker behind one color: the hex input rides beside the
+ * swatch trigger, while the popup carries the area and hue/alpha tracks.
+ * Saved swatches and format switches remain anatomy work. */
+declare function ColorPickerFacade(props: ColorPickerFacadeProps): import("react").JSX.Element;
+export declare const ColorPicker: typeof ColorPickerFacade & Omit<typeof ColorPicker$1, "Root"> & {
   Root: typeof ColorPickerRoot;
 };
 //#endregion

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

@@ -1,25 +1,67 @@
+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 { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
+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
-function ColorPickerRoot({ size = "md", ...rest }) {
+function ColorPickerRoot(props) {
+	injectComponentStyle("color-picker");
+	const id = useElementId("color-picker", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(ColorPicker$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
-* on the paper, opening into an area and channel sliders where pigment is
-* picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
-* Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
-* ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
-* ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
-* SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
-* FormatSelect, HiddenInput, Context. */
-const ColorPicker = {
+/** The complete picker behind one color: the hex input rides beside the
+* 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 toColor = (color) => typeof color === "string" ? parseColor(color) : color;
+	return /* @__PURE__ */ jsxs(ColorPickerRoot, {
+		size,
+		defaultValue: toColor(defaultValue),
+		value: toColor(value),
+		disabled,
+		invalid,
+		required,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(event.value),
+		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", {
+					"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, {})
+						]
+					})]
+				})]
+			})] }) }),
+			/* @__PURE__ */ jsx(ColorPicker$1.HiddenInput, {})
+		]
+	});
+}
+const ColorPicker = Object.assign(ColorPickerFacade, {
 	...ColorPicker$1,
 	Root: ColorPickerRoot
-};
-injectComponentStyle("color-picker");
+});
 //#endregion
 export { ColorPicker };

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import { CollectionItem } from "@ark-ui/react/collection";
 import { Combobox as Combobox$1, ComboboxRootComponentProps } from "@ark-ui/react/combobox";
 //#region src/components/combobox/index.d.ts
@@ -11,7 +12,32 @@ type ComboboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ComboboxRoot<T extends CollectionItem>(props: ComboboxRootComponentProps<T, ComboboxOwnProps>): import("react").JSX.Element;
-export declare const Combobox: Omit<typeof Combobox$1, "Root"> & {
+type ComboboxOption = {
+  label: string;
+  value: string;
+};
+type ComboboxFacadeValue = string | string[];
+type ComboboxFacadeProps = {
+  value?: ComboboxFacadeValue;
+  defaultValue?: ComboboxFacadeValue;
+  options: ComboboxOption[];
+  multiple?: boolean;
+  /** Show the clear-value control when the machine allows it. */
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value?: ComboboxFacadeValue) => void;
+};
+/** The complete combobox behind one model value: options become the vessel's
+ * rows while typing, clearing, and selection stay on the common field path. */
+declare function ComboboxFacade(props: ComboboxFacadeProps): import("react").JSX.Element;
+export declare const Combobox: typeof ComboboxFacade & Omit<typeof Combobox$1, "Root"> & {
   Root: typeof ComboboxRoot;
 };
 //#endregion

package/dist/components/combobox/index.mjs

@@ -1,18 +1,75 @@
+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 { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox as Combobox$1, createListCollection } from "@ark-ui/react/combobox";
 //#region src/components/combobox/index.tsx
 function ComboboxRoot(props) {
+	injectComponentStyle("combobox");
+	const id = useElementId("combobox", props);
 	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Combobox$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-const Combobox = {
+function toComboboxValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+function fromComboboxValue(value, multiple) {
+	return multiple ? value : value.at(0);
+}
+/** The complete combobox behind one model value: options become the vessel's
+* rows while typing, clearing, and selection stay on the common field path. */
+function ComboboxFacade(props) {
+	const { value, defaultValue, options, multiple, clearable = true, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
+	const collection = createListCollection({ items: options });
+	return /* @__PURE__ */ jsxs(ComboboxRoot, {
+		size,
+		collection,
+		defaultValue: toComboboxValue(defaultValue),
+		value: toComboboxValue(value),
+		disabled,
+		invalid,
+		multiple,
+		placeholder,
+		required,
+		lazyMount: true,
+		unmountOnExit: true,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(fromComboboxValue(event.value, multiple)),
+		children: [
+			label ? /* @__PURE__ */ jsx(Combobox$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs(Combobox$1.Control, { children: [
+				/* @__PURE__ */ jsx(Combobox$1.Input, {
+					placeholder,
+					"aria-label": label ? void 0 : placeholder
+				}),
+				clearable ? /* @__PURE__ */ jsx(Combobox$1.ClearTrigger, { children: iconNode("x", {
+					width: 14,
+					height: 14
+				}) }) : null,
+				/* @__PURE__ */ jsx(Combobox$1.Trigger, { children: iconNode("chevron-down", {
+					width: 16,
+					height: 16
+				}) })
+			] }),
+			/* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No results found" }), /* @__PURE__ */ jsx(Combobox$1.List, { children: collection.items.map((item) => /* @__PURE__ */ jsxs(Combobox$1.Item, {
+				item,
+				children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: iconNode("check", {
+					width: 14,
+					height: 14
+				}) })]
+			}, item.value)) })] }) })
+		]
+	});
+}
+const Combobox = Object.assign(ComboboxFacade, {
 	...Combobox$1,
 	Root: ComboboxRoot
-};
-injectComponentStyle("combobox");
+});
 //#endregion
 export { Combobox };

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

@@ -1,3 +1,4 @@
+import { Dialog } from "../dialog/index.mjs";
 //#region src/components/command/index.d.ts
 export interface CommandEntry {
   label: string;
@@ -17,6 +18,7 @@ export interface CommandEntry {
  * grafts onto the sheet's list.
  */
 export interface CommandProps {
+  id?: string;
   /** The commands on offer, grouped as they arrive. */
   items?: CommandEntry[];
   placeholder?: string;
@@ -39,5 +41,6 @@ export interface CommandProps {
   /** Reports the field's live text. */
   onInputValueChange?: (value: string) => void;
 }
-export declare function Command({ items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange }: CommandProps): import("react").JSX.Element;
+declare function CommandImpl({ items, placeholder, open, autoFilter, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }: CommandProps): import("react").JSX.Element;
+export declare const Command: typeof CommandImpl & typeof Dialog;
 //#endregion

package/dist/components/command/index.mjs

@@ -1,3 +1,6 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { Dialog as Dialog$1 } from "../dialog/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -6,9 +9,13 @@ import { useListCollection } from "@ark-ui/react/collection";
 import { Combobox } from "@ark-ui/react/combobox";
 import { Dialog } from "@ark-ui/react/dialog";
 //#region src/components/command/index.tsx
-function Command({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText = "No matching commands", onSelect, onOpenChange, onInputValueChange }) {
+function CommandImpl({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText, onSelect, onOpenChange, onInputValueChange, id }) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
+	const hostId = useElementId("command", { id });
+	const messages = useComponentMessages();
+	const resolvedPlaceholder = placeholder ?? messages.command.search;
+	const resolvedEmptyText = emptyText ?? messages.command.noMatches;
 	const [internalOpen, setInternalOpen] = useState(false);
 	const [listOpen, setListOpen] = useState(true);
 	const [fieldText, setFieldText] = useState("");
@@ -62,6 +69,7 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 		})
 	}, entry.value);
 	return /* @__PURE__ */ jsx(Dialog.Root, {
+		id: `${hostId}:dialog`,
 		open: currentOpen,
 		onOpenChange: (details) => setOpen(details.open),
 		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, {
@@ -74,7 +82,9 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 					children: /* @__PURE__ */ jsx("div", {
 						"data-scope": "command",
 						"data-part": "content",
+						"aria-label": messages.command.palette,
 						children: /* @__PURE__ */ jsxs(Combobox.Root, {
+							id: `${hostId}:combobox`,
 							collection,
 							inputValue,
 							open: listOpen,
@@ -96,7 +106,8 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 								asChild: true,
 								children: /* @__PURE__ */ jsx("input", {
 									type: "text",
-									placeholder,
+									placeholder: resolvedPlaceholder,
+									"aria-label": resolvedPlaceholder,
 									"data-scope": "command",
 									"data-part": "input"
 								})
@@ -122,7 +133,7 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 									}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
 										"data-scope": "command",
 										"data-part": "empty",
-										children: emptyText
+										children: resolvedEmptyText
 									}) : null]
 								})
 							})]
@@ -133,5 +144,6 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 		})] })
 	});
 }
+const Command = Object.assign(CommandImpl, Dialog$1);
 //#endregion
 export { Command };

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

@@ -13,5 +13,8 @@ export interface CommentProps extends HTMLAttributes<HTMLElement> {
   /** The row of answers beneath the ink. */
   actions?: ReactNode;
 }
-export declare function Comment({ author, datetime, avatar, actions, children, ...rest }: CommentProps): import("react").JSX.Element;
+declare function CommentImpl({ author, datetime, avatar, actions, children, ...rest }: CommentProps): import("react").JSX.Element;
+export declare const Comment: typeof CommentImpl & {
+  Root: typeof CommentImpl;
+};
 //#endregion

package/dist/components/comment/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/comment/index.tsx
-function Comment({ author, datetime, avatar, actions, children, ...rest }) {
+function CommentImpl({ author, datetime, avatar, actions, children, ...rest }) {
 	injectComponentStyle("comment");
 	return /* @__PURE__ */ jsxs("article", {
 		...rest,
@@ -43,5 +44,6 @@ function Comment({ author, datetime, avatar, actions, children, ...rest }) {
 		})]
 	});
 }
+const Comment = withSelfRoot(CommentImpl);
 //#endregion
 export { Comment };

package/dist/components/config-provider/index.d.mts

@@ -1,4 +1,4 @@
-import { ThemeScene } from "@bysages/core";
+import { ComponentMessagesOverride, ThemeScene } from "@bysages/core";
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/config-provider/index.d.ts
 /** The four density tiers the token layer's `[data-density]` selectors
@@ -22,6 +22,8 @@ export interface ConfigContext {
   dir?: "ltr" | "rtl";
   /** BCP-47 locale, landing as the native `lang` attribute. */
   locale?: string;
+  /** Partial leaf overrides for wrapper-owned runtime copy. */
+  messages?: ComponentMessagesOverride;
 }
 /** The nearest provider's snapshot, or an empty one when no provider
  * wraps the caller — the hook the date and format families will consume
@@ -33,6 +35,7 @@ export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
   accent?: string;
   dir?: "ltr" | "rtl";
   locale?: string;
+  messages?: ComponentMessagesOverride;
   children?: ReactNode;
 }
 /**
@@ -42,5 +45,8 @@ export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
  * descendants through `useConfig`, so interactive behavior (formatting,
  * messages) and visual theming stay one decision.
  */
-export declare function ConfigProvider({ density, scene, accent, dir, locale, children, ...rest }: ConfigProviderProps): import("react").JSX.Element;
+declare function ConfigProviderImpl({ density, scene, accent, dir, locale, messages, children, ...rest }: ConfigProviderProps): import("react").JSX.Element;
+export declare const ConfigProvider: typeof ConfigProviderImpl & {
+  Root: typeof ConfigProviderImpl;
+};
 //#endregion

package/dist/components/config-provider/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/components/config-provider/index.tsx
@@ -15,14 +16,15 @@ function useConfig() {
 * descendants through `useConfig`, so interactive behavior (formatting,
 * messages) and visual theming stay one decision.
 */
-function ConfigProvider({ density, scene, accent, dir, locale, children, ...rest }) {
+function ConfigProviderImpl({ density, scene, accent, dir, locale, messages, children, ...rest }) {
 	return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
 		value: {
 			density,
 			scene,
 			accent,
 			dir,
-			locale
+			locale,
+			messages
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			...rest,
@@ -37,5 +39,6 @@ function ConfigProvider({ density, scene, accent, dir, locale, children, ...rest
 		})
 	});
 }
+const ConfigProvider = withSelfRoot(ConfigProviderImpl);
 //#endregion
 export { ConfigProvider, useConfig };

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

@@ -9,5 +9,8 @@ export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
    * than the measure. */
   padding?: boolean;
 }
-export declare function Container({ size, padding, ...rest }: ContainerProps): import("react").JSX.Element;
+declare function ContainerImpl({ size, padding, ...rest }: ContainerProps): import("react").JSX.Element;
+export declare const Container: typeof ContainerImpl & {
+  Root: typeof ContainerImpl;
+};
 //#endregion

package/dist/components/container/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/container/index.tsx
-function Container({ size = "readable", padding = true, ...rest }) {
+function ContainerImpl({ size = "readable", padding = true, ...rest }) {
 	injectComponentStyle("container");
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -11,5 +12,6 @@ function Container({ size = "readable", padding = true, ...rest }) {
 		"data-padding": padding ? "" : void 0
 	});
 }
+const Container = withSelfRoot(ContainerImpl);
 //#endregion
 export { Container };

package/dist/components/data-view/index.d.mts

@@ -14,5 +14,8 @@ export interface DataViewProps extends HTMLAttributes<HTMLDivElement> {
  * renderItem, the view lays the records out as a ledger or a lattice
  * and — when a page size is given — pages them with the pagination
  * family's own parts rather than a second implementation. */
-export declare function DataView({ items, layout, pageSize, renderItem, header, ...rest }: DataViewProps): import("react").JSX.Element;
+declare function DataViewImpl({ items, layout, pageSize, renderItem, header, ...rest }: DataViewProps): import("react").JSX.Element;
+export declare const DataView: typeof DataViewImpl & {
+  Root: typeof DataViewImpl;
+};
 //#endregion

package/dist/components/data-view/index.mjs

@@ -1,3 +1,5 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Pagination } from "../pagination/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -7,9 +9,10 @@ import { useState } from "react";
 * renderItem, the view lays the records out as a ledger or a lattice
 * and — when a page size is given — pages them with the pagination
 * family's own parts rather than a second implementation. */
-function DataView({ items, layout = "list", pageSize, renderItem, header, ...rest }) {
+function DataViewImpl({ items, layout = "list", pageSize, renderItem, header, ...rest }) {
 	injectComponentStyle("data-view");
 	const [page, setPage] = useState(1);
+	const messages = useComponentMessages();
 	const pageCount = pageSize ? Math.max(1, Math.ceil(items.length / pageSize)) : 1;
 	const visible = pageSize ? items.slice((page - 1) * pageSize, page * pageSize) : items;
 	return /* @__PURE__ */ jsxs("div", {
@@ -39,7 +42,7 @@ function DataView({ items, layout = "list", pageSize, renderItem, header, ...res
 					onPageChange: (details) => setPage(details.page),
 					children: [
 						/* @__PURE__ */ jsx(Pagination.PrevTrigger, {
-							"aria-label": "Previous page",
+							"aria-label": messages.pagination.previous,
 							children: "‹"
 						}),
 						/* @__PURE__ */ jsx(Pagination.Context, { children: (pagination) => pagination.pages.map((entry, index) => entry.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, {
@@ -51,7 +54,7 @@ function DataView({ items, layout = "list", pageSize, renderItem, header, ...res
 							children: entry.value
 						}, entry.value)) }),
 						/* @__PURE__ */ jsx(Pagination.NextTrigger, {
-							"aria-label": "Next page",
+							"aria-label": messages.pagination.next,
 							children: "›"
 						})
 					]
@@ -60,5 +63,6 @@ function DataView({ items, layout = "list", pageSize, renderItem, header, ...res
 		]
 	});
 }
+const DataView = withSelfRoot(DataViewImpl);
 //#endregion
 export { DataView };

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

@@ -1,16 +1,31 @@
-import { ComponentProps } from "react";
-import { DateInput as DateInput$1, DateInputFocusChangeDetails, DateInputValueChangeDetails } from "@ark-ui/react/date-input";
+import { CSSProperties, ComponentProps } from "react";
+import { DateInput as DateInput$1, DateInputDateValue, DateInputFocusChangeDetails, DateInputValueChangeDetails } from "@ark-ui/react/date-input";
 //#region src/components/date-input/index.d.ts
 type DateInputRootProps = ComponentProps<typeof DateInput$1.Root> & {
   /** One rung of the control-height ladder for the segmented field. */
   size?: "sm" | "md" | "lg";
 };
-declare function DateInputRoot({ size, ...rest }: DateInputRootProps): import("react").JSX.Element;
+declare function DateInputRoot(props: DateInputRootProps): import("react").JSX.Element;
 /** Ark's DateInput, dressed in the paper-and-ink system: a segmented
  * field where the focused segment takes the flat ink fill. The API is
  * Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
  * HiddenInput. */
-export declare const DateInput: Omit<typeof DateInput$1, "Root"> & {
+type DateInputFacadeValue = DateInputDateValue | DateInputDateValue[];
+type DateInputFacadeProps = {
+  value?: DateInputFacadeValue;
+  defaultValue?: DateInputFacadeValue;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: DateInputDateValue[]) => void;
+};
+/** The complete segmented date field behind one model value. */
+declare function DateInputFacade(props: DateInputFacadeProps): import("react").JSX.Element;
+export declare const DateInput: typeof DateInputFacade & Omit<typeof DateInput$1, "Root"> & {
   Root: typeof DateInputRoot;
 };
 //#endregion

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

@@ -1,21 +1,45 @@
+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 { DateInput as DateInput$1 } from "@ark-ui/react/date-input";
 //#region src/components/date-input/index.tsx
-function DateInputRoot({ size = "md", ...rest }) {
+function DateInputRoot(props) {
+	injectComponentStyle("date-input");
+	const id = useElementId("date-input", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(DateInput$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's DateInput, dressed in the paper-and-ink system: a segmented
-* field where the focused segment takes the flat ink fill. The API is
-* Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
-* HiddenInput. */
-const DateInput = {
+function toDateInputValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+/** The complete segmented date field behind one model value. */
+function DateInputFacade(props) {
+	const { value, defaultValue, disabled, invalid, required, label, size = "md", className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsxs(DateInputRoot, {
+		size,
+		defaultValue: toDateInputValue(defaultValue),
+		value: toDateInputValue(value),
+		disabled,
+		invalid,
+		required,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(event.value),
+		children: [
+			label ? /* @__PURE__ */ jsx(DateInput$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(DateInput$1.Control, { children: /* @__PURE__ */ jsx(DateInput$1.SegmentGroup, { children: /* @__PURE__ */ jsx(DateInput$1.SegmentContext, { children: (segmentProps) => /* @__PURE__ */ jsx(DateInput$1.Segment, { segment: segmentProps }) }) }) }),
+			/* @__PURE__ */ jsx(DateInput$1.HiddenInput, {})
+		]
+	});
+}
+const DateInput = Object.assign(DateInputFacade, {
 	...DateInput$1,
 	Root: DateInputRoot
-};
-injectComponentStyle("date-input");
+});
 //#endregion
 export { DateInput };