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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/README.md +73 -2
  2. package/dist/_virtual/_rolldown/runtime.cjs +22 -0
  3. package/dist/components/button/button.cjs +49 -0
  4. package/dist/components/button/button.cjs.map +1 -0
  5. package/dist/components/button/button.d.cts +21 -0
  6. package/dist/components/button/button.d.ts +21 -0
  7. package/dist/components/button/button.js +47 -0
  8. package/dist/components/button/button.js.map +1 -0
  9. package/dist/components/button/button.module.scss +95 -0
  10. package/dist/components/button/index.d.cts +2 -0
  11. package/dist/components/button/index.d.ts +2 -0
  12. package/dist/components/checkbox/checkbox.cjs +29 -0
  13. package/dist/components/checkbox/checkbox.cjs.map +1 -0
  14. package/dist/components/checkbox/checkbox.d.cts +8 -0
  15. package/dist/components/checkbox/checkbox.d.ts +8 -0
  16. package/dist/components/checkbox/checkbox.js +27 -0
  17. package/dist/components/checkbox/checkbox.js.map +1 -0
  18. package/dist/components/checkbox/checkbox.module.scss +110 -0
  19. package/dist/components/checkbox/index.d.cts +2 -0
  20. package/dist/components/checkbox/index.d.ts +2 -0
  21. package/dist/components/input/index.d.cts +2 -0
  22. package/dist/components/input/index.d.ts +2 -0
  23. package/dist/components/input/input.cjs +20 -0
  24. package/dist/components/input/input.cjs.map +1 -0
  25. package/dist/components/input/input.d.cts +7 -0
  26. package/dist/components/input/input.d.ts +7 -0
  27. package/dist/components/input/input.js +18 -0
  28. package/dist/components/input/input.js.map +1 -0
  29. package/dist/components/input/input.module.scss +66 -0
  30. package/dist/components/radio/index.d.cts +2 -0
  31. package/dist/components/radio/index.d.ts +2 -0
  32. package/dist/components/radio/radio.cjs +29 -0
  33. package/dist/components/radio/radio.cjs.map +1 -0
  34. package/dist/components/radio/radio.d.cts +7 -0
  35. package/dist/components/radio/radio.d.ts +7 -0
  36. package/dist/components/radio/radio.js +27 -0
  37. package/dist/components/radio/radio.js.map +1 -0
  38. package/dist/components/radio/radio.module.scss +108 -0
  39. package/dist/components/spinner/index.d.cts +2 -0
  40. package/dist/components/spinner/index.d.ts +2 -0
  41. package/dist/components/spinner/spinner.cjs +56 -0
  42. package/dist/components/spinner/spinner.cjs.map +1 -0
  43. package/dist/components/spinner/spinner.d.cts +13 -0
  44. package/dist/components/spinner/spinner.d.ts +13 -0
  45. package/dist/components/spinner/spinner.js +54 -0
  46. package/dist/components/spinner/spinner.js.map +1 -0
  47. package/dist/components/spinner/spinner.module.scss +12 -0
  48. package/dist/components/textarea/index.d.cts +2 -0
  49. package/dist/components/textarea/index.d.ts +2 -0
  50. package/dist/components/textarea/textarea.cjs +30 -0
  51. package/dist/components/textarea/textarea.cjs.map +1 -0
  52. package/dist/components/textarea/textarea.d.cts +9 -0
  53. package/dist/components/textarea/textarea.d.ts +9 -0
  54. package/dist/components/textarea/textarea.js +28 -0
  55. package/dist/components/textarea/textarea.js.map +1 -0
  56. package/dist/components/textarea/textarea.module.scss +60 -0
  57. package/dist/index.cjs +13 -0
  58. package/dist/index.d.cts +13 -0
  59. package/dist/index.d.ts +13 -0
  60. package/dist/index.js +7 -0
  61. package/dist/lib/cn.cjs +25 -0
  62. package/dist/lib/cn.cjs.map +1 -0
  63. package/dist/lib/cn.js +24 -0
  64. package/dist/lib/cn.js.map +1 -0
  65. package/dist/styles/global.scss +195 -0
  66. package/dist/styles/mixins.scss +188 -0
  67. package/dist/styles/vars.scss +39 -0
  68. package/package.json +91 -3
