@de-kit/st-ui 0.0.0-stage → 0.1.1

package/dist/components/input/input.scss

@@ -0,0 +1,64 @@
+.input {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 9px 14px;
+  font-size: 14px;
+  line-height: 20px;
+  background-color: transparent;
+  color: var(--color-black);
+  border-radius: var(--radius-sm);
+  appearance: none;
+  font-family: var(--font-sans);
+  border: 1px solid var(--color-input);
+  outline: none;
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    box-shadow 0.2s;
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px white inset;
+  }
+
+  &[type='number']::-webkit-outer-spin-button,
+  &[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  &[type='date'] {
+    height: 40px;
+  }
+
+  &::-webkit-date-and-time-value {
+    text-align: left;
+  }
+
+  &:focus {
+    border-color: var(--color-black);
+    box-shadow: 0 0 0 1px var(--color-black);
+  }
+
+  &:disabled {
+    background-color: var(--color-neutral-200);
+    color: var(--color-neutral-500);
+    fill: var(--color-neutral-500);
+  }
+
+  &--recommended {
+    background-color: color-mix(in srgb, var(--color-yellow) 10%, transparent);
+  }
+
+  &--error {
+    border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+  }
+}

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

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

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

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

package/dist/components/radio/radio.cjs

@@ -0,0 +1,27 @@
+const require_cn = require("../../lib/cn.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 autoId = (0, react.useId)();
+	const inputId = id ?? autoId;
+	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", {
+			ref,
+			type: "radio",
+			id: inputId,
+			disabled,
+			className: "radio__input",
+			...props
+		}), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: "radio__label",
+			htmlFor: inputId,
+			children: title
+		}) : null]
+	});
+});
+exports.RadioInput = RadioInput;
+
+//# sourceMappingURL=radio.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  title?: string;
+  error?: boolean;
+}
+export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=radio.d.cts.map

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

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  title?: string;
+  error?: boolean;
+}
+export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=radio.d.ts.map

