@olddevs/ui 0.0.0-stage → 4.0.0

package/dist/components/inputs/Slider.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Label, Slider as AriaSlider, SliderOutput, SliderStateContext, SliderThumb, SliderTrack, } from "react-aria-components";
+import { useContext, useEffect, useRef } from "react";
+import { useFieldDescribedBy } from "../../hooks/useFieldDescription.js";
+import { cn } from "../../lib/cn.js";
+const DIMMED_WHEN_DISABLED = "disabled:opacity-50";
+const ROOT_CLASS = `flex w-full flex-col gap-2 ${DIMMED_WHEN_DISABLED}`;
+const TRACK_CLASS = "bg-bg-3 relative h-1.5 w-full rounded-full";
+const FILL_CLASS = "bg-accent absolute h-full rounded-full";
+const THUMB_BASE_CLASS = "border-accent bg-bg-1 size-4 cursor-grab rounded-full border-2 shadow-[var(--shadow-1)] transition-shadow " +
+    "dragging:cursor-grabbing focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2 " +
+    "disabled:cursor-not-allowed";
+const THUMB_CLASS = `${THUMB_BASE_CLASS} top-1/2`;
+const GEOMETRY = {
+    horizontal: {
+        root: ROOT_CLASS,
+        track: TRACK_CLASS,
+        fill: FILL_CLASS,
+        fillSize: "width",
+        thumb: THUMB_CLASS,
+    },
+    vertical: {
+        root: `flex h-48 w-max flex-col gap-2 ${DIMMED_WHEN_DISABLED}`,
+        track: "bg-bg-3 relative w-1.5 flex-1 self-center rounded-full",
+        fill: "bg-accent absolute bottom-0 w-full rounded-full",
+        fillSize: "height",
+        thumb: `${THUMB_BASE_CLASS} left-1/2`,
+    },
+};
+function withDisabledGroup(render) {
+    return (props, renderProps) => {
+        const merged = { ...props, "aria-disabled": renderProps.isDisabled || undefined };
+        return render ? render(merged, renderProps) : _jsx("div", { ...merged });
+    };
+}
+function Header({ label, valuePosition, formatValue, }) {
+    if (!label && valuePosition === "none")
+        return null;
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [label ? _jsx(Label, { className: "text-fg-1 text-sm", children: label }) : _jsx("span", {}), valuePosition === "side" ? (_jsx(SliderOutput, { className: "text-fg-2 text-caption font-mono", children: formatValue
+                    ? ({ state }) => state.values.map((v) => formatValue(v)).join(" — ")
+                    : undefined })) : null] }));
+}
+const WHEEL_NOTCH = 40;
+const WHEEL_IDLE_MS = 200;
+function WheelStep({ rootRef, trackRef, vertical, }) {
+    const state = useContext(SliderStateContext);
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const accumulated = useRef(0);
+    const lastWheelAt = useRef(0);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const onWheel = (event) => {
+            const current = stateRef.current;
+            if (!current || current.isDisabled || event.ctrlKey)
+                return;
+            const raw = vertical
+                ? -event.deltaY
+                : Math.abs(event.deltaX) > Math.abs(event.deltaY)
+                    ? event.deltaX
+                    : -event.deltaY;
+            if (raw === 0)
+                return;
+            const direction = raw > 0 ? 1 : -1;
+            const count = current.values.length;
+            let index = 0;
+            if (count > 1) {
+                const rect = trackRef.current?.getBoundingClientRect();
+                const along = vertical ? rect?.height : rect?.width;
+                if (rect && along) {
+                    const fraction = vertical
+                        ? 1 - (event.clientY - rect.top) / along
+                        : (event.clientX - rect.left) / along;
+                    const at = current.getThumbMinValue(0) +
+                        fraction * (current.getThumbMaxValue(0) - current.getThumbMinValue(0));
+                    index = current.values.reduce((best, value, i) => {
+                        const distance = Math.abs(value - at);
+                        const bestDistance = Math.abs(current.values[best] - at);
+                        return distance < bestDistance || (distance === bestDistance && direction > 0)
+                            ? i
+                            : best;
+                    }, 0);
+                }
+            }
+            const value = current.values[index];
+            const atEdge = direction > 0
+                ? value >= current.getThumbMaxValue(index)
+                : value <= current.getThumbMinValue(index);
+            if (atEdge)
+                return;
+            event.preventDefault();
+            const now = Date.now();
+            if (now - lastWheelAt.current > WHEEL_IDLE_MS ||
+                Math.sign(accumulated.current) === -direction) {
+                accumulated.current = 0;
+            }
+            lastWheelAt.current = now;
+            accumulated.current += raw * (event.deltaMode === 1 ? 16 : 1);
+            if (Math.abs(accumulated.current) < WHEEL_NOTCH)
+                return;
+            accumulated.current = 0;
+            current.setThumbDragging(index, true);
+            current.setThumbValue(index, value + direction * current.step);
+            current.setThumbDragging(index, false);
+        };
+        root.addEventListener("wheel", onWheel, { passive: false });
+        return () => root.removeEventListener("wheel", onWheel);
+    }, [rootRef, trackRef, vertical]);
+    return null;
+}
+export function Slider({ label, valuePosition = "side", formatValue, className, ...rest }) {
+    const describedBy = useFieldDescribedBy();
+    const geometry = GEOMETRY[rest.orientation ?? "horizontal"];
+    const rootRef = useRef(null);
+    const trackRef = useRef(null);
+    return (_jsxs(AriaSlider, { ...rest, ref: rootRef, render: withDisabledGroup(rest.render), className: cn(geometry.root, className), children: [_jsx(WheelStep, { rootRef: rootRef, trackRef: trackRef, vertical: rest.orientation === "vertical" }), _jsx(Header, { label: label, valuePosition: valuePosition, formatValue: formatValue }), _jsx(SliderTrack, { ref: trackRef, className: geometry.track, children: ({ state }) => (_jsxs(_Fragment, { children: [_jsx("div", { "data-fill": true, className: geometry.fill, style: { [geometry.fillSize]: `${state.getThumbPercent(0) * 100}%` } }), _jsx(SliderThumb, { className: geometry.thumb, ...(describedBy ? { "aria-describedby": describedBy } : {}) })] })) })] }));
+}
+export function RangeSlider({ label, valuePosition = "side", minGap = 0, formatValue, className, onChange, ...rest }) {
+    const min = rest.minValue ?? 0;
+    const max = rest.maxValue ?? 100;
+    const describedBy = useFieldDescribedBy();
+    const previous = useRef(null);
+    const rootRef = useRef(null);
+    const trackRef = useRef(null);
+    return (_jsxs(AriaSlider, { ...rest, ref: rootRef, render: withDisabledGroup(rest.render), onChange: (value) => {
+            if (minGap > 0 && Array.isArray(value) && value.length === 2) {
+                const [low, high] = value;
+                if (high - low < minGap) {
+                    const [prevLow] = (rest.value ??
+                        previous.current ??
+                        rest.defaultValue ?? [low, high]);
+                    const lowerThumbMoved = low !== prevLow;
+                    const clamped = lowerThumbMoved
+                        ? [low, Math.min(low + minGap, max)]
+                        : [Math.max(high - minGap, min), high];
+                    previous.current = clamped;
+                    onChange?.(clamped);
+                    return;
+                }
+            }
+            if (Array.isArray(value) && value.length === 2) {
+                previous.current = value;
+            }
+            onChange?.(value);
+        }, className: cn(ROOT_CLASS, className), children: [_jsx(WheelStep, { rootRef: rootRef, trackRef: trackRef, vertical: false }), _jsx(Header, { label: label, valuePosition: valuePosition, formatValue: formatValue }), _jsx(SliderTrack, { ref: trackRef, className: TRACK_CLASS, children: ({ state }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: FILL_CLASS, style: {
+                                left: `${state.getThumbPercent(0) * 100}%`,
+                                width: `${(state.getThumbPercent(1) - state.getThumbPercent(0)) * 100}%`,
+                            } }), _jsx(SliderThumb, { index: 0, className: THUMB_CLASS, ...(describedBy ? { "aria-describedby": describedBy } : {}) }), _jsx(SliderThumb, { index: 1, className: THUMB_CLASS })] })) })] }));
+}
+//# sourceMappingURL=Slider.js.map

