@de-kit/st-ui 0.1.4 → 0.1.6

package/dist/components/field/field.scss

@@ -0,0 +1,43 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.field__label {
+  color: var(--color-foreground);
+  font-size: var(--text-lg);
+  font-weight: 900;
+  line-height: var(--text-lg--line-height);
+  display: block;
+  margin-bottom: var(--space-3);
+  overflow-wrap: anywhere;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.field__hint,
+.field__error {
+  margin: var(--space-2) 0 0 0;
+  font-size: var(--text-xs);
+  line-height: var(--text-xs--line-height);
+}
+
+.field__hint {
+  color: var(--color-muted-foreground);
+}
+
+.field--hint-label .field__label {
+  margin-bottom: var(--space-2);
+}
+
+.field__hint--label {
+  margin: 0 0 var(--space-3);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  color: var(--color-foreground);
+}
+
+.field__error {
+  color: var(--color-destructive);
+}

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

@@ -0,0 +1,2 @@
+import { Field, FieldHintPlacement, FieldProps } from "./field.cjs";
+export { Field, type FieldHintPlacement, type FieldProps };

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

@@ -0,0 +1,2 @@
+import { Field, FieldHintPlacement, FieldProps } from "./field.js";
+export { Field, type FieldHintPlacement, type FieldProps };

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

@@ -1,2 +1,2 @@
-import { Input, InputProps } from "./input.cjs";
-export { Input, type InputProps };
+import { Input, InputProps, InputSize } from "./input.cjs";
+export { Input, type InputProps, type InputSize };

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

@@ -1,2 +1,2 @@
-import { Input, InputProps } from "./input.js";
-export { Input, type InputProps };
+import { Input, InputProps, InputSize } from "./input.js";
+export { Input, type InputProps, type InputSize };

package/dist/components/input/input.cjs

@@ -1,16 +1,96 @@
 const require_cn = require("../../lib/cn.cjs");
+const require_field_context = require("../field/field-context.cjs");
+const require_icon_cross = require("../../icons/icon-cross.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 require("./input.scss");
 // src/components/input/input.tsx
-const Input = (0, react.forwardRef)(function Input({ type = "text", recommended, error, className, disabled, ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		ref,
-		type,
-		disabled,
-		"aria-invalid": error || void 0,
-		className: require_cn.cn("input", className, require_cn.when(recommended, "input--recommended"), require_cn.when(error, "input--error")),
-		...props
+const assignRef = (ref, node) => {
+	if (typeof ref === "function") {
+		ref(node);
+		return;
+	}
+	if (ref) ref.current = node;
+};
+const toInputValue = (value) => value == null ? "" : String(value);
+/**
+* Прямая запись `input.value` обновляет value-tracker React, и onChange не стреляет.
+* Сеттер прототипа трекер не трогает.
+*/
+const emitInputValue = (input, next) => {
+	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+const Input = (0, react.forwardRef)(function Input({ type = "text", size = "md", recommended, error, clearable = false, clearLabel = "Очистить", onClear, className, disabled, readOnly, value, defaultValue, onChange, ...props }, ref) {
+	const field = require_field_context.useFieldControl();
+	const reportValue = field?.reportValue;
+	const inputRef = (0, react.useRef)(null);
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(() => toInputValue(defaultValue));
+	const current = isControlled ? toInputValue(value) : uncontrolledValue;
+	const isInvalid = Boolean(error) || Boolean(field?.invalid);
+	const describedBy = [field?.describedBy, props["aria-describedby"]].filter((part) => Boolean(part)).join(" ");
+	const setRef = (0, react.useCallback)((node) => {
+		inputRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	(0, react.useEffect)(() => {
+		const form = inputRef.current?.form;
+		if (!form || isControlled) return;
+		const handleReset = () => {
+			setUncontrolledValue(toInputValue(defaultValue));
+		};
+		form.addEventListener("reset", handleReset);
+		return () => form.removeEventListener("reset", handleReset);
+	}, [isControlled, defaultValue]);
+	(0, react.useEffect)(() => {
+		reportValue?.(current);
+	}, [current, reportValue]);
+	const handleChange = (event) => {
+		if (!isControlled) setUncontrolledValue(event.target.value);
+		onChange?.(event);
+	};
+	const handleClearMouseDown = (event) => {
+		event.preventDefault();
+	};
+	const handleClear = () => {
+		const input = inputRef.current;
+		if (!input) return;
+		emitInputValue(input, "");
+		onClear?.();
+		input.focus();
+	};
+	const canClear = clearable && !disabled && !readOnly && current !== "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "input__wrap",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			...props,
+			ref: setRef,
+			type,
+			disabled,
+			readOnly,
+			...isControlled ? { value } : { defaultValue },
+			onChange: handleChange,
+			...isInvalid ? { "aria-invalid": true } : {},
+			...field ? { id: field.id } : {},
+			...field?.required ? {
+				"required": true,
+				"aria-required": true
+			} : {},
+			...describedBy ? { "aria-describedby": describedBy } : {},
+			...field?.errorId ? { "aria-errormessage": field.errorId } : {},
+			className: require_cn.cn("input", className, require_cn.when(size !== "md", `input--${size}`), require_cn.when(recommended, "input--recommended"), require_cn.when(isInvalid, "input--error"), require_cn.when(clearable && !disabled && !readOnly, "input--clearable"))
+		}), canClear ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			className: "input__clear",
+			"aria-label": clearLabel,
+			onMouseDown: handleClearMouseDown,
+			onClick: handleClear,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_cross.IconCross, {
+				width: 16,
+				height: 16
+			})
+		}) : null]
 	});
 });
 exports.Input = Input;

