@bysages/solid 0.2.2 → 0.3.0

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

@@ -0,0 +1,110 @@
+import { Pagination } from "../pagination/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, memo, setAttribute, spread, template } from "@solidjs/web";
+import { For, Show, createSignal, createUniqueId, splitProps } from "solid-js";
+//#region src/components/data-view/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=data-view data-part=pager>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><div data-scope=data-view data-part=content></div><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=data-view data-part=cell>`);
+/** 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(props) {
+	injectComponentStyle("data-view");
+	const uid = createUniqueId();
+	const [own, rest] = splitProps(props, [
+		"items",
+		"layout",
+		"pageSize",
+		"renderItem",
+		"header"
+	]);
+	const [page, setPage] = createSignal(1);
+	const pageCount = () => own.pageSize ? Math.max(1, Math.ceil(own.items.length / own.pageSize)) : 1;
+	const visible = () => own.pageSize ? own.items.slice((page() - 1) * own.pageSize, page() * own.pageSize) : own.items;
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	var _el$4 = _el$2.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "data-view",
+		"data-part": "root",
+		"data-uid": uid
+	}], true);
+	insert(_el$, () => {
+		return own.header;
+	}, _el$2);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return visible();
+		},
+		children: (item, index) => (() => {
+			var _el$5 = _tmpl$3();
+			insert(_el$5, () => {
+				return own.renderItem?.(item, index());
+			});
+			return _el$5;
+		})()
+	}));
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return memo(() => {
+				return !!own.pageSize;
+			})() ? pageCount() > 1 : own.pageSize;
+		},
+		get children() {
+			var _el$3 = _tmpl$();
+			insert(_el$3, createComponent(Pagination.Root, {
+				get count() {
+					return own.items.length;
+				},
+				get pageSize() {
+					return own.pageSize;
+				},
+				get page() {
+					return page();
+				},
+				siblingCount: 1,
+				onPageChange: (details) => setPage(details.page),
+				get children() {
+					return [
+						createComponent(Pagination.PrevTrigger, {
+							"aria-label": "Previous page",
+							children: "‹"
+						}),
+						createComponent(Pagination.Context, { children: (pagination) => createComponent(For, {
+							get each() {
+								return pagination().pages;
+							},
+							children: (entry, index) => entry.type === "ellipsis" ? createComponent(Pagination.Ellipsis, {
+								get index() {
+									return index();
+								},
+								children: "…"
+							}) : createComponent(Pagination.Item, {
+								type: "page",
+								get value() {
+									return entry.value;
+								},
+								get children() {
+									return entry.value;
+								}
+							})
+						}) }),
+						createComponent(Pagination.NextTrigger, {
+							"aria-label": "Next page",
+							children: "›"
+						})
+					];
+				}
+			}));
+			return _el$3;
+		}
+	}), _el$4);
+	effect(() => own.layout ?? "list", (_v$) => {
+		setAttribute(_el$2, "data-layout", _v$);
+	});
+	return _el$;
+}
+//#endregion
+export { DataView };

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

@@ -0,0 +1,15 @@
+import { DateInput as DateInput$1, DateInputRootProps } from "@ark-ui/solid/date-input";
+//#region src/components/date-input/index.d.ts
+/** 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. */
+type DateInputOwnProps = {
+  /** One rung of the control-height ladder for the segmented field. */
+  size?: "sm" | "md" | "lg";
+};
+declare function DateInputRoot(props: DateInputRootProps & DateInputOwnProps): import("solid-js").JSX.Element;
+export declare const DateInput: Omit<typeof DateInput$1, "Root"> & {
+  Root: typeof DateInputRoot;
+};
+//#endregion

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

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { DateInput as DateInput$1 } from "@ark-ui/solid/date-input";
+//#region src/components/date-input/index.tsx
+function DateInputRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(DateInput$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const DateInput = {
+	...DateInput$1,
+	Root: DateInputRoot
+};
+injectComponentStyle("date-input");
+//#endregion
+export { DateInput };

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

@@ -0,0 +1,17 @@
+import { DatePicker as DatePicker$1, DatePickerRootProps } from "@ark-ui/solid/date-picker";
+//#region src/components/date-picker/index.d.ts
+/** 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. */
+type DatePickerOwnProps = {
+  /** One rung of the control-height ladder for the field row. */
+  size?: "sm" | "md" | "lg";
+};
+declare function DatePickerRoot(props: DatePickerRootProps & DatePickerOwnProps): import("solid-js").JSX.Element;
+export declare const DatePicker: Omit<typeof DatePicker$1, "Root"> & {
+  Root: typeof DatePickerRoot;
+};
+//#endregion

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

@@ -0,0 +1,18 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { DatePicker as DatePicker$1 } from "@ark-ui/solid/date-picker";
+//#region src/components/date-picker/index.tsx
+function DatePickerRoot(props) {
+	const [own, rest] = splitProps(props, ["size"]);
+	return createComponent(DatePicker$1.Root, mergeProps(rest, { get "data-size"() {
+		return own.size ?? "md";
+	} }));
+}
+const DatePicker = {
+	...DatePicker$1,
+	Root: DatePickerRoot
+};
+injectComponentStyle("date-picker");
+//#endregion
+export { DatePicker };

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

@@ -0,0 +1,16 @@
+import { JSX } from "solid-js";
+//#region src/components/deferred-content/index.d.ts
+export interface DeferredContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** How much of the placeholder must be visible before the content
+   * mounts, from 0 (any pixel) to 1 (the whole box). */
+  threshold?: number;
+  /** Drawn until the box approaches the viewport. */
+  placeholder?: JSX.Element;
+  children?: JSX.Element;
+}
+/** Content that waits to be worth rendering: the slot stays off the
+ * 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(props: DeferredContentProps): JSX.Element;
+//#endregion

package/dist/components/deferred-content/index.mjs

@@ -0,0 +1,52 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, ref, spread, template } from "@solidjs/web";
+import { Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
+//#region src/components/deferred-content/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** Content that waits to be worth rendering: the slot stays off the
+* 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. */
+function DeferredContent(props) {
+	injectComponentStyle("deferred-content");
+	const [own, rest] = splitProps(props, [
+		"threshold",
+		"placeholder",
+		"children"
+	]);
+	const [host, setHost] = createSignal(null);
+	const [active, setActive] = createSignal(false);
+	onMount(() => {
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setActive(true);
+				observer.disconnect();
+			}
+		}, { threshold: own.threshold ?? .2 });
+		const node = host();
+		if (node) observer.observe(node);
+		onCleanup(() => observer.disconnect());
+	});
+	var _el$ = _tmpl$();
+	ref(() => {
+		return setHost;
+	}, _el$);
+	spread(_el$, [rest, {
+		"data-scope": "deferred-content",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return active();
+		},
+		get fallback() {
+			return own.placeholder;
+		},
+		get children() {
+			return own.children;
+		}
+	}));
+	return _el$;
+}
+//#endregion
+export { DeferredContent };

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

