@bysages/react 0.3.1 → 0.4.1

package/dist/components/fieldset/index.mjs

@@ -1,10 +1,35 @@
-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 { Fieldset as Fieldset$1 } from "@ark-ui/react/fieldset";
 //#region src/components/fieldset/index.tsx
-/** 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,
+/** Fieldset, dressed in the paper-and-ink system: a song-serif
+* legend heading a column of fields. The parts — Root, Legend,
 * HelperText, ErrorText. */
-const Fieldset = Fieldset$1;
+function FieldsetRoot(props) {
+	const id = useElementId("fieldset", props);
+	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path: one label and optional description around the
+* caller controls; compound or bespoke groups keep the anatomy. */
+function FieldsetFacade({ label, description, disabled = false, invalid = false, children }) {
+	return /* @__PURE__ */ jsxs(FieldsetRoot, {
+		disabled,
+		invalid,
+		children: [
+			label ? /* @__PURE__ */ jsx(Fieldset$1.Legend, { children: label }) : null,
+			children,
+			description ? /* @__PURE__ */ jsx(Fieldset$1.HelperText, { children: description }) : null
+		]
+	});
+}
+const Fieldset = Object.assign(FieldsetFacade, {
+	...Fieldset$1,
+	Root: FieldsetRoot
+});
 injectComponentStyle("fieldset");
 //#endregion
 export { Fieldset };

package/dist/components/file-upload/index.d.mts

@@ -1,25 +1,45 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/index.d.ts
 type FileUploadRootProps = ComponentProps<typeof FileUpload$1.Root> & {
   /** One rung of the control-height ladder for the trigger. */
   size?: "sm" | "md" | "lg";
 };
-declare function FileUploadRoot({ size, ...rest }: FileUploadRootProps): import("react").JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): import("react").JSX.Element;
 /** The inner trigger repeats the click binding the dropzone already
  * owns, and no flavor of taming a nested button survives the audit —
  * assistive tech can still land on it. So the visual cue is a plain
  * span wearing the trigger props; the dropzone stays the one real
  * control, keyboard included. */
 declare function FileUploadTrigger(props: ComponentProps<typeof FileUpload$1.Trigger>): import("react").JSX.Element;
