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

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

@@ -0,0 +1,26 @@
+"use client";
+import { useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useAdapterContext } from "../../adapter/runtime/useAdapterContext.js";
+import { CalendarCollectionDescriptor, CalendarDescriptor, TCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/calendar/setup.component.ts
+function useSetupCalendar(props) {
+	const { contexts: [adapter, collectionAdapter], layer } = useAdapterContext((create, elevator) => {
+		const adapter = create(CalendarDescriptor(), {
+			ctrl: props.ctrl,
+			props
+		});
+		return [adapter, create(CalendarCollectionDescriptor(), {
+			props,
+			options: {
+				owner: adapter.instance,
+				engine: props.engine
+			}
+		}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator })];
+	});
+	return {
+		...useCollectionAdapter(useAdapter(adapter, props), collectionAdapter, props),
+		layer
+	};
+}
+//#endregion
+export { useSetupCalendar };

package/dist/components/check-box/CheckBox.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { CheckBoxProps } from './base.component';
+/** CheckBox — флажок на нативном `<input type="checkbox">`: AGENTS.md (React), «Поля ввода». */
+export declare function CheckBox(props: CheckBoxProps): ReactElement | null;

package/dist/components/check-box/CheckBox.js

@@ -0,0 +1,49 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toControlAttrs, toRootForward, toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { NativeInput } from "../../adapter/runtime/NativeInput.js";
+import { elevated } from "../../adapter/elevator/Elevate.js";
+import { useSetupCheckBox } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/check-box/CheckBox.tsx
+/** Отметка — `svg` роли, а не `Icon`: тот собирал бы контекст на каждую смену отметки. */
+var CheckMark = roleIcon("check");
+var IndeterminateMark = roleIcon("checkIndeterminate");
+/** CheckBox — флажок на нативном `<input type="checkbox">`: AGENTS.md (React), «Поля ввода». */
+function CheckBox(props) {
+	const { ref, forwardProps, state, layer } = useSetupCheckBox(props);
+	const { rendered, tag, attrs, aria, dataset, id, value, indeterminate, name, disabled, required } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	const scope = {
+		value,
+		indeterminate: indeterminate ?? false
+	};
+	let mark = null;
+	if (indeterminate) mark = elevated(layer, renderSlot(props["indeterminate-icon"], scope)) ?? /* @__PURE__ */ jsx(IndeterminateMark, { className: "so-check-box__mark" });
+	else if (value) mark = elevated(layer, renderSlot(props.icon, scope)) ?? /* @__PURE__ */ jsx(CheckMark, { className: "so-check-box__mark" });
+	return /* @__PURE__ */ jsxs(Tag, {
+		...toRootProps(ref, state, [attrs, dataset], toRootForward(forwardProps)),
+		children: [/* @__PURE__ */ jsx(NativeInput, {
+			type: "checkbox",
+			id,
+			name,
+			disabled,
+			required,
+			...toAriaProps(aria),
+			...toControlAttrs(forwardProps),
+			live: {
+				checked: value,
+				indeterminate
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			className: "so-check-box__container",
+			"aria-hidden": "true",
+			children: mark
+		})]
+	});
+}
+//#endregion
+export { CheckBox };

package/dist/components/check-box/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { ICheckBox } from '@soxa-ui/core';
+import type { CheckBoxDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+export type CheckBoxEventProps = EventProps<typeof CheckBoxDescriptor>;
+/** Атрибуты CheckBox: класс и стиль — корню, остальное — полю `<input>`. */
+export type CheckBoxAttributes = TDomAttributes<typeof CheckBoxDescriptor, TFieldAttributes>;
+export type CheckBoxProps = UseDomProps<typeof CheckBoxDescriptor, ICheckBox, CheckBoxEventProps, TFieldAttributes>;

package/dist/components/check-box/index.d.ts

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

package/dist/components/check-box/setup.component.d.ts

@@ -0,0 +1,27 @@
+import type { CheckBoxProps } from './base.component';
+/** Поле формы `Field` над флажком: ошибку и ссылки на части флажок берёт от него лифтом. */
+export declare function useSetupCheckBox(props: CheckBoxProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ICheckBox, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: 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;
+    } & {
+        "action:blur": (event: FocusEvent) => void;
+        "action:click": (event: MouseEvent) => void;
+        "action:focus": (event: FocusEvent) => void;
+        "action:press": (event: MouseEvent) => void;
+    } & {
+        "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {};
+}>, CheckBoxProps>;

package/dist/components/check-box/setup.component.js

@@ -0,0 +1,13 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { CheckBoxDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/check-box/setup.component.ts
+/** Поле формы `Field` над флажком: ошибку и ссылки на части флажок берёт от него лифтом. */
+function useSetupCheckBox(props) {
+	return useComponent((create, elevator) => create(CheckBoxDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator }), props);
+}
+//#endregion
+export { useSetupCheckBox };

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

@@ -0,0 +1,5 @@
+import type { IComponent } from '@soxa-ui/core';
+import type { ComponentDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type ComponentEventProps = EventProps<typeof ComponentDescriptor>;
+export type ComponentProps = UseProps<typeof ComponentDescriptor, IComponent, ComponentEventProps>;

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

@@ -0,0 +1 @@
+export * from './base.component';

package/dist/components/component-view/ComponentView.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { ComponentViewProps } from './base.component';
+/** ComponentView — корень по `tag` со слотом `default`. */
+export declare function ComponentView(props: ComponentViewProps): ReactElement | null;

package/dist/components/component-view/ComponentView.js

@@ -0,0 +1,22 @@
+"use client";
+import { toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { useSetupComponentView } from "./setup.component.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/component-view/ComponentView.tsx
+/** ComponentView — корень по `tag` со слотом `default`. */
+function ComponentView(props) {
+	const { ref, forwardProps, state } = useSetupComponentView(props);
+	const { rendered, tag, aria, dataset, attrs } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx(tag, {
+		...toRootProps(ref, state, [
+			attrs,
+			aria,
+			dataset
+		], forwardProps),
+		children: renderSlot(props.children)
+	});
+}
+//#endregion
+export { ComponentView };

package/dist/components/component-view/base.component.d.ts

@@ -0,0 +1,5 @@
+import type { IComponentView } from '@soxa-ui/core';
+import type { ComponentViewDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type ComponentViewEventProps = EventProps<typeof ComponentViewDescriptor>;
+export type ComponentViewProps = UseDomProps<typeof ComponentViewDescriptor, IComponentView, ComponentViewEventProps>;

package/dist/components/component-view/index.d.ts

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

package/dist/components/component-view/setup.component.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentViewProps } from './base.component';
+export declare function useSetupComponentView(props: ComponentViewProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IComponentView<import("@soxa-ui/core").IComponentViewProps, import("@soxa-ui/core").TComponentViewEvents>, {
+    props: object & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {};
+    outputs: object & {} & {};
+}>, ComponentViewProps>;

package/dist/components/component-view/setup.component.js

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

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

@@ -0,0 +1,5 @@
+import type { IControl } from '@soxa-ui/core';
+import type { ControlDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type ControlEventProps = EventProps<typeof ControlDescriptor>;
+export type ControlProps = UseProps<typeof ControlDescriptor, IControl, ControlEventProps>;

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

@@ -0,0 +1 @@
+export * from './base.component';

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

@@ -0,0 +1,22 @@
+import type { ControlProps } from './base.component';
+export declare function useSetupControl(props: ControlProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IControl<import("@soxa-ui/core").IControlProps, import("@soxa-ui/core").TControlEvents>, {
+    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;
+    } & {
+        "action:blur": (event: FocusEvent) => void;
+        "action:click": (event: MouseEvent) => void;
+        "action:focus": (event: FocusEvent) => void;
+        "action:press": (event: MouseEvent) => void;
+    };
+    outputs: object & {} & {} & {} & {};
+}>, ControlProps>;

package/dist/components/date-input/DateInput.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { DateInputProps } from './base.component';
+/** DateInput — поле даты из частей по формату локали: docs/agents/dates.md, «Даты». */
+export declare function DateInput(props: DateInputProps): ReactElement | null;

package/dist/components/date-input/DateInput.js

@@ -0,0 +1,88 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toRootProps } from "../../adapter/common/root.js";
+import { hasSlot, renderSlot } from "../../adapter/common/slots.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { useClickAction } from "../../adapter/runtime/useClickAction.js";
+import { elevated } from "../../adapter/elevator/Elevate.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { useSetupDateInput } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-input/DateInput.tsx
+var CloseMark = roleIcon("close");
+/**
+* Часть или разделитель; ключ части — её тип, и при наборе узел тот же. Текст — единственный
+* ребёнок-строка: docs/agents/dates.md, «Даты».
+*/
+function drawSegment(segment) {
+	if (segment.type === "literal") return /* @__PURE__ */ jsx("span", {
+		className: "so-date-input__literal",
+		...toAriaProps(segment.aria),
+		children: segment.text
+	}, segment.key);
+	return /* @__PURE__ */ jsx("span", {
+		className: "so-date-input__segment",
+		suppressContentEditableWarning: true,
+		...toAriaProps(segment.attrs),
+		...toAriaProps(segment.aria),
+		...toAriaProps(segment.dataset),
+		children: segment.text
+	}, segment.key);
+}
+/** DateInput — поле даты из частей по формату локали: docs/agents/dates.md, «Даты». */
+function DateInput(props) {
+	const { ctrl, ref, forwardProps, state, layer } = useSetupDateInput(props);
+	const clear = useClickAction((event) => {
+		event.stopPropagation();
+		ctrl.clear();
+	});
+	const { rendered, tag, id, attrs, aria, dataset, segments, segmentsAttrs, name, value, disabled, size, clearable, clearAria } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	const trailing = clearable === true || hasSlot(props.clear) || hasSlot(props.trailing);
+	return /* @__PURE__ */ jsxs(Tag, {
+		id,
+		...toRootProps(ref, state, [
+			attrs,
+			aria,
+			dataset
+		], forwardProps),
+		children: [
+			hasSlot(props.leading) ? /* @__PURE__ */ jsx("div", {
+				className: "so-date-input__leading",
+				children: elevated(layer, renderSlot(props.leading, { ctrl }))
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "so-date-input__segments",
+				...toAriaProps(segmentsAttrs),
+				children: segments?.map(drawSegment)
+			}),
+			trailing ? /* @__PURE__ */ jsxs("div", {
+				className: "so-date-input__trailing",
+				children: [elevated(layer, renderSlot(props.clear, { clear: ctrl.clear })) ?? (clearable === true ? /* @__PURE__ */ jsx(Button, {
+					embedded: "date-input.clear",
+					type: "button",
+					className: "so-date-input__clear",
+					size,
+					disabled,
+					...toAriaProps(clearAria),
+					ref: clear,
+					children: /* @__PURE__ */ jsx(Icon, {
+						embedded: "date-input.clear-icon",
+						tag: CloseMark,
+						size
+					})
+				}) : null), elevated(layer, renderSlot(props.trailing, { ctrl }))]
+			}) : null,
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: value ?? "",
+				disabled
+			})
+		]
+	});
+}
+//#endregion
+export { DateInput };

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

@@ -0,0 +1,6 @@
+import type { IDateInput } from '@soxa-ui/core';
+import type { DateInputDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type DateInputEventProps = EventProps<typeof DateInputDescriptor>;
+/** Пропсы DateInput: атрибуты потребителя — корню целиком, части рисует сам компонент. */
+export type DateInputProps = UseDomProps<typeof DateInputDescriptor, IDateInput, DateInputEventProps>;

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

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

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

@@ -0,0 +1,27 @@
+import type { DateInputProps } from './base.component';
+/** Поле формы `Field` над полем: ошибку и ссылки на части поле берёт от него лифтом. */
+export declare function useSetupDateInput(props: DateInputProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IDateInput, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: 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;
+    } & {
+        "action:blur": (event: FocusEvent) => void;
+        "action:click": (event: MouseEvent) => void;
+        "action:focus": (event: FocusEvent) => void;
+        "action:press": (event: MouseEvent) => void;
+    } & {
+        "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {} & {} & {} & {} & {} & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {};
+}>, DateInputProps>;

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

@@ -0,0 +1,13 @@
+"use client";
+import { useComponent } from "../../adapter/runtime/useComponent.js";
+import { DateInputDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/date-input/setup.component.ts
+/** Поле формы `Field` над полем: ошибку и ссылки на части поле берёт от него лифтом. */
+function useSetupDateInput(props) {
+	return useComponent((create, elevator) => create(DateInputDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator }), props);
+}
+//#endregion
+export { useSetupDateInput };

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

@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import type { DatePickerProps } from './base.component';
+/**
+ * DatePicker — a date field and a calendar in a panel: docs/agents/dates.md, «Даты». A mode's
+ * fields are read from the instance in that mode's branch: the core creates a field when its
+ * mode needs it. The keys of the fields and the calendar — AGENTS.md (React), «Пересобранный
+ * инстанс и `key`».
+ */
+export declare function DatePicker(props: DatePickerProps): ReactElement | null;

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

@@ -0,0 +1,148 @@
+"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 { useClickAction } from "../../adapter/runtime/useClickAction.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 { useSetupDatePicker } from "./setup.component.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/DatePicker.tsx
+var CloseMark = roleIcon("close");
+var CalendarMark = roleIcon("calendar");
+/**
+* DatePicker — a date field and a calendar in a panel: docs/agents/dates.md, «Даты». A mode's
+* fields are read from the instance in that mode's branch: the core creates a field when its
+* mode needs it. The keys of the fields and the calendar — AGENTS.md (React), «Пересобранный
+* инстанс и `key`».
+*/
+function DatePicker(props) {
+	const { ctrl, ref, forwardProps, state, layer, rootElement, calendar, engine } = useSetupDatePicker(props);
+	const clearValue = useClickAction((event) => {
+		event.stopPropagation();
+		ctrl.clear();
+	});
+	const cancel = useClickAction(() => {
+		ctrl.open = false;
+	});
+	const confirm = useClickAction(() => ctrl.confirm());
+	const { rendered, id, attrs, aria, rootAria, dataset, mode, size, disabled, clearable, clearAria, openable, triggerAria, triggerDataset, open, panelAria, panelDataset, handleRendered, contentRendered, confirmable, confirmDisabled, names_start, names_end, names_cancel, names_confirm, dismiss_ownerAttribute } = state;
+	if (!rendered) return null;
+	const clear = renderSlot(props.clear, { clear: ctrl.clear }) ?? (clearable === true ? /* @__PURE__ */ jsx(Button, {
+		embedded: "date-picker.clear",
+		type: "button",
+		className: "so-date-picker__clear",
+		size,
+		disabled,
+		...toAriaProps(clearAria),
+		ref: clearValue,
+		children: /* @__PURE__ */ jsx(Icon, {
+			embedded: "date-picker.clear-icon",
+			tag: CloseMark,
+			size
+		})
+	}) : null);
+	const trigger = /* @__PURE__ */ jsx(Button, {
+		embedded: "date-picker.trigger",
+		type: "button",
+		className: "so-date-picker__trigger",
+		size,
+		disabled: !openable,
+		...toAriaProps(triggerAria),
+		...toAriaProps(triggerDataset),
+		children: renderSlot(props["trigger-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+			embedded: "date-picker.trigger-icon",
+			tag: CalendarMark
+		})
+	});
+	const footer = confirmable === true ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		embedded: "date-picker.cancel",
+		type: "button",
+		className: "so-date-picker__cancel",
+		size,
+		text: names_cancel,
+		ref: cancel
+	}), /* @__PURE__ */ jsx(Button, {
+		embedded: "date-picker.confirm",
+		type: "button",
+		className: "so-date-picker__confirm",
+		size,
+		disabled: confirmDisabled,
+		text: names_confirm,
+		ref: confirm
+	})] }) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		...toRootProps(ref, state, [
+			attrs,
+			rootAria,
+			dataset
+		], forwardProps),
+		children: /* @__PURE__ */ jsxs(Elevate, {
+			layer,
+			children: [mode === "single" ? /* @__PURE__ */ jsx(DateInput, {
+				embedded: "date-picker.field",
+				className: "so-date-picker__field",
+				ctrl: ctrl.field,
+				aria_label: props.aria_label,
+				aria_labelledBy: props.aria_labelledBy,
+				aria_describedBy: props.aria_describedBy,
+				...toAriaProps(aria),
+				clear,
+				trailing: trigger
+			}, ctrl.field.uid) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(DateInput, {
+					embedded: "date-picker.start",
+					className: "so-date-picker__start",
+					ctrl: ctrl.start,
+					aria_label: names_start
+				}, ctrl.start.uid),
+				/* @__PURE__ */ jsx("span", {
+					className: "so-date-picker__dash",
+					"aria-hidden": "true",
+					children: "–"
+				}),
+				/* @__PURE__ */ jsx(DateInput, {
+					embedded: "date-picker.end",
+					className: "so-date-picker__end",
+					ctrl: ctrl.end,
+					aria_label: names_end
+				}, ctrl.end.uid),
+				clear,
+				trigger
+			] }), /* @__PURE__ */ jsxs(Frame, {
+				embedded: "date-picker.frame",
+				className: "so-date-picker__panel",
+				tabIndex: -1,
+				visible: state.visible && open,
+				strategy: "fixed",
+				anchor_anchor: rootElement,
+				anchor_offset: 4,
+				...toAriaProps(panelAria),
+				...toAriaProps(panelDataset),
+				...toAriaProps(dismiss_ownerAttribute),
+				children: [handleRendered ? /* @__PURE__ */ jsx("div", {
+					className: "so-date-picker__handle",
+					"aria-hidden": "true"
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "so-date-picker__content",
+					children: contentRendered ? /* @__PURE__ */ jsx(Calendar, {
+						embedded: "date-picker.calendar",
+						className: "so-date-picker__calendar",
+						ctrl: calendar,
+						engine,
+						item: props.item,
+						footer
+					}, calendar.uid) : null
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { DatePicker };

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

@@ -0,0 +1,6 @@
+import type { IDatePicker } from '@soxa-ui/core';
+import type { DatePickerDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+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,2 @@
+export * from './base.component';
+export { DatePicker } from './DatePicker';

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

@@ -0,0 +1,60 @@
+import type { DatePickerProps } from './base.component';
+/**
+ * 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`».
+ */
+export declare function useSetupDatePicker(props: DatePickerProps): {
+    rootElement: Element | null;
+    calendar: import("@soxa-ui/core").ICalendar;
+    engine: import("@soxa-ui/core").TCalendarCollection;
+    ctrl: object & import("@soxa-ui/core").IDatePicker;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ref: (el: Element | null) => void;
+    bindRef: (el: Element | null) => void;
+    root: import("../../adapter").TRootSource;
+    forwardProps: Partial<DatePickerProps>;
+    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: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;
+        } & {
+            "action:blur": (event: FocusEvent) => void;
+            "action:click": (event: MouseEvent) => void;
+            "action:focus": (event: FocusEvent) => void;
+            "action:press": (event: MouseEvent) => void;
+        } & {
+            "change:id": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => 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;
+        } & {} & {} & {} & {} & {} & {};
+        outputs: object & {} & {} & {} & {} & {} & {} & {} & {} & {
+            readonly dismiss_ownerAttribute: Record<string, string>;
+        } & {} & {} & {} & {} & {
+            readonly names_end: string;
+            readonly names_start: string;
+            readonly names_cancel: string;
+            readonly names_confirm: string;
+        };
+    }>>;
+    layer: import("../../adapter").TElevatorLayer;
+};