@@ -0,0 +1,26 @@
+import { JSX } from "solid-js";
+//#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 JSX.HTMLAttributes<HTMLDListElement> {
+  layout?: "horizontal" | "vertical";
+  /** The framed register: one hairline round the whole, terms on
+   * inset paper. */
+  bordered?: boolean;
+  /** Pairs across the grid: one ledger per column. */
+  column?: number;
+}
+declare function Root(props: DescriptionsRootProps): JSX.Element;
+declare function Item(props: JSX.HTMLAttributes<HTMLDivElement> & {
+  span?: number;
+}): JSX.Element;
+export declare const Descriptions: typeof Root & {
+  Root: typeof Root;
+  Item: typeof Item;
+  Term: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+  Detail: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+};
+//#endregion

package/dist/components/descriptions/index.mjs

@@ -0,0 +1,69 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/descriptions/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<dl>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+function Root(props) {
+	const [own, rest] = splitProps(props, [
+		"layout",
+		"bordered",
+		"column",
+		"style"
+	]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...own.style,
+				"--bs-desc-columns": String(own.column ?? 1)
+			};
+		},
+		"data-scope": "descriptions",
+		"data-part": "root",
+		get "data-layout"() {
+			return own.layout ?? "horizontal";
+		},
+		get "data-bordered"() {
+			return own.bordered || void 0;
+		}
+	}], false);
+	return _el$;
+}
+function part(name, tag) {
+	function Component(props) {
+		return createComponent(tag, mergeProps(props, {
+			"data-scope": "descriptions",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}));
+	}
+	return Component;
+}
+function Item(props) {
+	const [own, rest] = splitProps(props, ["span", "style"]);
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [rest, {
+		get style() {
+			return {
+				...own.style,
+				"--bs-desc-span": String((own.span ?? 1) * 2)
+			};
+		},
+		"data-scope": "descriptions",
+		"data-part": "item"
+	}], false);
+	return _el$2;
+}
+const Term = part("Term", "dt");
+const Detail = part("Detail", "dd");
+const Descriptions = Object.assign(Root, {
+	Root,
+	Item,
+	Term,
+	Detail
+});
+injectComponentStyle("descriptions");
+//#endregion
+export { Descriptions };

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

