@olddevs/ui 0.0.0-stage → 4.0.0

package/src/components/app-shell/TopBar.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { forwardRef, useRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { NavigationIcon } from "../../icons.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { usePublishedHeight } from "../../lib/published-height.js";
+import { useAppShell } from "./AppShell.js";
+import { Button } from "../actions/Button.js";
+import { BUTTON_ICON_SIZE } from "../../lib/button.js";
+
+export interface TopBarProps extends Omit<ComponentPropsWithoutRef<"header">, "children"> {
+  /** Крайний левый слот: логотип, название продукта. */
+  brand?: ReactNode;
+  /** Центральный слот: поиск. Занимает свободное место. */
+  search?: ReactNode;
+  /** Действия справа: уведомления, настройки, меню пользователя. */
+  actions?: ReactNode;
+  /**
+   * Имя переменной, в которую публикуется измеренная высота шапки.
+   *
+   * Парная сторона контракта: то же имя читает `useStickyOffset` (там оно
+   * зовётся `offsetVar`), и его же по умолчанию ждёт `SelectionBar`.
+   *
+   * `null` **отключает публикацию**. Нужно там, где шапок в документе две —
+   * шапка приложения и шапка встроенного виджета: молча перебивая значение
+   * друг друга, они сдвинули бы липкие полосы на чужую высоту, причём это
+   * проявилось бы не ошибкой, а кривой раскладкой.
+   */
+  heightVar?: string | null;
+  /** Доступное имя шапки. Не задано — берётся из каталога сообщений. */
+  label?: string;
+  /** Дополнительное содержимое шапки: выводится после слота `actions`. */
+  children?: ReactNode;
+}
+
+/**
+ * Шапка приложения: бренд, поиск, действия.
+ *
+ * ПУБЛИКУЕТ СВОЮ ВЫСОТУ в CSS-переменную — то, чего до 2.1.0 кит делать не мог,
+ * потому что шапки у него не было, и контракт [ADR-0016] был односторонним:
+ * высоту публиковало приложение, кит только читал.
+ *
+ * Это НЕ отвергнутый в ADR-0016 вариант «кит измеряет шапку сам». Там кит
+ * опознавал бы чужой элемент — искал бы по селектору или атрибуту то, что
+ * приложение считает шапкой. Здесь компонент измеряет себя, и знание «какой
+ * элемент в этом приложении шапка» у кита так и не появляется. Разбор —
+ * [ADR-0019].
+ *
+ * Высота идёт в `document.documentElement`, а не в ближайшего предка: там её
+ * ищет `useStickyOffset`, и разойтись эти два места не должны.
+ */
+export const TopBar = forwardRef<HTMLElement, TopBarProps>(function TopBar(
+  { brand, search, actions, heightVar = "--topbar-h", label, className, style, children, ...rest },
+  ref
+) {
+  const messages = useMessages();
+  const { openNavigation } = useAppShell();
+  const innerRef = useRef<HTMLElement | null>(null);
+
+  // Наблюдатель, а не замер на монтировании: высота меняется от брейкпоинта,
+  // от переноса содержимого слотов и от появления второй строки в поиске —
+  // и каждый раз липкая полоса под шапкой должна переехать вместе с ней.
+  usePublishedHeight(innerRef, heightVar);
+
+  return (
+    <header
+      ref={(node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      }}
+      aria-label={label ?? messages.topbar.label}
+      className={cn(
+        "border-line-soft sticky top-0 z-30 flex items-center gap-3.5 border-b px-4 py-1.5",
+        "backdrop-blur-md md:px-7",
+        className
+      )}
+      {...rest}
+      /*
+       * Токен, а не класс: подложка шапки полупрозрачная и меняется вместе с
+       * темой без участия JS.
+       *
+       * СТОИТ ПОСЛЕ `{...rest}`, и `style` вынут из него в пропсы отдельно.
+       * Раньше было наоборот, и `style` потребителя перезаписывал атрибут
+       * целиком: шапка теряла подложку, а липкий блюр показывал уезжающий
+       * контент насквозь. Слияние `...rest.style` внутри объекта при этом
+       * выглядело работающим, хотя его результат тут же затирался.
+       */
+      style={{ background: "var(--topbar-bg)", ...style }}
+    >
+      {/*
+        Кнопка появляется САМА, когда шапка стоит в `AppShell` с навигацией:
+        каркас сообщает через контекст, как её открыть. Слотом это не сделать —
+        шапку каркас получает уже собранной потребителем и вложить в неё ничего
+        не может. Вне каркаса кнопки нет вовсе.
+      */}
+      {openNavigation ? (
+        <Button
+          variant="ghost"
+          iconOnly
+          size="sm"
+          icon={<NavigationIcon size={BUTTON_ICON_SIZE.sm} />}
+          aria-label={messages.shell.openNavigation}
+          onClick={openNavigation}
+          className="md:hidden"
+        />
+      ) : null}
+      {brand != null ? <div className="flex shrink-0 items-center">{brand}</div> : null}
+      {search != null ? <div className="min-w-0 flex-1">{search}</div> : <div className="flex-1" />}
+      {actions != null ? <div className="flex shrink-0 items-center gap-1.5">{actions}</div> : null}
+      {children}
+    </header>
+  );
+});

package/src/components/content/AspectRatio.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { ComponentPropsWithoutRef, CSSProperties } from "react";
+import { cn } from "../../lib/cn.js";
+
+export interface AspectRatioProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Отношение сторон числом: `16 / 9`, `1`, `9 / 16`.
+   *
+   * Числом, а не строкой `"16:9"`: строку пришлось бы разбирать, а ошибку в
+   * ней («16/9» вместо «16:9») компилятор не поймал бы. Арифметику же он
+   * посчитает сам.
+   */
+  ratio?: number;
+}
+
+/**
+ * Коробка с заданным отношением сторон — под превью обоев, аватары, миниатюры.
+ *
+ * Стоит на родном `aspect-ratio`, а не на приёме с `padding-bottom: 56.25%`:
+ * тот требует абсолютно позиционированного содержимого, то есть диктует
+ * раскладку внутри, и ломается на всём, что должно расти по содержимому.
+ *
+ * Отношение уходит в inline-стиль, а не в класс `aspect-[16/9]`: класс с
+ * произвольным значением Tailwind обязан увидеть в исходнике текстом, а число
+ * приходит пропом в рантайме. Тот же случай, что у многострочной обрезки
+ * в `Text`.
+ */
+export function AspectRatio({
+  ratio = 16 / 9,
+  className,
+  style,
+  children,
+  ...rest
+}: AspectRatioProps) {
+  return (
+    <div
+      className={cn("relative w-full overflow-hidden", className)}
+      style={{ aspectRatio: String(ratio), ...style } as CSSProperties}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/content/Avatar.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib/cn.js";
+import type { Size } from "../../lib/variants.js";
+import { Image } from "./Image.js";
+
+export interface AvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
+  /** Имя или логин. Инициалы и оттенок берутся отсюда. */
+  name?: string;
+  /** `md` — в списках и шапке, `lg` — в карточке профиля. */
+  size?: Extract<Size, "md" | "lg">;
+  /**
+   * Адрес фотографии. Пока она грузится, виден круг с оттенком имени; если её
+   * нет или она не загрузилась — инициалы. Пустое значение равносильно
+   * отсутствию: разметка остаётся прежней.
+   */
+  src?: string | null;
+  /**
+   * Альтернативный текст фотографии. По умолчанию — `name`; пустая строка делает фото
+   * декоративным (имя человека написано рядом). Без `src` не действует:
+   * инициалы читаются как обычный текст.
+   */
+  alt?: string;
+}
+
+/**
+ * Инициалы в круге с оттенком, выведенным из имени.
+ *
+ * Оттенок считается из первого символа, а не выбирается из палитры: аватар
+ * должен быть узнаваем и стабилен для одного и того же человека, а список
+ * людей заранее не известен.
+ *
+ * Прежняя версия принимала `size` числом пикселей. Здесь это ступень словаря:
+ * `size` во всех примитивах значит одно и то же, и один примитив не может
+ * трактовать его иначе. Обе ступени взяты из фактических вызовов (28 и 64),
+ * а не придуманы про запас.
+ */
+const SIZES = {
+  md: "h-7 w-7 text-[11px]",
+  lg: "h-16 w-16 text-[26px]",
+} as const;
+
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
+  { name: nameProp, size = "md", src, alt, className, style, ...rest },
+  ref
+) {
+  /*
+    Пустая строка — это ОТСУТСТВИЕ имени, а не имя.
+
+    Умолчание в сигнатуре срабатывает только на `undefined`, и `name=""`
+    (бэкенд отдал пользователя с пустым `displayName`) доходило до расчёта:
+    `"".charCodeAt(0)` даёт `NaN`, оттенок становился `NaN`, весь
+    `linear-gradient(... oklch(0.55 0.13 NaN) ...)` браузер отбрасывал как
+    невалидный — подложки не было, а класс `text-text-on-accent` оставался.
+    На светлой теме получался пустой круг белым по белому, в `AvatarGroup` —
+    занятое место без содержимого.
+  */
+  // Для обычной строки `||` выражает то же правило, что `hasContent` для
+  // `ReactNode`, и не спорит с типами: пустая строка и `undefined` одинаково
+  // ложны. Предикат нужен там, где пустыми бывают ещё `false` и `[]`.
+  const name = nameProp || "IV";
+  const hue = (name.charCodeAt(0) * 7) % 360;
+  const initials = name.slice(0, 2).toUpperCase();
+  // Адрес, фото по которому уже загрузилось: после этого подложка не нужна.
+  // Привязка к адресу, а не булев флаг — при смене `src` круг снова «грузится»
+  // и подложка возвращается без отдельного сброса.
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null);
+  const loaded = Boolean(src) && loadedSrc === src;
+
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        "text-text-on-accent inline-flex shrink-0 items-center justify-center rounded-full font-bold tracking-tight",
+        SIZES[size],
+        src && "relative",
+        className
+      )}
+      style={{
+        // Оттенок вычисляется из имени, поэтому классом его не выразить.
+        // Под загруженным фото подложка убрана: у PNG и SVG с прозрачным фоном
+        // оттенок имени просвечивал бы сквозь силуэт.
+        background: loaded
+          ? undefined
+          : `linear-gradient(135deg, oklch(0.55 0.13 ${hue}), oklch(0.4 0.13 ${(hue + 60) % 360}))`,
+        ...style,
+      }}
+      {...rest}
+    >
+      {src ? (
+        <>
+          {/*
+            Невидимая распорка остаётся В ПОТОКЕ: корень круга с фото получает ту
+            же базовую линию, что и с инициалами. Иначе круг с одной картинкой
+            садился бы на строку нижним краем, а круг с инициалами — текстом, и
+            в строке с соседним текстом фото и инициалы стояли бы на разной
+            высоте, а при отказе загрузки круг ещё и прыгал бы. Это нулевая
+            ширина, а не копия инициалов: копия дважды попадала бы в
+            `textContent` и в поиск по тексту у потребителя.
+          */}
+          <span aria-hidden className="invisible">
+            {"\u200B"}
+          </span>
+          {/*
+            Фото рисует `Image`, а загрузку и отказ он обрабатывает сам (ADR-0011):
+            второго обработчика `onError` здесь нет.
+
+            Подложка с оттенком остаётся на КОРНЕ, а не на фолбэке — поэтому
+            скелетон выключен: он закрыл бы её мерцанием, и между «грузится» и
+            «не загрузилось» круг менял бы вид дважды. Меняется только
+            содержимое: круг цвета имени → фото или инициалы на том же круге.
+
+            `alt` по умолчанию — имя, но НЕ подставленное «IV»: заглушка не имя
+            человека, и читать её вслух значит выдумать подпись. Без имени и без
+            `alt` фото декоративно.
+          */}
+          <Image
+            src={src}
+            alt={alt ?? nameProp ?? ""}
+            skeleton={false}
+            className="absolute inset-0 rounded-full"
+            fallback={initials}
+            onLoad={() => setLoadedSrc(src)}
+          />
+        </>
+      ) : (
+        initials
+      )}
+    </span>
+  );
+});

