@de-kit/st-ui 0.1.5 → 0.1.6

package/dist/components/radio/radio.js

@@ -1,27 +1,68 @@
 import { cn, when } from "../../lib/cn.js";
-import { forwardRef, useId } from "react";
+import { useFieldControl } from "../field/field-context.js";
+import { createContext, forwardRef, useContext, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./radio.scss";
 // src/components/radio/radio.tsx
-const RadioInput = forwardRef(function RadioInput({ id, className, title, error, disabled, ...props }, ref) {
+const RadioGroupStateContext = createContext(null);
+const RadioGroup = ({ label, name, required: requiredProp = false, children, className }) => {
+	const field = useFieldControl();
+	const required = requiredProp || Boolean(field?.required);
+	const labelledBy = !label && field?.labelId ? field.labelId : void 0;
+	const reportValue = field?.reportValue;
+	const group = useMemo(() => ({
+		name,
+		required,
+		reportValue
+	}), [
+		name,
+		required,
+		reportValue
+	]);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: cn("radio-group", className),
+		role: "radiogroup",
+		...labelledBy ? { "aria-labelledby": labelledBy } : {},
+		...field?.invalid ? { "aria-invalid": true } : {},
+		...required ? { "aria-required": true } : {},
+		...field?.describedBy ? { "aria-describedby": field.describedBy } : {},
+		...field?.errorId ? { "aria-errormessage": field.errorId } : {},
+		children: [label ? /* @__PURE__ */ jsx("legend", {
+			className: "radio-group__legend",
+			children: label
+		}) : null, /* @__PURE__ */ jsx(RadioGroupStateContext.Provider, {
+			value: group,
+			children
+		})]
+	});
+};
+const RadioInput = forwardRef(function RadioInput({ id, className, label, error, disabled, name, onChange, ...props }, ref) {
+	const group = useContext(RadioGroupStateContext);
 	const autoId = useId();
 	const inputId = id ?? autoId;
+	const handleChange = (event) => {
+		if (event.target.checked) group?.reportValue?.(event.target.value);
+		onChange?.(event);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("radio", className, when(error, "radio--error")),
 		children: [/* @__PURE__ */ jsx("input", {
+			...props,
 			ref,
 			type: "radio",
 			id: inputId,
+			name: group?.name ?? name,
 			disabled,
-			className: "radio__input",
-			...props
-		}), title ? /* @__PURE__ */ jsx("label", {
+			...group?.required ? { required: true } : {},
+			onChange: handleChange,
+			className: "radio__input"
+		}), label ? /* @__PURE__ */ jsx("label", {
 			className: "radio__label",
 			htmlFor: inputId,
-			children: title
+			children: label
 		}) : null]
 	});
 });
-export { RadioInput };
+export { RadioGroup, RadioInput };
 
 //# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './radio.scss';\n\nexport interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  error?: boolean;\n}\n\nexport const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(\n  function RadioInput(\n    { id, className, title, error, disabled, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn('radio', className, when(error, 'radio--error'))}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          disabled={disabled}\n          className=\"radio__input\"\n          {...props}\n        />\n        {title ? (\n          <label className=\"radio__label\" htmlFor={inputId}>\n            {title}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAUA,MAAa,aAAa,WACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,GAAG,SAC5C,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,SAAS,WAAW,KAAK,OAAO,cAAc,CAAC;EAAlE,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAU;GACV,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAe,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  useMemo,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './radio.scss';\n\ninterface RadioGroupState {\n  name: string;\n  required: boolean;\n  reportValue?: (value: string) => void;\n}\n\nconst RadioGroupStateContext = createContext<RadioGroupState | null>(null);\n\nexport interface RadioGroupProps {\n  /** Легенда группы. Внутри `Field` не нужна: именем станет лейбл поля. */\n  label?: ReactNode;\n  name: string;\n  /** Внутри `Field` его `required` и так включает группу, здесь — для группы отдельно. */\n  required?: boolean;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const RadioGroup = ({\n  label,\n  name,\n  required: requiredProp = false,\n  children,\n  className,\n}: RadioGroupProps) => {\n  const field = useFieldControl();\n  const required = requiredProp || Boolean(field?.required);\n  const labelledBy = !label && field?.labelId ? field.labelId : undefined;\n  // Обязательность держат пункты: нативный required на них не даёт отправить\n  // форму, а его invalid Field ловит и показывает свою ошибку. Выбор отдаём\n  // в reportValue — иначе показанная ошибка так и висела бы после выбора.\n  const reportValue = field?.reportValue;\n  const group = useMemo<RadioGroupState>(\n    () => ({ name, required, reportValue }),\n    [name, required, reportValue],\n  );\n\n  return (\n    <fieldset\n      className={cn('radio-group', className)}\n      role=\"radiogroup\"\n      {...(labelledBy ? { 'aria-labelledby': labelledBy } : {})}\n      {...(field?.invalid ? { 'aria-invalid': true } : {})}\n      {...(required ? { 'aria-required': true } : {})}\n      {...(field?.describedBy ? { 'aria-describedby': field.describedBy } : {})}\n      {...(field?.errorId ? { 'aria-errormessage': field.errorId } : {})}\n    >\n      {label ? <legend className=\"radio-group__legend\">{label}</legend> : null}\n      <RadioGroupStateContext.Provider value={group}>\n        {children}\n      </RadioGroupStateContext.Provider>\n    </fieldset>\n  );\n};\n\nexport interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  error?: boolean;\n}\n\nexport const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(\n  function RadioInput(\n    { id, className, label, error, disabled, name, onChange, ...props },\n    ref,\n  ) {\n    const group = useContext(RadioGroupStateContext);\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (event.target.checked) group?.reportValue?.(event.target.value);\n      onChange?.(event);\n    };\n\n    return (\n      <div className={cn('radio', className, when(error, 'radio--error'))}>\n        <input\n          {...props}\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          // Внутри группы имя группы побеждает, иначе её можно разрезать name на пункте.\n          name={group?.name ?? name}\n          disabled={disabled}\n          // required на любом пункте делает обязательной всю группу с этим name.\n          {...(group?.required ? { required: true } : {})}\n          onChange={handleChange}\n          className=\"radio__input\"\n        />\n        {label ? (\n          <label className=\"radio__label\" htmlFor={inputId}>\n            {label}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AAqBA,MAAM,yBAAyB,cAAsC,IAAI;AAYzE,MAAa,cAAc,EACzB,OACA,MACA,UAAU,eAAe,OACzB,UACA,gBACqB;CACrB,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,WAAW,gBAAgB,QAAQ,OAAO,QAAQ;CACxD,MAAM,aAAa,CAAC,SAAS,OAAO,UAAU,MAAM,UAAU,KAAA;CAI9D,MAAM,cAAc,OAAO;CAC3B,MAAM,QAAQ,eACL;EAAE;EAAM;EAAU;CAAY,IACrC;EAAC;EAAM;EAAU;CAAW,CAC9B;CAEA,OACE,qBAAC,YAAD;EACE,WAAW,GAAG,eAAe,SAAS;EACtC,MAAK;EACL,GAAK,aAAa,EAAE,mBAAmB,WAAW,IAAI,CAAC;EACvD,GAAK,OAAO,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;EAClD,GAAK,WAAW,EAAE,iBAAiB,KAAK,IAAI,CAAC;EAC7C,GAAK,OAAO,cAAc,EAAE,oBAAoB,MAAM,YAAY,IAAI,CAAC;EACvE,GAAK,OAAO,UAAU,EAAE,qBAAqB,MAAM,QAAQ,IAAI,CAAC;EAPlE,UAAA,CASG,QAAQ,oBAAC,UAAD;GAAQ,WAAU;GAAuB,UAAA;EAAc,CAAA,IAAI,MACpE,oBAAC,uBAAuB,UAAxB;GAAiC,OAAO;GACrC;EAC8B,CAAA,CACzB;;AAEd;AAOA,MAAa,aAAa,WACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,MAAM,UAAU,GAAG,SAC5D,KACA;CACA,MAAM,QAAQ,WAAW,sBAAsB;CAC/C,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,MAAM,OAAO,SAAS,OAAO,cAAc,MAAM,OAAO,KAAK;EACjE,WAAW,KAAK;CAClB;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,SAAS,WAAW,KAAK,OAAO,cAAc,CAAC;EAAlE,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACC;GACL,MAAK;GACL,IAAI;GAEJ,MAAM,OAAO,QAAQ;GACX;GAEV,GAAK,OAAO,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;GAC7C,UAAU;GACV,WAAU;EACX,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAe,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/radio/radio.scss