-/** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
- * dropzone that floods with subtle light on drag-over, and accepted files
- * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
- * Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
- * ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
- * Context. */
-export declare const FileUpload: Omit<typeof FileUpload$1, "Root" | "Trigger"> & {
+interface FileUploadFacadeProps {
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  maxFiles?: number;
+  size?: "sm" | "md" | "lg";
+  children?: ReactNode;
+}
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+ * rules, directories, and controlled files stay on the anatomy. */
+declare function FileUploadFacade({ label, placeholder, disabled, invalid, required, maxFiles, size }: FileUploadFacadeProps): import("react").JSX.Element;
+export declare const FileUpload: typeof FileUploadFacade & {
   Root: typeof FileUploadRoot;
   Trigger: typeof FileUploadTrigger;
+  ClearTrigger: import("react").ForwardRefExoticComponent<FileUpload$1.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Context: (props: FileUpload$1.ContextProps) => ReactNode;
+  Dropzone: import("react").ForwardRefExoticComponent<FileUpload$1.DropzoneProps & import("react").RefAttributes<HTMLDivElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<FileUpload$1.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Item: import("react").ForwardRefExoticComponent<FileUpload$1.ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+  ItemDeleteTrigger: import("react").ForwardRefExoticComponent<FileUpload$1.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  ItemGroup: import("react").ForwardRefExoticComponent<FileUpload$1.ItemGroupProps & import("react").RefAttributes<HTMLUListElement>>;
+  ItemName: import("react").ForwardRefExoticComponent<FileUpload$1.ItemNameProps & import("react").RefAttributes<HTMLDivElement>>;
+  ItemPreview: import("react").ForwardRefExoticComponent<FileUpload$1.ItemPreviewProps & import("react").RefAttributes<HTMLImageElement>>;
+  ItemPreviewImage: import("react").ForwardRefExoticComponent<FileUpload$1.ItemPreviewImageProps & import("react").RefAttributes<HTMLImageElement>>;
+  ItemSizeText: import("react").ForwardRefExoticComponent<FileUpload$1.ItemSizeTextProps & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<FileUpload$1.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+  RootProvider: import("react").ForwardRefExoticComponent<FileUpload$1.RootProviderProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion

package/dist/components/file-upload/index.mjs

@@ -1,10 +1,15 @@
-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 { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/index.tsx
-function FileUploadRoot({ size = "md", ...rest }) {
+function FileUploadRoot(props) {
+	const id = useElementId("file-upload", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(FileUpload$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
@@ -26,17 +31,48 @@ function FileUploadTrigger(props) {
 		})
 	});
 }
-/** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
-* dropzone that floods with subtle light on drag-over, and accepted files
-* as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
-* Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
-* ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
-* Context. */
-const FileUpload = {
+const fileIcon = iconNode("file", {
+	width: 16,
+	height: 16
+});
+const uploadIcon = iconNode("upload", {
+	width: 28,
+	height: 28
+});
+const closeIcon = iconNode("x", {
+	width: 14,
+	height: 14
+});
+/** The one-tag path: a labelled dropzone and its accepted slips; MIME
+* rules, directories, and controlled files stay on the anatomy. */
+function FileUploadFacade({ label, placeholder, disabled = false, invalid = false, required = false, maxFiles, size = "md" }) {
+	return /* @__PURE__ */ jsxs(FileUploadRoot, {
+		size,
+		disabled,
+		invalid,
+		required,
+		maxFiles,
+		children: [
+			label ? /* @__PURE__ */ jsx(FileUpload$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(FileUpload$1.Dropzone, { children: /* @__PURE__ */ jsxs(FileUploadTrigger, { children: [uploadIcon, placeholder ?? "Choose files"] }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.ItemGroup, { children: /* @__PURE__ */ jsx(FileUpload$1.Context, { children: (api) => api.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUpload$1.Item, {
+				file,
+				children: [
+					/* @__PURE__ */ jsx(FileUpload$1.ItemPreview, { children: fileIcon }),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemName, {}),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemSizeText, {}),
+					/* @__PURE__ */ jsx(FileUpload$1.ItemDeleteTrigger, { children: closeIcon })
+				]
+			}, file.name)) }) }),
+			/* @__PURE__ */ jsx(FileUpload$1.HiddenInput, {})
+		]
+	});
+}
+const FileUpload = Object.assign(FileUploadFacade, {
 	...FileUpload$1,
 	Root: FileUploadRoot,
 	Trigger: FileUploadTrigger
-};
+});
 injectComponentStyle("file-upload");
 //#endregion
 export { FileUpload };

package/dist/components/float-button/index.mjs

@@ -1,6 +1,6 @@
 import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
 import { Button } from "../button/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
 //#region src/components/float-button/index.tsx

package/dist/components/floating-panel/index.d.mts

@@ -1,9 +1,21 @@
+import { ReactNode } from "react";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/index.d.ts
-/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
- * popup vessel let loose — a draggable, resizable sheet whose header is the
- * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
- * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
- * Body. */
-export declare const FloatingPanel: typeof FloatingPanel$1;
+export interface FloatingPanelFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled, children, onOpenChange }: FloatingPanelFacadeProps): import("react").JSX.Element;
+declare namespace FloatingPanelFacade {
+  var displayName: string;
+}
+type FloatingPanelParts = typeof FloatingPanel$1;
+export declare const FloatingPanel: typeof FloatingPanelFacade & FloatingPanelParts;
 //#endregion