package/dist/components/input/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":["forwardRef","cn","when"],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './input.scss';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  recommended?: boolean;\n  error?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { type = 'text', recommended, error, className, disabled, ...props },\n  ref,\n) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      aria-invalid={error || undefined}\n      className={cn(\n        'input',\n        className,\n        when(recommended, 'input--recommended'),\n        when(error, 'input--error'),\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,SAAA,GAAQA,MAAAA,WAAAA,CAAyC,SAAS,MACrE,EAAE,OAAO,QAAQ,aAAa,OAAO,WAAW,UAAU,GAAG,SAC7D,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACO;EACC;EACI;EACV,gBAAc,SAAS,KAAA;EACvB,WAAWC,WAAAA,GACT,SACA,WACAC,WAAAA,KAAK,aAAa,oBAAoB,GACtCA,WAAAA,KAAK,OAAO,cAAc,CAC5B;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"input.cjs","names":["forwardRef","useFieldControl","useRef","useState","useCallback","cn","when","IconCross"],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type MouseEvent,\n  type Ref,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { IconCross } from '@/icons/icon-cross';\nimport { cn, when } from '@/lib/cn';\nimport './input.scss';\n\nexport type InputSize = 'sm' | 'md' | 'lg';\n\n/** Нативный `size` (ширина в символах) занят размером контрола: высоты как у `Button`. */\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  size?: InputSize;\n  recommended?: boolean;\n  error?: boolean;\n  /** Крестик справа. Появляется, только когда в поле есть значение. */\n  clearable?: boolean;\n  clearLabel?: string;\n  onClear?: () => void;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLInputElement> | undefined,\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 toInputValue = (value: InputHTMLAttributes<HTMLInputElement>['value']) =>\n  value == null ? '' : String(value);\n\n/**\n * Прямая запись `input.value` обновляет value-tracker React, и onChange не стреляет.\n * Сеттер прототипа трекер не трогает.\n */\nconst emitInputValue = (input: HTMLInputElement, next: string) => {\n  const setter = Object.getOwnPropertyDescriptor(\n    HTMLInputElement.prototype,\n    'value',\n  )?.set;\n\n  setter?.call(input, next);\n  input.dispatchEvent(new Event('input', { bubbles: true }));\n};\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    type = 'text',\n    size = 'md',\n    recommended,\n    error,\n    clearable = false,\n    clearLabel = 'Очистить',\n    onClear,\n    className,\n    disabled,\n    readOnly,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  },\n  ref,\n) {\n  const field = useFieldControl();\n  const reportValue = field?.reportValue;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(() =>\n    toInputValue(defaultValue),\n  );\n  const current = isControlled ? toInputValue(value) : uncontrolledValue;\n  const isInvalid = Boolean(error) || Boolean(field?.invalid);\n  const describedBy = [field?.describedBy, props['aria-describedby']]\n    .filter(part => Boolean(part))\n    .join(' ');\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    const form = inputRef.current?.form;\n    if (!form || isControlled) return;\n\n    // reset всплывает от form вверх и до инпута не доходит\n    const handleReset = () => {\n      setUncontrolledValue(toInputValue(defaultValue));\n    };\n\n    form.addEventListener('reset', handleReset);\n    return () => form.removeEventListener('reset', handleReset);\n  }, [isControlled, defaultValue]);\n\n  useEffect(() => {\n    reportValue?.(current);\n  }, [current, reportValue]);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolledValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleClearMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n  };\n\n  const handleClear = () => {\n    const input = inputRef.current;\n    if (!input) return;\n\n    emitInputValue(input, '');\n    onClear?.();\n    input.focus();\n  };\n\n  const canClear = clearable && !disabled && !readOnly && current !== '';\n\n  return (\n    <div className=\"input__wrap\">\n      <input\n        {...props}\n        ref={setRef}\n        type={type}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...(isControlled ? { value } : { defaultValue })}\n        onChange={handleChange}\n        {...(isInvalid ? { 'aria-invalid': true } : {})}\n        {...(field ? { id: field.id } : {})}\n        {...(field?.required\n          ? { 'required': true, 'aria-required': true }\n          : {})}\n        {...(describedBy ? { 'aria-describedby': describedBy } : {})}\n        {...(field?.errorId ? { 'aria-errormessage': field.errorId } : {})}\n        className={cn(\n          'input',\n          className,\n          when(size !== 'md', `input--${size}`),\n          when(recommended, 'input--recommended'),\n          when(isInvalid, 'input--error'),\n          when(clearable && !disabled && !readOnly, 'input--clearable'),\n        )}\n      />\n      {canClear ? (\n        <button\n          type=\"button\"\n          className=\"input__clear\"\n          aria-label={clearLabel}\n          onMouseDown={handleClearMouseDown}\n          onClick={handleClear}\n        >\n          <IconCross width={16} height={16} />\n        </button>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/input/input.d.cts