@@ -0,0 +1,66 @@
1
+ @import '../../styles/vars.scss';
2
+
3
+ .input {
4
+ box-sizing: border-box;
5
+ display: flex;
6
+ align-items: center;
7
+ width: 100%;
8
+ padding: 9px 14px;
9
+ font-size: 14px;
10
+ line-height: 20px;
11
+ background-color: transparent;
12
+ color: $colorBlack;
13
+ border-radius: $borderRadius;
14
+ appearance: none;
15
+ font-family: $mainFontName;
16
+ border: 1px solid $borderInputColor;
17
+ outline: none;
18
+ transition:
19
+ background 0.3s,
20
+ border-color 0.3s,
21
+ box-shadow 0.2s;
22
+
23
+ &:-webkit-autofill,
24
+ &:-webkit-autofill:hover,
25
+ &:-webkit-autofill:focus,
26
+ &:-webkit-autofill:active {
27
+ -webkit-box-shadow: 0 0 0 30px white inset;
28
+ }
29
+
30
+ &[type='number']::-webkit-outer-spin-button,
31
+ &[type='number']::-webkit-inner-spin-button {
32
+ -webkit-appearance: none;
33
+ margin: 0;
34
+ }
35
+
36
+ &[type='number'] {
37
+ -moz-appearance: textfield;
38
+ }
39
+
40
+ &[type='date'] {
41
+ height: 40px;
42
+ }
43
+
44
+ &::-webkit-date-and-time-value {
45
+ text-align: left;
46
+ }
47
+
48
+ &:focus {
49
+ border-color: $colorBlack;
50
+ box-shadow: 0 0 0 1px $colorBlack;
51
+ }
52
+
53
+ &:disabled {
54
+ background-color: $colorGray;
55
+ color: $colorGrayIcon;
56
+ fill: $colorGrayIcon;
57
+ }
58
+
59
+ &--recommended {
60
+ background-color: $inputRecomendBg;
61
+ }
62
+
63
+ &--error {
64
+ border-color: $inputErrorBorder;
65
+ }
66
+ }
@@ -0,0 +1,2 @@
1
+ import { RadioInput, RadioInputProps } from "./radio.cjs";
2
+ export { RadioInput, type RadioInputProps };
@@ -0,0 +1,2 @@
1
+ import { RadioInput, RadioInputProps } from "./radio.js";
2
+ export { RadioInput, type RadioInputProps };
@@ -0,0 +1,29 @@
1
+ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
2
+ const require_cn = require("../../lib/cn.cjs");
3
+ let react = require("react");
4
+ let react_jsx_runtime = require("react/jsx-runtime");
5
+ let src_components_radio_radio_module_scss = require("./radio.module.scss");
6
+ src_components_radio_radio_module_scss = require_runtime.__toESM(src_components_radio_radio_module_scss, 1);
7
+ // src/components/radio/radio.tsx
8
+ const RadioInput = (0, react.forwardRef)(function RadioInput({ id, className, title, error, disabled, ...props }, ref) {
9
+ const autoId = (0, react.useId)();
10
+ const inputId = id ?? autoId;
11
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
12
+ className: require_cn.cn(src_components_radio_radio_module_scss.default.radio, className),
13
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
14
+ ref,
15
+ type: "radio",
16
+ id: inputId,
17
+ disabled,
18
+ className: require_cn.cn(src_components_radio_radio_module_scss.default.input, require_cn.when(error, src_components_radio_radio_module_scss.default.error)),
19
+ ...props
20
+ }), title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
21
+ className: src_components_radio_radio_module_scss.default.label,
22
+ htmlFor: inputId,
23
+ children: title
24
+ }) : null]
25
+ });
26
+ });
27
+ exports.RadioInput = RadioInput;
28
+
29
+ //# sourceMappingURL=radio.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.cjs","names":["forwardRef","useId","cn","styles","when"],"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,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,GAAGC,uCAAAA,QAAO,OAAO,SAAS;EAA1C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACO;GACL,MAAK;GACL,IAAI;GACM;GACV,WAAWD,WAAAA,GAAGC,uCAAAA,QAAO,OAAOC,WAAAA,KAAK,OAAOD,uCAAAA,QAAO,KAAK,CAAC;GACrD,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAWA,uCAAAA,QAAO;GAAO,SAAS;GACtC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
@@ -0,0 +1,7 @@
1
+ import { InputHTMLAttributes } from "react";
2
+ export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
3
+ title?: string;
4
+ error?: boolean;
5
+ }
6
+ export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
7
+ //# sourceMappingURL=radio.d.cts.map
@@ -0,0 +1,7 @@
1
+ import { InputHTMLAttributes } from "react";
2
+ export interface RadioInputProps extends InputHTMLAttributes<HTMLInputElement> {
3
+ title?: string;
4
+ error?: boolean;
5
+ }
6
+ export declare const RadioInput: import("react").ForwardRefExoticComponent<RadioInputProps & import("react").RefAttributes<HTMLInputElement>>;
7
+ //# sourceMappingURL=radio.d.ts.map
@@ -0,0 +1,27 @@
1
+ import { cn, when } from "../../lib/cn.js";
2
+ import { forwardRef, useId } from "react";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import styles from "./radio.module.scss";
5
+ // src/components/radio/radio.tsx
6
+ const RadioInput = forwardRef(function RadioInput({ id, className, title, error, disabled, ...props }, ref) {
7
+ const autoId = useId();
8
+ const inputId = id ?? autoId;
9
+ return /* @__PURE__ */ jsxs("div", {
10
+ className: cn(styles.radio, className),
11
+ children: [/* @__PURE__ */ jsx("input", {
12
+ ref,
13
+ type: "radio",
14
+ id: inputId,
15
+ disabled,
16
+ className: cn(styles.input, when(error, styles.error)),
17
+ ...props
18
+ }), title ? /* @__PURE__ */ jsx("label", {
19
+ className: styles.label,
20
+ htmlFor: inputId,
21
+ children: title
22
+ }) : null]
23
+ });
24
+ });
25
+ export { RadioInput };
26
+
27
+ //# sourceMappingURL=radio.js.map
@@ -0,0 +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"}
@@ -0,0 +1,108 @@
1
+ @import '../../styles/vars.scss';
2
+
3
+ .radio {
4
+ display: flex;
5
+ align-items: flex-start;
6
+ }
7
+
8
+ .label {
9
+ font-size: 14px;
10
+ line-height: 20px;
11
+ display: inline-block;
12
+ vertical-align: top;
13
+ padding-left: 5px;
14
+ user-select: none;
15
+ cursor: pointer;
16
+ }
17
+
18
+ .input {
19
+ --active: #000;
20
+ --active-inner: #fff;
21
+ --border: #e5e5e5;
22
+ --border-hover: #000;
23
+ --background: #fff;
24
+ --disabled: #e5e5e5;
25
+ --disabled-inner: #e5e5e5;
26
+ --disabled-after-inner: #727272;
27
+ box-sizing: border-box;
28
+ appearance: none;
29
+ width: 19px;
30
+ height: 19px;
31
+ outline: none;
32
+ display: inline-block;
33
+ vertical-align: top;
34
+ position: relative;
35
+ margin: 0;
36
+ flex-shrink: 0;
37
+ cursor: pointer;
38
+ border: 1px solid var(--bc, var(--border));
39
+ background: var(--b, var(--background));
40
+ border-radius: 50%;
41
+ transition:
42
+ background 0.3s,
43
+ border-color 0.3s,
44
+ box-shadow 0.2s;
45
+
46
+ &::after {
47
+ content: '';
48
+ display: block;
49
+ width: 6px;
50
+ height: 6px;
51
+ left: 50%;
52
+ top: 50%;
53
+ border-radius: 50%;
54
+ background: var(--active-inner);
55
+ position: absolute;
56
+ opacity: var(--o, 0);
57
+ transform: translate(-50%, -50%);
58
+ transition:
59
+ transform var(--d-t, 0.3s) var(--d-t-e, ease),
60
+ opacity var(--d-o, 0.2s);
61
+ }
62
+
63
+ &:checked {
64
+ --b: var(--active);
65
+ --bc: var(--active);
66
+ --o: 1;
67
+ --d-o: 0.3s;
68
+ --d-t: 0.6s;
69
+ --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
70
+ }
71
+
72
+ &:hover:not(:checked):not(:disabled) {
73
+ border-width: 2px;
74
+ --bc: var(--active);
75
+ }
76
+
77
+ &:hover:not(:disabled) {
78
+ border-color: var(--border-hover);
79
+ }
80
+
81
+ &:focus {
82
+ border: 1px solid var(--border-hover);
83
+ }
84
+
85
+ &:disabled {
86
+ --b: var(--disabled);
87
+ cursor: not-allowed;
88
+ opacity: 1;
89
+
90
+ &:checked {
91
+ --b: var(--disabled-inner);
92
+ --bc: var(--border);
93
+
94
+ &::after {
95
+ background: var(--disabled-after-inner);
96
+ }
97
+ }
98
+
99
+ & + .label {
100
+ color: $colorGrayTwo;
101
+ cursor: not-allowed;
102
+ }
103
+ }
104
+
105
+ &.error {
106
+ border-color: $inputErrorBorder;
107
+ }
108
+ }
@@ -0,0 +1,2 @@
1
+ import { Spinner, SpinnerPosition, SpinnerProps } from "./spinner.cjs";
2
+ export { Spinner, type SpinnerPosition, type SpinnerProps };
@@ -0,0 +1,2 @@
1
+ import { Spinner, SpinnerPosition, SpinnerProps } from "./spinner.js";
2
+ export { Spinner, type SpinnerPosition, type SpinnerProps };
@@ -0,0 +1,56 @@
1
+ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
2
+ const require_cn = require("../../lib/cn.cjs");
3
+ let react_jsx_runtime = require("react/jsx-runtime");
4
+ let src_components_spinner_spinner_module_scss = require("./spinner.module.scss");
5
+ src_components_spinner_spinner_module_scss = require_runtime.__toESM(src_components_spinner_spinner_module_scss, 1);
6
+ // src/components/spinner/spinner.tsx
7
+ const spinnerPosition = {
8
+ top: "top",
9
+ center: "center"
10
+ };
11
+ const dotDelays = [
12
+ "0s",
13
+ "0.125s",
14
+ "0.25s",
15
+ "0.375s",
16
+ "0.5s",
17
+ "0.625s",
18
+ "0.75s",
19
+ "0.875s"
20
+ ];
21
+ const Dot = ({ begin, rotate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
22
+ transform: `rotate(${rotate} 16 16)`,
23
+ cx: "16",
24
+ cy: "3",
25
+ r: "0",
26
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("animate", {
27
+ attributeName: "r",
28
+ values: "0;3;0;0",
29
+ dur: "1s",
30
+ repeatCount: "indefinite",
31
+ begin,
32
+ 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",
33
+ calcMode: "spline"
34
+ })
35
+ });
36
+ const svgProps = {
37
+ "xmlns": "http://www.w3.org/2000/svg",
38
+ "viewBox": "0 0 32 32",
39
+ "width": 64,
40
+ "height": 64,
41
+ "fill": "#ecebeb",
42
+ "aria-hidden": true
43
+ };
44
+ const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
45
+ 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)),
46
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
47
+ ...svgProps,
48
+ children: dotDelays.map((begin, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dot, {
49
+ begin,
50
+ rotate: index * 45
51
+ }, begin))
52
+ })
53
+ });
54
+ exports.Spinner = Spinner;
55
+
56
+ //# sourceMappingURL=spinner.cjs.map
@@ -0,0 +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"}
@@ -0,0 +1,13 @@
1
+ import { FC } from "react";
2
+ declare const spinnerPosition: {
3
+ readonly top: "top";
4
+ readonly center: "center";
5
+ };
6
+ export type SpinnerPosition = (typeof spinnerPosition)[keyof typeof spinnerPosition];
7
+ export interface SpinnerProps {
8
+ className?: string;
9
+ position?: SpinnerPosition;
10
+ }
11
+ export declare const Spinner: FC<SpinnerProps>;
12
+ export {};
13
+ //# sourceMappingURL=spinner.d.cts.map
@@ -0,0 +1,13 @@
1
+ import { FC } from "react";
2
+ declare const spinnerPosition: {
3
+ readonly top: "top";
4
+ readonly center: "center";
5
+ };
6
+ export type SpinnerPosition = (typeof spinnerPosition)[keyof typeof spinnerPosition];
7
+ export interface SpinnerProps {
8
+ className?: string;
9
+ position?: SpinnerPosition;
10
+ }
11
+ export declare const Spinner: FC<SpinnerProps>;
12
+ export {};
13
+ //# sourceMappingURL=spinner.d.ts.map
@@ -0,0 +1,54 @@
1
+ import { cn, when } from "../../lib/cn.js";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import styles from "./spinner.module.scss";
4
+ // src/components/spinner/spinner.tsx
5
+ const spinnerPosition = {
6
+ top: "top",
7
+ center: "center"
8
+ };
9
+ const dotDelays = [
10
+ "0s",
11
+ "0.125s",
12
+ "0.25s",
13
+ "0.375s",
14
+ "0.5s",
15
+ "0.625s",
16
+ "0.75s",
17
+ "0.875s"
18
+ ];
19
+ const Dot = ({ begin, rotate }) => /* @__PURE__ */ jsx("circle", {
20
+ transform: `rotate(${rotate} 16 16)`,
21
+ cx: "16",
22
+ cy: "3",
23
+ r: "0",
24
+ children: /* @__PURE__ */ jsx("animate", {
25
+ attributeName: "r",
26
+ values: "0;3;0;0",
27
+ dur: "1s",
28
+ repeatCount: "indefinite",
29
+ begin,
30
+ 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",
31
+ calcMode: "spline"
32
+ })
33
+ });
34
+ const svgProps = {
35
+ "xmlns": "http://www.w3.org/2000/svg",
36
+ "viewBox": "0 0 32 32",
37
+ "width": 64,
38
+ "height": 64,
39
+ "fill": "#ecebeb",
40
+ "aria-hidden": true
41
+ };
42
+ const Spinner = ({ className, position = spinnerPosition.center }) => /* @__PURE__ */ jsx("div", {
43
+ className: cn(styles.spinner, className, when(position === spinnerPosition.top, styles.top)),
44
+ children: /* @__PURE__ */ jsx("svg", {
45
+ ...svgProps,
46
+ children: dotDelays.map((begin, index) => /* @__PURE__ */ jsx(Dot, {
47
+ begin,
48
+ rotate: index * 45
49
+ }, begin))
50
+ })
51
+ });
52
+ export { Spinner };
53
+
54
+ //# sourceMappingURL=spinner.js.map
@@ -0,0 +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"}
@@ -0,0 +1,12 @@
1
+ .spinner {
2
+ display: flex;
3
+ width: 100%;
4
+ min-height: 100%;
5
+ padding: 30px 0;
6
+ align-items: center;
7
+ justify-content: center;
8
+ }
9
+
10
+ .top {
11
+ align-items: flex-start;
12
+ }
@@ -0,0 +1,2 @@
1
+ import { TextArea, TextAreaProps } from "./textarea.cjs";
2
+ export { TextArea, type TextAreaProps };
@@ -0,0 +1,2 @@
1
+ import { TextArea, TextAreaProps } from "./textarea.js";
2
+ export { TextArea, type TextAreaProps };
@@ -0,0 +1,30 @@
1
+ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
2
+ const require_cn = require("../../lib/cn.cjs");
3
+ let react = require("react");
4
+ let react_jsx_runtime = require("react/jsx-runtime");
5
+ let src_components_textarea_textarea_module_scss = require("./textarea.module.scss");
6
+ src_components_textarea_textarea_module_scss = require_runtime.__toESM(src_components_textarea_textarea_module_scss, 1);
7
+ // src/components/textarea/textarea.tsx
8
+ const TextArea = (0, react.forwardRef)(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
9
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
10
+ className: src_components_textarea_textarea_module_scss.default.wrap,
11
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
12
+ ref,
13
+ 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"])),
14
+ value,
15
+ maxLength,
16
+ "aria-invalid": error || void 0,
17
+ ...props
18
+ }), maxLength && !hideCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
19
+ className: src_components_textarea_textarea_module_scss.default.counter,
20
+ children: [
21
+ "Максимум ",
22
+ maxLength,
23
+ " символов"
24
+ ]
25
+ }) : null]
26
+ });
27
+ });
28
+ exports.TextArea = TextArea;
29
+
30
+ //# sourceMappingURL=textarea.cjs.map
@@ -0,0 +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"}
@@ -0,0 +1,9 @@
1
+ import { TextareaHTMLAttributes } from "react";
2
+ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
3
+ recommended?: boolean;
4
+ error?: boolean;
5
+ /** В приложении проп называется `noMaxMoty`. */
6
+ hideCounter?: boolean;
7
+ }
8
+ export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
9
+ //# sourceMappingURL=textarea.d.cts.map
@@ -0,0 +1,9 @@
1
+ import { TextareaHTMLAttributes } from "react";
2
+ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
3
+ recommended?: boolean;
4
+ error?: boolean;
5
+ /** В приложении проп называется `noMaxMoty`. */
6
+ hideCounter?: boolean;
7
+ }
8
+ export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
9
+ //# sourceMappingURL=textarea.d.ts.map
@@ -0,0 +1,28 @@
1
+ import { cn, when } from "../../lib/cn.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import styles from "./textarea.module.scss";
5
+ // src/components/textarea/textarea.tsx
6
+ const TextArea = forwardRef(function TextArea({ maxLength, value = "", recommended, error, hideCounter = false, className, ...props }, ref) {
7
+ return /* @__PURE__ */ jsxs("div", {
8
+ className: styles.wrap,
9
+ children: [/* @__PURE__ */ jsx("textarea", {
10
+ ref,
11
+ className: cn(styles.textarea, className, when(recommended, styles["textarea--recommended"]), when(error, styles["textarea--error"])),
12
+ value,
13
+ maxLength,
14
+ "aria-invalid": error || void 0,
15
+ ...props
16
+ }), maxLength && !hideCounter ? /* @__PURE__ */ jsxs("span", {
17
+ className: styles.counter,
18
+ children: [
19
+ "Максимум ",
20
+ maxLength,
21
+ " символов"
22
+ ]
23
+ }) : null]
24
+ });
25
+ });
26
+ export { TextArea };
27
+
28
+ //# sourceMappingURL=textarea.js.map
@@ -0,0 +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"}
@@ -0,0 +1,60 @@
1
+ @import '../../styles/vars.scss';
2
+
3
+ .wrap {
4
+ position: relative;
5
+ }
6
+
7
+ .textarea {
8
+ box-sizing: border-box;
9
+ width: 100%;
10
+ min-height: 160px;
11
+ display: flex;
12
+ align-items: center;
13
+ padding: 10px 15px;
14
+ font-size: 14px;
15
+ line-height: 20px;
16
+ background-color: transparent;
17
+ color: $colorBlack;
18
+ border-radius: $borderRadius;
19
+ resize: none;
20
+ font-family: $mainFontName;
21
+ border: 1px solid $borderInputColor;
22
+ outline: 1px solid transparent;
23
+ transition:
24
+ background 0.3s,
25
+ border-color 0.3s,
26
+ box-shadow 0.2s;
27
+
28
+ &:focus {
29
+ border-color: $colorBlack;
30
+ outline: 1px solid $colorBlack;
31
+ }
32
+
33
+ &:disabled {
34
+ background-color: $colorGray;
35
+ border-color: $colorGray;
36
+ color: rgba($colorBlack, 0.5);
37
+ fill: $colorGrayIcon;
38
+ }
39
+
40
+ &--recommended {
41
+ background-color: $inputRecomendBg;
42
+ }
43
+
44
+ &--error {
45
+ border-color: $inputErrorBorder;
46
+ }
47
+
48
+ @media (min-width: $tabletWidth) {
49
+ min-height: 80px;
50
+ }
51
+ }
52
+
53
+ .counter {
54
+ display: block;
55
+ margin-top: 5px;
56
+ font-size: 11px;
57
+ line-height: 20px;
58
+ color: rgba($colorBlack, 0.5);
59
+ text-align: left;
60
+ }
package/dist/index.cjs ADDED
@@ -0,0 +1,13 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ const require_button = require("./components/button/button.cjs");
3
+ const require_checkbox = require("./components/checkbox/checkbox.cjs");
4
+ const require_input = require("./components/input/input.cjs");
5
+ const require_radio = require("./components/radio/radio.cjs");
6
+ const require_spinner = require("./components/spinner/spinner.cjs");
7
+ const require_textarea = require("./components/textarea/textarea.cjs");
8
+ exports.Button = require_button.Button;
9
+ exports.CheckboxInput = require_checkbox.CheckboxInput;
10
+ exports.Input = require_input.Input;
11
+ exports.RadioInput = require_radio.RadioInput;
12
+ exports.Spinner = require_spinner.Spinner;
13
+ exports.TextArea = require_textarea.TextArea;
@@ -0,0 +1,13 @@
1
+ import { Button, ButtonComponentProps, ButtonLinkProps, ButtonProps } from "./components/button/button.cjs";
2
+ import "./components/button/index.cjs";
3
+ import { CheckboxInput, CheckboxInputProps } from "./components/checkbox/checkbox.cjs";
4
+ import "./components/checkbox/index.cjs";
5
+ import { Input, InputProps } from "./components/input/input.cjs";
6
+ import "./components/input/index.cjs";
7
+ import { RadioInput, RadioInputProps } from "./components/radio/radio.cjs";
8
+ import "./components/radio/index.cjs";
9
+ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spinner.cjs";
10
+ import "./components/spinner/index.cjs";
11
+ import { TextArea, TextAreaProps } from "./components/textarea/textarea.cjs";
12
+ import "./components/textarea/index.cjs";
13
+ 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 };