@de-kit/st-ui 0.1.5 → 0.1.6

package/dist/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":["forwardRef","useId","cn","when"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './checkbox.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  hide?: boolean;\n  withCursor?: boolean;\n}\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    { className, id, title, hide, disabled, withCursor = true, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn('checkbox', className, when(hide, 'checkbox--hide'))}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(\n            'checkbox__input',\n            when(!withCursor, 'checkbox__input--no-events'),\n          )}\n          {...props}\n        />\n        {title ? (\n          <label className=\"checkbox__label\" htmlFor={inputId}>\n            {title.replaceAll('-', '–')}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAWA,MAAa,iBAAA,GAAgBA,MAAAA,WAAAA,CAC3B,SAAS,cACP,EAAE,WAAW,IAAI,OAAO,MAAM,UAAU,aAAa,MAAM,GAAG,SAC9D,KACA;CACA,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAG,YAAY,WAAWC,WAAAA,KAAK,MAAM,gBAAgB,CAAC;EAAtE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAWD,WAAAA,GACT,mBACAC,WAAAA,KAAK,CAAC,YAAY,4BAA4B,CAChD;GACA,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA,MAAM,WAAW,KAAK,GAAG;EACrB,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"checkbox.cjs","names":["forwardRef","useFieldControl","useId","useRef","useCallback","cn","when"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './checkbox.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */\n  error?: boolean;\n  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */\n  indeterminate?: boolean;\n  /**\n   * false — `pointer-events: none` на input (`checkbox__input--no-events`).\n   * Клик по лейблу по-прежнему переключает.\n   */\n  clickable?: boolean;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLInputElement> | null,\n  node: HTMLInputElement | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n\n  if (ref) ref.current = node;\n};\n\nconst mergeDescribedBy = (\n  fromField: string | undefined,\n  fromProps: string | undefined,\n) => {\n  const value = [fromField, fromProps].filter(part => Boolean(part)).join(' ');\n  return value || undefined;\n};\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    {\n      className,\n      id,\n      label,\n      error,\n      disabled,\n      clickable = true,\n      indeterminate = false,\n      checked,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFieldControl();\n    const reportValue = field?.reportValue;\n    const autoId = useId();\n    const inputId = field?.id ?? id ?? autoId;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\n\n    const setRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    useEffect(() => {\n      if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    // Field ждёт строку: отдаём то же, что ушло бы в FormData — 'on' или пусто.\n    useEffect(() => {\n      const node = inputRef.current;\n      if (node) reportValue?.(node.checked ? 'on' : '');\n    }, [checked, reportValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (checked === undefined) {\n        reportValue?.(event.target.checked ? 'on' : '');\n      }\n      onChange?.(event);\n    };\n\n    const describedBy = field\n      ? mergeDescribedBy(field.describedBy, props['aria-describedby'])\n      : undefined;\n\n    const fieldAttrs: InputHTMLAttributes<HTMLInputElement> = {};\n\n    if (field?.required) {\n      fieldAttrs.required = true;\n      fieldAttrs['aria-required'] = true;\n    }\n\n    if (isInvalid) fieldAttrs['aria-invalid'] = true;\n    if (describedBy) fieldAttrs['aria-describedby'] = describedBy;\n    if (field?.errorId) fieldAttrs['aria-errormessage'] = field.errorId;\n\n    return (\n      <div className={cn('checkbox', className)}>\n        <input\n          {...props}\n          ref={setRef}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          {...(checked !== undefined ? { checked } : {})}\n          onChange={handleChange}\n          className={cn(\n            'checkbox__input',\n            when(!clickable, 'checkbox__input--no-events'),\n          )}\n          {...fieldAttrs}\n        />\n        {label ? (\n          <label className=\"checkbox__label\" htmlFor={inputId}>\n            {label}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AA6BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAM,oBACJ,WACA,cACG;CAEH,OADc,CAAC,WAAW,SAAS,CAAC,CAAC,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAC7D,KAAK,KAAA;AAClB;AAEA,MAAa,iBAAA,GAAgBA,MAAAA,WAAAA,CAC3B,SAAS,cACP,EACE,WACA,IACA,OACA,OACA,UACA,YAAY,MACZ,gBAAgB,OAChB,SACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,sBAAAA,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,OAAO,MAAM,MAAM;CACnC,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAC9C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,UAAA,GAASC,MAAAA,YAAAA,EACZ,SAAkC;EACjC,SAAS,UAAU;EACnB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAGlB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,SAAS;EACtB,IAAI,MAAM,cAAc,KAAK,UAAU,OAAO,EAAE;CAClD,GAAG,CAAC,SAAS,WAAW,CAAC;CAEzB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,YAAY,KAAA,GACd,cAAc,MAAM,OAAO,UAAU,OAAO,EAAE;EAEhD,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,QAChB,iBAAiB,MAAM,aAAa,MAAM,mBAAmB,IAC7D,KAAA;CAEJ,MAAM,aAAoD,CAAC;CAE3D,IAAI,OAAO,UAAU;EACnB,WAAW,WAAW;EACtB,WAAW,mBAAmB;CAChC;CAEA,IAAI,WAAW,WAAW,kBAAkB;CAC5C,IAAI,aAAa,WAAW,sBAAsB;CAClD,IAAI,OAAO,SAAS,WAAW,uBAAuB,MAAM;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAG,YAAY,SAAS;EAAxC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,IAAI;GACM;GACV,GAAK,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;GAC5C,UAAU;GACV,WAAWA,WAAAA,GACT,mBACAC,WAAAA,KAAK,CAAC,WAAW,4BAA4B,CAC/C;GACA,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.d.cts

