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

package/dist/components/select/Select.js

@@ -0,0 +1,116 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toControlAttrs, toReactStyle, toRootForward, toRootProps } from "../../adapter/common/root.js";
+import { hasSlot, relaySlot, 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 { Frame } from "../frame/Frame.js";
+import { Input } from "../input/Input.js";
+import { Tags } from "../tags/index.js";
+import { SelectItem } from "./item/Item.js";
+import { SelectGroup } from "./group/Group.js";
+import { useSetupSelect } from "./setup.component.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/Select.tsx
+/** Стрелка без слота — компонент на роль: `tag` у Icon — корень, а не роль. */
+var ArrowIcon = roleIcon("arrowDown");
+/**
+* Ряд тегов поля — только в `multiple`. Ключ — инстанс тегов:
+* AGENTS.md (React), «Пересобранный инстанс и `key`».
+*/
+function drawTags(props, tags, engine) {
+	if (!tags || !engine) return null;
+	return renderSlot(props.tags, {
+		tags,
+		engine
+	}) ?? /* @__PURE__ */ jsx(Tags, {
+		embedded: "select.tags",
+		className: "so-select__tags",
+		ctrl: tags,
+		engine
+	}, tags.uid);
+}
+/** Опция из данных со слотами Select или распорка окна на месте пропущенных. */
+function drawEntry(props, entry) {
+	if (entry.kind === "filler") return /* @__PURE__ */ jsx("div", {
+		className: "so-select__filler",
+		"aria-hidden": "true",
+		style: toReactStyle(entry.style)
+	}, entry.key);
+	return /* @__PURE__ */ jsx(SelectItem, {
+		ctrl: entry.item,
+		leading: renderSlot(props["item-leading"], { item: entry.item }),
+		trailing: renderSlot(props["item-trailing"], { item: entry.item }),
+		"indicator-icon": relaySlot(props["item-indicator-icon"], { item: entry.item }),
+		children: relaySlot(props.item, { item: entry.item })
+	}, entry.key);
+}
+/** Ключи записи (число), группы и разделителя секции не пересекаются. */
+function drawSection(props, section, separated) {
+	const entries = section.entries.map((entry) => drawEntry(props, entry));
+	const separator = separated ? [/* @__PURE__ */ jsx("div", {
+		className: "so-select__separator",
+		"aria-hidden": "true"
+	}, `separator:${section.key}`)] : [];
+	if (!section.group) return [...separator, ...entries];
+	return [...separator, /* @__PURE__ */ jsx(SelectGroup, {
+		label: section.group.label,
+		children: entries
+	}, section.key)];
+}
+/**
+* Select — поле выбора из списка (Combobox, select-only или `editable`): поле и панель со списком.
+* docs/agents/patterns.md, «Готовые паттерны» (Select).
+*/
+function Select(props) {
+	const { ref, forwardProps, state, rootElement, field, layer } = useSetupSelect(props);
+	const { rendered, attrs, aria, dataset, size, open, panelPlacement, panelFlip, autoFitWidth, panelDataset, handleRendered, contentRendered, listAria, drawnSections, groupSeparators, shown, tags, tags_engine, dismiss_ownerAttribute, id } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...toRootProps(ref, state, [dataset, attrs], toRootForward(forwardProps)),
+		children: /* @__PURE__ */ jsxs(Elevate, {
+			layer,
+			children: [renderSlot(props.field, { field }) ?? /* @__PURE__ */ jsx(Input, {
+				embedded: "select.field",
+				className: "so-select__field",
+				ctrl: field,
+				id,
+				clear: props.clear,
+				leading: /* @__PURE__ */ jsxs(Fragment, { children: [drawTags(props, tags, tags_engine), renderSlot(props.leading)] }),
+				trailing: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "so-select__arrow",
+					children: renderSlot(props["arrow-icon"]) ?? /* @__PURE__ */ jsx(Icon, {
+						embedded: "select.arrow",
+						tag: ArrowIcon,
+						size
+					})
+				}), renderSlot(props.trailing)] }),
+				...toAriaProps(aria),
+				...toControlAttrs(forwardProps)
+			}, field.uid), /* @__PURE__ */ jsxs(Frame, {
+				embedded: "select.frame",
+				className: "so-select__panel",
+				visible: state.visible && open,
+				strategy: "fixed",
+				anchor_anchor: rootElement,
+				anchor_placement: panelPlacement,
+				anchor_flip: panelFlip,
+				anchor_matchWidth: autoFitWidth,
+				anchor_offset: 4,
+				...toAriaProps(panelDataset),
+				...toAriaProps(dismiss_ownerAttribute),
+				children: [handleRendered ? /* @__PURE__ */ jsx("div", {
+					className: "so-select__handle",
+					"aria-hidden": "true"
+				}) : null, /* @__PURE__ */ jsxs("div", {
+					className: "so-select__list",
+					...toAriaProps(listAria),
+					children: [hasSlot(props.children) ? renderSlot(props.children) : contentRendered ? drawnSections?.flatMap((section, index) => drawSection(props, section, groupSeparators === true && index > 0)) : null, shown?.length === 0 ? renderSlot(props.empty) : null]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { Select };

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

@@ -0,0 +1,8 @@
+import type { ISelect } from '@soxa-ui/core';
+import type { SelectCollectionDescriptor, SelectDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+/** Колбэки обоих контекстов Select — свой и фасада коллекции — пропсы одного компонента. */
+export type SelectEventProps = EventProps<typeof SelectDescriptor> & EventProps<typeof SelectCollectionDescriptor>;
+/** Атрибуты Select: класс и стиль — корню, остальное — `<input>` поля. */
+export type SelectAttributes = TDomAttributes<typeof SelectDescriptor, TFieldAttributes, SelectEventProps>;
+export type SelectProps = UseDomProps<typeof SelectDescriptor, ISelect, SelectEventProps, TFieldAttributes>;

package/dist/components/select/group/Group.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import type { SelectGroupProps } from './base.component';
+/**
+ * SelectGroup — опции списка панели под общей подписью.
+ * docs/agents/patterns.md, «Граница переиспользования между похожими компонентами (критично)».
+ */
+export declare function SelectGroup(props: SelectGroupProps): ReactElement | null;

package/dist/components/select/group/Group.js

@@ -0,0 +1,34 @@
+"use client";
+import { toAriaProps } from "../../../adapter/common/aria.js";
+import { toRootProps } from "../../../adapter/common/root.js";
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { Elevate } from "../../../adapter/elevator/Elevate.js";
+import { useSetupSelectGroup } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/group/Group.tsx
+/**
+* SelectGroup — опции списка панели под общей подписью.
+* docs/agents/patterns.md, «Граница переиспользования между похожими компонентами (критично)».
+*/
+function SelectGroup(props) {
+	const { ref, forwardProps, state, layer } = useSetupSelectGroup(props);
+	const { rendered, tag, label, labelAria, attrs, aria, dataset } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsxs(tag, {
+		...toRootProps(ref, state, [
+			attrs,
+			aria,
+			dataset
+		], forwardProps),
+		children: [label ? /* @__PURE__ */ jsx("div", {
+			className: "so-select-group__label",
+			...toAriaProps(labelAria),
+			children: label
+		}) : null, /* @__PURE__ */ jsx(Elevate, {
+			layer,
+			children: renderSlot(props.children)
+		})]
+	});
+}
+//#endregion
+export { SelectGroup };

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

@@ -0,0 +1,6 @@
+import type { IItemGroup } from '@soxa-ui/core';
+import type { SelectGroupDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+export type SelectGroupEventProps = EventProps<typeof SelectGroupDescriptor>;
+/** Пропсы группы: подпись — проп `label`, опции — дети. */
+export type SelectGroupProps = UseDomProps<typeof SelectGroupDescriptor, IItemGroup, SelectGroupEventProps>;

package/dist/components/select/group/index.d.ts

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

package/dist/components/select/group/setup.component.d.ts

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

package/dist/components/select/group/setup.component.js

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

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

@@ -0,0 +1,9 @@
+import { Select as SelectComponent } from './Select';
+import { SelectGroup } from './group';
+export * from './base.component';
+export * from './item';
+export * from './group';
+export declare const Select: typeof SelectComponent & {
+    Item: import("react").NamedExoticComponent<import("./item").SelectItemProps>;
+    Group: typeof SelectGroup;
+};

package/dist/components/select/index.js

@@ -0,0 +1,11 @@
+import { SelectItem } from "./item/Item.js";
+import { SelectGroup } from "./group/Group.js";
+import { Select as Select$1 } from "./Select.js";
+import { withParts } from "@soxa-ui/setup";
+//#region src/components/select/index.ts
+var Select = withParts(Select$1, {
+	Item: SelectItem,
+	Group: SelectGroup
+});
+//#endregion
+export { Select };

package/dist/components/select/item/Item.d.ts

@@ -0,0 +1,6 @@
+import type { SelectItemProps } from './base.component';
+/**
+ * SelectItem — опция списка панели: корень по `tag` и строка-опция — `ItemRow` на `span`
+ * (под этот тег написан `TSelectItem._ariaTag`).
+ */
+export declare const SelectItem: import("react").NamedExoticComponent<SelectItemProps>;

package/dist/components/select/item/Item.js

@@ -0,0 +1,58 @@
+"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 { useClickAction } from "../../../adapter/runtime/useClickAction.js";
+import { withRenderBoundary } from "../../../adapter/runtime/withRenderBoundary.js";
+import { Icon } from "../../icon/Icon.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { useSetupSelectItem } from "./setup.component.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/item/Item.tsx
+/** Отметка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+var CheckIcon = roleIcon("check");
+/**
+* SelectItem — опция списка панели: корень по `tag` и строка-опция — `ItemRow` на `span`
+* (под этот тег написан `TSelectItem._ariaTag`).
+*/
+var SelectItem = withRenderBoundary(function SelectItem(props) {
+	const { ref, forwardProps, state, context } = useSetupSelectItem(props);
+	const choose = useClickAction(() => context?.adapters.select.choose());
+	const { rendered, tag, text, disabled, size, variant, selected, indicator, aria, dataset, attrs } = state;
+	if (!rendered) return null;
+	const Tag = tag;
+	const chosen = selected ?? false;
+	const row = toControlAttrs(forwardProps);
+	const mark = /* @__PURE__ */ jsx("span", {
+		className: "so-select-item__indicator",
+		"aria-hidden": "true",
+		children: renderSlot(props["indicator-icon"], { selected: chosen }) ?? (chosen ? /* @__PURE__ */ jsx(Icon, {
+			embedded: "select.indicator",
+			tag: CheckIcon,
+			size
+		}) : null)
+	});
+	return /* @__PURE__ */ jsx(Tag, {
+		...toRootProps(ref, state, [dataset, attrs], toRootForward(forwardProps)),
+		children: /* @__PURE__ */ jsx(ItemRow, {
+			embedded: "select.row",
+			tag: "span",
+			size,
+			variant,
+			disabled,
+			...toAriaProps(aria),
+			...toAriaProps(dataset),
+			...row,
+			ref: choose,
+			leading: /* @__PURE__ */ jsxs(Fragment, { children: [indicator === "start" ? mark : null, renderSlot(props.leading)] }),
+			trailing: /* @__PURE__ */ jsxs(Fragment, { children: [renderSlot(props.trailing), indicator === "end" ? mark : null] }),
+			children: renderSlot(props.children, {
+				text: text ?? "",
+				selected: chosen
+			}) ?? text
+		})
+	});
+});
+//#endregion
+export { SelectItem };

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+import type { ISelectItem } from '@soxa-ui/core';
+import type { SelectCollectionItemDescriptor, SelectItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+export type SelectItemEventProps = EventProps<typeof SelectItemDescriptor> & EventProps<typeof SelectCollectionItemDescriptor>;
+/** Атрибуты опции: класс и стиль — корню, остальное — строке с `role="option"`. */
+export type SelectItemAttributes = TDomAttributes<typeof SelectItemDescriptor, HTMLAttributes<HTMLElement>, SelectItemEventProps>;
+export type SelectItemProps = UseDomProps<typeof SelectItemDescriptor, ISelectItem, SelectItemEventProps>;

package/dist/components/select/item/index.d.ts

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

package/dist/components/select/item/setup.component.d.ts

@@ -0,0 +1,19 @@
+import type { SelectItemProps } from './base.component';
+export declare function useSetupSelectItem(props: SelectItemProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").ISelectItem<import("@soxa-ui/core").ISelectItemProps, import("@soxa-ui/core").TSelectItemEvents>, import("@soxa-ui/core").TSelectCollectionExtensions> | undefined;
+    ref: (el: Element | null) => void;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ctrl: object & import("@soxa-ui/core").ISelectItem<import("@soxa-ui/core").ISelectItemProps, import("@soxa-ui/core").TSelectItemEvents>;
+    root: import("../../../adapter").TRootSource;
+    forwardProps: Partial<SelectItemProps>;
+    bindRef: (el: Element | null) => void;
+    state: import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").ISelectItem<import("@soxa-ui/core").ISelectItemProps, import("@soxa-ui/core").TSelectItemEvents>> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {
+        id?: string | undefined;
+    }> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {
+        readonly listItem_highlighted: boolean;
+    } & {}> & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TSelectItemCollectionFacade> & object;
+};

package/dist/components/select/item/setup.component.js

@@ -0,0 +1,23 @@
+"use client";
+import { useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useAdapterContext } from "../../../adapter/runtime/useAdapterContext.js";
+import { SelectCollectionItemDescriptor, SelectItemDescriptor, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/select/item/setup.component.ts
+function useSetupSelectItem(props) {
+	const { contexts: [adapter, item] } = useAdapterContext((create, elevator) => {
+		const adapter = create(SelectItemDescriptor(), {
+			ctrl: props.ctrl,
+			props
+		});
+		return [adapter, create(SelectCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+			adapter,
+			elevator
+		})];
+	});
+	return {
+		...useCollectionAdapter(useAdapter(adapter, props), item, props),
+		context: item.instance.context
+	};
+}
+//#endregion
+export { useSetupSelectItem };

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

@@ -0,0 +1,27 @@
+import type { SelectProps } from './base.component';
+export declare function useSetupSelect(props: SelectProps): {
+    rootElement: Element | null;
+    field: import("@soxa-ui/core").IInput;
+    layer: import("../../adapter").TElevatorLayer;
+    ref: (el: Element | null) => void;
+    plugins: import("@soxa-ui/plugins").IPluginBundle | null;
+    ctrl: object & import("@soxa-ui/core").ISelect<import("@soxa-ui/core").ISelectProps, import("@soxa-ui/core").TSelectEvents>;
+    root: import("../../adapter").TRootSource;
+    forwardProps: Partial<SelectProps>;
+    bindRef: (el: Element | null) => void;
+    state: import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").ISelect<import("@soxa-ui/core").ISelectProps, import("@soxa-ui/core").TSelectEvents>> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {
+        id?: string | undefined;
+    } & {} & {} & {} & {} & {} & {} & {
+        dismiss_enabled?: boolean | undefined;
+    } & {} & {} & {} & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {} & {
+        readonly dismiss_ownerAttribute: Record<string, string>;
+    } & {} & {
+        readonly keyboard_highlightedUid: string | number | null;
+    } & {
+        readonly editable_query: string;
+    } & {} & {}> & import("@soxa-ui/setup").TInstanceState<object & import("@soxa-ui/core").TSelectCollectionFacade> & object;
+};

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

@@ -0,0 +1,30 @@
+"use client";
+import { useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useAdapterContext } from "../../adapter/runtime/useAdapterContext.js";
+import { useRootElement } from "../../adapter/runtime/useRootElement.js";
+import { SelectCollectionDescriptor, SelectDescriptor, TCollectionExtension, TFieldControlExtension, TVirtualCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/select/setup.component.ts
+function useSetupSelect(props) {
+	const { contexts: [adapter, collectionAdapter], layer } = useAdapterContext((create, elevator) => {
+		const adapter = create(SelectDescriptor(), {
+			ctrl: props.ctrl,
+			props
+		}).use(TFieldControlExtension, { elevator });
+		return [adapter, create(SelectCollectionDescriptor(), {
+			props,
+			options: {
+				owner: adapter.instance,
+				engine: props.engine
+			}
+		}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator }).use(TVirtualCollectionExtension, { elevator })];
+	});
+	const binding = useCollectionAdapter(useAdapter(adapter, props), collectionAdapter, props);
+	return {
+		...binding,
+		rootElement: useRootElement(binding.root),
+		field: adapter.instance.field,
+		layer
+	};
+}
+//#endregion
+export { useSetupSelect };

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { SkeletonProps } from './base.component';
+/** Skeleton — заглушка поверх будущего содержимого; корень с содержимым есть всегда. */
+export declare function Skeleton(props: SkeletonProps): ReactElement;

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,23 @@
+"use client";
+import { toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { useSetupSkeleton } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+/** Skeleton — заглушка поверх будущего содержимого; корень с содержимым есть всегда. */
+function Skeleton(props) {
+	const { ref, forwardProps, state } = useSetupSkeleton(props);
+	const { tag, classes, layout_styles, present, aria, attrs } = state;
+	return /* @__PURE__ */ jsxs(tag, {
+		...toRootProps(ref, {
+			classes,
+			layout_styles
+		}, [attrs, aria], forwardProps),
+		children: [present ? /* @__PURE__ */ jsx("div", {
+			className: "so-skeleton__placeholder",
+			"aria-hidden": "true"
+		}) : null, renderSlot(props.children)]
+	});
+}
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,5 @@
+import type { ISkeleton } from '@soxa-ui/core';
+import type { SkeletonDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type SkeletonEventProps = EventProps<typeof SkeletonDescriptor>;
+export type SkeletonProps = UseDomProps<typeof SkeletonDescriptor, ISkeleton, SkeletonEventProps>;

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

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

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

@@ -0,0 +1,11 @@
+import type { SkeletonProps } from './base.component';
+export declare function useSetupSkeleton(props: SkeletonProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISkeleton, {
+    props: object & {} & {} & {};
+    events: object & {
+        "element:removed": () => void;
+        "element:ready": (element: Element) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {
+        readonly layout_styles: Record<string, string | number>;
+    };
+}>, SkeletonProps>;

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

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

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from 'react';
+import type { SliderProps } from './base.component';
+/** Slider — ползунок, ручек одна или несколько: docs/agents/patterns.md, «Готовые паттерны». */
+export declare function Slider(props: SliderProps): ReactElement | null;

package/dist/components/slider/Slider.js

@@ -0,0 +1,72 @@
+"use client";
+import { toAriaProps } from "../../adapter/common/aria.js";
+import { toReactStyle, toRootProps } from "../../adapter/common/root.js";
+import { renderSlot } from "../../adapter/common/slots.js";
+import { NativeInput } from "../../adapter/runtime/NativeInput.js";
+import { elevated } from "../../adapter/elevator/Elevate.js";
+import { useSetupSlider } from "./setup.component.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/slider/Slider.tsx
+/** Slider — ползунок, ручек одна или несколько: docs/agents/patterns.md, «Готовые паттерны». */
+function Slider(props) {
+	const { ref, forwardProps, state, layer } = useSetupSlider(props);
+	const { rendered, tag, attrs, rootAria, dataset, name, disabled, thumbs, shownMarks, rangeStyle, tooltipRendered } = state;
+	if (!rendered) return null;
+	return /* @__PURE__ */ jsx(tag, {
+		...toRootProps(ref, state, [
+			attrs,
+			rootAria,
+			dataset
+		], forwardProps),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "so-slider__track",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "so-slider__range",
+					style: toReactStyle(rangeStyle)
+				}),
+				shownMarks && shownMarks.length > 0 ? /* @__PURE__ */ jsx("span", {
+					className: "so-slider__marks",
+					"aria-hidden": "true",
+					children: shownMarks.map((mark, index) => /* @__PURE__ */ jsx("span", {
+						className: "so-slider__mark",
+						style: toReactStyle(mark.style),
+						...toAriaProps(mark.dataset),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "so-slider__mark-label",
+							children: elevated(layer, renderSlot(props.mark, {
+								value: mark.value,
+								label: mark.label
+							})) ?? mark.label
+						})
+					}, index))
+				}) : null,
+				thumbs?.map((thumb, index) => /* @__PURE__ */ jsxs("span", {
+					className: "so-slider__thumb",
+					style: toReactStyle(thumb.style),
+					...toAriaProps(thumb.dataset),
+					children: [/* @__PURE__ */ jsx(NativeInput, {
+						className: "so-slider__input",
+						type: "range",
+						min: thumb.min,
+						max: thumb.max,
+						step: thumb.step,
+						name,
+						disabled,
+						...toAriaProps(thumb.aria),
+						live: { value: thumb.value }
+					}), tooltipRendered ? /* @__PURE__ */ jsx("span", {
+						className: "so-slider__tooltip",
+						"aria-hidden": "true",
+						children: elevated(layer, renderSlot(props.thumb, {
+							value: thumb.value,
+							index
+						})) ?? thumb.value
+					}) : null]
+				}, index))
+			]
+		})
+	});
+}
+//#endregion
+export { Slider };

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

@@ -0,0 +1,6 @@
+import type { ISlider } from '@soxa-ui/core';
+import type { SliderDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+export type SliderEventProps = EventProps<typeof SliderDescriptor>;
+/** Пропсы Slider: атрибуты — корню целиком, полей столько, сколько ручек. */
+export type SliderProps = UseDomProps<typeof SliderDescriptor, ISlider, SliderEventProps>;

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

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

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

@@ -0,0 +1,23 @@
+import type { SliderProps } from './base.component';
+/** Поле формы `Field` над ползунком: ошибку и ссылки на части ползунок берёт от него лифтом. */
+export declare function useSetupSlider(props: SliderProps): import("../../adapter").TComponentBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").ISlider, {
+    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 & {} & {} & {} & {} & {} & {} & {};
+}>, SliderProps>;

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

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

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

@@ -0,0 +1,5 @@
+import type { IStylable } from '@soxa-ui/core';
+import type { StylableDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseProps } from '../../types';
+export type StylableEventProps = EventProps<typeof StylableDescriptor>;
+export type StylableProps = UseProps<typeof StylableDescriptor, IStylable, StylableEventProps>;

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

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

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

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