@olddevs/ui 0.0.0-stage → 4.0.1

package/dist/components/content/Grid.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/cn.js";
+import { devWarn } from "../../lib/dev-warn.js";
+import { responsiveClasses, } from "../../lib/responsive.js";
+const COLUMNS_CLASS = {
+    base: {
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+        5: "grid-cols-5",
+        6: "grid-cols-6",
+    },
+    sm: {
+        1: "sm:grid-cols-1",
+        2: "sm:grid-cols-2",
+        3: "sm:grid-cols-3",
+        4: "sm:grid-cols-4",
+        5: "sm:grid-cols-5",
+        6: "sm:grid-cols-6",
+    },
+    md: {
+        1: "md:grid-cols-1",
+        2: "md:grid-cols-2",
+        3: "md:grid-cols-3",
+        4: "md:grid-cols-4",
+        5: "md:grid-cols-5",
+        6: "md:grid-cols-6",
+    },
+    lg: {
+        1: "lg:grid-cols-1",
+        2: "lg:grid-cols-2",
+        3: "lg:grid-cols-3",
+        4: "lg:grid-cols-4",
+        5: "lg:grid-cols-5",
+        6: "lg:grid-cols-6",
+    },
+    xl: {
+        1: "xl:grid-cols-1",
+        2: "xl:grid-cols-2",
+        3: "xl:grid-cols-3",
+        4: "xl:grid-cols-4",
+        5: "xl:grid-cols-5",
+        6: "xl:grid-cols-6",
+    },
+};
+const COLUMNS_LADDER = {
+    1: { base: 1 },
+    2: { base: 1, sm: 2 },
+    3: { base: 1, sm: 2, lg: 3 },
+    4: { base: 1, sm: 2, lg: 4 },
+    5: { base: 1, sm: 2, lg: 5 },
+    6: { base: 1, sm: 2, lg: 6 },
+};
+const MIN_ITEM_WIDTH_CLASS = {
+    120: "grid-cols-[repeat(auto-fill,minmax(min(100%,120px),1fr))]",
+    160: "grid-cols-[repeat(auto-fill,minmax(min(100%,160px),1fr))]",
+    200: "grid-cols-[repeat(auto-fill,minmax(min(100%,200px),1fr))]",
+    240: "grid-cols-[repeat(auto-fill,minmax(min(100%,240px),1fr))]",
+    280: "grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))]",
+    320: "grid-cols-[repeat(auto-fill,minmax(min(100%,320px),1fr))]",
+};
+const GAP_CLASS = {
+    none: "gap-0",
+    xs: "gap-2",
+    sm: "gap-3",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8",
+};
+export const Grid = forwardRef(function Grid({ columns, minItemWidth, gap = "md", as: tag = "div", className, ...rest }, ref) {
+    if (columns != null && minItemWidth != null) {
+        devWarn("Grid: both `columns` and `minItemWidth` were passed, but they are mutually exclusive " +
+            "(a fixed number of columns, or as many as fit). `minItemWidth` wins and `columns` is " +
+            "ignored. Pass only one: `columns` for a set number, `minItemWidth` for auto-fill.");
+    }
+    const template = minItemWidth != null
+        ? MIN_ITEM_WIDTH_CLASS[minItemWidth]
+        : responsiveClasses(columns != null && typeof columns === "object" ? columns : COLUMNS_LADDER[columns ?? 1], COLUMNS_CLASS);
+    const Comp = tag;
+    return (_jsx(Comp, { ref: ref, role: tag === "div" ? undefined : "list", className: cn("grid", template, GAP_CLASS[gap], className), ...rest }));
+});
+//# sourceMappingURL=Grid.js.map

package/dist/components/content/Grid.js.map

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

