@de-kit/st-ui 0.1.0 → 0.1.1

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.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;
   }

package/dist/styles/mixins.scss

@@ -1,5 +1,3 @@
-@import './vars.scss';
-
 @mixin btn-focus {
   &:focus {
     outline: initial;
@@ -10,7 +8,7 @@
   }
 
   &:focus-visible {
-    outline: 1px solid $colorBlack;
+    outline: 1px solid var(--color-black);
     background: transparent;
   }
 }
@@ -39,12 +37,12 @@
   padding: 0 9px;
   font-size: 14px;
   font-weight: 700;
-  color: $colorWhite;
-  background-color: $colorBlue;
+  color: var(--color-white);
+  background-color: var(--color-blue);
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  transition: $tr;
+  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
 
   &:disabled {
     background-color: rgba(0, 0, 0, 0.1);
@@ -54,19 +52,19 @@
 
   &:active,
   &:hover {
-    background-color: $colorBlack;
+    background-color: var(--color-black);
   }
 }
 
 @mixin input-min {
   height: 38px;
-  border-radius: $borderRadius;
-  border: 4px solid $colorWhite;
+  border-radius: var(--radius-sm);
+  border: 4px solid var(--color-white);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   padding: 0 15px;
   font-size: 14px;
-  transition: $tr;
-  background-color: $colorWhite;
+  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
+  background-color: var(--color-white);
   appearance: none;
   outline: none;
 
@@ -76,10 +74,10 @@
   }
 
   &--recommend {
-    background-color: rgba(#ffbf00, 0.1);
+    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
 
     &:not([value='']) {
-      background-color: $colorWhite;
+      background-color: var(--color-white);
     }
   }
 
@@ -87,14 +85,14 @@
     background-color: rgba(#ff002a, 0.1);
 
     &:valid {
-      background-color: $colorWhite;
+      background-color: var(--color-white);
     }
   }
 
   &:disabled {
     background-color: rgba(0, 0, 0, 0.1);
-    border-color: $borderColor;
-    color: rgba($colorBlack, 0.5);
+    border-color: var(--color-border);
+    color: color-mix(in srgb, var(--color-black) 50%, transparent);
     outline-offset: 0;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 
@@ -105,10 +103,10 @@
   }
 
   &::-webkit-input-placeholder {
-    color: rgba($colorBlack, 0.5);
+    color: color-mix(in srgb, var(--color-black) 50%, transparent);
   }
 
-  @media (max-width: $tabletWidth) {
+  @media (max-width: 680px) {
     font-size: 16px;
   }
 }
@@ -122,7 +120,7 @@
   display: block;
   width: calc(100% - 1px);
   height: 2px;
-  background-color: $colorBlack;
+  background-color: var(--color-black);
 }
 
 @mixin popupShow {
@@ -141,11 +139,11 @@
   z-index: 0;
   max-width: $maxWidth;
   padding: $padding;
-  box-shadow: $popupBoxShadow;
-  background: $colorWhite;
+  box-shadow: var(--shadow-xl);
+  background: var(--color-white);
   border-radius: 5px;
   text-align: left;
-  color: $colorBlack;
+  color: var(--color-black);
 }
 
 @mixin buttonArea($width: 20px) {
@@ -168,7 +166,7 @@
   line-height: 20px;
   font-weight: 900;
 
-  @media (min-width: $tabletWidth) {
+  @media (min-width: 680px) {
     margin-bottom: 15px;
   }
 }
@@ -177,7 +175,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--color-border);
   overflow: hidden;
 
   img {

package/dist/styles/vars.scss

@@ -1,39 +1,36 @@
-// Токены splittest. Источник: splittest-frontend/src/app/styles/vars.scss
-$colorBlack: #000;
-$colorWhite: #fff;
+// Токены splittest. Имена как у Tailwind, значения свои — не дефолтная шкала.
+// В @media custom properties нельзя: там те же px, что у --breakpoint-*.
+:root {
+  --color-black: #000;
+  --color-white: #fff;
+  --color-blue: #002bff;
+  --color-red: #ff0000;
+  --color-green: #00a66f;
+  --color-yellow: #ffbf00;
+  --color-orange: #ff7f00;
+  --color-gray: #808080;
+  --color-neutral-100: #f7f7f7;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-500: #727272;
+  --color-input: #d9d9d9;
+  --color-border: color-mix(in srgb, var(--color-black) 10%, transparent);
+  --color-sidebar: color-mix(in srgb, var(--color-black) 3%, transparent);
 
-$colorBlue: #002bff;
-$colorRed: #ff0000;
-$colorGreen: #00a66f;
-$colorYellow: #ffbf00;
-$colorGray: #e5e5e5;
-$colorGrayIcon: #727272;
-$colorGrayTwo: #808080;
-$colorOrange: #ff7f00;
-$colorBackground: #f7f7f7;
+  --radius-sm: 5px;
+  --radius-lg: 10px;
 
-$borderRadius: 5px;
-$borderRadiusBig: 10px;
-$borderColor: rgba($colorBlack, 0.1);
-$borderShadowTop: 0 -1px 0 0 $borderColor;
-$borderShadowBottom: 0 1px 0 0 $borderColor;
-$borderInputColor: #d9d9d9;
-$tr: all 0.3s ease;
-$trParam: 0.3s ease;
-$trBg: background-color 0.3s ease;
-$popupBoxShadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
-$bgColorSidebarBlock: rgba(0, 0, 0, 0.03);
+  --font-sans: 'Inter', sans-serif;
+  --text-sm: 14px;
 
-$inputRecomendBg: rgba(#ffbf00, 0.1);
-$inputRequiredBg: rgba(#ff0000, 0.1);
-$inputErrorBorder: rgba(#ff0000, 0.5);
+  --shadow-xl: 0 10px 40px 0 rgb(0 0 0 / 0.15);
+  --shadow-t: 0 -1px 0 0 var(--color-border);
+  --shadow-b: 0 1px 0 0 var(--color-border);
 
-$desktopWidth: 1200px;
-$laptopWidth: 1000px;
-$tabletWidth: 680px;
-$mobileWidth: 576px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 680px;
+  --breakpoint-lg: 1000px;
+  --breakpoint-xl: 1200px;
 
-$mainFontName: 'Inter', sans-serif;
-$bodyFontSize: 14px;
-$mainBgColor: #fff;
-$mainIndexBgColor: #f0f1f5;
+  --default-transition-duration: 0.3s;
+  --default-transition-timing-function: ease;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@de-kit/st-ui",
-  "version": "0.1.0",
-  "description": "React-компоненты splittest: SCSS-модули и токены из основного фронтенда",
+  "version": "0.1.1",
+  "description": "React-компоненты splittest: глобальный SCSS и токены из основного фронтенда",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",

package/dist/_virtual/_rolldown/runtime.cjs

@@ -1,22 +0,0 @@
-// \0rolldown/runtime.js
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-exports.__toESM = __toESM;