@bysages/react 0.2.2 → 0.3.0

package/dist/components/clipboard/index.mjs

@@ -0,0 +1,17 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
+//#region src/components/clipboard/index.tsx
+function ClipboardRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(Clipboard$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Clipboard = {
+	...Clipboard$1,
+	Root: ClipboardRoot
+};
+injectComponentStyle("clipboard");
+//#endregion
+export { Clipboard };

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

@@ -0,0 +1,7 @@
+import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
+//#region src/components/collapsible/index.d.ts
+/** 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. */
+export declare const Collapsible: typeof Collapsible$1;
+//#endregion

package/dist/components/collapsible/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+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;
+injectComponentStyle("collapsible");
+//#endregion
+export { Collapsible };

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

@@ -0,0 +1,2 @@
+import { CollectionItem, CollectionOptions, FilePathTreeNode, FlatTreeNode, GridCollection, GridCollectionOptions, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode, UseAsyncListProps, UseAsyncListReturn, UseListCollectionProps, UseListCollectionReturn, UseListSelectionProps, UseListSelectionReturn, createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/react/collection";
+export { type CollectionItem, type CollectionOptions, type FilePathTreeNode, type FlatTreeNode, type GridCollection, type GridCollectionOptions, type ListCollection, type TreeCollection, type TreeCollectionOptions, type TreeNode, type UseAsyncListProps, type UseAsyncListReturn, type UseListCollectionProps, type UseListCollectionReturn, type UseListSelectionProps, type UseListSelectionReturn, createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };

package/dist/components/collection/index.mjs

@@ -0,0 +1,2 @@
+import { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "@ark-ui/react/collection";
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection };

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

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+import { 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;
+/** 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. */
+export declare const ColorPicker: Omit<typeof ColorPicker$1, "Root"> & {
+  Root: typeof ColorPickerRoot;
+};
+//#endregion

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

@@ -0,0 +1,25 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
+//#region src/components/color-picker/index.tsx
+function ColorPickerRoot({ size = "md", ...rest }) {
+	return /* @__PURE__ */ jsx(ColorPicker$1.Root, {
+		...rest,
+		"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 = {
+	...ColorPicker$1,
+	Root: ColorPickerRoot
+};
+injectComponentStyle("color-picker");
+//#endregion
+export { ColorPicker };

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

@@ -0,0 +1,17 @@
+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
+/** Ark's Combobox, dressed in the paper-and-ink system: the field carries
+ * the control recipe and its matches dissolve open as a paper vessel, the
+ * checked row taking the flat ink fill. The API is Ark's own — Root, Label,
+ * Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty,
+ * Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
+type ComboboxOwnProps = {
+  /** One rung of the control-height ladder for the field row. */
+  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"> & {
+  Root: typeof ComboboxRoot;
+};
+//#endregion

package/dist/components/combobox/index.mjs

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
+//#region src/components/combobox/index.tsx
+function ComboboxRoot(props) {
+	const { size = "md", ...rest } = props;
+	return /* @__PURE__ */ jsx(Combobox$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Combobox = {
+	...Combobox$1,
+	Root: ComboboxRoot
+};
+injectComponentStyle("combobox");
+//#endregion
+export { Combobox };

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

@@ -0,0 +1,43 @@
+//#region src/components/command/index.d.ts
+export interface CommandEntry {
+  label: string;
+  value: string;
+  /** Entries sharing a group are listed under one heading. */
+  group?: string;
+  /** A short affordance note, set as a keycap at the row's end. */
+  hint?: string;
+}
+/**
+ * The command palette: a modal sheet at the top of the page carrying a
+ * search field over the caller's commands, grouped as a ledger with a
+ * keycap hint at each row. The shell is the dialog machinery — scrim,
+ * focus trap, Escape — and the searching is the combobox machinery
+ * driving our own list: the vessel and the list live inside the sheet,
+ * so the combobox renders no separate popup and the machine's content
+ * grafts onto the sheet's list.
+ */
+export interface CommandProps {
+  /** The commands on offer, grouped as they arrive. */
+  items?: CommandEntry[];
+  placeholder?: string;
+  /** Whether the palette is up. Supply it to control the palette;
+   * changes are reported via `onOpenChange`. */
+  open?: boolean;
+  /** Whether the shell narrows `items` as the reader types. Turn it off
+   * when the caller owns the searching — a ranked engine or a remote
+   * source — and hands down the already-narrowed list. */
+  autoFilter?: boolean;
+  /** The field's text under the caller's control; changes are reported
+   * via `onInputValueChange`. */
+  inputValue?: string;
+  /** What the list whispers when nothing matches. */
+  emptyText?: string;
+  /** Called with the chosen entry's `value`; the palette closes after. */
+  onSelect?: (value: string) => void;
+  /** Reports the palette's next state. */
+  onOpenChange?: (open: boolean) => void;
+  /** 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;
+//#endregion

package/dist/components/command/index.mjs

@@ -0,0 +1,137 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+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 }) {
+	injectComponentStyle("command");
+	injectComponentStyle("dialog");
+	const [internalOpen, setInternalOpen] = useState(false);
+	const [listOpen, setListOpen] = useState(true);
+	const [fieldText, setFieldText] = useState("");
+	const { collection, set, filter } = useListCollection({
+		initialItems: items.map((entry) => entry.value),
+		filter: (value, input) => {
+			const entry = items.find((candidate) => candidate.value === value);
+			if (!entry) return false;
+			const query = input.toLowerCase();
+			return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
+		}
+	});
+	useEffect(() => {
+		set(items.map((entry) => entry.value));
+		if (autoFilter) filter(fieldText);
+	}, [items]);
+	const currentOpen = open ?? internalOpen;
+	useEffect(() => {
+		if (currentOpen) setListOpen(true);
+	}, [currentOpen]);
+	const setOpen = (value) => {
+		if (open === void 0) setInternalOpen(value);
+		onOpenChange?.(value);
+	};
+	const available = new Set(collection.items);
+	const groups = /* @__PURE__ */ new Map();
+	for (const entry of items) {
+		if (!available.has(entry.value)) continue;
+		const key = entry.group ?? "";
+		if (!groups.has(key)) groups.set(key, []);
+		groups.get(key).push(entry);
+	}
+	const row = (entry) => /* @__PURE__ */ jsx(Combobox.Item, {
+		item: entry.value,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-scope": "command",
+			"data-part": "item",
+			children: [/* @__PURE__ */ jsx(Combobox.ItemText, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("span", {
+					"data-scope": "command",
+					"data-part": "item-label",
+					children: entry.label
+				})
+			}), entry.hint ? /* @__PURE__ */ jsx("span", {
+				"data-scope": "command",
+				"data-part": "item-hint",
+				children: entry.hint
+			}) : void 0]
+		})
+	}, entry.value);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: currentOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {}), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-scope": "command",
+				"data-part": "positioner",
+				children: /* @__PURE__ */ jsx(Dialog.Content, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-scope": "command",
+						"data-part": "content",
+						children: /* @__PURE__ */ jsxs(Combobox.Root, {
+							collection,
+							inputValue,
+							open: listOpen,
+							onOpenChange: (details) => setListOpen(details.open),
+							inputBehavior: "autohighlight",
+							loopFocus: true,
+							onInputValueChange: (details) => {
+								setFieldText(details.inputValue);
+								if (autoFilter) filter(details.inputValue);
+								onInputValueChange?.(details.inputValue);
+							},
+							onValueChange: (details) => {
+								const [first] = details.value;
+								if (first == null) return;
+								onSelect?.(first);
+								setOpen(false);
+							},
+							children: [/* @__PURE__ */ jsx(Combobox.Input, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx("input", {
+									type: "text",
+									placeholder,
+									"data-scope": "command",
+									"data-part": "input"
+								})
+							}), /* @__PURE__ */ jsx(Combobox.Content, {
+								asChild: true,
+								children: /* @__PURE__ */ jsxs("div", {
+									"data-scope": "command",
+									"data-part": "list",
+									children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox.ItemGroup, {
+										asChild: true,
+										children: /* @__PURE__ */ jsxs("div", {
+											"data-scope": "command",
+											"data-part": "group",
+											children: [/* @__PURE__ */ jsx(Combobox.ItemGroupLabel, {
+												asChild: true,
+												children: /* @__PURE__ */ jsx("div", {
+													"data-scope": "command",
+													"data-part": "group-label",
+													children: group
+												})
+											}), entries.map(row)]
+										})
+									}, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
+										"data-scope": "command",
+										"data-part": "empty",
+										children: emptyText
+									}) : null]
+								})
+							})]
+						})
+					})
+				})
+			})
+		})] })
+	});
+}
+//#endregion
+export { Command };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/comment/index.d.ts
+/**
+ * A voice on the record: the portrait hangs left (the `avatar` prop),
+ * the body carries the byline from `author` and `datetime`, the ink is
+ * the children, and `actions` is the row of answers.
+ */
+export interface CommentProps extends HTMLAttributes<HTMLElement> {
+  author?: string;
+  datetime?: string;
+  /** The portrait at the row's head. */
+  avatar?: ReactNode;
+  /** The row of answers beneath the ink. */
+  actions?: ReactNode;
+}
+export declare function Comment({ author, datetime, avatar, actions, children, ...rest }: CommentProps): import("react").JSX.Element;
+//#endregion