@@ -1,8 +1,15 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, ReactNode } from "react";
 export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  title?: string;
-  hide?: boolean;
-  withCursor?: boolean;
+  label?: ReactNode;
+  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */
+  error?: boolean;
+  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */
+  indeterminate?: boolean;
+  /**
+   * false — `pointer-events: none` на input (`checkbox__input--no-events`).
+   * Клик по лейблу по-прежнему переключает.
+   */
+  clickable?: boolean;
 }
 export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=checkbox.d.cts.map

package/dist/components/checkbox/checkbox.d.ts

@@ -1,8 +1,15 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, ReactNode } from "react";
 export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  title?: string;
-  hide?: boolean;
-  withCursor?: boolean;
+  label?: ReactNode;
+  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */
+  error?: boolean;
+  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */
+  indeterminate?: boolean;
+  /**
+   * false — `pointer-events: none` на input (`checkbox__input--no-events`).
+   * Клик по лейблу по-прежнему переключает.
+   */
+  clickable?: boolean;
 }
 export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox/checkbox.js

@@ -1,24 +1,66 @@
 import { cn, when } from "../../lib/cn.js";
-import { forwardRef, useId } from "react";
+import { useFieldControl } from "../field/field-context.js";
+import { forwardRef, useCallback, useEffect, useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./checkbox.scss";
 // src/components/checkbox/checkbox.tsx
-const CheckboxInput = 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 = forwardRef(function CheckboxInput({ className, id, label, error, disabled, clickable = true, indeterminate = false, checked, onChange, ...props }, ref) {
+	const field = useFieldControl();
+	const reportValue = field?.reportValue;
 	const autoId = useId();
-	const inputId = id ?? autoId;
+	const inputId = field?.id ?? id ?? autoId;
+	const inputRef = useRef(null);
+	const isInvalid = Boolean(error) || Boolean(field?.invalid);
+	const setRef = useCallback((node) => {
+		inputRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	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__ */ jsxs("div", {
-		className: cn("checkbox", className, when(hide, "checkbox--hide")),
+		className: cn("checkbox", className),
 		children: [/* @__PURE__ */ jsx("input", {
-			ref,
+			...props,
+			ref: setRef,
 			type: "checkbox",
 			id: inputId,
 			disabled,
-			className: cn("checkbox__input", when(!withCursor, "checkbox__input--no-events")),
-			...props
-		}), title ? /* @__PURE__ */ jsx("label", {
+			...checked !== void 0 ? { checked } : {},
+			onChange: handleChange,
+			className: cn("checkbox__input", when(!clickable, "checkbox__input--no-events")),
+			...fieldAttrs
+		}), label ? /* @__PURE__ */ jsx("label", {
 			className: "checkbox__label",
 			htmlFor: inputId,
-			children: title.replaceAll("-", "–")
+			children: label
 		}) : null]
 	});
 });

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './checkbox.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  hide?: boolean;\n  withCursor?: boolean;\n}\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    { className, id, title, hide, disabled, withCursor = true, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn('checkbox', className, when(hide, 'checkbox--hide'))}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(\n            'checkbox__input',\n            when(!withCursor, 'checkbox__input--no-events'),\n          )}\n          {...props}\n        />\n        {title ? (\n          <label className=\"checkbox__label\" htmlFor={inputId}>\n            {title.replaceAll('-', '–')}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAWA,MAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,WAAW,IAAI,OAAO,MAAM,UAAU,aAAa,MAAM,GAAG,SAC9D,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,WAAW,KAAK,MAAM,gBAAgB,CAAC;EAAtE,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAW,GACT,mBACA,KAAK,CAAC,YAAY,4BAA4B,CAChD;GACA,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA,MAAM,WAAW,KAAK,GAAG;EACrB,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './checkbox.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */\n  error?: boolean;\n  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */\n  indeterminate?: boolean;\n  /**\n   * false — `pointer-events: none` на input (`checkbox__input--no-events`).\n   * Клик по лейблу по-прежнему переключает.\n   */\n  clickable?: boolean;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLInputElement> | null,\n  node: HTMLInputElement | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n\n  if (ref) ref.current = node;\n};\n\nconst mergeDescribedBy = (\n  fromField: string | undefined,\n  fromProps: string | undefined,\n) => {\n  const value = [fromField, fromProps].filter(part => Boolean(part)).join(' ');\n  return value || undefined;\n};\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    {\n      className,\n      id,\n      label,\n      error,\n      disabled,\n      clickable = true,\n      indeterminate = false,\n      checked,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFieldControl();\n    const reportValue = field?.reportValue;\n    const autoId = useId();\n    const inputId = field?.id ?? id ?? autoId;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\n\n    const setRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    useEffect(() => {\n      if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    // Field ждёт строку: отдаём то же, что ушло бы в FormData — 'on' или пусто.\n    useEffect(() => {\n      const node = inputRef.current;\n      if (node) reportValue?.(node.checked ? 'on' : '');\n    }, [checked, reportValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (checked === undefined) {\n        reportValue?.(event.target.checked ? 'on' : '');\n      }\n      onChange?.(event);\n    };\n\n    const describedBy = field\n      ? mergeDescribedBy(field.describedBy, props['aria-describedby'])\n      : undefined;\n\n    const fieldAttrs: InputHTMLAttributes<HTMLInputElement> = {};\n\n    if (field?.required) {\n      fieldAttrs.required = true;\n      fieldAttrs['aria-required'] = true;\n    }\n\n    if (isInvalid) fieldAttrs['aria-invalid'] = true;\n    if (describedBy) fieldAttrs['aria-describedby'] = describedBy;\n    if (field?.errorId) fieldAttrs['aria-errormessage'] = field.errorId;\n\n    return (\n      <div className={cn('checkbox', className)}>\n        <input\n          {...props}\n          ref={setRef}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          {...(checked !== undefined ? { checked } : {})}\n          onChange={handleChange}\n          className={cn(\n            'checkbox__input',\n            when(!clickable, 'checkbox__input--no-events'),\n          )}\n          {...fieldAttrs}\n        />\n        {label ? (\n          <label className=\"checkbox__label\" htmlFor={inputId}>\n            {label}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AA6BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAM,oBACJ,WACA,cACG;CAEH,OADc,CAAC,WAAW,SAAS,CAAC,CAAC,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAC7D,KAAK,KAAA;AAClB;AAEA,MAAa,gBAAgB,WAC3B,SAAS,cACP,EACE,WACA,IACA,OACA,OACA,UACA,YAAY,MACZ,gBAAgB,OAChB,SACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAAO,MAAM,MAAM;CACnC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,SAAS,aACZ,SAAkC;EACjC,SAAS,UAAU;EACnB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;CAEA,gBAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAGlB,gBAAgB;EACd,MAAM,OAAO,SAAS;EACtB,IAAI,MAAM,cAAc,KAAK,UAAU,OAAO,EAAE;CAClD,GAAG,CAAC,SAAS,WAAW,CAAC;CAEzB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,YAAY,KAAA,GACd,cAAc,MAAM,OAAO,UAAU,OAAO,EAAE;EAEhD,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,QAChB,iBAAiB,MAAM,aAAa,MAAM,mBAAmB,IAC7D,KAAA;CAEJ,MAAM,aAAoD,CAAC;CAE3D,IAAI,OAAO,UAAU;EACnB,WAAW,WAAW;EACtB,WAAW,mBAAmB;CAChC;CAEA,IAAI,WAAW,WAAW,kBAAkB;CAC5C,IAAI,aAAa,WAAW,sBAAsB;CAClD,IAAI,OAAO,SAAS,WAAW,uBAAuB,MAAM;CAE5D,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;EAAxC,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,IAAI;GACM;GACV,GAAK,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;GAC5C,UAAU;GACV,WAAW,GACT,mBACA,KAAK,CAAC,WAAW,4BAA4B,CAC/C;GACA,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.scss

@@ -1,34 +1,31 @@
-@function get-check-icon($color: 'fff') {
-  @return url("data:image/svg+xml,%3Csvg fill='%23#{$color}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20px' height='20px'%3E%3Cpath d='M15.71,6.29c-0.39-0.39-1.02-0.39-1.41,0c-0.31,0.31-3.76,3.76-5.29,5.29c-0.81-0.81-2.01-2.01-2.29-2.29c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,2.61,2.61,3,3c0.39,0.39,1.02,0.39,1.41,0c0.39-0.39,5.61-5.61,6-6C16.1,7.32,16.1,6.68,15.71,6.29z'/%3E%3C/svg%3E");
+// data-uri не читает custom properties, поэтому галочка — маска: цвет берёт background-color.
+@function get-check-icon() {
+  @return url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20px' height='20px'%3E%3Cpath d='M15.71,6.29c-0.39-0.39-1.02-0.39-1.41,0c-0.31,0.31-3.76,3.76-5.29,5.29c-0.81-0.81-2.01-2.01-2.29-2.29c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,2.61,2.61,3,3c0.39,0.39,1.02,0.39,1.41,0c0.39-0.39,5.61-5.61,6-6C16.1,7.32,16.1,6.68,15.71,6.29z'/%3E%3C/svg%3E");
 }
 
 .checkbox {
   display: flex;
   align-items: flex-start;
-
-  &--hide {
-    display: none;
-  }
 }
 
 .checkbox__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;
 }
 
 .checkbox__input {
-  --active: #000;
-  --active-inner: #fff;
-  --border: #e5e5e5;
-  --border-hover: #000;
-  --background: #fff;
-  --disabled: #e5e5e5;
-  --disabled-inner: #e5e5e5;
+  --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);
   box-sizing: border-box;
   appearance: none;
   width: 20px;
@@ -41,7 +38,7 @@
   flex-shrink: 0;
   border: 1px solid var(--bc, var(--border));
   background: var(--b, var(--background));
-  border-radius: 5px;
+  border-radius: var(--radius-sm);
   transition:
     background 0.3s,
     border-color 0.3s,
@@ -58,12 +55,16 @@
     position: absolute;
     transition: opacity var(--d-o, 0.2s);
     opacity: var(--o, 0);
-    background-position: center;
-    background-image: get-check-icon();
+    background-color: var(--active-inner);
+    -webkit-mask: get-check-icon() center / 20px 20px no-repeat;
+    mask: get-check-icon() center / 20px 20px no-repeat;
   }
 
-  &:required:not(:hover):not(:checked):not(:disabled) {
-    border: 1px solid var(--color-red);
+  // Красным красит состояние ошибки, а не сам по себе required: моментом ошибки
+  // внутри Field распоряжается он. Рамка держится и под курсором — ховер только
+  // добавляет к ней толщину.
+  &[aria-invalid='true']:not(:disabled) {
+    border-color: var(--color-destructive);
   }
 
   &:checked {
@@ -72,6 +73,21 @@
     --o: 1;
   }
 
+  &:indeterminate {
+    --b: var(--active);
+    --bc: var(--active);
+    --o: 1;
+
+    &::after {
+      -webkit-mask: none;
+      mask: none;
+      top: 9px;
+      right: 4px;
+      bottom: 9px;
+      left: 4px;
+    }
+  }
+
   &:hover:not(:checked):not(:disabled) {
     border-width: 2px;
     --bc: var(--active);
@@ -82,6 +98,15 @@
     border-width: 2px;
   }
 
+  &: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);
     border: 1px solid var(--disabled);
@@ -90,14 +115,11 @@
 
     &:checked {
       --b: var(--disabled-inner);
-
-      &::after {
-        background-image: get-check-icon('727272');
-      }
+      --active-inner: var(--color-muted-foreground);
     }
 
     & + .checkbox__label {
-      color: var(--color-gray);
+      color: var(--color-muted-foreground);
       cursor: not-allowed;
     }
   }
@@ -106,3 +128,10 @@
     pointer-events: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .checkbox__input,
+  .checkbox__input::after {
+    transition: none;
+  }
+}

package/dist/components/field/field-context.cjs

@@ -0,0 +1,9 @@
+let react = require("react");
+// src/components/field/field-context.ts
+const FieldControlReactContext = (0, react.createContext)(null);
+const FieldControlProvider = FieldControlReactContext.Provider;
+const useFieldControl = () => (0, react.useContext)(FieldControlReactContext);
+exports.FieldControlProvider = FieldControlProvider;
+exports.useFieldControl = useFieldControl;
+
+//# sourceMappingURL=field-context.cjs.map

package/dist/components/field/field-context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.cjs","names":["createContext","useContext"],"sources":["../../../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FieldControlContext {\n  id: string;\n  /** Для контролов без собственного лейбла: группа ссылается на него aria-labelledby. */\n  labelId?: string;\n  invalid: boolean;\n  required: boolean;\n  describedBy?: string;\n  errorId?: string;\n  /** Контрол сообщает показанное значение: текст поля или 'on' у отмеченного чекбокса. */\n  reportValue?: (value: string) => void;\n}\n\nconst FieldControlReactContext = createContext<FieldControlContext | null>(\n  null,\n);\n\nexport const FieldControlProvider = FieldControlReactContext.Provider;\n\nexport const useFieldControl = (): FieldControlContext | null =>\n  useContext(FieldControlReactContext);\n"],"mappings":";;AAcA,MAAM,4BAAA,GAA2BA,MAAAA,cAAAA,CAC/B,IACF;AAEA,MAAa,uBAAuB,yBAAyB;AAE7D,MAAa,yBAAA,GACXC,MAAAA,WAAAA,CAAW,wBAAwB"}

package/dist/components/field/field-context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+// src/components/field/field-context.ts
+const FieldControlReactContext = createContext(null);
+const FieldControlProvider = FieldControlReactContext.Provider;
+const useFieldControl = () => useContext(FieldControlReactContext);
+export { FieldControlProvider, useFieldControl };
+
+//# sourceMappingURL=field-context.js.map

package/dist/components/field/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","names":[],"sources":["../../../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FieldControlContext {\n  id: string;\n  /** Для контролов без собственного лейбла: группа ссылается на него aria-labelledby. */\n  labelId?: string;\n  invalid: boolean;\n  required: boolean;\n  describedBy?: string;\n  errorId?: string;\n  /** Контрол сообщает показанное значение: текст поля или 'on' у отмеченного чекбокса. */\n  reportValue?: (value: string) => void;\n}\n\nconst FieldControlReactContext = createContext<FieldControlContext | null>(\n  null,\n);\n\nexport const FieldControlProvider = FieldControlReactContext.Provider;\n\nexport const useFieldControl = (): FieldControlContext | null =>\n  useContext(FieldControlReactContext);\n"],"mappings":";;AAcA,MAAM,2BAA2B,cAC/B,IACF;AAEA,MAAa,uBAAuB,yBAAyB;AAE7D,MAAa,wBACX,WAAW,wBAAwB"}

package/dist/components/field/field.cjs

@@ -0,0 +1,105 @@
+const require_cn = require("../../lib/cn.cjs");
+const require_field_context = require("./field-context.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./field.scss");
+// src/components/field/field.tsx
+const isFilled = (value) => value.trim() !== "";
+const requiredText = (label, message) => {
+	if (message) return message;
+	if (typeof label === "string") return `Поле «${label}» обязательно`;
+	return "Обязательное поле";
+};
+const Field = ({ label, hint, hintPlacement = "bottom", error, required = false, requiredMessage, className, children }) => {
+	const inputId = (0, react.useId)();
+	const labelId = `${inputId}-label`;
+	const rootRef = (0, react.useRef)(null);
+	const hadValueRef = (0, react.useRef)(false);
+	const [showRequired, setShowRequired] = (0, react.useState)(false);
+	const requiredError = required && showRequired ? requiredText(label, requiredMessage) : null;
+	const visibleError = error ?? requiredError;
+	const invalid = Boolean(visibleError);
+	const hintId = hint ? `${inputId}-hint` : void 0;
+	const errorId = invalid ? `${inputId}-error` : void 0;
+	const describedBy = [errorId, hintId].filter(Boolean).join(" ");
+	const reportValue = (0, react.useCallback)((value) => {
+		if (!required) return;
+		if (isFilled(value)) {
+			hadValueRef.current = true;
+			setShowRequired(false);
+			return;
+		}
+		if (hadValueRef.current) setShowRequired(true);
+	}, [required]);
+	/**
+	* Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,
+	* которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки
+	* момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,
+	* поэтому одного слушателя на корне поля хватает на любой контрол внутри.
+	* Реагируем только на пустое значение: формат, длина и прочие нарушения
+	* обязательности не касаются, и чужую ошибку выдавать за неё нельзя.
+	*/
+	(0, react.useEffect)(() => {
+		const node = rootRef.current;
+		if (!node || !required) return;
+		const handleInvalid = (event) => {
+			const target = event.target;
+			if ((target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) && target.validity.valueMissing) setShowRequired(true);
+		};
+		node.addEventListener("invalid", handleInvalid, true);
+		return () => node.removeEventListener("invalid", handleInvalid, true);
+	}, [required]);
+	const contextValue = (0, react.useMemo)(() => ({
+		id: inputId,
+		labelId,
+		invalid,
+		required,
+		describedBy: describedBy || void 0,
+		errorId,
+		reportValue
+	}), [
+		describedBy,
+		errorId,
+		inputId,
+		invalid,
+		labelId,
+		reportValue,
+		required
+	]);
+	const hintByPlacement = {
+		label: null,
+		bottom: null
+	};
+	if (hint) hintByPlacement[hintPlacement] = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		id: hintId,
+		className: require_cn.cn("field__hint", require_cn.when(hintPlacement === "label", "field__hint--label")),
+		children: hint
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		className: require_cn.cn("field", className, require_cn.when(Boolean(hint) && hintPlacement === "label", "field--hint-label")),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				id: labelId,
+				className: "field__label",
+				htmlFor: inputId,
+				children: label
+			}),
+			hintByPlacement.label,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_context.FieldControlProvider, {
+				value: contextValue,
+				children
+			}),
+			visibleError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: errorId,
+				className: "field__error",
+				role: "alert",
+				children: visibleError
+			}) : null,
+			hintByPlacement.bottom
+		]
+	});
+};
+exports.Field = Field;
+
+//# sourceMappingURL=field.cjs.map

