@bysages/solid 0.3.1 → 0.4.0

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

@@ -1,3 +1,4 @@
+import { Dialog } from "../dialog/index.mjs";
 //#region src/components/command/index.d.ts
 export interface CommandEntry {
   label: string;
@@ -8,6 +9,7 @@ export interface CommandEntry {
   hint?: string;
 }
 export interface CommandProps {
+  id?: string;
   /** The commands on offer, grouped as they arrive. */
   items?: CommandEntry[];
   placeholder?: string;
@@ -39,5 +41,6 @@ export interface CommandProps {
  * so the combobox renders no separate popup and the machine's content
  * grafts onto the sheet's list.
  */
-export declare function Command(props: CommandProps): import("solid-js").JSX.Element;
+declare function CommandImpl(props: CommandProps): import("solid-js").JSX.Element;
+export declare const Command: typeof CommandImpl & typeof Dialog;
 //#endregion

package/dist/components/command/index.mjs

@@ -1,4 +1,7 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { Dialog as Dialog$1 } from "../dialog/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, createEffect, createSignal, splitProps } from "solid-js";
@@ -64,11 +67,12 @@ function Row(props) {
 * so the combobox renders no separate popup and the machine's content
 * grafts onto the sheet's list.
 */
-function Command(props) {
+function CommandImpl(props) {
 	injectComponentStyle("command");
 	injectComponentStyle("dialog");
 	const messages = useComponentMessages();
 	const [own, rest] = splitProps(props, [
+		"id",
 		"items",
 		"placeholder",
 		"open",
@@ -79,6 +83,7 @@ function Command(props) {
 		"onOpenChange",
 		"onInputValueChange"
 	]);
+	const id = useElementId("command", () => props.id);
 	const [internalOpen, setInternalOpen] = createSignal(false);
 	const [listOpen, setListOpen] = createSignal(true);
 	let fieldText = "";
@@ -118,6 +123,9 @@ function Command(props) {
 		}));
 	};
 	return createComponent(Dialog.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get open() {
 			return open();
 		},
@@ -140,6 +148,9 @@ function Command(props) {
 							}
 						}], true);
 						insert(_el$7, createComponent(Combobox.Root, {
+							get id() {
+								return `${id()}-palette`;
+							},
 							get collection() {
 								return collection();
 							},
@@ -257,5 +268,6 @@ function Command(props) {
 		}
 	}));
 }
+const Command = defineFamily(CommandImpl, Dialog$1);
 //#endregion
 export { Command };

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

@@ -13,5 +13,7 @@ export interface CommentProps extends JSX.HTMLAttributes<HTMLElement> {
  * the body carries the byline from `author` and `datetime`, the ink is
  * the children, and `actions` is the row of answers.
  */
-export declare function Comment(props: CommentProps): JSX.Element;
+export declare const Comment: ((props: CommentProps) => JSX.Element) & {
+  Root: (props: CommentProps) => JSX.Element;
+};
 //#endregion

package/dist/components/comment/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
@@ -13,7 +14,7 @@ var _tmpl$6 = /* @__PURE__ */ template(`<article><div data-scope=comment data-pa
 * the body carries the byline from `author` and `datetime`, the ink is
 * the children, and `actions` is the row of answers.
 */
-function Comment(props) {
+const Comment = withSelfRoot(function Comment(props) {
 	injectComponentStyle("comment");
 	const [own, rest] = splitProps(props, [
 		"author",
@@ -96,6 +97,6 @@ function Comment(props) {
 		}
 	}), _el$11);
 	return _el$;
-}
+});
 //#endregion
 export { Comment };

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

@@ -47,5 +47,7 @@ export interface ConfigProviderProps extends JSX.HTMLAttributes<HTMLDivElement>
  * descendants through `useConfig`, so interactive behavior (formatting,
  * messages) and visual theming stay one decision.
  */
-export declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
+export declare const ConfigProvider: ((props: ConfigProviderProps) => JSX.Element) & {
+  Root: (props: ConfigProviderProps) => JSX.Element;
+};
 //#endregion

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

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { createComponent, insert, spread, template } from "@solidjs/web";
 import { createContext, splitProps, useContext } from "solid-js";
 //#region src/components/config-provider/index.tsx
@@ -18,7 +19,7 @@ function useConfig() {
 * descendants through `useConfig`, so interactive behavior (formatting,
 * messages) and visual theming stay one decision.
 */
-function ConfigProvider(props) {
+const ConfigProvider = withSelfRoot(function ConfigProvider(props) {
 	const [own, rest] = splitProps(props, [
 		"density",
 		"scene",
@@ -64,6 +65,6 @@ function ConfigProvider(props) {
 			return _el$;
 		}
 	});
-}
+});
 //#endregion
 export { ConfigContextKey, ConfigProvider, useConfig };

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

@@ -9,5 +9,7 @@ export interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * than the measure. */
   padding?: boolean;
 }
-export declare function Container(props: ContainerProps): JSX.Element;
+export declare const Container: ((props: ContainerProps) => JSX.Element) & {
+  Root: (props: ContainerProps) => JSX.Element;
+};
 //#endregion

package/dist/components/container/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/container/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function Container(props) {
+const Container = withSelfRoot(function Container(props) {
 	injectComponentStyle("container");
 	const [own, rest] = splitProps(props, ["size", "padding"]);
 	var _el$ = _tmpl$();
@@ -18,6 +19,6 @@ function Container(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Container };

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

@@ -14,5 +14,7 @@ export interface DataViewProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * renderItem, the view lays the records out as a ledger or a lattice
  * and — when a page size is given — pages them with the pagination
  * family's own parts rather than a second implementation. */
-export declare function DataView(props: DataViewProps): JSX.Element;
+export declare const DataView: ((props: DataViewProps) => JSX.Element) & {
+  Root: (props: DataViewProps) => JSX.Element;
+};
 //#endregion

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

@@ -1,8 +1,9 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 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";
+import { For, Show, createSignal, 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><!>`);
@@ -11,9 +12,8 @@ var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=data-view data-part=cell
 * 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) {
+const DataView = withSelfRoot(function DataView(props) {
 	injectComponentStyle("data-view");
-	const uid = createUniqueId();
 	const [own, rest] = splitProps(props, [
 		"items",
 		"layout",
@@ -30,8 +30,7 @@ function DataView(props) {
 	var _el$4 = _el$2.nextSibling;
 	spread(_el$, [rest, {
 		"data-scope": "data-view",
-		"data-part": "root",
-		"data-uid": uid
+		"data-part": "root"
 	}], true);
 	insert(_el$, () => {
 		return own.header;
@@ -111,6 +110,6 @@ function DataView(props) {
 		setAttribute(_el$2, "data-layout", _v$);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { DataView };

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

@@ -9,7 +9,7 @@ type DateInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function DateInputRoot(props: DateInputRootProps & DateInputOwnProps): import("solid-js").JSX.Element;
-export declare const DateInput: Omit<typeof DateInput$1, "Root"> & {
+export declare const DateInput: typeof DateInputRoot & Omit<typeof DateInput$1, "Root"> & {
   Root: typeof DateInputRoot;
 };
 //#endregion

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

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ 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 id = useElementId("date-input", () => rest.id);
+	return createComponent(DateInput$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const DateInput = {
+const DateInput = defineFamily(DateInputRoot, {
 	...DateInput$1,
 	Root: DateInputRoot
-};
+});
 injectComponentStyle("date-input");
 //#endregion
 export { DateInput };

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

@@ -11,7 +11,7 @@ type DatePickerOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function DatePickerRoot(props: DatePickerRootProps & DatePickerOwnProps): import("solid-js").JSX.Element;
-export declare const DatePicker: Omit<typeof DatePicker$1, "Root"> & {
+export declare const DatePicker: typeof DatePickerRoot & Omit<typeof DatePicker$1, "Root"> & {
   Root: typeof DatePickerRoot;
 };
 //#endregion

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

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ 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 id = useElementId("date-picker", () => rest.id);
+	return createComponent(DatePicker$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const DatePicker = {
+const DatePicker = defineFamily(DatePickerRoot, {
 	...DatePicker$1,
 	Root: DatePickerRoot
-};
+});
 injectComponentStyle("date-picker");
 //#endregion
 export { DatePicker };

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

@@ -12,5 +12,7 @@ export interface DeferredContentProps extends JSX.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(props: DeferredContentProps): JSX.Element;
+export declare const DeferredContent: ((props: DeferredContentProps) => JSX.Element) & {
+  Root: (props: DeferredContentProps) => JSX.Element;
+};
 //#endregion

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

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, ref, spread, template } from "@solidjs/web";
 import { Show, createSignal, onCleanup, onMount, splitProps } from "solid-js";
@@ -7,7 +8,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 * 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) {
+const DeferredContent = withSelfRoot(function DeferredContent(props) {
 	injectComponentStyle("deferred-content");
 	const [own, rest] = splitProps(props, [
 		"threshold",
@@ -47,6 +48,6 @@ function DeferredContent(props) {
 		}
 	}));
 	return _el$;
-}
+});
 //#endregion
 export { DeferredContent };

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

@@ -1,5 +1,11 @@
 import { JSX } from "solid-js";
 //#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
@@ -12,6 +18,7 @@ export interface DescriptionsRootProps extends JSX.HTMLAttributes<HTMLDListEleme
   bordered?: boolean;
   /** Pairs across the grid: one ledger per column. */
   column?: number;
+  items?: DescriptionsItemData[];
 }
 declare function Root(props: DescriptionsRootProps): JSX.Element;
 declare function Item(props: JSX.HTMLAttributes<HTMLDivElement> & {

package/dist/components/descriptions/index.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/descriptions/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<dl>`);
@@ -9,6 +9,8 @@ function Root(props) {
 		"layout",
 		"bordered",
 		"column",
+		"items",
+		"children",
 		"style"
 	]);
 	var _el$ = _tmpl$();
@@ -27,7 +29,10 @@ function Root(props) {
 		get "data-bordered"() {
 			return own.bordered || void 0;
 		}
-	}], false);
+	}], true);
+	insert(_el$, () => {
+		return own.children ?? renderItems(own.items);
+	});
 	return _el$;
 }
 function part(name, tag) {
@@ -58,6 +63,20 @@ function Item(props) {
 }
 const Term = part("Term", "dt");
 const Detail = part("Detail", "dd");
+function renderItems(items) {
+	return items?.map((item) => createComponent(Item, {
+		get span() {
+			return item.span;
+		},
+		get children() {
+			return [createComponent(Term, { get children() {
+				return item.term;
+			} }), createComponent(Detail, { get children() {
+				return item.detail;
+			} })];
+		}
+	}));
+}
 const Descriptions = Object.assign(Root, {
 	Root,
 	Item,

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

@@ -1,9 +1,25 @@
+import { ComponentProps, JSX } from "solid-js";
 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;
+declare function DialogRoot(props: ComponentProps<typeof Dialog$1.Root>): JSX.Element;
+export interface DialogFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label?: string;
+  description?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function DialogFacade(props: DialogFacadeProps): JSX.Element;
+export declare const Dialog: typeof DialogFacade & Omit<typeof Dialog$1, "Root"> & {
+  Root: typeof DialogRoot;
+};
 //#endregion
 export type { DialogOpenChangeDetails };

package/dist/components/dialog/index.mjs

@@ -1,11 +1,93 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { Dialog as Dialog$1 } from "@ark-ui/solid/dialog";
-//#region src/components/dialog/index.ts
+//#region src/components/dialog/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<p>`);
 /** 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.id);
+	return createComponent$1(Dialog$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function DialogFacade(props) {
+	injectComponentStyle("dialog");
+	const title = () => props.label ?? props.trigger;
+	return createComponent(DialogRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [
+				createComponent(Dialog$1.Trigger, {
+					get disabled() {
+						return props.disabled;
+					},
+					get children() {
+						return title() ?? "Open";
+					}
+				}),
+				createComponent(Dialog$1.Backdrop, {}),
+				createComponent(Dialog$1.Positioner, { get children() {
+					return createComponent(Dialog$1.Content, { get children() {
+						return [
+							createComponent(Dialog$1.Title, { get children() {
+								return title();
+							} }),
+							createComponent(Show, {
+								get when() {
+									return props.description;
+								},
+								get children() {
+									return createComponent(Dialog$1.Description, { get children() {
+										return props.description;
+									} });
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return props.content;
+								},
+								get children() {
+									var _el$ = _tmpl$();
+									insert(_el$, () => {
+										return props.content;
+									});
+									return _el$;
+								}
+							}),
+							memo(() => {
+								return props.children;
+							}),
+							createComponent(Dialog$1.CloseTrigger, {
+								"aria-label": "Close",
+								get children() {
+									return iconNode("x", {
+										width: 14,
+										height: 14
+									});
+								}
+							})
+						];
+					} });
+				} })
+			];
+		}
+	}));
+}
+const Dialog = defineFamily(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/solid/download-trigger";
-export { DownloadTrigger, type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };
+import { DownloadTrigger as DownloadTrigger$1, DownloadTriggerBaseProps, DownloadTriggerProps, DownloadableData, UseDownloadProps, UseDownloadReturn, useDownload } from "@ark-ui/solid/download-trigger";
+//#region src/components/download-trigger/index.d.ts
+export declare const DownloadTrigger: typeof DownloadTrigger$1 & {
+  Root: typeof DownloadTrigger$1;
+};
+//#endregion
+export { type DownloadTriggerBaseProps, type DownloadTriggerProps, type DownloadableData, type UseDownloadProps, type UseDownloadReturn, useDownload };

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

@@ -1,2 +1,9 @@
-import { DownloadTrigger, useDownload } from "@ark-ui/solid/download-trigger";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { DownloadTrigger as DownloadTrigger$1, useDownload } from "@ark-ui/solid/download-trigger";
+//#region src/components/download-trigger/index.ts
+/** Trigger a client-side download of in-memory data from a plain
+* element — the headless counterpart to a save button. Also exposed:
+* the primitive beneath the component, for custom triggers. */
+const DownloadTrigger = withSelfRoot(DownloadTrigger$1);
+//#endregion
 export { DownloadTrigger, useDownload };

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

@@ -1,3 +1,4 @@
+import { ComponentProps, JSX } from "solid-js";
 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
@@ -5,5 +6,20 @@ import { Drawer as Drawer$1 } from "@ark-ui/solid/drawer";
  * 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;
+declare function DrawerRoot(props: ComponentProps<typeof Drawer$1.Root>): JSX.Element;
+export interface DrawerFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function DrawerFacade(props: DrawerFacadeProps): JSX.Element;
+export declare const Drawer: typeof DrawerFacade & Omit<typeof Drawer$1, "Root"> & {
+  Root: typeof DrawerRoot;
+};
 //#endregion