@de-kit/st-ui 0.1.0 → 0.1.2

package/dist/components/radio/radio.js

@@ -1,22 +1,22 @@
 import { cn, when } from "../../lib/cn.js";
 import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./radio.module.scss";
+import "./radio.scss";
 // src/components/radio/radio.tsx
 const RadioInput = forwardRef(function RadioInput({ id, className, title, error, disabled, ...props }, ref) {
 	const autoId = useId();
 	const inputId = id ?? autoId;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles.radio, className),
+		className: cn("radio", className, when(error, "radio--error")),
 		children: [/* @__PURE__ */ jsx("input", {
 			ref,
 			type: "radio",
 			id: inputId,
 			disabled,
-			className: cn(styles.input, when(error, styles.error)),
+			className: "radio__input",
 			...props
 		}), title ? /* @__PURE__ */ jsx("label", {
-			className: styles.label,
+			className: "radio__label",
 			htmlFor: inputId,
 			children: title
 		}) : null]

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 styles from './radio.module.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(styles.radio, className)}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          disabled={disabled}\n          className={cn(styles.input, when(error, styles.error))}\n          {...props}\n        />\n        {title ? (\n          <label className={styles.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,OAAO,OAAO,SAAS;EAA1C,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAW,GAAG,OAAO,OAAO,KAAK,OAAO,OAAO,KAAK,CAAC;GACrD,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAW,OAAO;GAAO,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
+{"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"}

package/dist/components/radio/{radio.module.scss → radio.scss}

@@ -1,11 +1,4 @@
-@import '../../styles/vars.scss';
-
-.radio {
-  display: flex;
-  align-items: flex-start;
-}
-
-.label {
+.radio__label {
   font-size: 14px;
   line-height: 20px;
   display: inline-block;
@@ -15,7 +8,7 @@
   cursor: pointer;
 }
 
-.input {
+.radio__input {
   --active: #000;
   --active-inner: #fff;
   --border: #e5e5e5;
@@ -96,13 +89,21 @@
       }
     }
 
-    & + .label {
-      color: $colorGrayTwo;
+    & + .radio__label {
+      color: var(--color-gray);
       cursor: not-allowed;
     }
   }
+}
+
+// Модификатор ошибки после .radio__input: иначе shorthand border затрёт border-color.
+.radio {
+  display: flex;
+  align-items: flex-start;
 
-  &.error {
-    border-color: $inputErrorBorder;
+  &--error {
+    .radio__input {
+      border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+    }
   }
 }

package/dist/components/spinner/spinner.cjs

@@ -1,8 +1,6 @@
-const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_cn = require("../../lib/cn.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-let src_components_spinner_spinner_module_scss = require("./spinner.module.scss");
-src_components_spinner_spinner_module_scss = require_runtime.__toESM(src_components_spinner_spinner_module_scss, 1);
+require("./spinner.scss");
 // src/components/spinner/spinner.tsx
 const spinnerPosition = {
 	top: "top",
@@ -42,7 +40,7 @@ const svgProps = {
 	"aria-hidden": true
 };
 const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: require_cn.cn(src_components_spinner_spinner_module_scss.default.spinner, className, require_cn.when(position === spinnerPosition.top, src_components_spinner_spinner_module_scss.default.top)),
+	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, {

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.cjs","names":["cn","styles","when"],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './spinner.module.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      styles.spinner,\n      className,\n      when(position === spinnerPosition.top, styles.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,GACTC,2CAAAA,QAAO,SACP,WACAC,WAAAA,KAAK,aAAa,gBAAgB,KAAKD,2CAAAA,QAAO,GAAG,CACnD;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":["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"}

package/dist/components/spinner/spinner.js

@@ -1,6 +1,6 @@
 import { cn, when } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-import styles from "./spinner.module.scss";
+import "./spinner.scss";
 // src/components/spinner/spinner.tsx
 const spinnerPosition = {
 	top: "top",
@@ -40,7 +40,7 @@ const svgProps = {
 	"aria-hidden": true
 };
 const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ jsx("div", {
-	className: cn(styles.spinner, className, when(position === spinnerPosition.top, styles.top)),
+	className: cn("spinner", className, when(position === spinnerPosition.top, "spinner--top")),
 	children: /* @__PURE__ */ jsx("svg", {
 		...svgProps,
 		children: dotDelays.map((begin, index) => /* @__PURE__ */ jsx(Dot, {

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 styles from './spinner.module.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      styles.spinner,\n      className,\n      when(position === spinnerPosition.top, styles.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,OAAO,SACP,WACA,KAAK,aAAa,gBAAgB,KAAK,OAAO,GAAG,CACnD;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 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"}

package/dist/components/spinner/{spinner.module.scss → spinner.scss}

@@ -5,8 +5,8 @@
   padding: 30px 0;
   align-items: center;
   justify-content: center;
-}
 
-.top {
-  align-items: flex-start;
+  &--top {
+    align-items: flex-start;
+  }
 }

package/dist/components/textarea/textarea.cjs

@@ -1,22 +1,20 @@
-const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_cn = require("../../lib/cn.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let src_components_textarea_textarea_module_scss = require("./textarea.module.scss");
-src_components_textarea_textarea_module_scss = require_runtime.__toESM(src_components_textarea_textarea_module_scss, 1);
+require("./textarea.scss");
 // src/components/textarea/textarea.tsx
 const TextArea = (0, react.forwardRef)(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: src_components_textarea_textarea_module_scss.default.wrap,
+		className: "textarea__wrap",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 			ref,
-			className: require_cn.cn(src_components_textarea_textarea_module_scss.default.textarea, className, require_cn.when(recommended, src_components_textarea_textarea_module_scss.default["textarea--recommended"]), require_cn.when(error, src_components_textarea_textarea_module_scss.default["textarea--error"])),
+			className: require_cn.cn("textarea", className, require_cn.when(recommended, "textarea--recommended"), require_cn.when(error, "textarea--error")),
 			value,
 			maxLength,
 			"aria-invalid": error || void 0,
 			...props
 		}), maxLength && !hideCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: src_components_textarea_textarea_module_scss.default.counter,
+			className: "textarea__counter",
 			children: [
 				"Максимум ",
 				maxLength,

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.cjs","names":["forwardRef","styles","cn","when"],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef, type TextareaHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './textarea.module.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={styles.wrap}>\n        <textarea\n          ref={ref}\n          className={cn(\n            styles.textarea,\n            className,\n            when(recommended, styles['textarea--recommended']),\n            when(error, styles['textarea--error']),\n          )}\n          value={value}\n          maxLength={maxLength}\n          aria-invalid={error || undefined}\n          {...props}\n        />\n        {maxLength && !hideCounter ? (\n          <span className={styles.counter}>Максимум {maxLength} символов</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,WAAWC,6CAAAA,QAAO;EAAvB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACO;GACL,WAAWC,WAAAA,GACTD,6CAAAA,QAAO,UACP,WACAE,WAAAA,KAAK,aAAaF,6CAAAA,QAAO,wBAAwB,GACjDE,WAAAA,KAAK,OAAOF,6CAAAA,QAAO,kBAAkB,CACvC;GACO;GACI;GACX,gBAAc,SAAS,KAAA;GACvB,GAAI;EACL,CAAA,GACA,aAAa,CAAC,cACb,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAWA,6CAAAA,QAAO;GAAxB,UAAA;IAAiC;IAAU;IAAU;GAAe;EAClE,CAAA,IAAA,IACD;;AAET,CACF"}
+{"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"}

package/dist/components/textarea/textarea.js

@@ -1,20 +1,20 @@
 import { cn, when } from "../../lib/cn.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./textarea.module.scss";
+import "./textarea.scss";
 // src/components/textarea/textarea.tsx
 const TextArea = forwardRef(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: styles.wrap,
+		className: "textarea__wrap",
 		children: [/* @__PURE__ */ jsx("textarea", {
 			ref,
-			className: cn(styles.textarea, className, when(recommended, styles["textarea--recommended"]), when(error, styles["textarea--error"])),
+			className: cn("textarea", className, when(recommended, "textarea--recommended"), when(error, "textarea--error")),
 			value,
 			maxLength,
 			"aria-invalid": error || void 0,
 			...props
 		}), maxLength && !hideCounter ? /* @__PURE__ */ jsxs("span", {
-			className: styles.counter,
+			className: "textarea__counter",
 			children: [
 				"Максимум ",
 				maxLength,

package/dist/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef, type TextareaHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport styles from './textarea.module.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={styles.wrap}>\n        <textarea\n          ref={ref}\n          className={cn(\n            styles.textarea,\n            className,\n            when(recommended, styles['textarea--recommended']),\n            when(error, styles['textarea--error']),\n          )}\n          value={value}\n          maxLength={maxLength}\n          aria-invalid={error || undefined}\n          {...props}\n        />\n        {maxLength && !hideCounter ? (\n          <span className={styles.counter}>Максимум {maxLength} символов</span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAYA,MAAa,WAAW,WACtB,SAAS,SACP,EACE,WACA,QAAQ,IACR,aACA,OACA,cAAc,OACd,WACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACE,oBAAC,YAAD;GACO;GACL,WAAW,GACT,OAAO,UACP,WACA,KAAK,aAAa,OAAO,wBAAwB,GACjD,KAAK,OAAO,OAAO,kBAAkB,CACvC;GACO;GACI;GACX,gBAAc,SAAS,KAAA;GACvB,GAAI;EACL,CAAA,GACA,aAAa,CAAC,cACb,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAxB,UAAA;IAAiC;IAAU;IAAU;GAAe;EAClE,CAAA,IAAA,IACD;;AAET,CACF"}
+{"version":3,"file":"textarea.js","names":[],"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,WAAW,WACtB,SAAS,SACP,EACE,WACA,QAAQ,IACR,aACA,OACA,cAAc,OACd,WACA,GAAG,SAEL,KACA;CACA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,YAAD;GACO;GACL,WAAW,GACT,YACA,WACA,KAAK,aAAa,uBAAuB,GACzC,KAAK,OAAO,iBAAiB,CAC/B;GACO;GACI;GACX,gBAAc,SAAS,KAAA;GACvB,GAAI;EACL,CAAA,GACA,aAAa,CAAC,cACb,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IAAoC;IACxB;IAAU;GAChB;EACJ,CAAA,IAAA,IACD;;AAET,CACF"}

package/dist/components/textarea/textarea.scss

@@ -0,0 +1,58 @@
+.textarea__wrap {
+  position: relative;
+}
+
+.textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 160px;
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;
+  font-size: 14px;
+  line-height: 20px;
+  background-color: transparent;
+  color: var(--color-black);
+  border-radius: var(--radius-sm);
+  resize: none;
+  font-family: var(--font-sans);
+  border: 1px solid var(--color-input);
+  outline: 1px solid transparent;
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    box-shadow 0.2s;
+
+  &:focus {
+    border-color: var(--color-black);
+    outline: 1px solid var(--color-black);
+  }
+
+  &:disabled {
+    background-color: var(--color-neutral-200);
+    border-color: var(--color-neutral-200);
+    color: color-mix(in srgb, var(--color-black) 50%, transparent);
+    fill: var(--color-neutral-500);
+  }
+
+  @media (min-width: 680px) {
+    min-height: 80px;
+  }
+
+  &--recommended {
+    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
+  }
+
+  &--error {
+    border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+  }
+}
+
+.textarea__counter {
+  display: block;
+  margin-top: 5px;
+  font-size: 11px;
+  line-height: 20px;
+  color: color-mix(in srgb, var(--color-black) 50%, transparent);
+  text-align: left;
+}

package/dist/index.cjs

@@ -5,6 +5,7 @@ const require_input = require("./components/input/input.cjs");
 const require_radio = require("./components/radio/radio.cjs");
 const require_spinner = require("./components/spinner/spinner.cjs");
 const require_textarea = require("./components/textarea/textarea.cjs");
+require("./styles/vars.scss");
 exports.Button = require_button.Button;
 exports.CheckboxInput = require_checkbox.CheckboxInput;
 exports.Input = require_input.Input;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./components/button/button.cjs";
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant } from "./components/button/button.cjs";
 import "./components/button/index.cjs";
 import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.cjs";
 import "./components/checkbox/index.cjs";
@@ -10,4 +10,4 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
 import "./components/spinner/index.cjs";
 import { TextArea, TextAreaProps } from "./components/textarea/textarea.cjs";
 import "./components/textarea/index.cjs";
-export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./components/button/button.js";
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant } from "./components/button/button.js";
 import "./components/button/index.js";
 import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.js";
 import "./components/checkbox/index.js";
@@ -10,4 +10,4 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
 import "./components/spinner/index.js";
 import { TextArea, TextAreaProps } from "./components/textarea/textarea.js";
 import "./components/textarea/index.js";
-export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };
+export { Button, type ButtonComponentProps, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Input, type InputProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps };

package/dist/index.js

@@ -4,4 +4,5 @@ import { Input } from "./components/input/input.js";
 import { RadioInput } from "./components/radio/radio.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { TextArea } from "./components/textarea/textarea.js";
+import "./styles/vars.scss";
 export { Button, CheckboxInput, Input, RadioInput, Spinner, TextArea };

package/dist/lib/cn.cjs

@@ -11,13 +11,13 @@ const pushClass = (classes, value) => {
 	}
 	for (const key of Object.keys(value)) if (value[key]) classes.push(key);
 };
-/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */
+/** Склейка классов. Без tailwind-merge: одноимённые правила решает специфичность. */
 const cn = (...inputs) => {
 	const classes = [];
 	inputs.forEach((input) => pushClass(classes, input));
 	return classes.join(" ");
 };
-/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */
+/** Условный класс. Пустая строка и `undefined` в `cn` не попадают. */
 const when = (enabled, className) => Boolean(enabled) && className ? className : false;
 exports.cn = cn;
 exports.when = when;

package/dist/lib/cn.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"cn.cjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["type ClassDictionary = Record<string, boolean | null | undefined>;\ntype ClassValue =\n  | string\n  | number\n  | null\n  | undefined\n  | false\n  | ClassDictionary\n  | ClassValue[];\n\nconst pushClass = (classes: string[], value: ClassValue): void => {\n  if (!value) return;\n\n  if (typeof value === 'string' || typeof value === 'number') {\n    classes.push(String(value));\n    return;\n  }\n\n  if (Array.isArray(value)) {\n    value.forEach(item => pushClass(classes, item));\n    return;\n  }\n\n  for (const key of Object.keys(value)) {\n    if (value[key]) classes.push(key);\n  }\n};\n\n/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */\nexport const cn = (...inputs: ClassValue[]): string => {\n  const classes: string[] = [];\n  inputs.forEach(input => pushClass(classes, input));\n  return classes.join(' ');\n};\n\n/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */\nexport const when = (\n  enabled: boolean | undefined,\n  className: string | undefined,\n): string | false => (Boolean(enabled) && className ? className : false);\n"],"mappings":";AAUA,MAAM,aAAa,SAAmB,UAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,QAAQ,KAAK,OAAO,KAAK,CAAC;EAC1B;CACF;CAEA,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,SAAQ,SAAQ,UAAU,SAAS,IAAI,CAAC;EAC9C;CACF;CAEA,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GACjC,IAAI,MAAM,MAAM,QAAQ,KAAK,GAAG;AAEpC;;AAGA,MAAa,MAAM,GAAG,WAAiC;CACrD,MAAM,UAAoB,CAAC;CAC3B,OAAO,SAAQ,UAAS,UAAU,SAAS,KAAK,CAAC;CACjD,OAAO,QAAQ,KAAK,GAAG;AACzB;;AAGA,MAAa,QACX,SACA,cACoB,QAAQ,OAAO,KAAK,YAAY,YAAY"}
+{"version":3,"file":"cn.cjs","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["type ClassDictionary = Record<string, boolean | null | undefined>;\ntype ClassValue =\n  | string\n  | number\n  | null\n  | undefined\n  | false\n  | ClassDictionary\n  | ClassValue[];\n\nconst pushClass = (classes: string[], value: ClassValue): void => {\n  if (!value) return;\n\n  if (typeof value === 'string' || typeof value === 'number') {\n    classes.push(String(value));\n    return;\n  }\n\n  if (Array.isArray(value)) {\n    value.forEach(item => pushClass(classes, item));\n    return;\n  }\n\n  for (const key of Object.keys(value)) {\n    if (value[key]) classes.push(key);\n  }\n};\n\n/** Склейка классов. Без tailwind-merge: одноимённые правила решает специфичность. */\nexport const cn = (...inputs: ClassValue[]): string => {\n  const classes: string[] = [];\n  inputs.forEach(input => pushClass(classes, input));\n  return classes.join(' ');\n};\n\n/** Условный класс. Пустая строка и `undefined` в `cn` не попадают. */\nexport const when = (\n  enabled: boolean | undefined,\n  className: string | undefined,\n): string | false => (Boolean(enabled) && className ? className : false);\n"],"mappings":";AAUA,MAAM,aAAa,SAAmB,UAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,QAAQ,KAAK,OAAO,KAAK,CAAC;EAC1B;CACF;CAEA,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,SAAQ,SAAQ,UAAU,SAAS,IAAI,CAAC;EAC9C;CACF;CAEA,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GACjC,IAAI,MAAM,MAAM,QAAQ,KAAK,GAAG;AAEpC;;AAGA,MAAa,MAAM,GAAG,WAAiC;CACrD,MAAM,UAAoB,CAAC;CAC3B,OAAO,SAAQ,UAAS,UAAU,SAAS,KAAK,CAAC;CACjD,OAAO,QAAQ,KAAK,GAAG;AACzB;;AAGA,MAAa,QACX,SACA,cACoB,QAAQ,OAAO,KAAK,YAAY,YAAY"}

package/dist/lib/cn.js

@@ -11,13 +11,13 @@ const pushClass = (classes, value) => {
 	}
 	for (const key of Object.keys(value)) if (value[key]) classes.push(key);
 };
-/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */
+/** Склейка классов. Без tailwind-merge: одноимённые правила решает специфичность. */
 const cn = (...inputs) => {
 	const classes = [];
 	inputs.forEach((input) => pushClass(classes, input));
 	return classes.join(" ");
 };
-/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */
+/** Условный класс. Пустая строка и `undefined` в `cn` не попадают. */
 const when = (enabled, className) => Boolean(enabled) && className ? className : false;
 export { cn, when };
 

package/dist/lib/cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cn.js","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["type ClassDictionary = Record<string, boolean | null | undefined>;\ntype ClassValue =\n  | string\n  | number\n  | null\n  | undefined\n  | false\n  | ClassDictionary\n  | ClassValue[];\n\nconst pushClass = (classes: string[], value: ClassValue): void => {\n  if (!value) return;\n\n  if (typeof value === 'string' || typeof value === 'number') {\n    classes.push(String(value));\n    return;\n  }\n\n  if (Array.isArray(value)) {\n    value.forEach(item => pushClass(classes, item));\n    return;\n  }\n\n  for (const key of Object.keys(value)) {\n    if (value[key]) classes.push(key);\n  }\n};\n\n/** Склейка классов. Без tailwind-merge: в модулях класс один, конфликт решает последний в списке. */\nexport const cn = (...inputs: ClassValue[]): string => {\n  const classes: string[] = [];\n  inputs.forEach(input => pushClass(classes, input));\n  return classes.join(' ');\n};\n\n/** Класс из CSS-модуля. Индекс `*.scss` под `noUncheckedIndexedAccess` — `string | undefined`. */\nexport const when = (\n  enabled: boolean | undefined,\n  className: string | undefined,\n): string | false => (Boolean(enabled) && className ? className : false);\n"],"mappings":";AAUA,MAAM,aAAa,SAAmB,UAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,QAAQ,KAAK,OAAO,KAAK,CAAC;EAC1B;CACF;CAEA,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,SAAQ,SAAQ,UAAU,SAAS,IAAI,CAAC;EAC9C;CACF;CAEA,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GACjC,IAAI,MAAM,MAAM,QAAQ,KAAK,GAAG;AAEpC;;AAGA,MAAa,MAAM,GAAG,WAAiC;CACrD,MAAM,UAAoB,CAAC;CAC3B,OAAO,SAAQ,UAAS,UAAU,SAAS,KAAK,CAAC;CACjD,OAAO,QAAQ,KAAK,GAAG;AACzB;;AAGA,MAAa,QACX,SACA,cACoB,QAAQ,OAAO,KAAK,YAAY,YAAY"}
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["type ClassDictionary = Record<string, boolean | null | undefined>;\ntype ClassValue =\n  | string\n  | number\n  | null\n  | undefined\n  | false\n  | ClassDictionary\n  | ClassValue[];\n\nconst pushClass = (classes: string[], value: ClassValue): void => {\n  if (!value) return;\n\n  if (typeof value === 'string' || typeof value === 'number') {\n    classes.push(String(value));\n    return;\n  }\n\n  if (Array.isArray(value)) {\n    value.forEach(item => pushClass(classes, item));\n    return;\n  }\n\n  for (const key of Object.keys(value)) {\n    if (value[key]) classes.push(key);\n  }\n};\n\n/** Склейка классов. Без tailwind-merge: одноимённые правила решает специфичность. */\nexport const cn = (...inputs: ClassValue[]): string => {\n  const classes: string[] = [];\n  inputs.forEach(input => pushClass(classes, input));\n  return classes.join(' ');\n};\n\n/** Условный класс. Пустая строка и `undefined` в `cn` не попадают. */\nexport const when = (\n  enabled: boolean | undefined,\n  className: string | undefined,\n): string | false => (Boolean(enabled) && className ? className : false);\n"],"mappings":";AAUA,MAAM,aAAa,SAAmB,UAA4B;CAChE,IAAI,CAAC,OAAO;CAEZ,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,QAAQ,KAAK,OAAO,KAAK,CAAC;EAC1B;CACF;CAEA,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,SAAQ,SAAQ,UAAU,SAAS,IAAI,CAAC;EAC9C;CACF;CAEA,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GACjC,IAAI,MAAM,MAAM,QAAQ,KAAK,GAAG;AAEpC;;AAGA,MAAa,MAAM,GAAG,WAAiC;CACrD,MAAM,UAAoB,CAAC;CAC3B,OAAO,SAAQ,UAAS,UAAU,SAAS,KAAK,CAAC;CACjD,OAAO,QAAQ,KAAK,GAAG;AACzB;;AAGA,MAAa,QACX,SACA,cACoB,QAAQ,OAAO,KAAK,YAAY,YAAY"}

package/dist/styles/global.scss

@@ -1,5 +1,5 @@
 // База приложения. Шрифт Inter подключает хост — файлы лежат в splittest-frontend/src/app/fonts.
-@import './vars.scss';
+// Токены (`--color-*`) подключает вход пакета, этот файл их не эмитит.
 
 :root {
   --pink: #ff00ff;
@@ -7,7 +7,7 @@
   --window-max-height: 100vh;
   --wrapper-padding: 20px;
 
-  @media (min-width: $tabletWidth) {
+  @media (min-width: 680px) {
     --wrapper-padding: 30px;
   }
 }
@@ -32,19 +32,19 @@ body {
   display: flex;
   flex-direction: column;
   margin: 0;
-  font-family: $mainFontName;
+  font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: $colorBlack;
-  background-color: $mainBgColor;
-  font-size: $bodyFontSize;
+  color: var(--color-black);
+  background-color: var(--color-white);
+  font-size: var(--text-sm);
   line-height: 20px;
   font-weight: 400;
 
   &::after {
     content: '';
     display: block;
-    background-color: rgba($colorBlack, 0.3);
+    background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
     position: fixed;
     left: 0;
     top: 0;
@@ -91,11 +91,11 @@ body {
   padding-left: var(--wrapper-padding);
   padding-right: var(--wrapper-padding);
 
-  @media (min-width: $tabletWidth) {
+  @media (min-width: 680px) {
     max-width: 680px;
   }
 
-  @media (min-width: $laptopWidth) {
+  @media (min-width: 1000px) {
     max-width: 1000px;
   }
 }
@@ -115,13 +115,13 @@ body {
 a {
   text-decoration: none;
   transition: color 0.3s ease;
-  color: $colorBlack;
+  color: var(--color-black);
 }
 
 button {
-  color: $colorBlack;
-  font-size: $bodyFontSize;
-  font-family: $mainFontName;
+  color: var(--color-black);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
 
   &:not(:disabled) {
     cursor: pointer;
@@ -144,16 +144,16 @@ table {
 
   td {
     word-break: break-word;
-    border-top: 1px solid $borderColor;
+    border-top: 1px solid var(--color-border);
     padding: 15px 0;
   }
 
   tr:last-of-type td {
-    border-bottom: 1px solid $borderColor;
+    border-bottom: 1px solid var(--color-border);
   }
 
   th {
-    color: rgba($colorBlack, 0.5);
+    color: color-mix(in srgb, var(--color-black) 50%, transparent);
     font-size: 11px;
     line-height: 15px;
     text-align: left;
@@ -173,7 +173,7 @@ h1 {
   font-size: 28px;
   line-height: 30px;
 
-  @media (min-width: $tabletWidth) {
+  @media (min-width: 680px) {
     font-size: 45px;
     line-height: 50px;
   }