package/dist/components/content/Heading.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentPropsWithRef } from "react";
+import { type Numeric } from "../../lib/variants.js";
+/** Ступени шкалы, доступные заголовку. Мелкие (`xs`, `caption`) — у `Text`. */
+export type HeadingSize = "md" | "lg" | "xl" | "2xl";
+export interface HeadingProps extends ComponentPropsWithRef<"h2"> {
+    /**
+     * Уровень заголовка — понятие документа, а не размера: скринридер строит по
+     * ним оглавление страницы, и порядок обязан быть непрерывным (после `h2` не
+     * бывает `h4`).
+     */
+    level: 1 | 2 | 3 | 4;
+    /**
+     * Размер — отдельно от уровня, если нужно разойтись.
+     *
+     * Разведены намеренно. Компонент, у которого «h3 всегда меньше h2»,
+     * заставляет ломать одно ради другого: либо порядок заголовков рвут ради
+     * нужного кегля, либо ставят нужный кегль вручную мимо системы. Здесь
+     * умолчание связывает их (уровень задаёт размер), а `size` развязывает.
+     */
+    size?: HeadingSize;
+    /**
+     * Тег — на случай, когда уровень в разметке уже занят.
+     *
+     * Пример из жизни: карточка с `h3` внутри секции с `h2` переезжает в диалог,
+     * где своя шапка — уровень меняется, вид не должен.
+     */
+    as?: `h${1 | 2 | 3 | 4 | 5 | 6}`;
+    /**
+     * Начертание цифр: `tabular` — равной ширины. Та же ось, что у `Text`, и она
+     * же ответ на крупное число в заголовке — сводку дашборда, которая
+     * пересчитывается на месте.
+     */
+    numeric?: Numeric;
+}
+/**
+ * Заголовок: уровень документа и кегль — две независимые вещи.
+ *
+ * `level` обязателен и не имеет умолчания. Умолчание здесь было бы вредным:
+ * «какой это заголовок в документе» знает только тот, кто собирает страницу, а
+ * молча выбранный `h2` — это молча сломанное оглавление для скринридера.
+ */
+export declare function Heading({ level, size, as, numeric, className, ...rest }: HeadingProps): import("react").JSX.Element;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/components/content/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/content/Heading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAiB,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEpE,+EAA+E;AAC/E,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IAC/D;;;;OAIG;IACH,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAqBD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAcrF"}

package/dist/components/content/Heading.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { NUMERIC_CLASS } from "../../lib/variants.js";
+const LEVEL_SIZE = {
+    1: "2xl",
+    2: "xl",
+    3: "lg",
+    4: "md",
+};
+const SIZE_CLASS = {
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+};
+export function Heading({ level, size, as, numeric, className, ...rest }) {
+    const Comp = as ?? `h${level}`;
+    return (_jsx(Comp, { className: cn("text-fg-0 font-semibold", SIZE_CLASS[size ?? LEVEL_SIZE[level]], numeric && NUMERIC_CLASS[numeric], className), ...rest }));
+}
+//# sourceMappingURL=Heading.js.map