package/dist/components/floating-panel/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 { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 //#region src/components/floating-panel/index.tsx
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -6,7 +9,58 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
 * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
 * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
 * Body. */
-const FloatingPanel = FloatingPanel$1;
+function FloatingPanelRoot(props) {
+	const id = useElementId("floating-panel", props);
+	return /* @__PURE__ */ jsx(FloatingPanel$1.Root, {
+		...props,
+		id
+	});
+}
+const resizeAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"se",
+	"sw",
+	"nw"
+];
+function FloatingPanelFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(FloatingPanelRoot, {
+		disabled,
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(FloatingPanel$1.Trigger, { children: trigger ?? label }), /* @__PURE__ */ jsx(FloatingPanel$1.Positioner, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Content, { children: [
+			/* @__PURE__ */ jsx(FloatingPanel$1.DragTrigger, { children: /* @__PURE__ */ jsxs(FloatingPanel$1.Header, { children: [/* @__PURE__ */ jsx(FloatingPanel$1.Title, { children: label }), /* @__PURE__ */ jsxs(FloatingPanel$1.Control, { children: [
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "minimized",
+					children: iconNode("minus")
+				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.StageTrigger, {
+					stage: "maximized",
+					children: iconNode("maximize-2")
+				}),
+				/* @__PURE__ */ jsx(FloatingPanel$1.CloseTrigger, {
+					"aria-label": "Close",
+					children: iconNode("x")
+				})
+			] })] }) }),
+			/* @__PURE__ */ jsxs(FloatingPanel$1.Body, { children: [
+				description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+				content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+				children
+			] }),
+			resizeAxes.map((axis) => /* @__PURE__ */ jsx(FloatingPanel$1.ResizeTrigger, { axis }, axis))
+		] }) })]
+	});
+}
+FloatingPanelFacade.displayName = "SFloatingPanel";
+const FloatingPanel = Object.assign(FloatingPanelFacade, {
+	...FloatingPanel$1,
+	Root: FloatingPanelRoot
+});
 injectComponentStyle("floating-panel");
 //#endregion
 export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -1,2 +1,7 @@
-import { FocusTrap, FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
-export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };
+import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
+//#region src/components/focus-trap/index.d.ts
+export declare const FocusTrap: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>> & {
+  Root: import("react").ForwardRefExoticComponent<import("@ark-ui/react/focus-trap").FocusTrapProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export type { FocusTrapBaseProps, FocusTrapProps };

package/dist/components/focus-trap/index.mjs

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

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

@@ -1,2 +1,2 @@
-import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-uPyYiWaL.mjs";
+import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-PsgGWW3m.mjs";
 export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, useField, useForm };

package/dist/components/form/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, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { Field } from "@ark-ui/react/field";
@@ -13,7 +14,7 @@ function errorText(error) {
 	if (typeof error === "object" && "message" in error) return String(error.message);
 	return "";
 }
-function Form({ form, children, ...rest }) {
+function FormImpl({ form, children, ...rest }) {
 	injectComponentStyle("form");
 	injectComponentStyle("field");
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
@@ -31,7 +32,8 @@ function Form({ form, children, ...rest }) {
 		})
 	});
 }
