@silknet-ds/react 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.
- package/README.md +89 -0
- package/dist/index.css +439 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +71 -0
- package/dist/index.js +249 -0
- package/dist/index.js.map +1 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# @silknet-ds/react
|
|
2
|
+
|
|
3
|
+
React component library for the Silknet design system. Built on top of [`@silknet-ds/tokens`](../tokens) — all colors, sizes, fonts come from the same Figma source.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @silknet-ds/react @silknet-ds/tokens
|
|
9
|
+
# react & react-dom (>= 18) must already be in your project
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Use
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
// Once at app entry — load CSS variables + component styles.
|
|
16
|
+
import '@silknet-ds/tokens/tokens.css';
|
|
17
|
+
import '@silknet-ds/react/styles.css';
|
|
18
|
+
|
|
19
|
+
import { Button, Input } from '@silknet-ds/react';
|
|
20
|
+
|
|
21
|
+
export function Demo() {
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
<Button variant="primary">Save</Button>
|
|
25
|
+
<Input label="სახელი" helperText="დამხმარე ტექსტი" />
|
|
26
|
+
</>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Dark theme
|
|
32
|
+
|
|
33
|
+
Set `<html data-theme="dark">` to switch. Components use CSS variables that automatically follow.
|
|
34
|
+
|
|
35
|
+
## Components
|
|
36
|
+
|
|
37
|
+
| Component | Variants | Sizes | States |
|
|
38
|
+
|---|---|---|---|
|
|
39
|
+
| `Button` | primary, primary-soft, secondary, ghost, success, warning, error, info, silkfest, link | xs, sm, md, lg | default, hover, pressed, disabled |
|
|
40
|
+
| `IconButton` | primary, primary-soft, secondary, ghost | xs, sm, md, lg | default, hover, pressed, disabled |
|
|
41
|
+
| `Input` | — | — | default, hover, focused, filled, error, active-error, disabled |
|
|
42
|
+
| `TextArea` | — | — | same as Input |
|
|
43
|
+
| `HelperText` | — | — | default, success, info, warning, error |
|
|
44
|
+
|
|
45
|
+
### Examples
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { Button, IconButton, Input, TextArea, HelperText, PlusIcon, UserIcon } from '@silknet-ds/react';
|
|
49
|
+
|
|
50
|
+
// Button
|
|
51
|
+
<Button variant="primary">Save</Button>
|
|
52
|
+
<Button variant="secondary" size="lg" leftIcon={<PlusIcon />}>Add item</Button>
|
|
53
|
+
<Button variant="ghost" disabled>Cancel</Button>
|
|
54
|
+
<Button variant="link" size="xs">Read more</Button>
|
|
55
|
+
|
|
56
|
+
// IconButton (aria-label is required)
|
|
57
|
+
<IconButton aria-label="Add"><PlusIcon /></IconButton>
|
|
58
|
+
<IconButton variant="ghost" size="sm" aria-label="Settings"><PlusIcon /></IconButton>
|
|
59
|
+
|
|
60
|
+
// Input — floating label, optional icons, error state
|
|
61
|
+
<Input label="სახელი" helperText="დამხმარე ტექსტი" />
|
|
62
|
+
<Input label="Email" leftIcon={<UserIcon />} type="email" />
|
|
63
|
+
<Input label="სახელი" error="აუცილებელი ველი" />
|
|
64
|
+
<Input label="სახელი" disabled defaultValue="readonly" />
|
|
65
|
+
|
|
66
|
+
// TextArea — same API, multi-line
|
|
67
|
+
<TextArea label="ტექსტ არეა" rows={4} />
|
|
68
|
+
|
|
69
|
+
// HelperText — semantic states with auto-rendered icons
|
|
70
|
+
<HelperText state="success">წარმატებულია</HelperText>
|
|
71
|
+
<HelperText state="error">შეცდომა</HelperText>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Browse
|
|
75
|
+
|
|
76
|
+
Run the playground locally:
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
git clone https://github.com/tamashebistvis333-lgtm/silknet-ds.git
|
|
80
|
+
cd silknet-ds
|
|
81
|
+
npm install
|
|
82
|
+
npm run dev
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
…or if a hosted playground is published, link will appear in the repo README.
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
MIT
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,439 @@
|
|
|
1
|
+
/* src/Button/Button.css */
|
|
2
|
+
.silk-button {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
border: 0;
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
user-select: none;
|
|
9
|
+
white-space: nowrap;
|
|
10
|
+
font-family:
|
|
11
|
+
"Noto Sans Georgian",
|
|
12
|
+
system-ui,
|
|
13
|
+
sans-serif;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
letter-spacing: 0.2px;
|
|
16
|
+
padding: var(--digits-spacing-3) var(--digits-spacing-4);
|
|
17
|
+
gap: var(--digits-spacing-3);
|
|
18
|
+
font-size: var(--font-size-button-button-default);
|
|
19
|
+
line-height: var(--font-height-button-button-default);
|
|
20
|
+
border-radius: var(--digits-radius-s);
|
|
21
|
+
transition:
|
|
22
|
+
filter 0.12s ease,
|
|
23
|
+
background-color 0.12s ease,
|
|
24
|
+
color 0.12s ease;
|
|
25
|
+
background-clip: padding-box;
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
}
|
|
28
|
+
.silk-button:focus-visible {
|
|
29
|
+
outline: 2px solid var(--background-primary-accent);
|
|
30
|
+
outline-offset: 2px;
|
|
31
|
+
}
|
|
32
|
+
.silk-button--xs {
|
|
33
|
+
padding: var(--digits-spacing-1) var(--digits-spacing-2);
|
|
34
|
+
gap: var(--digits-spacing-2);
|
|
35
|
+
font-size: var(--font-size-button-button-additional);
|
|
36
|
+
line-height: var(--font-height-button-button-additional);
|
|
37
|
+
border-radius: var(--digits-radius-xs);
|
|
38
|
+
}
|
|
39
|
+
.silk-button--sm {
|
|
40
|
+
padding: var(--digits-spacing-2) var(--digits-spacing-3);
|
|
41
|
+
gap: var(--digits-spacing-2);
|
|
42
|
+
font-size: var(--font-size-button-button-additional);
|
|
43
|
+
line-height: var(--font-height-button-button-additional);
|
|
44
|
+
border-radius: var(--digits-radius-xs);
|
|
45
|
+
}
|
|
46
|
+
.silk-button--md {
|
|
47
|
+
}
|
|
48
|
+
.silk-button--lg {
|
|
49
|
+
padding: var(--digits-spacing-4) var(--digits-spacing-5);
|
|
50
|
+
}
|
|
51
|
+
.silk-button--primary {
|
|
52
|
+
background: var(--background-primary-accent);
|
|
53
|
+
color: var(--text-contrast);
|
|
54
|
+
}
|
|
55
|
+
.silk-button--primary-soft {
|
|
56
|
+
background: var(--background-primary-soft);
|
|
57
|
+
color: var(--text-primary);
|
|
58
|
+
}
|
|
59
|
+
.silk-button--secondary {
|
|
60
|
+
background: var(--background-layer);
|
|
61
|
+
color: var(--text-secondary);
|
|
62
|
+
border: 1px solid var(--border-default);
|
|
63
|
+
}
|
|
64
|
+
.silk-button--ghost {
|
|
65
|
+
background: transparent;
|
|
66
|
+
color: var(--text-secondary);
|
|
67
|
+
}
|
|
68
|
+
.silk-button--success {
|
|
69
|
+
background: var(--background-success-accent);
|
|
70
|
+
color: var(--text-contrast);
|
|
71
|
+
}
|
|
72
|
+
.silk-button--warning {
|
|
73
|
+
background: var(--background-warning-accent);
|
|
74
|
+
color: var(--text-contrast);
|
|
75
|
+
}
|
|
76
|
+
.silk-button--error {
|
|
77
|
+
background: var(--background-error-accent);
|
|
78
|
+
color: var(--text-contrast);
|
|
79
|
+
}
|
|
80
|
+
.silk-button--info {
|
|
81
|
+
background: var(--background-info-accent);
|
|
82
|
+
color: var(--text-contrast);
|
|
83
|
+
}
|
|
84
|
+
.silk-button--silkfest {
|
|
85
|
+
background: var(--background-silkfest-accent);
|
|
86
|
+
color: var(--text-contrast);
|
|
87
|
+
}
|
|
88
|
+
.silk-button--link {
|
|
89
|
+
background: transparent;
|
|
90
|
+
color: var(--background-primary-accent);
|
|
91
|
+
padding: 0;
|
|
92
|
+
gap: var(--digits-spacing-1);
|
|
93
|
+
border-radius: var(--digits-radius-xs);
|
|
94
|
+
}
|
|
95
|
+
.silk-button:hover:not(:disabled):not(.silk-button--link):not(.silk-button--ghost):not(.silk-button--secondary) {
|
|
96
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
|
|
97
|
+
}
|
|
98
|
+
.silk-button:active:not(:disabled):not(.silk-button--link):not(.silk-button--ghost):not(.silk-button--secondary) {
|
|
99
|
+
background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
|
|
100
|
+
}
|
|
101
|
+
.silk-button--ghost:hover:not(:disabled) {
|
|
102
|
+
background: var(--background-layer-hover);
|
|
103
|
+
}
|
|
104
|
+
.silk-button--ghost:active:not(:disabled) {
|
|
105
|
+
background: var(--background-layer-pressed);
|
|
106
|
+
}
|
|
107
|
+
.silk-button--secondary:hover:not(:disabled) {
|
|
108
|
+
background: var(--background-surface-hover);
|
|
109
|
+
}
|
|
110
|
+
.silk-button--secondary:active:not(:disabled) {
|
|
111
|
+
background: var(--background-surface-pressed);
|
|
112
|
+
}
|
|
113
|
+
.silk-button--link:hover:not(:disabled) {
|
|
114
|
+
color: color-mix(in srgb, var(--background-primary-accent) 92%, black);
|
|
115
|
+
text-decoration: underline;
|
|
116
|
+
text-underline-offset: 2px;
|
|
117
|
+
}
|
|
118
|
+
.silk-button--link:active:not(:disabled) {
|
|
119
|
+
color: color-mix(in srgb, var(--background-primary-accent) 84%, black);
|
|
120
|
+
text-decoration: underline;
|
|
121
|
+
text-underline-offset: 2px;
|
|
122
|
+
}
|
|
123
|
+
.silk-button:disabled {
|
|
124
|
+
background: var(--background-disabled) !important;
|
|
125
|
+
background-image: none !important;
|
|
126
|
+
color: var(--text-additional) !important;
|
|
127
|
+
border-color: transparent !important;
|
|
128
|
+
cursor: not-allowed;
|
|
129
|
+
}
|
|
130
|
+
.silk-button--link:disabled {
|
|
131
|
+
background: transparent !important;
|
|
132
|
+
color: var(--text-disabled) !important;
|
|
133
|
+
text-decoration: none !important;
|
|
134
|
+
}
|
|
135
|
+
.silk-button__icon {
|
|
136
|
+
display: inline-flex;
|
|
137
|
+
flex: none;
|
|
138
|
+
width: 20px;
|
|
139
|
+
height: 20px;
|
|
140
|
+
}
|
|
141
|
+
.silk-button__icon > svg {
|
|
142
|
+
width: 100%;
|
|
143
|
+
height: 100%;
|
|
144
|
+
display: block;
|
|
145
|
+
}
|
|
146
|
+
.silk-button--xs .silk-button__icon,
|
|
147
|
+
.silk-button--sm .silk-button__icon {
|
|
148
|
+
width: 16px;
|
|
149
|
+
height: 16px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* src/IconButton/IconButton.css */
|
|
153
|
+
.silk-icon-button {
|
|
154
|
+
gap: 0;
|
|
155
|
+
aspect-ratio: 1;
|
|
156
|
+
padding: var(--digits-spacing-3);
|
|
157
|
+
}
|
|
158
|
+
.silk-icon-button.silk-button--xs {
|
|
159
|
+
padding: var(--digits-spacing-1);
|
|
160
|
+
}
|
|
161
|
+
.silk-icon-button.silk-button--sm {
|
|
162
|
+
padding: var(--digits-spacing-2);
|
|
163
|
+
}
|
|
164
|
+
.silk-icon-button.silk-button--md {
|
|
165
|
+
padding: var(--digits-spacing-3);
|
|
166
|
+
}
|
|
167
|
+
.silk-icon-button.silk-button--lg {
|
|
168
|
+
padding: var(--digits-spacing-4);
|
|
169
|
+
}
|
|
170
|
+
.silk-icon-button > svg,
|
|
171
|
+
.silk-icon-button > .silk-button__icon > svg {
|
|
172
|
+
width: 20px;
|
|
173
|
+
height: 20px;
|
|
174
|
+
display: block;
|
|
175
|
+
}
|
|
176
|
+
.silk-icon-button.silk-button--xs > svg,
|
|
177
|
+
.silk-icon-button.silk-button--sm > svg,
|
|
178
|
+
.silk-icon-button.silk-button--xs > .silk-button__icon > svg,
|
|
179
|
+
.silk-icon-button.silk-button--sm > .silk-button__icon > svg {
|
|
180
|
+
width: 16px;
|
|
181
|
+
height: 16px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* src/HelperText/HelperText.css */
|
|
185
|
+
.silk-helper {
|
|
186
|
+
margin: 0;
|
|
187
|
+
display: inline-flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
gap: var(--digits-spacing-2);
|
|
190
|
+
font-family:
|
|
191
|
+
"Noto Sans Georgian",
|
|
192
|
+
system-ui,
|
|
193
|
+
sans-serif;
|
|
194
|
+
font-size: var(--font-size-other-caption);
|
|
195
|
+
line-height: var(--font-height-other-caption);
|
|
196
|
+
letter-spacing: 0.25px;
|
|
197
|
+
}
|
|
198
|
+
.silk-helper__icon {
|
|
199
|
+
width: 16px;
|
|
200
|
+
height: 16px;
|
|
201
|
+
flex: none;
|
|
202
|
+
display: inline-flex;
|
|
203
|
+
}
|
|
204
|
+
.silk-helper__icon > svg {
|
|
205
|
+
width: 100%;
|
|
206
|
+
height: 100%;
|
|
207
|
+
display: block;
|
|
208
|
+
}
|
|
209
|
+
.silk-helper--default {
|
|
210
|
+
color: var(--text-additional);
|
|
211
|
+
}
|
|
212
|
+
.silk-helper--success {
|
|
213
|
+
color: var(--text-success);
|
|
214
|
+
}
|
|
215
|
+
.silk-helper--info {
|
|
216
|
+
color: var(--text-info);
|
|
217
|
+
}
|
|
218
|
+
.silk-helper--warning {
|
|
219
|
+
color: var(--text-warrning);
|
|
220
|
+
}
|
|
221
|
+
.silk-helper--error {
|
|
222
|
+
color: var(--text-error);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* src/Input/Input.css */
|
|
226
|
+
.silk-input-group {
|
|
227
|
+
display: flex;
|
|
228
|
+
flex-direction: column;
|
|
229
|
+
gap: var(--digits-spacing-2);
|
|
230
|
+
transition: opacity 0.15s ease;
|
|
231
|
+
font-family:
|
|
232
|
+
"Noto Sans Georgian",
|
|
233
|
+
system-ui,
|
|
234
|
+
sans-serif;
|
|
235
|
+
}
|
|
236
|
+
.silk-input,
|
|
237
|
+
.silk-input *,
|
|
238
|
+
.silk-input-group {
|
|
239
|
+
box-sizing: border-box;
|
|
240
|
+
}
|
|
241
|
+
.silk-input {
|
|
242
|
+
display: flex;
|
|
243
|
+
align-items: center;
|
|
244
|
+
gap: var(--digits-spacing-3);
|
|
245
|
+
padding: var(--digits-spacing-2) var(--digits-spacing-4);
|
|
246
|
+
height: 52px;
|
|
247
|
+
background: var(--background-input-default);
|
|
248
|
+
border: 1px solid var(--border-subtle);
|
|
249
|
+
border-radius: var(--digits-radius-s);
|
|
250
|
+
cursor: text;
|
|
251
|
+
transition:
|
|
252
|
+
background 0.12s,
|
|
253
|
+
border-color 0.12s,
|
|
254
|
+
box-shadow 0.15s;
|
|
255
|
+
}
|
|
256
|
+
.silk-input:hover:not(:focus-within) {
|
|
257
|
+
background: var(--background-input-hover);
|
|
258
|
+
}
|
|
259
|
+
.silk-input:active:not(:focus-within) {
|
|
260
|
+
background: var(--background-input-pressed);
|
|
261
|
+
}
|
|
262
|
+
.silk-input:focus-within {
|
|
263
|
+
background: var(--background-layer);
|
|
264
|
+
border-color: var(--background-primary-accent);
|
|
265
|
+
box-shadow: 0 0 0 4px var(--primary-16);
|
|
266
|
+
}
|
|
267
|
+
.silk-input--error {
|
|
268
|
+
background: var(--background-error);
|
|
269
|
+
border-color: var(--border-error);
|
|
270
|
+
}
|
|
271
|
+
.silk-input--error:focus-within {
|
|
272
|
+
background: var(--background-layer);
|
|
273
|
+
border-color: var(--background-error-accent);
|
|
274
|
+
box-shadow: 0 0 0 4px var(--red-16);
|
|
275
|
+
}
|
|
276
|
+
.silk-input-group:has(.silk-input__field:disabled) {
|
|
277
|
+
opacity: 0.5;
|
|
278
|
+
pointer-events: none;
|
|
279
|
+
}
|
|
280
|
+
.silk-input__icon {
|
|
281
|
+
width: 20px;
|
|
282
|
+
height: 20px;
|
|
283
|
+
flex: none;
|
|
284
|
+
align-self: center;
|
|
285
|
+
color: var(--text-additional);
|
|
286
|
+
display: inline-flex;
|
|
287
|
+
}
|
|
288
|
+
.silk-input__icon > svg {
|
|
289
|
+
width: 100%;
|
|
290
|
+
height: 100%;
|
|
291
|
+
display: block;
|
|
292
|
+
}
|
|
293
|
+
.silk-input__inner {
|
|
294
|
+
flex: 1;
|
|
295
|
+
min-width: 0;
|
|
296
|
+
display: grid;
|
|
297
|
+
gap: var(--digits-spacing-1);
|
|
298
|
+
align-content: center;
|
|
299
|
+
height: 100%;
|
|
300
|
+
}
|
|
301
|
+
.silk-input__label {
|
|
302
|
+
font-family: inherit;
|
|
303
|
+
font-weight: 400;
|
|
304
|
+
font-size: var(--font-size-body-body-accent);
|
|
305
|
+
line-height: var(--font-height-body-body-accent);
|
|
306
|
+
color: var(--text-additional);
|
|
307
|
+
pointer-events: none;
|
|
308
|
+
transition:
|
|
309
|
+
font-size 0.15s ease,
|
|
310
|
+
line-height 0.15s ease,
|
|
311
|
+
font-weight 0.15s ease;
|
|
312
|
+
}
|
|
313
|
+
.silk-input__field {
|
|
314
|
+
border: 0;
|
|
315
|
+
background: transparent;
|
|
316
|
+
outline: 0;
|
|
317
|
+
padding: 0;
|
|
318
|
+
margin: 0;
|
|
319
|
+
font-family: inherit;
|
|
320
|
+
font-weight: 400;
|
|
321
|
+
font-size: var(--font-size-body-body-default);
|
|
322
|
+
line-height: var(--font-height-body-body-default);
|
|
323
|
+
color: var(--text-default);
|
|
324
|
+
width: 100%;
|
|
325
|
+
caret-color: var(--background-primary-accent);
|
|
326
|
+
height: 0;
|
|
327
|
+
overflow: hidden;
|
|
328
|
+
transition: height 0.15s ease;
|
|
329
|
+
}
|
|
330
|
+
.silk-input__field::placeholder {
|
|
331
|
+
color: transparent;
|
|
332
|
+
}
|
|
333
|
+
.silk-input:focus-within .silk-input__label,
|
|
334
|
+
.silk-input:has(.silk-input__field:not(:placeholder-shown)) .silk-input__label {
|
|
335
|
+
font-size: var(--font-size-subtitle-subtitle-3);
|
|
336
|
+
line-height: var(--font-height-subtitle-subtitle-3);
|
|
337
|
+
font-weight: 500;
|
|
338
|
+
}
|
|
339
|
+
.silk-input:focus-within .silk-input__field,
|
|
340
|
+
.silk-input:has(.silk-input__field:not(:placeholder-shown)) .silk-input__field {
|
|
341
|
+
height: 20px;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/* src/TextArea/TextArea.css */
|
|
345
|
+
.silk-textarea,
|
|
346
|
+
.silk-textarea * {
|
|
347
|
+
box-sizing: border-box;
|
|
348
|
+
}
|
|
349
|
+
.silk-textarea {
|
|
350
|
+
display: flex;
|
|
351
|
+
align-items: stretch;
|
|
352
|
+
gap: var(--digits-spacing-3);
|
|
353
|
+
padding: 14px var(--digits-spacing-4);
|
|
354
|
+
min-height: 104px;
|
|
355
|
+
background: var(--background-input-default);
|
|
356
|
+
border: 1px solid var(--border-subtle);
|
|
357
|
+
border-radius: var(--digits-radius-s);
|
|
358
|
+
cursor: text;
|
|
359
|
+
transition:
|
|
360
|
+
background 0.12s,
|
|
361
|
+
border-color 0.12s,
|
|
362
|
+
box-shadow 0.15s;
|
|
363
|
+
}
|
|
364
|
+
.silk-textarea:hover:not(:focus-within) {
|
|
365
|
+
background: var(--background-input-hover);
|
|
366
|
+
}
|
|
367
|
+
.silk-textarea:active:not(:focus-within) {
|
|
368
|
+
background: var(--background-input-pressed);
|
|
369
|
+
}
|
|
370
|
+
.silk-textarea:focus-within {
|
|
371
|
+
background: var(--background-layer);
|
|
372
|
+
border-color: var(--background-primary-accent);
|
|
373
|
+
box-shadow: 0 0 0 4px var(--primary-16);
|
|
374
|
+
}
|
|
375
|
+
.silk-textarea--error {
|
|
376
|
+
background: var(--background-error);
|
|
377
|
+
border-color: var(--border-error);
|
|
378
|
+
}
|
|
379
|
+
.silk-textarea--error:focus-within {
|
|
380
|
+
background: var(--background-layer);
|
|
381
|
+
border-color: var(--background-error-accent);
|
|
382
|
+
box-shadow: 0 0 0 4px var(--red-16);
|
|
383
|
+
}
|
|
384
|
+
.silk-input-group:has(.silk-textarea__field:disabled) {
|
|
385
|
+
opacity: 0.5;
|
|
386
|
+
pointer-events: none;
|
|
387
|
+
}
|
|
388
|
+
.silk-textarea__inner {
|
|
389
|
+
flex: 1;
|
|
390
|
+
min-width: 0;
|
|
391
|
+
display: flex;
|
|
392
|
+
flex-direction: column;
|
|
393
|
+
gap: var(--digits-spacing-1);
|
|
394
|
+
}
|
|
395
|
+
.silk-textarea__label {
|
|
396
|
+
font-family:
|
|
397
|
+
"Noto Sans Georgian",
|
|
398
|
+
system-ui,
|
|
399
|
+
sans-serif;
|
|
400
|
+
font-weight: 400;
|
|
401
|
+
font-size: var(--font-size-body-body-accent);
|
|
402
|
+
line-height: var(--font-height-body-body-accent);
|
|
403
|
+
color: var(--text-additional);
|
|
404
|
+
pointer-events: none;
|
|
405
|
+
transition:
|
|
406
|
+
font-size 0.15s ease,
|
|
407
|
+
line-height 0.15s ease,
|
|
408
|
+
font-weight 0.15s ease;
|
|
409
|
+
}
|
|
410
|
+
.silk-textarea__field {
|
|
411
|
+
flex: 1;
|
|
412
|
+
min-width: 0;
|
|
413
|
+
min-height: 60px;
|
|
414
|
+
resize: vertical;
|
|
415
|
+
border: 0;
|
|
416
|
+
background: transparent;
|
|
417
|
+
outline: 0;
|
|
418
|
+
padding: 0;
|
|
419
|
+
margin: 0;
|
|
420
|
+
font-family:
|
|
421
|
+
"Noto Sans Georgian",
|
|
422
|
+
system-ui,
|
|
423
|
+
sans-serif;
|
|
424
|
+
font-weight: 400;
|
|
425
|
+
font-size: var(--font-size-body-body-default);
|
|
426
|
+
line-height: var(--font-height-body-body-default);
|
|
427
|
+
color: var(--text-default);
|
|
428
|
+
caret-color: var(--background-primary-accent);
|
|
429
|
+
}
|
|
430
|
+
.silk-textarea__field::placeholder {
|
|
431
|
+
color: transparent;
|
|
432
|
+
}
|
|
433
|
+
.silk-textarea:focus-within .silk-textarea__label,
|
|
434
|
+
.silk-textarea:has(.silk-textarea__field:not(:placeholder-shown)) .silk-textarea__label {
|
|
435
|
+
font-size: var(--font-size-subtitle-subtitle-3);
|
|
436
|
+
line-height: var(--font-height-subtitle-subtitle-3);
|
|
437
|
+
font-weight: 500;
|
|
438
|
+
}
|
|
439
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Button/Button.css","../src/IconButton/IconButton.css","../src/HelperText/HelperText.css","../src/Input/Input.css","../src/TextArea/TextArea.css"],"sourcesContent":["/* Silknet Button. Porting `.btn` from showcase but with the `silk-` prefix\n to avoid collisions in consumer apps. All values come from CSS variables\n defined in @silknet-ds/tokens — never hardcode hex/px here. */\n\n.silk-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 0;\n cursor: pointer;\n user-select: none;\n white-space: nowrap;\n font-family: 'Noto Sans Georgian', system-ui, sans-serif;\n font-weight: 500;\n letter-spacing: 0.2px;\n /* Defaults = medium size */\n padding: var(--digits-spacing-3) var(--digits-spacing-4);\n gap: var(--digits-spacing-3);\n font-size: var(--font-size-button-button-default);\n line-height: var(--font-height-button-button-default);\n border-radius: var(--digits-radius-s);\n transition: filter 0.12s ease, background-color 0.12s ease, color 0.12s ease;\n background-clip: padding-box;\n text-decoration: none;\n}\n.silk-button:focus-visible {\n outline: 2px solid var(--background-primary-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.silk-button--xs {\n padding: var(--digits-spacing-1) var(--digits-spacing-2);\n gap: var(--digits-spacing-2);\n font-size: var(--font-size-button-button-additional);\n line-height: var(--font-height-button-button-additional);\n border-radius: var(--digits-radius-xs);\n}\n.silk-button--sm {\n padding: var(--digits-spacing-2) var(--digits-spacing-3);\n gap: var(--digits-spacing-2);\n font-size: var(--font-size-button-button-additional);\n line-height: var(--font-height-button-button-additional);\n border-radius: var(--digits-radius-xs);\n}\n.silk-button--md {\n /* default values from .silk-button */\n}\n.silk-button--lg {\n padding: var(--digits-spacing-4) var(--digits-spacing-5);\n}\n\n/* Variants — base */\n.silk-button--primary { background: var(--background-primary-accent); color: var(--text-contrast); }\n.silk-button--primary-soft { background: var(--background-primary-soft); color: var(--text-primary); }\n.silk-button--secondary { background: var(--background-layer); color: var(--text-secondary); border: 1px solid var(--border-default); }\n.silk-button--ghost { background: transparent; color: var(--text-secondary); }\n.silk-button--success { background: var(--background-success-accent); color: var(--text-contrast); }\n.silk-button--warning { background: var(--background-warning-accent); color: var(--text-contrast); }\n.silk-button--error { background: var(--background-error-accent); color: var(--text-contrast); }\n.silk-button--info { background: var(--background-info-accent); color: var(--text-contrast); }\n.silk-button--silkfest { background: var(--background-silkfest-accent); color: var(--text-contrast); }\n.silk-button--link {\n background: transparent;\n color: var(--background-primary-accent);\n padding: 0;\n gap: var(--digits-spacing-1);\n border-radius: var(--digits-radius-xs);\n}\n\n/* Hover/active overlay matches Figma (Background/layer-hover at 8%, layer-\n pressed at 16%). For filled variants we stack a translucent black\n linear-gradient over the variant color so the source token stays the\n driver. Ghost/secondary instead reveal a subtle background; link uses\n color-mix to darken its text color (no background to overlay). */\n\n.silk-button:hover:not(:disabled):not(.silk-button--link):not(.silk-button--ghost):not(.silk-button--secondary) {\n background-image: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));\n}\n.silk-button:active:not(:disabled):not(.silk-button--link):not(.silk-button--ghost):not(.silk-button--secondary) {\n background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));\n}\n\n.silk-button--ghost:hover:not(:disabled) { background: var(--background-layer-hover); }\n.silk-button--ghost:active:not(:disabled) { background: var(--background-layer-pressed); }\n.silk-button--secondary:hover:not(:disabled) { background: var(--background-surface-hover); }\n.silk-button--secondary:active:not(:disabled){ background: var(--background-surface-pressed); }\n\n.silk-button--link:hover:not(:disabled) {\n color: color-mix(in srgb, var(--background-primary-accent) 92%, black);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.silk-button--link:active:not(:disabled) {\n color: color-mix(in srgb, var(--background-primary-accent) 84%, black);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n/* Disabled — uniform across variants except link (no background swap). */\n.silk-button:disabled {\n background: var(--background-disabled) !important;\n background-image: none !important;\n color: var(--text-additional) !important;\n border-color: transparent !important;\n cursor: not-allowed;\n}\n.silk-button--link:disabled {\n background: transparent !important;\n color: var(--text-disabled) !important;\n text-decoration: none !important;\n}\n\n/* Icon slots — passed via leftIcon/rightIcon props. SVGs scale with button. */\n.silk-button__icon {\n display: inline-flex;\n flex: none;\n width: 20px;\n height: 20px;\n}\n.silk-button__icon > svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n.silk-button--xs .silk-button__icon,\n.silk-button--sm .silk-button__icon {\n width: 16px;\n height: 16px;\n}\n","/* IconButton: square Button with uniform padding and centered icon. Reuses\n the .silk-button base classes via composition (the .tsx applies both\n .silk-button and .silk-icon-button classes). */\n\n.silk-icon-button {\n /* override gap: no spacing between content slots */\n gap: 0;\n aspect-ratio: 1;\n padding: var(--digits-spacing-3);\n}\n.silk-icon-button.silk-button--xs { padding: var(--digits-spacing-1); }\n.silk-icon-button.silk-button--sm { padding: var(--digits-spacing-2); }\n.silk-icon-button.silk-button--md { padding: var(--digits-spacing-3); }\n.silk-icon-button.silk-button--lg { padding: var(--digits-spacing-4); }\n\n.silk-icon-button > svg,\n.silk-icon-button > .silk-button__icon > svg {\n width: 20px;\n height: 20px;\n display: block;\n}\n.silk-icon-button.silk-button--xs > svg,\n.silk-icon-button.silk-button--sm > svg,\n.silk-icon-button.silk-button--xs > .silk-button__icon > svg,\n.silk-icon-button.silk-button--sm > .silk-button__icon > svg {\n width: 16px;\n height: 16px;\n}\n","/* Helper Text — used standalone or by Input/TextArea. Default state is bare\n text; semantic states (success/info/warning/error) use the matching color\n token and prepend a 16px icon.\n Note: Figma's source uses `--text-warrning` (typo, double r). Honored 1:1. */\n\n.silk-helper {\n margin: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--digits-spacing-2);\n font-family: 'Noto Sans Georgian', system-ui, sans-serif;\n font-size: var(--font-size-other-caption);\n line-height: var(--font-height-other-caption);\n letter-spacing: 0.25px;\n}\n\n.silk-helper__icon {\n width: 16px;\n height: 16px;\n flex: none;\n display: inline-flex;\n}\n.silk-helper__icon > svg { width: 100%; height: 100%; display: block; }\n\n.silk-helper--default { color: var(--text-additional); }\n.silk-helper--success { color: var(--text-success); }\n.silk-helper--info { color: var(--text-info); }\n.silk-helper--warning { color: var(--text-warrning); /* Figma source spelling */ }\n.silk-helper--error { color: var(--text-error); }\n","/* Floating-label Input. Mirrors the showcase 1:1, using :placeholder-shown\n and :has() so the floating-label behavior is purely declarative — no JS\n state management needed for the visual transition. */\n\n.silk-input-group {\n display: flex;\n flex-direction: column;\n gap: var(--digits-spacing-2);\n transition: opacity 0.15s ease;\n font-family: 'Noto Sans Georgian', system-ui, sans-serif;\n}\n\n/* box-sizing reset for the entire input subtree — Figma's 52px is the full\n visual height including padding & border (Tailwind defaults to border-box).\n Without this, content-box defaults make the input render at ~68px. */\n.silk-input,\n.silk-input *,\n.silk-input-group {\n box-sizing: border-box;\n}\n\n.silk-input {\n display: flex;\n align-items: center;\n gap: var(--digits-spacing-3);\n padding: var(--digits-spacing-2) var(--digits-spacing-4);\n height: 52px;\n background: var(--background-input-default);\n border: 1px solid var(--border-subtle);\n border-radius: var(--digits-radius-s);\n cursor: text;\n transition: background 0.12s, border-color 0.12s, box-shadow 0.15s;\n}\n\n.silk-input:hover:not(:focus-within) { background: var(--background-input-hover); }\n.silk-input:active:not(:focus-within) { background: var(--background-input-pressed); }\n\n.silk-input:focus-within {\n background: var(--background-layer);\n border-color: var(--background-primary-accent);\n box-shadow: 0 0 0 4px var(--primary-16);\n}\n\n/* Error: pink bg + pink border. */\n.silk-input--error {\n background: var(--background-error);\n border-color: var(--border-error);\n}\n/* Active-Error: focused while errored — red border + red glow. */\n.silk-input--error:focus-within {\n background: var(--background-layer);\n border-color: var(--background-error-accent);\n box-shadow: 0 0 0 4px var(--red-16);\n}\n\n.silk-input-group:has(.silk-input__field:disabled) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* Side icons */\n.silk-input__icon {\n width: 20px;\n height: 20px;\n flex: none;\n align-self: center;\n color: var(--text-additional);\n display: inline-flex;\n}\n.silk-input__icon > svg { width: 100%; height: 100%; display: block; }\n\n/* Floating label inner */\n.silk-input__inner {\n flex: 1;\n min-width: 0;\n display: grid;\n gap: var(--digits-spacing-1);\n align-content: center;\n height: 100%;\n}\n.silk-input__label {\n font-family: inherit;\n font-weight: 400;\n font-size: var(--font-size-body-body-accent);\n line-height: var(--font-height-body-body-accent);\n color: var(--text-additional);\n pointer-events: none;\n transition: font-size 0.15s ease, line-height 0.15s ease, font-weight 0.15s ease;\n}\n.silk-input__field {\n border: 0;\n background: transparent;\n outline: 0;\n padding: 0;\n margin: 0;\n font-family: inherit;\n font-weight: 400;\n font-size: var(--font-size-body-body-default);\n line-height: var(--font-height-body-body-default);\n color: var(--text-default);\n width: 100%;\n caret-color: var(--background-primary-accent);\n height: 0;\n overflow: hidden;\n transition: height 0.15s ease;\n}\n.silk-input__field::placeholder { color: transparent; }\n\n/* Floated state: focused or filled. */\n.silk-input:focus-within .silk-input__label,\n.silk-input:has(.silk-input__field:not(:placeholder-shown)) .silk-input__label {\n font-size: var(--font-size-subtitle-subtitle-3);\n line-height: var(--font-height-subtitle-subtitle-3);\n font-weight: 500;\n}\n.silk-input:focus-within .silk-input__field,\n.silk-input:has(.silk-input__field:not(:placeholder-shown)) .silk-input__field {\n height: 20px; /* matches body-default line-height */\n}\n","/* TextArea: multi-line variant of Input. Same floating-label pattern, taller\n container, top-aligned content. Uses the same .silk-input-group wrapper for\n layout / disabled-fade behavior. */\n\n/* box-sizing reset matching Figma's border-box convention. */\n.silk-textarea,\n.silk-textarea * {\n box-sizing: border-box;\n}\n\n.silk-textarea {\n display: flex;\n align-items: stretch;\n gap: var(--digits-spacing-3);\n padding: 14px var(--digits-spacing-4);\n min-height: 104px;\n background: var(--background-input-default);\n border: 1px solid var(--border-subtle);\n border-radius: var(--digits-radius-s);\n cursor: text;\n transition: background 0.12s, border-color 0.12s, box-shadow 0.15s;\n}\n\n.silk-textarea:hover:not(:focus-within) { background: var(--background-input-hover); }\n.silk-textarea:active:not(:focus-within) { background: var(--background-input-pressed); }\n.silk-textarea:focus-within {\n background: var(--background-layer);\n border-color: var(--background-primary-accent);\n box-shadow: 0 0 0 4px var(--primary-16);\n}\n\n.silk-textarea--error {\n background: var(--background-error);\n border-color: var(--border-error);\n}\n.silk-textarea--error:focus-within {\n background: var(--background-layer);\n border-color: var(--background-error-accent);\n box-shadow: 0 0 0 4px var(--red-16);\n}\n\n.silk-input-group:has(.silk-textarea__field:disabled) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.silk-textarea__inner {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: var(--digits-spacing-1);\n}\n.silk-textarea__label {\n font-family: 'Noto Sans Georgian', system-ui, sans-serif;\n font-weight: 400;\n font-size: var(--font-size-body-body-accent);\n line-height: var(--font-height-body-body-accent);\n color: var(--text-additional);\n pointer-events: none;\n transition: font-size 0.15s ease, line-height 0.15s ease, font-weight 0.15s ease;\n}\n.silk-textarea__field {\n flex: 1;\n min-width: 0;\n min-height: 60px;\n resize: vertical;\n border: 0;\n background: transparent;\n outline: 0;\n padding: 0;\n margin: 0;\n font-family: 'Noto Sans Georgian', system-ui, sans-serif;\n font-weight: 400;\n font-size: var(--font-size-body-body-default);\n line-height: var(--font-height-body-body-default);\n color: var(--text-default);\n caret-color: var(--background-primary-accent);\n}\n.silk-textarea__field::placeholder { color: transparent; }\n\n.silk-textarea:focus-within .silk-textarea__label,\n.silk-textarea:has(.silk-textarea__field:not(:placeholder-shown)) .silk-textarea__label {\n font-size: var(--font-size-subtitle-subtitle-3);\n line-height: var(--font-height-subtitle-subtitle-3);\n font-weight: 500;\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, SVGProps } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
type ButtonVariant = 'primary' | 'primary-soft' | 'secondary' | 'ghost' | 'success' | 'warning' | 'error' | 'info' | 'silkfest' | 'link';
|
|
6
|
+
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
7
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
8
|
+
/** Color/style variant. Defaults to `primary`. */
|
|
9
|
+
variant?: ButtonVariant;
|
|
10
|
+
/** Size. Defaults to `md`. */
|
|
11
|
+
size?: ButtonSize;
|
|
12
|
+
/** Optional icon rendered before the label. */
|
|
13
|
+
leftIcon?: ReactNode;
|
|
14
|
+
/** Optional icon rendered after the label. */
|
|
15
|
+
rightIcon?: ReactNode;
|
|
16
|
+
}
|
|
17
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
18
|
+
|
|
19
|
+
type IconButtonVariant = 'primary' | 'primary-soft' | 'secondary' | 'ghost';
|
|
20
|
+
interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {
|
|
21
|
+
/** Color/style variant. Defaults to `primary`. */
|
|
22
|
+
variant?: IconButtonVariant;
|
|
23
|
+
/** Size. Defaults to `md`. */
|
|
24
|
+
size?: ButtonSize;
|
|
25
|
+
/** Required: accessible label for the button (icon-only buttons need it). */
|
|
26
|
+
'aria-label': string;
|
|
27
|
+
/** The icon to render — typically an inline <svg>. */
|
|
28
|
+
children: ReactNode;
|
|
29
|
+
}
|
|
30
|
+
declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
31
|
+
|
|
32
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'placeholder'> {
|
|
33
|
+
/** Floating label shown inside the field. Required for accessibility. */
|
|
34
|
+
label: string;
|
|
35
|
+
/** Optional helper text shown below the field. */
|
|
36
|
+
helperText?: ReactNode;
|
|
37
|
+
/** When true, applies the error style. If a string is passed it overrides helperText. */
|
|
38
|
+
error?: boolean | string;
|
|
39
|
+
/** Optional icon shown to the left of the label/value. */
|
|
40
|
+
leftIcon?: ReactNode;
|
|
41
|
+
/** Optional icon shown to the right of the label/value. */
|
|
42
|
+
rightIcon?: ReactNode;
|
|
43
|
+
}
|
|
44
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
45
|
+
|
|
46
|
+
interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'> {
|
|
47
|
+
label: string;
|
|
48
|
+
helperText?: ReactNode;
|
|
49
|
+
/** When true, applies the error style. If a string is passed it overrides helperText. */
|
|
50
|
+
error?: boolean | string;
|
|
51
|
+
}
|
|
52
|
+
declare const TextArea: react.ForwardRefExoticComponent<TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
53
|
+
|
|
54
|
+
type HelperTextState = 'default' | 'success' | 'info' | 'warning' | 'error';
|
|
55
|
+
interface HelperTextProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
56
|
+
/** Semantic state. Defaults to `default` (no icon). */
|
|
57
|
+
state?: HelperTextState;
|
|
58
|
+
/** Override the auto-rendered icon. Pass `null` to suppress for a non-default state. */
|
|
59
|
+
icon?: ReactNode | null;
|
|
60
|
+
}
|
|
61
|
+
declare function HelperText({ state, icon, className, children, ...rest }: HelperTextProps): react_jsx_runtime.JSX.Element;
|
|
62
|
+
|
|
63
|
+
declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
64
|
+
declare const InfoIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
65
|
+
declare const WarnIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
66
|
+
declare const ErrorIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
67
|
+
declare const PlusIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
68
|
+
declare const UserIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
69
|
+
declare const EyeIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
|
|
70
|
+
|
|
71
|
+
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ErrorIcon, EyeIcon, HelperText, type HelperTextProps, type HelperTextState, IconButton, type IconButtonProps, type IconButtonVariant, InfoIcon, Input, type InputProps, PlusIcon, TextArea, type TextAreaProps, UserIcon, WarnIcon };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
// src/Button/Button.tsx
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
|
|
4
|
+
// src/utils.ts
|
|
5
|
+
function cx(...values) {
|
|
6
|
+
const out = [];
|
|
7
|
+
for (const v of values) {
|
|
8
|
+
if (!v) continue;
|
|
9
|
+
if (typeof v === "string" || typeof v === "number") {
|
|
10
|
+
out.push(String(v));
|
|
11
|
+
} else if (Array.isArray(v)) {
|
|
12
|
+
const inner = cx(...v);
|
|
13
|
+
if (inner) out.push(inner);
|
|
14
|
+
} else if (typeof v === "object") {
|
|
15
|
+
for (const [k, on] of Object.entries(v)) if (on) out.push(k);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
return out.join(" ");
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// src/Button/Button.tsx
|
|
22
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
23
|
+
var Button = forwardRef(function Button2({
|
|
24
|
+
variant = "primary",
|
|
25
|
+
size = "md",
|
|
26
|
+
leftIcon,
|
|
27
|
+
rightIcon,
|
|
28
|
+
className,
|
|
29
|
+
children,
|
|
30
|
+
type = "button",
|
|
31
|
+
...rest
|
|
32
|
+
}, ref) {
|
|
33
|
+
return /* @__PURE__ */ jsxs(
|
|
34
|
+
"button",
|
|
35
|
+
{
|
|
36
|
+
ref,
|
|
37
|
+
type,
|
|
38
|
+
className: cx(
|
|
39
|
+
"silk-button",
|
|
40
|
+
`silk-button--${variant}`,
|
|
41
|
+
`silk-button--${size}`,
|
|
42
|
+
className
|
|
43
|
+
),
|
|
44
|
+
...rest,
|
|
45
|
+
children: [
|
|
46
|
+
leftIcon != null && /* @__PURE__ */ jsx("span", { className: "silk-button__icon", children: leftIcon }),
|
|
47
|
+
children,
|
|
48
|
+
rightIcon != null && /* @__PURE__ */ jsx("span", { className: "silk-button__icon", children: rightIcon })
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
// src/IconButton/IconButton.tsx
|
|
55
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
56
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
57
|
+
var IconButton = forwardRef2(function IconButton2({ variant = "primary", size = "md", className, children, type = "button", ...rest }, ref) {
|
|
58
|
+
return /* @__PURE__ */ jsx2(
|
|
59
|
+
"button",
|
|
60
|
+
{
|
|
61
|
+
ref,
|
|
62
|
+
type,
|
|
63
|
+
className: cx(
|
|
64
|
+
"silk-button",
|
|
65
|
+
"silk-icon-button",
|
|
66
|
+
`silk-button--${variant}`,
|
|
67
|
+
`silk-button--${size}`,
|
|
68
|
+
className
|
|
69
|
+
),
|
|
70
|
+
...rest,
|
|
71
|
+
children
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
// src/Input/Input.tsx
|
|
77
|
+
import {
|
|
78
|
+
forwardRef as forwardRef3,
|
|
79
|
+
useId
|
|
80
|
+
} from "react";
|
|
81
|
+
|
|
82
|
+
// src/HelperText/HelperText.tsx
|
|
83
|
+
import "react";
|
|
84
|
+
|
|
85
|
+
// src/icons.tsx
|
|
86
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
87
|
+
var base = (props) => ({
|
|
88
|
+
viewBox: "0 0 24 24",
|
|
89
|
+
fill: "none",
|
|
90
|
+
stroke: "currentColor",
|
|
91
|
+
strokeWidth: 2,
|
|
92
|
+
strokeLinecap: "round",
|
|
93
|
+
strokeLinejoin: "round",
|
|
94
|
+
"aria-hidden": true,
|
|
95
|
+
focusable: false,
|
|
96
|
+
...props
|
|
97
|
+
});
|
|
98
|
+
var CheckIcon = (props) => /* @__PURE__ */ jsx3("svg", { ...base({ ...props, strokeWidth: 2.5 }), children: /* @__PURE__ */ jsx3("polyline", { points: "20 6 9 17 4 12" }) });
|
|
99
|
+
var InfoIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
|
|
100
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
|
|
101
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
|
|
102
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
|
|
103
|
+
] });
|
|
104
|
+
var WarnIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
|
|
105
|
+
/* @__PURE__ */ jsx3("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
|
|
106
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
|
|
107
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
|
|
108
|
+
] });
|
|
109
|
+
var ErrorIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
|
|
110
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
|
|
111
|
+
/* @__PURE__ */ jsx3("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
|
|
112
|
+
/* @__PURE__ */ jsx3("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
|
|
113
|
+
] });
|
|
114
|
+
var PlusIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
|
|
115
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
116
|
+
/* @__PURE__ */ jsx3("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
|
|
117
|
+
] });
|
|
118
|
+
var UserIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
|
|
119
|
+
/* @__PURE__ */ jsx3("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
120
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "7", r: "4" })
|
|
121
|
+
] });
|
|
122
|
+
var EyeIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
|
|
123
|
+
/* @__PURE__ */ jsx3("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
|
|
124
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" })
|
|
125
|
+
] });
|
|
126
|
+
|
|
127
|
+
// src/HelperText/HelperText.tsx
|
|
128
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
129
|
+
var DEFAULT_ICONS = {
|
|
130
|
+
success: /* @__PURE__ */ jsx4(CheckIcon, {}),
|
|
131
|
+
info: /* @__PURE__ */ jsx4(InfoIcon, {}),
|
|
132
|
+
warning: /* @__PURE__ */ jsx4(WarnIcon, {}),
|
|
133
|
+
error: /* @__PURE__ */ jsx4(ErrorIcon, {})
|
|
134
|
+
};
|
|
135
|
+
function HelperText({
|
|
136
|
+
state = "default",
|
|
137
|
+
icon,
|
|
138
|
+
className,
|
|
139
|
+
children,
|
|
140
|
+
...rest
|
|
141
|
+
}) {
|
|
142
|
+
const resolvedIcon = state === "default" ? null : icon !== void 0 ? icon : DEFAULT_ICONS[state];
|
|
143
|
+
return /* @__PURE__ */ jsxs3("p", { className: cx("silk-helper", `silk-helper--${state}`, className), ...rest, children: [
|
|
144
|
+
resolvedIcon != null && /* @__PURE__ */ jsx4("span", { className: "silk-helper__icon", children: resolvedIcon }),
|
|
145
|
+
/* @__PURE__ */ jsx4("span", { children })
|
|
146
|
+
] });
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// src/Input/Input.tsx
|
|
150
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
151
|
+
var Input = forwardRef3(function Input2({
|
|
152
|
+
label,
|
|
153
|
+
helperText,
|
|
154
|
+
error,
|
|
155
|
+
leftIcon,
|
|
156
|
+
rightIcon,
|
|
157
|
+
className,
|
|
158
|
+
id,
|
|
159
|
+
disabled,
|
|
160
|
+
...rest
|
|
161
|
+
}, ref) {
|
|
162
|
+
const generatedId = useId();
|
|
163
|
+
const inputId = id ?? generatedId;
|
|
164
|
+
const isError = Boolean(error);
|
|
165
|
+
const helperContent = typeof error === "string" ? error : helperText;
|
|
166
|
+
return /* @__PURE__ */ jsxs4("div", { className: cx("silk-input-group", className), children: [
|
|
167
|
+
/* @__PURE__ */ jsxs4(
|
|
168
|
+
"label",
|
|
169
|
+
{
|
|
170
|
+
htmlFor: inputId,
|
|
171
|
+
className: cx("silk-input", { "silk-input--error": isError }),
|
|
172
|
+
children: [
|
|
173
|
+
leftIcon != null && /* @__PURE__ */ jsx5("span", { className: "silk-input__icon", children: leftIcon }),
|
|
174
|
+
/* @__PURE__ */ jsxs4("span", { className: "silk-input__inner", children: [
|
|
175
|
+
/* @__PURE__ */ jsx5("span", { className: "silk-input__label", children: label }),
|
|
176
|
+
/* @__PURE__ */ jsx5(
|
|
177
|
+
"input",
|
|
178
|
+
{
|
|
179
|
+
ref,
|
|
180
|
+
id: inputId,
|
|
181
|
+
type: "text",
|
|
182
|
+
className: "silk-input__field",
|
|
183
|
+
placeholder: " ",
|
|
184
|
+
disabled,
|
|
185
|
+
"aria-invalid": isError || void 0,
|
|
186
|
+
...rest
|
|
187
|
+
}
|
|
188
|
+
)
|
|
189
|
+
] }),
|
|
190
|
+
rightIcon != null && /* @__PURE__ */ jsx5("span", { className: "silk-input__icon", children: rightIcon })
|
|
191
|
+
]
|
|
192
|
+
}
|
|
193
|
+
),
|
|
194
|
+
helperContent != null && /* @__PURE__ */ jsx5(HelperText, { state: isError ? "error" : "default", children: helperContent })
|
|
195
|
+
] });
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
// src/TextArea/TextArea.tsx
|
|
199
|
+
import {
|
|
200
|
+
forwardRef as forwardRef4,
|
|
201
|
+
useId as useId2
|
|
202
|
+
} from "react";
|
|
203
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
204
|
+
var TextArea = forwardRef4(function TextArea2({ label, helperText, error, className, id, disabled, ...rest }, ref) {
|
|
205
|
+
const generatedId = useId2();
|
|
206
|
+
const textareaId = id ?? generatedId;
|
|
207
|
+
const isError = Boolean(error);
|
|
208
|
+
const helperContent = typeof error === "string" ? error : helperText;
|
|
209
|
+
return /* @__PURE__ */ jsxs5("div", { className: cx("silk-input-group", className), children: [
|
|
210
|
+
/* @__PURE__ */ jsx6(
|
|
211
|
+
"label",
|
|
212
|
+
{
|
|
213
|
+
htmlFor: textareaId,
|
|
214
|
+
className: cx("silk-textarea", { "silk-textarea--error": isError }),
|
|
215
|
+
children: /* @__PURE__ */ jsxs5("span", { className: "silk-textarea__inner", children: [
|
|
216
|
+
/* @__PURE__ */ jsx6("span", { className: "silk-textarea__label", children: label }),
|
|
217
|
+
/* @__PURE__ */ jsx6(
|
|
218
|
+
"textarea",
|
|
219
|
+
{
|
|
220
|
+
ref,
|
|
221
|
+
id: textareaId,
|
|
222
|
+
className: "silk-textarea__field",
|
|
223
|
+
placeholder: " ",
|
|
224
|
+
disabled,
|
|
225
|
+
"aria-invalid": isError || void 0,
|
|
226
|
+
...rest
|
|
227
|
+
}
|
|
228
|
+
)
|
|
229
|
+
] })
|
|
230
|
+
}
|
|
231
|
+
),
|
|
232
|
+
helperContent != null && /* @__PURE__ */ jsx6(HelperText, { state: isError ? "error" : "default", children: helperContent })
|
|
233
|
+
] });
|
|
234
|
+
});
|
|
235
|
+
export {
|
|
236
|
+
Button,
|
|
237
|
+
CheckIcon,
|
|
238
|
+
ErrorIcon,
|
|
239
|
+
EyeIcon,
|
|
240
|
+
HelperText,
|
|
241
|
+
IconButton,
|
|
242
|
+
InfoIcon,
|
|
243
|
+
Input,
|
|
244
|
+
PlusIcon,
|
|
245
|
+
TextArea,
|
|
246
|
+
UserIcon,
|
|
247
|
+
WarnIcon
|
|
248
|
+
};
|
|
249
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Button/Button.tsx","../src/utils.ts","../src/IconButton/IconButton.tsx","../src/Input/Input.tsx","../src/HelperText/HelperText.tsx","../src/icons.tsx","../src/TextArea/TextArea.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../utils';\nimport './Button.css';\n\nexport type ButtonVariant =\n | 'primary'\n | 'primary-soft'\n | 'secondary'\n | 'ghost'\n | 'success'\n | 'warning'\n | 'error'\n | 'info'\n | 'silkfest'\n | 'link';\n\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Color/style variant. Defaults to `primary`. */\n variant?: ButtonVariant;\n /** Size. Defaults to `md`. */\n size?: ButtonSize;\n /** Optional icon rendered before the label. */\n leftIcon?: ReactNode;\n /** Optional icon rendered after the label. */\n rightIcon?: ReactNode;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n variant = 'primary',\n size = 'md',\n leftIcon,\n rightIcon,\n className,\n children,\n type = 'button',\n ...rest\n },\n ref,\n) {\n return (\n <button\n ref={ref}\n type={type}\n className={cx(\n 'silk-button',\n `silk-button--${variant}`,\n `silk-button--${size}`,\n className,\n )}\n {...rest}\n >\n {leftIcon != null && <span className=\"silk-button__icon\">{leftIcon}</span>}\n {children}\n {rightIcon != null && <span className=\"silk-button__icon\">{rightIcon}</span>}\n </button>\n );\n});\n","// Tiny classname joiner — accepts strings, falsy values, and conditional\n// objects (`{ 'silk-foo--md': true }`). Intentionally tiny to avoid bringing\n// in `classnames` or `clsx` as a dep.\n\nexport type ClassValue =\n | string\n | number\n | null\n | false\n | undefined\n | Record<string, boolean | null | undefined>\n | ClassValue[];\n\nexport function cx(...values: ClassValue[]): string {\n const out: string[] = [];\n for (const v of values) {\n if (!v) continue;\n if (typeof v === 'string' || typeof v === 'number') {\n out.push(String(v));\n } else if (Array.isArray(v)) {\n const inner = cx(...v);\n if (inner) out.push(inner);\n } else if (typeof v === 'object') {\n for (const [k, on] of Object.entries(v)) if (on) out.push(k);\n }\n }\n return out.join(' ');\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../utils';\nimport type { ButtonSize } from '../Button/Button';\nimport './IconButton.css';\n\nexport type IconButtonVariant = 'primary' | 'primary-soft' | 'secondary' | 'ghost';\n\nexport interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {\n /** Color/style variant. Defaults to `primary`. */\n variant?: IconButtonVariant;\n /** Size. Defaults to `md`. */\n size?: ButtonSize;\n /** Required: accessible label for the button (icon-only buttons need it). */\n 'aria-label': string;\n /** The icon to render — typically an inline <svg>. */\n children: ReactNode;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { variant = 'primary', size = 'md', className, children, type = 'button', ...rest },\n ref,\n) {\n return (\n <button\n ref={ref}\n type={type}\n className={cx(\n 'silk-button',\n 'silk-icon-button',\n `silk-button--${variant}`,\n `silk-button--${size}`,\n className,\n )}\n {...rest}\n >\n {children}\n </button>\n );\n});\n","import {\n forwardRef,\n useId,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cx } from '../utils';\nimport { HelperText } from '../HelperText/HelperText';\nimport './Input.css';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'placeholder'> {\n /** Floating label shown inside the field. Required for accessibility. */\n label: string;\n /** Optional helper text shown below the field. */\n helperText?: ReactNode;\n /** When true, applies the error style. If a string is passed it overrides helperText. */\n error?: boolean | string;\n /** Optional icon shown to the left of the label/value. */\n leftIcon?: ReactNode;\n /** Optional icon shown to the right of the label/value. */\n rightIcon?: ReactNode;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n label,\n helperText,\n error,\n leftIcon,\n rightIcon,\n className,\n id,\n disabled,\n ...rest\n },\n ref,\n) {\n const generatedId = useId();\n const inputId = id ?? generatedId;\n const isError = Boolean(error);\n const helperContent = typeof error === 'string' ? error : helperText;\n\n return (\n <div className={cx('silk-input-group', className)}>\n <label\n htmlFor={inputId}\n className={cx('silk-input', { 'silk-input--error': isError })}\n >\n {leftIcon != null && <span className=\"silk-input__icon\">{leftIcon}</span>}\n <span className=\"silk-input__inner\">\n <span className=\"silk-input__label\">{label}</span>\n <input\n ref={ref}\n id={inputId}\n type=\"text\"\n className=\"silk-input__field\"\n // Single space placeholder lets CSS :placeholder-shown drive the\n // floating-label transition without any JS state.\n placeholder=\" \"\n disabled={disabled}\n aria-invalid={isError || undefined}\n {...rest}\n />\n </span>\n {rightIcon != null && <span className=\"silk-input__icon\">{rightIcon}</span>}\n </label>\n {helperContent != null && (\n <HelperText state={isError ? 'error' : 'default'}>{helperContent}</HelperText>\n )}\n </div>\n );\n});\n","import { type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../utils';\nimport { CheckIcon, InfoIcon, WarnIcon, ErrorIcon } from '../icons';\nimport './HelperText.css';\n\nexport type HelperTextState = 'default' | 'success' | 'info' | 'warning' | 'error';\n\nexport interface HelperTextProps extends HTMLAttributes<HTMLParagraphElement> {\n /** Semantic state. Defaults to `default` (no icon). */\n state?: HelperTextState;\n /** Override the auto-rendered icon. Pass `null` to suppress for a non-default state. */\n icon?: ReactNode | null;\n}\n\nconst DEFAULT_ICONS: Record<Exclude<HelperTextState, 'default'>, ReactNode> = {\n success: <CheckIcon />,\n info: <InfoIcon />,\n warning: <WarnIcon />,\n error: <ErrorIcon />,\n};\n\nexport function HelperText({\n state = 'default',\n icon,\n className,\n children,\n ...rest\n}: HelperTextProps) {\n // For non-default states: use the provided icon if any, else the default\n // for that state. Pass `icon={null}` to explicitly suppress.\n const resolvedIcon =\n state === 'default'\n ? null\n : icon !== undefined\n ? icon\n : DEFAULT_ICONS[state];\n\n return (\n <p className={cx('silk-helper', `silk-helper--${state}`, className)} {...rest}>\n {resolvedIcon != null && <span className=\"silk-helper__icon\">{resolvedIcon}</span>}\n <span>{children}</span>\n </p>\n );\n}\n","import type { SVGProps } from 'react';\n\n// Tiny stroke-based icon set used as defaults inside HelperText (success/info/\n// warning/error) and as fallbacks in stories. All use `currentColor` so the\n// surrounding component's text color drives them. Consumers can pass any other\n// SVG / icon library output to the leftIcon/rightIcon props instead.\n\nconst base = (props: SVGProps<SVGSVGElement>): SVGProps<SVGSVGElement> => ({\n viewBox: '0 0 24 24',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 2,\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n 'aria-hidden': true,\n focusable: false,\n ...props,\n});\n\nexport const CheckIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base({ ...props, strokeWidth: 2.5 })}>\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n);\n\nexport const InfoIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base(props)}>\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" />\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />\n </svg>\n);\n\nexport const WarnIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base(props)}>\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" />\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n </svg>\n);\n\nexport const ErrorIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base(props)}>\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n </svg>\n);\n\n// Generic icons useful in stories / examples.\nexport const PlusIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base(props)}>\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n </svg>\n);\n\nexport const UserIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base(props)}>\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n <circle cx=\"12\" cy=\"7\" r=\"4\" />\n </svg>\n);\n\nexport const EyeIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg {...base(props)}>\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n);\n","import {\n forwardRef,\n useId,\n type TextareaHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cx } from '../utils';\nimport { HelperText } from '../HelperText/HelperText';\nimport './TextArea.css';\n\nexport interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'> {\n label: string;\n helperText?: ReactNode;\n /** When true, applies the error style. If a string is passed it overrides helperText. */\n error?: boolean | string;\n}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n { label, helperText, error, className, id, disabled, ...rest },\n ref,\n) {\n const generatedId = useId();\n const textareaId = id ?? generatedId;\n const isError = Boolean(error);\n const helperContent = typeof error === 'string' ? error : helperText;\n\n return (\n <div className={cx('silk-input-group', className)}>\n <label\n htmlFor={textareaId}\n className={cx('silk-textarea', { 'silk-textarea--error': isError })}\n >\n <span className=\"silk-textarea__inner\">\n <span className=\"silk-textarea__label\">{label}</span>\n <textarea\n ref={ref}\n id={textareaId}\n className=\"silk-textarea__field\"\n placeholder=\" \"\n disabled={disabled}\n aria-invalid={isError || undefined}\n {...rest}\n />\n </span>\n </label>\n {helperContent != null && (\n <HelperText state={isError ? 'error' : 'default'}>{helperContent}</HelperText>\n )}\n </div>\n );\n});\n"],"mappings":"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","names":["Button","forwardRef","jsx","forwardRef","IconButton","forwardRef","jsx","jsxs","jsx","jsxs","jsx","jsxs","forwardRef","Input","forwardRef","useId","jsx","jsxs","forwardRef","TextArea","useId"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@silknet-ds/react",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Silknet design system React components — Button, IconButton, Input, TextArea, HelperText.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"author": "Sandro Tarkhnishvili <s.tarkhana@gmail.com>",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"react",
|
|
10
|
+
"design-system",
|
|
11
|
+
"components",
|
|
12
|
+
"ui",
|
|
13
|
+
"silknet"
|
|
14
|
+
],
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/tamashebistvis333-lgtm/silknet-ds.git",
|
|
18
|
+
"directory": "packages/react"
|
|
19
|
+
},
|
|
20
|
+
"homepage": "https://github.com/tamashebistvis333-lgtm/silknet-ds/tree/main/packages/react#readme",
|
|
21
|
+
"bugs": "https://github.com/tamashebistvis333-lgtm/silknet-ds/issues",
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public"
|
|
24
|
+
},
|
|
25
|
+
"sideEffects": [
|
|
26
|
+
"**/*.css"
|
|
27
|
+
],
|
|
28
|
+
"files": [
|
|
29
|
+
"dist",
|
|
30
|
+
"README.md"
|
|
31
|
+
],
|
|
32
|
+
"exports": {
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./dist/index.d.ts",
|
|
35
|
+
"import": "./dist/index.js"
|
|
36
|
+
},
|
|
37
|
+
"./styles.css": "./dist/index.css",
|
|
38
|
+
"./package.json": "./package.json"
|
|
39
|
+
},
|
|
40
|
+
"main": "./dist/index.js",
|
|
41
|
+
"module": "./dist/index.js",
|
|
42
|
+
"types": "./dist/index.d.ts",
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "tsup",
|
|
45
|
+
"dev": "tsup --watch",
|
|
46
|
+
"typecheck": "tsc --noEmit",
|
|
47
|
+
"prepack": "npm run build"
|
|
48
|
+
},
|
|
49
|
+
"peerDependencies": {
|
|
50
|
+
"@silknet-ds/tokens": "*",
|
|
51
|
+
"react": ">=18",
|
|
52
|
+
"react-dom": ">=18"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"@silknet-ds/tokens": "*",
|
|
56
|
+
"@types/react": "^18.3.12",
|
|
57
|
+
"@types/react-dom": "^18.3.1",
|
|
58
|
+
"react": "^18.3.1",
|
|
59
|
+
"react-dom": "^18.3.1",
|
|
60
|
+
"tsup": "^8.3.5",
|
|
61
|
+
"typescript": "^5.6.3"
|
|
62
|
+
}
|
|
63
|
+
}
|