package/dist/components/content/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/content/Heading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAgB,MAAM,uBAAuB,CAAC;AAyCpE,MAAM,UAAU,GAAuC;IACrD,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;CACR,CAAC;AAEF,MAAM,UAAU,GAAgC;IAC9C,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AASF,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAgB;IACpF,MAAM,IAAI,GAAG,EAAE,IAAK,IAAI,KAAK,EAAY,CAAC;IAE1C,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,yBAAyB,EACzB,UAAU,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,EACrC,OAAO,IAAI,aAAa,CAAC,OAAO,CAAC,EACjC,SAAS,CACV,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/components/content/Image.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from "react";
+export interface ImageProps extends Omit<ComponentPropsWithoutRef<"img">, "className" | "loading" | "src" | "alt"> {
+    /** Адрес картинки. Пустое значение равносильно отказу загрузки — рисуется фолбэк. */
+    src?: string | null;
+    /**
+     * Альтернативный текст, обязателен.
+     *
+     * Пустая строка — законное значение и означает «картинка декоративна»:
+     * плитка обоя рядом с её названием, превью категории рядом с именем.
+     * Обязательность нужна не ради текста, а ради выбора: `alt=""` — решение,
+     * а отсутствующий атрибут — забывчивость, и скринридер в этом случае читает
+     * вслух имя файла.
+     */
+    alt: string;
+    /** Как картинка вписана в свою коробку. Не действует при `sizing="intrinsic"`. */
+    fit?: "cover" | "contain";
+    /**
+     * Кто задаёт размер — коробка или сама картинка.
+     *
+     * `fill` (умолчание) — размер известен снаружи: плитка в сетке, аватар,
+     * превью фиксированной высоты. Картинка растягивается на коробку и
+     * вписывается по `fit`.
+     *
+     * `intrinsic` — размер у картинки, коробка её обнимает. Так устроен
+     * просмотр кадра: у него нет своей высоты, есть только потолок
+     * (`max-h-[45vh]`), и вешать этот потолок нужно на КАРТИНКУ, через
+     * `imgClassName`. Повесить его на коробку нельзя: коробка обрежет кадр
+     * вместо того, чтобы его уменьшить.
+     *
+     * Разница не косметическая: в режиме `fill` картинке проставлены
+     * `h-full w-full`, то есть проценты от коробки, и коробка без собственного
+     * размера схлопывается в ноль вместе с картинкой. Ленивая загрузка при этом
+     * не стартует вовсе — браузеру нечего показывать.
+     */
+    sizing?: "fill" | "intrinsic";
+    /**
+     * Соотношение сторон коробки числом (`16 / 9`). Без него высоту задаёт
+     * раскладка снаружи — так делают все плитки, стоящие в сетке.
+     */
+    ratio?: number;
+    /**
+     * Что показать вместо картинки, когда её нет или она не загрузилась.
+     * По умолчанию — приглушённая иконка на приглушённой подложке; `null`
+     * оставляет пустую коробку.
+     *
+     * Свой узел получает только центровку и место — ни подложки, ни цвета текста
+     * ему не навязывается. Иначе фолбэк с собственным фоном (буква категории,
+     * покрашенная по её имени) не смог бы существовать: подложка умолчания
+     * закрывала бы его.
+     */
+    fallback?: ReactNode;
+    /** Скелетон под картинкой, пока она грузится. */
+    skeleton?: boolean;
+    /**
+     * Грузить сразу, без отложенной загрузки. По умолчанию загрузка отложена, но
+     * для картинки первого экрана это вредно: браузер откладывает её и ухудшает
+     * метрику LCP (Largest Contentful Paint).
+     */
+    eager?: boolean;
+    /** Классы коробки: размер, скругление, рамка. */
+    className?: string;
+    /**
+     * Классы самой картинки. В режиме `fill` нужны редко — вписывание задано
+     * `fit`; в режиме `intrinsic` именно сюда идут ограничения размера.
+     */
+    imgClassName?: string;
+    /** Инлайн-стиль картинки. Нужен там, где визуальный элемент — она, а не коробка. */
+    imgStyle?: CSSProperties;
+}
+/**
+ * Картинка со всеми тремя состояниями: грузится, загрузилась, не загрузилась.
+ *
+ * До пакета сырой `<img>` стоял в 24 файлах фронта, и каждое место решало
+ * одно и то же по-своему: `loading="lazy"` расставлен в одних и забыт в
+ * других, фолбэка при битом `src` нет нигде, скелетона нет нигде,
+ * `object-cover` с радиусом расписан заново в каждом. Расхождение такого рода
+ * видно, только если открыть 24 файла рядом, а починка стоит 24 правок.
+ *
+ * Решение стоять на обычном `<img>`, а не на `next/image` — [ADR-0011].
+ * Коротко: пакет не знает про фреймворк потребителя, а картинки продукта уже
+ * приходят с S3 в двух размерах, то есть оптимизированы там, где лежат.
+ *
+ * УСТРОЙСТВО: коробка и картинка внутри неё. Коробке — размер, скругление и
+ * рамка (`className`), картинке — вписывание. Разделение вынужденное: под
+ * скелетон и фолбэк нужен элемент, который остаётся на месте, когда самой
+ * картинки нет; иначе плитка схлопывалась бы в ноль и раскладка прыгала.
+ *
+ * `radius` отдельным пропом не заведён: коробка и так принимает `className`, а
+ * во фронте радиусов картинки семь разных (`10px`, `lg`, `xl`, `50%`, …) —
+ * шкала из трёх ступеней описывала бы не предметную область, а мешала бы ей.
+ * Та же причина, по которой числа принимает `Skeleton`.
+ */
+export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/content/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/content/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,WAAW,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,CACxC;IACC,qFAAqF;IACrF,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;;;;;;;OAQG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAOD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,KAAK,yGAsHhB,CAAC"}