package/dist/components/field/field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.cjs","names":["useId","useRef","useState","useCallback","useMemo","cn","when","FieldControlProvider"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport {\n  FieldControlProvider,\n  type FieldControlContext,\n} from './field-context';\nimport './field.scss';\n\nexport type FieldHintPlacement = 'bottom' | 'label';\n\nexport interface FieldProps {\n  label: ReactNode;\n  hint?: ReactNode;\n  /** `bottom` — под полем, `label` — сразу под лейблом. */\n  hintPlacement?: FieldHintPlacement;\n  error?: ReactNode;\n  /** Пустое значение после того, как в поле уже что-то было. */\n  required?: boolean;\n  /**\n   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.\n   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.\n   */\n  requiredMessage?: ReactNode;\n  className?: string;\n  /**\n   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке\n   * перебивается, а два контрола внутри получат одинаковый.\n   */\n  children: ReactNode;\n}\n\nconst isFilled = (value: string) => value.trim() !== '';\n\nconst requiredText = (label: ReactNode, message: ReactNode | undefined) => {\n  if (message) return message;\n  if (typeof label === 'string') return `Поле «${label}» обязательно`;\n  return 'Обязательное поле';\n};\n\nexport const Field = ({\n  label,\n  hint,\n  hintPlacement = 'bottom',\n  error,\n  required = false,\n  requiredMessage,\n  className,\n  children,\n}: FieldProps) => {\n  const inputId = useId();\n  const labelId = `${inputId}-label`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  // ponytail: value/defaultValue больше не читаем с ребёнка. Контрол зовёт\n  // reportValue из эффекта — до первого эффекта hadValue ещё false.\n  const hadValueRef = useRef(false);\n  const [showRequired, setShowRequired] = useState(false);\n  const requiredError =\n    required && showRequired ? requiredText(label, requiredMessage) : null;\n  const visibleError = error ?? requiredError;\n  const invalid = Boolean(visibleError);\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const errorId = invalid ? `${inputId}-error` : undefined;\n  const describedBy = [errorId, hintId].filter(Boolean).join(' ');\n\n  const reportValue = useCallback(\n    (value: string) => {\n      if (!required) return;\n\n      if (isFilled(value)) {\n        hadValueRef.current = true;\n        setShowRequired(false);\n        return;\n      }\n\n      if (hadValueRef.current) setShowRequired(true);\n    },\n    [required],\n  );\n\n  /**\n   * Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,\n   * которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки\n   * момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,\n   * поэтому одного слушателя на корне поля хватает на любой контрол внутри.\n   * Реагируем только на пустое значение: формат, длина и прочие нарушения\n   * обязательности не касаются, и чужую ошибку выдавать за неё нельзя.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node || !required) return;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      const missing =\n        (target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          target instanceof HTMLSelectElement) &&\n        target.validity.valueMissing;\n\n      if (missing) setShowRequired(true);\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, [required]);\n\n  const contextValue = useMemo<FieldControlContext>(\n    () => ({\n      id: inputId,\n      labelId,\n      invalid,\n      required,\n      describedBy: describedBy || undefined,\n      errorId,\n      reportValue,\n    }),\n    [describedBy, errorId, inputId, invalid, labelId, reportValue, required],\n  );\n\n  const hintByPlacement: Record<FieldHintPlacement, ReactNode> = {\n    label: null,\n    bottom: null,\n  };\n\n  if (hint) {\n    hintByPlacement[hintPlacement] = (\n      <p\n        id={hintId}\n        className={cn(\n          'field__hint',\n          when(hintPlacement === 'label', 'field__hint--label'),\n        )}\n      >\n        {hint}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        'field',\n        className,\n        when(Boolean(hint) && hintPlacement === 'label', 'field--hint-label'),\n      )}\n    >\n      <label id={labelId} className=\"field__label\" htmlFor={inputId}>\n        {label}\n      </label>\n      {hintByPlacement.label}\n      <FieldControlProvider value={contextValue}>\n        {children}\n      </FieldControlProvider>\n      {visibleError ? (\n        <p id={errorId} className=\"field__error\" role=\"alert\">\n          {visibleError}\n        </p>\n      ) : null}\n      {hintByPlacement.bottom}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAwCA,MAAM,YAAY,UAAkB,MAAM,KAAK,MAAM;AAErD,MAAM,gBAAgB,OAAkB,YAAmC;CACzE,IAAI,SAAS,OAAO;CACpB,IAAI,OAAO,UAAU,UAAU,OAAO,SAAS,MAAM;CACrD,OAAO;AACT;AAEA,MAAa,SAAS,EACpB,OACA,MACA,gBAAgB,UAChB,OACA,WAAW,OACX,iBACA,WACA,eACgB;CAChB,MAAM,WAAA,GAAUA,MAAAA,MAAAA,CAAM;CACtB,MAAM,UAAU,GAAG,QAAQ;CAC3B,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAuB,IAAI;CAG3C,MAAM,eAAA,GAAcA,MAAAA,OAAAA,CAAO,KAAK;CAChC,MAAM,CAAC,cAAc,oBAAA,GAAmBC,MAAAA,SAAAA,CAAS,KAAK;CACtD,MAAM,gBACJ,YAAY,eAAe,aAAa,OAAO,eAAe,IAAI;CACpE,MAAM,eAAe,SAAS;CAC9B,MAAM,UAAU,QAAQ,YAAY;CACpC,MAAM,SAAS,OAAO,GAAG,QAAQ,SAAS,KAAA;CAC1C,MAAM,UAAU,UAAU,GAAG,QAAQ,UAAU,KAAA;CAC/C,MAAM,cAAc,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE9D,MAAM,eAAA,GAAcC,MAAAA,YAAAA,EACjB,UAAkB;EACjB,IAAI,CAAC,UAAU;EAEf,IAAI,SAAS,KAAK,GAAG;GACnB,YAAY,UAAU;GACtB,gBAAgB,KAAK;GACrB;EACF;EAEA,IAAI,YAAY,SAAS,gBAAgB,IAAI;CAC/C,GACA,CAAC,QAAQ,CACX;;;;;;;;;CAUA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,CAAC,UAAU;EAExB,MAAM,iBAAiB,UAAiB;GACtC,MAAM,SAAS,MAAM;GAOrB,KALG,kBAAkB,oBACjB,kBAAkB,uBAClB,kBAAkB,sBACpB,OAAO,SAAS,cAEL,gBAAgB,IAAI;EACnC;EAEA,KAAK,iBAAiB,WAAW,eAAe,IAAI;EACpD,aAAa,KAAK,oBAAoB,WAAW,eAAe,IAAI;CACtE,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EACL,IAAI;EACJ;EACA;EACA;EACA,aAAa,eAAe,KAAA;EAC5B;EACA;CACF,IACA;EAAC;EAAa;EAAS;EAAS;EAAS;EAAS;EAAa;CAAQ,CACzE;CAEA,MAAM,kBAAyD;EAC7D,OAAO;EACP,QAAQ;CACV;CAEA,IAAI,MACF,gBAAgB,iBACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,IAAI;EACJ,WAAWC,WAAAA,GACT,eACAC,WAAAA,KAAK,kBAAkB,SAAS,oBAAoB,CACtD;EAEC,UAAA;CACA,CAAA;CAIP,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,KAAK;EACL,WAAWD,WAAAA,GACT,SACA,WACAC,WAAAA,KAAK,QAAQ,IAAI,KAAK,kBAAkB,SAAS,mBAAmB,CACtE;EANF,UAAA;GAQE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IAAO,IAAI;IAAS,WAAU;IAAe,SAAS;IACnD,UAAA;GACI,CAAA;GACN,gBAAgB;GACjB,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACrB,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAe,MAAK;IAC3C,UAAA;GACA,CAAA,IACD;GACH,gBAAgB;EACd;;AAET"}