package/dist/components/radio/radio.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './radio.scss';\n\nexport interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  title?: string;\n  error?: boolean;\n}\n\nexport const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(\n  function RadioInput(\n    { id, className, title, error, disabled, ...props },\n    ref,\n  ) {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n\n    return (\n      <div className={cn('radio', className, when(error, 'radio--error'))}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          disabled={disabled}\n          className=\"radio__input\"\n          {...props}\n        />\n        {title ? (\n          <label className=\"radio__label\" htmlFor={inputId}>\n            {title}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAUA,MAAa,aAAa,WACxB,SAAS,WACP,EAAE,IAAI,WAAW,OAAO,OAAO,UAAU,GAAG,SAC5C,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,MAAM;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,SAAS,WAAW,KAAK,OAAO,cAAc,CAAC;EAAlE,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAU;GACV,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAe,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/radio/radio.scss

@@ -0,0 +1,109 @@
+.radio__label {
+  font-size: 14px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: top;
+  padding-left: 5px;
+  user-select: none;
+  cursor: pointer;
+}
+
+.radio__input {
+  --active: #000;
+  --active-inner: #fff;
+  --border: #e5e5e5;
+  --border-hover: #000;
+  --background: #fff;
+  --disabled: #e5e5e5;
+  --disabled-inner: #e5e5e5;
+  --disabled-after-inner: #727272;
+  box-sizing: border-box;
+  appearance: none;
+  width: 19px;
+  height: 19px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  border-radius: 50%;
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    box-shadow 0.2s;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 6px;
+    height: 6px;
+    left: 50%;
+    top: 50%;
+    border-radius: 50%;
+    background: var(--active-inner);
+    position: absolute;
+    opacity: var(--o, 0);
+    transform: translate(-50%, -50%);
+    transition:
+      transform var(--d-t, 0.3s) var(--d-t-e, ease),
+      opacity var(--d-o, 0.2s);
+  }
+
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --o: 1;
+    --d-o: 0.3s;
+    --d-t: 0.6s;
+    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+  }
+
+  &:hover:not(:checked):not(:disabled) {
+    border-width: 2px;
+    --bc: var(--active);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--border-hover);
+  }
+
+  &:focus {
+    border: 1px solid var(--border-hover);
+  }
+
+  &:disabled {
+    --b: var(--disabled);
+    cursor: not-allowed;
+    opacity: 1;
+
+    &:checked {
+      --b: var(--disabled-inner);
+      --bc: var(--border);
+
+      &::after {
+        background: var(--disabled-after-inner);
+      }
+    }
+
+    & + .radio__label {
+      color: var(--color-gray);
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Модификатор ошибки после .radio__input: иначе shorthand border затрёт border-color.
+.radio {
+  display: flex;
+  align-items: flex-start;
+
+  &--error {
+    .radio__input {
+      border-color: color-mix(in srgb, var(--color-red) 50%, transparent);
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerPosition, SpinnerProps } from "./spinner.cjs";
+export { Spinner, type SpinnerPosition, type SpinnerProps };

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

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerPosition, SpinnerProps } from "./spinner.js";
+export { Spinner, type SpinnerPosition, type SpinnerProps };

package/dist/components/spinner/spinner.cjs

@@ -0,0 +1,54 @@
+const require_cn = require("../../lib/cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./spinner.scss");
+// src/components/spinner/spinner.tsx
+const spinnerPosition = {
+	top: "top",
+	center: "center"
+};
+const dotDelays = [
+	"0s",
+	"0.125s",
+	"0.25s",
+	"0.375s",
+	"0.5s",
+	"0.625s",
+	"0.75s",
+	"0.875s"
+];
+const Dot = ({ begin, rotate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+	transform: `rotate(${rotate} 16 16)`,
+	cx: "16",
+	cy: "3",
+	r: "0",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
+		attributeName: "r",
+		values: "0;3;0;0",
+		dur: "1s",
+		repeatCount: "indefinite",
+		begin,
+		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",
+		calcMode: "spline"
+	})
+});
+const svgProps = {
+	"xmlns": "http://www.w3.org/2000/svg",
+	"viewBox": "0 0 32 32",
+	"width": 64,
+	"height": 64,
+	"fill": "#ecebeb",
+	"aria-hidden": true
+};
+const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: require_cn.cn("spinner", className, require_cn.when(position === spinnerPosition.top, "spinner--top")),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		...svgProps,
+		children: dotDelays.map((begin, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {
+			begin,
+			rotate: index * 45
+		}, begin))
+	})
+});
+exports.Spinner = Spinner;
+
+//# sourceMappingURL=spinner.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.cjs","names":["cn","when"],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './spinner.scss';\n\nconst spinnerPosition = {\n  top: 'top',\n  center: 'center',\n} as const;\n\nexport type SpinnerPosition =\n  (typeof spinnerPosition)[keyof typeof spinnerPosition];\n\nexport interface SpinnerProps {\n  className?: string;\n  position?: SpinnerPosition;\n}\n\nconst dotDelays = [\n  '0s',\n  '0.125s',\n  '0.25s',\n  '0.375s',\n  '0.5s',\n  '0.625s',\n  '0.75s',\n  '0.875s',\n] as const;\n\nconst Dot = ({ begin, rotate }: { begin: string; rotate: number }) => (\n  <circle transform={`rotate(${rotate} 16 16)`} cx=\"16\" cy=\"3\" r=\"0\">\n    <animate\n      attributeName=\"r\"\n      values=\"0;3;0;0\"\n      dur=\"1s\"\n      repeatCount=\"indefinite\"\n      begin={begin}\n      keySplines=\"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8\"\n      calcMode=\"spline\"\n    />\n  </circle>\n);\n\nconst svgProps: SVGProps<SVGSVGElement> = {\n  'xmlns': 'http://www.w3.org/2000/svg',\n  'viewBox': '0 0 32 32',\n  'width': 64,\n  'height': 64,\n  'fill': '#ecebeb',\n  'aria-hidden': true,\n};\n\nexport const Spinner: FC<SpinnerProps> = ({\n  className,\n  position = spinnerPosition.center,\n}) => (\n  <div\n    className={cn(\n      'spinner',\n      className,\n      when(position === spinnerPosition.top, 'spinner--top'),\n    )}\n  >\n    <svg {...svgProps}>\n      {dotDelays.map((begin, index) => (\n        <Dot key={begin} begin={begin} rotate={index * 45} />\n      ))}\n    </svg>\n  </div>\n);\n"],"mappings":";;;;AAKA,MAAM,kBAAkB;CACtB,KAAK;CACL,QAAQ;AACV;AAUA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,EAAE,OAAO,aACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;CAAQ,WAAW,UAAU,OAAO;CAAU,IAAG;CAAK,IAAG;CAAI,GAAE;CAC7D,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,eAAc;EACd,QAAO;EACP,KAAI;EACJ,aAAY;EACL;EACP,YAAW;EACX,UAAS;CACV,CAAA;AACK,CAAA;AAGV,MAAM,WAAoC;CACxC,SAAS;CACT,WAAW;CACX,SAAS;CACT,UAAU;CACV,QAAQ;CACR,eAAe;AACjB;AAEA,MAAa,WAA6B,EACxC,WACA,WAAW,gBAAgB,aAE3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;CACE,WAAWA,WAAAA,GACT,WACA,WACAC,WAAAA,KAAK,aAAa,gBAAgB,KAAK,cAAc,CACvD;CAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI;EACN,UAAA,UAAU,KAAK,OAAO,UACrB,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAwB;GAAO,QAAQ,QAAQ;EAAK,GAA1C,KAA0C,CACrD;CACE,CAAA;AACF,CAAA"}

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+declare const spinnerPosition: {
+  readonly top: "top";
+  readonly center: "center";
+};
+export type SpinnerPosition = (typeof spinnerPosition)[keyof typeof spinnerPosition];
+export interface SpinnerProps {
+  className?: string;
+  position?: SpinnerPosition;
+}
+export declare const Spinner: FC<SpinnerProps>;
+export {};
+//# sourceMappingURL=spinner.d.cts.map

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+declare const spinnerPosition: {
+  readonly top: "top";
+  readonly center: "center";
+};
+export type SpinnerPosition = (typeof spinnerPosition)[keyof typeof spinnerPosition];
+export interface SpinnerProps {
+  className?: string;
+  position?: SpinnerPosition;
+}
+export declare const Spinner: FC<SpinnerProps>;
+export {};
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner/spinner.js