-function FormField({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
+const Form = withSelfRoot(FormImpl);
+function FormFieldImpl({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
 	const injected = useContext(FormContext);
 	const form = formProp ?? injected;
 	const { className: klass, style, ...fieldOptions } = rest;
@@ -63,5 +65,6 @@ function FormField({ form: formProp, name, label, hint, required = false, invali
 		children: assemble
 	});
 }
+const FormField = withSelfRoot(FormFieldImpl);
 //#endregion
 export { Form, FormField, useField, useForm };

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

@@ -1,10 +1,6 @@
+import { FrameProps } from "@ark-ui/react/frame";
 //#region src/components/frame/index.d.ts
-/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
- * iframe whose body teleports the children and whose `head` prop
- * carries extra <head> nodes — styles the child renders must travel
- * through that prop. The frame measures its content and grows to
- * fit; the vessel's border and paper belong to the consumer, since
- * an iframe carries no anatomy attributes for the core stylesheet
- * to hook. The API is Ark's own. */
-export declare const Frame: import("react").ForwardRefExoticComponent<import("@ark-ui/react/frame").FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+export declare const Frame: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>> & {
+  Root: import("react").ForwardRefExoticComponent<FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+};
 //#endregion

package/dist/components/frame/index.mjs

@@ -1,3 +1,7 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Frame as Frame$1 } from "@ark-ui/react/frame";
 //#region src/components/frame/index.tsx
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
@@ -7,6 +11,14 @@ import { Frame as Frame$1 } from "@ark-ui/react/frame";
 * fit; the vessel's border and paper belong to the consumer, since
 * an iframe carries no anatomy attributes for the core stylesheet
 * to hook. The API is Ark's own. */
-const Frame = Frame$1;
+const FrameRoot = forwardRef(function FrameRoot(props, ref) {
+	const id = useElementId("frame", props);
+	return /* @__PURE__ */ jsx(Frame$1, {
+		ref,
+		...props,
+		id
+	});
+});
+const Frame = withSelfRoot(FrameRoot);
 //#endregion
 export { Frame };

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

@@ -9,5 +9,8 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
    * and the container decides how many fit. */
   minChildWidth?: string;
 }
-export declare function Grid({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+declare function GridImpl({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+export declare const Grid: typeof GridImpl & {
+  Root: typeof GridImpl;
+};
 //#endregion

package/dist/components/grid/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";
 //#region src/components/grid/index.tsx
 /** The same named steps of the space ramp the stack uses — one
@@ -11,7 +12,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
+function GridImpl({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 	injectComponentStyle("grid");
 	const style = {
 		...rest.style,
@@ -27,5 +28,6 @@ function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
 		"data-autofill": minChildWidth != null ? "" : void 0
 	});
 }
+const Grid = withSelfRoot(GridImpl);
 //#endregion
 export { Grid };

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

@@ -1,7 +1,5 @@
 //#region src/components/highlight/index.d.ts
-/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
- * strokes of pigment on the page — a quiet tint of the accent behind the
- * ink, never neon. The component renders bare <mark> elements, so the
- * document-wide mark default carries the look. The API is Ark's own. */
-export declare const Highlight: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+export declare const Highlight: ((props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element) & {
+  Root: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+};
 //#endregion

package/dist/components/highlight/index.mjs

@@ -1,11 +1,16 @@
-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 { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
 //#region src/components/highlight/index.tsx
 /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
 * strokes of pigment on the page — a quiet tint of the accent behind the
 * ink, never neon. The component renders bare <mark> elements, so the
 * document-wide mark default carries the look. The API is Ark's own. */
-const Highlight = Highlight$1;
+function HighlightRoot(props) {
+	return /* @__PURE__ */ jsx(Highlight$1, { ...props });
+}
+const Highlight = withSelfRoot(HighlightRoot);
 injectComponentStyle("highlight");
 //#endregion
 export { Highlight };

package/dist/components/hover-card/index.d.mts

@@ -1,7 +1,23 @@
+import { ReactNode } from "react";
 import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/index.d.ts
-/** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
- * that dissolves in over a quiet inline link, never stealing focus. The
- * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-export declare const HoverCard: typeof HoverCard$1;
+type HoverCardPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface HoverCardFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: HoverCardPlacement;
+  children?: ReactNode;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: HoverCardFacadeProps): import("react").JSX.Element;
+declare namespace HoverCardFacade {
+  var displayName: string;
+}
+type HoverCardParts = typeof HoverCard$1;
+export declare const HoverCard: typeof HoverCardFacade & HoverCardParts;
 //#endregion

package/dist/components/hover-card/index.mjs

@@ -1,10 +1,41 @@
-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 { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
 //#region src/components/hover-card/index.tsx
 /** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
 * that dissolves in over a quiet inline link, never stealing focus. The
 * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-const HoverCard = HoverCard$1;
+function HoverCardRoot(props) {
+	const id = useElementId("hover-card", props);
+	return /* @__PURE__ */ jsx(HoverCard$1.Root, {
+		...props,
+		id
+	});
+}
+function HoverCardFacade({ open, defaultOpen, trigger, content, label, description, disabled = false, placement, children, onOpenChange }) {
+	return /* @__PURE__ */ jsxs(HoverCardRoot, {
+		...placement === void 0 ? {} : { positioning: { placement } },
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		onOpenChange: (details) => onOpenChange?.(details.open),
+		children: [/* @__PURE__ */ jsx(HoverCard$1.Trigger, {
+			disabled,
+			children: trigger
+		}), /* @__PURE__ */ jsx(HoverCard$1.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard$1.Content, { children: [
+			/* @__PURE__ */ jsx(HoverCard$1.Arrow, { children: /* @__PURE__ */ jsx(HoverCard$1.ArrowTip, {}) }),
+			/* @__PURE__ */ jsx("h3", { children: label }),
+			description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+			content ? /* @__PURE__ */ jsx("p", { children: content }) : null,
+			children
+		] }) })]
+	});
+}
+HoverCardFacade.displayName = "SHoverCard";
+const HoverCard = Object.assign(HoverCardFacade, {
+	...HoverCard$1,
+	Root: HoverCardRoot
+});
 injectComponentStyle("hover-card");
 //#endregion
 export { HoverCard };

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

@@ -1,11 +1,11 @@
-import { HTMLAttributes } from "react";
 import { IconifyIcon } from "@bysages/core/icons";
+import { HTMLAttributes } from "react";
 //#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
- * size of its own. Bring a glyph through `glyph` (a direct registry
- * import), through `name` from the whitelisted registry, or bring your
- * own; the well renders either. */
+ * size of its own. Bring an `@bysages/icons` export or any other
+ * IconifyIcon through `glyph`, a built-in core-registry name through
+ * `name`, or your own svg; the well renders either. */
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** Size steps follow the surrounding font size; `inherit` is the
    * default — one em of the text the icon sits in. */
@@ -13,12 +13,14 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   /** The accessible name. Without it the icon is presentation-only and
    * hidden from the accessibility tree. */
   label?: string;
-  /** A glyph from the registry, imported directly. Ignored when children
+  /** An `@bysages/icons` export or any IconifyIcon. Ignored when children
    * are given — an explicit glyph always wins. */
   glyph?: IconifyIcon;
-  /** A registry name — only the whitelisted set the wrappers draw
-   * themselves. Ignored when `glyph` or children are given. */
+  /** A built-in name from the curated core registry. Ignored when `glyph` or children are given. */
   name?: string;
 }
-export declare function Icon({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
+declare function IconImpl({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
+export declare const Icon: typeof IconImpl & {
+  Root: typeof IconImpl;
+};
 //#endregion

package/dist/components/icon/index.mjs

@@ -1,11 +1,12 @@
-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 { getIcon } from "@bysages/core/icons";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/icon/index.tsx
-function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
+function IconImpl({ size = "inherit", label, glyph, name, children, ...rest }) {
 	injectComponentStyle("icon");
 	const resolved = glyph ?? (name && children == null ? getIcon(name) : void 0);
-	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the core default registry; pass it explicitly as glyph`);
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		role: label != null ? "img" : void 0,
@@ -22,5 +23,6 @@ function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
 		}) : null)
 	});
 }
+const Icon = withSelfRoot(IconImpl);
 //#endregion
 export { Icon };

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

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from "react";
 //#region src/components/image/index.d.ts
 /** A framed picture: while the source loads, the frame keeps the
  * skeleton's breath; the picture dissolves in when it lands; a broken
- * source leaves the `fallback` — or the placeholder glyph when the
+ * source leaves the `fallback` — or the placeholder icon when the
  * caller has nothing local to say. The frame's size is the consumer's
  * to give. */
 export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError" | "onLoad"> {
@@ -19,5 +19,8 @@ export interface ImageProps extends Omit<HTMLAttributes<HTMLElement>, "onError"
   /** Shown in place of the picture when the source breaks. */
   fallback?: ReactNode;
 }
-export declare function Image({ src, alt, fit, loading, width, height, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+declare function ImageImpl({ src, alt, fit, loading, width, height, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+export declare const Image: typeof ImageImpl & {
+  Root: typeof ImageImpl;
+};
 //#endregion