package/dist/components/inputs/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/inputs/Slider.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/SwatchGroup.d.ts

@@ -0,0 +1,101 @@
+import { type ReactNode } from "react";
+import { type LabelHue } from "../../lib/variants.js";
+export interface SwatchOption<T extends string = string> {
+    /** Значение варианта; именно оно приходит в `onChange`. */
+    value: T;
+    /**
+     * Оттенок из палитры меток.
+     *
+     * Не задан — образец пустой: контур без заливки. Так и собирается вариант
+     * «без цвета», отдельной поддержки под него не нужно: отсутствие цвета это
+     * такой же ответ на вопрос набора, как и любой оттенок.
+     */
+    hue?: LabelHue;
+    /**
+     * Имя варианта СЛОВОМ — им он и называется для скринридера.
+     *
+     * Обязательно и отдельно от `hue`, потому что это разные величины: закраска
+     * нужна глазам, имя — слуху, имя переводится, закраска нет. Без него девять
+     * одинаковых переключателей подряд не различаются никак.
+     */
+    name: string;
+    /** Выключает один образец. */
+    disabled?: boolean;
+}
+export interface SwatchGroupProps<T extends string = string> {
+    /**
+     * Выбранное значение.
+     *
+     * Без `null`, в отличие от `RadioGroup`: набор здесь закрытый и непустой по
+     * построению, а «ничего не выбрано» выражается обычным вариантом.
+     */
+    value: T;
+    /** Вызывается при выборе образца и получает его `value`. */
+    onChange: (value: T) => void;
+    /** Вопрос, на который отвечает набор. Обязателен, как у `RadioGroup`. */
+    label: ReactNode;
+    /** Образцы набора: значение, имя и оттенок каждого. */
+    options: SwatchOption<T>[];
+    /**
+     * Сколько образцов в ряду.
+     *
+     * Число, а не `auto-fill`, и это не экономия на CSS. По столбцам ходят
+     * вертикальные стрелки, то есть компонент обязан знать их количество; при
+     * `auto-fill` он узнавал бы его только замером, и клавиатура молча менялась
+     * бы от ширины контейнера — на узком экране «вниз» уводило бы не туда, куда
+     * показывает глаз.
+     */
+    columns?: number;
+    /**
+     * Показывать имя варианта подсказкой при наведении и при фокусе.
+     *
+     * Содержимое — то же `name`, что уходит скринридеру: имя переводит
+     * потребитель, и кит про язык ничего не знает. Своего темпа у подсказки нет,
+     * задержку задаёт общий `TooltipProvider`.
+     *
+     * ВЫКЛЮЧЕНО ПО УМОЛЧАНИЮ, и это не осторожность ради осторожности: подсказка
+     * требует `TooltipProvider` в приложении — без него Radix бросает на первом
+     * же варианте. Набор выпущен раньше подсказки и уже стоит у потребителей без
+     * провайдера; умолчание «включено» уронило бы их на обновлении патча.
+     *
+     * Проп на ГРУППЕ, а не на варианте: набор обязан вести себя одинаково, и
+     * подсказка у трёх образцов из девяти читалась бы как поломка.
+     *
+     * На касании подсказки не будет: так устроен сам жест, а не эта реализация.
+     * Имя варианта там по-прежнему доступно только на слух.
+     */
+    tooltips?: boolean;
+    /** Выключает весь набор. */
+    disabled?: boolean;
+    /** Классы на корневой элемент. */
+    className?: string;
+}
+/**
+ * Выбор одного значения из закрытого набора, где вариант показан ОБРАЗЦОМ
+ * ЦВЕТА, а не текстом: цвет проекта, оттенок метки, цвет календаря.
+ *
+ * ПОЧЕМУ ЭТО НЕ `RadioGroup` С КРУЖКОМ ВНУТРИ. Там у варианта два круга
+ * подряд — переключатель и образец, — и на сетке из девяти это рябь, в которой
+ * цвета не сравнить. Цвет переключателя вдобавок приходит от группы тоном, а
+ * тон семантический (`danger` — «разрушительно», а не «красный»): оттенок
+ * метки в эту ось не ложится, и разводить их по вариантам нельзя — набор
+ * обязан выглядеть одинаково.
+ *
+ * ПОЧЕМУ НЕ `ColorPicker`. Тот про ПРОИЗВОЛЬНЫЙ цвет и намеренно выдаёт его
+ * мимо системы токенов; здесь нужно обратное — ключ из закрытого набора,
+ * который развернёт тема. Он вдобавок живёт отдельным входом и стоит столько
+ * же, сколько весь остальной кит.
+ *
+ * ЗАКРАСКА — ОТТЕНОК ИЗ ПАЛИТРЫ МЕТОК, А НЕ ГОТОВЫЙ КЛАСС И НЕ СТРОКА ЦВЕТА.
+ * Класс снаружи означал бы цвет мимо токенов (и не пережил бы смену темы), а
+ * строка цвета — вторую палитру рядом с уже выпущенной. Оттенков восемь, они
+ * закрыты и не зависят ни от акцента, ни от бренда.
+ *
+ * КЛАВИАТУРА — РАДИОГРУППЫ, но по сетке: Tab приводит фокус на выбранный
+ * вариант, горизонтальные стрелки идут по ряду и переходят на соседний на его
+ * краю (это делает сама радиогруппа), вертикальные ходят по столбцам через
+ * `columns`, Home и End — первый и последний вариант. Выбор применяется сразу:
+ * набор отвечает на один вопрос, и подтверждать в нём нечего.
+ */
+export declare function SwatchGroup<T extends string = string>({ value, onChange, label, options, columns, tooltips, disabled, className, }: SwatchGroupProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=SwatchGroup.d.ts.map

package/dist/components/inputs/SwatchGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchGroup.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/SwatchGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQnE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItE,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,2DAA2D;IAC3D,KAAK,EAAE,CAAC,CAAC;IACT;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD;;;;;OAKG;IACH,KAAK,EAAE,CAAC,CAAC;IACT,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,yEAAyE;IACzE,KAAK,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACrD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,OAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BAgLrB"}

package/dist/components/inputs/SwatchGroup.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Label, RadioButton, RadioField, RadioGroup as AriaRadioGroup, } from "react-aria-components";
+import { cn } from "../../lib/cn.js";
+import { LABEL_BG_CLASS } from "../../lib/variants.js";
+import { Tooltip } from "../overlays/Tooltip.js";
+import { VisuallyHidden } from "../content/VisuallyHidden.js";
+const SWATCH_CLASS = "block size-6 rounded-full";
+const EMPTY_SWATCH_CLASS = "border-line border bg-transparent";
+const OPTION_CLASS = "block cursor-pointer rounded-full p-1 transition-shadow disabled:cursor-default " +
+    "disabled:opacity-50";
+export function SwatchGroup({ value, onChange, label, options, columns = 6, tooltips, disabled, className, }) {
+    const gridRef = useRef(null);
+    const onKeyDownCapture = (event) => {
+        const owned = event.key === "ArrowUp" ||
+            event.key === "ArrowDown" ||
+            event.key === "Home" ||
+            event.key === "End";
+        if (!owned)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (disabled)
+            return;
+        const lastEnabled = () => {
+            for (let index = options.length - 1; index >= 0; index--)
+                if (options[index]?.disabled !== true)
+                    return index;
+            return -1;
+        };
+        const focused = gridRef.current?.contains(document.activeElement)
+            ? document.activeElement.value
+            : value;
+        const from = options.findIndex((option) => option.value === focused);
+        const step = event.key === "ArrowDown" ? columns : event.key === "ArrowUp" ? -columns : 0;
+        const to = event.key === "Home"
+            ? options.findIndex((option) => !option.disabled)
+            : event.key === "End"
+                ? lastEnabled()
+                : step !== 0 && from >= 0
+                    ? from + step
+                    : -1;
+        const next = options[to];
+        if (to < 0 || next == null || next.disabled || next.value === value)
+            return;
+        onChange(next.value);
+        gridRef.current
+            ?.querySelector(`input[value="${CSS.escape(next.value)}"]`)
+            ?.focus();
+    };
+    return (_jsxs(AriaRadioGroup, { value: value, onChange: (next) => onChange(next), isDisabled: disabled, className: cn("flex flex-col gap-1.5", className), children: [_jsx(Label, { className: "text-fg-2 text-[11px] font-bold tracking-wide uppercase", children: label }), _jsx("div", { ref: gridRef, onKeyDownCapture: onKeyDownCapture, className: "grid w-fit gap-1.5", style: { gridTemplateColumns: `repeat(${columns}, min-content)` }, children: options.map((option) => {
+                    const button = (_jsxs(RadioButton, { className: ({ isSelected, isFocusVisible }) => cn(OPTION_CLASS, !isSelected && "hover:ring-line hover:ring-2", isSelected && "ring-fg-0 ring-2", isFocusVisible && "outline-accent-strong outline-2 outline-offset-2"), children: [_jsx(VisuallyHidden, { elementType: "span", children: option.name }), _jsx("span", { "aria-hidden": true, className: cn(SWATCH_CLASS, option.hue != null ? LABEL_BG_CLASS[option.hue] : EMPTY_SWATCH_CLASS) })] }));
+                    return (_jsx(RadioField, { value: option.value, isDisabled: option.disabled, children: tooltips ? (_jsx(Tooltip, { content: option.name, children: _jsx("span", { className: "block", children: button }) })) : (button) }, option.value));
+                }) })] }));
+}
+//# sourceMappingURL=SwatchGroup.js.map