package/dist/components/content/Image.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { ImageIcon } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+const FIT = {
+    cover: "object-cover",
+    contain: "object-contain",
+};
+export const Image = forwardRef(function Image({ src, alt, fit = "cover", sizing = "fill", ratio, fallback, skeleton = true, eager = false, className, imgClassName, imgStyle, style, onLoad, onError, ...rest }, ref) {
+    const [state, setState] = useState(src ? "loading" : "failed");
+    const imgRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        imgRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    useEffect(() => {
+        if (!src) {
+            setState("failed");
+            return;
+        }
+        setState("loading");
+        const node = imgRef.current;
+        if (node?.complete)
+            setState(node.naturalWidth > 0 ? "loaded" : "failed");
+    }, [src]);
+    const failed = state === "failed";
+    const intrinsic = sizing === "intrinsic";
+    const fallbackNode = fallback === undefined ? (_jsx("span", { className: "bg-bg-2 text-fg-3 flex h-full w-full items-center justify-center", children: _jsx(ImageIcon, { size: 18, strokeWidth: 1.5 }) })) : (fallback);
+    return (_jsxs("span", { className: cn("relative overflow-hidden", intrinsic ? "inline-block" : "block", className), style: ratio ? { aspectRatio: ratio, ...style } : style, children: [skeleton && !intrinsic && state === "loading" ? (_jsx("span", { "aria-hidden": true, className: "skeleton absolute inset-0 block rounded-none" })) : null, failed ? (fallbackNode ? (_jsx("span", { ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), className: cn("flex items-center justify-center", intrinsic ? "" : "absolute inset-0"), children: fallbackNode })) : null) : (_jsx("img", { ref: setRefs, src: src ?? undefined, alt: alt, loading: eager ? "eager" : "lazy", decoding: "async", style: imgStyle, className: cn("block", intrinsic ? null : cn("h-full w-full", FIT[fit]), imgClassName), onLoad: (e) => {
+                    setState("loaded");
+                    onLoad?.(e);
+                }, onError: (e) => {
+                    setState("failed");
+                    onError?.(e);
+                }, ...rest }))] }));
+});
+//# sourceMappingURL=Image.js.map

package/dist/components/content/Image.js.map

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

package/dist/components/content/Kbd.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface KbdProps extends ComponentPropsWithoutRef<"kbd"> {
+    /** `sm` — внутри пункта меню; `md` — в шпаргалке шорткатов. */
+    size?: "sm" | "md";
+}
+/**
+ * Знаки клавиш в строке — отдельными `span` пропорциональным шрифтом.
+ *
+ * В моноширинном стеке кита (SF Mono, Menlo) знака `⇧` нет, браузер берёт его
+ * из запасного шрифта, и стрелка выходит тонкой и бледной рядом с `⌘` и буквой.
+ * У `--font-sans` все четыре знака есть и одного веса; переводить
+ * на него всю подпись нельзя — буквы и цифры клавиш держат моноширинный ряд.
+ * Текст подписи не меняется: `span` без роли скринридер читает слитно.
+ *
+ * Экспорт — для меню: подсказка сочетания у пункта `Menu`, `ContextMenu` и
+ * Слэш-меню — свой `<kbd>` другого размера, а знаки в нём те же.
+ */
+export declare function keyGlyphs(children: ReactNode): ReactNode;
+/**
+ * Клавиша на клавиатуре: `⌘`, `Esc`, `⇧+D`.
+ *
+ * Тег `<kbd>` — не косметика: он объявляет содержимое пользовательским вводом,
+ * и скринридер читает его иначе, чем окружающий текст. Замена его на `<span>`
+ * со шрифтом моноширинным выглядела бы так же и не значила ничего.
+ *
+ * Шрифт берётся из токена `--font-mono`, а не из системного `monospace`:
+ * подписи клавиш почти всегда стоят рядом друг с другом (`⌘` + `K`), и разная
+ * ширина знака делает ряд рваным.
+ */
+export declare function Kbd({ size, className, children, ...rest }: KbdProps): import("react").JSX.Element;
+//# sourceMappingURL=Kbd.d.ts.map

package/dist/components/content/Kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../../src/components/content/Kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,MAAM,WAAW,QAAS,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAC/D,+DAA+D;IAC/D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AAKD;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,CAYxD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,GAAG,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BAgB1E"}