package/src/components/content/AvatarGroup.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { cn } from "../../lib/cn.js";
+import { Avatar } from "./Avatar.js";
+
+/** Участник стопки с фотографией. Строка в `names` — то же самое без `src`. */
+export interface AvatarGroupMember {
+  /** Имя участника: из него выводятся инициалы, оттенок и альтернативный текст аватара. */
+  name: string;
+  /** Адрес фотографии; без него или при ошибке загрузки — инициалы. */
+  src?: string | null;
+}
+
+export interface AvatarGroupProps {
+  /**
+   * Участники: имя строкой или объект `{ name, src? }`. Инициалы и оттенок
+   * Avatar выведет сам, фотографию нарисует по `src`.
+   */
+  names: Array<string | AvatarGroupMember>;
+  /**
+   * Сколько аватаров показать до «+N».
+   *
+   * Умолчание — три. Ряд из десяти перекрывающихся кругов не сообщает ни
+   * одного имени и занимает место, а число сверх предела говорит ровно то же
+   * самое короче.
+   */
+  max?: number;
+  /** Размер аватаров в стопке: `md` или `lg`. По умолчанию `md`. */
+  size?: "md" | "lg";
+  /** Классы корневого элемента. */
+  className?: string;
+  /** Доступное имя стопки для скринридера. */
+  "aria-label"?: string;
+}
+
+/**
+ * Стопка аватаров с остатком «+N».
+ *
+ * Аватары перекрываются отрицательным отступом, и порядок наложения обратный
+ * (`z-index` убывает): первый круг лежит поверх второго — иначе последний
+ * закрывал бы всех, и глаз читал бы ряд справа налево.
+ *
+ * **Список объявляется целиком, а не по кругам.** У каждого аватара нет своей
+ * подписи: скринридеру он не сообщает ничего полезного («АБ» — это не имя).
+ * Поэтому круги скрыты, а группа несёт одно имя со всеми участниками — так
+ * читающий получает список, а не набор двухбуквенных обрывков.
+ */
+export function AvatarGroup({
+  names,
+  max = 3,
+  size = "md",
+  className,
+  "aria-label": ariaLabel,
+}: AvatarGroupProps) {
+  // Единая форма участника: дальше код не различает строку и объект.
+  const members = names.map((entry) => (typeof entry === "string" ? { name: entry } : entry));
+  const shown = members.slice(0, max);
+  const rest = members.length - shown.length;
+
+  return (
+    <span
+      className={cn("inline-flex items-center", className)}
+      aria-label={ariaLabel || members.map((member) => member.name).join(", ")}
+      role="img"
+    >
+      {shown.map(({ name, src }, index) => (
+        <span
+          key={`${name}-${index}`}
+          aria-hidden
+          className={cn("ring-bg-1 relative rounded-full ring-2", index > 0 && "-ml-2")}
+          style={{ zIndex: shown.length - index }}
+        >
+          {/* `alt=""`: круг скрыт, имя объявляет группа — подпись у фото была бы вторым чтением. */}
+          <Avatar name={name} src={src} alt="" size={size} />
+        </span>
+      ))}
+      {rest > 0 ? (
+        <span
+          aria-hidden
+          className={cn(
+            // `text-fg-1`, а не `fg-2`: на подложке `bg-3` вторая ступень не держит 4.5 —
+            // поймал аудит axe. Остаток «+N» это содержимое, а не подсказка.
+            "bg-bg-3 text-fg-1 ring-bg-1 relative -ml-2 flex items-center justify-center rounded-full font-semibold ring-2",
+            size === "lg" ? "text-md h-16 w-16" : "text-caption h-7 w-7"
+          )}
+        >
+          +{rest}
+        </span>
+      ) : null}
+    </span>
+  );
+}

