@bysages/react 0.3.0 → 0.4.0

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 { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { 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

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

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
@@ -6,7 +7,7 @@ import { useEffect, useRef, useState } from "react";
 * 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({ threshold = .2, placeholder, children, ...rest }) {
+function DeferredContentImpl({ threshold = .2, placeholder, children, ...rest }) {
 	injectComponentStyle("deferred-content");
 	const host = useRef(null);
 	const [active, setActive] = useState(false);
@@ -30,5 +31,6 @@ function DeferredContent({ threshold = .2, placeholder, children, ...rest }) {
 		children: active ? children : placeholder
 	});
 }
+const DeferredContent = withSelfRoot(DeferredContentImpl);
 //#endregion
 export { DeferredContent };

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

@@ -1,5 +1,11 @@
 import { HTMLAttributes } from "react";
 //#region src/components/descriptions/index.d.ts
+/** Simple term/detail records for the callable facade. */
+export interface DescriptionsItemData {
+  term: string;
+  detail: string;
+  span?: number;
+}
 /** 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. */
@@ -10,16 +16,18 @@ export interface DescriptionsRootProps extends HTMLAttributes<HTMLDListElement>
   bordered?: boolean;
   /** Pairs across the grid: one ledger per column. */
   column?: number;
+  items?: DescriptionsItemData[];
 }
-export declare function DescriptionsRoot({ layout, bordered, column, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
+export declare function DescriptionsRoot({ layout, bordered, column, items, children, ...rest }: DescriptionsRootProps): import("react").JSX.Element;
 declare function DescriptionsItem({ span, children, ...rest }: HTMLAttributes<HTMLDivElement> & {
   span?: number;
 }): import("react").JSX.Element;
 declare namespace DescriptionsItem {
   var displayName: string;
 }
-export declare const Descriptions: {
+export declare const Descriptions: typeof DescriptionsRoot & {
   Root: typeof DescriptionsRoot;
+} & {
   Item: typeof DescriptionsItem;
   Term: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/components/descriptions/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/descriptions/index.tsx
-function DescriptionsRoot({ layout = "horizontal", bordered = false, column = 1, children, ...rest }) {
+function DescriptionsRoot({ layout = "horizontal", bordered = false, column = 1, items, children, ...rest }) {
 	injectComponentStyle("descriptions");
 	return /* @__PURE__ */ jsx("dl", {
 		...rest,
@@ -13,7 +14,10 @@ function DescriptionsRoot({ layout = "horizontal", bordered = false, column = 1,
 			...rest.style,
 			"--bs-desc-columns": String(column)
 		},
-		children
+		children: children ?? items?.map((item) => /* @__PURE__ */ jsxs(DescriptionsItem, {
+			span: item.span,
+			children: [/* @__PURE__ */ jsx(Term, { children: item.term }), /* @__PURE__ */ jsx(Detail, { children: item.detail })]
+		}, item.term))
 	});
 }
 function part(name, tag) {
@@ -40,11 +44,12 @@ function DescriptionsItem({ span = 1, children, ...rest }) {
 	});
 }
 DescriptionsItem.displayName = "DescriptionsItem";
-const Descriptions = {
-	Root: DescriptionsRoot,
+const Term = part("Term", "dt");
+const Detail = part("Detail", "dd");
+const Descriptions = Object.assign(withSelfRoot(DescriptionsRoot), {
 	Item: DescriptionsItem,
-	Term: part("Term", "dt"),
-	Detail: part("Detail", "dd")
-};
+	Term,
+	Detail
+});
 //#endregion
 export { Descriptions, DescriptionsRoot };

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

@@ -1,9 +1,22 @@
+import { ReactNode } from "react";
 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;
+export interface DialogFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function DialogFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: DialogFacadeProps): import("react").JSX.Element;
+declare namespace DialogFacade {
+  var displayName: string;
+}
+type DialogParts = typeof Dialog$1;
+export declare const Dialog: typeof DialogFacade & DialogParts;
 //#endregion
 export type { DialogOpenChangeDetails };

package/dist/components/dialog/index.mjs

@@ -1,11 +1,53 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { 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;
+function DialogRoot(props) {
+	const id = useElementId("dialog", props);
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		...props,
+		id
+	});
+}
+function DialogFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+	const title = label ?? trigger;
+	return /* @__PURE__ */ jsxs(DialogRoot, {
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [
+			/* @__PURE__ */ jsx(Dialog$1.Trigger, {
+				disabled,
+				children: trigger ?? title ?? "Open"
+			}),
+			/* @__PURE__ */ jsx(Dialog$1.Backdrop, {}),
+			/* @__PURE__ */ jsx(Dialog$1.Positioner, { children: /* @__PURE__ */ jsxs(Dialog$1.Content, { children: [
+				/* @__PURE__ */ jsx(Dialog$1.Title, { children: title }),
+				description ? /* @__PURE__ */ jsx(Dialog$1.Description, { children: description }) : null,
+				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+				children,
+				/* @__PURE__ */ jsx(Dialog$1.CloseTrigger, {
+					"aria-label": "Close",
+					children: iconNode("x", {
+						width: 14,
+						height: 14
+					})
+				})
+			] }) })
+		]
+	});
+}
+DialogFacade.displayName = "SDialog";
+const Dialog = Object.assign(DialogFacade, {
+	...Dialog$1,
+	Root: DialogRoot
+});
 injectComponentStyle("dialog");
 //#endregion
 export { Dialog };

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

@@ -1,2 +1,7 @@
-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 };
+import { DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/react/download-trigger";
+//#region src/components/download-trigger/index.d.ts
+export declare const DownloadTrigger: import("react").ForwardRefExoticComponent<import("@ark-ui/react/download-trigger").DownloadTriggerProps & import("react").RefAttributes<HTMLButtonElement>> & {
+  Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/download-trigger").DownloadTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };

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

@@ -1,2 +1,6 @@
-import { DownloadTrigger, useDownload } from "@ark-ui/react/download-trigger";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { DownloadTrigger as DownloadTrigger$1, useDownload } from "@ark-ui/react/download-trigger";
+//#region src/components/download-trigger/index.tsx
+const DownloadTrigger = withSelfRoot(DownloadTrigger$1);
+//#endregion
 export { DownloadTrigger, useDownload };

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

@@ -1,9 +1,21 @@
+import { ReactNode } from "react";
 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;
+export interface DrawerFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function DrawerFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: DrawerFacadeProps): import("react").JSX.Element;
+declare namespace DrawerFacade {
+  var displayName: string;
+}
+type DrawerParts = typeof Drawer$1;
+export declare const Drawer: typeof DrawerFacade & DrawerParts;
 //#endregion

package/dist/components/drawer/index.mjs

@@ -1,4 +1,7 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { 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
@@ -6,7 +9,43 @@ import { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
 * 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;
+function DrawerRoot(props) {
+	const id = useElementId("drawer", props);
+	return /* @__PURE__ */ jsx(Drawer$1.Root, {
+		...props,
+		id
+	});
+}
+function DrawerFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(DrawerRoot, {
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [
+			/* @__PURE__ */ jsx(Drawer$1.Trigger, {
+				disabled,
+				children: trigger ?? label
+			}),
+			/* @__PURE__ */ jsx(Drawer$1.Backdrop, {}),
+			/* @__PURE__ */ jsx(Drawer$1.Positioner, { children: /* @__PURE__ */ jsxs(Drawer$1.Content, { children: [
+				/* @__PURE__ */ jsx(Drawer$1.Grabber, { children: /* @__PURE__ */ jsx(Drawer$1.GrabberIndicator, {}) }),
+				/* @__PURE__ */ jsx(Drawer$1.Title, { children: label }),
+				description ? /* @__PURE__ */ jsx(Drawer$1.Description, { children: description }) : null,
+				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+				children,
+				/* @__PURE__ */ jsx(Drawer$1.CloseTrigger, {
+					"aria-label": "Close",
+					children: iconNode("x")
+				})
+			] }) })
+		]
+	});
+}
+DrawerFacade.displayName = "SDrawer";
+const Drawer = Object.assign(DrawerFacade, {
+	...Drawer$1,
+	Root: DrawerRoot
+});
 injectComponentStyle("drawer");
 //#endregion
 export { Drawer };

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

@@ -24,5 +24,8 @@ export interface DynamicInputProps extends HTMLAttributes<HTMLDivElement> {
  * 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;
+declare function DynamicInputImpl({ value, min, max, placeholder, addLabel, disabled, invalid, size, onValueChange, children: _children, ...rest }: DynamicInputProps): import("react").JSX.Element;
+export declare const DynamicInput: typeof DynamicInputImpl & {
+  Root: typeof DynamicInputImpl;
+};
 //#endregion

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

@@ -1,5 +1,8 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
-import { t as Input } from "../../input-2oezH-dY.mjs";
+import { t as Input } from "../../input-C21Zzuy6.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dynamic-input/index.tsx
@@ -11,8 +14,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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 }) {
+function DynamicInputImpl({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, size = "md", onValueChange, children: _children, ...rest }) {
 	injectComponentStyle("dynamic-input");
+	const messages = useComponentMessages();
 	const values = value ?? [""];
 	const update = (index, next) => {
 		const rows = values.slice();
@@ -47,9 +51,9 @@ function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry"
 				square: true,
 				size,
 				disabled: disabled || !canRemove,
-				"aria-label": `Remove entry ${index + 1}`,
+				"aria-label": messages.dynamicEntry.remove,
 				onClick: () => remove(index),
-				children: crossIcon()
+				children: crossIcon
 			})]
 		}, index)), /* @__PURE__ */ jsx("div", {
 			"data-scope": "dynamic-input",
@@ -64,20 +68,10 @@ function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry"
 		})]
 	});
 }