@@ -0,0 +1,54 @@
+import { cn, when } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import "./spinner.scss";
+// src/components/spinner/spinner.tsx
+const spinnerPosition = {
+	top: "top",
+	center: "center"
+};
+const dotDelays = [
+	"0s",
+	"0.125s",
+	"0.25s",
+	"0.375s",
+	"0.5s",
+	"0.625s",
+	"0.75s",
+	"0.875s"
+];
+const Dot = ({ begin, rotate }) => /* @__PURE__ */ jsx("circle", {
+	transform: `rotate(${rotate} 16 16)`,
+	cx: "16",
+	cy: "3",
+	r: "0",
+	children: /* @__PURE__ */ jsx("animate", {
+		attributeName: "r",
+		values: "0;3;0;0",
+		dur: "1s",
+		repeatCount: "indefinite",
+		begin,
+		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",
+		calcMode: "spline"
+	})
+});
+const svgProps = {
+	"xmlns": "http://www.w3.org/2000/svg",
+	"viewBox": "0 0 32 32",
+	"width": 64,
+	"height": 64,
+	"fill": "#ecebeb",
+	"aria-hidden": true
+};
+const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ jsx("div", {
+	className: cn("spinner", className, when(position === spinnerPosition.top, "spinner--top")),
+	children: /* @__PURE__ */ jsx("svg", {
+		...svgProps,
+		children: dotDelays.map((begin, index) => /* @__PURE__ */ jsx(Dot, {
+			begin,
+			rotate: index * 45
+		}, begin))
+	})
+});
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './spinner.scss';\n\nconst spinnerPosition = {\n  top: 'top',\n  center: 'center',\n} as const;\n\nexport type SpinnerPosition =\n  (typeof spinnerPosition)[keyof typeof spinnerPosition];\n\nexport interface SpinnerProps {\n  className?: string;\n  position?: SpinnerPosition;\n}\n\nconst dotDelays = [\n  '0s',\n  '0.125s',\n  '0.25s',\n  '0.375s',\n  '0.5s',\n  '0.625s',\n  '0.75s',\n  '0.875s',\n] as const;\n\nconst Dot = ({ begin, rotate }: { begin: string; rotate: number }) => (\n  <circle transform={`rotate(${rotate} 16 16)`} cx=\"16\" cy=\"3\" r=\"0\">\n    <animate\n      attributeName=\"r\"\n      values=\"0;3;0;0\"\n      dur=\"1s\"\n      repeatCount=\"indefinite\"\n      begin={begin}\n      keySplines=\"0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8\"\n      calcMode=\"spline\"\n    />\n  </circle>\n);\n\nconst svgProps: SVGProps<SVGSVGElement> = {\n  'xmlns': 'http://www.w3.org/2000/svg',\n  'viewBox': '0 0 32 32',\n  'width': 64,\n  'height': 64,\n  'fill': '#ecebeb',\n  'aria-hidden': true,\n};\n\nexport const Spinner: FC<SpinnerProps> = ({\n  className,\n  position = spinnerPosition.center,\n}) => (\n  <div\n    className={cn(\n      'spinner',\n      className,\n      when(position === spinnerPosition.top, 'spinner--top'),\n    )}\n  >\n    <svg {...svgProps}>\n      {dotDelays.map((begin, index) => (\n        <Dot key={begin} begin={begin} rotate={index * 45} />\n      ))}\n    </svg>\n  </div>\n);\n"],"mappings":";;;;AAKA,MAAM,kBAAkB;CACtB,KAAK;CACL,QAAQ;AACV;AAUA,MAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,OAAO,EAAE,OAAO,aACpB,oBAAC,UAAD;CAAQ,WAAW,UAAU,OAAO;CAAU,IAAG;CAAK,IAAG;CAAI,GAAE;CAC7D,UAAA,oBAAC,WAAD;EACE,eAAc;EACd,QAAO;EACP,KAAI;EACJ,aAAY;EACL;EACP,YAAW;EACX,UAAS;CACV,CAAA;AACK,CAAA;AAGV,MAAM,WAAoC;CACxC,SAAS;CACT,WAAW;CACX,SAAS;CACT,UAAU;CACV,QAAQ;CACR,eAAe;AACjB;AAEA,MAAa,WAA6B,EACxC,WACA,WAAW,gBAAgB,aAE3B,oBAAC,OAAD;CACE,WAAW,GACT,WACA,WACA,KAAK,aAAa,gBAAgB,KAAK,cAAc,CACvD;CAEA,UAAA,oBAAC,OAAD;EAAK,GAAI;EACN,UAAA,UAAU,KAAK,OAAO,UACrB,oBAAC,KAAD;GAAwB;GAAO,QAAQ,QAAQ;EAAK,GAA1C,KAA0C,CACrD;CACE,CAAA;AACF,CAAA"}