package/dist/components/inputs/SwatchGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwatchGroup.js","sourceRoot":"","sources":["../../../src/components/inputs/SwatchGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/TagInput.d.ts

@@ -0,0 +1,45 @@
+export interface TagInputProps {
+    /** Текущие теги. */
+    value: string[];
+    /** Вызывается при добавлении и удалении тега и получает новый массив. */
+    onChange: (value: string[]) => void;
+    /** Видимая подпись над полем; служит и доступным именем, если нет `aria-label`. */
+    label?: string;
+    /** Плейсхолдер в пустом поле ввода. */
+    placeholder?: string;
+    /** Предел числа тегов. По достижении ввод выключается. */
+    max?: number;
+    /** Выключает поле ввода тега. */
+    disabled?: boolean;
+    /** Классы на корневой элемент. */
+    className?: string;
+    /** Доступное имя поля, когда видимой подписи `label` нет. */
+    "aria-label"?: string;
+    /**
+     * Своё описание поля ввода. Сливается с описанием `FormField`, а не
+     * заменяет его.
+     */
+    "aria-describedby"?: string;
+}
+/**
+ * Ввод набора тегов: печатаешь — Enter превращает в тег.
+ *
+ * Три решения, которые компонент принимает за потребителя, потому что иначе
+ * каждый экран решал бы их по-своему:
+ *
+ * 1. **Enter на пустом вводе не делает ничего.** Соблазн отправить форму велик,
+ *    но поле тегов почти всегда стоит внутри формы, и «Enter в пустом поле
+ *    отправляет» означает случайную отправку на полпути: набрал три тега,
+ *    задумался, нажал Enter по привычке — форма ушла.
+ * 2. **Дубли не добавляются.** Повторный тег ничего не значит, а на экране
+ *    выглядит как ошибка ввода. Молча игнорируем: сообщать «такой уже есть»
+ *    значит ругаться на действие, которое ничего не сломало.
+ * 3. **Backspace на пустом вводе снимает последний тег.** Идиома, знакомая по
+ *    почтовым клиентам; без неё удалять приходится мышью по крестикам.
+ *
+ * Пробел разделителем НЕ считается: теги бывают из двух слов («ночной город»),
+ * и разделять по пробелу значит запретить их вовсе. Запятая считается — её ни
+ * в одном теге не бывает, а вставка списка из буфера через неё и приходит.
+ */
+export declare function TagInput({ value, onChange, label, placeholder, max, disabled, className, "aria-describedby": ariaDescribedBy, ...rest }: TagInputProps): import("react").JSX.Element;
+//# sourceMappingURL=TagInput.d.ts.map