@@ -0,0 +1,9 @@
+import { Dialog as Dialog$1, DialogOpenChangeDetails } from "@ark-ui/solid/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/solid/dialog";
+//#region src/components/dialog/index.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. */
+const Dialog = Dialog$1;
+injectComponentStyle("dialog");
+//#endregion
+export { Dialog };

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

@@ -0,0 +1,22 @@
+import { JSX } from "solid-js";
+//#region src/components/dock/index.d.ts
+export interface DockProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The tallest an item swells under the hand — 1 stands still. */
+  maxScale?: number;
+  /** How far the hand reaches, in px, before an item stops answering. */
+  radius?: number;
+}
+export interface DockItemProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+/** The magnifying dock: a floating rail whose icons swell toward the
+ * hand. The wrapper measures per item and writes --bs-dock-scale; CSS
+ * eases the chase, so no spring engine rides along. */
+export declare function DockRoot(props: DockProps): JSX.Element;
+/** One moored place in the rail: whatever slots in grows from the
+ * floor, never from its center. */
+export declare function DockItem(props: DockItemProps): JSX.Element;
+/** The whole family under one handle — Dock.Root, Dock.Item. */
+export declare const Dock: typeof DockRoot & {
+  Root: typeof DockRoot;
+  Item: typeof DockItem;
+};
+//#endregion

package/dist/components/dock/index.mjs

@@ -0,0 +1,64 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/dock/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+const ITEM = "[data-scope=\"dock\"][data-part=\"item\"]";
+/** The magnifying dock: a floating rail whose icons swell toward the
+* hand. The wrapper measures per item and writes --bs-dock-scale; CSS
+* eases the chase, so no spring engine rides along. */
+function DockRoot(props) {
+	injectComponentStyle("dock");
+	const [own, rest] = splitProps(props, ["maxScale", "radius"]);
+	const maxScale = () => own.maxScale ?? 1.5;
+	const radius = () => own.radius ?? 96;
+	const magnify = (event) => {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) {
+			const rect = item.getBoundingClientRect();
+			const dist = Math.abs(event.clientX - (rect.left + rect.width / 2));
+			const t = Math.max(0, 1 - dist / radius());
+			item.style.setProperty("--bs-dock-scale", (1 + (maxScale() - 1) * t * t).toFixed(4));
+		}
+	};
+	const reset = (event) => {
+		for (const item of event.currentTarget.querySelectorAll(ITEM)) item.style.removeProperty("--bs-dock-scale");
+	};
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "dock",
+		"data-part": "root",
+		get style() {
+			return {
+				...rest.style,
+				"--bs-dock-max-scale": String(maxScale())
+			};
+		},
+		onPointerMove: magnify,
+		onPointerLeave: reset
+	}], true);
+	insert(_el$, () => {
+		return rest.children;
+	});
+	return _el$;
+}
+/** One moored place in the rail: whatever slots in grows from the
+* floor, never from its center. */
+function DockItem(props) {
+	injectComponentStyle("dock");
+	var _el$2 = _tmpl$();
+	spread(_el$2, [props, {
+		"data-scope": "dock",
+		"data-part": "item"
+	}], true);
+	insert(_el$2, () => {
+		return props.children;
+	});
+	return _el$2;
+}
+/** The whole family under one handle — Dock.Root, Dock.Item. */
+const Dock = Object.assign(DockRoot, {
+	Root: DockRoot,
+	Item: DockItem
+});
+//#endregion
+export { Dock, DockItem, DockRoot };

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

