@bysages/react 0.2.1 → 0.2.3

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/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 };

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

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

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from "react";
+//#region src/components/descriptions/index.d.ts
+/** A ledger laid flat: term and detail pairs in one quiet grid. The
+ * horizontal layout reads as a table of two columns; the vertical one
+ * stacks each pair for narrow measures. */
+export interface DescriptionsRootProps extends HTMLAttributes<HTMLDListElement> {
+  layout?: "horizontal" | "vertical";
+}
+export declare function DescriptionsRoot({ layout, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
+export declare const Descriptions: {
+  Root: typeof DescriptionsRoot;
+  Item: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Term: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+  Detail: {
+    ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion

package/dist/components/descriptions/index.mjs

@@ -0,0 +1,32 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/descriptions/index.tsx
+function DescriptionsRoot({ layout = "horizontal", children, ...rest }) {
+	injectComponentStyle("descriptions");
+	return /* @__PURE__ */ jsx("dl", {
+		...rest,
+		"data-scope": "descriptions",
+		"data-part": "root",
+		"data-layout": layout,
+		children
+	});
+}
+function part(name, tag) {
+	const Tag = tag;
+	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
+		...rest,
+		"data-scope": "descriptions",
+		"data-part": name.toLowerCase(),
+		children
+	});
+	Component.displayName = "Descriptions" + name;
+	return Component;
+}
+const Descriptions = {
+	Root: DescriptionsRoot,
+	Item: part("Item", "div"),
+	Term: part("Term", "dt"),
+	Detail: part("Detail", "dd")
+};
+//#endregion
+export { Descriptions, DescriptionsRoot };

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

@@ -0,0 +1,9 @@
+import { Dialog as Dialog$1, DialogOpenChangeDetails } from "@ark-ui/react/dialog";
+//#region src/components/dialog/index.d.ts
+/** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
+ * in on elevation, the backdrop fades, and nested overlays stack through
+ * the shared z-index ladder. The API is Ark's own — Root, Trigger,
+ * Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
+export declare const Dialog: typeof Dialog$1;
+//#endregion
+export type { DialogOpenChangeDetails };

package/dist/components/dialog/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Dialog as Dialog$1 } from "@ark-ui/react/dialog";
+//#region src/components/dialog/index.tsx
+/** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
+* in on elevation, the backdrop fades, and nested overlays stack through
+* the shared z-index ladder. The API is Ark's own — Root, Trigger,
+* Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
+const Dialog = Dialog$1;
+injectComponentStyle("dialog");
+//#endregion
+export { Dialog };

package/dist/components/download-trigger/index.d.mts

@@ -0,0 +1,2 @@
+import { DownloadTrigger, DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/react/download-trigger";
+export { DownloadTrigger, type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };

package/dist/components/download-trigger/index.mjs

@@ -0,0 +1,2 @@
+import { DownloadTrigger, useDownload } from "@ark-ui/react/download-trigger";
+export { DownloadTrigger, useDownload };

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

@@ -0,0 +1,9 @@
+import { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
+//#region src/components/drawer/index.d.ts
+/** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
+ * cut flush to the edge it rises from, sliding on the machine's translate
+ * under the grabber's hand. The API is Ark's own — Root, Trigger,
+ * Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
+ * Description, CloseTrigger, SwipeArea. */
+export declare const Drawer: typeof Drawer$1;
+//#endregion

package/dist/components/drawer/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
+//#region src/components/drawer/index.tsx
+/** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
+* cut flush to the edge it rises from, sliding on the machine's translate
+* under the grabber's hand. The API is Ark's own — Root, Trigger,
+* Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
+* Description, CloseTrigger, SwipeArea. */
+const Drawer = Drawer$1;
+injectComponentStyle("drawer");
+//#endregion
+export { Drawer };

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

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from "react";
+//#region src/components/dynamic-input/index.d.ts
+export interface DynamicInputProps extends HTMLAttributes<HTMLDivElement> {
+  /** The rows' values; the group renders one Input per entry. */
+  value?: string[];
+  /** The fewest rows the group keeps; the remove seals yield first. */
+  min?: number;
+  /** The most rows the group grows to; the add control yields then. */
+  max?: number;
+  placeholder?: string;
+  /** The add control's visible words. */
+  addLabel?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  /** One rung of the ladder, handed to every row's field and seals. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string[]) => void;
+}
+/**
+ * A column of entry rows: one Input per line, each with a quiet remove
+ * seal, and an add row at the tail. The list is controlled — every edit
+ * reports a fresh array through `onValueChange` and the caller's array
+ * stays the only truth. Deleting never drops below `min`, adding never
+ * grows past `max`, and the group always keeps one row: an entry list
+ * that emptied itself would leave the reader no place to type.
+ */
+export declare function DynamicInput({ value, min, max, placeholder, addLabel, disabled, invalid, size, onValueChange, children: _children, ...rest }: DynamicInputProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,83 @@
+import { Button } from "../button/index.mjs";
+import { Input } from "../input/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dynamic-input/index.tsx
+/**
+* A column of entry rows: one Input per line, each with a quiet remove
+* seal, and an add row at the tail. The list is controlled — every edit
+* reports a fresh array through `onValueChange` and the caller's array
+* stays the only truth. Deleting never drops below `min`, adding never
+* grows past `max`, and the group always keeps one row: an entry list
+* that emptied itself would leave the reader no place to type.
+*/
+function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, size = "md", onValueChange, children: _children, ...rest }) {
+	injectComponentStyle("dynamic-input");
+	const values = value ?? [""];
+	const update = (index, next) => {
+		const rows = values.slice();
+		rows[index] = next;
+		onValueChange?.(rows);
+	};
+	const remove = (index) => {
+		const rows = values.filter((_, i) => i !== index);
+		onValueChange?.(rows.length > 0 ? rows : [""]);
+	};
+	const add = () => {
+		onValueChange?.([...values, ""]);
+	};
+	const canRemove = values.length > Math.max(min, 1);
+	const canAdd = max === void 0 || values.length < max;
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-scope": "dynamic-input",
+		"data-part": "root",
+		children: [values.map((value, index) => /* @__PURE__ */ jsxs("div", {
+			"data-scope": "dynamic-input",
+			"data-part": "row",
+			children: [/* @__PURE__ */ jsx(Input, {
+				value,
+				placeholder,
+				disabled,
+				invalid,
+				size,
+				onValueChange: (next) => update(index, next)
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				square: true,
+				size,
+				disabled: disabled || !canRemove,
+				"aria-label": `Remove entry ${index + 1}`,
+				onClick: () => remove(index),
+				children: crossIcon()
+			})]
+		}, index)), /* @__PURE__ */ jsx("div", {
+			"data-scope": "dynamic-input",
+			"data-part": "add",
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size,
+				disabled: disabled || !canAdd,
+				onClick: () => add(),
+				children: ["+", addLabel]
+			})
+		})]
+	});
+}
+/** The one glyph a remove seal needs: a single crossing stroke. */
+function crossIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+//#endregion
+export { DynamicInput };

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

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+import { Editable as Editable$1 } from "@ark-ui/react/editable";
+//#region src/components/editable/index.d.ts
+/** Ark's Editable, dressed in the paper-and-ink system: bare ink while
+ * reading, the full field recipe while editing. The API is Ark's own —
+ * Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
+ * CancelTrigger, Control. */
+type EditableRootProps = ComponentProps<typeof Editable$1.Root> & {
+  /** One rung of the control-height ladder for the editing field. */
+  size?: "sm" | "md" | "lg";
+};
+declare function EditableRoot({ size, ...rest }: EditableRootProps): import("react").JSX.Element;
+export declare const Editable: Omit<typeof Editable$1, "Root"> & {
+  Root: typeof EditableRoot;
+};
+//#endregion