@sakura-ui/sakura-ui 0.1.19 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/package.json +1 -1
  2. package/packages/config/package.json +1 -1
  3. package/packages/core/package.json +1 -1
  4. package/packages/core/src/components/Button.tsx +9 -3
  5. package/packages/core/src/components/Card.tsx +10 -8
  6. package/packages/core/src/components/buttonStyle.ts +24 -10
  7. package/packages/core/src/components/index.ts +2 -1
  8. package/packages/core/src/index.ts +2 -0
  9. package/packages/forms/package.json +1 -1
  10. package/packages/tailwind-theme-plugin/dist/index.cjs.js +1 -0
  11. package/packages/tailwind-theme-plugin/dist/index.es.js +6476 -0
  12. package/packages/tailwind-theme-plugin/dist/types/index.d.ts +6 -0
  13. package/packages/tailwind-theme-plugin/dist/types/index.d.ts.map +1 -0
  14. package/packages/tailwind-theme-plugin/node_modules/.bin/autoprefixer +17 -0
  15. package/packages/tailwind-theme-plugin/node_modules/.bin/browserslist +17 -0
  16. package/packages/tailwind-theme-plugin/node_modules/.bin/tailwind +17 -0
  17. package/packages/tailwind-theme-plugin/node_modules/.bin/tailwindcss +17 -0
  18. package/packages/tailwind-theme-plugin/node_modules/.bin/ts-node +17 -0
  19. package/packages/tailwind-theme-plugin/node_modules/.bin/ts-node-cwd +17 -0
  20. package/packages/tailwind-theme-plugin/node_modules/.bin/ts-node-esm +17 -0
  21. package/packages/tailwind-theme-plugin/node_modules/.bin/ts-node-script +17 -0
  22. package/packages/tailwind-theme-plugin/node_modules/.bin/ts-node-transpile-only +17 -0
  23. package/packages/tailwind-theme-plugin/node_modules/.bin/ts-script +17 -0
  24. package/packages/tailwind-theme-plugin/package.json +47 -0
  25. package/packages/tailwind-theme-plugin/src/index.ts +519 -0
  26. package/packages/tailwind-theme-plugin/tests/index.test.ts +13 -0
  27. package/packages/tailwind-theme-plugin/tsconfig.json +13 -0
  28. package/packages/tailwind-theme-plugin/tsconfig.node.json +6 -0
  29. package/packages/tailwind-theme-plugin/vite.config.ts +26 -0
  30. package/packages/forms/dist/components/Checkbox.js +0 -46
  31. package/packages/forms/dist/components/Checkbox.js.map +0 -1
  32. package/packages/forms/dist/components/FieldsetControl.js +0 -20
  33. package/packages/forms/dist/components/FieldsetControl.js.map +0 -1
  34. package/packages/forms/dist/components/FileInput.js +0 -55
  35. package/packages/forms/dist/components/FileInput.js.map +0 -1
  36. package/packages/forms/dist/components/Input.js +0 -29
  37. package/packages/forms/dist/components/Input.js.map +0 -1
  38. package/packages/forms/dist/components/LabelControl.js +0 -24
  39. package/packages/forms/dist/components/LabelControl.js.map +0 -1
  40. package/packages/forms/dist/components/Radio.js +0 -45
  41. package/packages/forms/dist/components/Radio.js.map +0 -1
  42. package/packages/forms/dist/components/Select.js +0 -41
  43. package/packages/forms/dist/components/Select.js.map +0 -1
  44. package/packages/forms/dist/components/Textarea.js +0 -36
  45. package/packages/forms/dist/components/Textarea.js.map +0 -1
  46. package/packages/forms/dist/components/context.js +0 -8
  47. package/packages/forms/dist/components/context.js.map +0 -1
  48. package/packages/forms/dist/components/controlled/CheckboxGroup.js +0 -12
  49. package/packages/forms/dist/components/controlled/CheckboxGroup.js.map +0 -1
  50. package/packages/forms/dist/components/controlled/InputItem.js +0 -2
  51. package/packages/forms/dist/components/controlled/InputItem.js.map +0 -1
  52. package/packages/forms/dist/components/controlled/RadioGroup.js +0 -12
  53. package/packages/forms/dist/components/controlled/RadioGroup.js.map +0 -1
  54. package/packages/forms/dist/components/controlled/SelectControl.js +0 -10
  55. package/packages/forms/dist/components/controlled/SelectControl.js.map +0 -1
  56. package/packages/forms/dist/components/controlled/TextareaControl.js +0 -10
  57. package/packages/forms/dist/components/controlled/TextareaControl.js.map +0 -1
  58. package/packages/forms/dist/components/controlled/index.js +0 -5
  59. package/packages/forms/dist/components/controlled/index.js.map +0 -1
  60. package/packages/forms/dist/components/index.js +0 -9
  61. package/packages/forms/dist/components/index.js.map +0 -1
  62. package/packages/forms/dist/index.js +0 -3
  63. package/packages/forms/dist/index.js.map +0 -1
  64. package/packages/forms/dist/utils/class.js +0 -2
  65. package/packages/forms/dist/utils/class.js.map +0 -1
