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

package/dist/source/components/radio-group/index.js

@@ -0,0 +1,7 @@
+import { withParts } from '@soxa-ui/setup';
+import { RadioGroup as RadioGroupComponent } from './RadioGroup';
+import { RadioGroupItem } from './item';
+export * from './base.component';
+export { setupRadioGroup } from './setup.component';
+export * from './item';
+export const RadioGroup = withParts(RadioGroupComponent, { Item: RadioGroupItem });

package/dist/source/components/radio-group/item/Item.jsx

@@ -0,0 +1,38 @@
+import { Root, chainHandler, createPartProps, createRootProps, resolveSlot, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupRadioGroupItem } from './setup.component';
+/**
+ * Радио: корень — `label`, внутри нативный `<input type="radio">`, кольцо и подпись.
+ * Поле стоит перед кольцом: кольцо фокуса тема рисует соседним селектором от него.
+ */
+export function RadioGroupItem(props) {
+    const binding = setupRadioGroupItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    // Без `order` — AGENTS.md (Solid), «Раскладка корня»
+    const root = createRootProps(() => ({
+        state: { classes: state.classes, visible: state.visible },
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const label = resolveSlot(() => props.children, () => ({ active: state.active ?? false }));
+    const aria = createPartProps(() => state.aria);
+    /** Атрибуты поля — всё от потребителя, кроме класса и стиля; `change` — сначала выбор. */
+    const control = createPartProps(() => {
+        const { onChange, ...attributes } = toControlAttrs(binding.forwardProps());
+        const choose = () => {
+            if (context)
+                context.adapters.activation.active = true;
+        };
+        return { ...attributes, onChange: chainHandler(choose, onChange) };
+    });
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<input class="so-radio-group-item__input" type="radio" name={state.name} value={state.value} disabled={state.disabled} {...aria()} {...control()} checked={state.active}/>
+				<span class="so-radio-group-item__control">
+					<span class="so-radio-group-item__indicator"/>
+				</span>
+				<span class="so-radio-group-item__text">{label()}</span>
+			</Root>
+		</Show>);
+}

package/dist/source/components/radio-group/item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/radio-group/item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupRadioGroupItem } from './setup.component';
+export { RadioGroupItem } from './Item';

package/dist/source/components/radio-group/item/setup.component.js

@@ -0,0 +1,13 @@
+import { RadioGroupCollectionItemDescriptor, RadioGroupItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupRadioGroupItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(RadioGroupItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(RadioGroupCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

package/dist/source/components/radio-group/setup.component.js

@@ -0,0 +1,16 @@
+import { RadioGroupCollectionDescriptor, RadioGroupDescriptor, TCollectionExtension, TFieldControlExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupRadioGroup(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(RadioGroupDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    const collectionAdapter = createSolidAdapterContext(RadioGroupCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/rating/Rating.jsx

@@ -0,0 +1,44 @@
+import { Elevate, Root, createPartProps, createRootProps, fieldText, resolveSlot, roleIcon, } from '../../adapter';
+import { Index, Show } from '../../adapter/runtime/flow';
+import { setupRating } from './setup.component';
+/** Значок звезды без слота — иконка роли `star`, компонент на роль один на модуль. */
+const STAR = roleIcon('star');
+/**
+ * Оценка звёздами — ползунок с одной ручкой; всё — `span`, оценку кладут в `Label`.
+ * Значок — `svg` роли, а не Icon: иконок по две на звезду, а оценок в списке отзывов десятки.
+ */
+export function Rating(props) {
+    const binding = setupRating(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const aria = createPartProps(() => state.aria);
+    const value = fieldText(() => (state.value === undefined ? undefined : String(state.value)));
+    function icon(star, filled) {
+        const content = resolveSlot(() => props.icon, () => ({ value: star().value, filled }));
+        return <>{content() ?? <STAR class="so-rating__icon"/>}</>;
+    }
+    /** Звезда: пустой слой снизу, залитый — сверху, в обёртке, обрезанной по доле. */
+    function star(entry) {
+        return (<span class="so-rating__star" style={entry().style} aria-hidden="true">
+				{icon(entry, false)}
+				<span class="so-rating__star-fill">{icon(entry, true)}</span>
+			</span>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<span class="so-rating__track">
+						<Index each={state.stars}>{star}</Index>
+						{/* Ручка — невидимая, во весь ряд: кольцо фокуса тема рисует на ней. */}
+						<span class="so-rating__thumb">
+							<input class="so-rating__input" type="range" min="0" max={state.max} step={state.step} id={state.id} name={state.name} disabled={state.disabled} {...aria()} {...value}/>
+						</span>
+					</span>
+				</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/rating/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/rating/index.js

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

package/dist/source/components/rating/setup.component.js

@@ -0,0 +1,10 @@
+import { RatingDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+export function setupRating(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(RatingDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/scroller/Scroller.jsx

@@ -0,0 +1,40 @@
+import { Root, createPartProps, createRootProps, renderSlot, resolveSlot, roleIcon, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { setupScroller } from './setup.component';
+/** Одна стрелка на обе кнопки: роли «влево» нет, стрелку в начало строки зеркалит тема. */
+const ARROW = roleIcon('arrowRight');
+/**
+ * Лента в одну строку: кнопка «назад», вьюпорт, кнопка «вперёд».
+ * Кнопки — снаружи вьюпорта: роль ряда (`listbox` у тегов) ложится на вьюпорт, а
+ * листбокс владеет только опциями. Обёртки внутри вьюпорта нет: элементы — его
+ * прямые дети (роль ряда, снап темы, края плагина). `viewportAria` после `tabindex`:
+ * ряд с roving tabindex сам решает, кому быть остановкой. Корень ленты тема не гасит,
+ * поэтому выключенность кнопкам отдаёт разметка (`prevDisabled`, `nextDisabled`).
+ */
+export function Scroller(props) {
+    const binding = setupScroller(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const viewportAria = createPartProps(() => state.viewportAria);
+    const prevIcon = resolveSlot(() => props['prev-icon'], () => ({}));
+    const nextIcon = resolveSlot(() => props['next-icon'], () => ({}));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Button embedded="scroller.prev" type="button" class="so-scroller__prev" size={state.size} disabled={state.prevDisabled} {...state.prevAria}>
+					{prevIcon() ?? (<Icon embedded="scroller.prev-icon" tag={ARROW} size={state.size}/>)}
+				</Button>
+				<div class="so-scroller__viewport" tabindex={state.viewportTabIndex} {...viewportAria()}>
+					{renderSlot(props.children)}
+				</div>
+				<Button embedded="scroller.next" type="button" class="so-scroller__next" size={state.size} disabled={state.nextDisabled} {...state.nextAria}>
+					{nextIcon() ?? (<Icon embedded="scroller.next-icon" tag={ARROW} size={state.size}/>)}
+				</Button>
+			</Root>
+		</Show>);
+}

package/dist/source/components/scroller/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/scroller/index.js

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

package/dist/source/components/scroller/setup.component.js

@@ -0,0 +1,6 @@
+import { ScrollerDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupScroller(props) {
+    const adapter = createSolidAdapterContext(ScrollerDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/select/Select.jsx

@@ -0,0 +1,92 @@
+import { Elevate, KeyedFor, ResolvedSlot, createPartProps, createRootProps, relaySlot, renderSlot, roleIcon, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Frame } from '../frame';
+import { Icon } from '../icon';
+import { Input } from '../input';
+import { Tags } from '../tags';
+import { SelectItem } from './item';
+import { SelectGroup } from './group';
+import { setupSelect } from './setup.component';
+/** Стрелка без слота — компонент на роль: `tag` у Icon — корень, а не роль. */
+const ARROW = roleIcon('arrowDown');
+/** Опция записи; у распорки её нет. */
+function itemOf(entry) {
+    return entry.kind === 'item' ? entry.item : undefined;
+}
+/** Стиль распорки — высота пропущенных опций; у записи опции его нет. */
+function fillerStyleOf(entry) {
+    return entry.kind === 'filler' ? entry.style : undefined;
+}
+/**
+ * Поле выбора: `Input` над полем Select (`field`) и панель-Frame со списком. Набор
+ * `aria` Select и атрибуты потребителя, кроме класса и стиля, — `<input>` поля:
+ * фокус всегда на нём.
+ */
+export function Select(props) {
+    const binding = setupSelect(props);
+    const state = binding.state;
+    const field = binding.field;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const control = () => toControlAttrs(binding.forwardProps());
+    const listAria = createPartProps(() => state.listAria);
+    /** Ряд тегов — только в `multiple`: без него нет ни тегов, ни их движка. */
+    const drawTags = () => (<Show when={state.tags}>
+			{(tags) => (<Show when={state.tags_engine}>
+					{(engine) => (<ResolvedSlot content={props.tags} scope={() => ({ tags: tags(), engine: engine() })} fallback={<Tags embedded="select.tags" class="so-select__tags" ctrl={tags()} engine={engine()}/>}/>)}
+				</Show>)}
+		</Show>);
+    /** Класс стрелки — на обёртке: по нему тема её поворачивает, а `editable` открывает панель. */
+    const drawArrow = () => (<span class="so-select__arrow">
+			<ResolvedSlot content={props['arrow-icon']} fallback={<Icon embedded="select.arrow" tag={ARROW} size={state.size}/>}/>
+		</span>);
+    const drawItem = (item) => (<SelectItem ctrl={item} leading={renderSlot(props['item-leading'], { item })} trailing={renderSlot(props['item-trailing'], { item })} indicator-icon={relaySlot(props['item-indicator-icon'], { item })}>
+			{relaySlot(props.item, { item })}
+		</SelectItem>);
+    /** Запись `drawn`: опция или распорка на месте пропущенных. */
+    const drawEntry = (entry) => (<Show when={itemOf(entry())} keyed fallback={<div class="so-select__filler" aria-hidden="true" style={fillerStyleOf(entry())}/>}>
+			{drawItem}
+		</Show>);
+    const drawEntries = (section) => (<KeyedFor each={section().entries} by={(entry) => entry.key}>
+			{drawEntry}
+		</KeyedFor>);
+    const isFirst = (section) => state.drawnSections?.[0]?.key === section().key;
+    const drawSection = (section) => (<>
+			<Show when={state.groupSeparators && !isFirst(section)}>
+				<div class="so-select__separator" aria-hidden="true"/>
+			</Show>
+			<Show when={section().group} fallback={drawEntries(section)}>
+				{(group) => <SelectGroup label={group().label}>{drawEntries(section)}</SelectGroup>}
+			</Show>
+		</>);
+    return (<Show when={state.rendered}>
+			<div {...root()} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<ResolvedSlot content={props.field} scope={() => ({ field })} fallback={<Input embedded="select.field" class="so-select__field" ctrl={field} id={state.id} clear={props.clear} leading={<>
+										{drawTags()}
+										{renderSlot(props.leading)}
+									</>} trailing={<>
+										{drawArrow()}
+										{renderSlot(props.trailing)}
+									</>} {...state.aria} {...control()}/>}/>
+					<Frame embedded="select.frame" class="so-select__panel" visible={state.visible && state.open} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_placement={state.panelPlacement} anchor_flip={state.panelFlip} anchor_matchWidth={state.autoFitWidth} anchor_offset={4} {...state.panelDataset} {...state.dismiss_ownerAttribute}>
+						<Show when={state.handleRendered}>
+							<div class="so-select__handle" aria-hidden="true"/>
+						</Show>
+						{/* Options from data from the panel's first opening on (`contentRendered`) */}
+						<div class="so-select__list" {...listAria()}>
+							<ResolvedSlot content={props.children} fallback={<Show when={state.contentRendered}>
+										<KeyedFor each={state.drawnSections} by={(section) => section.key}>
+											{drawSection}
+										</KeyedFor>
+									</Show>}/>
+							<Show when={state.shown?.length === 0}>{renderSlot(props.empty)}</Show>
+						</div>
+					</Frame>
+				</Elevate>
+			</div>
+		</Show>);
+}

package/dist/source/components/select/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/select/group/Group.jsx

@@ -0,0 +1,24 @@
+import { Elevate, Root, createPartProps, createRootProps, renderSlot } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { setupSelectGroup } from './setup.component';
+/** Опции списка панели под общей подписью `label`; без подписи нет и её узла. */
+export function SelectGroup(props) {
+    const binding = setupSelectGroup(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const labelAria = createPartProps(() => state.labelAria);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Show when={state.label}>
+					<div class="so-select-group__label" {...labelAria()}>
+						{state.label}
+					</div>
+				</Show>
+				<Elevate layer={binding.layer}>{renderSlot(props.children)}</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/select/group/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/select/group/index.js

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

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

@@ -0,0 +1,10 @@
+import { SelectGroupDescriptor, TItemGroupExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../../adapter';
+export function setupSelectGroup(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(SelectGroupDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TItemGroupExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/select/index.js

@@ -0,0 +1,9 @@
+import { withParts } from '@soxa-ui/setup';
+import { Select as SelectComponent } from './Select';
+import { SelectItem } from './item';
+import { SelectGroup } from './group';
+export * from './base.component';
+export { setupSelect } from './setup.component';
+export * from './item';
+export * from './group';
+export const Select = withParts(SelectComponent, { Item: SelectItem, Group: SelectGroup });

package/dist/source/components/select/item/Item.jsx

@@ -0,0 +1,45 @@
+import { Root, clickAction, createRootProps, renderSlot, resolveSlot, roleIcon, toControlAttrs, toRootForward, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { ItemRow } from '../../item-row';
+import { Icon } from '../../icon';
+import { setupSelectItem } from './setup.component';
+/** Отметка без слота — иконка из пакета по роли, компонент на роль один на модуль. */
+const CHECK = roleIcon('check');
+/**
+ * Опция: строка — `ItemRow` на `span` с наборами `aria` и `dataset` опции
+ * (`tabindex="-1"` от `TSelectExtension` — фокус остаётся на поле), выбор — клик по строке, как у
+ * ListBox: сначала выбор, затем клик потребителя. Обёртка
+ * отметки — и у невыбранной: держит место, и строка не прыгает при выборе.
+ */
+export function SelectItem(props) {
+    const binding = setupSelectItem(props);
+    const state = binding.state;
+    const context = binding.context;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.dataset, state.attrs],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const content = resolveSlot(() => props.children, () => ({ text: state.text ?? '', selected: state.selected ?? false }));
+    const indicatorIcon = resolveSlot(() => props['indicator-icon'], () => ({ selected: state.selected ?? false }));
+    /** The row's attributes: all of the consumer's but the class and the style. */
+    const row = () => toControlAttrs(binding.forwardProps());
+    const choose = clickAction(() => context?.adapters.select.choose());
+    const mark = () => (<span class="so-select-item__indicator" aria-hidden="true">
+			{indicatorIcon() ??
+            (state.selected ? (<Icon embedded="select.indicator" tag={CHECK} size={state.size}/>) : null)}
+		</span>);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<ItemRow embedded="select.row" tag="span" size={state.size} variant={state.variant} disabled={state.disabled} {...state.aria} {...state.dataset} {...row()} ref={choose} leading={<>
+							{state.indicator === 'start' ? mark() : null}
+							{renderSlot(props.leading)}
+						</>} trailing={<>
+							{renderSlot(props.trailing)}
+							{state.indicator === 'end' ? mark() : null}
+						</>}>
+					{content() ?? state.text}
+				</ItemRow>
+			</Root>
+		</Show>);
+}

package/dist/source/components/select/item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/select/item/index.js

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

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

@@ -0,0 +1,10 @@
+import { SelectCollectionItemDescriptor, SelectItemDescriptor, TCollectionItemExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupSelectItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(SelectItemDescriptor(), { ctrl: props.ctrl, props });
+    const item = createSolidAdapterContext(SelectCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, itemBinding), context: item.instance.context };
+}

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

@@ -0,0 +1,22 @@
+import { SelectCollectionDescriptor, SelectDescriptor, TCollectionExtension, TFieldControlExtension, TVirtualCollectionExtension, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupSelect(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(SelectDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    const collectionAdapter = createSolidAdapterContext(SelectCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle })
+        .use(TCollectionExtension, { elevator })
+        .use(TVirtualCollectionExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return {
+        ...joinBindings(owner, collectionBinding),
+        field: adapter.instance.field,
+        layer,
+    };
+}

package/dist/source/components/skeleton/Skeleton.jsx

@@ -0,0 +1,22 @@
+import { Root, createRootProps, renderSlot } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupSkeleton } from './setup.component';
+/**
+ * Заглушка поверх будущего содержимого. Корень есть всегда: `rendered` и `visible`
+ * решают только, показана ли заглушка (`present`), — в раскладку корня их нет.
+ */
+export function Skeleton(props) {
+    const binding = setupSkeleton(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state: { classes: state.classes, layout_styles: state.layout_styles },
+        sets: [state.attrs, state.aria],
+        forward: binding.forwardProps(),
+    }));
+    return (<Root tag={state.tag} attributes={root} ref={binding.ref}>
+			<Show when={state.present}>
+				<div class="so-skeleton__placeholder" aria-hidden="true"/>
+			</Show>
+			{renderSlot(props.children)}
+		</Root>);
+}

package/dist/source/components/skeleton/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/skeleton/index.js

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

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

@@ -0,0 +1,6 @@
+import { SkeletonDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupSkeleton(props) {
+    const adapter = createSolidAdapterContext(SkeletonDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/slider/Slider.jsx

@@ -0,0 +1,57 @@
+import { Elevate, Root, createPartProps, createRootProps, fieldText, resolveSlot, } from '../../adapter';
+import { Index, Show } from '../../adapter/runtime/flow';
+import { setupSlider } from './setup.component';
+/**
+ * Ползунок: ручки на рельсе, заливка и метки; всё — `span`, ползунок кладут в `Label`.
+ * Дорожку, ручку и поле плагины ищут только прямыми детьми (`slide/parts.ts`).
+ */
+export function Slider(props) {
+    const binding = setupSlider(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.rootAria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    /** Метка; пустую подпись тема прячет по `:empty`. */
+    function mark(entry) {
+        const dataset = createPartProps(() => entry().dataset);
+        const label = resolveSlot(() => props.mark, () => ({ value: entry().value, label: entry().label }));
+        return (<span class="so-slider__mark" style={entry().style} {...dataset()}>
+				<span class="so-slider__mark-label">{label() ?? entry().label}</span>
+			</span>);
+    }
+    /** Подсказка — внутри ручки, едет за ней; под `aria-hidden`: значение объявляет поле. */
+    function tooltip(entry, index) {
+        const content = resolveSlot(() => props.thumb, () => ({ value: entry().value, index }));
+        return (<span class="so-slider__tooltip" aria-hidden="true">
+				{content() ?? entry().value}
+			</span>);
+    }
+    /** Ручка с нативным `range`: набор поля ядро отдаёт целиком (`aria` ручки). */
+    function thumb(entry, index) {
+        const dataset = createPartProps(() => entry().dataset);
+        const aria = createPartProps(() => entry().aria);
+        const value = fieldText(() => String(entry().value));
+        return (<span class="so-slider__thumb" style={entry().style} {...dataset()}>
+				<input class="so-slider__input" type="range" min={entry().min} max={entry().max} step={entry().step} name={state.name} disabled={state.disabled} {...aria()} {...value}/>
+				<Show when={state.tooltipRendered}>{tooltip(entry, index)}</Show>
+			</span>);
+    }
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					{/* Дорожка — ход центров ручек, её мерит плагин; рельс рисует тема. */}
+					<span class="so-slider__track">
+						<span class="so-slider__range" style={state.rangeStyle}/>
+						<Show when={(state.shownMarks?.length ?? 0) > 0}>
+							<span class="so-slider__marks" aria-hidden="true">
+								<Index each={state.shownMarks}>{mark}</Index>
+							</span>
+						</Show>
+						<Index each={state.thumbs}>{thumb}</Index>
+					</span>
+				</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/slider/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/slider/index.js

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

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

@@ -0,0 +1,10 @@
+import { SliderDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+export function setupSlider(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(SliderDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    return { ...useAdapter(adapter, props), layer };
+}

package/dist/source/components/stylable/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/stylable/index.js

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

package/dist/source/components/stylable/setup.component.js

@@ -0,0 +1,6 @@
+import { StylableDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupStylable(props) {
+    const adapter = createSolidAdapterContext(StylableDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/switch/Switch.jsx

@@ -0,0 +1,31 @@
+import { Elevate, Root, createPartProps, createRootProps, liveScope, renderSlot, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupSwitch } from './setup.component';
+/** Переключатель: нативный `<input type="checkbox">` и дорожка; всё — `span` (кладут в `Label`). */
+export function Switch(props) {
+    const binding = setupSwitch(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const aria = createPartProps(() => state.aria);
+    const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+    const scope = liveScope(() => ({ value: state.value, ctrl }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<Elevate layer={binding.layer}>
+					<input type="checkbox" id={state.id} name={state.name} disabled={state.disabled} required={state.required} {...aria()} {...control()} checked={state.value}/>
+					<span class="so-switch__track" aria-hidden="true">
+						<span class="so-switch__track--thumb">
+							<Show when={state.value} fallback={renderSlot(props.off, scope)}>
+								{renderSlot(props.on, scope)}
+							</Show>
+						</span>
+					</span>
+				</Elevate>
+			</Root>
+		</Show>);
+}

package/dist/source/components/switch/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/switch/index.js

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