@@ -1,26 +1,26 @@
 .radio__label {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
   display: inline-block;
   vertical-align: top;
-  padding-left: 5px;
+  padding-left: var(--space-1);
   user-select: none;
   cursor: pointer;
 }
 
 .radio__input {
-  --active: #000;
-  --active-inner: #fff;
-  --border: #e5e5e5;
-  --border-hover: #000;
-  --background: #fff;
-  --disabled: #e5e5e5;
-  --disabled-inner: #e5e5e5;
-  --disabled-after-inner: #727272;
+  --active: var(--color-primary);
+  --active-inner: var(--color-primary-foreground);
+  --border: var(--color-muted);
+  --border-hover: var(--color-foreground);
+  --background: var(--color-background);
+  --disabled: var(--color-muted);
+  --disabled-inner: var(--color-muted);
+  --disabled-after-inner: var(--color-muted-foreground);
   box-sizing: border-box;
   appearance: none;
-  width: 19px;
-  height: 19px;
+  width: 20px;
+  height: 20px;
   outline: none;
   display: inline-block;
   vertical-align: top;
@@ -75,6 +75,15 @@
     border: 1px solid var(--border-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);
+  }
+
   &:disabled {
     --b: var(--disabled);
     cursor: not-allowed;
@@ -90,7 +99,7 @@
     }
 
     & + .radio__label {
-      color: var(--color-gray);
+      color: var(--color-muted-foreground);
       cursor: not-allowed;
     }
   }
@@ -103,7 +112,33 @@
 
   &--error {
     .radio__input {
-      border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+      border-color: color-mix(
+        in srgb,
+        var(--color-destructive) 50%,
+        transparent
+      );
     }
   }
 }
+
+.radio-group {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-inline-size: 0;
+}
+
+.radio-group__legend {
+  margin: 0 0 var(--space-3);
+  color: var(--color-foreground);
+  font-size: var(--text-lg);
+  font-weight: 900;
+  line-height: var(--text-lg--line-height);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .radio__input,
+  .radio__input::after {
+    transition: none;
+  }
+}

package/dist/components/spinner/spinner.cjs

@@ -1,4 +1,5 @@
 const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 require("./spinner.scss");
 // src/components/spinner/spinner.tsx
@@ -6,6 +7,15 @@ const spinnerPosition = {
 	top: "top",
 	center: "center"
 };
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (onChange) => {
+	if (typeof window.matchMedia !== "function") return () => {};
+	const media = window.matchMedia(reducedMotionQuery);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+};
+const prefersReducedMotion = () => typeof window.matchMedia === "function" && window.matchMedia(reducedMotionQuery).matches;
+const prefersReducedMotionServer = () => false;
 const dotDelays = [
 	"0s",
 	"0.125s",
@@ -16,12 +26,12 @@ const dotDelays = [
 	"0.75s",
 	"0.875s"
 ];
-const Dot = ({ begin, rotate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+const Dot = ({ begin, rotate, reduced }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
 	transform: `rotate(${rotate} 16 16)`,
 	cx: "16",
 	cy: "3",
-	r: "0",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+	r: reduced ? 3 : 0,
+	children: reduced ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
 		attributeName: "r",
 		values: "0;3;0;0",
 		dur: "1s",
@@ -34,21 +44,33 @@ const Dot = ({ begin, rotate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("c
 const svgProps = {
 	"xmlns": "http://www.w3.org/2000/svg",
 	"viewBox": "0 0 32 32",
-	"width": 64,
-	"height": 64,
-	"fill": "#ecebeb",
+	"fill": "var(--color-muted)",
 	"aria-hidden": true
 };
-const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: require_cn.cn("spinner", className, require_cn.when(position === spinnerPosition.top, "spinner--top")),
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		...svgProps,
-		children: dotDelays.map((begin, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {
-			begin,
-			rotate: index * 45
-		}, begin))
-	})
-});
+const Spinner = ({ className, position = spinnerPosition.center, size = 64, label = "Загрузка", ...props }) => {
+	const labelId = (0, react.useId)();
+	const reduced = (0, react.useSyncExternalStore)(subscribeReducedMotion, prefersReducedMotion, prefersReducedMotionServer);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...props,
+		role: "status",
+		"aria-labelledby": labelId,
+		className: require_cn.cn("spinner", className, require_cn.when(position === spinnerPosition.top, "spinner--top")),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			id: labelId,
+			className: "spinner__label",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			...svgProps,
+			width: size,
+			height: size,
+			children: dotDelays.map((begin, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {
+				begin,
+				rotate: index * 45,
+				reduced
+			}, begin))
+		})]
+	});
+};
 exports.Spinner = Spinner;
 
 //# sourceMappingURL=spinner.cjs.map