@@ -0,0 +1,2 @@
+import { DownloadTrigger, DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/solid/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/solid/download-trigger";
+export { DownloadTrigger, useDownload };

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

@@ -0,0 +1,9 @@
+import { Drawer as Drawer$1 } from "@ark-ui/solid/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/solid/drawer";
+//#region src/components/drawer/index.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. */
+const Drawer = Drawer$1;
+injectComponentStyle("drawer");
+//#endregion
+export { Drawer };

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

@@ -0,0 +1,30 @@
+import { JSX } from "solid-js";
+//#region src/components/dynamic-input/index.d.ts
+export interface DynamicInputProps extends JSX.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;
+  /** One rung of the ladder, handed to every row's field and seals. */
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  invalid?: boolean;
+  /** Every edit emits a fresh array; the caller's array stays the only
+   * truth. */
+  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
+ * calls `onValueChange` with a fresh array 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(props: DynamicInputProps): JSX.Element;
+//#endregion

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

@@ -0,0 +1,119 @@
+import { Button } from "../button/index.mjs";
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, memo, spread, template } from "@solidjs/web";
+import { Index, splitProps } from "solid-js";
+//#region src/components/dynamic-input/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=dynamic-input data-part=add>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=dynamic-input data-part=row><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M18 6 6 18M6 6l12 12">`);
+/**
+* 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
+* calls `onValueChange` with a fresh array 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(props) {
+	injectComponentStyle("dynamic-input");
+	const [own, rest] = splitProps(props, [
+		"value",
+		"min",
+		"max",
+		"placeholder",
+		"size",
+		"addLabel",
+		"disabled",
+		"invalid",
+		"onValueChange",
+		"children"
+	]);
+	const values = () => own.value ?? [""];
+	const update = (index, value) => {
+		const next = values().slice();
+		next[index] = value;
+		own.onValueChange?.(next);
+	};
+	const remove = (index) => {
+		const next = values().filter((_, i) => i !== index);
+		own.onValueChange?.(next.length > 0 ? next : [""]);
+	};
+	const add = () => {
+		own.onValueChange?.([...values(), ""]);
+	};
+	const canRemove = () => values().length > Math.max(own.min ?? 0, 1);
+	const canAdd = () => own.max === void 0 || values().length < own.max;
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
+		"data-scope": "dynamic-input",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Index, {
+		get each() {
+			return values();
+		},
+		children: (value, index) => (() => {
+			var _el$3 = _tmpl$2();
+			var _el$4 = _el$3.firstChild;
+			var _el$5 = _el$4.nextSibling;
+			insert(_el$3, createComponent(Input, {
+				get value() {
+					return value();
+				},
+				get placeholder() {
+					return own.placeholder;
+				},
+				get disabled() {
+					return own.disabled;
+				},
+				get invalid() {
+					return own.invalid;
+				},
+				get size() {
+					return own.size ?? "md";
+				},
+				onValueChange: (next) => update(index, next)
+			}), _el$4);
+			insert(_el$3, createComponent(Button, {
+				variant: "ghost",
+				get size() {
+					return own.size ?? "md";
+				},
+				square: true,
+				get disabled() {
+					return own.disabled || !canRemove();
+				},
+				"aria-label": `Remove entry ${index + 1}`,
+				onClick: () => remove(index),
+				get children() {
+					return crossIcon();
+				}
+			}), _el$5);
+			return _el$3;
+		})()
+	}), _el$2);
+	insert(_el$2, createComponent(Button, {
+		variant: "ghost",
+		get size() {
+			return own.size ?? "md";
+		},
+		get disabled() {
+			return own.disabled || !canAdd();
+		},
+		onClick: () => add(),
+		get children() {
+			return ["+", memo(() => {
+				return own.addLabel ?? "Add entry";
+			})];
+		}
+	}));
+	return _el$;
+}
+/** The one glyph a remove seal needs: a single crossing stroke. */
+function crossIcon() {
+	return _tmpl$3();
+}
+//#endregion
+export { DynamicInput };

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

@@ -0,0 +1,15 @@
+import { Editable as Editable$1, EditableRootProps } from "@ark-ui/solid/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 EditableOwnProps = {
+  /** One rung of the control-height ladder for the editing field. */
+  size?: "sm" | "md" | "lg";
+};
+declare function EditableRoot(props: EditableRootProps & EditableOwnProps): import("solid-js").JSX.Element;
+export declare const Editable: Omit<typeof Editable$1, "Root"> & {
+  Root: typeof EditableRoot;
+};
+//#endregion