package/dist/components/field/field.d.cts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+export type FieldHintPlacement = 'bottom' | 'label';
+export interface FieldProps {
+  label: ReactNode;
+  hint?: ReactNode;
+  /** `bottom` — под полем, `label` — сразу под лейблом. */
+  hintPlacement?: FieldHintPlacement;
+  error?: ReactNode;
+  /** Пустое значение после того, как в поле уже что-то было. */
+  required?: boolean;
+  /**
+   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.
+   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.
+   */
+  requiredMessage?: ReactNode;
+  className?: string;
+  /**
+   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке
+   * перебивается, а два контрола внутри получат одинаковый.
+   */
+  children: ReactNode;
+}
+export declare const Field: ({ label, hint, hintPlacement, error, required, requiredMessage, className, children }: FieldProps) => import("react").JSX.Element;
+//# sourceMappingURL=field.d.cts.map

package/dist/components/field/field.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+export type FieldHintPlacement = 'bottom' | 'label';
+export interface FieldProps {
+  label: ReactNode;
+  hint?: ReactNode;
+  /** `bottom` — под полем, `label` — сразу под лейблом. */
+  hintPlacement?: FieldHintPlacement;
+  error?: ReactNode;
+  /** Пустое значение после того, как в поле уже что-то было. */
+  required?: boolean;
+  /**
+   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.
+   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.
+   */
+  requiredMessage?: ReactNode;
+  className?: string;
+  /**
+   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке
+   * перебивается, а два контрола внутри получат одинаковый.
+   */
+  children: ReactNode;
+}
+export declare const Field: ({ label, hint, hintPlacement, error, required, requiredMessage, className, children }: FieldProps) => import("react").JSX.Element;
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field/field.js

