@transparentcage/ui 0.0.1 → 0.0.2
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.
- package/dist/index.cjs +10 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +56 -56
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +5 -5
- package/dist/index.d.ts +5 -5
- package/dist/index.js +10 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -43,7 +43,7 @@ function Button({
|
|
|
43
43
|
"button",
|
|
44
44
|
{
|
|
45
45
|
type: "button",
|
|
46
|
-
className: `
|
|
46
|
+
className: `tc-btn tc-btn--${variant} tc-btn--${size} ${className}`.trim(),
|
|
47
47
|
disabled,
|
|
48
48
|
"data-variant": variant,
|
|
49
49
|
"data-size": size,
|
|
@@ -67,7 +67,7 @@ function Text({
|
|
|
67
67
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
68
68
|
Component,
|
|
69
69
|
{
|
|
70
|
-
className: `
|
|
70
|
+
className: `tc-text tc-text--${size} tc-text--${weight} tc-text--${tone} ${className}`.trim(),
|
|
71
71
|
"data-size": size,
|
|
72
72
|
"data-weight": weight,
|
|
73
73
|
"data-tone": tone,
|
|
@@ -84,14 +84,16 @@ function Stack({
|
|
|
84
84
|
direction = "column",
|
|
85
85
|
gap = "4",
|
|
86
86
|
className = "",
|
|
87
|
+
style,
|
|
87
88
|
children
|
|
88
89
|
}) {
|
|
89
90
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
90
91
|
Component,
|
|
91
92
|
{
|
|
92
|
-
className: `
|
|
93
|
+
className: `tc-stack tc-stack--${direction} tc-stack--gap-${gap} ${className}`.trim(),
|
|
93
94
|
"data-direction": direction,
|
|
94
95
|
"data-gap": gap,
|
|
96
|
+
style,
|
|
95
97
|
children
|
|
96
98
|
}
|
|
97
99
|
);
|
|
@@ -103,13 +105,15 @@ function Card({
|
|
|
103
105
|
as: Component = "div",
|
|
104
106
|
elevation = "md",
|
|
105
107
|
className = "",
|
|
106
|
-
children
|
|
108
|
+
children,
|
|
109
|
+
...props
|
|
107
110
|
}) {
|
|
108
111
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
109
112
|
Component,
|
|
110
113
|
{
|
|
111
|
-
className: `
|
|
114
|
+
className: `tc-card tc-card--${elevation} ${className}`.trim(),
|
|
112
115
|
"data-elevation": elevation,
|
|
116
|
+
...props,
|
|
113
117
|
children
|
|
114
118
|
}
|
|
115
119
|
);
|
|
@@ -127,7 +131,7 @@ function Input({
|
|
|
127
131
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
128
132
|
"input",
|
|
129
133
|
{
|
|
130
|
-
className: `
|
|
134
|
+
className: `tc-input tc-input--${size} ${error ? "tc-input--error" : ""} ${disabled ? "tc-input--disabled" : ""} ${className}`.trim(),
|
|
131
135
|
disabled,
|
|
132
136
|
"data-error": error,
|
|
133
137
|
"data-size": size,
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/components/Text/Text.tsx","../src/components/Stack/Stack.tsx","../src/components/Card/Card.tsx","../src/components/Input/Input.tsx"],"sourcesContent":["import \"./components/Button/Button.css\";\nimport \"./components/Text/Text.css\";\nimport \"./components/Stack/Stack.css\";\nimport \"./components/Card/Card.css\";\nimport \"./components/Input/Input.css\";\n\nexport { Button } from \"./components/Button/Button\";\nexport type { ButtonProps, ButtonVariant, ButtonSize } from \"./components/Button/Button\";\n\nexport { Text } from \"./components/Text/Text\";\nexport type { TextProps, TextSize, TextWeight, TextTone } from \"./components/Text/Text\";\n\nexport { Stack } from \"./components/Stack/Stack\";\nexport type { StackProps, StackDirection, StackGap } from \"./components/Stack/Stack\";\n\nexport { Card } from \"./components/Card/Card\";\nexport type { CardProps, CardElevation } from \"./components/Card/Card\";\n\nexport { Input } from \"./components/Input/Input\";\nexport type { InputProps } from \"./components/Input/Input\";\n","import type { ButtonHTMLAttributes } from \"react\";\nimport \"./Button.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n children: React.ReactNode;\n}\n\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n className = \"\",\n disabled,\n children,\n ...props\n}: ButtonProps) {\n return (\n <button\n type=\"button\"\n className={`
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/components/Text/Text.tsx","../src/components/Stack/Stack.tsx","../src/components/Card/Card.tsx","../src/components/Input/Input.tsx"],"sourcesContent":["import \"./components/Button/Button.css\";\nimport \"./components/Text/Text.css\";\nimport \"./components/Stack/Stack.css\";\nimport \"./components/Card/Card.css\";\nimport \"./components/Input/Input.css\";\n\nexport { Button } from \"./components/Button/Button\";\nexport type { ButtonProps, ButtonVariant, ButtonSize } from \"./components/Button/Button\";\n\nexport { Text } from \"./components/Text/Text\";\nexport type { TextProps, TextSize, TextWeight, TextTone } from \"./components/Text/Text\";\n\nexport { Stack } from \"./components/Stack/Stack\";\nexport type { StackProps, StackDirection, StackGap } from \"./components/Stack/Stack\";\n\nexport { Card } from \"./components/Card/Card\";\nexport type { CardProps, CardElevation } from \"./components/Card/Card\";\n\nexport { Input } from \"./components/Input/Input\";\nexport type { InputProps } from \"./components/Input/Input\";\n","import type { ButtonHTMLAttributes } from \"react\";\nimport \"./Button.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n children: React.ReactNode;\n}\n\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n className = \"\",\n disabled,\n children,\n ...props\n}: ButtonProps) {\n return (\n <button\n type=\"button\"\n className={`tc-btn tc-btn--${variant} tc-btn--${size} ${className}`.trim()}\n disabled={disabled}\n data-variant={variant}\n data-size={size}\n {...props}\n >\n {children}\n </button>\n );\n}\n","import \"./Text.css\";\n\nexport type TextSize =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"2xl\";\nexport type TextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\nexport type TextTone = \"primary\" | \"secondary\" | \"muted\";\n\nexport interface TextProps {\n as?: \"span\" | \"p\" | \"div\";\n size?: TextSize;\n weight?: TextWeight;\n tone?: TextTone;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}\n\nexport function Text({\n as: Component = \"span\",\n size = \"md\",\n weight = \"normal\",\n tone = \"primary\",\n className = \"\",\n style,\n children,\n}: TextProps) {\n return (\n <Component\n className={`tc-text tc-text--${size} tc-text--${weight} tc-text--${tone} ${className}`.trim()}\n data-size={size}\n data-weight={weight}\n data-tone={tone}\n style={style}\n >\n {children}\n </Component>\n );\n}\n","import \"./Stack.css\";\n\nexport type StackDirection = \"row\" | \"column\";\nexport type StackGap = \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\" | \"10\" | \"12\";\n\nexport interface StackProps {\n as?: \"div\" | \"section\" | \"article\";\n direction?: StackDirection;\n gap?: StackGap;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}\n\nexport function Stack({\n as: Component = \"div\",\n direction = \"column\",\n gap = \"4\",\n className = \"\",\n style,\n children,\n}: StackProps) {\n return (\n <Component\n className={`tc-stack tc-stack--${direction} tc-stack--gap-${gap} ${className}`.trim()}\n data-direction={direction}\n data-gap={gap}\n style={style}\n >\n {children}\n </Component>\n );\n}\n","import \"./Card.css\";\nimport type { HTMLAttributes } from \"react\";\n\nexport type CardElevation = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n as?: \"div\" | \"article\" | \"section\";\n elevation?: CardElevation;\n children: React.ReactNode;\n}\n\nexport function Card({\n as: Component = \"div\",\n elevation = \"md\",\n className = \"\",\n children,\n ...props\n}: CardProps) {\n return (\n <Component\n className={`tc-card tc-card--${elevation} ${className}`.trim()}\n data-elevation={elevation}\n {...props}\n >\n {children}\n </Component>\n );\n}\n","import type { InputHTMLAttributes } from \"react\";\nimport \"./Input.css\";\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n error?: boolean;\n /** @deprecated Use className for sizing; kept for API compatibility */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport function Input({\n error = false,\n size = \"md\",\n disabled,\n className = \"\",\n ...props\n}: InputProps) {\n return (\n <input\n className={`tc-input tc-input--${size} ${error ? \"tc-input--error\" : \"\"} ${disabled ? \"tc-input--disabled\" : \"\"} ${className}`.trim()}\n disabled={disabled}\n data-error={error}\n data-size={size}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACqBI;AATG,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,kBAAkB,OAAO,YAAY,IAAI,IAAI,SAAS,GAAG,KAAK;AAAA,MACzE;AAAA,MACA,gBAAc;AAAA,MACd,aAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;ACAI,IAAAA,sBAAA;AAVG,SAAS,KAAK;AAAA,EACnB,IAAI,YAAY;AAAA,EAChB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAc;AACZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,IAAI,aAAa,MAAM,aAAa,IAAI,IAAI,SAAS,GAAG,KAAK;AAAA,MAC5F,aAAW;AAAA,MACX,eAAa;AAAA,MACb,aAAW;AAAA,MACX;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ACnBI,IAAAC,sBAAA;AATG,SAAS,MAAM;AAAA,EACpB,IAAI,YAAY;AAAA,EAChB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,sBAAsB,SAAS,kBAAkB,GAAG,IAAI,SAAS,GAAG,KAAK;AAAA,MACpF,kBAAgB;AAAA,MAChB,YAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ACbI,IAAAC,sBAAA;AARG,SAAS,KAAK;AAAA,EACnB,IAAI,YAAY;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAc;AACZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,SAAS,IAAI,SAAS,GAAG,KAAK;AAAA,MAC7D,kBAAgB;AAAA,MACf,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;ACVI,IAAAC,sBAAA;AARG,SAAS,MAAM;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,sBAAsB,IAAI,IAAI,QAAQ,oBAAoB,EAAE,IAAI,WAAW,uBAAuB,EAAE,IAAI,SAAS,GAAG,KAAK;AAAA,MACpI;AAAA,MACA,cAAY;AAAA,MACZ,aAAW;AAAA,MACV,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* src/components/Button/Button.css */
|
|
2
|
-
.
|
|
2
|
+
.tc-btn {
|
|
3
3
|
font-family: var(--typography-font-family-sans);
|
|
4
4
|
font-weight: var(--typography-font-weight-medium);
|
|
5
5
|
border: var(--border-width-1) solid transparent;
|
|
@@ -10,155 +10,155 @@
|
|
|
10
10
|
color var(--motion-duration-fast) var(--motion-easing-default),
|
|
11
11
|
border-color var(--motion-duration-fast) var(--motion-easing-default);
|
|
12
12
|
}
|
|
13
|
-
.
|
|
14
|
-
opacity:
|
|
13
|
+
.tc-btn:disabled {
|
|
14
|
+
opacity: var(--opacity-disabled);
|
|
15
15
|
cursor: not-allowed;
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
.tc-btn--sm {
|
|
18
18
|
padding: var(--space-1) var(--space-3);
|
|
19
19
|
font-size: var(--typography-font-size-sm);
|
|
20
20
|
}
|
|
21
|
-
.
|
|
21
|
+
.tc-btn--md {
|
|
22
22
|
padding: var(--space-2) var(--space-4);
|
|
23
23
|
font-size: var(--typography-font-size-md);
|
|
24
24
|
}
|
|
25
|
-
.
|
|
25
|
+
.tc-btn--lg {
|
|
26
26
|
padding: var(--space-3) var(--space-5);
|
|
27
27
|
font-size: var(--typography-font-size-lg);
|
|
28
28
|
}
|
|
29
|
-
.
|
|
29
|
+
.tc-btn--primary {
|
|
30
30
|
background-color: var(--color-brand-primary);
|
|
31
31
|
color: var(--color-text-inverse);
|
|
32
32
|
}
|
|
33
|
-
.
|
|
33
|
+
.tc-btn--primary:hover:not(:disabled) {
|
|
34
34
|
background-color: var(--color-brand-primary-hover);
|
|
35
35
|
}
|
|
36
|
-
.
|
|
36
|
+
.tc-btn--secondary {
|
|
37
37
|
background-color: var(--color-bg-surface-alt);
|
|
38
38
|
color: var(--color-text-primary);
|
|
39
39
|
border-color: var(--color-border-default);
|
|
40
40
|
}
|
|
41
|
-
.
|
|
41
|
+
.tc-btn--secondary:hover:not(:disabled) {
|
|
42
42
|
background-color: var(--color-border-muted);
|
|
43
43
|
border-color: var(--color-border-strong);
|
|
44
44
|
}
|
|
45
|
-
.
|
|
45
|
+
.tc-btn--ghost {
|
|
46
46
|
background-color: transparent;
|
|
47
47
|
color: var(--color-text-primary);
|
|
48
48
|
}
|
|
49
|
-
.
|
|
49
|
+
.tc-btn--ghost:hover:not(:disabled) {
|
|
50
50
|
background-color: var(--color-bg-surface-alt);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
/* src/components/Text/Text.css */
|
|
54
|
-
.
|
|
54
|
+
.tc-text {
|
|
55
55
|
font-family: var(--typography-font-family-sans);
|
|
56
56
|
line-height: var(--typography-line-height-normal);
|
|
57
57
|
margin: 0;
|
|
58
58
|
}
|
|
59
|
-
.
|
|
59
|
+
.tc-text--xs {
|
|
60
60
|
font-size: var(--typography-font-size-xs);
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
.tc-text--sm {
|
|
63
63
|
font-size: var(--typography-font-size-sm);
|
|
64
64
|
}
|
|
65
|
-
.
|
|
65
|
+
.tc-text--md {
|
|
66
66
|
font-size: var(--typography-font-size-md);
|
|
67
67
|
}
|
|
68
|
-
.
|
|
68
|
+
.tc-text--lg {
|
|
69
69
|
font-size: var(--typography-font-size-lg);
|
|
70
70
|
}
|
|
71
|
-
.
|
|
71
|
+
.tc-text--xl {
|
|
72
72
|
font-size: var(--typography-font-size-xl);
|
|
73
73
|
}
|
|
74
|
-
.
|
|
74
|
+
.tc-text--2xl {
|
|
75
75
|
font-size: var(--typography-font-size-2xl);
|
|
76
76
|
}
|
|
77
|
-
.
|
|
77
|
+
.tc-text--normal {
|
|
78
78
|
font-weight: var(--typography-font-weight-normal);
|
|
79
79
|
}
|
|
80
|
-
.
|
|
80
|
+
.tc-text--medium {
|
|
81
81
|
font-weight: var(--typography-font-weight-medium);
|
|
82
82
|
}
|
|
83
|
-
.
|
|
83
|
+
.tc-text--semibold {
|
|
84
84
|
font-weight: var(--typography-font-weight-semibold);
|
|
85
85
|
}
|
|
86
|
-
.
|
|
86
|
+
.tc-text--bold {
|
|
87
87
|
font-weight: var(--typography-font-weight-bold);
|
|
88
88
|
}
|
|
89
|
-
.
|
|
89
|
+
.tc-text--primary {
|
|
90
90
|
color: var(--color-text-primary);
|
|
91
91
|
}
|
|
92
|
-
.
|
|
92
|
+
.tc-text--secondary {
|
|
93
93
|
color: var(--color-text-secondary);
|
|
94
94
|
}
|
|
95
|
-
.
|
|
95
|
+
.tc-text--muted {
|
|
96
96
|
color: var(--color-text-muted);
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
/* src/components/Stack/Stack.css */
|
|
100
|
-
.
|
|
100
|
+
.tc-stack {
|
|
101
101
|
display: flex;
|
|
102
102
|
}
|
|
103
|
-
.
|
|
103
|
+
.tc-stack--row {
|
|
104
104
|
flex-direction: row;
|
|
105
105
|
}
|
|
106
|
-
.
|
|
106
|
+
.tc-stack--column {
|
|
107
107
|
flex-direction: column;
|
|
108
108
|
}
|
|
109
|
-
.
|
|
109
|
+
.tc-stack--gap-0 {
|
|
110
110
|
gap: var(--space-0);
|
|
111
111
|
}
|
|
112
|
-
.
|
|
112
|
+
.tc-stack--gap-1 {
|
|
113
113
|
gap: var(--space-1);
|
|
114
114
|
}
|
|
115
|
-
.
|
|
115
|
+
.tc-stack--gap-2 {
|
|
116
116
|
gap: var(--space-2);
|
|
117
117
|
}
|
|
118
|
-
.
|
|
118
|
+
.tc-stack--gap-3 {
|
|
119
119
|
gap: var(--space-3);
|
|
120
120
|
}
|
|
121
|
-
.
|
|
121
|
+
.tc-stack--gap-4 {
|
|
122
122
|
gap: var(--space-4);
|
|
123
123
|
}
|
|
124
|
-
.
|
|
124
|
+
.tc-stack--gap-5 {
|
|
125
125
|
gap: var(--space-5);
|
|
126
126
|
}
|
|
127
|
-
.
|
|
127
|
+
.tc-stack--gap-6 {
|
|
128
128
|
gap: var(--space-6);
|
|
129
129
|
}
|
|
130
|
-
.
|
|
130
|
+
.tc-stack--gap-8 {
|
|
131
131
|
gap: var(--space-8);
|
|
132
132
|
}
|
|
133
|
-
.
|
|
133
|
+
.tc-stack--gap-10 {
|
|
134
134
|
gap: var(--space-10);
|
|
135
135
|
}
|
|
136
|
-
.
|
|
136
|
+
.tc-stack--gap-12 {
|
|
137
137
|
gap: var(--space-12);
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
/* src/components/Card/Card.css */
|
|
141
|
-
.
|
|
141
|
+
.tc-card {
|
|
142
142
|
background-color: var(--color-bg-surface);
|
|
143
143
|
border: var(--border-width-1) solid var(--color-border-default);
|
|
144
144
|
border-radius: var(--radius-lg);
|
|
145
145
|
padding: var(--space-4);
|
|
146
146
|
}
|
|
147
|
-
.
|
|
147
|
+
.tc-card--none {
|
|
148
148
|
box-shadow: var(--shadow-none);
|
|
149
149
|
}
|
|
150
|
-
.
|
|
150
|
+
.tc-card--sm {
|
|
151
151
|
box-shadow: var(--shadow-sm);
|
|
152
152
|
}
|
|
153
|
-
.
|
|
153
|
+
.tc-card--md {
|
|
154
154
|
box-shadow: var(--shadow-md);
|
|
155
155
|
}
|
|
156
|
-
.
|
|
156
|
+
.tc-card--lg {
|
|
157
157
|
box-shadow: var(--shadow-lg);
|
|
158
158
|
}
|
|
159
159
|
|
|
160
160
|
/* src/components/Input/Input.css */
|
|
161
|
-
.
|
|
161
|
+
.tc-input {
|
|
162
162
|
font-family: var(--typography-font-family-sans);
|
|
163
163
|
color: var(--color-text-primary);
|
|
164
164
|
background-color: var(--color-bg-surface);
|
|
@@ -167,36 +167,36 @@
|
|
|
167
167
|
padding: var(--space-2) var(--space-3);
|
|
168
168
|
transition: border-color var(--motion-duration-fast) var(--motion-easing-default), box-shadow var(--motion-duration-fast) var(--motion-easing-default);
|
|
169
169
|
}
|
|
170
|
-
.
|
|
170
|
+
.tc-input::placeholder {
|
|
171
171
|
color: var(--color-text-muted);
|
|
172
172
|
}
|
|
173
|
-
.
|
|
173
|
+
.tc-input:hover:not(:disabled):not(.tc-input--error) {
|
|
174
174
|
border-color: var(--color-border-strong);
|
|
175
175
|
}
|
|
176
|
-
.
|
|
176
|
+
.tc-input:focus {
|
|
177
177
|
outline: none;
|
|
178
178
|
border-color: var(--color-brand-primary);
|
|
179
179
|
box-shadow: 0 0 0 2px var(--color-brand-primary-muted);
|
|
180
180
|
}
|
|
181
|
-
.
|
|
181
|
+
.tc-input--error {
|
|
182
182
|
border-color: var(--color-status-error);
|
|
183
183
|
}
|
|
184
|
-
.
|
|
185
|
-
box-shadow: 0 0 0 2px
|
|
184
|
+
.tc-input--error:focus {
|
|
185
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-status-error) 20%, transparent);
|
|
186
186
|
}
|
|
187
|
-
.
|
|
188
|
-
opacity:
|
|
187
|
+
.tc-input--disabled {
|
|
188
|
+
opacity: var(--opacity-disabled);
|
|
189
189
|
cursor: not-allowed;
|
|
190
190
|
background-color: var(--color-bg-surface-alt);
|
|
191
191
|
}
|
|
192
|
-
.
|
|
192
|
+
.tc-input--sm {
|
|
193
193
|
font-size: var(--typography-font-size-sm);
|
|
194
194
|
padding: var(--space-1) var(--space-2);
|
|
195
195
|
}
|
|
196
|
-
.
|
|
196
|
+
.tc-input--md {
|
|
197
197
|
font-size: var(--typography-font-size-md);
|
|
198
198
|
}
|
|
199
|
-
.
|
|
199
|
+
.tc-input--lg {
|
|
200
200
|
font-size: var(--typography-font-size-lg);
|
|
201
201
|
padding: var(--space-3) var(--space-4);
|
|
202
202
|
}
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.css","../src/components/Text/Text.css","../src/components/Stack/Stack.css","../src/components/Card/Card.css","../src/components/Input/Input.css"],"sourcesContent":[".
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.css","../src/components/Text/Text.css","../src/components/Stack/Stack.css","../src/components/Card/Card.css","../src/components/Input/Input.css"],"sourcesContent":[".tc-btn {\n font-family: var(--typography-font-family-sans);\n font-weight: var(--typography-font-weight-medium);\n border: var(--border-width-1) solid transparent;\n border-radius: var(--radius-md);\n cursor: pointer;\n transition:\n background-color var(--motion-duration-fast) var(--motion-easing-default),\n color var(--motion-duration-fast) var(--motion-easing-default),\n border-color var(--motion-duration-fast) var(--motion-easing-default);\n}\n\n.tc-btn:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Sizes */\n.tc-btn--sm {\n padding: var(--space-1) var(--space-3);\n font-size: var(--typography-font-size-sm);\n}\n\n.tc-btn--md {\n padding: var(--space-2) var(--space-4);\n font-size: var(--typography-font-size-md);\n}\n\n.tc-btn--lg {\n padding: var(--space-3) var(--space-5);\n font-size: var(--typography-font-size-lg);\n}\n\n/* Variants */\n.tc-btn--primary {\n background-color: var(--color-brand-primary);\n color: var(--color-text-inverse);\n}\n\n.tc-btn--primary:hover:not(:disabled) {\n background-color: var(--color-brand-primary-hover);\n}\n\n.tc-btn--secondary {\n background-color: var(--color-bg-surface-alt);\n color: var(--color-text-primary);\n border-color: var(--color-border-default);\n}\n\n.tc-btn--secondary:hover:not(:disabled) {\n background-color: var(--color-border-muted);\n border-color: var(--color-border-strong);\n}\n\n.tc-btn--ghost {\n background-color: transparent;\n color: var(--color-text-primary);\n}\n\n.tc-btn--ghost:hover:not(:disabled) {\n background-color: var(--color-bg-surface-alt);\n}\n",".tc-text {\n font-family: var(--typography-font-family-sans);\n line-height: var(--typography-line-height-normal);\n margin: 0;\n}\n\n.tc-text--xs {\n font-size: var(--typography-font-size-xs);\n}\n.tc-text--sm {\n font-size: var(--typography-font-size-sm);\n}\n.tc-text--md {\n font-size: var(--typography-font-size-md);\n}\n.tc-text--lg {\n font-size: var(--typography-font-size-lg);\n}\n.tc-text--xl {\n font-size: var(--typography-font-size-xl);\n}\n.tc-text--2xl {\n font-size: var(--typography-font-size-2xl);\n}\n\n.tc-text--normal {\n font-weight: var(--typography-font-weight-normal);\n}\n.tc-text--medium {\n font-weight: var(--typography-font-weight-medium);\n}\n.tc-text--semibold {\n font-weight: var(--typography-font-weight-semibold);\n}\n.tc-text--bold {\n font-weight: var(--typography-font-weight-bold);\n}\n\n.tc-text--primary {\n color: var(--color-text-primary);\n}\n.tc-text--secondary {\n color: var(--color-text-secondary);\n}\n.tc-text--muted {\n color: var(--color-text-muted);\n}\n",".tc-stack {\n display: flex;\n}\n\n.tc-stack--row {\n flex-direction: row;\n}\n\n.tc-stack--column {\n flex-direction: column;\n}\n\n.tc-stack--gap-0 {\n gap: var(--space-0);\n}\n.tc-stack--gap-1 {\n gap: var(--space-1);\n}\n.tc-stack--gap-2 {\n gap: var(--space-2);\n}\n.tc-stack--gap-3 {\n gap: var(--space-3);\n}\n.tc-stack--gap-4 {\n gap: var(--space-4);\n}\n.tc-stack--gap-5 {\n gap: var(--space-5);\n}\n.tc-stack--gap-6 {\n gap: var(--space-6);\n}\n.tc-stack--gap-8 {\n gap: var(--space-8);\n}\n.tc-stack--gap-10 {\n gap: var(--space-10);\n}\n.tc-stack--gap-12 {\n gap: var(--space-12);\n}\n",".tc-card {\n background-color: var(--color-bg-surface);\n border: var(--border-width-1) solid var(--color-border-default);\n border-radius: var(--radius-lg);\n padding: var(--space-4);\n}\n\n.tc-card--none {\n box-shadow: var(--shadow-none);\n}\n\n.tc-card--sm {\n box-shadow: var(--shadow-sm);\n}\n\n.tc-card--md {\n box-shadow: var(--shadow-md);\n}\n\n.tc-card--lg {\n box-shadow: var(--shadow-lg);\n}\n",".tc-input {\n font-family: var(--typography-font-family-sans);\n color: var(--color-text-primary);\n background-color: var(--color-bg-surface);\n border: var(--border-width-1) solid var(--color-border-default);\n border-radius: var(--radius-md);\n padding: var(--space-2) var(--space-3);\n transition:\n border-color var(--motion-duration-fast) var(--motion-easing-default),\n box-shadow var(--motion-duration-fast) var(--motion-easing-default);\n}\n\n.tc-input::placeholder {\n color: var(--color-text-muted);\n}\n\n.tc-input:hover:not(:disabled):not(.tc-input--error) {\n border-color: var(--color-border-strong);\n}\n\n.tc-input:focus {\n outline: none;\n border-color: var(--color-brand-primary);\n box-shadow: 0 0 0 2px var(--color-brand-primary-muted);\n}\n\n.tc-input--error {\n border-color: var(--color-status-error);\n}\n\n.tc-input--error:focus {\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-status-error) 20%, transparent);\n}\n\n.tc-input--disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n background-color: var(--color-bg-surface-alt);\n}\n\n.tc-input--sm {\n font-size: var(--typography-font-size-sm);\n padding: var(--space-1) var(--space-2);\n}\n\n.tc-input--md {\n font-size: var(--typography-font-size-md);\n}\n\n.tc-input--lg {\n font-size: var(--typography-font-size-lg);\n padding: var(--space-3) var(--space-4);\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
type ButtonVariant = "primary" | "secondary" | "ghost";
|
|
5
5
|
type ButtonSize = "sm" | "md" | "lg";
|
|
@@ -31,18 +31,18 @@ interface StackProps {
|
|
|
31
31
|
direction?: StackDirection;
|
|
32
32
|
gap?: StackGap;
|
|
33
33
|
className?: string;
|
|
34
|
+
style?: React.CSSProperties;
|
|
34
35
|
children: React.ReactNode;
|
|
35
36
|
}
|
|
36
|
-
declare function Stack({ as: Component, direction, gap, className, children, }: StackProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
declare function Stack({ as: Component, direction, gap, className, style, children, }: StackProps): react_jsx_runtime.JSX.Element;
|
|
37
38
|
|
|
38
39
|
type CardElevation = "none" | "sm" | "md" | "lg";
|
|
39
|
-
interface CardProps {
|
|
40
|
+
interface CardProps extends HTMLAttributes<HTMLElement> {
|
|
40
41
|
as?: "div" | "article" | "section";
|
|
41
42
|
elevation?: CardElevation;
|
|
42
|
-
className?: string;
|
|
43
43
|
children: React.ReactNode;
|
|
44
44
|
}
|
|
45
|
-
declare function Card({ as: Component, elevation, className, children, }: CardProps): react_jsx_runtime.JSX.Element;
|
|
45
|
+
declare function Card({ as: Component, elevation, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
46
46
|
|
|
47
47
|
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
48
48
|
error?: boolean;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
type ButtonVariant = "primary" | "secondary" | "ghost";
|
|
5
5
|
type ButtonSize = "sm" | "md" | "lg";
|
|
@@ -31,18 +31,18 @@ interface StackProps {
|
|
|
31
31
|
direction?: StackDirection;
|
|
32
32
|
gap?: StackGap;
|
|
33
33
|
className?: string;
|
|
34
|
+
style?: React.CSSProperties;
|
|
34
35
|
children: React.ReactNode;
|
|
35
36
|
}
|
|
36
|
-
declare function Stack({ as: Component, direction, gap, className, children, }: StackProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
declare function Stack({ as: Component, direction, gap, className, style, children, }: StackProps): react_jsx_runtime.JSX.Element;
|
|
37
38
|
|
|
38
39
|
type CardElevation = "none" | "sm" | "md" | "lg";
|
|
39
|
-
interface CardProps {
|
|
40
|
+
interface CardProps extends HTMLAttributes<HTMLElement> {
|
|
40
41
|
as?: "div" | "article" | "section";
|
|
41
42
|
elevation?: CardElevation;
|
|
42
|
-
className?: string;
|
|
43
43
|
children: React.ReactNode;
|
|
44
44
|
}
|
|
45
|
-
declare function Card({ as: Component, elevation, className, children, }: CardProps): react_jsx_runtime.JSX.Element;
|
|
45
|
+
declare function Card({ as: Component, elevation, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
46
46
|
|
|
47
47
|
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
48
48
|
error?: boolean;
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ function Button({
|
|
|
14
14
|
"button",
|
|
15
15
|
{
|
|
16
16
|
type: "button",
|
|
17
|
-
className: `
|
|
17
|
+
className: `tc-btn tc-btn--${variant} tc-btn--${size} ${className}`.trim(),
|
|
18
18
|
disabled,
|
|
19
19
|
"data-variant": variant,
|
|
20
20
|
"data-size": size,
|
|
@@ -38,7 +38,7 @@ function Text({
|
|
|
38
38
|
return /* @__PURE__ */ jsx2(
|
|
39
39
|
Component,
|
|
40
40
|
{
|
|
41
|
-
className: `
|
|
41
|
+
className: `tc-text tc-text--${size} tc-text--${weight} tc-text--${tone} ${className}`.trim(),
|
|
42
42
|
"data-size": size,
|
|
43
43
|
"data-weight": weight,
|
|
44
44
|
"data-tone": tone,
|
|
@@ -55,14 +55,16 @@ function Stack({
|
|
|
55
55
|
direction = "column",
|
|
56
56
|
gap = "4",
|
|
57
57
|
className = "",
|
|
58
|
+
style,
|
|
58
59
|
children
|
|
59
60
|
}) {
|
|
60
61
|
return /* @__PURE__ */ jsx3(
|
|
61
62
|
Component,
|
|
62
63
|
{
|
|
63
|
-
className: `
|
|
64
|
+
className: `tc-stack tc-stack--${direction} tc-stack--gap-${gap} ${className}`.trim(),
|
|
64
65
|
"data-direction": direction,
|
|
65
66
|
"data-gap": gap,
|
|
67
|
+
style,
|
|
66
68
|
children
|
|
67
69
|
}
|
|
68
70
|
);
|
|
@@ -74,13 +76,15 @@ function Card({
|
|
|
74
76
|
as: Component = "div",
|
|
75
77
|
elevation = "md",
|
|
76
78
|
className = "",
|
|
77
|
-
children
|
|
79
|
+
children,
|
|
80
|
+
...props
|
|
78
81
|
}) {
|
|
79
82
|
return /* @__PURE__ */ jsx4(
|
|
80
83
|
Component,
|
|
81
84
|
{
|
|
82
|
-
className: `
|
|
85
|
+
className: `tc-card tc-card--${elevation} ${className}`.trim(),
|
|
83
86
|
"data-elevation": elevation,
|
|
87
|
+
...props,
|
|
84
88
|
children
|
|
85
89
|
}
|
|
86
90
|
);
|
|
@@ -98,7 +102,7 @@ function Input({
|
|
|
98
102
|
return /* @__PURE__ */ jsx5(
|
|
99
103
|
"input",
|
|
100
104
|
{
|
|
101
|
-
className: `
|
|
105
|
+
className: `tc-input tc-input--${size} ${error ? "tc-input--error" : ""} ${disabled ? "tc-input--disabled" : ""} ${className}`.trim(),
|
|
102
106
|
disabled,
|
|
103
107
|
"data-error": error,
|
|
104
108
|
"data-size": size,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Text/Text.tsx","../src/components/Stack/Stack.tsx","../src/components/Card/Card.tsx","../src/components/Input/Input.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport \"./Button.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n children: React.ReactNode;\n}\n\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n className = \"\",\n disabled,\n children,\n ...props\n}: ButtonProps) {\n return (\n <button\n type=\"button\"\n className={`
|
|
1
|
+
{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Text/Text.tsx","../src/components/Stack/Stack.tsx","../src/components/Card/Card.tsx","../src/components/Input/Input.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport \"./Button.css\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n children: React.ReactNode;\n}\n\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n className = \"\",\n disabled,\n children,\n ...props\n}: ButtonProps) {\n return (\n <button\n type=\"button\"\n className={`tc-btn tc-btn--${variant} tc-btn--${size} ${className}`.trim()}\n disabled={disabled}\n data-variant={variant}\n data-size={size}\n {...props}\n >\n {children}\n </button>\n );\n}\n","import \"./Text.css\";\n\nexport type TextSize =\n | \"xs\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"2xl\";\nexport type TextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\nexport type TextTone = \"primary\" | \"secondary\" | \"muted\";\n\nexport interface TextProps {\n as?: \"span\" | \"p\" | \"div\";\n size?: TextSize;\n weight?: TextWeight;\n tone?: TextTone;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}\n\nexport function Text({\n as: Component = \"span\",\n size = \"md\",\n weight = \"normal\",\n tone = \"primary\",\n className = \"\",\n style,\n children,\n}: TextProps) {\n return (\n <Component\n className={`tc-text tc-text--${size} tc-text--${weight} tc-text--${tone} ${className}`.trim()}\n data-size={size}\n data-weight={weight}\n data-tone={tone}\n style={style}\n >\n {children}\n </Component>\n );\n}\n","import \"./Stack.css\";\n\nexport type StackDirection = \"row\" | \"column\";\nexport type StackGap = \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\" | \"10\" | \"12\";\n\nexport interface StackProps {\n as?: \"div\" | \"section\" | \"article\";\n direction?: StackDirection;\n gap?: StackGap;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}\n\nexport function Stack({\n as: Component = \"div\",\n direction = \"column\",\n gap = \"4\",\n className = \"\",\n style,\n children,\n}: StackProps) {\n return (\n <Component\n className={`tc-stack tc-stack--${direction} tc-stack--gap-${gap} ${className}`.trim()}\n data-direction={direction}\n data-gap={gap}\n style={style}\n >\n {children}\n </Component>\n );\n}\n","import \"./Card.css\";\nimport type { HTMLAttributes } from \"react\";\n\nexport type CardElevation = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport interface CardProps extends HTMLAttributes<HTMLElement> {\n as?: \"div\" | \"article\" | \"section\";\n elevation?: CardElevation;\n children: React.ReactNode;\n}\n\nexport function Card({\n as: Component = \"div\",\n elevation = \"md\",\n className = \"\",\n children,\n ...props\n}: CardProps) {\n return (\n <Component\n className={`tc-card tc-card--${elevation} ${className}`.trim()}\n data-elevation={elevation}\n {...props}\n >\n {children}\n </Component>\n );\n}\n","import type { InputHTMLAttributes } from \"react\";\nimport \"./Input.css\";\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n error?: boolean;\n /** @deprecated Use className for sizing; kept for API compatibility */\n size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport function Input({\n error = false,\n size = \"md\",\n disabled,\n className = \"\",\n ...props\n}: InputProps) {\n return (\n <input\n className={`tc-input tc-input--${size} ${error ? \"tc-input--error\" : \"\"} ${disabled ? \"tc-input--disabled\" : \"\"} ${className}`.trim()}\n disabled={disabled}\n data-error={error}\n data-size={size}\n {...props}\n />\n );\n}\n"],"mappings":";;;AAqBI;AATG,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,kBAAkB,OAAO,YAAY,IAAI,IAAI,SAAS,GAAG,KAAK;AAAA,MACzE;AAAA,MACA,gBAAc;AAAA,MACd,aAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;ACAI,gBAAAA,YAAA;AAVG,SAAS,KAAK;AAAA,EACnB,IAAI,YAAY;AAAA,EAChB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAc;AACZ,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,IAAI,aAAa,MAAM,aAAa,IAAI,IAAI,SAAS,GAAG,KAAK;AAAA,MAC5F,aAAW;AAAA,MACX,eAAa;AAAA,MACb,aAAW;AAAA,MACX;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ACnBI,gBAAAC,YAAA;AATG,SAAS,MAAM;AAAA,EACpB,IAAI,YAAY;AAAA,EAChB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAe;AACb,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,sBAAsB,SAAS,kBAAkB,GAAG,IAAI,SAAS,GAAG,KAAK;AAAA,MACpF,kBAAgB;AAAA,MAChB,YAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ACbI,gBAAAC,YAAA;AARG,SAAS,KAAK;AAAA,EACnB,IAAI,YAAY;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAc;AACZ,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,SAAS,IAAI,SAAS,GAAG,KAAK;AAAA,MAC7D,kBAAgB;AAAA,MACf,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;ACVI,gBAAAC,YAAA;AARG,SAAS,MAAM;AAAA,EACpB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAe;AACb,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,sBAAsB,IAAI,IAAI,QAAQ,oBAAoB,EAAE,IAAI,WAAW,uBAAuB,EAAE,IAAI,SAAS,GAAG,KAAK;AAAA,MACpI;AAAA,MACA,cAAY;AAAA,MACZ,aAAW;AAAA,MACV,GAAG;AAAA;AAAA,EACN;AAEJ;","names":["jsx","jsx","jsx","jsx"]}
|