package/src/components/content/Badge.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { cn } from "../../lib/cn.js";
+import { TONE_TOKENS, type Tone } from "../../lib/variants.js";
+
+export interface BadgeProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  /** Что показать: число или короткая метка. */
+  children?: ReactNode;
+  /** Цветовой тон значка: `neutral`, `accent`, `success`, `warning` или `danger`. По умолчанию `danger`. */
+  tone?: Tone;
+  /**
+   * Точка вместо числа: «есть новое», без указания сколько.
+   *
+   * Нужна там, где число не помогает: значок уведомлений с «237» читается
+   * хуже, чем просто отметка о том, что смотреть есть что.
+   */
+  dot?: boolean;
+  /** Предел числа: сверх него показывается «99+». */
+  max?: number;
+  /**
+   * Положить значок поверх иконки: в правый верхний угол родителя, у которого
+   * задан `position` (обычно `relative`).
+   */
+  overlay?: boolean;
+}
+
+/**
+ * Счётчик или короткая метка.
+ *
+ * ГРАНИЦА С СОСЕДЯМИ — единственное, что здесь стоит объяснить, потому что
+ * три компонента кита выглядят похоже и означают разное:
+ *
+ *   `Badge`       — СКОЛЬКО. Число рядом с чем-то: непрочитанных пять,
+ *                   в очереди двенадцать. Само по себе не кликается.
+ *   `StatusBadge` — В КАКОМ СОСТОЯНИИ сущность: черновик, опубликован,
+ *                   ошибка. Значение из закрытого набора, не число.
+ *   `Chip count`  — счётчик ВНУТРИ фильтра: сколько найдётся, если нажать.
+ *                   Часть кликабельной пилюли, а не самостоятельный знак.
+ *
+ * Перепутать легко, и цена ошибки не косметическая: `StatusBadge` тоном
+ * сообщает состояние («ошибка» красным), а `Badge` тоном — важность. Красный
+ * счётчик рядом с иконкой означает «срочно», а не «сломалось».
+ */
+export function Badge({
+  children,
+  tone = "danger",
+  dot,
+  max = 99,
+  overlay,
+  className,
+  ...rest
+}: BadgeProps) {
+  const t = TONE_TOKENS[tone];
+
+  const content = typeof children === "number" && children > max ? `${max}+` : children;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full font-semibold",
+        t.solid,
+        dot
+          ? "size-2"
+          : // Минимальная ширина равна высоте: счётчик «1» обязан быть кругом,
+            // а не узкой таблеткой, иначе ряд значков выглядит рваным.
+            "text-caption h-4 min-w-4 px-1",
+        // Наложение — абсолютное позиционирование в углу соседа; кольцо цветом
+        // подложки отделяет значок от иконки под ним.
+        overlay && "ring-bg-1 absolute -top-1 -right-1 ring-2",
+        className
+      )}
+      {...rest}
+    >
+      {dot ? null : content}
+    </span>
+  );
+}

