@bysages/react 0.3.1 → 0.4.1

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

@@ -1,25 +1,67 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColorPicker as ColorPicker$1, parseColor } from "@ark-ui/react/color-picker";
 //#region src/components/color-picker/index.tsx
-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 { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
-import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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,5 +1,7 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { Dialog as Dialog$1 } from "../dialog/index.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Portal } from "@ark-ui/react/portal";
@@ -7,9 +9,10 @@ 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, 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;
@@ -66,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, {
@@ -80,6 +84,7 @@ function Command({ items = [], placeholder, open, autoFilter = true, inputValue,
 						"data-part": "content",
 						"aria-label": messages.command.palette,
 						children: /* @__PURE__ */ jsxs(Combobox.Root, {
+							id: `${hostId}:combobox`,
 							collection,
 							inputValue,
 							open: listOpen,
@@ -139,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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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

@@ -45,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, messages, 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,7 +16,7 @@ function useConfig() {
 * descendants through `useConfig`, so interactive behavior (formatting,
 * messages) and visual theming stay one decision.
 */
-function ConfigProvider({ density, scene, accent, dir, locale, messages, children, ...rest }) {
+function ConfigProviderImpl({ density, scene, accent, dir, locale, messages, children, ...rest }) {
 	return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
 		value: {
 			density,
@@ -38,5 +39,6 @@ function ConfigProvider({ density, scene, accent, dir, locale, messages, childre
 		})
 	});
 }
+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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 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,6 +1,7 @@
+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 { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/data-view/index.tsx
@@ -8,7 +9,7 @@ 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();
@@ -62,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 { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+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 };

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

@@ -1,18 +1,35 @@
-import { ComponentProps } from "react";
-import { DatePicker as DatePicker$1, DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails } from "@ark-ui/react/date-picker";
+import { CSSProperties, ComponentProps } from "react";
+import { DatePicker as DatePicker$1, DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails, DateValue } from "@ark-ui/react/date-picker";
 //#region src/components/date-picker/index.d.ts
 type DatePickerRootProps$1 = ComponentProps<typeof DatePicker$1.Root> & {
   /** One rung of the control-height ladder for the field row. */
   size?: "sm" | "md" | "lg";
 };
-declare function DatePickerRoot({ size, ...rest }: DatePickerRootProps$1): import("react").JSX.Element;
+declare function DatePickerRoot(props: DatePickerRootProps$1): import("react").JSX.Element;
 /** Ark's DatePicker, dressed in the paper-and-ink system: the popup
  * dissolves in on elevation, selected days take the flat ink fill, and
  * range middles run subtle with cut corners. The API is Ark's own —
  * Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
  * Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
  * NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
-export declare const DatePicker: Omit<typeof DatePicker$1, "Root"> & {
+type DatePickerFacadeValue = DateValue | DateValue[];
+type DatePickerFacadeProps = {
+  value?: DatePickerFacadeValue;
+  defaultValue?: DatePickerFacadeValue;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label?: string;
+  placeholder?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  style?: CSSProperties;
+  onValueChange?: (value: DateValue[]) => void;
+};
+/** The complete picker behind one date: the field opens a single day grid,
+ * while ranges, multiple selection, and custom views remain anatomy work. */
+declare function DatePickerFacade(props: DatePickerFacadeProps): import("react").JSX.Element;
+export declare const DatePicker: typeof DatePickerFacade & Omit<typeof DatePicker$1, "Root"> & {
   Root: typeof DatePickerRoot;
 };
 //#endregion

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

@@ -1,23 +1,70 @@
-import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker as DatePicker$1 } from "@ark-ui/react/date-picker";
 //#region src/components/date-picker/index.tsx
-function DatePickerRoot({ size = "md", ...rest }) {
+function DatePickerRoot(props) {
+	injectComponentStyle("date-picker");
+	const id = useElementId("date-picker", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(DatePicker$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's DatePicker, dressed in the paper-and-ink system: the popup
-* dissolves in on elevation, selected days take the flat ink fill, and
-* range middles run subtle with cut corners. The API is Ark's own —
-* Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
-* Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
-* NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
-const DatePicker = {
+function toDatePickerValue(value) {
+	if (value === void 0) return void 0;
+	return Array.isArray(value) ? value : [value];
+}
+/** The complete picker behind one date: the field opens a single day grid,
+* while ranges, multiple selection, and custom views remain anatomy work. */
+function DatePickerFacade(props) {
+	const { value, defaultValue, disabled, invalid, required, label, placeholder, size = "md", className, style, onValueChange } = props;
+	return /* @__PURE__ */ jsxs(DatePickerRoot, {
+		size,
+		defaultValue: toDatePickerValue(defaultValue),
+		value: toDatePickerValue(value),
+		disabled,
+		invalid,
+		placeholder,
+		required,
+		className,
+		style,
+		onValueChange: (event) => onValueChange?.(event.value),
+		children: [
+			label ? /* @__PURE__ */ jsx(DatePicker$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs(DatePicker$1.Control, { children: [/* @__PURE__ */ jsx(DatePicker$1.Input, { "aria-label": label ? void 0 : placeholder }), /* @__PURE__ */ jsx(DatePicker$1.Trigger, { children: iconNode("calendar", {
+				width: 16,
+				height: 16
+			}) })] }),
+			/* @__PURE__ */ jsx(DatePicker$1.Positioner, { children: /* @__PURE__ */ jsx(DatePicker$1.Content, { children: /* @__PURE__ */ jsx(DatePicker$1.View, {
+				view: "day",
+				children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
+					/* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: iconNode("chevron-left", {
+						width: 14,
+						height: 14
+					}) }),
+					/* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: /* @__PURE__ */ jsx(DatePicker$1.RangeText, {}) }),
+					/* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: iconNode("chevron-right", {
+						width: 14,
+						height: 14
+					}) })
+				] }), /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: dp.weekDays.map((day, index) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
+					"aria-label": day.long,
+					children: day.narrow
+				}, index)) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: dp.weeks.map((week, index) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
+					value: day,
+					children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
+				}, dayIndex)) }, index)) })] })] }) })
+			}) }) })
+		]
+	});
+}
+const DatePicker = Object.assign(DatePickerFacade, {
 	...DatePicker$1,
 	Root: DatePickerRoot
-};
-injectComponentStyle("date-picker");
+});
 //#endregion
 export { DatePicker };

package/dist/components/deferred-content/index.d.mts

@@ -12,5 +12,8 @@ export interface DeferredContentProps extends HTMLAttributes<HTMLDivElement> {
  * tree until the placeholder scrolls near the viewport, then mounts
  * once and stays. The placeholder is drawn by the caller, so the late
  * arrival costs no layout shift it cannot predict. */
-export declare function DeferredContent({ threshold, placeholder, children, ...rest }: DeferredContentProps): import("react").JSX.Element;
+declare function DeferredContentImpl({ threshold, placeholder, children, ...rest }: DeferredContentProps): import("react").JSX.Element;
+export declare const DeferredContent: typeof DeferredContentImpl & {
+  Root: typeof DeferredContentImpl;
+};
 //#endregion