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

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,273 @@
+import { Show } from "../../adapter/runtime/flow.js";
+import { ResolvedSlot } from "../../adapter/common/ResolvedSlot.js";
+import { clickAction } from "../../adapter/common/click-action.js";
+import { createRootProps } from "../../adapter/common/root.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { Frame } from "../frame/Frame.js";
+import { DateInput } from "../date-input/DateInput.js";
+import { Calendar } from "../calendar/index.js";
+import { setupDatePicker } from "./setup.component.js";
+import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+//#region src/components/date-picker/DatePicker.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=so-date-picker__dash aria-hidden=true>–`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class=so-date-picker__handle aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class=so-date-picker__content>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+/** Глифы кнопок — компоненты на роль: `tag` у Icon — корень, а не роль. */
+var CloseGlyph = roleIcon("close");
+var CalendarGlyph = roleIcon("calendar");
+/**
+* Поле даты и календарь в панели, как Select — поле и список. Подвал календаря задан
+* значением только при `confirmable`: `Show` в слоте оставил бы пустую строку подвала.
+*/
+function DatePicker(props) {
+	const binding = setupDatePicker(props);
+	const state = binding.state;
+	const ctrl = binding.ctrl;
+	const root = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.rootAria,
+			state.dataset
+		],
+		forward: binding.forwardProps()
+	}));
+	/** Clears by the DatePicker's command; the click does not bubble to an ancestor that listens to the field. */
+	const clear = clickAction((event) => {
+		event.stopPropagation();
+		ctrl.clear();
+	});
+	const cancel = clickAction(() => {
+		ctrl.open = false;
+	});
+	const confirm = clickAction(() => ctrl.confirm());
+	/** Встроенная кнопка очистки — по `clearable`. */
+	const clearButton = () => createComponent(Show, {
+		get when() {
+			return state.clearable;
+		},
+		get children() {
+			return createComponent(Button, mergeProps({
+				embedded: "date-picker.clear",
+				type: "button",
+				"class": "so-date-picker__clear",
+				get size() {
+					return state.size;
+				},
+				get disabled() {
+					return state.disabled;
+				}
+			}, () => state.clearAria, {
+				ref: clear,
+				get children() {
+					return createComponent(Icon, {
+						embedded: "date-picker.clear-icon",
+						tag: CloseGlyph,
+						get size() {
+							return state.size;
+						}
+					});
+				}
+			}));
+		}
+	});
+	/**
+	* Очистка — своя кнопка из слота `clear` с командой DatePicker в scope или встроенная.
+	* Полю уходит готовыми узлами: функцию слота поле позвало бы со своей командой `clear`.
+	*/
+	const clearSlot = () => createComponent(ResolvedSlot, {
+		get content() {
+			return props.clear;
+		},
+		scope: () => ({ clear: ctrl.clear }),
+		get fallback() {
+			return clearButton();
+		}
+	});
+	/** Кнопка календаря: связка с панелью, вид «нажат», значок — слот `trigger-icon`. */
+	const trigger = () => createComponent(Button, mergeProps({
+		embedded: "date-picker.trigger",
+		type: "button",
+		"class": "so-date-picker__trigger",
+		get size() {
+			return state.size;
+		},
+		get disabled() {
+			return !state.openable;
+		}
+	}, () => state.triggerAria, () => state.triggerDataset, { get children() {
+		return createComponent(ResolvedSlot, {
+			get content() {
+				return props["trigger-icon"];
+			},
+			get fallback() {
+				return createComponent(Icon, {
+					embedded: "date-picker.trigger-icon",
+					tag: CalendarGlyph
+				});
+			}
+		});
+	} }));
+	/** Одна дата: поле с именем DatePicker, очистка и кнопка календаря — в его слотах. */
+	const single = () => createComponent(DateInput, mergeProps({
+		embedded: "date-picker.field",
+		"class": "so-date-picker__field",
+		get ctrl() {
+			return ctrl.field;
+		},
+		get aria_label() {
+			return props.aria_label;
+		},
+		get aria_labelledBy() {
+			return props.aria_labelledBy;
+		},
+		get aria_describedBy() {
+			return props.aria_describedBy;
+		}
+	}, () => state.aria, {
+		get clear() {
+			return clearSlot();
+		},
+		get trailing() {
+			return trigger();
+		}
+	}));
+	/** Диапазон: поля концов через тире, очистка периода и кнопка календаря. */
+	const range = () => [
+		createComponent(DateInput, {
+			embedded: "date-picker.start",
+			"class": "so-date-picker__start",
+			get ctrl() {
+				return ctrl.start;
+			},
+			get aria_label() {
+				return state.names_start;
+			}
+		}),
+		_tmpl$(),
+		createComponent(DateInput, {
+			embedded: "date-picker.end",
+			"class": "so-date-picker__end",
+			get ctrl() {
+				return ctrl.end;
+			},
+			get aria_label() {
+				return state.names_end;
+			}
+		}),
+		memo(clearSlot),
+		memo(trigger)
+	];
+	/** Подвал календаря: «Отмена», затем «OK». Задан он, только пока `confirmable`. */
+	const footer = () => [createComponent(Button, {
+		embedded: "date-picker.cancel",
+		type: "button",
+		"class": "so-date-picker__cancel",
+		get size() {
+			return state.size;
+		},
+		get text() {
+			return state.names_cancel;
+		},
+		ref: cancel
+	}), createComponent(Button, {
+		embedded: "date-picker.confirm",
+		type: "button",
+		"class": "so-date-picker__confirm",
+		get size() {
+			return state.size;
+		},
+		get disabled() {
+			return state.confirmDisabled;
+		},
+		get text() {
+			return state.names_confirm;
+		},
+		ref: confirm
+	})];
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			var _el$2 = _tmpl$4();
+			var _ref$ = binding.ref;
+			typeof _ref$ === "function" ? use(_ref$, _el$2) : binding.ref = _el$2;
+			spread(_el$2, mergeProps({ get id() {
+				return state.id;
+			} }, root), false, true);
+			insert(_el$2, createComponent(Elevate, {
+				get layer() {
+					return binding.layer;
+				},
+				get children() {
+					return [createComponent(Show, {
+						get when() {
+							return state.mode === "single";
+						},
+						get fallback() {
+							return range();
+						},
+						get children() {
+							return single();
+						}
+					}), createComponent(Frame, mergeProps({
+						embedded: "date-picker.frame",
+						"class": "so-date-picker__panel",
+						tabindex: "-1",
+						get visible() {
+							return memo(() => !!state.visible)() && state.open;
+						},
+						strategy: "fixed",
+						get anchor_anchor() {
+							return binding.rootElement();
+						},
+						anchor_offset: 4
+					}, () => state.panelAria, () => state.panelDataset, () => state.dismiss_ownerAttribute, { get children() {
+						return [createComponent(Show, {
+							get when() {
+								return state.handleRendered;
+							},
+							get children() {
+								return _tmpl$2();
+							}
+						}), (() => {
+							var _el$4 = _tmpl$3();
+							insert(_el$4, createComponent(Show, {
+								get when() {
+									return state.contentRendered;
+								},
+								get children() {
+									return createComponent(Calendar, {
+										embedded: "date-picker.calendar",
+										"class": "so-date-picker__calendar",
+										get ctrl() {
+											return binding.calendar;
+										},
+										get engine() {
+											return binding.engine;
+										},
+										get item() {
+											return props.item;
+										},
+										get footer() {
+											return memo(() => !!state.confirmable)() && footer();
+										}
+									});
+								}
+							}));
+							return _el$4;
+						})()];
+					} }))];
+				}
+			}));
+			return _el$2;
+		}
+	});
+}
+//#endregion
+export { DatePicker };