@@ -1,7 +1,14 @@
 import { InputHTMLAttributes } from "react";
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export type InputSize = 'sm' | 'md' | 'lg';
+/** Нативный `size` (ширина в символах) занят размером контрола: высоты как у `Button`. */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
   recommended?: boolean;
   error?: boolean;
+  /** Крестик справа. Появляется, только когда в поле есть значение. */
+  clearable?: boolean;
+  clearLabel?: string;
+  onClear?: () => void;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=input.d.cts.map

package/dist/components/input/input.d.ts

@@ -1,7 +1,14 @@
 import { InputHTMLAttributes } from "react";
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export type InputSize = 'sm' | 'md' | 'lg';
+/** Нативный `size` (ширина в символах) занят размером контрола: высоты как у `Button`. */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
   recommended?: boolean;
   error?: boolean;
+  /** Крестик справа. Появляется, только когда в поле есть значение. */
+  clearable?: boolean;
+  clearLabel?: string;
+  onClear?: () => void;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.js

@@ -1,16 +1,96 @@
 import { cn, when } from "../../lib/cn.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useFieldControl } from "../field/field-context.js";
+import { IconCross } from "../../icons/icon-cross.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import "./input.scss";
 // src/components/input/input.tsx
-const Input = forwardRef(function Input({ type = "text", recommended, error, className, disabled, ...props }, ref) {
-	return /* @__PURE__ */ jsx("input", {
-		ref,
-		type,
-		disabled,
-		"aria-invalid": error || void 0,
-		className: cn("input", className, when(recommended, "input--recommended"), when(error, "input--error")),
-		...props
+const assignRef = (ref, node) => {
+	if (typeof ref === "function") {
+		ref(node);
+		return;
+	}
+	if (ref) ref.current = node;
+};
+const toInputValue = (value) => value == null ? "" : String(value);
+/**
+* Прямая запись `input.value` обновляет value-tracker React, и onChange не стреляет.
+* Сеттер прототипа трекер не трогает.
+*/
+const emitInputValue = (input, next) => {
+	(Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set)?.call(input, next);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+const Input = forwardRef(function Input({ type = "text", size = "md", recommended, error, clearable = false, clearLabel = "Очистить", onClear, className, disabled, readOnly, value, defaultValue, onChange, ...props }, ref) {
+	const field = useFieldControl();
+	const reportValue = field?.reportValue;
+	const inputRef = useRef(null);
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => toInputValue(defaultValue));
+	const current = isControlled ? toInputValue(value) : uncontrolledValue;
+	const isInvalid = Boolean(error) || Boolean(field?.invalid);
+	const describedBy = [field?.describedBy, props["aria-describedby"]].filter((part) => Boolean(part)).join(" ");
+	const setRef = useCallback((node) => {
+		inputRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	useEffect(() => {
+		const form = inputRef.current?.form;
+		if (!form || isControlled) return;
+		const handleReset = () => {
+			setUncontrolledValue(toInputValue(defaultValue));
+		};
+		form.addEventListener("reset", handleReset);
+		return () => form.removeEventListener("reset", handleReset);
+	}, [isControlled, defaultValue]);
+	useEffect(() => {
+		reportValue?.(current);
+	}, [current, reportValue]);
+	const handleChange = (event) => {
+		if (!isControlled) setUncontrolledValue(event.target.value);
+		onChange?.(event);
+	};
+	const handleClearMouseDown = (event) => {
+		event.preventDefault();
+	};
+	const handleClear = () => {
+		const input = inputRef.current;
+		if (!input) return;
+		emitInputValue(input, "");
+		onClear?.();
+		input.focus();
+	};
+	const canClear = clearable && !disabled && !readOnly && current !== "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "input__wrap",
+		children: [/* @__PURE__ */ jsx("input", {
+			...props,
+			ref: setRef,
+			type,
+			disabled,
+			readOnly,
+			...isControlled ? { value } : { defaultValue },
+			onChange: handleChange,
+			...isInvalid ? { "aria-invalid": true } : {},
+			...field ? { id: field.id } : {},
+			...field?.required ? {
+				"required": true,
+				"aria-required": true
+			} : {},
+			...describedBy ? { "aria-describedby": describedBy } : {},
+			...field?.errorId ? { "aria-errormessage": field.errorId } : {},
+			className: cn("input", className, when(size !== "md", `input--${size}`), when(recommended, "input--recommended"), when(isInvalid, "input--error"), when(clearable && !disabled && !readOnly, "input--clearable"))
+		}), canClear ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "input__clear",
+			"aria-label": clearLabel,
+			onMouseDown: handleClearMouseDown,
+			onClick: handleClear,
+			children: /* @__PURE__ */ jsx(IconCross, {
+				width: 16,
+				height: 16
+			})
+		}) : null]
 	});
 });
 export { Input };

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './input.scss';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  recommended?: boolean;\n  error?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { type = 'text', recommended, error, className, disabled, ...props },\n  ref,\n) {\n  return (\n    <input\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      aria-invalid={error || undefined}\n      className={cn(\n        'input',\n        className,\n        when(recommended, 'input--recommended'),\n        when(error, 'input--error'),\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,OAAO,QAAQ,aAAa,OAAO,WAAW,UAAU,GAAG,SAC7D,KACA;CACA,OACE,oBAAC,SAAD;EACO;EACC;EACI;EACV,gBAAc,SAAS,KAAA;EACvB,WAAW,GACT,SACA,WACA,KAAK,aAAa,oBAAoB,GACtC,KAAK,OAAO,cAAc,CAC5B;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type MouseEvent,\n  type Ref,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { IconCross } from '@/icons/icon-cross';\nimport { cn, when } from '@/lib/cn';\nimport './input.scss';\n\nexport type InputSize = 'sm' | 'md' | 'lg';\n\n/** Нативный `size` (ширина в символах) занят размером контрола: высоты как у `Button`. */\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> {\n  size?: InputSize;\n  recommended?: boolean;\n  error?: boolean;\n  /** Крестик справа. Появляется, только когда в поле есть значение. */\n  clearable?: boolean;\n  clearLabel?: string;\n  onClear?: () => void;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLInputElement> | undefined,\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 toInputValue = (value: InputHTMLAttributes<HTMLInputElement>['value']) =>\n  value == null ? '' : String(value);\n\n/**\n * Прямая запись `input.value` обновляет value-tracker React, и onChange не стреляет.\n * Сеттер прототипа трекер не трогает.\n */\nconst emitInputValue = (input: HTMLInputElement, next: string) => {\n  const setter = Object.getOwnPropertyDescriptor(\n    HTMLInputElement.prototype,\n    'value',\n  )?.set;\n\n  setter?.call(input, next);\n  input.dispatchEvent(new Event('input', { bubbles: true }));\n};\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    type = 'text',\n    size = 'md',\n    recommended,\n    error,\n    clearable = false,\n    clearLabel = 'Очистить',\n    onClear,\n    className,\n    disabled,\n    readOnly,\n    value,\n    defaultValue,\n    onChange,\n    ...props\n  },\n  ref,\n) {\n  const field = useFieldControl();\n  const reportValue = field?.reportValue;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(() =>\n    toInputValue(defaultValue),\n  );\n  const current = isControlled ? toInputValue(value) : uncontrolledValue;\n  const isInvalid = Boolean(error) || Boolean(field?.invalid);\n  const describedBy = [field?.describedBy, props['aria-describedby']]\n    .filter(part => Boolean(part))\n    .join(' ');\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    const form = inputRef.current?.form;\n    if (!form || isControlled) return;\n\n    // reset всплывает от form вверх и до инпута не доходит\n    const handleReset = () => {\n      setUncontrolledValue(toInputValue(defaultValue));\n    };\n\n    form.addEventListener('reset', handleReset);\n    return () => form.removeEventListener('reset', handleReset);\n  }, [isControlled, defaultValue]);\n\n  useEffect(() => {\n    reportValue?.(current);\n  }, [current, reportValue]);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolledValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleClearMouseDown = (event: MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n  };\n\n  const handleClear = () => {\n    const input = inputRef.current;\n    if (!input) return;\n\n    emitInputValue(input, '');\n    onClear?.();\n    input.focus();\n  };\n\n  const canClear = clearable && !disabled && !readOnly && current !== '';\n\n  return (\n    <div className=\"input__wrap\">\n      <input\n        {...props}\n        ref={setRef}\n        type={type}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...(isControlled ? { value } : { defaultValue })}\n        onChange={handleChange}\n        {...(isInvalid ? { 'aria-invalid': true } : {})}\n        {...(field ? { id: field.id } : {})}\n        {...(field?.required\n          ? { 'required': true, 'aria-required': true }\n          : {})}\n        {...(describedBy ? { 'aria-describedby': describedBy } : {})}\n        {...(field?.errorId ? { 'aria-errormessage': field.errorId } : {})}\n        className={cn(\n          'input',\n          className,\n          when(size !== 'md', `input--${size}`),\n          when(recommended, 'input--recommended'),\n          when(isInvalid, 'input--error'),\n          when(clearable && !disabled && !readOnly, 'input--clearable'),\n        )}\n      />\n      {canClear ? (\n        <button\n          type=\"button\"\n          className=\"input__clear\"\n          aria-label={clearLabel}\n          onMouseDown={handleClearMouseDown}\n          onClick={handleClear}\n        >\n          <IconCross width={16} height={16} />\n        </button>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/input/input.scss

@@ -1,13 +1,17 @@
 .input {
+  // Размер контрола. Высоты совпадают с Button: sm 30px, md 40px, lg 52px.
+  --input-padding-y: 9px;
+  --input-padding-x: 14px;
+  --input-height: 40px;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 9px 14px;
-  font-size: 14px;
-  line-height: 20px;
+  padding: var(--input-padding-y) var(--input-padding-x);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
   background-color: transparent;
-  color: var(--color-black);
+  color: var(--color-foreground);
   border-radius: var(--radius-sm);
   appearance: none;
   font-family: var(--font-sans);
@@ -18,11 +22,19 @@
     border-color 0.3s,
     box-shadow 0.2s;
 
+  // Фон автозаполнения Chrome перебивается только внутренней тенью.
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus,
   &:-webkit-autofill:active {
-    -webkit-box-shadow: 0 0 0 30px white inset;
+    -webkit-box-shadow: 0 0 0 30px var(--color-background) inset;
+  }
+
+  // :-webkit-autofill:focus специфичнее :focus и затирает его box-shadow,
+  // поэтому обводка фокуса повторяется здесь второй тенью.
+  &:-webkit-autofill:focus {
+    -webkit-box-shadow:
+      0 0 0 30px var(--color-background) inset,
+      0 0 0 var(--focus-ring-width) var(--focus-ring-color);
   }
 
   &[type='number']::-webkit-outer-spin-button,
@@ -36,7 +48,7 @@
   }
 
   &[type='date'] {
-    height: 40px;
+    height: var(--input-height);
   }
 
   &::-webkit-date-and-time-value {
@@ -44,21 +56,72 @@
   }
 
   &:focus {
-    border-color: var(--color-black);
-    box-shadow: 0 0 0 1px var(--color-black);
+    border-color: var(--color-ring);
+    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
   }
 
   &:disabled {
-    background-color: var(--color-neutral-200);
-    color: var(--color-neutral-500);
-    fill: var(--color-neutral-500);
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    fill: var(--color-muted-foreground);
+  }
+
+  &--sm {
+    --input-padding-y: 4px;
+    --input-padding-x: 12px;
+    --input-height: 30px;
+  }
+
+  &--lg {
+    --input-padding-y: var(--space-3);
+    --input-padding-x: 24px;
+    --input-height: 52px;
   }
 
   &--recommended {
-    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
+    background-color: var(--color-recommended);
   }
 
   &--error {
-    border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+    border-color: color-mix(in srgb, var(--color-destructive) 50%, transparent);
+  }
+
+  &--clearable {
+    padding-right: 36px;
+
+    &[type='search']::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+  }
+}
+
+.input__wrap {
+  position: relative;
+  width: 100%;
+}
+
+.input__clear {
+  position: absolute;
+  top: 0;
+  right: 4px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-muted-foreground);
+
+  &:hover {
+    color: var(--color-foreground);
+  }
+
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    border-radius: var(--radius-sm);
   }
 }

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

@@ -1,2 +1,2 @@
-import { RadioInput, RadioInputProps } from "./radio.cjs";
-export { RadioInput, type RadioInputProps };
+import { RadioGroup, RadioGroupProps, RadioInput, RadioInputProps } from "./radio.cjs";
+export { RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps };

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

@@ -1,2 +1,2 @@
-import { RadioInput, RadioInputProps } from "./radio.js";
-export { RadioInput, type RadioInputProps };
+import { RadioGroup, RadioGroupProps, RadioInput, RadioInputProps } from "./radio.js";
+export { RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps };

package/dist/components/radio/radio.cjs

@@ -1,27 +1,69 @@
 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("./radio.scss");
 // src/components/radio/radio.tsx
-const RadioInput = (0, react.forwardRef)(function RadioInput({ id, className, title, error, disabled, ...props }, ref) {
+const RadioGroupStateContext = (0, react.createContext)(null);
+const RadioGroup = ({ label, name, required: requiredProp = false, children, className }) => {
+	const field = require_field_context.useFieldControl();
+	const required = requiredProp || Boolean(field?.required);
+	const labelledBy = !label && field?.labelId ? field.labelId : void 0;
+	const reportValue = field?.reportValue;
+	const group = (0, react.useMemo)(() => ({
+		name,
+		required,
+		reportValue
+	}), [
+		name,
+		required,
+		reportValue
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+		className: require_cn.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__ */ (0, react_jsx_runtime.jsx)("legend", {
+			className: "radio-group__legend",
+			children: label
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupStateContext.Provider, {
+			value: group,
+			children
+		})]
+	});
+};
+const RadioInput = (0, react.forwardRef)(function RadioInput({ id, className, label, error, disabled, name, onChange, ...props }, ref) {
+	const group = (0, react.useContext)(RadioGroupStateContext);
 	const autoId = (0, react.useId)();
 	const inputId = id ?? autoId;
+	const handleChange = (event) => {
+		if (event.target.checked) group?.reportValue?.(event.target.value);
+		onChange?.(event);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_cn.cn("radio", className, require_cn.when(error, "radio--error")),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			...props,
 			ref,
 			type: "radio",
 			id: inputId,
+			name: group?.name ?? name,
 			disabled,
-			className: "radio__input",
-			...props
-		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			...group?.required ? { required: true } : {},
+			onChange: handleChange,
+			className: "radio__input"
+		}), label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 			className: "radio__label",
 			htmlFor: inputId,
-			children: title
+			children: label
 		}) : null]
 	});
 });