package/dist/components/inputs/TagInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TagInput.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,aAAa;IAC5B,oBAAoB;IACpB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,GAAG,EACH,QAAQ,EACR,SAAS,EACT,kBAAkB,EAAE,eAAe,EACnC,GAAG,IAAI,EACR,EAAE,aAAa,+BA2Jf"}

package/dist/components/inputs/TagInput.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button as AriaButton, Label, Tag, TagGroup, TagList } from "react-aria-components";
+import { CloseIcon } from "../../icons.js";
+import { useFieldDescribedBy } from "../../hooks/useFieldDescription.js";
+import { cn } from "../../lib/cn.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { FIELD_INPUT_CLASS, FIELD_SHELL_CLASS } from "../../lib/field.js";
+import { TAG_CLASS, TAG_REMOVE_CLASS } from "../../lib/tag.js";
+export function TagInput({ value, onChange, label, placeholder, max, disabled, className, "aria-describedby": ariaDescribedBy, ...rest }) {
+    const messages = useMessages();
+    const fieldDescribedBy = useFieldDescribedBy();
+    const describedBy = [ariaDescribedBy, fieldDescribedBy].filter(Boolean).join(" ") || undefined;
+    const [draft, setDraft] = useState("");
+    const full = max != null && value.length >= max;
+    const add = (raw) => {
+        const parts = raw
+            .split(",")
+            .map((t) => t.trim())
+            .filter(Boolean);
+        if (!parts.length || full)
+            return;
+        const next = [...value];
+        for (const tag of parts) {
+            if (max != null && next.length >= max)
+                break;
+            if (!next.includes(tag))
+                next.push(tag);
+        }
+        setDraft("");
+        if (next.length !== value.length)
+            onChange(next);
+    };
+    const onKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === ",") {
+            e.preventDefault();
+            if (draft.trim())
+                add(draft);
+            return;
+        }
+        if (e.key === "Backspace" && draft === "" && value.length > 0) {
+            onChange(value.slice(0, -1));
+        }
+    };
+    return (_jsxs(TagGroup, { ...rest, "aria-label": rest["aria-label"] ?? label, className: cn("flex flex-col gap-1.5", className), onRemove: (keys) => onChange(value.filter((t) => !keys.has(t))), children: [label ? _jsx(Label, { className: "text-fg-2 text-caption", children: label }) : null, _jsxs("div", { className: cn(FIELD_SHELL_CLASS, "flex flex-wrap items-center gap-1.5 py-1.5"), children: [_jsx(TagList, { items: value.map((t) => ({ id: t })), className: "contents", children: (item) => (_jsxs(Tag, { id: item.id, textValue: item.id, className: TAG_CLASS, children: [item.id, _jsx(AriaButton, { slot: "remove", "aria-label": messages.tagInput.remove, className: TAG_REMOVE_CLASS, children: _jsx(CloseIcon, { size: 12 }) })] })) }), _jsx("input", { type: "text", value: draft, "aria-describedby": describedBy, disabled: disabled, readOnly: full || undefined, placeholder: full ? undefined : placeholder, "data-disable-focus-ring": "true", "aria-label": rest["aria-label"]
+                            ? messages.tagInput.addTo({ label: String(rest["aria-label"]) })
+                            : label
+                                ? messages.tagInput.addTo({ label: String(label) })
+                                : messages.tagInput.add, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, onBlur: (e) => {
+                            if (e.currentTarget.parentElement?.contains(e.relatedTarget))
+                                return;
+                            add(draft);
+                        }, className: cn(FIELD_INPUT_CLASS, "min-w-[80px] flex-1 py-0.5") })] })] }));
+}
+//# sourceMappingURL=TagInput.js.map