-/** 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" })
-	});
-}
+const DynamicInput = withSelfRoot(DynamicInputImpl);
+const crossIcon = iconNode("x", {
+	width: 16,
+	height: 16
+});
 //#endregion
 export { DynamicInput };

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

@@ -1,16 +1,37 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } 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"> & {
+declare function EditableRoot(props: EditableRootProps): import("react").JSX.Element;
+interface EditableFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+  children?: ReactNode;
+}
+/** The one-tag path: a named value with the house edit controls. Modes,
+ * custom triggers, and alternate editors stay on the anatomy. */
+declare function EditableFacade({ value, defaultValue, label, placeholder, disabled, invalid, required, size, onValueChange }: EditableFacadeProps): import("react").JSX.Element;
+export declare const Editable: typeof EditableFacade & {
   Root: typeof EditableRoot;
+  Area: import("react").ForwardRefExoticComponent<Editable$1.AreaProps & import("react").RefAttributes<HTMLDivElement>>;
+  CancelTrigger: import("react").ForwardRefExoticComponent<Editable$1.CancelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Context: (props: Editable$1.ContextProps) => ReactNode;
+  Control: import("react").ForwardRefExoticComponent<Editable$1.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+  EditTrigger: import("react").ForwardRefExoticComponent<Editable$1.EditTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Input: import("react").ForwardRefExoticComponent<Editable$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Label: import("react").ForwardRefExoticComponent<Editable$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  Preview: import("react").ForwardRefExoticComponent<Editable$1.PreviewProps & import("react").RefAttributes<HTMLSpanElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Editable$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+  SubmitTrigger: import("react").ForwardRefExoticComponent<Editable$1.SubmitTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion

package/dist/components/editable/index.mjs

@@ -1,17 +1,56 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Editable as Editable$1 } from "@ark-ui/react/editable";
 //#region src/components/editable/index.tsx