+exports.RadioGroup = RadioGroup;
 exports.RadioInput = RadioInput;
 
 //# sourceMappingURL=radio.cjs.map

package/dist/components/radio/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":["forwardRef","useId","cn","when"],"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,cAAA,GAAaA,MAAAA,WAAAA,CACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,GAAG,SAC5C,KACA;CACA,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAG,SAAS,WAAWC,WAAAA,KAAK,OAAO,cAAc,CAAC;EAAlE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAU;GACV,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAe,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"radio.cjs","names":["createContext","useFieldControl","useMemo","cn","forwardRef","useContext","useId","when"],"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,0BAAA,GAAyBA,MAAAA,cAAAA,CAAsC,IAAI;AAYzE,MAAa,cAAc,EACzB,OACA,MACA,UAAU,eAAe,OACzB,UACA,gBACqB;CACrB,MAAM,QAAQC,sBAAAA,gBAAgB;CAC9B,MAAM,WAAW,gBAAgB,QAAQ,OAAO,QAAQ;CACxD,MAAM,aAAa,CAAC,SAAS,OAAO,UAAU,MAAM,UAAU,KAAA;CAI9D,MAAM,cAAc,OAAO;CAC3B,MAAM,SAAA,GAAQC,MAAAA,QAAAA,QACL;EAAE;EAAM;EAAU;CAAY,IACrC;EAAC;EAAM;EAAU;CAAW,CAC9B;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,YAAD;EACE,WAAWC,WAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAQ,WAAU;GAAuB,UAAA;EAAc,CAAA,IAAI,MACpE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAuB,UAAxB;GAAiC,OAAO;GACrC;EAC8B,CAAA,CACzB;;AAEd;AAOA,MAAa,cAAA,GAAaC,MAAAA,WAAAA,CACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,MAAM,UAAU,GAAG,SAC5D,KACA;CACA,MAAM,SAAA,GAAQC,MAAAA,WAAAA,CAAW,sBAAsB;CAC/C,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,MAAM,OAAO,SAAS,OAAO,cAAc,MAAM,OAAO,KAAK;EACjE,WAAW,KAAK;CAClB;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWH,WAAAA,GAAG,SAAS,WAAWI,WAAAA,KAAK,OAAO,cAAc,CAAC;EAAlE,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,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,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAe,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/radio/radio.d.cts

@@ -1,6 +1,16 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface RadioGroupProps {
+  /** Легенда группы. Внутри `Field` не нужна: именем станет лейбл поля. */
+  label?: ReactNode;
+  name: string;
+  /** Внутри `Field` его `required` и так включает группу, здесь — для группы отдельно. */
+  required?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+export declare const RadioGroup: ({ label, name, required: requiredProp, children, className }: RadioGroupProps) => import("react").JSX.Element;
 export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  title?: string;
+  label?: ReactNode;
   error?: boolean;
 }
 export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/radio/radio.d.ts

@@ -1,6 +1,16 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface RadioGroupProps {
+  /** Легенда группы. Внутри `Field` не нужна: именем станет лейбл поля. */
+  label?: ReactNode;
+  name: string;
+  /** Внутри `Field` его `required` и так включает группу, здесь — для группы отдельно. */
+  required?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+export declare const RadioGroup: ({ label, name, required: requiredProp, children, className }: RadioGroupProps) => import("react").JSX.Element;
 export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  title?: string;
+  label?: ReactNode;
   error?: boolean;
 }
 export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;