package/dist/components/inputs/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.js","sourceRoot":"","sources":["../../../src/components/inputs/TagInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/TextControl.d.ts

@@ -0,0 +1,101 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export interface TextControlProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+    /** `input` — однострочное поле, `textarea` — многострочное. */
+    as?: "input" | "textarea";
+    /**
+     * Ступень высоты: `md` — 42 пикселя, `sm` — 36.
+     *
+     * Тридцать шесть — рост `Button size="md"` и пилюли-триггера `Select`: в
+     * одной строке панели управления поле до этой ступени выпадало из ряда в
+     * одиночку. Меняется ровно вертикальный отступ; рамка, скругление, тень,
+     * шрифт и строчный бокс те же.
+     *
+     * ТОЛЬКО ДЛЯ ОДНОСТРОЧНОГО ПОЛЯ. У `as="textarea"` высотой распоряжаются
+     * `rows` и `autosize`, и ступень там означала бы третью систему, спорящую с
+     * ними за одно и то же число.
+     */
+    size?: "sm" | "md";
+    /** Высота в строках. Имеет смысл только при `as="textarea"`. */
+    rows?: number;
+    /** Классы на оболочку с рамкой — ширина, скругление, внутренние отступы. */
+    shellClassName?: string;
+    /** Иконка слева внутри рамки: лупа у поиска, единица измерения у числа. */
+    icon?: ReactNode;
+    /** Элемент справа внутри рамки: кнопка очистки, счётчик символов. */
+    trailing?: ReactNode;
+    /**
+     * Подложка под значением, в той же строке: трафарет маски, подсказка формата.
+     *
+     * Не слот рядом с полем, а слой под ним — поэтому и не `icon`/`trailing`.
+     * Выравнивание держится тем, что подложка несёт тот же `FIELD_INPUT_CLASS`,
+     * что и поле, и лежит с ним в одной ячейке сетки: отступы и типографика
+     * совпадают по построению, а не по подгонке. Эталонная реализация USWDS
+     * ставит такой слой абсолютно, с необъяснённым `left: 2px`, — и ломается на
+     * первом же поле с иконкой.
+     *
+     * ЧИТАТЬ ЕЁ НЕЧЕГО: `aria-hidden` вешает сам компонент. Слой под значением
+     * повторяет то, что уже сказано подписью и подсказкой; прочитанный вслух, он
+     * дал бы «подчёркивание подчёркивание подчёркивание» посреди поля.
+     *
+     * Кликов и выделения не перехватывает — иначе поле переставало бы
+     * фокусироваться по щелчку в собственный текст.
+     *
+     * Только для однострочного поля: вместе с `autosize` не действует, потому что
+     * ту же ячейку сетки занимает зеркало, считающее высоту.
+     */
+    underlay?: ReactNode;
+    /**
+     * Растёт по содержимому. Имеет смысл только при `as="textarea"`.
+     *
+     * `rows` при этом становится МИНИМУМОМ, а не фиксированной высотой, и ручная
+     * тяга за угол выключается: две системы, одновременно распоряжающиеся высотой,
+     * дают поле, которое схлопывается после каждого нажатия.
+     */
+    autosize?: boolean;
+    /** Предел роста в строках; дальше появляется прокрутка. Только с `autosize`. */
+    maxRows?: number;
+    /**
+     * Счётчик символов. С `maxLength` показывает «N/M», без него — просто «N».
+     *
+     * Компилятор `maxLength` не требует: союзный тип ради этого сломал бы `Omit`
+     * в обёртках — тот же случай, что у `Checkbox.label`. Да и «сколько уже
+     * набрано» осмысленно само по себе, без предела.
+     */
+    showCount?: boolean;
+}
+/**
+ * Текстовое поле: рамка живёт на оболочке, а не на самом `input`.
+ *
+ * Разделение не косметическое. Рамка на оболочке позволяет положить внутрь
+ * иконку или счётчик символов, не воюя с браузерным оформлением поля; сам
+ * `input` при этом полностью обнулён (`appearance: none`, снятые тени и
+ * контуры) — иначе Safari и Chrome рисуют разное.
+ *
+ * Подсветка фокуса — на оболочке через `focus-within`, и цвет берётся из
+ * `--accent-strong`, а не из `--accent`: индикатор фокуса это не-текст под
+ * порогом 3:1, а `--accent` рассчитан на белый текст поверх и на подложке
+ * тусклее нужного.
+ *
+ * `icon` и `trailing` — те самые слоты, ради которых рамка вынесена на
+ * оболочку. Раскладка переключается на `flex` только когда слот действительно
+ * передан: голое поле обязано давать ту же разметку, что и до появления
+ * слотов, иначе визуальный бейзлайн разъезжается на компоненте, который никто
+ * не трогал.
+ *
+ * Цвет иконки задаётся на обёртке слота, а не на самой иконке: словарь
+ * `@olddevs/ui/icons` рисует `currentColor`, и потребителю, которому нужен другой
+ * цвет, достаточно передать иконку с собственным классом.
+ *
+ * ВЫКЛЮЧЕННОЕ СОСТОЯНИЕ ГАСИТСЯ НА ОБОЛОЧКЕ (см. `lib/field.ts`), а не на
+ * самом поле. `disabled:opacity-50` на `input` приглушил бы только текст, а
+ * рамка осталась бы такой же яркой, как у соседнего рабочего поля — то есть
+ * ровно того сигнала, который отличает выключенное поле от пустого, и не было
+ * бы. До этой правки состояния не было вовсе: в матрице строка «выключено»
+ * отличалась от обычной только тем, что в неё нельзя печатать.
+ *
+ * `readOnly` намеренно не гасится: поле только для чтения — это показанное
+ * значение, а не недоступный контрол, и приглушать его значит прятать данные,
+ * которые показаны специально.
+ */
+export declare const TextControl: import("react").ForwardRefExoticComponent<TextControlProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextControl.d.ts.map