@@ -0,0 +1,105 @@
+import { cn, when } from "../../lib/cn.js";
+import { FieldControlProvider } from "./field-context.js";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./field.scss";
+// src/components/field/field.tsx
+const isFilled = (value) => value.trim() !== "";
+const requiredText = (label, message) => {
+	if (message) return message;
+	if (typeof label === "string") return `Поле «${label}» обязательно`;
+	return "Обязательное поле";
+};
+const Field = ({ label, hint, hintPlacement = "bottom", error, required = false, requiredMessage, className, children }) => {
+	const inputId = useId();
+	const labelId = `${inputId}-label`;
+	const rootRef = useRef(null);
+	const hadValueRef = useRef(false);
+	const [showRequired, setShowRequired] = useState(false);
+	const requiredError = required && showRequired ? requiredText(label, requiredMessage) : null;
+	const visibleError = error ?? requiredError;
+	const invalid = Boolean(visibleError);
+	const hintId = hint ? `${inputId}-hint` : void 0;
+	const errorId = invalid ? `${inputId}-error` : void 0;
+	const describedBy = [errorId, hintId].filter(Boolean).join(" ");
+	const reportValue = useCallback((value) => {
+		if (!required) return;
+		if (isFilled(value)) {
+			hadValueRef.current = true;
+			setShowRequired(false);
+			return;
+		}
+		if (hadValueRef.current) setShowRequired(true);
+	}, [required]);
+	/**
+	* Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,
+	* которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки
+	* момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,
+	* поэтому одного слушателя на корне поля хватает на любой контрол внутри.
+	* Реагируем только на пустое значение: формат, длина и прочие нарушения
+	* обязательности не касаются, и чужую ошибку выдавать за неё нельзя.
+	*/
+	useEffect(() => {
+		const node = rootRef.current;
+		if (!node || !required) return;
+		const handleInvalid = (event) => {
+			const target = event.target;
+			if ((target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) && target.validity.valueMissing) setShowRequired(true);
+		};
+		node.addEventListener("invalid", handleInvalid, true);
+		return () => node.removeEventListener("invalid", handleInvalid, true);
+	}, [required]);
+	const contextValue = useMemo(() => ({
+		id: inputId,
+		labelId,
+		invalid,
+		required,
+		describedBy: describedBy || void 0,
+		errorId,
+		reportValue
+	}), [
+		describedBy,
+		errorId,
+		inputId,
+		invalid,
+		labelId,
+		reportValue,
+		required
+	]);
+	const hintByPlacement = {
+		label: null,
+		bottom: null
+	};
+	if (hint) hintByPlacement[hintPlacement] = /* @__PURE__ */ jsx("p", {
+		id: hintId,
+		className: cn("field__hint", when(hintPlacement === "label", "field__hint--label")),
+		children: hint
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cn("field", className, when(Boolean(hint) && hintPlacement === "label", "field--hint-label")),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				id: labelId,
+				className: "field__label",
+				htmlFor: inputId,
+				children: label
+			}),
+			hintByPlacement.label,
+			/* @__PURE__ */ jsx(FieldControlProvider, {
+				value: contextValue,
+				children
+			}),
+			visibleError ? /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "field__error",
+				role: "alert",
+				children: visibleError
+			}) : null,
+			hintByPlacement.bottom
+		]
+	});
+};
+export { Field };
+
+//# sourceMappingURL=field.js.map