package/dist/components/spinner/spinner.scss

@@ -0,0 +1,12 @@
+.spinner {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  padding: 30px 0;
+  align-items: center;
+  justify-content: center;
+
+  &--top {
+    align-items: flex-start;
+  }
+}

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

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

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

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

package/dist/components/textarea/textarea.cjs

@@ -0,0 +1,28 @@
+const require_cn = require("../../lib/cn.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("./textarea.scss");
+// src/components/textarea/textarea.tsx
+const TextArea = (0, react.forwardRef)(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "textarea__wrap",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			ref,
+			className: require_cn.cn("textarea", className, require_cn.when(recommended, "textarea--recommended"), require_cn.when(error, "textarea--error")),
+			value,
+			maxLength,
+			"aria-invalid": error || void 0,
+			...props
+		}), maxLength && !hideCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "textarea__counter",
+			children: [
+				"Максимум ",
+				maxLength,
+				" символов"
+			]
+		}) : null]
+	});
+});
+exports.TextArea = TextArea;
+
+//# sourceMappingURL=textarea.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.cjs","names":["forwardRef","cn","when"],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef, type TextareaHTMLAttributes } from 'react';\n\nimport { cn, when } from '../../lib/cn';\nimport './textarea.scss';\n\nexport interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  recommended?: boolean;\n  error?: boolean;\n  /** В приложении проп называется `noMaxMoty`. */\n  hideCounter?: boolean;\n}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea(\n    {\n      maxLength,\n      value = '',\n      recommended,\n      error,\n      hideCounter = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div className=\"textarea__wrap\">\n        <textarea\n          ref={ref}\n          className={cn(\n            'textarea',\n            className,\n            when(recommended, 'textarea--recommended'),\n            when(error, 'textarea--error'),\n          )}\n          value={value}\n          maxLength={maxLength}\n          aria-invalid={error || undefined}\n          {...props}\n        />\n        {maxLength && !hideCounter ? (\n          <span className=\"textarea__counter\">\n            Максимум {maxLength} символов\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;AAYA,MAAa,YAAA,GAAWA,MAAAA,WAAAA,CACtB,SAAS,SACP,EACE,WACA,QAAQ,IACR,aACA,OACA,cAAc,OACd,WACA,GAAG,SAEL,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACO;GACL,WAAWC,WAAAA,GACT,YACA,WACAC,WAAAA,KAAK,aAAa,uBAAuB,GACzCA,WAAAA,KAAK,OAAO,iBAAiB,CAC/B;GACO;GACI;GACX,gBAAc,SAAS,KAAA;GACvB,GAAI;EACL,CAAA,GACA,aAAa,CAAC,cACb,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IAAoC;IACxB;IAAU;GAChB;EACJ,CAAA,IAAA,IACD;;AAET,CACF"}

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