package/dist/components/comment/index.mjs

@@ -0,0 +1,47 @@
+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 }) {
+	injectComponentStyle("comment");
+	return /* @__PURE__ */ jsxs("article", {
+		...rest,
+		"data-scope": "comment",
+		"data-part": "root",
+		children: [avatar ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "comment",
+			"data-part": "avatar",
+			children: avatar
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-scope": "comment",
+			"data-part": "body",
+			children: [
+				author || datetime ? /* @__PURE__ */ jsxs("header", {
+					"data-scope": "comment",
+					"data-part": "header",
+					children: [author ? /* @__PURE__ */ jsx("span", {
+						"data-scope": "comment",
+						"data-part": "author",
+						children: author
+					}) : null, datetime ? /* @__PURE__ */ jsx("time", {
+						"data-scope": "comment",
+						"data-part": "datetime",
+						dateTime: datetime,
+						children: datetime
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					"data-scope": "comment",
+					"data-part": "content",
+					children
+				}),
+				actions ? /* @__PURE__ */ jsx("div", {
+					"data-scope": "comment",
+					"data-part": "actions",
+					children: actions
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { Comment };

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

@@ -0,0 +1,46 @@
+import { 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
+ * name — whitespace and control heights compress, readability never
+ * does. */
+export type ConfigDensity = "compact" | "default" | "comfortable" | "spacious";
+/** The named scene registers the token layer's `[data-scene]` selectors
+ * retune — "auto" is the engine's own resolution and stays off the
+ * subtree vocabulary. */
+export type ConfigScene = Exclude<ThemeScene, "auto">;
+/** The configuration a provider lays over its subtree. Every field is
+ * optional: an absent field changes nothing, and the page's own
+ * attributes keep ruling. */
+export interface ConfigContext {
+  density?: ConfigDensity;
+  scene?: ConfigScene;
+  /** A mineral pigment theme (qinghua, celadon, zhusha, …) landing as
+   * `[data-accent]` on the host element. */
+  accent?: string;
+  /** Writing direction, landing as the native `dir` attribute. */
+  dir?: "ltr" | "rtl";
+  /** BCP-47 locale, landing as the native `lang` attribute. */
+  locale?: string;
+}
+/** The nearest provider's snapshot, or an empty one when no provider
+ * wraps the caller — the hook the date and format families will consume
+ * to localize their output. */
+export declare function useConfig(): ConfigContext;
+export interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
+  density?: ConfigDensity;
+  scene?: ConfigScene;
+  accent?: string;
+  dir?: "ltr" | "rtl";
+  locale?: string;
+  children?: ReactNode;
+}
+/**
+ * The declarative host for global configuration: one element that both
+ * carries the token layer's attributes — `[data-density]` and
+ * `[data-accent]` fire on any element — and provides the same values to
+ * 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;
+//#endregion

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

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/components/config-provider/index.tsx
+const ConfigContextImpl = createContext({});
+/** The nearest provider's snapshot, or an empty one when no provider
+* wraps the caller — the hook the date and format families will consume
+* to localize their output. */
+function useConfig() {
+	return useContext(ConfigContextImpl);
+}
+/**
+* The declarative host for global configuration: one element that both
+* carries the token layer's attributes — `[data-density]` and
+* `[data-accent]` fire on any element — and provides the same values to
+* descendants through `useConfig`, so interactive behavior (formatting,
+* messages) and visual theming stay one decision.
+*/
+function ConfigProvider({ density, scene, accent, dir, locale, children, ...rest }) {
+	return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
+		value: {
+			density,
+			scene,
+			accent,
+			dir,
+			locale
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "config-provider",
+			"data-part": "root",
+			...density != null ? { "data-density": density } : {},
+			...scene != null ? { "data-scene": scene } : {},
+			...accent != null ? { "data-accent": accent } : {},
+			...dir != null ? { dir } : {},
+			...locale != null ? { lang: locale } : {},
+			children
+		})
+	});
+}
+//#endregion
+export { ConfigProvider, useConfig };

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+//#region src/components/container/index.d.ts
+/** The reading frame: content held to a measure and centered on the
+ * page. The sizes name typographic measures, not breakpoints — the page
+ * owns its edges, the container only owns how long a line of ink runs. */
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+  size?: "narrow" | "readable" | "wide" | "full";
+  /** Keep the ink off the page edges when the viewport runs narrower
+   * than the measure. */
+  padding?: boolean;
+}
+export declare function Container({ size, padding, ...rest }: ContainerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/container/index.mjs

@@ -0,0 +1,15 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/container/index.tsx
+function Container({ size = "readable", padding = true, ...rest }) {
+	injectComponentStyle("container");
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-scope": "container",
+		"data-part": "root",
+		"data-size": size,
+		"data-padding": padding ? "" : void 0
+	});
+}
+//#endregion
+export { Container };

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-view/index.d.ts
+export interface DataViewProps extends HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** Ledger rows or a lattice of cards. */
+  layout?: "list" | "grid";
+  /** Records per page; leave unset to show everything at once. */
+  pageSize?: number;
+  /** Renders one record; the view lays the returned nodes out. */
+  renderItem?: (item: unknown, index: number) => ReactNode;
+  header?: ReactNode;
+}
+/** One vessel, two layouts: the caller renders each record through
+ * 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;
+//#endregion

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

@@ -0,0 +1,64 @@
+import { Pagination } from "../pagination/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/data-view/index.tsx
+/** One vessel, two layouts: the caller renders each record through
+* 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 }) {
+	injectComponentStyle("data-view");
+	const [page, setPage] = useState(1);
+	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", {
+		...rest,
+		"data-scope": "data-view",
+		"data-part": "root",
+		children: [
+			header,
+			/* @__PURE__ */ jsx("div", {
+				"data-scope": "data-view",
+				"data-part": "content",
+				"data-layout": layout,
+				children: visible.map((item, index) => /* @__PURE__ */ jsx("div", {
+					"data-scope": "data-view",
+					"data-part": "cell",
+					children: renderItem?.(item, index)
+				}, index))
+			}),
+			pageSize && pageCount > 1 ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "data-view",
+				"data-part": "pager",
+				children: /* @__PURE__ */ jsxs(Pagination.Root, {
+					count: items.length,
+					pageSize,
+					page,
+					siblingCount: 1,
+					onPageChange: (details) => setPage(details.page),
+					children: [
+						/* @__PURE__ */ jsx(Pagination.PrevTrigger, {
+							"aria-label": "Previous page",
+							children: "‹"
+						}),
+						/* @__PURE__ */ jsx(Pagination.Context, { children: (pagination) => pagination.pages.map((entry, index) => entry.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, {
+							index,
+							children: "…"
+						}, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
+							type: "page",
+							value: entry.value,
+							children: entry.value
+						}, entry.value)) }),
+						/* @__PURE__ */ jsx(Pagination.NextTrigger, {
+							"aria-label": "Next page",
+							children: "›"
+						})
+					]
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { DataView };

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

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import { DateInput as DateInput$1, 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;
+/** 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"> & {
+  Root: typeof DateInputRoot;
+};
+//#endregion
+export type { DateInputFocusChangeDetails, DateInputValueChangeDetails };

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

@@ -0,0 +1,21 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } 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 }) {
+	return /* @__PURE__ */ jsx(DateInput$1.Root, {
+		...rest,
+		"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 = {
+	...DateInput$1,
+	Root: DateInputRoot
+};
+injectComponentStyle("date-input");
+//#endregion
+export { DateInput };

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

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import { DatePicker as DatePicker$1, DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails } 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;
+/** 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"> & {
+  Root: typeof DatePickerRoot;
+};
+//#endregion
+export type { DatePickerFocusChangeDetails, DatePickerOpenChangeDetails, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerVisibleRangeChangeDetails };