@de-kit/st-ui 0.1.5 → 0.1.6

package/README.md

@@ -12,6 +12,7 @@ import {
   Input,
   TextArea,
   CheckboxInput,
+  RadioGroup,
   RadioInput,
   Spinner,
 } from '@de-kit/st-ui';
@@ -30,13 +31,31 @@ import { IconClose, LogoVisa } from '@de-kit/st-ui/icons';
 
 `global.scss` — база приложения (body, заголовки, таблицы, `.wrapper`). В чужой странице его не подключать. Шрифт Inter библиотека не везёт, его по-прежнему грузит фронтенд.
 
-Токены подключаются один раз вместе с пакетом (`import './styles/vars.scss'` в `src/index.ts`). В своих scss это обычные `var()`, `@use` не нужен. `@use '@de-kit/st-ui/vars.scss'` — только если стили собираются без JS. Миксины отдельно:
+Токены подключаются один раз вместе с пакетом (`import './styles/vars.scss'` в `src/index.ts`). В своих scss это обычные `var()`, `@use` не нужен. `@use '@de-kit/st-ui/vars.scss'` — только если стили собираются без JS.
+
+Миксины — только брейкпоинты для адаптивной вёрстки:
 
 ```scss
 @use '@de-kit/st-ui/mixins.scss' as mixins;
+
+.card {
+  padding: var(--space-2);
+
+  @include mixins.min-width(md) {
+    padding: var(--space-3);
+  }
+
+  @include mixins.max-width(sm) {
+    display: none;
+  }
+}
 ```
 
-`var(--color-black)`, `var(--font-sans)`, `var(--radius-sm)`, `var(--breakpoint-md)`. Имена как у Tailwind, значения splittest.
+`sm` 480, `md` 680, `lg` 1000, `xl` 1200. Это единственный источник: `--breakpoint-*` в `vars.scss` генерируются из того же списка, так что новый брейкпоинт в `$breakpoints` сразу даёт и миксин, и токен. Отдельный список нужен потому, что в `@media` custom properties не работают. `min-width` включает брейкпоинт, `max-width` — нет (граница `679.98px`), поэтому на ровно 680px срабатывает только `min-width`. Вместо имени можно передать размер: `min-width(900px)`. Список доступен как `mixins.$breakpoints`, значение — `mixins.breakpoint(md)`.
+
+`var(--color-foreground)`, `var(--color-primary)`, `var(--font-sans)`, `var(--radius-sm)`, `var(--breakpoint-md)`. Цвета — роли как у Tailwind v4, не пигмент: `--color-foreground` текст, `--color-background` страница, `--color-primary` / `--color-primary-foreground` залитая кнопка и текст на ней. Outline берёт `--color-foreground` (текст и рамка, фон прозрачный). `--color-accent` синий, `--color-destructive` ошибка, `--color-success` успех, `--color-warning` жёлтый — из него разбавлен фон `--color-recommended`. Тема — переопределение этих переменных, компоненты не перекрашивать. `--color-overlay` и `--color-shadow` из темы не выводятся: вуаль и тень остаются тёмными и в светлой, и в тёмной, нужен другой оттенок — переопределять их отдельно.
+
+Текст — пара токенов на размер, других размеров в splittest нет: `--text-xs` (11/15), `--text-sm` (14/20, по умолчанию почти везде), `--text-base` (16/20), `--text-lg` (18/20), `--text-2xl` (28/30), `--text-3xl` (45/50); высота строки — `--text-*--line-height`. Заголовки `global.scss` собраны из них: h1 и h2 — `2xl` (h1 с 680px — `3xl`), h3 — `lg`, h4 — `sm`. Размеры `Button` `sm` (12/16) и `lg` (16/24) в шкалу не попадают и остаются литералами. Отступы — сетка 5px: `--space-1` … `--space-6`; паддинги кнопки и инпута сняты с макета вне сетки и остаются литералами. Обводка фокуса — `--focus-ring-width`, `--focus-ring-color` и `--focus-ring-offset`, одна на `box-shadow` инпута и `outline` остальных контролов.
 
 Компонентный scss собирает sass хоста. Класс в DOM буквальный: `button`, `input`, `checkbox`, `radio`, `textarea`, `spinner`. Корень и модификаторы одинарные (`.button`, `.button--outline`). Внутренние элементы — BEM: `checkbox__input`, `textarea__counter`.
 
@@ -60,20 +79,18 @@ import { IconClose, LogoVisa } from '@de-kit/st-ui/icons';
   Дальше
   <IconArrowRight width={20} height={20} />
 </Button>
-<Button>
-  <IconSpinner className="button__icon--spin" width={20} height={20} />
-  Сохранение
-</Button>
+<Button loading>Сохранение</Button>
 ```
 
-Иконка — обычный `children`, слева или справа, какой набор нужен. Класс `button__icon--spin` крутит спиннер.
+Иконка — обычный `children`, слева или справа, какой набор нужен. `loading` оставляет подпись в потоке (`opacity: 0`) и кладёт спиннер поверх, поэтому ширина не прыгает. Ставит `aria-busy`. Пока `loading`, `<button>` получает `disabled`, у ссылки клик отменяется.
 
-| Prop        | По умолчанию |                                                    |
-| ----------- | ------------ | -------------------------------------------------- |
-| `variant`   | `default`    | `default` заливка, `outline` обводка, `link` текст |
-| `size`      | `md`         | `sm` компактная, `md` обычная, `lg` крупная        |
-| `fullWidth` | `false`      | ширина 100%, не зависит от `size`                  |
-| `href`      | —            | рендер `<a>`, не `<Link>`                          |
+| Prop        | По умолчанию |                                                     |
+| ----------- | ------------ | --------------------------------------------------- |
+| `variant`   | `default`    | `default` заливка, `outline` обводка, `link` текст  |
+| `size`      | `md`         | `sm` компактная, `md` обычная, `lg` крупная         |
+| `fullWidth` | `false`      | ширина 100%, не зависит от `size`                   |
+| `href`      | —            | рендер `<a>`, не `<Link>`                           |
+| `loading`   | `false`      | `aria-busy`, клик блокируется, ширина как у подписи |
 
 `variant="link"` — это вид кнопки (`font-weight: 400`), не тип элемента. Ссылка — отдельный проп `href`.
 
@@ -82,14 +99,39 @@ import { IconClose, LogoVisa } from '@de-kit/st-ui/icons';
 ```tsx
 <Input recommended />
 <Input error />
+<Input size="sm" />
 <TextArea maxLength={200} />
-<TextArea maxLength={200} hideCounter />
-<CheckboxInput title="18-24" />
-<RadioInput name="age" title="18–24" />
+<TextArea maxLength={200} counter={false} />
+<CheckboxInput label="18-24" />
+<CheckboxInput label="Согласен" error />
+<RadioGroup label="Возраст" name="age" required>
+  <RadioInput label="18-24" />
+</RadioGroup>
 <Spinner position="top" />
+<Spinner label="Считаем" size={24} />
+```
+
+`size` у `Input` и `TextArea` — те же `sm`, `md`, `lg`, что у кнопки. У `Input` высота совпадает с кнопкой ровно: 30, 40 и 52px, включая `type="date"`. У `TextArea` размер меняет паддинги и `min-height`: 120 / 160 / 200px, с 680px — 60 / 80 / 100px. Текст во всех размерах остаётся `--text-sm`. У `Input` проп перекрывает нативный `size` (ширину в символах). `counter={false}` заменяет опечатку `noMaxMoty`. Счётчик `TextArea` показывает остаток символов и связан с полем через `aria-describedby`, сам `maxLength` по-прежнему режет ввод. `CheckboxInput` сам ставит `id`, если его не передали. Общий `name` у радио задаёт `RadioGroup`, она же рисует `fieldset` с `role="radiogroup"`. Её `required` делает обязательной всю группу и вне `Field`: `aria-required` уезжает на группу, нативный `required` — на пункты. Красная рамка у `CheckboxInput` и `RadioInput` — это проп `error`; один `required` больше не красит, он только обязывает. `Spinner` тянется по родителю, `position` раскладывает его по высоте, а `label` (по умолчанию «Загрузка») — подпись для скринридера.
+
+## Поле
+
+`Field` оборачивает один контрол: ставит лейбл, подсказку и ошибку и связывает их через `aria-describedby`, `aria-errormessage` и `role="alert"`.
+
+```tsx
+<Field label="Имя" hint="Нельзя изменить после проверки">
+  <Input />
+</Field>
+<Field label="Почта" required error="Проверьте адрес">
+  <Input type="email" />
+</Field>
+<Field label="Возраст" required>
+  <RadioGroup name="age">
+    <RadioInput label="18-24" value="18" />
+  </RadioGroup>
+</Field>
 ```
 
-`hideCounter` заменяет опечатку `noMaxMoty`. `CheckboxInput` сам ставит `id`, если его не передали. Дефис в `title` чекбокса по-прежнему меняется на тире.
+Контрол внутри должен быть один: id он берёт у поля, поэтому свой `id` на ребёнке перебивается, а два контрола получат одинаковый. `required` ставит `aria-required` на контрол и показывает ошибку «Поле «Имя» обязательно» (свой текст — проп `requiredMessage`) в двух случаях: когда в поле что-то было, а потом не стало (стёрли текст, сняли галочку) и когда форму не пустила проверка браузера — `Field` ловит `invalid` в фазе захвата. Звёздочки у лейбла нет, обязательность видно по сообщению. У радиогруппы момента «стёрли» не бывает, поэтому её держит нативный `required` на пунктах: форма не отправится, ошибка появится после неудачной отправки и уйдёт, как только выберут вариант. Отсюда и граница: `required` поля работает с нативными контролами — `Input`, `TextArea`, `CheckboxInput`, `RadioGroup`. Произвольный ребёнок не отдаёт ни значения, ни `invalid`, и поле о его пустоте не узнает. `RadioGroup` внутри `Field` легенду не рисует: именем группы становится лейбл поля.
 
 ## Разработка
 

package/dist/components/button/button.cjs

@@ -1,44 +1,64 @@
+const require_icon_spinner = require("../../icons/icon-spinner.cjs");
 const require_cn = require("../../lib/cn.cjs");
 let react = require("react");
-require("./button.scss");
 let react_jsx_runtime = require("react/jsx-runtime");
+require("./button.scss");
 // src/components/button/button.tsx
 const styleKeys = [
 	"variant",
 	"size",
 	"fullWidth",
+	"loading",
 	"className"
 ];
-const getClassName = ({ variant = "default", size = "md", fullWidth = false, className, disabled }) => require_cn.cn("button", className, require_cn.when(variant !== "default", `button--${variant}`), require_cn.when(size !== "md", `button--${size}`), require_cn.when(fullWidth, "button--full-width"), require_cn.when(disabled, "button--disabled"));
+const getClassName = ({ variant = "default", size = "md", fullWidth = false, loading = false, className }) => require_cn.cn("button", className, require_cn.when(variant !== "default", `button--${variant}`), require_cn.when(size !== "md", `button--${size}`), require_cn.when(fullWidth, "button--full-width"), require_cn.when(loading, "button--loading"));
 const omitStyleProps = (props) => {
 	const next = {};
 	const skipped = new Set(styleKeys);
 	for (const [key, value] of Object.entries(props)) if (!skipped.has(key)) next[key] = value;
 	return next;
 };
+const renderContent = (children, loading) => {
+	if (!loading) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "button__label",
+		children
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "button__spinner",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_spinner.IconSpinner, { className: "button__icon--spin" })
+	})] });
+};
 const Button = (0, react.forwardRef)(function Button(props, ref) {
+	const { loading } = props;
 	const className = getClassName(props);
 	const { children, href, ...domProps } = omitStyleProps(props);
-	if (typeof href === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		ref,
-		href,
-		className,
-		...domProps,
-		children
-	});
+	const content = renderContent(children, loading);
+	if (typeof href === "string") {
+		const anchorProps = domProps;
+		const handleClick = (event) => {
+			event.preventDefault();
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			...anchorProps,
+			ref,
+			className,
+			"aria-busy": loading || void 0,
+			"aria-disabled": loading || void 0,
+			onClick: loading ? handleClick : anchorProps.onClick,
+			href,
+			children: content
+		});
+	}
 	const { type = "button", disabled, onClick, ...buttonProps } = domProps;
-	const handleClick = (event) => {
-		if (disabled) return;
-		onClick?.(event);
-	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...buttonProps,
 		ref,
 		className,
 		type,
-		disabled,
-		onClick: handleClick,
-		...buttonProps,
-		children
+		disabled: disabled || loading,
+		onClick,
+		"aria-busy": loading || void 0,
+		children: content
 	});
 });
 exports.Button = Button;

package/dist/components/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":["cn","when","forwardRef"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './button.scss';\n\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n  href?: undefined;\n}\n\nexport interface ButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    ButtonStyleProps {\n  href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\nconst styleKeys = ['variant', 'size', 'fullWidth', 'className'] as const;\n\nconst getClassName = ({\n  variant = 'default',\n  size = 'md',\n  fullWidth = false,\n  className,\n  disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n  cn(\n    'button',\n    className,\n    when(variant !== 'default', `button--${variant}`),\n    when(size !== 'md', `button--${size}`),\n    when(fullWidth, 'button--full-width'),\n    when(disabled, 'button--disabled'),\n  );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n  props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n  const next: Record<string, unknown> = {};\n  const skipped = new Set<string>(styleKeys);\n\n  for (const [key, value] of Object.entries(props)) {\n    if (!skipped.has(key)) next[key] = value;\n  }\n\n  return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonComponentProps\n>(function Button(props, ref) {\n  const className = getClassName(props);\n  const { children, href, ...domProps } = omitStyleProps(props);\n\n  if (typeof href === 'string') {\n    return (\n      <a\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={href}\n        className={className}\n        {...(domProps as AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  const {\n    type = 'button',\n    disabled,\n    onClick,\n    ...buttonProps\n  } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) return;\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={className}\n      type={type}\n      disabled={disabled}\n      onClick={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </button>\n  );\n});\n"],"mappings":";;;;;AAqCA,MAAM,YAAY;CAAC;CAAW;CAAQ;CAAa;AAAW;AAE9D,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,WACA,eAEAA,WAAAA,GACE,UACA,WACAC,WAAAA,KAAK,YAAY,WAAW,WAAW,SAAS,GAChDA,WAAAA,KAAK,SAAS,MAAM,WAAW,MAAM,GACrCA,WAAAA,KAAK,WAAW,oBAAoB,GACpCA,WAAAA,KAAK,UAAU,kBAAkB,CACnC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAa,UAAA,GAASC,MAAAA,WAAAA,CAGpB,SAAS,OAAO,OAAO,KAAK;CAC5B,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAE5D,IAAI,OAAO,SAAS,UAClB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACO;EACC;EACK;EACX,GAAK;EAEJ;CACA,CAAA;CAIP,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,MAAM,eAAoD,UAAS;EACjE,IAAI,UAAU;EACd,UAAU,KAAK;CACjB;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACO;EACM;EACL;EACI;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"button.cjs","names":["cn","when","IconSpinner","forwardRef"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\n\nimport { IconSpinner } from '@/icons/icon-spinner';\nimport { cn, when } from '@/lib/cn';\nimport './button.scss';\n\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n  loading?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n  href?: undefined;\n}\n\nexport interface ButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    ButtonStyleProps {\n  href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\ninterface ButtonComponent {\n  (\n    props: ButtonLinkProps & RefAttributes<HTMLAnchorElement>,\n  ): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n}\n\nconst styleKeys = [\n  'variant',\n  'size',\n  'fullWidth',\n  'loading',\n  'className',\n] as const;\n\nconst getClassName = ({\n  variant = 'default',\n  size = 'md',\n  fullWidth = false,\n  loading = false,\n  className,\n}: ButtonStyleProps) =>\n  cn(\n    'button',\n    className,\n    when(variant !== 'default', `button--${variant}`),\n    when(size !== 'md', `button--${size}`),\n    when(fullWidth, 'button--full-width'),\n    when(loading, 'button--loading'),\n  );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n  props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n  const next: Record<string, unknown> = {};\n  const skipped = new Set<string>(styleKeys);\n\n  for (const [key, value] of Object.entries(props)) {\n    if (!skipped.has(key)) next[key] = value;\n  }\n\n  return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nconst renderContent = (children: ReactNode, loading?: boolean) => {\n  if (!loading) return children;\n\n  return (\n    <>\n      <span className=\"button__label\">{children}</span>\n      <span className=\"button__spinner\">\n        <IconSpinner className=\"button__icon--spin\" />\n      </span>\n    </>\n  );\n};\n\n// forwardRef остаётся: в React 18 ref ещё не обычный проп, peer — ^18.3 || ^19.\nexport const Button = forwardRef(function Button(\n  props: ButtonComponentProps,\n  ref: ForwardedRef<HTMLButtonElement | HTMLAnchorElement>,\n) {\n  const { loading } = props;\n  const className = getClassName(props);\n  const { children, href, ...domProps } = omitStyleProps(props);\n  const content = renderContent(children, loading);\n\n  if (typeof href === 'string') {\n    const anchorProps = domProps as AnchorHTMLAttributes<HTMLAnchorElement>;\n    const handleClick: MouseEventHandler<HTMLAnchorElement> = event => {\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        {...anchorProps}\n        ref={ref as Ref<HTMLAnchorElement>}\n        className={className}\n        aria-busy={loading || undefined}\n        // Ссылку нельзя выключить нативно: клик гасим, состояние объявляем.\n        aria-disabled={loading || undefined}\n        onClick={loading ? handleClick : anchorProps.onClick}\n        href={href}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  const {\n    type = 'button',\n    disabled,\n    onClick,\n    ...buttonProps\n  } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  return (\n    <button\n      {...buttonProps}\n      ref={ref as Ref<HTMLButtonElement>}\n      className={className}\n      type={type}\n      disabled={disabled || loading}\n      onClick={onClick}\n      aria-busy={loading || undefined}\n    >\n      {content}\n    </button>\n  );\n}) as ButtonComponent;\n"],"mappings":";;;;;;AAiDA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,gBAEAA,WAAAA,GACE,UACA,WACAC,WAAAA,KAAK,YAAY,WAAW,WAAW,SAAS,GAChDA,WAAAA,KAAK,SAAS,MAAM,WAAW,MAAM,GACrCA,WAAAA,KAAK,WAAW,oBAAoB,GACpCA,WAAAA,KAAK,SAAS,iBAAiB,CACjC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAM,iBAAiB,UAAqB,YAAsB;CAChE,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EAAiB;CAAe,CAAA,GAChD,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,WAAU;EACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,aAAD,EAAa,WAAU,qBAAsB,CAAA;CACzC,CAAA,CACN,EAAA,CAAA;AAEN;AAGA,MAAa,UAAA,GAASC,MAAAA,WAAAA,CAAW,SAAS,OACxC,OACA,KACA;CACA,MAAM,EAAE,YAAY;CACpB,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAC5D,MAAM,UAAU,cAAc,UAAU,OAAO;CAE/C,IAAI,OAAO,SAAS,UAAU;EAC5B,MAAM,cAAc;EACpB,MAAM,eAAoD,UAAS;GACjE,MAAM,eAAe;EACvB;EAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GACE,GAAI;GACC;GACM;GACX,aAAW,WAAW,KAAA;GAEtB,iBAAe,WAAW,KAAA;GAC1B,SAAS,UAAU,cAAc,YAAY;GACvC;GAEL,UAAA;EACA,CAAA;CAEP;CAEA,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,GAAI;EACC;EACM;EACL;EACN,UAAU,YAAY;EACb;EACT,aAAW,WAAW,KAAA;EAErB,UAAA;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/button/button.d.cts

@@ -1,10 +1,11 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
 export type ButtonVariant = 'default' | 'outline' | 'link';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonStyleProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   fullWidth?: boolean;
+  loading?: boolean;
   className?: string;
   children?: ReactNode;
 }
@@ -15,6 +16,10 @@ export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEle
   href: string;
 }
 export type ButtonComponentProps = ButtonProps | ButtonLinkProps;
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonComponentProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+interface ButtonComponent {
+  (props: ButtonLinkProps & RefAttributes<HTMLAnchorElement>): ReactElement | null;
+  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+}
+export declare const Button: ButtonComponent;
 export {};
 //# sourceMappingURL=button.d.cts.map

package/dist/components/button/button.d.ts

@@ -1,10 +1,11 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
 export type ButtonVariant = 'default' | 'outline' | 'link';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonStyleProps {
   variant?: ButtonVariant;
   size?: ButtonSize;
   fullWidth?: boolean;
+  loading?: boolean;
   className?: string;
   children?: ReactNode;
 }
@@ -15,6 +16,10 @@ export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEle
   href: string;
 }
 export type ButtonComponentProps = ButtonProps | ButtonLinkProps;
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonComponentProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+interface ButtonComponent {
+  (props: ButtonLinkProps & RefAttributes<HTMLAnchorElement>): ReactElement | null;
+  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;
+}
+export declare const Button: ButtonComponent;
 export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.js

@@ -1,44 +1,64 @@
+import { IconSpinner } from "../../icons/icon-spinner.js";
 import { cn, when } from "../../lib/cn.js";
 import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./button.scss";
-import { jsx } from "react/jsx-runtime";
 // src/components/button/button.tsx
 const styleKeys = [
 	"variant",
 	"size",
 	"fullWidth",
+	"loading",
 	"className"
 ];
-const getClassName = ({ variant = "default", size = "md", fullWidth = false, className, disabled }) => cn("button", className, when(variant !== "default", `button--${variant}`), when(size !== "md", `button--${size}`), when(fullWidth, "button--full-width"), when(disabled, "button--disabled"));
+const getClassName = ({ variant = "default", size = "md", fullWidth = false, loading = false, className }) => cn("button", className, when(variant !== "default", `button--${variant}`), when(size !== "md", `button--${size}`), when(fullWidth, "button--full-width"), when(loading, "button--loading"));
 const omitStyleProps = (props) => {
 	const next = {};
 	const skipped = new Set(styleKeys);
 	for (const [key, value] of Object.entries(props)) if (!skipped.has(key)) next[key] = value;
 	return next;
 };
+const renderContent = (children, loading) => {
+	if (!loading) return children;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "button__label",
+		children
+	}), /* @__PURE__ */ jsx("span", {
+		className: "button__spinner",
+		children: /* @__PURE__ */ jsx(IconSpinner, { className: "button__icon--spin" })
+	})] });
+};
 const Button = forwardRef(function Button(props, ref) {
+	const { loading } = props;
 	const className = getClassName(props);
 	const { children, href, ...domProps } = omitStyleProps(props);
-	if (typeof href === "string") return /* @__PURE__ */ jsx("a", {
-		ref,
-		href,
-		className,
-		...domProps,
-		children
-	});
+	const content = renderContent(children, loading);
+	if (typeof href === "string") {
+		const anchorProps = domProps;
+		const handleClick = (event) => {
+			event.preventDefault();
+		};
+		return /* @__PURE__ */ jsx("a", {
+			...anchorProps,
+			ref,
+			className,
+			"aria-busy": loading || void 0,
+			"aria-disabled": loading || void 0,
+			onClick: loading ? handleClick : anchorProps.onClick,
+			href,
+			children: content
+		});
+	}
 	const { type = "button", disabled, onClick, ...buttonProps } = domProps;
-	const handleClick = (event) => {
-		if (disabled) return;
-		onClick?.(event);
-	};
 	return /* @__PURE__ */ jsx("button", {
+		...buttonProps,
 		ref,
 		className,
 		type,
-		disabled,
-		onClick: handleClick,
-		...buttonProps,
-		children
+		disabled: disabled || loading,
+		onClick,
+		"aria-busy": loading || void 0,
+		children: content
 	});
 });
 export { Button };

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './button.scss';\n\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n  href?: undefined;\n}\n\nexport interface ButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    ButtonStyleProps {\n  href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\nconst styleKeys = ['variant', 'size', 'fullWidth', 'className'] as const;\n\nconst getClassName = ({\n  variant = 'default',\n  size = 'md',\n  fullWidth = false,\n  className,\n  disabled,\n}: ButtonStyleProps & { disabled?: boolean }) =>\n  cn(\n    'button',\n    className,\n    when(variant !== 'default', `button--${variant}`),\n    when(size !== 'md', `button--${size}`),\n    when(fullWidth, 'button--full-width'),\n    when(disabled, 'button--disabled'),\n  );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n  props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n  const next: Record<string, unknown> = {};\n  const skipped = new Set<string>(styleKeys);\n\n  for (const [key, value] of Object.entries(props)) {\n    if (!skipped.has(key)) next[key] = value;\n  }\n\n  return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonComponentProps\n>(function Button(props, ref) {\n  const className = getClassName(props);\n  const { children, href, ...domProps } = omitStyleProps(props);\n\n  if (typeof href === 'string') {\n    return (\n      <a\n        ref={ref as Ref<HTMLAnchorElement>}\n        href={href}\n        className={className}\n        {...(domProps as AnchorHTMLAttributes<HTMLAnchorElement>)}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  const {\n    type = 'button',\n    disabled,\n    onClick,\n    ...buttonProps\n  } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (disabled) return;\n    onClick?.(event);\n  };\n\n  return (\n    <button\n      ref={ref as Ref<HTMLButtonElement>}\n      className={className}\n      type={type}\n      disabled={disabled}\n      onClick={handleClick}\n      {...buttonProps}\n    >\n      {children}\n    </button>\n  );\n});\n"],"mappings":";;;;;AAqCA,MAAM,YAAY;CAAC;CAAW;CAAQ;CAAa;AAAW;AAE9D,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,WACA,eAEA,GACE,UACA,WACA,KAAK,YAAY,WAAW,WAAW,SAAS,GAChD,KAAK,SAAS,MAAM,WAAW,MAAM,GACrC,KAAK,WAAW,oBAAoB,GACpC,KAAK,UAAU,kBAAkB,CACnC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAa,SAAS,WAGpB,SAAS,OAAO,OAAO,KAAK;CAC5B,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAE5D,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,KAAD;EACO;EACC;EACK;EACX,GAAK;EAEJ;CACA,CAAA;CAIP,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,MAAM,eAAoD,UAAS;EACjE,IAAI,UAAU;EACd,UAAU,KAAK;CACjB;CAEA,OACE,oBAAC,UAAD;EACO;EACM;EACL;EACI;EACV,SAAS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ForwardedRef,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from 'react';\n\nimport { IconSpinner } from '@/icons/icon-spinner';\nimport { cn, when } from '@/lib/cn';\nimport './button.scss';\n\nexport type ButtonVariant = 'default' | 'outline' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\ninterface ButtonStyleProps {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n  loading?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {\n  href?: undefined;\n}\n\nexport interface ButtonLinkProps\n  extends\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,\n    ButtonStyleProps {\n  href: string;\n}\n\nexport type ButtonComponentProps = ButtonProps | ButtonLinkProps;\n\ninterface ButtonComponent {\n  (\n    props: ButtonLinkProps & RefAttributes<HTMLAnchorElement>,\n  ): ReactElement | null;\n  (props: ButtonProps & RefAttributes<HTMLButtonElement>): ReactElement | null;\n}\n\nconst styleKeys = [\n  'variant',\n  'size',\n  'fullWidth',\n  'loading',\n  'className',\n] as const;\n\nconst getClassName = ({\n  variant = 'default',\n  size = 'md',\n  fullWidth = false,\n  loading = false,\n  className,\n}: ButtonStyleProps) =>\n  cn(\n    'button',\n    className,\n    when(variant !== 'default', `button--${variant}`),\n    when(size !== 'md', `button--${size}`),\n    when(fullWidth, 'button--full-width'),\n    when(loading, 'button--loading'),\n  );\n\nconst omitStyleProps = <T extends ButtonStyleProps>(\n  props: T,\n): Omit<T, (typeof styleKeys)[number]> => {\n  const next: Record<string, unknown> = {};\n  const skipped = new Set<string>(styleKeys);\n\n  for (const [key, value] of Object.entries(props)) {\n    if (!skipped.has(key)) next[key] = value;\n  }\n\n  return next as Omit<T, (typeof styleKeys)[number]>;\n};\n\nconst renderContent = (children: ReactNode, loading?: boolean) => {\n  if (!loading) return children;\n\n  return (\n    <>\n      <span className=\"button__label\">{children}</span>\n      <span className=\"button__spinner\">\n        <IconSpinner className=\"button__icon--spin\" />\n      </span>\n    </>\n  );\n};\n\n// forwardRef остаётся: в React 18 ref ещё не обычный проп, peer — ^18.3 || ^19.\nexport const Button = forwardRef(function Button(\n  props: ButtonComponentProps,\n  ref: ForwardedRef<HTMLButtonElement | HTMLAnchorElement>,\n) {\n  const { loading } = props;\n  const className = getClassName(props);\n  const { children, href, ...domProps } = omitStyleProps(props);\n  const content = renderContent(children, loading);\n\n  if (typeof href === 'string') {\n    const anchorProps = domProps as AnchorHTMLAttributes<HTMLAnchorElement>;\n    const handleClick: MouseEventHandler<HTMLAnchorElement> = event => {\n      event.preventDefault();\n    };\n\n    return (\n      <a\n        {...anchorProps}\n        ref={ref as Ref<HTMLAnchorElement>}\n        className={className}\n        aria-busy={loading || undefined}\n        // Ссылку нельзя выключить нативно: клик гасим, состояние объявляем.\n        aria-disabled={loading || undefined}\n        onClick={loading ? handleClick : anchorProps.onClick}\n        href={href}\n      >\n        {content}\n      </a>\n    );\n  }\n\n  const {\n    type = 'button',\n    disabled,\n    onClick,\n    ...buttonProps\n  } = domProps as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  return (\n    <button\n      {...buttonProps}\n      ref={ref as Ref<HTMLButtonElement>}\n      className={className}\n      type={type}\n      disabled={disabled || loading}\n      onClick={onClick}\n      aria-busy={loading || undefined}\n    >\n      {content}\n    </button>\n  );\n}) as ButtonComponent;\n"],"mappings":";;;;;;AAiDA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,gBAAgB,EACpB,UAAU,WACV,OAAO,MACP,YAAY,OACZ,UAAU,OACV,gBAEA,GACE,UACA,WACA,KAAK,YAAY,WAAW,WAAW,SAAS,GAChD,KAAK,SAAS,MAAM,WAAW,MAAM,GACrC,KAAK,WAAW,oBAAoB,GACpC,KAAK,SAAS,iBAAiB,CACjC;AAEF,MAAM,kBACJ,UACwC;CACxC,MAAM,OAAgC,CAAC;CACvC,MAAM,UAAU,IAAI,IAAY,SAAS;CAEzC,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,IAAI,CAAC,QAAQ,IAAI,GAAG,GAAG,KAAK,OAAO;CAGrC,OAAO;AACT;AAEA,MAAM,iBAAiB,UAAqB,YAAsB;CAChE,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EAAiB;CAAe,CAAA,GAChD,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,aAAD,EAAa,WAAU,qBAAsB,CAAA;CACzC,CAAA,CACN,EAAA,CAAA;AAEN;AAGA,MAAa,SAAS,WAAW,SAAS,OACxC,OACA,KACA;CACA,MAAM,EAAE,YAAY;CACpB,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,EAAE,UAAU,MAAM,GAAG,aAAa,eAAe,KAAK;CAC5D,MAAM,UAAU,cAAc,UAAU,OAAO;CAE/C,IAAI,OAAO,SAAS,UAAU;EAC5B,MAAM,cAAc;EACpB,MAAM,eAAoD,UAAS;GACjE,MAAM,eAAe;EACvB;EAEA,OACE,oBAAC,KAAD;GACE,GAAI;GACC;GACM;GACX,aAAW,WAAW,KAAA;GAEtB,iBAAe,WAAW,KAAA;GAC1B,SAAS,UAAU,cAAc,YAAY;GACvC;GAEL,UAAA;EACA,CAAA;CAEP;CAEA,MAAM,EACJ,OAAO,UACP,UACA,SACA,GAAG,gBACD;CAEJ,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACM;EACL;EACN,UAAU,YAAY;EACb;EACT,aAAW,WAAW,KAAA;EAErB,UAAA;CACK,CAAA;AAEZ,CAAC"}

package/dist/components/button/button.scss

@@ -3,44 +3,66 @@
   width: fit-content;
   display: flex;
   align-items: center;
-  padding: 10px 20px;
+  padding: 8px 18px;
   border-radius: 30px;
-  font-size: 14px;
-  line-height: 20px;
-  background-color: var(--color-black);
-  color: var(--color-white);
-  fill: var(--color-white);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  fill: var(--color-primary-foreground);
   font-weight: bold;
   font-family: var(--font-sans);
-  border: 2px solid var(--color-black);
+  border: 2px solid var(--color-primary);
   flex-shrink: 0;
   cursor: pointer;
   transition: none;
-  gap: 5px;
+  gap: 8px;
   text-decoration: none;
 
+  &:hover:not(:active):not(:disabled) {
+    background-color: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
   &:active {
-    background-color: var(--color-neutral-200);
-    color: var(--color-neutral-500);
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
     fill: currentColor;
-    border-color: var(--color-neutral-200);
+    border-color: var(--color-muted);
   }
 
+  // pointer-events не гасим: нативный disabled и так не пускает клик, а так
+  // на кнопку можно навести тултип «почему недоступна».
   &:disabled {
-    background-color: var(--color-neutral-200);
-    color: var(--color-neutral-500);
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
     fill: currentColor;
-    border-color: var(--color-neutral-200);
+    border-color: var(--color-muted);
     cursor: default;
-    pointer-events: none;
     user-select: none;
   }
 
   &--outline {
     background-color: transparent;
-    color: var(--color-black);
+    color: var(--color-foreground);
     fill: currentColor;
-    border: 2px solid var(--color-black);
+    border: 2px solid var(--color-foreground);
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: var(--color-secondary);
+      border-color: var(--color-foreground);
+      color: var(--color-foreground);
+      fill: currentColor;
+    }
 
     &:disabled {
       background-color: transparent;
@@ -50,35 +72,51 @@
   &--link {
     border: none;
     background-color: transparent;
-    color: var(--color-black);
+    color: var(--color-foreground);
     fill: currentColor;
     border-radius: 0;
     padding: 0;
 
+    &:hover:not(:active):not(:disabled) {
+      background-color: transparent;
+      text-decoration: underline;
+    }
+
     &:active,
     &:disabled {
       background-color: transparent;
     }
   }
 
-  &--disabled {
-    background-color: var(--color-neutral-200);
-    color: var(--color-neutral-500);
-    fill: var(--color-neutral-500);
-    border-color: var(--color-neutral-200);
-    cursor: default;
+  &--loading {
+    position: relative;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+    opacity: 0;
+  }
+
+  &__spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     pointer-events: none;
-    user-select: none;
   }
 
+  // 12/16 и 16/24 у sm и lg сняты со старого макета и в шкалу --text-* не попадают.
   &--sm {
-    padding: 6px 12px;
+    padding: 5px 12px;
     font-size: 12px;
     line-height: 16px;
   }
 
   &--lg {
-    padding: 14px 24px;
+    padding: 12px 24px;
     font-size: 16px;
     line-height: 24px;
   }

package/dist/components/checkbox/checkbox.cjs

@@ -1,24 +1,66 @@
 const require_cn = require("../../lib/cn.cjs");
+const require_field_context = require("../field/field-context.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 require("./checkbox.scss");
 // src/components/checkbox/checkbox.tsx
-const CheckboxInput = (0, react.forwardRef)(function CheckboxInput({ className, id, title, hide, disabled, withCursor = true, ...props }, ref) {
+const assignRef = (ref, node) => {
+	if (typeof ref === "function") {
+		ref(node);
+		return;
+	}
+	if (ref) ref.current = node;
+};
+const mergeDescribedBy = (fromField, fromProps) => {
+	return [fromField, fromProps].filter((part) => Boolean(part)).join(" ") || void 0;
+};
+const CheckboxInput = (0, react.forwardRef)(function CheckboxInput({ className, id, label, error, disabled, clickable = true, indeterminate = false, checked, onChange, ...props }, ref) {
+	const field = require_field_context.useFieldControl();
+	const reportValue = field?.reportValue;
 	const autoId = (0, react.useId)();
-	const inputId = id ?? autoId;
+	const inputId = field?.id ?? id ?? autoId;
+	const inputRef = (0, react.useRef)(null);
+	const isInvalid = Boolean(error) || Boolean(field?.invalid);
+	const setRef = (0, react.useCallback)((node) => {
+		inputRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	(0, react.useEffect)(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	(0, react.useEffect)(() => {
+		const node = inputRef.current;
+		if (node) reportValue?.(node.checked ? "on" : "");
+	}, [checked, reportValue]);
+	const handleChange = (event) => {
+		if (checked === void 0) reportValue?.(event.target.checked ? "on" : "");
+		onChange?.(event);
+	};
+	const describedBy = field ? mergeDescribedBy(field.describedBy, props["aria-describedby"]) : void 0;
+	const fieldAttrs = {};
+	if (field?.required) {
+		fieldAttrs.required = true;
+		fieldAttrs["aria-required"] = true;
+	}
+	if (isInvalid) fieldAttrs["aria-invalid"] = true;
+	if (describedBy) fieldAttrs["aria-describedby"] = describedBy;
+	if (field?.errorId) fieldAttrs["aria-errormessage"] = field.errorId;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_cn.cn("checkbox", className, require_cn.when(hide, "checkbox--hide")),
+		className: require_cn.cn("checkbox", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			ref,
+			...props,
+			ref: setRef,
 			type: "checkbox",
 			id: inputId,
 			disabled,
-			className: require_cn.cn("checkbox__input", require_cn.when(!withCursor, "checkbox__input--no-events")),
-			...props
-		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			...checked !== void 0 ? { checked } : {},
+			onChange: handleChange,
+			className: require_cn.cn("checkbox__input", require_cn.when(!clickable, "checkbox__input--no-events")),
+			...fieldAttrs
+		}), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 			className: "checkbox__label",
 			htmlFor: inputId,
-			children: title.replaceAll("-", "–")
+			children: label
 		}) : null]
 	});
 });