-function EditableRoot({ size = "md", ...rest }) {
+function EditableRoot(props) {
+	const id = useElementId("editable", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Editable$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-const Editable = {
+/** The one-tag path: a named value with the house edit controls. Modes,
+* custom triggers, and alternate editors stay on the anatomy. */
+function EditableFacade({ value, defaultValue, label, placeholder, disabled = false, invalid = false, required = false, size = "md", onValueChange }) {
+	return /* @__PURE__ */ jsxs(EditableRoot, {
+		size,
+		disabled,
+		invalid,
+		required,
+		placeholder,
+		defaultValue,
+		...value === void 0 ? {} : {
+			value,
+			onValueChange: (details) => onValueChange?.(details.value)
+		},
+		children: [
+			label ? /* @__PURE__ */ jsx(Editable$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsxs(Editable$1.Area, { children: [/* @__PURE__ */ jsx(Editable$1.Preview, {}), /* @__PURE__ */ jsx(Editable$1.Input, {})] }),
+			/* @__PURE__ */ jsxs(Editable$1.Control, { children: [
+				/* @__PURE__ */ jsx(Editable$1.EditTrigger, {
+					"aria-label": "Edit",
+					children: iconNode("pencil")
+				}),
+				/* @__PURE__ */ jsx(Editable$1.SubmitTrigger, {
+					"aria-label": "Submit",
+					children: iconNode("check")
+				}),
+				/* @__PURE__ */ jsx(Editable$1.CancelTrigger, {
+					"aria-label": "Cancel",
+					children: iconNode("x")
+				})
+			] })
+		]
+	});
+}
+const Editable = Object.assign(EditableFacade, {
 	...Editable$1,
 	Root: EditableRoot
-};
+});
 injectComponentStyle("editable");
 //#endregion
 export { Editable };

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

@@ -6,5 +6,8 @@ import { HTMLAttributes } from "react";
 export interface EllipsisProps extends HTMLAttributes<HTMLElement> {
   lines?: number;
 }
-export declare function Ellipsis({ lines, ...rest }: EllipsisProps): import("react").JSX.Element;
+declare function EllipsisImpl({ lines, ...rest }: EllipsisProps): import("react").JSX.Element;
+export declare const Ellipsis: typeof EllipsisImpl & {
+  Root: typeof EllipsisImpl;
+};
 //#endregion

package/dist/components/ellipsis/index.mjs

@@ -1,7 +1,8 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ellipsis/index.tsx
-function Ellipsis({ lines = 1, ...rest }) {
+function EllipsisImpl({ lines = 1, ...rest }) {
 	injectComponentStyle("ellipsis");
 	const multiline = lines > 1;
 	return /* @__PURE__ */ jsx("span", {
@@ -15,5 +16,6 @@ function Ellipsis({ lines = 1, ...rest }) {
 		"data-multiline": multiline ? "" : void 0
 	});
 }
+const Ellipsis = withSelfRoot(EllipsisImpl);
 //#endregion
 export { Ellipsis };