package/dist/components/spinner/spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.cjs","names":["cn","when"],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './spinner.scss';\n\nconst spinnerPosition = {\n  top: 'top',\n  center: 'center',\n} as const;\n\nexport type SpinnerPosition =\n  (typeof spinnerPosition)[keyof typeof spinnerPosition];\n\nexport interface SpinnerProps {\n  className?: string;\n  position?: SpinnerPosition;\n}\n\nconst dotDelays = [\n  '0s',\n  '0.125s',\n  '0.25s',\n  '0.375s',\n  '0.5s',\n  '0.625s',\n  '0.75s',\n  '0.875s',\n] as const;\n\nconst Dot = ({ begin, rotate }: { begin: string; rotate: number }) => (\n  <circle transform={`rotate(${rotate} 16 16)`} cx=\"16\" cy=\"3\" r=\"0\">\n    <animate\n      attributeName=\"r\"\n      values=\"0;3;0;0\"\n      dur=\"1s\"\n      repeatCount=\"indefinite\"\n      begin={begin}\n      keySplines=\"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8\"\n      calcMode=\"spline\"\n    />\n  </circle>\n);\n\nconst svgProps: SVGProps<SVGSVGElement> = {\n  'xmlns': 'http://www.w3.org/2000/svg',\n  'viewBox': '0 0 32 32',\n  'width': 64,\n  'height': 64,\n  'fill': '#ecebeb',\n  'aria-hidden': true,\n};\n\nexport const Spinner: FC<SpinnerProps> = ({\n  className,\n  position = spinnerPosition.center,\n}) => (\n  <div\n    className={cn(\n      'spinner',\n      className,\n      when(position === spinnerPosition.top, 'spinner--top'),\n    )}\n  >\n    <svg {...svgProps}>\n      {dotDelays.map((begin, index) => (\n        <Dot key={begin} begin={begin} rotate={index * 45} />\n      ))}\n    </svg>\n  </div>\n);\n"],"mappings":";;;;AAKA,MAAM,kBAAkB;CACtB,KAAK;CACL,QAAQ;AACV;AAUA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,EAAE,OAAO,aACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;CAAQ,WAAW,UAAU,OAAO;CAAU,IAAG;CAAK,IAAG;CAAI,GAAE;CAC7D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,eAAc;EACd,QAAO;EACP,KAAI;EACJ,aAAY;EACL;EACP,YAAW;EACX,UAAS;CACV,CAAA;AACK,CAAA;AAGV,MAAM,WAAoC;CACxC,SAAS;CACT,WAAW;CACX,SAAS;CACT,UAAU;CACV,QAAQ;CACR,eAAe;AACjB;AAEA,MAAa,WAA6B,EACxC,WACA,WAAW,gBAAgB,aAE3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACE,WAAWA,WAAAA,GACT,WACA,WACAC,WAAAA,KAAK,aAAa,gBAAgB,KAAK,cAAc,CACvD;CAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EACN,UAAA,UAAU,KAAK,OAAO,UACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAwB;GAAO,QAAQ,QAAQ;EAAK,GAA1C,KAA0C,CACrD;CACE,CAAA;AACF,CAAA"}
+{"version":3,"file":"spinner.cjs","names":["useId","useSyncExternalStore","cn","when"],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import {\n  useId,\n  useSyncExternalStore,\n  type FC,\n  type HTMLAttributes,\n  type SVGProps,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport './spinner.scss';\n\nconst spinnerPosition = {\n  top: 'top',\n  center: 'center',\n} as const;\n\nexport type SpinnerPosition =\n  (typeof spinnerPosition)[keyof typeof spinnerPosition];\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'size' | 'position'\n> {\n  size?: number;\n  position?: SpinnerPosition;\n  /** Текст для скринридера. Виден только ему. */\n  label?: string;\n}\n\nconst reducedMotionQuery = '(prefers-reduced-motion: reduce)';\n\nconst subscribeReducedMotion = (onChange: () => void) => {\n  if (typeof window.matchMedia !== 'function') return () => {};\n\n  const media = window.matchMedia(reducedMotionQuery);\n  media.addEventListener('change', onChange);\n  return () => media.removeEventListener('change', onChange);\n};\n\nconst prefersReducedMotion = () =>\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia(reducedMotionQuery).matches;\n\n// ponytail: сервер всегда false — гидрация не расходится, но первый кадр после неё может мигнуть SMIL, пока клиент не прочитает matchMedia. Апгрейд: Sec-CH-Prefers-Reduced-Motion.\nconst prefersReducedMotionServer = () => false;\n\nconst dotDelays = [\n  '0s',\n  '0.125s',\n  '0.25s',\n  '0.375s',\n  '0.5s',\n  '0.625s',\n  '0.75s',\n  '0.875s',\n] as const;\n\nconst Dot = ({\n  begin,\n  rotate,\n  reduced,\n}: {\n  begin: string;\n  rotate: number;\n  reduced: boolean;\n}) => (\n  <circle\n    transform={`rotate(${rotate} 16 16)`}\n    cx=\"16\"\n    cy=\"3\"\n    r={reduced ? 3 : 0}\n  >\n    {reduced ? null : (\n      <animate\n        attributeName=\"r\"\n        values=\"0;3;0;0\"\n        dur=\"1s\"\n        repeatCount=\"indefinite\"\n        begin={begin}\n        keySplines=\"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8\"\n        calcMode=\"spline\"\n      />\n    )}\n  </circle>\n);\n\nconst svgProps: SVGProps<SVGSVGElement> = {\n  'xmlns': 'http://www.w3.org/2000/svg',\n  'viewBox': '0 0 32 32',\n  'fill': 'var(--color-muted)',\n  'aria-hidden': true,\n};\n\nexport const Spinner: FC<SpinnerProps> = ({\n  className,\n  position = spinnerPosition.center,\n  size = 64,\n  label = 'Загрузка',\n  ...props\n}) => {\n  const labelId = useId();\n  const reduced = useSyncExternalStore(\n    subscribeReducedMotion,\n    prefersReducedMotion,\n    prefersReducedMotionServer,\n  );\n\n  return (\n    <div\n      {...props}\n      // eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- live region, не <output>\n      role=\"status\"\n      aria-labelledby={labelId}\n      className={cn(\n        'spinner',\n        className,\n        when(position === spinnerPosition.top, 'spinner--top'),\n      )}\n    >\n      <span id={labelId} className=\"spinner__label\">\n        {label}\n      </span>\n      <svg {...svgProps} width={size} height={size}>\n        {dotDelays.map((begin, index) => (\n          <Dot\n            key={begin}\n            begin={begin}\n            rotate={index * 45}\n            reduced={reduced}\n          />\n        ))}\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB;CACtB,KAAK;CACL,QAAQ;AACV;AAeA,MAAM,qBAAqB;AAE3B,MAAM,0BAA0B,aAAyB;CACvD,IAAI,OAAO,OAAO,eAAe,YAAY,aAAa,CAAC;CAE3D,MAAM,QAAQ,OAAO,WAAW,kBAAkB;CAClD,MAAM,iBAAiB,UAAU,QAAQ;CACzC,aAAa,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAEA,MAAM,6BACJ,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kBAAkB,CAAC,CAAC;AAGxC,MAAM,mCAAmC;AAEzC,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,EACX,OACA,QACA,cAMA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;CACE,WAAW,UAAU,OAAO;CAC5B,IAAG;CACH,IAAG;CACH,GAAG,UAAU,IAAI;CAEhB,UAAA,UAAU,OACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,eAAc;EACd,QAAO;EACP,KAAI;EACJ,aAAY;EACL;EACP,YAAW;EACX,UAAS;CACV,CAAA;AAEG,CAAA;AAGV,MAAM,WAAoC;CACxC,SAAS;CACT,WAAW;CACX,QAAQ;CACR,eAAe;AACjB;AAEA,MAAa,WAA6B,EACxC,WACA,WAAW,gBAAgB,QAC3B,OAAO,IACP,QAAQ,YACR,GAAG,YACC;CACJ,MAAM,WAAA,GAAUA,MAAAA,MAAAA,CAAM;CACtB,MAAM,WAAA,GAAUC,MAAAA,qBAAAA,CACd,wBACA,sBACA,0BACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EAEJ,MAAK;EACL,mBAAiB;EACjB,WAAWC,WAAAA,GACT,WACA,WACAC,WAAAA,KAAK,aAAa,gBAAgB,KAAK,cAAc,CACvD;EATF,UAAA,CAWE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,IAAI;GAAS,WAAU;GAC1B,UAAA;EACG,CAAA,GACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI;GAAU,OAAO;GAAM,QAAQ;GACrC,UAAA,UAAU,KAAK,OAAO,UACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAES;IACP,QAAQ,QAAQ;IACP;GACV,GAJM,KAIN,CACF;EACE,CAAA,CACF;;AAET"}

package/dist/components/spinner/spinner.d.cts

@@ -1,12 +1,14 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 declare const spinnerPosition: {
   readonly top: "top";
   readonly center: "center";
 };
 export type SpinnerPosition = (typeof spinnerPosition)[keyof typeof spinnerPosition];
-export interface SpinnerProps {
-  className?: string;
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size' | 'position'> {
+  size?: number;
   position?: SpinnerPosition;
+  /** Текст для скринридера. Виден только ему. */
+  label?: string;
 }
 export declare const Spinner: FC<SpinnerProps>;
 export {};

package/dist/components/spinner/spinner.d.ts

@@ -1,12 +1,14 @@
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 declare const spinnerPosition: {
   readonly top: "top";
   readonly center: "center";
 };
 export type SpinnerPosition = (typeof spinnerPosition)[keyof typeof spinnerPosition];
-export interface SpinnerProps {
-  className?: string;
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size' | 'position'> {
+  size?: number;
   position?: SpinnerPosition;
+  /** Текст для скринридера. Виден только ему. */
+  label?: string;
 }
 export declare const Spinner: FC<SpinnerProps>;
 export {};

package/dist/components/spinner/spinner.js

@@ -1,11 +1,21 @@
 import { cn, when } from "../../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { useId, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "./spinner.scss";
 // src/components/spinner/spinner.tsx
 const spinnerPosition = {
 	top: "top",
 	center: "center"
 };
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (onChange) => {
+	if (typeof window.matchMedia !== "function") return () => {};
+	const media = window.matchMedia(reducedMotionQuery);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+};
+const prefersReducedMotion = () => typeof window.matchMedia === "function" && window.matchMedia(reducedMotionQuery).matches;
+const prefersReducedMotionServer = () => false;
 const dotDelays = [
 	"0s",
 	"0.125s",
@@ -16,12 +26,12 @@ const dotDelays = [
 	"0.75s",
 	"0.875s"
 ];
-const Dot = ({ begin, rotate }) => /* @__PURE__ */ jsx("circle", {
+const Dot = ({ begin, rotate, reduced }) => /* @__PURE__ */ jsx("circle", {
 	transform: `rotate(${rotate} 16 16)`,
 	cx: "16",
 	cy: "3",
-	r: "0",
-	children: /* @__PURE__ */ jsx("animate", {
+	r: reduced ? 3 : 0,
+	children: reduced ? null : /* @__PURE__ */ jsx("animate", {
 		attributeName: "r",
 		values: "0;3;0;0",
 		dur: "1s",
@@ -34,21 +44,33 @@ const Dot = ({ begin, rotate }) => /* @__PURE__ */ jsx("circle", {
 const svgProps = {
 	"xmlns": "http://www.w3.org/2000/svg",
 	"viewBox": "0 0 32 32",
-	"width": 64,
-	"height": 64,
-	"fill": "#ecebeb",
+	"fill": "var(--color-muted)",
 	"aria-hidden": true
 };
-const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ jsx("div", {
-	className: cn("spinner", className, when(position === spinnerPosition.top, "spinner--top")),
-	children: /* @__PURE__ */ jsx("svg", {
-		...svgProps,
-		children: dotDelays.map((begin, index) => /* @__PURE__ */ jsx(Dot, {
-			begin,
-			rotate: index * 45
-		}, begin))
-	})
-});
+const Spinner = ({ className, position = spinnerPosition.center, size = 64, label = "Загрузка", ...props }) => {
+	const labelId = useId();
+	const reduced = useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, prefersReducedMotionServer);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		role: "status",
+		"aria-labelledby": labelId,
+		className: cn("spinner", className, when(position === spinnerPosition.top, "spinner--top")),
+		children: [/* @__PURE__ */ jsx("span", {
+			id: labelId,
+			className: "spinner__label",
+			children: label
+		}), /* @__PURE__ */ jsx("svg", {
+			...svgProps,
+			width: size,
+			height: size,
+			children: dotDelays.map((begin, index) => /* @__PURE__ */ jsx(Dot, {
+				begin,
+				rotate: index * 45,
+				reduced
+			}, begin))
+		})]
+	});
+};
 export { Spinner };
 
 //# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './spinner.scss';\n\nconst spinnerPosition = {\n  top: 'top',\n  center: 'center',\n} as const;\n\nexport type SpinnerPosition =\n  (typeof spinnerPosition)[keyof typeof spinnerPosition];\n\nexport interface SpinnerProps {\n  className?: string;\n  position?: SpinnerPosition;\n}\n\nconst dotDelays = [\n  '0s',\n  '0.125s',\n  '0.25s',\n  '0.375s',\n  '0.5s',\n  '0.625s',\n  '0.75s',\n  '0.875s',\n] as const;\n\nconst Dot = ({ begin, rotate }: { begin: string; rotate: number }) => (\n  <circle transform={`rotate(${rotate} 16 16)`} cx=\"16\" cy=\"3\" r=\"0\">\n    <animate\n      attributeName=\"r\"\n      values=\"0;3;0;0\"\n      dur=\"1s\"\n      repeatCount=\"indefinite\"\n      begin={begin}\n      keySplines=\"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8\"\n      calcMode=\"spline\"\n    />\n  </circle>\n);\n\nconst svgProps: SVGProps<SVGSVGElement> = {\n  'xmlns': 'http://www.w3.org/2000/svg',\n  'viewBox': '0 0 32 32',\n  'width': 64,\n  'height': 64,\n  'fill': '#ecebeb',\n  'aria-hidden': true,\n};\n\nexport const Spinner: FC<SpinnerProps> = ({\n  className,\n  position = spinnerPosition.center,\n}) => (\n  <div\n    className={cn(\n      'spinner',\n      className,\n      when(position === spinnerPosition.top, 'spinner--top'),\n    )}\n  >\n    <svg {...svgProps}>\n      {dotDelays.map((begin, index) => (\n        <Dot key={begin} begin={begin} rotate={index * 45} />\n      ))}\n    </svg>\n  </div>\n);\n"],"mappings":";;;;AAKA,MAAM,kBAAkB;CACtB,KAAK;CACL,QAAQ;AACV;AAUA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,EAAE,OAAO,aACpB,oBAAC,UAAD;CAAQ,WAAW,UAAU,OAAO;CAAU,IAAG;CAAK,IAAG;CAAI,GAAE;CAC7D,UAAA,oBAAC,WAAD;EACE,eAAc;EACd,QAAO;EACP,KAAI;EACJ,aAAY;EACL;EACP,YAAW;EACX,UAAS;CACV,CAAA;AACK,CAAA;AAGV,MAAM,WAAoC;CACxC,SAAS;CACT,WAAW;CACX,SAAS;CACT,UAAU;CACV,QAAQ;CACR,eAAe;AACjB;AAEA,MAAa,WAA6B,EACxC,WACA,WAAW,gBAAgB,aAE3B,oBAAC,OAAD;CACE,WAAW,GACT,WACA,WACA,KAAK,aAAa,gBAAgB,KAAK,cAAc,CACvD;CAEA,UAAA,oBAAC,OAAD;EAAK,GAAI;EACN,UAAA,UAAU,KAAK,OAAO,UACrB,oBAAC,KAAD;GAAwB;GAAO,QAAQ,QAAQ;EAAK,GAA1C,KAA0C,CACrD;CACE,CAAA;AACF,CAAA"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import {\n  useId,\n  useSyncExternalStore,\n  type FC,\n  type HTMLAttributes,\n  type SVGProps,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport './spinner.scss';\n\nconst spinnerPosition = {\n  top: 'top',\n  center: 'center',\n} as const;\n\nexport type SpinnerPosition =\n  (typeof spinnerPosition)[keyof typeof spinnerPosition];\n\nexport interface SpinnerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'size' | 'position'\n> {\n  size?: number;\n  position?: SpinnerPosition;\n  /** Текст для скринридера. Виден только ему. */\n  label?: string;\n}\n\nconst reducedMotionQuery = '(prefers-reduced-motion: reduce)';\n\nconst subscribeReducedMotion = (onChange: () => void) => {\n  if (typeof window.matchMedia !== 'function') return () => {};\n\n  const media = window.matchMedia(reducedMotionQuery);\n  media.addEventListener('change', onChange);\n  return () => media.removeEventListener('change', onChange);\n};\n\nconst prefersReducedMotion = () =>\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia(reducedMotionQuery).matches;\n\n// ponytail: сервер всегда false — гидрация не расходится, но первый кадр после неё может мигнуть SMIL, пока клиент не прочитает matchMedia. Апгрейд: Sec-CH-Prefers-Reduced-Motion.\nconst prefersReducedMotionServer = () => false;\n\nconst dotDelays = [\n  '0s',\n  '0.125s',\n  '0.25s',\n  '0.375s',\n  '0.5s',\n  '0.625s',\n  '0.75s',\n  '0.875s',\n] as const;\n\nconst Dot = ({\n  begin,\n  rotate,\n  reduced,\n}: {\n  begin: string;\n  rotate: number;\n  reduced: boolean;\n}) => (\n  <circle\n    transform={`rotate(${rotate} 16 16)`}\n    cx=\"16\"\n    cy=\"3\"\n    r={reduced ? 3 : 0}\n  >\n    {reduced ? null : (\n      <animate\n        attributeName=\"r\"\n        values=\"0;3;0;0\"\n        dur=\"1s\"\n        repeatCount=\"indefinite\"\n        begin={begin}\n        keySplines=\"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8\"\n        calcMode=\"spline\"\n      />\n    )}\n  </circle>\n);\n\nconst svgProps: SVGProps<SVGSVGElement> = {\n  'xmlns': 'http://www.w3.org/2000/svg',\n  'viewBox': '0 0 32 32',\n  'fill': 'var(--color-muted)',\n  'aria-hidden': true,\n};\n\nexport const Spinner: FC<SpinnerProps> = ({\n  className,\n  position = spinnerPosition.center,\n  size = 64,\n  label = 'Загрузка',\n  ...props\n}) => {\n  const labelId = useId();\n  const reduced = useSyncExternalStore(\n    subscribeReducedMotion,\n    prefersReducedMotion,\n    prefersReducedMotionServer,\n  );\n\n  return (\n    <div\n      {...props}\n      // eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- live region, не <output>\n      role=\"status\"\n      aria-labelledby={labelId}\n      className={cn(\n        'spinner',\n        className,\n        when(position === spinnerPosition.top, 'spinner--top'),\n      )}\n    >\n      <span id={labelId} className=\"spinner__label\">\n        {label}\n      </span>\n      <svg {...svgProps} width={size} height={size}>\n        {dotDelays.map((begin, index) => (\n          <Dot\n            key={begin}\n            begin={begin}\n            rotate={index * 45}\n            reduced={reduced}\n          />\n        ))}\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB;CACtB,KAAK;CACL,QAAQ;AACV;AAeA,MAAM,qBAAqB;AAE3B,MAAM,0BAA0B,aAAyB;CACvD,IAAI,OAAO,OAAO,eAAe,YAAY,aAAa,CAAC;CAE3D,MAAM,QAAQ,OAAO,WAAW,kBAAkB;CAClD,MAAM,iBAAiB,UAAU,QAAQ;CACzC,aAAa,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAEA,MAAM,6BACJ,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kBAAkB,CAAC,CAAC;AAGxC,MAAM,mCAAmC;AAEzC,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,EACX,OACA,QACA,cAMA,oBAAC,UAAD;CACE,WAAW,UAAU,OAAO;CAC5B,IAAG;CACH,IAAG;CACH,GAAG,UAAU,IAAI;CAEhB,UAAA,UAAU,OACT,oBAAC,WAAD;EACE,eAAc;EACd,QAAO;EACP,KAAI;EACJ,aAAY;EACL;EACP,YAAW;EACX,UAAS;CACV,CAAA;AAEG,CAAA;AAGV,MAAM,WAAoC;CACxC,SAAS;CACT,WAAW;CACX,QAAQ;CACR,eAAe;AACjB;AAEA,MAAa,WAA6B,EACxC,WACA,WAAW,gBAAgB,QAC3B,OAAO,IACP,QAAQ,YACR,GAAG,YACC;CACJ,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,qBACd,wBACA,sBACA,0BACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EAEJ,MAAK;EACL,mBAAiB;EACjB,WAAW,GACT,WACA,WACA,KAAK,aAAa,gBAAgB,KAAK,cAAc,CACvD;EATF,UAAA,CAWE,oBAAC,QAAD;GAAM,IAAI;GAAS,WAAU;GAC1B,UAAA;EACG,CAAA,GACN,oBAAC,OAAD;GAAK,GAAI;GAAU,OAAO;GAAM,QAAQ;GACrC,UAAA,UAAU,KAAK,OAAO,UACrB,oBAAC,KAAD;IAES;IACP,QAAQ,QAAQ;IACP;GACV,GAJM,KAIN,CACF;EACE,CAAA,CACF;;AAET"}

package/dist/components/spinner/spinner.scss

@@ -1,8 +1,13 @@
+// Блок во всю ширину родителя: position раскладывает svg по высоте,
+// поэтому min-height обязателен — без него flex-start и center совпадают.
+// position: relative держит внутри скрытую подпись.
 .spinner {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
   width: 100%;
   min-height: 100%;
-  padding: 30px 0;
+  padding: var(--space-6) 0;
   align-items: center;
   justify-content: center;
 
@@ -10,3 +15,15 @@
     align-items: flex-start;
   }
 }
+
+.spinner__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/textarea/index.d.cts

@@ -1,2 +1,2 @@
-import { TextArea, TextAreaProps } from "./textarea.cjs";
-export { TextArea, type TextAreaProps };
+import { TextArea, TextAreaProps, TextAreaSize } from "./textarea.cjs";
+export { TextArea, type TextAreaProps, type TextAreaSize };

package/dist/components/textarea/index.d.ts

@@ -1,2 +1,2 @@
-import { TextArea, TextAreaProps } from "./textarea.js";
-export { TextArea, type TextAreaProps };
+import { TextArea, TextAreaProps, TextAreaSize } from "./textarea.js";
+export { TextArea, type TextAreaProps, type TextAreaSize };

package/dist/components/textarea/textarea.cjs

@@ -1,24 +1,83 @@
 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("./textarea.scss");
 // src/components/textarea/textarea.tsx
-const TextArea = (0, react.forwardRef)(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
+const assignRef = (ref, node) => {
+	if (typeof ref === "function") {
+		ref(node);
+		return;
+	}
+	if (ref) ref.current = node;
+};
+const TextArea = (0, react.forwardRef)(function TextArea({ maxLength, value, size = "md", recommended, error, counter = true, className, id, onChange, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+	const autoId = (0, react.useId)();
+	const field = require_field_context.useFieldControl();
+	const reportValue = field?.reportValue;
+	const textareaId = field?.id ?? id ?? autoId;
+	const textareaRef = (0, react.useRef)(null);
+	const [length, setLength] = (0, react.useState)(0);
+	const withCounter = maxLength !== void 0 && counter;
+	const isInvalid = Boolean(error) || Boolean(field?.invalid);
+	const setRef = (0, react.useCallback)((node) => {
+		textareaRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	/**
+	* ponytail: длину счётчик читает из DOM — одинаково для `value` и `defaultValue`,
+	* включая автозаполнение. Потолок: reset формы в неконтролируемом режиме счётчик
+	* не слышит и догоняет на следующем вводе; апгрейд — слушать `reset`, как `Input`.
+	* Тот же проход отдаёт показанную строку в Field.
+	*/
+	(0, react.useEffect)(() => {
+		const node = textareaRef.current;
+		if (!node) return;
+		if (withCounter) setLength(node.value.length);
+		reportValue?.(node.value);
+	}, [
+		reportValue,
+		value,
+		withCounter
+	]);
+	const handleChange = (event) => {
+		if (withCounter) setLength(event.target.value.length);
+		if (value === void 0) reportValue?.(event.target.value);
+		onChange?.(event);
+	};
+	const counterId = withCounter ? `${textareaId}-counter` : void 0;
+	const describedBy = [
+		field?.describedBy,
+		counterId,
+		ariaDescribedBy
+	].filter((part) => Boolean(part)).join(" ");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "textarea__wrap",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-			ref,
-			className: require_cn.cn("textarea", className, require_cn.when(recommended, "textarea--recommended"), require_cn.when(error, "textarea--error")),
-			value,
+			...props,
+			ref: setRef,
+			id: textareaId,
+			className: require_cn.cn("textarea", className, require_cn.when(size !== "md", `textarea--${size}`), require_cn.when(recommended, "textarea--recommended"), require_cn.when(isInvalid, "textarea--error")),
+			...value !== void 0 ? { value } : {},
 			maxLength,
-			"aria-invalid": error || void 0,
-			...props
-		}), maxLength && !hideCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			onChange: handleChange,
+			...isInvalid ? { "aria-invalid": true } : {},
+			...field?.required ? {
+				"required": true,
+				"aria-required": true
+			} : {},
+			...describedBy ? { "aria-describedby": describedBy } : {},
+			...field?.errorId ? { "aria-errormessage": field.errorId } : {}
+		}), withCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			id: counterId,
 			className: "textarea__counter",
 			children: [
-				"Максимум ",
+				"Осталось ",
+				Math.max(0, (maxLength ?? 0) - length),
+				" из ",
 				maxLength,
-				" символов"
+				" ",
+				"символов"
 			]
 		}) : null]
 	});

package/dist/components/textarea/textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.cjs","names":["forwardRef","cn","when"],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef, type TextareaHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './textarea.scss';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  recommended?: boolean;\n  error?: boolean;\n  /** В приложении проп называется `noMaxMoty`. */\n  hideCounter?: boolean;\n}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      maxLength,\n      value = '',\n      recommended,\n      error,\n      hideCounter = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div className=\"textarea__wrap\">\n        <textarea\n          ref={ref}\n          className={cn(\n            'textarea',\n            className,\n            when(recommended, 'textarea--recommended'),\n            when(error, 'textarea--error'),\n          )}\n          value={value}\n          maxLength={maxLength}\n          aria-invalid={error || undefined}\n          {...props}\n        />\n        {maxLength && !hideCounter ? (\n          <span className=\"textarea__counter\">\n            Максимум {maxLength} символов\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAYA,MAAa,YAAA,GAAWA,MAAAA,WAAAA,CACtB,SAAS,SACP,EACE,WACA,QAAQ,IACR,aACA,OACA,cAAc,OACd,WACA,GAAG,SAEL,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACO;GACL,WAAWC,WAAAA,GACT,YACA,WACAC,WAAAA,KAAK,aAAa,uBAAuB,GACzCA,WAAAA,KAAK,OAAO,iBAAiB,CAC/B;GACO;GACI;GACX,gBAAc,SAAS,KAAA;GACvB,GAAI;EACL,CAAA,GACA,aAAa,CAAC,cACb,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IAAoC;IACxB;IAAU;GAChB;EACJ,CAAA,IAAA,IACD;;AAET,CACF"}
+{"version":3,"file":"textarea.cjs","names":["forwardRef","useId","useFieldControl","useRef","useState","useCallback","cn","when"],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './textarea.scss';\n\nexport type TextAreaSize = 'sm' | 'md' | 'lg';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  size?: TextAreaSize;\n  recommended?: boolean;\n  error?: boolean;\n  /** Счётчик остатка при `maxLength`. `false` — то, что в приложении было `noMaxMoty`. */\n  counter?: boolean;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLTextAreaElement> | undefined,\n  node: HTMLTextAreaElement | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n\n  if (ref) ref.current = node;\n};\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      maxLength,\n      value,\n      size = 'md',\n      recommended,\n      error,\n      counter = true,\n      className,\n      id,\n      onChange,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const field = useFieldControl();\n    const reportValue = field?.reportValue;\n    const textareaId = field?.id ?? id ?? autoId;\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const [length, setLength] = useState(0);\n    const withCounter = maxLength !== undefined && counter;\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\n\n    const setRef = useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        textareaRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    /**\n     * ponytail: длину счётчик читает из DOM — одинаково для `value` и `defaultValue`,\n     * включая автозаполнение. Потолок: reset формы в неконтролируемом режиме счётчик\n     * не слышит и догоняет на следующем вводе; апгрейд — слушать `reset`, как `Input`.\n     * Тот же проход отдаёт показанную строку в Field.\n     */\n    useEffect(() => {\n      const node = textareaRef.current;\n      if (!node) return;\n\n      if (withCounter) setLength(node.value.length);\n      reportValue?.(node.value);\n    }, [reportValue, value, withCounter]);\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      if (withCounter) setLength(event.target.value.length);\n      if (value === undefined) reportValue?.(event.target.value);\n      onChange?.(event);\n    };\n\n    const counterId = withCounter ? `${textareaId}-counter` : undefined;\n    const describedBy = [field?.describedBy, counterId, ariaDescribedBy]\n      .filter(part => Boolean(part))\n      .join(' ');\n\n    return (\n      <div className=\"textarea__wrap\">\n        <textarea\n          {...props}\n          ref={setRef}\n          id={textareaId}\n          className={cn(\n            'textarea',\n            className,\n            when(size !== 'md', `textarea--${size}`),\n            when(recommended, 'textarea--recommended'),\n            when(isInvalid, 'textarea--error'),\n          )}\n          {...(value !== undefined ? { value } : {})}\n          maxLength={maxLength}\n          onChange={handleChange}\n          {...(isInvalid ? { 'aria-invalid': true } : {})}\n          {...(field?.required\n            ? { 'required': true, 'aria-required': true }\n            : {})}\n          {...(describedBy ? { 'aria-describedby': describedBy } : {})}\n          {...(field?.errorId ? { 'aria-errormessage': field.errorId } : {})}\n        />\n        {withCounter ? (\n          <span id={counterId} className=\"textarea__counter\">\n            Осталось {Math.max(0, (maxLength ?? 0) - length)} из {maxLength}{' '}\n            символов\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AA0BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAa,YAAA,GAAWA,MAAAA,WAAAA,CACtB,SAAS,SACP,EACE,WACA,OACA,OAAO,MACP,aACA,OACA,UAAU,MACV,WACA,IACA,UACA,oBAAoB,iBACpB,GAAG,SAEL,KACA;CACA,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,QAAQC,sBAAAA,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,aAAa,OAAO,MAAM,MAAM;CACtC,MAAM,eAAA,GAAcC,MAAAA,OAAAA,CAA4B,IAAI;CACpD,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAS,CAAC;CACtC,MAAM,cAAc,cAAc,KAAA,KAAa;CAC/C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,UAAA,GAASC,MAAAA,YAAAA,EACZ,SAAqC;EACpC,YAAY,UAAU;EACtB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;;;;;;;CAQA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,YAAY;EACzB,IAAI,CAAC,MAAM;EAEX,IAAI,aAAa,UAAU,KAAK,MAAM,MAAM;EAC5C,cAAc,KAAK,KAAK;CAC1B,GAAG;EAAC;EAAa;EAAO;CAAW,CAAC;CAEpC,MAAM,gBAAgB,UAA4C;EAChE,IAAI,aAAa,UAAU,MAAM,OAAO,MAAM,MAAM;EACpD,IAAI,UAAU,KAAA,GAAW,cAAc,MAAM,OAAO,KAAK;EACzD,WAAW,KAAK;CAClB;CAEA,MAAM,YAAY,cAAc,GAAG,WAAW,YAAY,KAAA;CAC1D,MAAM,cAAc;EAAC,OAAO;EAAa;EAAW;CAAe,CAAC,CACjE,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAC7B,KAAK,GAAG;CAEX,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACE,GAAI;GACJ,KAAK;GACL,IAAI;GACJ,WAAWC,WAAAA,GACT,YACA,WACAC,WAAAA,KAAK,SAAS,MAAM,aAAa,MAAM,GACvCA,WAAAA,KAAK,aAAa,uBAAuB,GACzCA,WAAAA,KAAK,WAAW,iBAAiB,CACnC;GACA,GAAK,UAAU,KAAA,IAAY,EAAE,MAAM,IAAI,CAAC;GAC7B;GACX,UAAU;GACV,GAAK,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;GAC7C,GAAK,OAAO,WACR;IAAE,YAAY;IAAM,iBAAiB;GAAK,IAC1C,CAAC;GACL,GAAK,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;GAC1D,GAAK,OAAO,UAAU,EAAE,qBAAqB,MAAM,QAAQ,IAAI,CAAC;EACjE,CAAA,GACA,cACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,IAAI;GAAW,WAAU;GAA/B,UAAA;IAAmD;IACvC,KAAK,IAAI,IAAI,aAAa,KAAK,MAAM;IAAE;IAAK;IAAW;IAAI;GAEjE;EACJ,CAAA,IAAA,IACD;;AAET,CACF"}

package/dist/components/textarea/textarea.d.cts

@@ -1,9 +1,11 @@
 import { TextareaHTMLAttributes } from "react";
+export type TextAreaSize = 'sm' | 'md' | 'lg';
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  size?: TextAreaSize;
   recommended?: boolean;
   error?: boolean;
-  /** В приложении проп называется `noMaxMoty`. */
-  hideCounter?: boolean;
+  /** Счётчик остатка при `maxLength`. `false` — то, что в приложении было `noMaxMoty`. */
+  counter?: boolean;
 }
 export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=textarea.d.cts.map

package/dist/components/textarea/textarea.d.ts

@@ -1,9 +1,11 @@
 import { TextareaHTMLAttributes } from "react";
+export type TextAreaSize = 'sm' | 'md' | 'lg';
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  size?: TextAreaSize;
   recommended?: boolean;
   error?: boolean;
-  /** В приложении проп называется `noMaxMoty`. */
-  hideCounter?: boolean;
+  /** Счётчик остатка при `maxLength`. `false` — то, что в приложении было `noMaxMoty`. */
+  counter?: boolean;
 }
 export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=textarea.d.ts.map