package/dist/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { cn, when } from '@/lib/cn';\nimport {\n  FieldControlProvider,\n  type FieldControlContext,\n} from './field-context';\nimport './field.scss';\n\nexport type FieldHintPlacement = 'bottom' | 'label';\n\nexport interface FieldProps {\n  label: ReactNode;\n  hint?: ReactNode;\n  /** `bottom` — под полем, `label` — сразу под лейблом. */\n  hintPlacement?: FieldHintPlacement;\n  error?: ReactNode;\n  /** Пустое значение после того, как в поле уже что-то было. */\n  required?: boolean;\n  /**\n   * По умолчанию «Поле «{label}» обязательно», если лейбл — строка.\n   * Слово «поле» среднего рода, поэтому формулировка не зависит от рода лейбла.\n   */\n  requiredMessage?: ReactNode;\n  className?: string;\n  /**\n   * Один контрол: id он берёт у поля, поэтому свой `id` на ребёнке\n   * перебивается, а два контрола внутри получат одинаковый.\n   */\n  children: ReactNode;\n}\n\nconst isFilled = (value: string) => value.trim() !== '';\n\nconst requiredText = (label: ReactNode, message: ReactNode | undefined) => {\n  if (message) return message;\n  if (typeof label === 'string') return `Поле «${label}» обязательно`;\n  return 'Обязательное поле';\n};\n\nexport const Field = ({\n  label,\n  hint,\n  hintPlacement = 'bottom',\n  error,\n  required = false,\n  requiredMessage,\n  className,\n  children,\n}: FieldProps) => {\n  const inputId = useId();\n  const labelId = `${inputId}-label`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  // ponytail: value/defaultValue больше не читаем с ребёнка. Контрол зовёт\n  // reportValue из эффекта — до первого эффекта hadValue ещё false.\n  const hadValueRef = useRef(false);\n  const [showRequired, setShowRequired] = useState(false);\n  const requiredError =\n    required && showRequired ? requiredText(label, requiredMessage) : null;\n  const visibleError = error ?? requiredError;\n  const invalid = Boolean(visibleError);\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const errorId = invalid ? `${inputId}-error` : undefined;\n  const describedBy = [errorId, hintId].filter(Boolean).join(' ');\n\n  const reportValue = useCallback(\n    (value: string) => {\n      if (!required) return;\n\n      if (isFilled(value)) {\n        hadValueRef.current = true;\n        setShowRequired(false);\n        return;\n      }\n\n      if (hadValueRef.current) setShowRequired(true);\n    },\n    [required],\n  );\n\n  /**\n   * Второй повод пожаловаться — неудачная проверка формы. Нужен для контролов,\n   * которые нельзя опустошить: радиогруппу обратно не снимут, и до отправки\n   * момента для ошибки нет. `invalid` не всплывает, но проходит фазу захвата,\n   * поэтому одного слушателя на корне поля хватает на любой контрол внутри.\n   * Реагируем только на пустое значение: формат, длина и прочие нарушения\n   * обязательности не касаются, и чужую ошибку выдавать за неё нельзя.\n   */\n  useEffect(() => {\n    const node = rootRef.current;\n    if (!node || !required) return;\n\n    const handleInvalid = (event: Event) => {\n      const target = event.target;\n      const missing =\n        (target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          target instanceof HTMLSelectElement) &&\n        target.validity.valueMissing;\n\n      if (missing) setShowRequired(true);\n    };\n\n    node.addEventListener('invalid', handleInvalid, true);\n    return () => node.removeEventListener('invalid', handleInvalid, true);\n  }, [required]);\n\n  const contextValue = useMemo<FieldControlContext>(\n    () => ({\n      id: inputId,\n      labelId,\n      invalid,\n      required,\n      describedBy: describedBy || undefined,\n      errorId,\n      reportValue,\n    }),\n    [describedBy, errorId, inputId, invalid, labelId, reportValue, required],\n  );\n\n  const hintByPlacement: Record<FieldHintPlacement, ReactNode> = {\n    label: null,\n    bottom: null,\n  };\n\n  if (hint) {\n    hintByPlacement[hintPlacement] = (\n      <p\n        id={hintId}\n        className={cn(\n          'field__hint',\n          when(hintPlacement === 'label', 'field__hint--label'),\n        )}\n      >\n        {hint}\n      </p>\n    );\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        'field',\n        className,\n        when(Boolean(hint) && hintPlacement === 'label', 'field--hint-label'),\n      )}\n    >\n      <label id={labelId} className=\"field__label\" htmlFor={inputId}>\n        {label}\n      </label>\n      {hintByPlacement.label}\n      <FieldControlProvider value={contextValue}>\n        {children}\n      </FieldControlProvider>\n      {visibleError ? (\n        <p id={errorId} className=\"field__error\" role=\"alert\">\n          {visibleError}\n        </p>\n      ) : null}\n      {hintByPlacement.bottom}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAwCA,MAAM,YAAY,UAAkB,MAAM,KAAK,MAAM;AAErD,MAAM,gBAAgB,OAAkB,YAAmC;CACzE,IAAI,SAAS,OAAO;CACpB,IAAI,OAAO,UAAU,UAAU,OAAO,SAAS,MAAM;CACrD,OAAO;AACT;AAEA,MAAa,SAAS,EACpB,OACA,MACA,gBAAgB,UAChB,OACA,WAAW,OACX,iBACA,WACA,eACgB;CAChB,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,GAAG,QAAQ;CAC3B,MAAM,UAAU,OAAuB,IAAI;CAG3C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,gBACJ,YAAY,eAAe,aAAa,OAAO,eAAe,IAAI;CACpE,MAAM,eAAe,SAAS;CAC9B,MAAM,UAAU,QAAQ,YAAY;CACpC,MAAM,SAAS,OAAO,GAAG,QAAQ,SAAS,KAAA;CAC1C,MAAM,UAAU,UAAU,GAAG,QAAQ,UAAU,KAAA;CAC/C,MAAM,cAAc,CAAC,SAAS,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE9D,MAAM,cAAc,aACjB,UAAkB;EACjB,IAAI,CAAC,UAAU;EAEf,IAAI,SAAS,KAAK,GAAG;GACnB,YAAY,UAAU;GACtB,gBAAgB,KAAK;GACrB;EACF;EAEA,IAAI,YAAY,SAAS,gBAAgB,IAAI;CAC/C,GACA,CAAC,QAAQ,CACX;;;;;;;;;CAUA,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,CAAC,UAAU;EAExB,MAAM,iBAAiB,UAAiB;GACtC,MAAM,SAAS,MAAM;GAOrB,KALG,kBAAkB,oBACjB,kBAAkB,uBAClB,kBAAkB,sBACpB,OAAO,SAAS,cAEL,gBAAgB,IAAI;EACnC;EAEA,KAAK,iBAAiB,WAAW,eAAe,IAAI;EACpD,aAAa,KAAK,oBAAoB,WAAW,eAAe,IAAI;CACtE,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,eAAe,eACZ;EACL,IAAI;EACJ;EACA;EACA;EACA,aAAa,eAAe,KAAA;EAC5B;EACA;CACF,IACA;EAAC;EAAa;EAAS;EAAS;EAAS;EAAS;EAAa;CAAQ,CACzE;CAEA,MAAM,kBAAyD;EAC7D,OAAO;EACP,QAAQ;CACV;CAEA,IAAI,MACF,gBAAgB,iBACd,oBAAC,KAAD;EACE,IAAI;EACJ,WAAW,GACT,eACA,KAAK,kBAAkB,SAAS,oBAAoB,CACtD;EAEC,UAAA;CACA,CAAA;CAIP,OACE,qBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SACA,WACA,KAAK,QAAQ,IAAI,KAAK,kBAAkB,SAAS,mBAAmB,CACtE;EANF,UAAA;GAQE,oBAAC,SAAD;IAAO,IAAI;IAAS,WAAU;IAAe,SAAS;IACnD,UAAA;GACI,CAAA;GACN,gBAAgB;GACjB,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACrB,eACC,oBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IAAe,MAAK;IAC3C,UAAA;GACA,CAAA,IACD;GACH,gBAAgB;EACd;;AAET"}