@bysages/react 0.3.1 → 0.4.1

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

@@ -1,4 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 //#region src/components/deferred-content/index.tsx
@@ -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 { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/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 { injectComponentStyle } from "@bysages/core";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { 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/dock/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/dock/index.tsx
 const ITEM = "[data-scope=\"dock\"][data-part=\"item\"]";

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 { injectComponentStyle } from "@bysages/core";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { 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,7 +1,9 @@
+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 { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BDpQ0e6G.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/dynamic-input/index.tsx
 /**
@@ -12,7 +14,7 @@ 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 ?? [""];
@@ -51,7 +53,7 @@ function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry"
 				disabled: disabled || !canRemove,
 				"aria-label": messages.dynamicEntry.remove,
 				onClick: () => remove(index),
-				children: crossIcon()
+				children: crossIcon
 			})]
 		}, index)), /* @__PURE__ */ jsx("div", {
 			"data-scope": "dynamic-input",
@@ -66,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 { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { 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 { injectComponentStyle } from "@bysages/core";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/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 };

package/dist/components/empty/index.mjs

@@ -1,4 +1,4 @@
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/empty/index.tsx
 /** An empty state: the page holds its breath. Root centers the column,

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

@@ -1,8 +1,33 @@
 import { Field as Field$1 } from "@ark-ui/react/field";
 //#region src/components/field/index.d.ts
-/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
- * border-and-halo control, and quiet help text. The API is Ark's own —
- * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
- * RequiredIndicator. */
-export declare const Field: typeof Field$1;
+interface FieldFacadeProps {
+  value?: string | number;
+  defaultValue?: string | number;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  onValueChange?: (value: string) => void;
+}
+/** The one-tag path for a simple text field; textarea, select, and
+ * custom controls keep the anatomy. */
+declare function FieldFacade({ value, defaultValue, label, description, placeholder, disabled, invalid, required, onValueChange }: FieldFacadeProps): import("react").JSX.Element;
+export declare const Field: typeof FieldFacade & {
+  Root: typeof Field$1.Root;
+  Context: (props: Field$1.ContextProps) => import("react").ReactNode;
+  ErrorText: import("react").ForwardRefExoticComponent<Field$1.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  HelperText: import("react").ForwardRefExoticComponent<Field$1.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Input: import("react").ForwardRefExoticComponent<Field$1.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Item: {
+    (props: Field$1.ItemProps): import("react").JSX.Element;
+    displayName: string;
+  };
+  Label: import("react").ForwardRefExoticComponent<Field$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RequiredIndicator: import("react").ForwardRefExoticComponent<Field$1.RequiredIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Field$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
+  Select: import("react").ForwardRefExoticComponent<Field$1.SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+  Textarea: import("react").ForwardRefExoticComponent<Field$1.TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+};
 //#endregion

package/dist/components/field/index.mjs

@@ -1,11 +1,44 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Field as Field$1 } from "@ark-ui/react/field";
 //#region src/components/field/index.tsx
-/** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
-* border-and-halo control, and quiet help text. The API is Ark's own —
+/** Field, dressed in the paper-and-ink system: a tracked label, a
+* border-and-halo control, and quiet help text. The parts —
 * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
 * RequiredIndicator. */
-const Field = Field$1;
+function FieldRoot(props) {
+	const id = useElementId("field", props);
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path for a simple text field; textarea, select, and
+* custom controls keep the anatomy. */
+function FieldFacade({ value, defaultValue, label, description, placeholder, disabled = false, invalid = false, required = false, onValueChange }) {
+	return /* @__PURE__ */ jsxs(FieldRoot, {
+		disabled,
+		invalid,
+		required,
+		children: [
+			label ? /* @__PURE__ */ jsx(Field$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Field$1.Input, {
+				placeholder,
+				defaultValue,
+				...value === void 0 ? {} : {
+					value,
+					onChange: (event) => onValueChange?.(event.target.value)
+				}
+			}),
+			description ? /* @__PURE__ */ jsx(Field$1.HelperText, { children: description }) : null
+		]
+	});
+}
+const Field = Object.assign(FieldFacade, {
+	...Field$1,
+	Root: FieldRoot
+});
 injectComponentStyle("field");
 //#endregion
 export { Field };

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

@@ -1,7 +1,22 @@
+import { ReactNode } from "react";
 import { Fieldset as Fieldset$1 } from "@ark-ui/react/fieldset";
 //#region src/components/fieldset/index.d.ts
-/** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
- * legend heading a column of fields. The API is Ark's own — Root, Legend,
- * HelperText, ErrorText. */
-export declare const Fieldset: typeof Fieldset$1;
+interface FieldsetFacadeProps {
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  children?: ReactNode;
+}
+/** The one-tag path: one label and optional description around the
+ * caller controls; compound or bespoke groups keep the anatomy. */
+declare function FieldsetFacade({ label, description, disabled, invalid, children }: FieldsetFacadeProps): import("react").JSX.Element;
+export declare const Fieldset: typeof FieldsetFacade & {
+  Root: typeof Fieldset$1.Root;
+  Context: (props: Fieldset$1.ContextProps) => ReactNode;
+  ErrorText: import("react").ForwardRefExoticComponent<Fieldset$1.ErrorTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  HelperText: import("react").ForwardRefExoticComponent<Fieldset$1.HelperTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Legend: import("react").ForwardRefExoticComponent<Fieldset$1.LegendProps & import("react").RefAttributes<HTMLLegendElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<Fieldset$1.RootProviderProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+};
 //#endregion