@@ -0,0 +1,9 @@
+import { TextareaHTMLAttributes } from "react";
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  recommended?: boolean;
+  error?: boolean;
+  /** В приложении проп называется `noMaxMoty`. */
+  hideCounter?: boolean;
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=textarea.d.cts.map

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

@@ -0,0 +1,9 @@
+import { TextareaHTMLAttributes } from "react";
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  recommended?: boolean;
+  error?: boolean;
+  /** В приложении проп называется `noMaxMoty`. */
+  hideCounter?: boolean;
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea/textarea.js

@@ -0,0 +1,28 @@
+import { cn, when } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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: "textarea__wrap",
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref,
+			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: "textarea__counter",
+			children: [
+				"Максимум ",
+				maxLength,
+				" символов"
+			]
+		}) : null]
+	});
+});
+export { TextArea };
+
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +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 './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

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_button = require("./components/button/button.cjs");
+const require_checkbox = require("./components/checkbox/checkbox.cjs");
+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;
+exports.RadioInput = require_radio.RadioInput;
+exports.Spinner = require_spinner.Spinner;
+exports.TextArea = require_textarea.TextArea;

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./components/button/button.cjs";
+import "./components/button/index.cjs";
+import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.cjs";
+import "./components/checkbox/index.cjs";
+import { Input, InputProps } from "./components/input/input.cjs";
+import "./components/input/index.cjs";
+import { RadioInput, RadioInputProps } from "./components/radio/radio.cjs";
+import "./components/radio/index.cjs";
+import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spinner.cjs";
+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 };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./components/button/button.js";
+import "./components/button/index.js";
+import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.js";
+import "./components/checkbox/index.js";
+import { Input, InputProps } from "./components/input/input.js";
+import "./components/input/index.js";
+import { RadioInput, RadioInputProps } from "./components/radio/radio.js";
+import "./components/radio/index.js";
+import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spinner.js";
+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 };