package/dist/components/date-picker/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { IDatePicker } from '@soxa-ui/core';
+import type { DatePickerDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+/** События DatePicker. */
+export type DatePickerEventProps = EventProps<typeof DatePickerDescriptor>;
+/** Пропсы DatePicker: атрибуты потребителя — корню, якорю панели. */
+export type DatePickerProps = UseDomProps<typeof DatePickerDescriptor, IDatePicker, DatePickerEventProps>;

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

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupDatePicker } from './setup.component';
+export { DatePicker } from './DatePicker';

package/dist/components/date-picker/setup.component.d.ts

@@ -0,0 +1,58 @@
+import type { DatePickerProps } from './base.component';
+/**
+ * DatePicker takes the `Field` link for itself and lowers an empty one to its
+ * content. A mode's fields the markup reads from the instance in that mode's
+ * branch: the core creates a field when its mode needs it.
+ */
+export declare function setupDatePicker(props: DatePickerProps): {
+    layer: import("../../adapter").TElevatorLayer;
+    calendar: import("@soxa-ui/core").ICalendar;
+    engine: import("@soxa-ui/core").TCalendarCollection;
+    ctrl: object & import("@soxa-ui/core").IDatePicker;
+    state: import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDatePicker, {
+        props: object & {} & {} & {} & {
+            aria_label?: string | undefined;
+            aria_labelledBy?: string | undefined;
+            aria_describedBy?: string | undefined;
+        } & {
+            id?: string | undefined;
+        } & {} & {} & {} & {
+            dismiss_enabled?: boolean | undefined;
+        } & {
+            hideOutside_enabled?: boolean | undefined;
+        } & {} & {} & {} & {};
+        events: object & {
+            "element:ready": (element: Element) => void;
+            "element:removed": () => void;
+        } & {} & {
+            "action:click": (event: MouseEvent) => void;
+            "action:press": (event: MouseEvent) => void;
+            "action:focus": (event: FocusEvent) => void;
+            "action:blur": (event: FocusEvent) => 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;
+        } & {
+            "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        } & {
+            "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+            "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+        } & {} & {
+            "hideOutside:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+        } & {} & {} & {} & {} & {};
+        outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {
+            readonly dismiss_ownerAttribute: Record<string, string>;
+        } & {} & {} & {} & {} & {
+            readonly names_end: string;
+            readonly names_start: string;
+            readonly names_confirm: string;
+            readonly names_cancel: string;
+        };
+    }>>;
+    forwardProps: () => Partial<DatePickerProps>;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ref: (el: Element) => void;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+};

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

@@ -0,0 +1,26 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../adapter/elevator/useElevator.js";
+import { DatePickerDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/date-picker/setup.component.ts
+/**
+* DatePicker takes the `Field` link for itself and lowers an empty one to its
+* content. A mode's fields the markup reads from the instance in that mode's
+* branch: the core creates a field when its mode needs it.
+*/
+function setupDatePicker(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(DatePickerDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator });
+	const picker = adapter.instance;
+	return {
+		...useAdapter(adapter, props),
+		layer,
+		calendar: picker.calendar,
+		engine: picker.engine
+	};
+}
+//#endregion
+export { setupDatePicker };

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'solid-js';
+import type { DialogProps } from './base.component';
+/**
+ * Модальное окно: подложка и панель — соседи в телепорте, подложка раньше; корень — панель.
+ * Кнопки шапки — после подвала: в строку заголовка их переносит тема.
+ */
+export declare function Dialog(props: DialogProps): JSX.Element;

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,160 @@
+import { renderSlot, resolveSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { clickAction } from "../../adapter/common/click-action.js";
+import { createPartProps, createRootProps } from "../../adapter/common/root.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { Root } from "../../adapter/runtime/Root.js";
+import { Teleport } from "../../adapter/runtime/Teleport.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { setupDialog } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/dialog/Dialog.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<h2 class=so-dialog__title>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class=so-dialog__body>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class=so-dialog__footer>`);
+/** Иконки кнопок шапки по умолчанию. */
+var CLOSE = roleIcon("close");
+var MAXIMIZE = roleIcon("arrowsOutward");
+var RESTORE = roleIcon("arrowsInward");
+/** Класс подложки — её разметка: своего экземпляра у подложки нет. */
+var BACKDROP = ["so-dialog__backdrop"];
+/**
+* Модальное окно: подложка и панель — соседи в телепорте, подложка раньше; корень — панель.
+* Кнопки шапки — после подвала: в строку заголовка их переносит тема.
+*/
+function Dialog(props) {
+	const binding = setupDialog(props);
+	const state = binding.state;
+	const ctrl = binding.ctrl;
+	const toggleMaximized = clickAction(() => ctrl.toggleMaximized());
+	const close = clickAction(() => ctrl.requestClose("button"));
+	const backdrop = createRootProps(() => ({
+		state: {
+			classes: BACKDROP,
+			layout_styles: state.layout_backdropStyles,
+			visible: state.visible
+		},
+		sets: [state.backdropDataset],
+		forward: {}
+	}));
+	const panel = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.aria,
+			state.dataset,
+			state.dismiss_ownerAttribute
+		],
+		forward: binding.forwardProps()
+	}));
+	const titleAria = createPartProps(() => state.titleAria);
+	const bodyAria = createPartProps(() => state.bodyAria);
+	const maximizeIcon = resolveSlot(() => props["maximize-icon"], () => ({}));
+	const restoreIcon = resolveSlot(() => props["restore-icon"], () => ({}));
+	const closeIcon = resolveSlot(() => props["close-icon"], () => ({}));
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Teleport, {
+				get to() {
+					return state.target;
+				},
+				get children() {
+					return [(() => {
+						var _el$ = _tmpl$();
+						spread(_el$, mergeProps(backdrop), false, false);
+						return _el$;
+					})(), createComponent(Root, {
+						get tag() {
+							return state.tag;
+						},
+						attributes: () => ({
+							tabindex: "-1",
+							...panel()
+						}),
+						ref(r$) {
+							var _ref$ = binding.ref;
+							typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+						},
+						get children() {
+							return [
+								(() => {
+									var _el$2 = _tmpl$2();
+									spread(_el$2, mergeProps(titleAria), false, true);
+									insert(_el$2, () => renderSlot(props.title));
+									return _el$2;
+								})(),
+								(() => {
+									var _el$3 = _tmpl$3();
+									spread(_el$3, mergeProps(bodyAria), false, true);
+									insert(_el$3, () => renderSlot(props.children));
+									return _el$3;
+								})(),
+								(() => {
+									var _el$4 = _tmpl$4();
+									insert(_el$4, () => renderSlot(props.footer));
+									return _el$4;
+								})(),
+								createComponent(Show, {
+									get when() {
+										return state.maximizable;
+									},
+									get children() {
+										return createComponent(Button, mergeProps({
+											embedded: "dialog.maximize",
+											type: "button",
+											"class": "so-dialog__maximize",
+											ref: toggleMaximized
+										}, () => state.maximizeAria, { get children() {
+											return createComponent(Show, {
+												get when() {
+													return state.maximized;
+												},
+												get fallback() {
+													return maximizeIcon() ?? createComponent(Icon, {
+														embedded: "dialog.maximize-icon",
+														tag: MAXIMIZE
+													});
+												},
+												get children() {
+													return restoreIcon() ?? createComponent(Icon, {
+														embedded: "dialog.restore-icon",
+														tag: RESTORE
+													});
+												}
+											});
+										} }));
+									}
+								}),
+								createComponent(Show, {
+									get when() {
+										return state.closable;
+									},
+									get children() {
+										return createComponent(Button, mergeProps({
+											embedded: "dialog.close",
+											type: "button",
+											"class": "so-dialog__close",
+											ref: close
+										}, () => state.closeAria, { get children() {
+											return closeIcon() ?? createComponent(Icon, {
+												embedded: "dialog.close-icon",
+												tag: CLOSE
+											});
+										} }));
+									}
+								})
+							];
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Dialog };

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

@@ -0,0 +1,7 @@
+import type { IDialog } from '@soxa-ui/core';
+import type { DialogDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+/** События Dialog (ядро и плагины). */
+export type DialogEventProps = EventProps<typeof DialogDescriptor>;
+/** Пропсы Dialog. Атрибуты — панели; слот `title` вычитает из атрибутов одноимённый атрибут. */
+export type DialogProps = UseDomProps<typeof DialogDescriptor, IDialog, DialogEventProps>;

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

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupDialog } from './setup.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 setupDialog(props: DialogProps): import("../../adapter").TBinding<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:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+        "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => 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,13 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { DialogDescriptor } from "@soxa-ui/setup";
+//#region src/components/dialog/setup.component.ts
+function setupDialog(props) {
+	const adapter = createSolidAdapterContext(DialogDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	return useAdapter(adapter, props);
+}
+//#endregion
+export { setupDialog };

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

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

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

@@ -0,0 +1,19 @@
+import { renderSlot } from "../../adapter/common/slots.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { setupDragAndDrop } from "./setup.component.js";
+import { createComponent } from "solid-js/web";
+//#region src/components/drag-and-drop/DragAndDrop.tsx
+/** Перестановка элементов коллекций внутри жестом; своего узла нет — только дети в слое лифта. */
+function DragAndDrop(props) {
+	const binding = setupDragAndDrop(props);
+	return createComponent(Elevate, {
+		get layer() {
+			return binding.layer;
+		},
+		get children() {
+			return renderSlot(props.children);
+		}
+	});
+}
+//#endregion
+export { DragAndDrop };

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

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

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

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

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

@@ -0,0 +1,11 @@
+import type { DragAndDropProps } from './base.component';
+/** Узла у обёртки нет: `useAdapter` — ради событий перестановки, `ref` не отдаётся. */
+export declare function setupDragAndDrop(props: DragAndDropProps): {
+    ctrl: object & import("@soxa-ui/core").IDragAndDrop;
+    state: import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDragAndDrop, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>;
+    layer: import("../../adapter").TElevatorLayer;
+};

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

@@ -0,0 +1,21 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../adapter/elevator/useElevator.js";
+import { DragAndDropDescriptor, TDragAndDropExtension } from "@soxa-ui/setup";
+//#region src/components/drag-and-drop/setup.component.ts
+/** Узла у обёртки нет: `useAdapter` — ради событий перестановки, `ref` не отдаётся. */
+function setupDragAndDrop(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(DragAndDropDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TDragAndDropExtension, { elevator });
+	const binding = useAdapter(adapter, props);
+	return {
+		ctrl: binding.ctrl,
+		state: binding.state,
+		layer
+	};
+}
+//#endregion
+export { setupDragAndDrop };