package/dist/components/content/Kbd.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const KEY_SYMBOLS = /([⌘⌥⇧⌃])/;
+export function keyGlyphs(children) {
+    if (typeof children !== "string" || !KEY_SYMBOLS.test(children))
+        return children;
+    return children.split(KEY_SYMBOLS).map((part, index) => index % 2 === 1 ? (_jsx("span", { "data-key-symbol": true, className: "font-sans", children: part }, index)) : (part));
+}
+export function Kbd({ size = "sm", className, children, ...rest }) {
+    return (_jsx("kbd", { className: cn("border-line-soft bg-bg-2 text-fg-2 inline-flex items-center justify-center rounded-xs border font-mono", size === "sm" ? "text-caption h-5 min-w-5 px-1" : "h-6 min-w-6 px-1.5 text-xs", className), ...rest, children: keyGlyphs(children) }));
+}
+//# sourceMappingURL=Kbd.js.map

package/dist/components/content/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../../src/components/content/Kbd.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAQrC,MAAM,WAAW,GAAG,UAAU,CAAC;AAc/B,MAAM,UAAU,SAAS,CAAC,QAAmB;IAC3C,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;QAAE,OAAO,QAAQ,CAAC;IACjF,OAAO,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAErD,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAChB,wCAAkC,SAAS,EAAC,WAAW,YACpD,IAAI,IADI,KAAK,CAET,CACR,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CACF,CAAC;AACJ,CAAC;AAaD,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAY;IACzE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,wGAAwG,EAIxG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,4BAA4B,EAC9E,SAAS,CACV,KACG,IAAI,YAEP,SAAS,CAAC,QAAQ,CAAC,GAChB,CACP,CAAC;AACJ,CAAC"}

package/dist/components/content/Keyboard.d.ts

@@ -0,0 +1,32 @@
+import { type KeyboardSelection } from "./keyboardEditing.js";
+export type KeyboardLayout = "en" | "ru";
+export type { KeyboardSelection } from "./keyboardEditing.js";
+export interface KeyboardProps {
+    /** Текущий текст поля, которым управляет клавиатура. */
+    value: string;
+    /** Позиция курсора или выделенный диапазон в `value`. */
+    selection: KeyboardSelection;
+    /** Вызывается с новым текстом после нажатия клавиши или удаления символа. */
+    onChange: (nextValue: string) => void;
+    /** Вызывается с новой позицией курсора или выделения после ввода. */
+    onSelectionChange: (next: KeyboardSelection) => void;
+    /** Раскладка клавиш: `en` или `ru`. */
+    layout: KeyboardLayout;
+    /** Вызывается с новой раскладкой, когда пользователь переключает язык. */
+    onLayoutChange: (nextLayout: KeyboardLayout) => void;
+    /** Подтверждает введённый запрос без синтеза DOM-события. */
+    onSubmit?: () => void;
+    /** Отключает все клавиши, ручку перемещения и кнопку закрытия. По умолчанию `false`. */
+    disabled?: boolean;
+    /** При работе указателем не уводит фокус с внешнего текстового поля. */
+    preserveFocus?: boolean;
+    /** Доступное имя панели и её заголовок; без него берётся стандартное название по раскладке. */
+    label?: string;
+    /** Доступное имя кнопки закрытия; без него берётся стандартная подпись. */
+    closeLabel?: string;
+    /** Вызывается по кнопке закрытия. Без обработчика кнопка закрытия не рисуется. */
+    onRequestClose?: () => void;
+}
+/** Экранная клавиатура управляет value и selection вызывающего поля, но не DOM-ref. */
+export declare function Keyboard({ value, selection, onChange, onSelectionChange, layout, onLayoutChange, onSubmit, disabled, preserveFocus, label, closeLabel, onRequestClose, }: KeyboardProps): import("react").JSX.Element;
+//# sourceMappingURL=Keyboard.d.ts.map

package/dist/components/content/Keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/content/Keyboard.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,SAAS,EAAE,iBAAiB,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,qEAAqE;IACrE,iBAAiB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,uCAAuC;IACvC,MAAM,EAAE,cAAc,CAAC;IACvB,0EAA0E;IAC1E,cAAc,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAmPD,uFAAuF;AACvF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,MAAM,EACN,cAAc,EACd,QAAQ,EACR,QAAgB,EAChB,aAAqB,EACrB,KAAK,EACL,UAAU,EACV,cAAc,GACf,EAAE,aAAa,+BA0Uf"}