package/src/components/content/Card.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { cn } from "../../lib/cn.js";
+import type { Size } from "../../lib/variants.js";
+
+export interface CardProps extends ComponentPropsWithoutRef<"div"> {
+  /** Размер карточки (отступы): `sm` или `md`. По умолчанию `md`. */
+  size?: Extract<Size, "sm" | "md">;
+  /**
+   * Вывести карточку дочерним элементом, который умеет быть нажатым:
+   * `<button>`, `<a>`, `next/link`. Пропы и `ref` сливаются с потомком — идиома та же, что у
+   * `Button`.
+   *
+   * Заведено под конкретный дефект: карточка коллекции и карточка категории
+   * во фронте были `<div onClick>` без роли и без `tabIndex` — с клавиатуры
+   * они недостижимы вовсе, и скринридер о том, что сюда можно нажать, не
+   * сообщает. Таких мест во фронте нашлось десять.
+   *
+   * **`asChild` включает и вид нажимаемого**: курсор, подсветку рамки на
+   * наведении и кольцо фокуса. Иначе каждый потребитель дописывал бы это
+   * руками — то есть ровно то расхождение, ради устранения которого карточка
+   * и лежит в пакете. Карточка-контейнер (без `asChild` и без `interactive`)
+   * не меняется ни на пиксель.
+   */
+  asChild?: boolean;
+  /**
+   * Карточка нажимаема, но действие живёт внутри неё — растянутой ссылкой
+   * (`after:absolute after:inset-0`), а рядом стоят вторичные действия: меню
+   * «Ещё», кнопка избранного.
+   *
+   * Отдельный случай от `asChild`, и различает их одно правило разметки:
+   * вкладывать кнопку в кнопку нельзя — вложенная интерактивность недостижима
+   * с клавиатуры. Поэтому карточка с меню внутри не может быть кнопкой целиком:
+   * она остаётся контейнером, ссылка накрывает её площадь, а меню лежит выше
+   * по слою и остаётся отдельной целью.
+   *
+   * Идиома в пакете не новая: так же устроена пилюля `Select` — внешний бокс,
+   * растянутая по нему кнопка и крестик очистки рядом, а не внутри.
+   *
+   * Кольцо фокуса обводит всю карточку, когда сфокусирована именно растянутая
+   * ссылка (`has-[a:focus-visible]`), а не любой потомок: иначе фокус на меню
+   * обводил бы карточку целиком, обещая нажатие не туда.
+   */
+  interactive?: boolean;
+}
+
+/**
+ * Отступ и радиус движутся парой, поэтому это одна ось, а не две.
+ * Значения взяты из фактических вызовов во фронте, а не придуманы.
+ */
+const SIZES = {
+  sm: "p-[14px] rounded-md",
+  md: "p-[18px] rounded-lg",
+} as const;
+
+/**
+ * Общий вид нажимаемого: курсор и подсветка рамки с `border-soft` до
+ * `border-default` — тот же приём, что был во фронте руками.
+ */
+const INTERACTIVE = "cursor-pointer transition-colors hover:border-line";
+
+/**
+ * Слот-вариант: кольцо фокуса общее с кнопкой.
+ *
+ * `w-full text-left` здесь не косметика: `<button>` внутри сетки иначе ужмётся
+ * по содержимому и отцентрирует текст, и карточка перестанет быть карточкой.
+ */
+const AS_CHILD =
+  "w-full text-left " +
+  "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2";
+
+/** Контейнер под растянутую ссылку: ей нужна база позиционирования. */
+const CONTAINER =
+  "relative " +
+  "has-[a:focus-visible]:outline-accent-strong has-[a:focus-visible]:outline-2 " +
+  "has-[a:focus-visible]:outline-offset-2";
+
+/**
+ * Панель с рамкой и тенью.
+ *
+ * Прежняя версия принимала `padding` и `radius` отдельными числами и
+ * подставляла их в инлайн-`style` — то есть допускала любое значение и шкалы
+ * не имела. Разбор всех 16 вызовов во фронте показал, что ступеней ровно две
+ * и обе оси всегда меняются вместе: `18/16` (12 вызовов) и `14/12` (4 вызова,
+ * все в `SchedulePostCards.jsx`). Поэтому здесь одна ось `size`.
+ *
+ * Значения намеренно оставлены точными (`p-[14px]`, а не `p-3`): переезд не
+ * должен сдвигать вёрстку. Округление до круглых чисел — отдельное визуальное
+ * решение, а не часть выноса в пакет.
+ *
+ * Проп `style` прежней версии не передавался ни разу — не переносится.
+ */
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(
+  { size = "md", asChild = false, interactive = false, className, children, ...rest },
+  ref
+) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        "border-line-soft bg-bg-1 border shadow-[var(--shadow-1)]",
+        SIZES[size],
+        (asChild || interactive) && INTERACTIVE,
+        asChild && AS_CHILD,
+        !asChild && interactive && CONTAINER,
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  );
+});