@soxa-ui/react 0.0.0-stage → 0.3.0-beta.1

package/dist/components/date-picker/setup.component.js

@@ -0,0 +1,26 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { useRootElement } from "../../adapter/runtime/useRootElement.js";
+import { DatePickerDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/date-picker/setup.component.ts
+/**
+* The calendar and its engine are core instances of the current assembly; the
+* markup hands them over whole and reads a mode's fields from the instance in
+* that mode's branch — the core creates a field when its mode needs it:
+* AGENTS.md (React), «Пересобранный инстанс и `key`».
+*/
+function useSetupDatePicker(props) {
+	const binding = useComponent((create, elevator) => create(DatePickerDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator }), props);
+	const picker = binding.ctrl;
+	return {
+		...binding,
+		rootElement: useRootElement(binding.root),
+		calendar: picker.calendar,
+		engine: picker.engine
+	};
+}
+//#endregion
+export { useSetupDatePicker };

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { DialogProps } from './base.component';
+/**
+ * Dialog — модальное окно: подложка и панель — соседи в телепорте (docs/agents/overlay.md,
+ * «Слой оверлея»). `tabIndex={-1}` панели перекрывают набор ядра и атрибуты потребителя.
+ */
+export declare function Dialog(props: DialogProps): ReactElement | null;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,88 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toRootLayout, toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { useClickAction } from "../../adapter/runtime/useClickAction.js";
+import { Teleport } from "../../adapter/runtime/Teleport.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { useSetupDialog } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialog/Dialog.tsx
+var CloseIcon = roleIcon("close");
+var MaximizeIcon = roleIcon("arrowsOutward");
+var RestoreIcon = roleIcon("arrowsInward");
+/**
+* Dialog — модальное окно: подложка и панель — соседи в телепорте (docs/agents/overlay.md,
+* «Слой оверлея»). `tabIndex={-1}` панели перекрывают набор ядра и атрибуты потребителя.
+*/
+function Dialog(props) {
+	const { ctrl, ref, forwardProps, state } = useSetupDialog(props);
+	const toggleMaximized = useClickAction(() => ctrl.toggleMaximized());
+	const close = useClickAction(() => ctrl.requestClose("button"));
+	const { rendered, tag, target, visible, attrs, aria, dataset, titleAria, bodyAria, closable, closeAria, maximizable, maximizeAria, maximized, backdropDataset, layout_backdropStyles, dismiss_ownerAttribute } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	return /* @__PURE__ */ jsxs(Teleport, {
+		to: target,
+		children: [/* @__PURE__ */ jsx("div", {
+			...toAriaProps(backdropDataset),
+			...toRootLayout({
+				layout_styles: layout_backdropStyles,
+				visible
+			}, { className: "so-dialog__backdrop" })
+		}), /* @__PURE__ */ jsxs(Tag, {
+			tabIndex: -1,
+			...toRootProps(ref, state, [
+				attrs,
+				aria,
+				dataset,
+				dismiss_ownerAttribute
+			], forwardProps),
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "so-dialog__title",
+					...toAriaProps(titleAria),
+					children: renderSlot(props.title)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "so-dialog__body",
+					...toAriaProps(bodyAria),
+					children: renderSlot(props.children)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "so-dialog__footer",
+					children: renderSlot(props.footer)
+				}),
+				maximizable ? /* @__PURE__ */ jsx(Button, {
+					embedded: "dialog.maximize",
+					type: "button",
+					className: "so-dialog__maximize",
+					ref: toggleMaximized,
+					...toAriaProps(maximizeAria),
+					children: maximized ? renderSlot(props["restore-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+						embedded: "dialog.restore-icon",
+						tag: RestoreIcon
+					}) : renderSlot(props["maximize-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+						embedded: "dialog.maximize-icon",
+						tag: MaximizeIcon
+					})
+				}) : null,
+				closable ? /* @__PURE__ */ jsx(Button, {
+					embedded: "dialog.close",
+					type: "button",
+					className: "so-dialog__close",
+					ref: close,
+					...toAriaProps(closeAria),
+					children: renderSlot(props["close-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+						embedded: "dialog.close-icon",
+						tag: CloseIcon
+					})
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { Dialog };

package/dist/components/dialog/base.component.d.ts

@@ -0,0 +1,6 @@
+import type { IDialog } from '@soxa-ui/core';
+import type { DialogDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DialogEventProps = EventProps<typeof DialogDescriptor>;
+/** Пропсы Dialog: атрибуты — панели, у подложки их нет. */
+export type DialogProps = UseDomProps<typeof DialogDescriptor, IDialog, DialogEventProps>;

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

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { Dialog } from './Dialog';

package/dist/components/dialog/setup.component.d.ts

@@ -0,0 +1,29 @@
+import type { DialogProps } from './base.component';
+export declare function useSetupDialog(props: DialogProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDialog, {
+    props: object & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {
+        hideOutside_enabled?: boolean | undefined;
+    } & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+    } & {} & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "scrollLock:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "layout:offset:before": (e: import("@soxa-ui/plugins").TDialogOffsetEvent) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+        readonly layout_backdropStyles: Record<string, string | number>;
+    } & {} & {};
+}>, DialogProps>;

package/dist/components/dialog/setup.component.js

@@ -0,0 +1,12 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { DialogDescriptor } from "@soxa-ui/setup";
+//#region src/components/dialog/setup.component.ts
+function useSetupDialog(props) {
+	return useComponent((create) => create(DialogDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}), props);
+}
+//#endregion
+export { useSetupDialog };

package/dist/components/drag-and-drop/DragAndDrop.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { DragAndDropProps } from './base.component';
+/** DragAndDrop — перестановка элементов коллекций жестом; своего узла нет, только слой лифта. */
+export declare function DragAndDrop(props: DragAndDropProps): ReactElement;

package/dist/components/drag-and-drop/DragAndDrop.js

@@ -0,0 +1,16 @@
+"use client";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { useSetupDragAndDrop } from "./setup.component.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/drag-and-drop/DragAndDrop.tsx
+/** DragAndDrop — перестановка элементов коллекций жестом; своего узла нет, только слой лифта. */
+function DragAndDrop(props) {
+	const { layer } = useSetupDragAndDrop(props);
+	return /* @__PURE__ */ jsx(Elevate, {
+		layer,
+		children: renderSlot(props.children)
+	});
+}
+//#endregion
+export { DragAndDrop };

package/dist/components/drag-and-drop/base.component.d.ts

@@ -0,0 +1,6 @@
+import type { IDragAndDrop } from '@soxa-ui/core';
+import type { DragAndDropDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type DragAndDropEventProps = EventProps<typeof DragAndDropDescriptor>;
+/** Пропсы DragAndDrop — без атрибутов DOM: своего узла у обёртки нет. */
+export type DragAndDropProps = UseProps<typeof DragAndDropDescriptor, IDragAndDrop, DragAndDropEventProps>;

package/dist/components/drag-and-drop/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { DragAndDrop } from './DragAndDrop';

package/dist/components/drag-and-drop/setup.component.d.ts

@@ -0,0 +1,6 @@
+import type { DragAndDropProps } from './base.component';
+export declare function useSetupDragAndDrop(props: DragAndDropProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDragAndDrop, {
+    props: object;
+    events: object;
+    outputs: object;
+}>, DragAndDropProps>;

package/dist/components/drag-and-drop/setup.component.js

@@ -0,0 +1,12 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { DragAndDropDescriptor, TDragAndDropExtension } from "@soxa-ui/setup";
+//#region src/components/drag-and-drop/setup.component.ts
+function useSetupDragAndDrop(props) {
+	return useComponent((create, elevator) => create(DragAndDropDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TDragAndDropExtension, { elevator }), props);
+}
+//#endregion
+export { useSetupDragAndDrop };

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { DrawerProps } from './base.component';
+/**
+ * Drawer — выезжающая панель: подложка и панель, как у Dialog; `contained`
+ * выключает телепорт (AGENTS.md (React), «Teleport»).
+ */
+export declare function Drawer(props: DrawerProps): ReactElement | null;

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,75 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toRootLayout, toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { useClickAction } from "../../adapter/runtime/useClickAction.js";
+import { Teleport } from "../../adapter/runtime/Teleport.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { useSetupDrawer } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/drawer/Drawer.tsx
+var CloseIcon = roleIcon("close");
+/**
+* Drawer — выезжающая панель: подложка и панель, как у Dialog; `contained`
+* выключает телепорт (AGENTS.md (React), «Teleport»).
+*/
+function Drawer(props) {
+	const { ctrl, ref, forwardProps, state } = useSetupDrawer(props);
+	const close = useClickAction(() => ctrl.requestClose("button"));
+	const { rendered, tag, target, contained, visible, attrs, aria, dataset, titleAria, closable, closeAria, handleRendered, backdropDataset, layout_backdropStyles, dismiss_ownerAttribute } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	return /* @__PURE__ */ jsxs(Teleport, {
+		to: target,
+		disabled: contained,
+		children: [/* @__PURE__ */ jsx("div", {
+			...toAriaProps(backdropDataset),
+			...toRootLayout({
+				layout_styles: layout_backdropStyles,
+				visible
+			}, { className: "so-drawer__backdrop" })
+		}), /* @__PURE__ */ jsxs(Tag, {
+			tabIndex: -1,
+			...toRootProps(ref, state, [
+				attrs,
+				aria,
+				dataset,
+				dismiss_ownerAttribute
+			], forwardProps),
+			children: [
+				handleRendered ? /* @__PURE__ */ jsx("div", {
+					className: "so-drawer__handle",
+					"aria-hidden": "true"
+				}) : null,
+				/* @__PURE__ */ jsx("h2", {
+					className: "so-drawer__title",
+					...toAriaProps(titleAria),
+					children: renderSlot(props.title)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "so-drawer__body",
+					children: renderSlot(props.children)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "so-drawer__footer",
+					children: renderSlot(props.footer)
+				}),
+				closable ? /* @__PURE__ */ jsx(Button, {
+					embedded: "drawer.close",
+					type: "button",
+					className: "so-drawer__close",
+					ref: close,
+					...toAriaProps(closeAria),
+					children: renderSlot(props["close-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+						embedded: "drawer.close-icon",
+						tag: CloseIcon
+					})
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { Drawer };

package/dist/components/drawer/base.component.d.ts

@@ -0,0 +1,6 @@
+import type { IDrawer } from '@soxa-ui/core';
+import type { DrawerDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DrawerEventProps = EventProps<typeof DrawerDescriptor>;
+/** Пропсы Drawer: атрибуты — панели, у подложки их нет. */
+export type DrawerProps = UseDomProps<typeof DrawerDescriptor, IDrawer, DrawerEventProps>;

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

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { Drawer } from './Drawer';

package/dist/components/drawer/setup.component.d.ts

@@ -0,0 +1,29 @@
+import type { DrawerProps } from './base.component';
+export declare function useSetupDrawer(props: DrawerProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDrawer, {
+    props: object & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {
+        hideOutside_enabled?: boolean | undefined;
+    } & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {
+        scrollLock_enabled?: boolean | undefined;
+    } & {} & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+    } & {} & {
+        "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "scrollLock:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+        readonly layout_backdropStyles: Record<string, string | number>;
+    } & {} & {} & {} & {};
+}>, DrawerProps>;

package/dist/components/drawer/setup.component.js

@@ -0,0 +1,12 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { DrawerDescriptor } from "@soxa-ui/setup";
+//#region src/components/drawer/setup.component.ts
+function useSetupDrawer(props) {
+	return useComponent((create) => create(DrawerDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}), props);
+}
+//#endregion
+export { useSetupDrawer };

package/dist/components/field/Field.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { FieldProps } from './base.component';
+/** Field — поле формы вокруг контрола: docs/agents/patterns.md, «Готовые паттерны». */
+export declare function Field(props: FieldProps): ReactElement | null;

package/dist/components/field/Field.js

@@ -0,0 +1,58 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { Icon } from "../icon/Icon.js";
+import { useSetupField } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/field/Field.tsx
+/** Значок ошибки — компонент на роль: `tag` у Icon — корень, а не роль. */
+var ErrorGlyph = roleIcon("error");
+/** Field — поле формы вокруг контрола: docs/agents/patterns.md, «Готовые паттерны». */
+function Field(props) {
+	const { ref, forwardProps, state, layer } = useSetupField(props);
+	const { rendered, tag, label, helper, error, helperRendered, errorRendered, labelAria, helperAria, errorAria, attrs, aria, dataset } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx(tag, {
+		...toRootProps(ref, state, [
+			attrs,
+			aria,
+			dataset
+		], forwardProps),
+		children: /* @__PURE__ */ jsxs(Elevate, {
+			layer,
+			children: [
+				label ? /* @__PURE__ */ jsx("label", {
+					className: "so-field__label",
+					...toAriaProps(labelAria),
+					children: renderSlot(props["label-content"]) ?? label
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "so-field__control",
+					children: renderSlot(props.children)
+				}),
+				helperRendered ? /* @__PURE__ */ jsx("div", {
+					className: "so-field__helper",
+					...toAriaProps(helperAria),
+					children: renderSlot(props["helper-content"]) ?? helper
+				}) : null,
+				errorRendered ? /* @__PURE__ */ jsxs("div", {
+					className: "so-field__error",
+					...toAriaProps(errorAria),
+					children: [/* @__PURE__ */ jsx(Icon, {
+						embedded: "field.error-icon",
+						className: "so-field__error-icon",
+						tag: ErrorGlyph
+					}), /* @__PURE__ */ jsx("div", {
+						className: "so-field__error-text",
+						children: renderSlot(props["error-content"]) ?? error
+					})]
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { Field };

package/dist/components/field/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { IField } from '@soxa-ui/core';
+import type { FieldDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type FieldEventProps = EventProps<typeof FieldDescriptor>;
+export type FieldProps = UseDomProps<typeof FieldDescriptor, IField, FieldEventProps>;

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

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { Field } from './Field';

package/dist/components/field/setup.component.d.ts

@@ -0,0 +1,10 @@
+import type { FieldProps } from './base.component';
+/** Проводка поля (`TFieldExtension`) опускает связку контролу внутри лифтом. */
+export declare function useSetupField(props: FieldProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IField, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {};
+}>, FieldProps>;

package/dist/components/field/setup.component.js

@@ -0,0 +1,13 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { FieldDescriptor, TFieldExtension } from "@soxa-ui/setup";
+//#region src/components/field/setup.component.ts
+/** Проводка поля (`TFieldExtension`) опускает связку контролу внутри лифтом. */
+function useSetupField(props) {
+	return useComponent((create, elevator) => create(FieldDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TFieldExtension, { elevator }), props);
+}
+//#endregion
+export { useSetupField };

package/dist/components/frame/Frame.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { FrameProps } from './base.component';
+/**
+ * Frame — слой поверх страницы: корень уходит телепортом в `target`, и все
+ * атрибуты ложатся на него (AGENTS.md (React), «Teleport»).
+ */
+export declare function Frame(props: FrameProps): ReactElement | null;

package/dist/components/frame/Frame.js

@@ -0,0 +1,30 @@
+"use client";
+import { toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { Teleport } from "../../adapter/runtime/Teleport.js";
+import { useSetupFrame } from "./setup.component.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/frame/Frame.tsx
+/**
+* Frame — слой поверх страницы: корень уходит телепортом в `target`, и все
+* атрибуты ложатся на него (AGENTS.md (React), «Teleport»).
+*/
+function Frame(props) {
+	const { ref, forwardProps, state } = useSetupFrame(props);
+	const { rendered, tag, target, contained, aria, dataset, attrs } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx(Teleport, {
+		to: target,
+		disabled: contained,
+		children: /* @__PURE__ */ jsx(tag, {
+			...toRootProps(ref, state, [
+				attrs,
+				aria,
+				dataset
+			], forwardProps),
+			children: renderSlot(props.children)
+		})
+	});
+}
+//#endregion
+export { Frame };

package/dist/components/frame/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { IFrame } from '@soxa-ui/core';
+import type { FrameDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type FrameEventProps = EventProps<typeof FrameDescriptor>;
+export type FrameProps = UseDomProps<typeof FrameDescriptor, IFrame, FrameEventProps>;

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

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { Frame } from './Frame';

package/dist/components/frame/setup.component.d.ts

@@ -0,0 +1,33 @@
+import type { FrameProps } from './base.component';
+export declare function useSetupFrame(props: FrameProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IFrame, {
+    props: object & {} & {} & {} & {
+        anchor_anchor?: Element | null | undefined;
+        anchor_offset?: number | undefined;
+        anchor_flip?: boolean | undefined;
+        anchor_placement?: import("@soxa-ui/plugins").TFramePlacement | undefined;
+        anchor_point?: import("@soxa-ui/plugins").TPoint | null | undefined;
+        anchor_matchWidth?: boolean | undefined;
+    } & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    };
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {} & {
+        "anchor:change:placement": (payload: import("@soxa-ui/core").TValuePayload<import("@soxa-ui/plugins").TFramePlacement>) => void;
+        "anchor:change:offset": (payload: import("@soxa-ui/core").TValuePayload<number>) => void;
+        "anchor:change:point": (payload: import("@soxa-ui/core").TValuePayload<import("@soxa-ui/plugins").TPoint | null>) => void;
+        "anchor:change:anchor": (payload: import("@soxa-ui/core").TValuePayload<Element | null>) => void;
+        "anchor:change:matchWidth": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+        "anchor:change:flip": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+    } & {
+        "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    };
+    outputs: object & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+    } & {} & {};
+}>, FrameProps>;

package/dist/components/frame/setup.component.js

@@ -0,0 +1,12 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { FrameDescriptor } from "@soxa-ui/setup";
+//#region src/components/frame/setup.component.ts
+function useSetupFrame(props) {
+	return useComponent((create) => create(FrameDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}), props);
+}
+//#endregion
+export { useSetupFrame };

package/dist/components/icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { IconProps } from './base.component';
+/**
+ * Icon — корень по `tag` без содержимого: картинку рисует сам тег. Компонент
+ * React в `tag` обязан положить на свой корень `ref`, `className`, `style` и ARIA.
+ */
+export declare function Icon(props: IconProps): ReactElement | null;

package/dist/components/icon/Icon.js

@@ -0,0 +1,17 @@
+"use client";
+import { toRootProps } from "../../adapter/common/root.js";
+import { useSetupIcon } from "./setup.component.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/icon/Icon.tsx
+/**
+* Icon — корень по `tag` без содержимого: картинку рисует сам тег. Компонент
+* React в `tag` обязан положить на свой корень `ref`, `className`, `style` и ARIA.
+*/
+function Icon(props) {
+	const { ref, forwardProps, state } = useSetupIcon(props);
+	const { rendered, tag, aria, attrs } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx(tag, { ...toRootProps(ref, state, [attrs, aria], forwardProps) });
+}
+//#endregion
+export { Icon };

package/dist/components/icon/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { IIcon } from '@soxa-ui/core';
+import type { IconDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type IconEventProps = EventProps<typeof IconDescriptor>;
+export type IconProps = UseDomProps<typeof IconDescriptor, IIcon, IconEventProps>;

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

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { Icon } from './Icon';

package/dist/components/icon/setup.component.d.ts

@@ -0,0 +1,19 @@
+import type { IconProps } from './base.component';
+export declare function useSetupIcon(props: IconProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IIcon, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    };
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {
+        "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {};
+    outputs: object & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+    } & {};
+}>, IconProps>;