@@ -0,0 +1,519 @@
1
+ import plugin from 'tailwindcss/plugin'
2
+ import tokens from '@digital-go-jp/design-tokens'
3
+
4
+ const booleans = [
5
+ 'atomic',
6
+ 'busy',
7
+ 'checked',
8
+ 'current',
9
+ 'disabled',
10
+ 'expanded',
11
+ 'grabbed',
12
+ 'haspopup',
13
+ 'hidden',
14
+ 'invalid',
15
+ 'live',
16
+ 'modal',
17
+ 'multiline',
18
+ 'multiselectable',
19
+ 'pressed',
20
+ 'readonly',
21
+ 'required',
22
+ 'selected'
23
+ ]
24
+
25
+ const enumerables = {
26
+ autocomplete: ['both', 'inline', 'list', 'none'],
27
+ current: ['date', 'location', 'page', 'step', 'time'],
28
+ dropeffect: ['copy', 'execute', 'link', 'move', 'none', 'popup'],
29
+ haspopup: ['dialog', 'grid', 'listbox', 'menu', 'tree'],
30
+ orientation: ['horizontal', 'undefined', 'vertial'],
31
+ relevant: ['additions', 'all', 'removals', 'text'],
32
+ sort: ['ascending', 'descending', 'none', 'other']
33
+ }
34
+
35
+ const sakuraPlugin = plugin(
36
+ ({ addBase, addVariant }) => {
37
+ addBase({
38
+ '@font-face': {
39
+ fontFamily: 'Material Symbols Outlined',
40
+ fontWeight: '300',
41
+ fontStyle: 'normal'
42
+ }
43
+ })
44
+ const addAriaVariant = (name: string, value: string) => {
45
+ addVariant(name, `[${name}="${value}"]&`)
46
+ addVariant(`peer-${name}`, `:merge(.peer)[${name}="${value}"] ~ &`)
47
+ addVariant(`group-${name}`, `:merge(.group)[${name}="${value}"] &`)
48
+ }
49
+ const addAriaEnumVariant = (name: string, value: string) => {
50
+ addVariant(`${name}-${value}`, `[${name}="${value}"]&`)
51
+ addVariant(
52
+ `peer-${name}-${value}`,
53
+ `:merge(.peer)[${name}="${value}"] ~ &`
54
+ )
55
+ addVariant(
56
+ `group-${name}-${value}`,
57
+ `:merge(.group)[${name}="${value}"] &`
58
+ )
59
+ }
60
+
61
+ for (const attribute of booleans) {
62
+ addAriaVariant(`aria-${attribute}`, 'true')
63
+ }
64
+
65
+ for (const [attribute, values] of Object.entries(enumerables)) {
66
+ for (const value of values) {
67
+ addAriaEnumVariant(`aria-${attribute}`, value)
68
+ }
69
+ }
70
+ },
71
+ {
72
+ theme: {
73
+ extend: {
74
+ fontSize: {
75
+ 'h-xl': [
76
+ tokens.FontSize[45].value,
77
+ {
78
+ fontWeight: tokens.FontWeight[700].value,
79
+ lineHeight: tokens.LineHeight['1_4'].value,
80
+ letterSpacing: '0.02em'
81
+ }
82
+ ],
83
+ // h1
84
+ 'h-lg': [
85
+ tokens.FontSize[36].value,
86
+ {
87
+ fontWeight: tokens.FontWeight[700].value,
88
+ lineHeight: tokens.LineHeight['1_4'].value,
89
+ letterSpacing: '0.02em'
90
+ }
91
+ ],
92
+ // h1 Mobile
93
+ 'h-lg-m': [
94
+ tokens.FontSize[32].value,
95
+ {
96
+ fontWeight: tokens.FontWeight[700].value,
97
+ lineHeight: tokens.LineHeight['1_5'].value,
98
+ letterSpacing: '0.02em'
99
+ }
100
+ ],
101
+ // h2
102
+ 'h-med': [
103
+ tokens.FontSize[32].value,
104
+ {
105
+ fontWeight: tokens.FontWeight[700].value,
106
+ lineHeight: tokens.LineHeight['1_5'].value,
107
+ letterSpacing: '0.02em'
108
+ }
109
+ ],
110
+ // h2 Mobile
111
+ 'h-med-m': [
112
+ tokens.FontSize[28].value,
113
+ {
114
+ fontWeight: tokens.FontWeight[700].value,
115
+ lineHeight: tokens.LineHeight['1_5'].value,
116
+ letterSpacing: '0.02em'
117
+ }
118
+ ],
119
+ // h3
120
+ 'h-sm': [
121
+ tokens.FontSize[28].value,
122
+ {
123
+ fontWeight: tokens.FontWeight[700].value,
124
+ lineHeight: tokens.LineHeight['1_5'].value,
125
+ letterSpacing: '0.02em'
126
+ }
127
+ ],
128
+ // h3 Mobile
129
+ 'h-sm-m': [
130
+ tokens.FontSize[24].value,
131
+ {
132
+ fontWeight: tokens.FontWeight[700].value,
133
+ lineHeight: tokens.LineHeight['1_5'].value,
134
+ letterSpacing: '0.02em'
135
+ }
136
+ ],
137
+ // h4
138
+ 'h-xs': [
139
+ tokens.FontSize[24].value,
140
+ {
141
+ fontWeight: tokens.FontWeight[700].value,
142
+ lineHeight: tokens.LineHeight['1_5'].value,
143
+ letterSpacing: '0.02em'
144
+ }
145
+ ],
146
+ // h4 Mobile
147
+ 'h-xs-m': [
148
+ tokens.FontSize[22].value,
149
+ {
150
+ fontWeight: tokens.FontWeight[700].value,
151
+ lineHeight: tokens.LineHeight['1_5'].value,
152
+ letterSpacing: '0.02em'
153
+ }
154
+ ],
155
+ // h5 h6
156
+ 'h-xxs': [
157
+ tokens.FontSize[20].value,
158
+ {
159
+ fontWeight: tokens.FontWeight[700].value,
160
+ lineHeight: tokens.LineHeight['1_5'].value,
161
+ letterSpacing: '0.02em'
162
+ }
163
+ ],
164
+ // h5 h6 Mobile
165
+ 'h-xxs-m': [
166
+ tokens.FontSize[18].value,
167
+ {
168
+ fontWeight: tokens.FontWeight[700].value,
169
+ lineHeight: tokens.LineHeight['1_6'].value,
170
+ letterSpacing: '0.02em'
171
+ }
172
+ ],
173
+ base: [
174
+ tokens.FontSize[16].value,
175
+ {
176
+ fontWeight: tokens.FontWeight[400].value,
177
+ lineHeight: tokens.LineHeight['1_7'].value,
178
+ letterSpacing: '0.02em'
179
+ }
180
+ ],
181
+ 'base-sm': [
182
+ tokens.FontSize[14].value,
183
+ {
184
+ fontWeight: tokens.FontWeight[400].value,
185
+ lineHeight: tokens.LineHeight['1_3'].value
186
+ }
187
+ ],
188
+ 'tb-header': [
189
+ tokens.FontSize[16].value,
190
+ {
191
+ fontWeight: tokens.FontWeight[700].value,
192
+ lineHeight: tokens.LineHeight['1_2'].value
193
+ }
194
+ ],
195
+ 'tb-data': [
196
+ tokens.FontSize[16].value,
197
+ {
198
+ fontWeight: tokens.FontWeight[400].value,
199
+ lineHeight: tokens.LineHeight['1_2'].value
200
+ }
201
+ ],
202
+ ui: [
203
+ tokens.FontSize[16].value,
204
+ {
205
+ fontWeight: tokens.FontWeight[700].value,
206
+ lineHeight: tokens.LineHeight['1_0'].value,
207
+ letterSpacing: '0.02em'
208
+ }
209
+ ],
210
+ 'ui-sm': [
211
+ tokens.FontSize[14].value,
212
+ {
213
+ fontWeight: tokens.FontWeight[700].value,
214
+ lineHeight: tokens.LineHeight['1_0'].value,
215
+ letterSpacing: '0.02em'
216
+ }
217
+ ],
218
+ code: [
219
+ tokens.FontSize[16].value,
220
+ {
221
+ fontWeight: tokens.FontWeight[400].value,
222
+ lineHeight: tokens.LineHeight['1_5'].value
223
+ }
224
+ ]
225
+ },
226
+ colors: {
227
+ white: tokens.Color.Neutral.White.value,
228
+ black: tokens.Color.Neutral.Black.value,
229
+ sea: {
230
+ 50: tokens.Color.Primitive.Sea[50].value,
231
+ 100: tokens.Color.Primitive.Sea[100].value,
232
+ 200: tokens.Color.Primitive.Sea[200].value,
233
+ 300: tokens.Color.Primitive.Sea[300].value,
234
+ 400: tokens.Color.Primitive.Sea[400].value,
235
+ 500: tokens.Color.Primitive.Sea[500].value,
236
+ 600: tokens.Color.Primitive.Sea[600].value,
237
+ 700: tokens.Color.Primitive.Sea[700].value,
238
+ 800: tokens.Color.Primitive.Sea[800].value,
239
+ 900: tokens.Color.Primitive.Sea[900].value,
240
+ 1000: tokens.Color.Primitive.Sea[1000].value,
241
+ 1100: tokens.Color.Primitive.Sea[1100].value,
242
+ 1200: tokens.Color.Primitive.Sea[1200].value
243
+ },
244
+ sumi: {
245
+ 50: tokens.Color.Primitive.Sumi[50].value,
246
+ 100: tokens.Color.Primitive.Sumi[100].value,
247
+ 200: tokens.Color.Primitive.Sumi[200].value,
248
+ 300: tokens.Color.Primitive.Sumi[300].value,
249
+ 400: tokens.Color.Primitive.Sumi[400].value,
250
+ 500: tokens.Color.Primitive.Sumi[500].value,
251
+ 600: tokens.Color.Primitive.Sumi[600].value,
252
+ 700: tokens.Color.Primitive.Sumi[700].value,
253
+ 800: tokens.Color.Primitive.Sumi[800].value,
254
+ 900: tokens.Color.Primitive.Sumi[900].value,
255
+ 1000: tokens.Color.Primitive.Sumi[1000].value,
256
+ 1100: tokens.Color.Primitive.Sumi[1100].value,
257
+ 1200: tokens.Color.Primitive.Sumi[1200].value
258
+ },
259
+ forest: {
260
+ 50: tokens.Color.Primitive.Forest[50].value,
261
+ 100: tokens.Color.Primitive.Forest[100].value,
262
+ 200: tokens.Color.Primitive.Forest[200].value,
263
+ 300: tokens.Color.Primitive.Forest[300].value,
264
+ 400: tokens.Color.Primitive.Forest[400].value,
265
+ 500: tokens.Color.Primitive.Forest[500].value,
266
+ 600: tokens.Color.Primitive.Forest[600].value,
267
+ 700: tokens.Color.Primitive.Forest[700].value,
268
+ 800: tokens.Color.Primitive.Forest[800].value,
269
+ 900: tokens.Color.Primitive.Forest[900].value,
270
+ 1000: tokens.Color.Primitive.Forest[1000].value,
271
+ 1100: tokens.Color.Primitive.Forest[1100].value,
272
+ 1200: tokens.Color.Primitive.Forest[1200].value
273
+ },
274
+ wood: {
275
+ 50: tokens.Color.Primitive.Wood[50].value,
276
+ 100: tokens.Color.Primitive.Wood[100].value,
277
+ 200: tokens.Color.Primitive.Wood[200].value,
278
+ 300: tokens.Color.Primitive.Wood[300].value,
279
+ 400: tokens.Color.Primitive.Wood[400].value,
280
+ 500: tokens.Color.Primitive.Wood[500].value,
281
+ 600: tokens.Color.Primitive.Wood[600].value,
282
+ 700: tokens.Color.Primitive.Wood[700].value,
283
+ 800: tokens.Color.Primitive.Wood[800].value,
284
+ 900: tokens.Color.Primitive.Wood[900].value,
285
+ 1000: tokens.Color.Primitive.Wood[1000].value,
286
+ 1100: tokens.Color.Primitive.Wood[1100].value,
287
+ 1200: tokens.Color.Primitive.Wood[1200].value
288
+ },
289
+ sun: {
290
+ 50: tokens.Color.Primitive.Sun[50].value,
291
+ 100: tokens.Color.Primitive.Sun[100].value,
292
+ 200: tokens.Color.Primitive.Sun[200].value,
293
+ 300: tokens.Color.Primitive.Sun[300].value,
294
+ 400: tokens.Color.Primitive.Sun[400].value,
295
+ 500: tokens.Color.Primitive.Sun[500].value,
296
+ 600: tokens.Color.Primitive.Sun[600].value,
297
+ 700: tokens.Color.Primitive.Sun[700].value,
298
+ 800: tokens.Color.Primitive.Sun[800].value,
299
+ 900: tokens.Color.Primitive.Sun[900].value,
300
+ 1000: tokens.Color.Primitive.Sun[1000].value,
301
+ 1100: tokens.Color.Primitive.Sun[1100].value,
302
+ 1200: tokens.Color.Primitive.Sun[1200].value
303
+ },
304
+ blue: {
305
+ 50: tokens.Color.Primitive.Blue[50].value,
306
+ 100: tokens.Color.Primitive.Blue[100].value,
307
+ 200: tokens.Color.Primitive.Blue[200].value,
308
+ 300: tokens.Color.Primitive.Blue[300].value,
309
+ 400: tokens.Color.Primitive.Blue[400].value,
310
+ 500: tokens.Color.Primitive.Blue[500].value,
311
+ 600: tokens.Color.Primitive.Blue[600].value,
312
+ 700: tokens.Color.Primitive.Blue[700].value,
313
+ 800: tokens.Color.Primitive.Blue[800].value,
314
+ 900: tokens.Color.Primitive.Blue[900].value,
315
+ 1000: tokens.Color.Primitive.Blue[1000].value,
316
+ 1100: tokens.Color.Primitive.Blue[1100].value,
317
+ 1200: tokens.Color.Primitive.Blue[1200].value
318
+ },
319
+ 'light-blue': {
320
+ 50: tokens.Color.Primitive.LightBlue[50].value,
321
+ 100: tokens.Color.Primitive.LightBlue[100].value,
322
+ 200: tokens.Color.Primitive.LightBlue[200].value,
323
+ 300: tokens.Color.Primitive.LightBlue[300].value,
324
+ 400: tokens.Color.Primitive.LightBlue[400].value,
325
+ 500: tokens.Color.Primitive.LightBlue[500].value,
326
+ 600: tokens.Color.Primitive.LightBlue[600].value,
327
+ 700: tokens.Color.Primitive.LightBlue[700].value,
328
+ 800: tokens.Color.Primitive.LightBlue[800].value,
329
+ 900: tokens.Color.Primitive.LightBlue[900].value,
330
+ 1000: tokens.Color.Primitive.LightBlue[1000].value,
331
+ 1100: tokens.Color.Primitive.LightBlue[1100].value,
332
+ 1200: tokens.Color.Primitive.LightBlue[1200].value
333
+ },
334
+ cyan: {
335
+ 50: tokens.Color.Primitive.Cyan[50].value,
336
+ 100: tokens.Color.Primitive.Cyan[100].value,
337
+ 200: tokens.Color.Primitive.Cyan[200].value,
338
+ 300: tokens.Color.Primitive.Cyan[300].value,
339
+ 400: tokens.Color.Primitive.Cyan[400].value,
340
+ 500: tokens.Color.Primitive.Cyan[500].value,
341
+ 600: tokens.Color.Primitive.Cyan[600].value,
342
+ 700: tokens.Color.Primitive.Cyan[700].value,
343
+ 800: tokens.Color.Primitive.Cyan[800].value,
344
+ 900: tokens.Color.Primitive.Cyan[900].value,
345
+ 1000: tokens.Color.Primitive.Cyan[1000].value,
346
+ 1100: tokens.Color.Primitive.Cyan[1100].value,
347
+ 1200: tokens.Color.Primitive.Cyan[1200].value
348
+ },
349
+ green: {
350
+ 50: tokens.Color.Primitive.Green[50].value,
351
+ 100: tokens.Color.Primitive.Green[100].value,
352
+ 200: tokens.Color.Primitive.Green[200].value,
353
+ 300: tokens.Color.Primitive.Green[300].value,
354
+ 400: tokens.Color.Primitive.Green[400].value,
355
+ 500: tokens.Color.Primitive.Green[500].value,
356
+ 600: tokens.Color.Primitive.Green[600].value,
357
+ 700: tokens.Color.Primitive.Green[700].value,
358
+ 800: tokens.Color.Primitive.Green[800].value,
359
+ 900: tokens.Color.Primitive.Green[900].value,
360
+ 1000: tokens.Color.Primitive.Green[1000].value,
361
+ 1100: tokens.Color.Primitive.Green[1100].value,
362
+ 1200: tokens.Color.Primitive.Green[1200].value
363
+ },
364
+ lime: {
365
+ 50: tokens.Color.Primitive.Lime[50].value,
366
+ 100: tokens.Color.Primitive.Lime[100].value,
367
+ 200: tokens.Color.Primitive.Lime[200].value,
368
+ 300: tokens.Color.Primitive.Lime[300].value,
369
+ 400: tokens.Color.Primitive.Lime[400].value,
370
+ 500: tokens.Color.Primitive.Lime[500].value,
371
+ 600: tokens.Color.Primitive.Lime[600].value,
372
+ 700: tokens.Color.Primitive.Lime[700].value,
373
+ 800: tokens.Color.Primitive.Lime[800].value,
374
+ 900: tokens.Color.Primitive.Lime[900].value,
375
+ 1000: tokens.Color.Primitive.Lime[1000].value,
376
+ 1100: tokens.Color.Primitive.Lime[1100].value,
377
+ 1200: tokens.Color.Primitive.Lime[1200].value
378
+ },
379
+ yellow: {
380
+ 50: tokens.Color.Primitive.Yellow[50].value,
381
+ 100: tokens.Color.Primitive.Yellow[100].value,
382
+ 200: tokens.Color.Primitive.Yellow[200].value,
383
+ 300: tokens.Color.Primitive.Yellow[300].value,
384
+ 400: tokens.Color.Primitive.Yellow[400].value,
385
+ 500: tokens.Color.Primitive.Yellow[500].value,
386
+ 600: tokens.Color.Primitive.Yellow[600].value,
387
+ 700: tokens.Color.Primitive.Yellow[700].value,
388
+ 800: tokens.Color.Primitive.Yellow[800].value,
389
+ 900: tokens.Color.Primitive.Yellow[900].value,
390
+ 1000: tokens.Color.Primitive.Yellow[1000].value,
391
+ 1100: tokens.Color.Primitive.Yellow[1100].value,
392
+ 1200: tokens.Color.Primitive.Yellow[1200].value
393
+ },
394
+ orange: {
395
+ 50: tokens.Color.Primitive.Orange[50].value,
396
+ 100: tokens.Color.Primitive.Orange[100].value,
397
+ 200: tokens.Color.Primitive.Orange[200].value,
398
+ 300: tokens.Color.Primitive.Orange[300].value,
399
+ 400: tokens.Color.Primitive.Orange[400].value,
400
+ 500: tokens.Color.Primitive.Orange[500].value,
401
+ 600: tokens.Color.Primitive.Orange[600].value,
402
+ 700: tokens.Color.Primitive.Orange[700].value,
403
+ 800: tokens.Color.Primitive.Orange[800].value,
404
+ 900: tokens.Color.Primitive.Orange[900].value,
405
+ 1000: tokens.Color.Primitive.Orange[1000].value,
406
+ 1100: tokens.Color.Primitive.Orange[1100].value,
407
+ 1200: tokens.Color.Primitive.Orange[1200].value
408
+ },
409
+ red: {
410
+ 50: tokens.Color.Primitive.Red[50].value,
411
+ 100: tokens.Color.Primitive.Red[100].value,
412
+ 200: tokens.Color.Primitive.Red[200].value,
413
+ 300: tokens.Color.Primitive.Red[300].value,
414
+ 400: tokens.Color.Primitive.Red[400].value,
415
+ 500: tokens.Color.Primitive.Red[500].value,
416
+ 600: tokens.Color.Primitive.Red[600].value,
417
+ 700: tokens.Color.Primitive.Red[700].value,
418
+ 800: tokens.Color.Primitive.Red[800].value,
419
+ 900: tokens.Color.Primitive.Red[900].value,
420
+ 1000: tokens.Color.Primitive.Red[1000].value,
421
+ 1100: tokens.Color.Primitive.Red[1100].value,
422
+ 1200: tokens.Color.Primitive.Red[1200].value
423
+ },
424
+ magenta: {
425
+ 50: tokens.Color.Primitive.Magenta[50].value,
426
+ 100: tokens.Color.Primitive.Magenta[100].value,
427
+ 200: tokens.Color.Primitive.Magenta[200].value,
428
+ 300: tokens.Color.Primitive.Magenta[300].value,
429
+ 400: tokens.Color.Primitive.Magenta[400].value,
430
+ 500: tokens.Color.Primitive.Magenta[500].value,
431
+ 600: tokens.Color.Primitive.Magenta[600].value,
432
+ 700: tokens.Color.Primitive.Magenta[700].value,
433
+ 800: tokens.Color.Primitive.Magenta[800].value,
434
+ 900: tokens.Color.Primitive.Magenta[900].value,
435
+ 1000: tokens.Color.Primitive.Magenta[1000].value,
436
+ 1100: tokens.Color.Primitive.Magenta[1100].value,
437
+ 1200: tokens.Color.Primitive.Magenta[1200].value
438
+ },
439
+ purple: {
440
+ 50: tokens.Color.Primitive.Purple[50].value,
441
+ 100: tokens.Color.Primitive.Purple[100].value,
442
+ 200: tokens.Color.Primitive.Purple[200].value,
443
+ 300: tokens.Color.Primitive.Purple[300].value,
444
+ 400: tokens.Color.Primitive.Purple[400].value,
445
+ 500: tokens.Color.Primitive.Purple[500].value,
446
+ 600: tokens.Color.Primitive.Purple[600].value,
447
+ 700: tokens.Color.Primitive.Purple[700].value,
448
+ 800: tokens.Color.Primitive.Purple[800].value,
449
+ 900: tokens.Color.Primitive.Purple[900].value,
450
+ 1000: tokens.Color.Primitive.Purple[1000].value,
451
+ 1100: tokens.Color.Primitive.Purple[1100].value,
452
+ 1200: tokens.Color.Primitive.Purple[1200].value
453
+ },
454
+ 'solid-grey': {
455
+ 50: tokens.Color.Neutral.SolidGrey[50].value,
456
+ 100: tokens.Color.Neutral.SolidGrey[100].value,
457
+ 200: tokens.Color.Neutral.SolidGrey[200].value,
458
+ 300: tokens.Color.Neutral.SolidGrey[300].value,
459
+ 400: tokens.Color.Neutral.SolidGrey[400].value,
460
+ 420: tokens.Color.Neutral.SolidGrey[420].value,
461
+ 500: tokens.Color.Neutral.SolidGrey[500].value,
462
+ 536: tokens.Color.Neutral.SolidGrey[536].value,
463
+ 600: tokens.Color.Neutral.SolidGrey[600].value,
464
+ 700: tokens.Color.Neutral.SolidGrey[700].value,
465
+ 800: tokens.Color.Neutral.SolidGrey[800].value,
466
+ 900: tokens.Color.Neutral.SolidGrey[900].value
467
+ },
468
+ 'success-1': tokens.Color.Success[1].value,
469
+ 'success-2': tokens.Color.Success[2].value,
470
+ 'error-1': tokens.Color.Error[1].value,
471
+ 'error-2': tokens.Color.Error[2].value,
472
+ 'warning-yellow-1': tokens.Color.Warning.Yellow[1].value,
473
+ 'warning-yellow-2': tokens.Color.Warning.Yellow[2].value,
474
+ 'warning-orange-1': tokens.Color.Warning.Orange[1].value,
475
+ 'warning-orange-2': tokens.Color.Warning.Orange[2].value,
476
+ 'focus-yellow': tokens.Color.Primitive.Yellow[700].value,
477
+ 'focus-blue': tokens.Color.Primitive.LightBlue[700].value
478
+ },
479
+ lineHeight: {
480
+ '1-0': tokens.LineHeight['1_0'].value,
481
+ '1-2': tokens.LineHeight['1_2'].value,
482
+ '1-3': tokens.LineHeight['1_3'].value,
483
+ '1-4': tokens.LineHeight['1_4'].value,
484
+ '1-5': tokens.LineHeight['1_5'].value,
485
+ '1-6': tokens.LineHeight['1_6'].value,
486
+ '1-7': tokens.LineHeight['1_7'].value
487
+ },
488
+ listStyleType: {
489
+ 'lower-latin': 'lower-latin',
490
+ circle: 'circle',
491
+ square: 'square'
492
+ },
493
+ fontFamily: {
494
+ sans: [
495
+ 'Noto Sans JP',
496
+ '-apple-system',
497
+ 'blinkmacsystemfont',
498
+ 'Segoe UI',
499
+ 'Hiragino Kaku Gothic ProN',
500
+ 'BIZ UDPGothic',
501
+ 'meiryo',
502
+ 'sans-serif'
503
+ ],
504
+ code: [
505
+ 'Noto Sans Mono',
506
+ 'Monaco',
507
+ 'Menlo',
508
+ 'Consolas',
509
+ 'Courier New',
510
+ 'monospace'
511
+ ],
512
+ icon: ['Material Symbols Outlined']
513
+ }
514
+ }
515
+ }
516
+ }
517
+ )
518
+
519
+ export default sakuraPlugin
@@ -0,0 +1,13 @@
1
+ import sakuraPlugin from '../src'
2
+
3
+ describe('run tests', () => {
4
+ it('tests the sakuraConfig', () => {
5
+ const config = {
6
+ mode: 'jit',
7
+ content: ['./src/components/**/*.{js,ts,jsx,tsx}'],
8
+ plugins: [sakuraPlugin]
9
+ }
10
+ console.log(config)
11
+ expect(1 + 2).toBe(3)
12
+ })
13
+ })
@@ -0,0 +1,13 @@
1
+ {
2
+ "extends": "../../tsconfig.json",
3
+ "compilerOptions": {
4
+ "declarationDir": "./dist/types",
5
+ "outDir": "./dist",
6
+ "baseUrl": ".",
7
+ "paths": {
8
+ "@/*": ["src/*"]
9
+ }
10
+ },
11
+ "include": ["src"],
12
+ "references": [{ "path": "./tsconfig.node.json" }]
13
+ }
@@ -0,0 +1,6 @@
1
+ {
2
+ "compilerOptions": {
3
+ "composite": true
4
+ },
5
+ "include": ["vite.config.ts"]
6
+ }
@@ -0,0 +1,26 @@
1
+ /// <reference types="vitest" />
2
+ import { resolve } from 'path'
3
+ import { defineConfig } from 'vite'
4
+ import { peerDependencies } from './package.json'
5
+
6
+ // https://vitejs.dev/config/
7
+ export default defineConfig({
8
+ resolve: {
9
+ alias: {
10
+ '@': resolve(__dirname, 'src')
11
+ }
12
+ },
13
+ build: {
14
+ lib: {
15
+ entry: resolve(__dirname, 'src', 'index.ts'),
16
+ formats: ['es', 'cjs'],
17
+ fileName: (ext: string) => `index.${ext}.js`
18
+ },
19
+ rollupOptions: {
20
+ external: [...Object.keys(peerDependencies)]
21
+ }
22
+ },
23
+ test: {
24
+ globals: true
25
+ }
26
+ })
@@ -1,46 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React from 'react';
3
- import { cx } from '../utils/class';
4
- import { ControllerContext } from './context';
5
- export const Checkbox = React.forwardRef((props, ref) => {
6
- const { className, children, ...restProps } = props;
7
- const ctx = React.useContext(ControllerContext);
8
- if (ctx.isRequired) {
9
- restProps.required = true;
10
- }
11
- if (ctx.groupName) {
12
- restProps.name = ctx.groupName;
13
- }
14
- const style = `
15
- inline-block
16
- text-base
17
- cursor-pointer
18
- py-2
19
- mr-4
20
- `;
21
- const styleInput = `
22
- peer
23
- sr-only
24
- `;
25
- const styleCheck = `
26
- bg-clip-content
27
- w-6 h-6
28
- ml-1
29
- mr-2
30
- rounded
31
- border
32
- border-solid
33
- border-sumi-900
34
- fill-transparent
35
- peer-checked:fill-white-1000
36
- peer-checked:bg-sea-600
37
- peer-checked:border-none
38
- peer-disabled:border-sumi-500
39
- peer-focus-visible:ring-2
40
- peer-focus-visible:ring-offset-2
41
- peer-focus-visible:ring-wood-500
42
- `;
43
- return (_jsx("label", { htmlFor: restProps.id, className: cx(style, className), children: _jsxs("span", { className: "flex items-center", children: [_jsx("input", { className: styleInput, type: "checkbox", "aria-describedby": ctx.helperTextId, "aria-errormessage": ctx.errorMessageId, "aria-invalid": ctx.isInvalid ?? false, "aria-required": ctx.isRequired ?? false, ...restProps, ref: ref }), _jsx("span", { className: styleCheck, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", children: _jsx("path", { d: "m9.55 17.65-5.325-5.325 1.05-1.075 4.275 4.275 9.175-9.175 1.05 1.075Z" }) }) }), _jsx("span", { className: "peer-disabled:text-sumi-500", children: children })] }) }));
44
- });
45
- Checkbox.displayName = 'Checkbox';
46
- //# sourceMappingURL=Checkbox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC/C,IAAI,GAAG,CAAC,UAAU,EAAE;QAClB,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAA;KAC1B;IACD,IAAI,GAAG,CAAC,SAAS,EAAE;QACjB,SAAS,CAAC,IAAI,GAAG,GAAG,CAAC,SAAS,CAAA;KAC/B;IAED,MAAM,KAAK,GAAG;;;;;;KAMb,CAAA;IAED,MAAM,UAAU,GAAG;;;KAGlB,CAAA;IAED,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;KAiBlB,CAAA;IAED,OAAO,CACL,gBAAO,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAC3D,gBAAM,SAAS,EAAC,mBAAmB,aACjC,gBACE,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,sBACG,GAAG,CAAC,YAAY,uBACf,GAAG,CAAC,cAAc,kBACvB,GAAG,CAAC,SAAS,IAAI,KAAK,mBACrB,GAAG,CAAC,UAAU,IAAI,KAAK,KAClC,SAAS,EACb,GAAG,EAAE,GAAG,GACR,EACF,eAAM,SAAS,EAAE,UAAU,YACzB,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,YAC5D,eAAM,CAAC,EAAC,wEAAwE,GAAG,GAC/E,GACD,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAQ,IAC1D,GACD,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React from 'react';
3
- import { cx } from '../utils/class';
4
- import { ControllerContext } from './context';
5
- export const FieldsetControl = React.forwardRef((props, ref) => {
6
- const id = React.useId();
7
- const { labelText, className, helperText, errorMessage, isInvalid, isRequired, direction, children, ...restProps } = props;
8
- const groupName = restProps.name ?? `group-${id}`;
9
- const context = {
10
- groupName: groupName,
11
- helperTextId: `helper-text-${id}`,
12
- errorMessageId: `error-message-${id}`,
13
- isInvalid: isInvalid ?? false,
14
- isRequired: isRequired ?? false
15
- };
16
- const styleDirection = direction ?? 'flex-col';
17
- return (_jsx(ControllerContext.Provider, { value: context, children: _jsxs("fieldset", { className: cx('mb-4', className), ref: ref, ...restProps, children: [_jsx("legend", { children: _jsxs("p", { className: cx('block mb-2 text-label', isInvalid && 'text-sun-800'), children: [labelText, isRequired && _jsx("span", { className: "text-sun-800", children: "\u00A0*" })] }) }), _jsx("div", { className: cx('inline-flex', styleDirection), children: children }), helperText && (_jsx("p", { id: context.helperTextId, className: "text-sup text-sumi-700 mt-2", children: helperText })), isInvalid && (_jsx("p", { id: context.errorMessageId, className: cx('text-sup text-sun-800', helperText ? 'mt-1' : 'mt-2'), children: errorMessage }))] }) }));
18
- });
19
- FieldsetControl.displayName = 'FieldsetControl';
20
- //# sourceMappingURL=FieldsetControl.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FieldsetControl.js","sourceRoot":"","sources":["../../src/components/FieldsetControl.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAY7C,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IACxB,MAAM,EACJ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,EAAE,EAAE,CAAA;IAEjD,MAAM,OAAO,GAAG;QACd,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,eAAe,EAAE,EAAE;QACjC,cAAc,EAAE,iBAAiB,EAAE,EAAE;QACrC,SAAS,EAAE,SAAS,IAAI,KAAK;QAC7B,UAAU,EAAE,UAAU,IAAI,KAAK;KAChC,CAAA;IAED,MAAM,cAAc,GAAG,SAAS,IAAI,UAAU,CAAA;IAE9C,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YACxC,oBAAU,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,SAAS,aACjE,2BACE,aACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,IAAI,cAAc,CAAC,aAElE,SAAS,EACT,UAAU,IAAI,eAAM,SAAS,EAAC,cAAc,wBAAe,IAC1D,GACG,EACT,cAAK,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,YAAG,QAAQ,GAAO,EAClE,UAAU,IAAI,CACb,YAAG,EAAE,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,EAAC,6BAA6B,YACjE,UAAU,GACT,CACL,EACA,SAAS,IAAI,CACZ,YACE,EAAE,EAAE,OAAO,CAAC,cAAc,EAC1B,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAC7B,YAEA,YAAY,GACX,CACL,IACQ,GACgB,CAC9B,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA"}