package/dist/components/inputs/TextControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextControl.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/TextControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACvF,+DAA+D;IAC/D,EAAE,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,+GA0NtB,CAAC"}

package/dist/components/inputs/TextControl.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, } from "react";
+import { useFieldDescribedBy, useFieldInvalid } from "../../hooks/useFieldDescription.js";
+import { cn } from "../../lib/cn.js";
+import { FIELD_INPUT_CLASS, FIELD_INPUT_COMPACT_CLASS, FIELD_SHELL_CLASS, } from "../../lib/field.js";
+export const TextControl = forwardRef(function TextControl({ as = "input", size = "md", rows, className, shellClassName, icon, trailing, underlay, autosize, maxRows, showCount, ...rest }, ref) {
+    const Comp = as;
+    const grows = autosize === true && as === "textarea";
+    const compact = size === "sm" && as === "input" ? FIELD_INPUT_COMPACT_CLASS : undefined;
+    const [inner, setInner] = useState(() => String(rest.defaultValue ?? ""));
+    const tracks = grows || showCount === true;
+    const text = rest.value !== undefined ? String(rest.value) : inner;
+    const fieldDescribedBy = useFieldDescribedBy();
+    const fieldInvalid = useFieldInvalid();
+    const invalid = rest["aria-invalid"] ?? (fieldInvalid || undefined);
+    const describedBy = [rest["aria-describedby"], fieldDescribedBy].filter(Boolean).join(" ") || undefined;
+    const counter = showCount ? (_jsx("span", { className: "text-fg-2 shrink-0 text-[11px] tabular-nums", children: rest.maxLength != null ? `${text.length}/${rest.maxLength}` : text.length })) : null;
+    const inlineTrailing = as === "input" && counter != null ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [counter, trailing] })) : (trailing);
+    const hasSlots = icon != null || inlineTrailing != null;
+    const control = (_jsx(Comp, { ref: ref, ...(as === "textarea" && rows ? { rows } : {}), "data-disable-focus-ring": "true", className: cn(FIELD_INPUT_CLASS, as === "textarea" && !grows && "min-h-[96px] resize-y", grows && "col-start-1 row-start-1 resize-none overflow-y-auto", underlay != null && "col-start-1 row-start-1", hasSlots && "min-w-0 flex-1", compact, className), ...rest, ...(fieldDescribedBy ? { "aria-describedby": describedBy } : {}), ...(invalid != null ? { "aria-invalid": invalid } : {}), ...(tracks
+            ? {
+                onChange: (e) => {
+                    setInner(e.target.value);
+                    rest.onChange?.(e);
+                },
+            }
+            : {}) }));
+    return (_jsxs("div", { className: cn(FIELD_SHELL_CLASS, as === "textarea" && "py-0.5", hasSlots && "flex items-center gap-2", shellClassName), children: [icon != null && _jsx("span", { className: "text-fg-3 flex shrink-0 items-center", children: icon }), grows ? (_jsxs("div", { className: "grid w-full", style: maxRows != null ? { "--tc-max-rows": maxRows } : undefined, children: [control, _jsx("div", { "aria-hidden": true, className: cn(FIELD_INPUT_CLASS, "invisible col-start-1 row-start-1 break-words whitespace-pre-wrap", maxRows != null && "max-h-[calc(var(--tc-max-rows)*1lh+1.25rem)] overflow-hidden", compact, className), children: text + "\n" })] })) : underlay != null ? (_jsxs("div", { className: cn("grid w-full", hasSlots && "min-w-0 flex-1"), children: [_jsx("div", { "aria-hidden": true, className: cn(FIELD_INPUT_CLASS, "pointer-events-none col-start-1 row-start-1 overflow-hidden whitespace-pre select-none", compact, className), children: underlay }), control] })) : (control), inlineTrailing != null && (_jsx("span", { className: "flex shrink-0 items-center", children: inlineTrailing })), as === "textarea" && counter != null && (_jsx("div", { className: "flex justify-end pb-1.5", children: counter }))] }));
+});
+//# sourceMappingURL=TextControl.js.map

package/dist/components/inputs/TextControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextControl.js","sourceRoot":"","sources":["../../../src/components/inputs/TextControl.tsx"],"names":[],"mappings":"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"}