@cieloazul310/digital-go-pandacss-preset 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +2083 -1181
  2. package/dist/index.d.cts.map +1 -1
  3. package/dist/index.d.mts.map +1 -1
  4. package/dist/index.mjs +2087 -1190
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +24 -22
package/dist/index.cjs CHANGED
@@ -1,5 +1,8 @@
1
- Object.defineProperty(exports, '__esModule', { value: true });
2
- //#region rolldown:runtime
1
+ Object.defineProperties(exports, {
2
+ __esModule: { value: true },
3
+ [Symbol.toStringTag]: { value: "Module" }
4
+ });
5
+ //#region \0rolldown/runtime.js
3
6
  var __create = Object.create;
4
7
  var __defProp = Object.defineProperty;
5
8
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,16 +10,12 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
7
10
  var __getProtoOf = Object.getPrototypeOf;
8
11
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
12
  var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
12
- key = keys[i];
13
- if (!__hasOwnProp.call(to, key) && key !== except) {
14
- __defProp(to, key, {
15
- get: ((k) => from[k]).bind(null, key),
16
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
17
- });
18
- }
19
- }
13
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
14
+ key = keys[i];
15
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
16
+ get: ((k) => from[k]).bind(null, key),
17
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
18
+ });
20
19
  }
21
20
  return to;
22
21
  };
@@ -24,18 +23,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
24
23
  value: mod,
25
24
  enumerable: true
26
25
  }) : target, mod));
27
-
28
26
  //#endregion
29
27
  let _pandacss_dev = require("@pandacss/dev");
30
28
  let _cieloazul310_digital_go_pandacss_plugin = require("@cieloazul310/digital-go-pandacss-plugin");
31
- _cieloazul310_digital_go_pandacss_plugin = __toESM(_cieloazul310_digital_go_pandacss_plugin);
29
+ _cieloazul310_digital_go_pandacss_plugin = __toESM(_cieloazul310_digital_go_pandacss_plugin, 1);
32
30
  let _cieloazul310_digital_go_pandacss_utils = require("@cieloazul310/digital-go-pandacss-utils");
33
31
  let _zag_js_accordion = require("@zag-js/accordion");
34
32
  let _zag_js_anatomy = require("@zag-js/anatomy");
35
33
  let _zag_js_checkbox = require("@zag-js/checkbox");
36
34
  let _zag_js_date_picker = require("@zag-js/date-picker");
35
+ let _zag_js_date_input = require("@zag-js/date-input");
37
36
  let _zag_js_collapsible = require("@zag-js/collapsible");
38
- let _zag_js_dialog = require("@zag-js/dialog");
37
+ let _zag_js_drawer = require("@zag-js/drawer");
39
38
  let _zag_js_file_upload = require("@zag-js/file-upload");
40
39
  let _zag_js_menu = require("@zag-js/menu");
41
40
  let _zag_js_progress = require("@zag-js/progress");
@@ -44,7 +43,6 @@ let _zag_js_select = require("@zag-js/select");
44
43
  let _zag_js_steps = require("@zag-js/steps");
45
44
  let _zag_js_tabs = require("@zag-js/tabs");
46
45
  let _zag_js_tree_view = require("@zag-js/tree-view");
47
-
48
46
  //#region src/recipes/accordion.ts
49
47
  /**
50
48
  * source:
@@ -57,6 +55,11 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
57
55
  base: {
58
56
  root: { colorPalette: "keyColor" },
59
57
  item: {
58
+ /**
59
+ * group/accordion border-b border-solid-gray-420
60
+ [--icon-size:calc(20/16*1rem)] desktop:[--icon-size:calc(32/16*1rem)]
61
+ ${className ?? ''}
62
+ */
60
63
  borderBottomWidth: "1px",
61
64
  borderBottomColor: "solid-gray.420",
62
65
  "--icon-size": {
@@ -65,8 +68,15 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
65
68
  }
66
69
  },
67
70
  itemTrigger: {
71
+ /**
72
+ * group/summary relative block cursor-default
73
+ */
68
74
  position: "relative",
69
75
  display: "block",
76
+ /**
77
+ * hover:bg-solid-gray-50
78
+ * focus-visible:bg-yellow-300
79
+ */
70
80
  bg: {
71
81
  base: "transparent",
72
82
  _hover: "solid-gray.50",
@@ -88,7 +98,14 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
88
98
  md: 4
89
99
  },
90
100
  cursor: { _hover: "pointer" },
101
+ /**
102
+ * marker:[content:'']
103
+ [&::-webkit-details-marker]:hidden
104
+ */
91
105
  "&::marker": { content: "\"\"" },
106
+ /**
107
+ * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
108
+ */
92
109
  _focusVisible: {
93
110
  rounded: 4,
94
111
  outlineStyle: "solid",
@@ -97,10 +114,19 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
97
114
  outlineOffset: .5,
98
115
  focusBox: "calc({spacing.1} / 2)"
99
116
  },
117
+ /**
118
+ * remove button style
119
+ */
100
120
  textAlign: "start",
101
121
  width: "full"
102
122
  },
103
123
  itemIndicator: {
124
+ /**
125
+ * absolute top-2 left-0.5
126
+ * desktop:top-3.5 desktop:left-1.5
127
+ * size-[var(--icon-size)]
128
+ * mt-[calc((1lh-var(--icon-size))/2)]
129
+ */
104
130
  position: "absolute",
105
131
  top: {
106
132
  base: 2,
@@ -113,11 +139,23 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
113
139
  width: "var(--icon-size)",
114
140
  height: "var(--icon-size)",
115
141
  mt: "calc((1lh - var(--icon-size)) / 2)",
142
+ /**
143
+ * inline-flex items-center justify-center
144
+ */
116
145
  display: "inline-flex",
117
146
  alignItems: "center",
118
147
  justifyContent: "center",
148
+ /**
149
+ * bg-white text-blue-1000
150
+ */
119
151
  bg: "white",
120
152
  color: "colorPalette.primary.100",
153
+ /**
154
+ * border border-current rounded-full
155
+ * group-hover/summary:outline group-hover/summary:outline-2
156
+ * group-hover/summary:outline-current
157
+ * group-open/accordion:rotate-180
158
+ */
121
159
  borderWidth: "1px",
122
160
  borderColor: "currentcolor",
123
161
  rounded: "full",
@@ -137,6 +175,10 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
137
175
  }
138
176
  },
139
177
  itemContent: {
178
+ /**
179
+ * pl-[calc(var(--icon-size)+(12/16*1rem))] pr-2 py-4
180
+ desktop:pl-[calc(var(--icon-size)+(20/16*1rem))] desktop:pr-4 desktop:py-6
181
+ */
140
182
  pl: {
141
183
  base: "calc(var(--icon-size) + {spacing.3})",
142
184
  md: "calc(var(--icon-size) + {spacing.5})"
@@ -152,12 +194,19 @@ var accordion_default = (0, _pandacss_dev.defineSlotRecipe)({
152
194
  }
153
195
  }
154
196
  });
155
-
156
197
  //#endregion
157
198
  //#region src/recipes/blockquote.ts
158
199
  var blockquote_default = (0, _pandacss_dev.defineRecipe)({
159
200
  className: "blockquote",
160
201
  base: {
202
+ /**
203
+ * margin: 0 calc(40 / 16 * 1rem);
204
+ * border-left: 8px solid var(--color-neutral-solid-gray-536);
205
+ * padding-top: calc(8 / 16 * 1rem);
206
+ * padding-right: calc(16 / 16 * 1rem);
207
+ * padding-bottom: calc(8 / 16 * 1rem);
208
+ * padding-left: calc(24 / 16 * 1rem);
209
+ */
161
210
  my: 0,
162
211
  mx: 10,
163
212
  borderLeftWidth: "8px",
@@ -170,7 +219,6 @@ var blockquote_default = (0, _pandacss_dev.defineRecipe)({
170
219
  "& > *:last-child": { mb: 0 }
171
220
  }
172
221
  });
173
-
174
222
  //#endregion
175
223
  //#region src/anatomy.ts
176
224
  /**
@@ -195,7 +243,6 @@ const menuListAnatomy = (0, _zag_js_anatomy.createAnatomy)("menu-list").parts("r
195
243
  const notificationBannerAnatomy = (0, _zag_js_anatomy.createAnatomy)("notification-banner").parts("root", "icon", "close", "header", "heading", "body", "actions");
196
244
  const resourceListAnatomy = (0, _zag_js_anatomy.createAnatomy)("resource-list").parts("root", "main", "action", "content", "title");
197
245
  const tableAnatomy = (0, _zag_js_anatomy.createAnatomy)("table").parts("root", "head", "body", "foot", "row", "header", "cell", "colgroup", "col", "caption");
198
-
199
246
  //#endregion
200
247
  //#region src/recipes/link.ts
201
248
  /**
@@ -206,6 +253,10 @@ var link_default = (0, _pandacss_dev.defineRecipe)({
206
253
  className: "link",
207
254
  description: "リンクテキストは通常、色や下線などの視覚的な表現で通常のテキストと区別され、URLと関連づけられたテキスト文字列です。この関連付けをハイパーリンクと呼び、これはウェブをウェブたらしめている基本的な概念のひとつです。",
208
255
  base: {
256
+ /**
257
+ * text-blue-1000 visited:text-magenta-900 hover:text-blue-1000
258
+ * focus-visible:text-blue-1000 active:text-orange-700
259
+ */
209
260
  colorPalette: "blue",
210
261
  color: {
211
262
  base: "colorPalette.primary.100",
@@ -214,10 +265,17 @@ var link_default = (0, _pandacss_dev.defineRecipe)({
214
265
  _focusVisible: "colorPalette.primary.100",
215
266
  _active: "orange.800"
216
267
  },
268
+ /**
269
+ * focus-visible:bg-yellow-300
270
+ */
217
271
  bg: {
218
272
  base: "transparent",
219
273
  _focusVisible: "yellow.300"
220
274
  },
275
+ /**
276
+ * underline underline-offset-[calc(3/16*1rem)] hover:decoration-[calc(3/16*1rem)]
277
+ * active:decoration-1
278
+ */
221
279
  textDecoration: "underline",
222
280
  textDecorationThickness: {
223
281
  base: "1px",
@@ -225,6 +283,12 @@ var link_default = (0, _pandacss_dev.defineRecipe)({
225
283
  _active: "1px"
226
284
  },
227
285
  textUnderlineOffset: "calc(3 / 16 * 1rem)",
286
+ /**
287
+ * focus-visible:rounded-4
288
+ * focus-visible:outline focus-visible:outline-4
289
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
290
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
291
+ */
228
292
  _focusVisible: {
229
293
  rounded: 4,
230
294
  outlineStyle: "solid",
@@ -233,6 +297,9 @@ var link_default = (0, _pandacss_dev.defineRecipe)({
233
297
  outlineOffset: .5,
234
298
  focusBox: "calc({spacing.1} / 2)"
235
299
  },
300
+ /**
301
+ * with icon
302
+ */
236
303
  "& > svg": {
237
304
  display: "inline",
238
305
  ml: 1,
@@ -242,7 +309,6 @@ var link_default = (0, _pandacss_dev.defineRecipe)({
242
309
  }
243
310
  }
244
311
  });
245
-
246
312
  //#endregion
247
313
  //#region src/recipes/breadcrumb.ts
248
314
  /**
@@ -254,19 +320,42 @@ var breadcrumb_default = (0, _pandacss_dev.defineSlotRecipe)({
254
320
  description: "パンくずリストは、ウェブサイトの階層内でユーザーの現在の位置を表示します。",
255
321
  slots: breadcrumbAnatomy.keys(),
256
322
  base: {
257
- root: { "--icon-size": "16px" },
323
+ root: {
324
+ /**
325
+ * icon
326
+ */
327
+ "--icon-size": "16px" },
258
328
  label: {
259
329
  srOnly: true,
260
330
  textStyle: "oln-16N-100"
261
331
  },
262
- list: { display: "inline" },
332
+ list: {
333
+ /**
334
+ * inline
335
+ */
336
+ display: "inline" },
263
337
  item: {
338
+ /**
339
+ * inline break-words text-oln-16N-100
340
+ */
264
341
  display: "inline",
265
342
  overflowWrap: "break-word",
266
343
  textStyle: "oln-16N-100"
267
344
  },
268
345
  link: {
346
+ /**
347
+ * text-blue-1000 text-oln-16N-100 underline underline-offset-[calc(3/16*1rem)]
348
+ * hover:text-blue-900 hover:decoration-[calc(3/16*1rem)]
349
+ * active:text-orange-700 active:decoration-1
350
+ * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
351
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
352
+ * focus-visible:bg-yellow-300 focus-visible:text-blue-1000
353
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
354
+ */
269
355
  ...link_default.base,
356
+ /**
357
+ * icon
358
+ */
270
359
  "& svg": {
271
360
  display: "inline",
272
361
  width: "var(--icon-size)",
@@ -275,6 +364,9 @@ var breadcrumb_default = (0, _pandacss_dev.defineSlotRecipe)({
275
364
  }
276
365
  },
277
366
  separator: {
367
+ /**
368
+ * mx-2 inline
369
+ */
278
370
  mx: 2,
279
371
  display: "inline-flex",
280
372
  width: "12px",
@@ -287,7 +379,6 @@ var breadcrumb_default = (0, _pandacss_dev.defineSlotRecipe)({
287
379
  }
288
380
  }
289
381
  });
290
-
291
382
  //#endregion
292
383
  //#region src/recipes/button.ts
293
384
  /**
@@ -299,7 +390,15 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
299
390
  description: "ボタンは、主にアクション実行またはページ遷移のためのトリガーとして使用します。画面内におけるボタンの重要度に応じて使い分け可能な複数のスタイルがあります。",
300
391
  base: {
301
392
  colorPalette: "keyColor",
393
+ /**
394
+ * underline-offset-[calc(3/16*1rem)]
395
+ */
302
396
  textUnderlineOffset: "calc(3 / 16 * 1rem)",
397
+ /**
398
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
399
+ * focus-visible:outline-offset-[calc(2/16*1rem)]
400
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
401
+ */
303
402
  _focusVisible: {
304
403
  outlineStyle: "solid",
305
404
  outlineWidth: "4px",
@@ -307,7 +406,13 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
307
406
  outlineOffset: .5,
308
407
  focusBox: "calc({spacing.1} / 2)"
309
408
  },
409
+ /**
410
+ * aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
411
+ */
310
412
  _disabled: { pointerEvents: "none" },
413
+ /**
414
+ * button default
415
+ */
311
416
  display: "inline-flex",
312
417
  columnGap: 1,
313
418
  textAlign: "center",
@@ -319,6 +424,10 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
319
424
  variants: {
320
425
  variant: {
321
426
  "solid-fill": {
427
+ /**
428
+ * text-white aria-disabled:text-solid-gray-50
429
+ * bg-blue-900 hover:bg-blue-1000 active:bg-blue-1200 aria-disabled:bg-solid-gray-300
430
+ */
322
431
  bg: {
323
432
  base: "colorPalette.primary",
324
433
  _hover: "colorPalette.primary.100",
@@ -329,6 +438,10 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
329
438
  base: "white",
330
439
  _disabled: "solid-gray.50"
331
440
  },
441
+ /**
442
+ * border-4 border-double border-transparent
443
+ * hover:underline active:underline
444
+ */
332
445
  borderWidth: "4px",
333
446
  borderStyle: "double",
334
447
  borderColor: "transparent",
@@ -339,6 +452,11 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
339
452
  }
340
453
  },
341
454
  outline: {
455
+ /**
456
+ * bg-white hover:bg-blue-200 active:bg-blue-300 aria-disabled:bg-white
457
+ * text-blue-900 hover:text-blue-1000 active:text-blue-1200
458
+ * aria-disabled:text-solid-gray-300
459
+ */
342
460
  bg: {
343
461
  base: "white",
344
462
  _hover: "colorPalette.200",
@@ -351,6 +469,9 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
351
469
  _active: "colorPalette.primary.300",
352
470
  _disabled: "solid-gray.300"
353
471
  },
472
+ /**
473
+ * border border-current hover:underline active:underline
474
+ */
354
475
  borderWidth: "1px",
355
476
  borderColor: "currentcolor",
356
477
  textDecoration: {
@@ -360,6 +481,13 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
360
481
  }
361
482
  },
362
483
  text: {
484
+ /**
485
+ *
486
+ * hover:bg-blue-50 active:bg-blue-100 focus-visible:bg-yellow-300
487
+ * aria-disabled:bg-transparent aria-disabled:focus-visible:bg-yellow-300
488
+ * text-blue-900 hover:text-blue-1000 active:text-blue-1200
489
+ * aria-disabled:text-solid-gray-300
490
+ */
363
491
  bg: {
364
492
  base: "transparent",
365
493
  _hover: "colorPalette.bg",
@@ -376,6 +504,9 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
376
504
  _active: "colorPalette.primary.300",
377
505
  _disabled: "solid-gray.300"
378
506
  },
507
+ /**
508
+ * hover:decoration-[calc(3/16*1rem)] underline
509
+ */
379
510
  textDecoration: "underline",
380
511
  textDecorationThickness: {
381
512
  base: "1px",
@@ -385,6 +516,9 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
385
516
  },
386
517
  size: {
387
518
  lg: {
519
+ /**
520
+ * lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-8 px-4 py-3 text-oln-16B-100'
521
+ */
388
522
  minWidth: "calc({spacing.1} * 34)",
389
523
  minHeight: 14,
390
524
  rounded: 8,
@@ -393,6 +527,9 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
393
527
  textStyle: "oln-16B-100"
394
528
  },
395
529
  md: {
530
+ /**
531
+ * md: 'min-w-24 min-h-12 rounded-8 px-4 py-2 text-oln-16B-100',
532
+ */
396
533
  minWidth: 24,
397
534
  minHeight: 12,
398
535
  textStyle: "oln-16B-100",
@@ -401,6 +538,9 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
401
538
  rounded: 8
402
539
  },
403
540
  sm: {
541
+ /**
542
+ * sm: 'relative min-w-20 min-h-9 rounded-6 px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
543
+ */
404
544
  position: "relative",
405
545
  minWidth: 20,
406
546
  minHeight: 9,
@@ -417,6 +557,9 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
417
557
  }
418
558
  },
419
559
  xs: {
560
+ /**
561
+ * xs: 'relative min-w-18 min-h-7 rounded-4 px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
562
+ */
420
563
  minWidth: 18,
421
564
  minHeight: 7,
422
565
  textStyle: "oln-14B-100",
@@ -438,7 +581,6 @@ var button_default = (0, _pandacss_dev.defineRecipe)({
438
581
  size: "md"
439
582
  }
440
583
  });
441
-
442
584
  //#endregion
443
585
  //#region src/recipes/card.ts
444
586
  var card_default = (0, _pandacss_dev.defineSlotRecipe)({
@@ -548,7 +690,6 @@ var card_default = (0, _pandacss_dev.defineSlotRecipe)({
548
690
  asLink: false
549
691
  }
550
692
  });
551
-
552
693
  //#endregion
553
694
  //#region src/recipes/checkbox.ts
554
695
  var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
@@ -564,6 +705,10 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
564
705
  colorPalette: "keyColor"
565
706
  },
566
707
  control: {
708
+ /**
709
+ * flex items-center justify-center shrink-0 rounded-[calc(1/8*100%)]
710
+ * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
711
+ */
567
712
  flexShrink: 0,
568
713
  rounded: "calc(2 / 18 * 100%)",
569
714
  borderWidth: "2px",
@@ -594,6 +739,11 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
594
739
  focusBox: "calc({spacing.1} / 2)"
595
740
  }
596
741
  },
742
+ /**
743
+ * focus:outline focus:outline-4 focus:outline-black
744
+ * focus:outline-offset-[calc(2/16*1rem)]
745
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
746
+ */
597
747
  _focus: {
598
748
  outlineStyle: "solid",
599
749
  outlineWidth: "4px",
@@ -603,22 +753,41 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
603
753
  }
604
754
  },
605
755
  indicator: {
756
+ /**
757
+ * appearance-none size-3/4 rounded-[calc(2/18*100%)]
758
+ */
606
759
  appearance: "none",
607
760
  width: "full",
608
761
  height: "full",
609
762
  zIndex: 1,
610
763
  bg: {
764
+ /**
765
+ * bg-white
766
+ */
611
767
  base: "white",
768
+ /**
769
+ * checked:bg-blue-900 checked:hover:bg-blue-1100
770
+ * forced-colors:checked:!bg-[Highlight]
771
+ */
612
772
  _checked: {
613
773
  base: "colorPalette.primary",
614
774
  _hover: "colorPalette.primary.200",
615
775
  _highContrast: "Highlight"
616
776
  },
617
777
  _indeterminate: {
778
+ /**
779
+ * indeterminate:bg-blue-900 indeterminate:hover:bg-blue-1100
780
+ * forced-colors:indeterminate:!bg-[Highlight]
781
+ */
618
782
  base: "colorPalette.primary",
619
783
  _hover: "colorPalette.primary.200",
620
784
  _highContrast: "Highlight"
621
785
  },
786
+ /**
787
+ * data-[error]:indeterminate:bg-error-1
788
+ * data-[error]:indeterminate:hover:bg-red-1000
789
+ * data-[error]:checked:bg-error-1 data-[error]:checked:hover:bg-red-1000
790
+ */
622
791
  _invalid: {
623
792
  _indeterminate: {
624
793
  base: "error.1",
@@ -631,6 +800,12 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
631
800
  _disabled: "solid-gray.300"
632
801
  }
633
802
  },
803
+ /**
804
+ * aria-disabled:!bg-solid-gray-50
805
+ * aria-disabled:checked:!bg-solid-gray-300
806
+ * aria-disabled:indeterminate:!bg-solid-gray-300
807
+ * forced-colors:aria-disabled:checked:!bg-[GrayText]
808
+ */
634
809
  _disabled: {
635
810
  base: "solid-gray.50",
636
811
  _checked: "solid-gray.300",
@@ -638,7 +813,17 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
638
813
  _highContrast: { _checked: "GrayText" }
639
814
  }
640
815
  },
816
+ /**
817
+ * bg-clip-padding
818
+ */
641
819
  backgroundClip: "padding-box",
820
+ /**
821
+ * before:hidden checked:before:block indeterminate:before:block
822
+ * before:size-3.5
823
+ * before:bg-white
824
+ * forced-colors:before:!bg-[HighlightText]
825
+ * aria-disabled:before:border-solid-gray-50
826
+ */
642
827
  _before: {
643
828
  content: "\"\"",
644
829
  display: "none",
@@ -650,6 +835,10 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
650
835
  },
651
836
  borderColor: { _disabled: "solid-gray.50" }
652
837
  },
838
+ /**
839
+ * checked:before:[clip-path:path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')]
840
+ * indeterminate:before:[clip-path:path('M3.25,7.75H10.75V6.25H3.25V7.75Z')]
841
+ */
653
842
  _checked: { _before: {
654
843
  display: "block",
655
844
  clipPath: "path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')"
@@ -706,7 +895,6 @@ var checkbox_default = (0, _pandacss_dev.defineSlotRecipe)({
706
895
  } },
707
896
  defaultVariants: { size: "sm" }
708
897
  });
709
-
710
898
  //#endregion
711
899
  //#region src/recipes/chip-label.ts
712
900
  var chip_label_default = (0, _pandacss_dev.defineRecipe)({
@@ -748,7 +936,6 @@ var chip_label_default = (0, _pandacss_dev.defineRecipe)({
748
936
  } },
749
937
  defaultVariants: { variant: "text" }
750
938
  });
751
-
752
939
  //#endregion
753
940
  //#region src/recipes/chip-tag.ts
754
941
  const buttonCommon = {
@@ -816,7 +1003,6 @@ var chip_tag_default = (0, _pandacss_dev.defineSlotRecipe)({
816
1003
  }
817
1004
  }
818
1005
  });
819
-
820
1006
  //#endregion
821
1007
  //#region src/recipes/label.ts
822
1008
  /**
@@ -826,6 +1012,9 @@ var chip_tag_default = (0, _pandacss_dev.defineSlotRecipe)({
826
1012
  var label_default = (0, _pandacss_dev.defineRecipe)({
827
1013
  className: "label",
828
1014
  base: {
1015
+ /**
1016
+ * flex w-fit items-center gap-2 text-solid-gray-800
1017
+ */
829
1018
  display: "flex",
830
1019
  width: "fit-content",
831
1020
  alignItems: "center",
@@ -833,13 +1022,15 @@ var label_default = (0, _pandacss_dev.defineRecipe)({
833
1022
  color: "solid-gray.800"
834
1023
  },
835
1024
  variants: { size: {
1025
+ /**
1026
+ * data-[size=sm]:text-std-16B-170 data-[size=md]:text-std-17B-170 data-[size=lg]:text-std-18B-160
1027
+ */
836
1028
  sm: { textStyle: "std-16B-170" },
837
1029
  md: { textStyle: "std-17B-170" },
838
1030
  lg: { textStyle: "std-18B-160" }
839
1031
  } },
840
1032
  defaultVariants: { size: "md" }
841
1033
  });
842
-
843
1034
  //#endregion
844
1035
  //#region src/recipes/input.ts
845
1036
  /**
@@ -850,10 +1041,19 @@ var input_default = (0, _pandacss_dev.defineRecipe)({
850
1041
  className: "input",
851
1042
  description: "インプットテキストコンポーネントは、名前や電話番号など、1行以内のテキストを入力する場合に使用します。",
852
1043
  base: {
1044
+ /**
1045
+ * max-w-full px-4 py-3 rounded-8
1046
+ */
853
1047
  maxWidth: "full",
854
1048
  rounded: 8,
855
1049
  px: 4,
856
1050
  py: 3,
1051
+ /**
1052
+ * border border-solid-gray-600 hover:border-black
1053
+ * aria-disabled:border-solid-gray-300
1054
+ * aria-disabled:forced-colors:border-[GrayText]
1055
+ * aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
1056
+ */
857
1057
  borderStyle: {
858
1058
  base: "solid",
859
1059
  _readOnly: "dashed"
@@ -871,6 +1071,12 @@ var input_default = (0, _pandacss_dev.defineRecipe)({
871
1071
  _hover: "red.1000"
872
1072
  }
873
1073
  },
1074
+ /**
1075
+ * bg-white text-oln-16N-100 text-solid-gray-800
1076
+ * aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
1077
+ * aria-disabled:forced-colors:text-[GrayText]
1078
+ *
1079
+ */
874
1080
  bg: {
875
1081
  base: "white",
876
1082
  _disabled: "solid-gray.50"
@@ -883,6 +1089,11 @@ var input_default = (0, _pandacss_dev.defineRecipe)({
883
1089
  }
884
1090
  },
885
1091
  textStyle: "oln-16N-100",
1092
+ /**
1093
+ * focus:outline focus:outline-4 focus:outline-black
1094
+ * focus:outline-offset-[calc(2/16*1rem)]
1095
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
1096
+ */
886
1097
  _focus: {
887
1098
  outlineStyle: "solid",
888
1099
  outlineWidth: "4px",
@@ -890,19 +1101,24 @@ var input_default = (0, _pandacss_dev.defineRecipe)({
890
1101
  outlineOffset: .5,
891
1102
  focusBox: "calc({spacing.1} / 2)"
892
1103
  },
1104
+ /**
1105
+ * aria-disabled:pointer-events-none
1106
+ */
893
1107
  pointerEvents: {
894
1108
  base: "inherit",
895
1109
  _disabled: "none"
896
1110
  }
897
1111
  },
898
1112
  variants: { size: {
1113
+ /**
1114
+ * data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
1115
+ */
899
1116
  sm: { height: 10 },
900
1117
  md: { height: 12 },
901
1118
  lg: { height: 14 }
902
1119
  } },
903
1120
  defaultVariants: { size: "lg" }
904
1121
  });
905
-
906
1122
  //#endregion
907
1123
  //#region src/recipes/select-box.ts
908
1124
  /**
@@ -913,6 +1129,11 @@ var select_box_default = (0, _pandacss_dev.defineRecipe)({
913
1129
  className: "select-box",
914
1130
  description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
915
1131
  base: {
1132
+ /**
1133
+ * w-full pl-4 pr-10 py-[calc(11/16*1rem)]
1134
+ * appearance-none rounded-8
1135
+ * aria-disabled:pointer-events-none
1136
+ */
916
1137
  width: "full",
917
1138
  appearance: "none",
918
1139
  pl: 4,
@@ -923,6 +1144,11 @@ var select_box_default = (0, _pandacss_dev.defineRecipe)({
923
1144
  base: "inherit",
924
1145
  _disabled: "none"
925
1146
  },
1147
+ /**
1148
+ * bg-white text-oln-16N-100 text-solid-gray-800
1149
+ * aria-disabled:text-solid-gray-420
1150
+ * aria-disabled:forced-colors:text-[GrayText]
1151
+ */
926
1152
  bg: {
927
1153
  base: "white",
928
1154
  _disabled: "solid-gray.50"
@@ -932,6 +1158,12 @@ var select_box_default = (0, _pandacss_dev.defineRecipe)({
932
1158
  _disabled: "solid-gray.420"
933
1159
  },
934
1160
  textStyle: "oln-16N-100",
1161
+ /**
1162
+ * border border-solid-gray-600 hover:border-black
1163
+ * aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50
1164
+ * aria-disabled:forced-colors:border-[GrayText]
1165
+ * aria-[invalid=true]:border-error-1aria-[invalid=true]:hover:border-red-1000
1166
+ */
935
1167
  borderWidth: "1px",
936
1168
  borderColor: {
937
1169
  base: "solid-gray.900",
@@ -941,7 +1173,13 @@ var select_box_default = (0, _pandacss_dev.defineRecipe)({
941
1173
  _hover: "red.1000"
942
1174
  }
943
1175
  },
1176
+ /**
1177
+ * remove button style
1178
+ */
944
1179
  textAlign: "start",
1180
+ /**
1181
+ * focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
1182
+ */
945
1183
  _focus: {
946
1184
  outlineStyle: "solid",
947
1185
  outlineWidth: "4px",
@@ -951,12 +1189,14 @@ var select_box_default = (0, _pandacss_dev.defineRecipe)({
951
1189
  }
952
1190
  },
953
1191
  variants: { size: {
1192
+ /**
1193
+ * data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
1194
+ */
954
1195
  sm: { height: 10 },
955
1196
  md: { height: 12 },
956
1197
  lg: { height: 14 }
957
1198
  } }
958
1199
  });
959
-
960
1200
  //#endregion
961
1201
  //#region src/recipes/date-picker.ts
962
1202
  var date_picker_default = (0, _pandacss_dev.defineSlotRecipe)({
@@ -976,6 +1216,9 @@ var date_picker_default = (0, _pandacss_dev.defineSlotRecipe)({
976
1216
  p: 4
977
1217
  },
978
1218
  content: {
1219
+ /**
1220
+ * border border-solid-gray-420 bg-white shadow-1 rounded-8 focus:outline-0
1221
+ */
979
1222
  bg: "white",
980
1223
  shadow: 1,
981
1224
  rounded: 8,
@@ -1003,18 +1246,41 @@ var date_picker_default = (0, _pandacss_dev.defineSlotRecipe)({
1003
1246
  width: "fit-content"
1004
1247
  },
1005
1248
  table: {
1249
+ /**
1250
+ * mx-3 mb-2
1251
+ */
1006
1252
  mx: 3,
1007
1253
  mb: 2
1008
1254
  },
1009
- tableHead: { "& th": { p: 0 } },
1255
+ tableHead: {
1256
+ /**
1257
+ * [&_th]:p-0
1258
+ */
1259
+ "& th": { p: 0 } },
1010
1260
  tableHeader: {
1261
+ /**
1262
+ * size-12 text-center font-bold
1263
+ */
1011
1264
  width: 12,
1012
1265
  height: 12,
1013
1266
  textAlign: "center",
1014
1267
  fontWeight: "bold"
1015
1268
  },
1016
- tableBody: { "& td": { p: 0 } },
1269
+ tableBody: {
1270
+ /**
1271
+ * [&_td]:p-0
1272
+ */
1273
+ "& td": { p: 0 } },
1017
1274
  tableCellTrigger: {
1275
+ /**
1276
+ * m-1 flex items-center justify-center size-10 rounded-full
1277
+ * underline-offset-[calc(3/16*1rem)] hover:bg-solid-gray-50 hover:underline
1278
+ * data-[selected]:!bg-blue-900 data-[selected]:border
1279
+ * data-[selected]:border-transparent data-[selected]:text-white
1280
+ * focus-visible:bg-yellow-300 focus-visible:outline focus-visible:outline-4
1281
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
1282
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
1283
+ */
1018
1284
  m: 1,
1019
1285
  display: "flex",
1020
1286
  alignItems: "center",
@@ -1046,7 +1312,70 @@ var date_picker_default = (0, _pandacss_dev.defineSlotRecipe)({
1046
1312
  }
1047
1313
  }
1048
1314
  });
1049
-
1315
+ //#endregion
1316
+ //#region src/recipes/date-input.ts
1317
+ var date_input_default = (0, _pandacss_dev.defineSlotRecipe)({
1318
+ className: "date-input",
1319
+ description: "日付入力は、日付を分割形式で入力できるフォームコントロールです。",
1320
+ slots: _zag_js_date_input.anatomy.keys(),
1321
+ base: {
1322
+ root: {
1323
+ /**
1324
+ * inline-flex h-14 -space-x-1 rounded-8 border border-solid-gray-600 bg-[--bg] p-0.5 pe-0 text-solid-gray-900 [--bg:theme(colors.white)] focus-within:border-black hover:border-solid-gray-900 data-[size=md]:h-12 data-[size=sm]:h-10 data-[readonly]:border-dashed data-[disabled]:border-solid-gray-300 data-[error]:border-error-1 data-[disabled]:text-solid-gray-420 data-[disabled]:[--bg:theme(colors.solid-gray.50)] data-[error]:focus-within:border-red-1000 data-[error]:hover:border-red-1000 data-[error]:hover:data-[readonly]:border-error-1 hover:data-[readonly]:border-solid-gray-600 forced-colors:data-[disabled]:border-[GrayText] forced-colors:data-[disabled]:text-[GrayText] ${className ?? ''}
1325
+ */
1326
+ display: "flex",
1327
+ flexDirection: "column",
1328
+ gap: 1.5
1329
+ },
1330
+ label: { ...label_default.base },
1331
+ control: {
1332
+ display: "flex",
1333
+ alignItems: "center",
1334
+ gap: 2
1335
+ },
1336
+ segmentGroup: {
1337
+ display: "flex",
1338
+ alignItems: "center",
1339
+ gap: 1,
1340
+ borderWidth: "1px",
1341
+ borderStyle: "solid",
1342
+ borderColor: "solid-gray.600",
1343
+ rounded: 8,
1344
+ py: 2,
1345
+ px: 3,
1346
+ bg: "white"
1347
+ },
1348
+ segment: {
1349
+ ...input_default.base,
1350
+ borderWidth: "0px",
1351
+ bg: "transparent",
1352
+ px: 0,
1353
+ minWidth: 10,
1354
+ width: {
1355
+ "&[data-type=year]": 16,
1356
+ "&[data-type=month]": 11,
1357
+ "&[data-type=day]": 11
1358
+ },
1359
+ textAlign: "right"
1360
+ },
1361
+ hiddenInput: { display: "none" }
1362
+ },
1363
+ variants: {
1364
+ variant: {
1365
+ consolidated: {},
1366
+ separated: {}
1367
+ },
1368
+ size: {
1369
+ sm: {},
1370
+ md: {},
1371
+ lg: {}
1372
+ }
1373
+ },
1374
+ defaultVariants: {
1375
+ variant: "consolidated",
1376
+ size: "lg"
1377
+ }
1378
+ });
1050
1379
  //#endregion
1051
1380
  //#region src/recipes/description-list.ts
1052
1381
  /**
@@ -1064,19 +1393,39 @@ var description_list_default = (0, _pandacss_dev.defineSlotRecipe)({
1064
1393
  ],
1065
1394
  base: {
1066
1395
  root: {
1396
+ /**
1397
+ * margin-top: calc(16 / 16 * 1rem);
1398
+ * margin-bottom: calc(16 / 16 * 1rem);
1399
+ * display: grid;
1400
+ * gap: calc(8 / 16 * 1rem) 0;
1401
+ * overflow-wrap: anywhere;
1402
+ */
1067
1403
  mt: 4,
1068
1404
  mb: 4,
1069
1405
  display: "grid",
1070
1406
  rowGap: 2,
1071
1407
  overflowWrap: "anywhere"
1072
1408
  },
1073
- term: { fontWeight: "bold" },
1409
+ term: {
1410
+ /**
1411
+ * font-weight: bold;
1412
+ */
1413
+ fontWeight: "bold" },
1074
1414
  marker: { display: "none" },
1075
- description: { ml: 8 }
1415
+ description: {
1416
+ /**
1417
+ * margin-left: calc(32 / 16 * 1rem);
1418
+ */
1419
+ ml: 8 }
1076
1420
  },
1077
1421
  variants: { marker: {
1078
1422
  none: {},
1079
1423
  bullet: { term: {
1424
+ /**
1425
+ * margin-left: calc(32 / 16 * 1rem);
1426
+ * display: list-item;
1427
+ * list-style-type: disc;
1428
+ */
1080
1429
  ml: 8,
1081
1430
  display: "list-item",
1082
1431
  listStyleType: "disc"
@@ -1089,7 +1438,6 @@ var description_list_default = (0, _pandacss_dev.defineSlotRecipe)({
1089
1438
  } },
1090
1439
  defaultVariants: { marker: "none" }
1091
1440
  });
1092
-
1093
1441
  //#endregion
1094
1442
  //#region src/recipes/disclosure.ts
1095
1443
  /**
@@ -1101,8 +1449,19 @@ var disclosure_default = (0, _pandacss_dev.defineSlotRecipe)({
1101
1449
  description: "ディスクロージャーは、コンテンツのセクション内の任意の範囲を折りたたむことができるユーザーインターフェースです。※セクション単位で折りたたみ表示をする場合は「アコーディオン」コンポーネントを使用してください。",
1102
1450
  slots: _zag_js_collapsible.anatomy.extendWith("indicator").keys(),
1103
1451
  base: {
1104
- root: { colorPalette: "keyColor" },
1452
+ root: {
1453
+ /**
1454
+ * group/disclosure
1455
+ */
1456
+ colorPalette: "keyColor" },
1105
1457
  trigger: {
1458
+ /**
1459
+ * group/summary
1460
+ * [&::-webkit-details-marker]:hidden
1461
+ */
1462
+ /**
1463
+ * flex w-fit cursor-default list-none items-start justify-start gap-2
1464
+ */
1106
1465
  display: "flex",
1107
1466
  width: "fit-content",
1108
1467
  cursor: "default",
@@ -1110,11 +1469,23 @@ var disclosure_default = (0, _pandacss_dev.defineSlotRecipe)({
1110
1469
  alignItems: "start",
1111
1470
  justifyContent: "start",
1112
1471
  gap: 2,
1472
+ /**
1473
+ * remove button style
1474
+ */
1113
1475
  textAlign: "start",
1476
+ /**
1477
+ * hover:underline hover:underline-offset-[calc(3/16*1rem)]
1478
+ */
1114
1479
  _hover: {
1115
1480
  textDecoration: "underline",
1116
1481
  textUnderlineOffset: "calc(3 / 16 * 1rem)"
1117
1482
  },
1483
+ /**
1484
+ * focus-visible:rounded-4 focus-visible:outline focus-visible:outline-4
1485
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
1486
+ * focus-visible:bg-yellow-300
1487
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
1488
+ */
1118
1489
  _focusVisible: {
1119
1490
  rounded: 4,
1120
1491
  bg: "yellow.300",
@@ -1153,7 +1524,6 @@ var disclosure_default = (0, _pandacss_dev.defineSlotRecipe)({
1153
1524
  content: {}
1154
1525
  }
1155
1526
  });
1156
-
1157
1527
  //#endregion
1158
1528
  //#region src/recipes/divider.ts
1159
1529
  /**
@@ -1170,7 +1540,6 @@ var divider_default = (0, _pandacss_dev.defineRecipe)({
1170
1540
  } },
1171
1541
  defaultVariants: { color: "gray-420" }
1172
1542
  });
1173
-
1174
1543
  //#endregion
1175
1544
  //#region src/recipes/drawer.ts
1176
1545
  /**
@@ -1178,13 +1547,16 @@ var divider_default = (0, _pandacss_dev.defineRecipe)({
1178
1547
  * https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Drawer/Drawer.stories.tsx
1179
1548
  * https://github.com/cschroeter/park-ui/blob/main/packages/preset/src/theme/recipes/drawer.ts
1180
1549
  */
1181
- const anatomy = _zag_js_dialog.anatomy.extendWith("header", "body", "footer");
1550
+ const anatomy = _zag_js_drawer.anatomy.extendWith("header", "body", "footer");
1182
1551
  var drawer_default = (0, _pandacss_dev.defineSlotRecipe)({
1183
1552
  className: "drawer",
1184
1553
  description: "ブラウザ画面の四辺(上下左右端)から展開し、モバイルメニューなどのコンポーネントを格納可能なコンテナです。",
1185
1554
  slots: anatomy.keys(),
1186
1555
  base: {
1187
1556
  backdrop: {
1557
+ /**
1558
+ * backdrop:bg-opacity-gray-100 forced-colors:backdrop:bg-[#000b]
1559
+ */
1188
1560
  backdropFilter: "blur(4px)",
1189
1561
  background: "solid-gray.100/90",
1190
1562
  height: "100vh",
@@ -1193,8 +1565,8 @@ var drawer_default = (0, _pandacss_dev.defineSlotRecipe)({
1193
1565
  left: 0,
1194
1566
  width: "100vw",
1195
1567
  zIndex: 10,
1196
- _open: { animation: "backdrop-in" },
1197
- _closed: { animation: "backdrop-out" }
1568
+ _open: { animation: "fade-in 0.5s cubic-bezier(0.32, 0.72, 0, 1)" },
1569
+ _closed: { animation: "fade-out 0.5s cubic-bezier(0.32, 0.72, 0, 1)" }
1198
1570
  },
1199
1571
  positioner: {
1200
1572
  alignItems: "center",
@@ -1203,25 +1575,75 @@ var drawer_default = (0, _pandacss_dev.defineSlotRecipe)({
1203
1575
  justifyContent: "center",
1204
1576
  position: "fixed",
1205
1577
  top: 0,
1206
- width: 72,
1207
- zIndex: 1400
1578
+ /**
1579
+ * w-72
1580
+ */
1581
+ width: {
1582
+ base: "full",
1583
+ "&[data-swipe-direction=right]": 72,
1584
+ "&[data-swipe-direction=left]": 72
1585
+ },
1586
+ zIndex: 1400,
1587
+ "&[data-swipe-direction=up]": { left: 0 },
1588
+ "&[data-swipe-direction=down]": { left: 0 },
1589
+ "&[data-swipe-direction=right]": { right: 0 },
1590
+ "&[data-swipe-direction=left]": { left: 0 }
1208
1591
  },
1209
1592
  content: {
1593
+ /**
1594
+ * m-[unset] max-w-full max-h-[unset] overflow-visible start-auto
1595
+ */
1210
1596
  margin: "unset",
1211
1597
  maxWidth: "full",
1212
1598
  maxHeight: "full",
1213
1599
  overflow: "visible",
1214
1600
  insetInlineStart: "auto",
1215
1601
  width: "full",
1602
+ /**
1603
+ * bg-white shadow-2 border-l-transparent
1604
+ */
1216
1605
  borderColor: "transparent",
1217
1606
  background: "white",
1218
1607
  boxShadow: 2,
1608
+ /**
1609
+ * grid grid-rows-[auto_1fr] h-dvh
1610
+ */
1219
1611
  display: "grid",
1220
1612
  gridTemplateRows: "auto 1fr",
1221
- height: "100dvh",
1222
- _hidden: { display: "none" }
1613
+ height: "full",
1614
+ _hidden: { display: "none" },
1615
+ /**
1616
+ * transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
1617
+ * animation-duration: 0.5s;
1618
+ * animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
1619
+ */
1620
+ transition: "transform 0.5s cubic-bezier(0.32, 0.72, 0, 1)",
1621
+ animationDuration: "0.5s",
1622
+ animationTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
1623
+ borderWidth: {
1624
+ base: "0px",
1625
+ "&[data-swipe-direction=right]": "0px 0px 0px 1px",
1626
+ "&[data-swipe-direction=left]": "0px 1px 0px 0px",
1627
+ "&[data-swipe-direction=down]": "1px 0px 0px 0px",
1628
+ "&[data-swipe-direction=up]": "0px 0px 1px 0px"
1629
+ },
1630
+ _open: { animationName: {
1631
+ "&[data-swipe-direction=up]": "slide-in-top",
1632
+ "&[data-swipe-direction=down]": "slide-in-bottom",
1633
+ "&[data-swipe-direction=left]": "slide-in-left",
1634
+ "&[data-swipe-direction=right]": "slide-in-right"
1635
+ } },
1636
+ _closed: { animationName: {
1637
+ "&[data-swipe-direction=up]": "slide-out-top",
1638
+ "&[data-swipe-direction=down]": "slide-out-bottom",
1639
+ "&[data-swipe-direction=left]": "slide-out-left",
1640
+ "&[data-swipe-direction=right]": "slide-out-right"
1641
+ } }
1223
1642
  },
1224
1643
  header: {
1644
+ /**
1645
+ * flex justify-end py-4 pl-4 pr-8
1646
+ */
1225
1647
  display: "flex",
1226
1648
  justifyContent: "start",
1227
1649
  py: 4,
@@ -1229,25 +1651,16 @@ var drawer_default = (0, _pandacss_dev.defineSlotRecipe)({
1229
1651
  },
1230
1652
  title: { textStyle: "std-20B-150" },
1231
1653
  body: {
1654
+ /**
1655
+ * overflow-auto
1656
+ */
1232
1657
  overflow: "auto",
1233
1658
  px: 4,
1234
1659
  py: 4,
1235
1660
  textStyle: "std-17N-170"
1236
1661
  }
1237
- },
1238
- variants: { placement: {
1239
- right: {
1240
- positioner: { right: 0 },
1241
- content: { borderLeftWidth: "1px" }
1242
- },
1243
- left: {
1244
- positioner: { left: 0 },
1245
- content: { borderRightWidth: "1px" }
1246
- }
1247
- } },
1248
- defaultVariants: { placement: "right" }
1662
+ }
1249
1663
  });
1250
-
1251
1664
  //#endregion
1252
1665
  //#region src/recipes/emergency-banner.ts
1253
1666
  /**
@@ -1259,6 +1672,9 @@ var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1259
1672
  slots: emergencyBannerAnatomy.keys(),
1260
1673
  base: {
1261
1674
  root: {
1675
+ /**
1676
+ * block px-2.5 py-3.5 border-[6px] bg-white desktop:p-[calc(26/16*1rem)] border-warning-orange-1
1677
+ */
1262
1678
  display: "block",
1263
1679
  px: {
1264
1680
  base: 2.5,
@@ -1274,6 +1690,9 @@ var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1274
1690
  color: "solid-gray.800"
1275
1691
  },
1276
1692
  heading: {
1693
+ /**
1694
+ * text-std-20B-150 text-black desktop:text-std-24B-150
1695
+ */
1277
1696
  color: "black",
1278
1697
  textStyle: {
1279
1698
  base: "std-20B-150",
@@ -1281,7 +1700,11 @@ var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1281
1700
  },
1282
1701
  _before: { content: "\"【緊急】\"" }
1283
1702
  },
1284
- body: { mt: {
1703
+ body: {
1704
+ /**
1705
+ * mt-2 desktop:mt-4
1706
+ */
1707
+ mt: {
1285
1708
  base: 2,
1286
1709
  md: 4
1287
1710
  } },
@@ -1295,6 +1718,23 @@ var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1295
1718
  justifyContent: { md: "flex" }
1296
1719
  },
1297
1720
  button: {
1721
+ /**
1722
+ * relative block mx-auto
1723
+ * p-[calc(18/16*1rem)] desktop:p-5
1724
+ * w-full desktop:w-fit
1725
+ * desktop:min-w-[50%]
1726
+ * border-2 desktop:border-4 border-transparent
1727
+ * bg-error-1 hover:bg-error-2
1728
+ * text-white text-oln-16B-100 text-center
1729
+ * rounded-12 desktop:rounded-16
1730
+ * after:absolute after:inset-0 after:border-white
1731
+ * after:border-2 desktop:after:border-4
1732
+ * after:rounded-[calc(10/16*1rem)] desktop:after:rounded-12
1733
+ * hover:underline hover:underline-offset-[calc(3/16*1rem)]
1734
+ * focus-visible:outline focus-visible:outline-[calc(4/16*1rem)]
1735
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
1736
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
1737
+ */
1298
1738
  position: "relative",
1299
1739
  display: "block",
1300
1740
  mx: "auto",
@@ -1351,7 +1791,6 @@ var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1351
1791
  }
1352
1792
  }
1353
1793
  });
1354
-
1355
1794
  //#endregion
1356
1795
  //#region src/recipes/error-text.ts
1357
1796
  /**
@@ -1361,11 +1800,13 @@ var emergency_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1361
1800
  var error_text_default = (0, _pandacss_dev.defineRecipe)({
1362
1801
  className: "error-text",
1363
1802
  base: {
1803
+ /**
1804
+ * text-dns-16N-130 text-error-1
1805
+ */
1364
1806
  textStyle: "dns-16N-130",
1365
1807
  color: "error.1"
1366
1808
  }
1367
1809
  });
1368
-
1369
1810
  //#endregion
1370
1811
  //#region src/recipes/requirement-badge.ts
1371
1812
  /**
@@ -1375,11 +1816,13 @@ var error_text_default = (0, _pandacss_dev.defineRecipe)({
1375
1816
  var requirement_badge_default = (0, _pandacss_dev.defineRecipe)({
1376
1817
  className: "requirement-badge",
1377
1818
  base: {
1819
+ /**
1820
+ * text-oln-16N-100 text-red-800
1821
+ */
1378
1822
  textStyle: "oln-16N-100",
1379
1823
  color: "red.800"
1380
1824
  }
1381
1825
  });
1382
-
1383
1826
  //#endregion
1384
1827
  //#region src/recipes/support-text.ts
1385
1828
  /**
@@ -1389,11 +1832,13 @@ var requirement_badge_default = (0, _pandacss_dev.defineRecipe)({
1389
1832
  var support_text_default = (0, _pandacss_dev.defineRecipe)({
1390
1833
  className: "support-text",
1391
1834
  base: {
1835
+ /**
1836
+ * text-std-16N-170 text-solid-gray-600
1837
+ */
1392
1838
  textStyle: "std-16N-170",
1393
1839
  color: "solid-gray.600"
1394
1840
  }
1395
1841
  });
1396
-
1397
1842
  //#endregion
1398
1843
  //#region src/recipes/textarea.ts
1399
1844
  /**
@@ -1404,8 +1849,16 @@ var textarea_default = (0, _pandacss_dev.defineRecipe)({
1404
1849
  className: "textarea",
1405
1850
  description: "テキストエリアコンポーネントは、1行以上のテキストを入力する場合に使用します。",
1406
1851
  base: {
1852
+ /**
1853
+ * rounded-8 max-w-full p-4 aria-disabled:pointer-events-none
1854
+ */
1407
1855
  rounded: 8,
1408
1856
  p: 4,
1857
+ /**
1858
+ * text-std-16N-170 bg-white text-solid-gray-800
1859
+ * aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420
1860
+ * aria-disabled:forced-colors:text-[GrayText]
1861
+ */
1409
1862
  textStyle: "std-16N-170",
1410
1863
  bg: {
1411
1864
  base: "white",
@@ -1418,6 +1871,11 @@ var textarea_default = (0, _pandacss_dev.defineRecipe)({
1418
1871
  _highContrast: "GrayText"
1419
1872
  }
1420
1873
  },
1874
+ /**
1875
+ * border border-solid-gray-600 hover:border-black
1876
+ * aria-disabled:border-solid-gray-300 aria-disabled:forced-colors:border-[GrayText]
1877
+ * aria-[invalid=true]:border-error-1 aria-[invalid=true]:hover:border-red-1000
1878
+ */
1421
1879
  borderStyle: {
1422
1880
  base: "solid",
1423
1881
  _readOnly: "dashed"
@@ -1435,6 +1893,11 @@ var textarea_default = (0, _pandacss_dev.defineRecipe)({
1435
1893
  _hover: "red.1000"
1436
1894
  }
1437
1895
  },
1896
+ /**
1897
+ * focus:outline focus:outline-4 focus:outline-black
1898
+ * focus:outline-offset-[calc(2/16*1rem)]
1899
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
1900
+ */
1438
1901
  _focus: {
1439
1902
  outlineStyle: "solid",
1440
1903
  outlineWidth: "4px",
@@ -1444,7 +1907,6 @@ var textarea_default = (0, _pandacss_dev.defineRecipe)({
1444
1907
  }
1445
1908
  }
1446
1909
  });
1447
-
1448
1910
  //#endregion
1449
1911
  //#region src/recipes/field.ts
1450
1912
  /**
@@ -1487,8 +1949,6 @@ const field = (0, _pandacss_dev.defineSlotRecipe)({
1487
1949
  } },
1488
1950
  defaultVariants: { size: "md" }
1489
1951
  });
1490
- var field_default = field;
1491
-
1492
1952
  //#endregion
1493
1953
  //#region src/recipes/fieldset.ts
1494
1954
  var fieldset_default = (0, _pandacss_dev.defineSlotRecipe)({
@@ -1506,7 +1966,6 @@ var fieldset_default = (0, _pandacss_dev.defineSlotRecipe)({
1506
1966
  } },
1507
1967
  defaultVariants: { size: "md" }
1508
1968
  });
1509
-
1510
1969
  //#endregion
1511
1970
  //#region src/recipes/file-upload.ts
1512
1971
  var file_upload_default = (0, _pandacss_dev.defineSlotRecipe)({
@@ -1561,7 +2020,7 @@ var file_upload_default = (0, _pandacss_dev.defineSlotRecipe)({
1561
2020
  display: "list-item",
1562
2021
  color: {
1563
2022
  base: "solid-gray.600",
1564
- "[data-status=rejected]": "error.1",
2023
+ "&[data-status=rejected]": "error.1",
1565
2024
  _marker: "solid-gray.600"
1566
2025
  },
1567
2026
  "& > *": {
@@ -1602,7 +2061,6 @@ var file_upload_default = (0, _pandacss_dev.defineSlotRecipe)({
1602
2061
  }
1603
2062
  }
1604
2063
  });
1605
-
1606
2064
  //#endregion
1607
2065
  //#region src/recipes/hamburger-menu-button.ts
1608
2066
  /**
@@ -1612,21 +2070,35 @@ var file_upload_default = (0, _pandacss_dev.defineSlotRecipe)({
1612
2070
  var hamburger_menu_button_default = (0, _pandacss_dev.defineRecipe)({
1613
2071
  className: "hamburger-menu-button",
1614
2072
  base: {
2073
+ /**
2074
+ * flex w-fit items-center text-oln-16N-100 rounded-6 touch-manipulation
2075
+ */
1615
2076
  display: "flex",
1616
2077
  width: "fit-content",
1617
2078
  alignItems: "center",
1618
2079
  textStyle: "oln-16N-100",
1619
2080
  rounded: 6,
2081
+ /**
2082
+ * gap-x-1 px-3 pb-1.5 pt-1
2083
+ */
1620
2084
  px: 3,
1621
2085
  pb: 1.5,
1622
2086
  pt: 1,
1623
2087
  touchAction: "manipulation",
1624
2088
  columnGap: 1.5,
2089
+ /**
2090
+ * hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
2091
+ */
1625
2092
  _hover: {
1626
2093
  bg: "solid-gray.50",
1627
2094
  textDecoration: "underline",
1628
2095
  textUnderlineOffset: "calc(3 / 16 * 1rem)"
1629
2096
  },
2097
+ /**
2098
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
2099
+ * focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300
2100
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
2101
+ */
1630
2102
  _focusVisible: {
1631
2103
  bg: "yellow.300",
1632
2104
  outlineStyle: "solid",
@@ -1635,10 +2107,12 @@ var hamburger_menu_button_default = (0, _pandacss_dev.defineRecipe)({
1635
2107
  outlineOffset: .5,
1636
2108
  focusBox: "calc({spacing.1} / 2)"
1637
2109
  },
2110
+ /**
2111
+ * override reset
2112
+ */
1638
2113
  cursor: "pointer"
1639
2114
  }
1640
2115
  });
1641
-
1642
2116
  //#endregion
1643
2117
  //#region src/recipes/legend.ts
1644
2118
  /**
@@ -1648,6 +2122,9 @@ var hamburger_menu_button_default = (0, _pandacss_dev.defineRecipe)({
1648
2122
  var legend_default = (0, _pandacss_dev.defineRecipe)({
1649
2123
  className: "legend",
1650
2124
  base: {
2125
+ /**
2126
+ * flex w-fit items-center gap-2 text-solid-gray-800
2127
+ */
1651
2128
  display: "flex",
1652
2129
  width: "fit-content",
1653
2130
  alignItems: "center",
@@ -1655,20 +2132,34 @@ var legend_default = (0, _pandacss_dev.defineRecipe)({
1655
2132
  color: "solid-gray.800"
1656
2133
  },
1657
2134
  variants: { size: {
1658
- sm: { textStyle: "std-16B-170" },
1659
- md: { textStyle: "std-17B-170" },
1660
- lg: { textStyle: "std-18B-160" }
2135
+ sm: {
2136
+ /**
2137
+ * data-[size=sm]:text-std-16B-170
2138
+ */
2139
+ textStyle: "std-16B-170" },
2140
+ md: {
2141
+ /**
2142
+ * data-[size=md]:text-std-17B-170
2143
+ */
2144
+ textStyle: "std-17B-170" },
2145
+ lg: {
2146
+ /**
2147
+ * data-[size=lg]:text-std-18B-160
2148
+ */
2149
+ textStyle: "std-18B-160" }
1661
2150
  } },
1662
2151
  defaultVariants: { size: "md" }
1663
2152
  });
1664
-
1665
2153
  //#endregion
1666
2154
  //#region src/recipes/list.ts
1667
2155
  var list_default = (0, _pandacss_dev.defineRecipe)({
1668
2156
  className: "list",
1669
- base: { py: 1 }
2157
+ base: {
2158
+ /**
2159
+ * py-1
2160
+ */
2161
+ py: 1 }
1670
2162
  });
1671
-
1672
2163
  //#endregion
1673
2164
  //#region src/recipes/menu-item.ts
1674
2165
  /**
@@ -1678,6 +2169,12 @@ var list_default = (0, _pandacss_dev.defineRecipe)({
1678
2169
  var menu_item_default = (0, _pandacss_dev.defineRecipe)({
1679
2170
  className: "menu-item",
1680
2171
  base: {
2172
+ /**
2173
+ * flex relative items-center text-nowrap
2174
+ * bg-white hover:bg-solid-gray-50 focus-visible:bg-yellow-300
2175
+ * text-oln-16N-100 text-solid-gray-800
2176
+ * ${isCurrent ? '!text-blue-1000 !bg-blue-100 font-bold' : ''}
2177
+ */
1681
2178
  display: "flex",
1682
2179
  position: "relative",
1683
2180
  alignItems: "center",
@@ -1712,14 +2209,26 @@ var menu_item_default = (0, _pandacss_dev.defineRecipe)({
1712
2209
  _selected: "bold",
1713
2210
  _checked: "bold"
1714
2211
  },
2212
+ /**
2213
+ * hover:underline hover:underline-offset-[calc(3/16*1rem)]
2214
+ */
1715
2215
  _hover: {
1716
2216
  textDecoration: "underline",
1717
2217
  textUnderlineOffset: "calc(3 / 16 * 1rem)"
1718
2218
  },
2219
+ /**
2220
+ * py-3 pl-3 pr-6 gap-x-2
2221
+ */
1719
2222
  py: 3,
1720
2223
  pl: 3,
1721
2224
  pr: 6,
1722
2225
  columnGap: 2,
2226
+ /**
2227
+ * focus-visible:outline focus-visible:outline-4 focus-visible:outline-black
2228
+ * focus-visible:-outline-offset-4
2229
+ * focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset
2230
+ * focus-visible:ring-yellow-300
2231
+ */
1723
2232
  _focusVisible: {
1724
2233
  rounded: 4,
1725
2234
  outlineStyle: "solid",
@@ -1748,6 +2257,9 @@ var menu_item_default = (0, _pandacss_dev.defineRecipe)({
1748
2257
  } }
1749
2258
  },
1750
2259
  isCondensed: { true: {
2260
+ /**
2261
+ * ${isCondensed ? 'py-1.5 pl-1.5 pr-4 gap-x-1.5'}
2262
+ */
1751
2263
  py: 1.5,
1752
2264
  pl: 1.5,
1753
2265
  pr: 4,
@@ -1759,7 +2271,6 @@ var menu_item_default = (0, _pandacss_dev.defineRecipe)({
1759
2271
  isCondensed: false
1760
2272
  }
1761
2273
  });
1762
-
1763
2274
  //#endregion
1764
2275
  //#region src/recipes/menu.ts
1765
2276
  /**
@@ -1833,955 +2344,1499 @@ var menu_default = (0, _pandacss_dev.defineSlotRecipe)({
1833
2344
  } } },
1834
2345
  defaultVariants: { isCondensed: false }
1835
2346
  });
1836
-
1837
- //#endregion
1838
- //#region src/recipes/menu-list.ts
1839
- var menu_list_default = (0, _pandacss_dev.defineSlotRecipe)({
1840
- className: "menu-list",
1841
- slots: menuListAnatomy.keys(),
1842
- base: {
1843
- root: {},
1844
- label: {
1845
- py: 3,
1846
- pl: 3,
1847
- pr: 6,
1848
- textStyle: "oln-17B-100",
1849
- textWrap: "nowrap",
1850
- display: "block",
1851
- mb: 2
1852
- },
1853
- content: {},
1854
- item: { ...menu_item_default.base },
1855
- itemGroup: { my: 1 },
1856
- itemGroupLabel: {
1857
- ...menu_item_default.base,
1858
- position: "sticky",
1859
- top: 0,
1860
- bg: "white"
1861
- },
1862
- itemText: {},
1863
- itemIndicator: {
1864
- position: "absolute",
1865
- top: "50%",
1866
- right: 4,
1867
- transform: "translateY(-50%)"
1868
- }
1869
- },
1870
- variants: {
1871
- variant: {
1872
- standard: {
1873
- item: { ...menu_item_default.variants?.variant?.standard },
1874
- itemGroupLabel: { ...menu_item_default.variants?.variant?.standard }
1875
- },
1876
- boxed: {
1877
- item: { ...menu_item_default.variants?.variant?.boxed },
1878
- itemGroupLabel: { ...menu_item_default.variants?.variant?.boxed }
1879
- }
1880
- },
1881
- isCondensed: { true: {} }
1882
- },
1883
- defaultVariants: {
1884
- variant: "standard",
1885
- isCondensed: false
1886
- }
1887
- });
1888
-
1889
2347
  //#endregion
1890
- //#region src/recipes/notification-banner.ts
1891
- /**
1892
- * source:
1893
- * https://github.com/digital-go-jp/design-system-example-components-react/tree/main/src/components/NotificationBanner
1894
- * https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/notification-banner
1895
- *
1896
- * inspired by Park UI
1897
- * https://park-ui.com/react/docs/components/alert
1898
- */
1899
- var notification_banner_default = (0, _pandacss_dev.defineSlotRecipe)({
1900
- className: "notification-banner",
1901
- description: "サイト/サービス全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、サイト/サービス側からユーザーへ提示する場合に用いる通知バナーです。通知に対するユーザーアクションを要求することが可能です。メンテナンスを通知したい、ユーザーの対応が必要な情報を通知してアクションさせたい、といった要求に対応することができます。",
1902
- slots: notificationBannerAnatomy.keys(),
1903
- base: {
1904
- root: {
1905
- "--icon-size": {
1906
- base: "{spacing.6}",
1907
- md: "{spacing.9}"
1908
- },
1909
- "--icon-scale": {
1910
- base: 24 / 36,
1911
- md: 1
1912
- },
1913
- p: {
1914
- base: 4,
1915
- md: 6
1916
- },
1917
- borderColor: "currentcolor",
1918
- display: "grid",
1919
- gridTemplateColumns: "var(--icon-size) 1fr minmax(0, auto)",
1920
- columnGap: {
1921
- base: 3,
1922
- md: 6
1923
- },
1924
- rowGap: 4
1925
- },
1926
- header: {
1927
- display: "grid",
1928
- gridTemplateColumns: "subgrid",
1929
- gridColumnStart: 2,
1930
- gridColumnEnd: -1,
1931
- placeItems: "start",
1932
- "& > *:last-child": { gridColumnEnd: -1 }
1933
- },
1934
- icon: {
1935
- mt: {
1936
- base: .5,
1937
- md: 0
1938
- },
1939
- height: "auto",
1940
- maxWidth: "full",
1941
- _before: {
1942
- content: "\"\"",
1943
- display: "block",
1944
- bg: "currentColor",
1945
- width: "36px",
1946
- height: "36px",
1947
- transformOrigin: "left center",
1948
- transform: "scale(var(--icon-scale))"
1949
- }
1950
- },
1951
- close: {
1952
- _before: {
1953
- content: "\"\"",
2348
+ //#region src/recipes/index.ts
2349
+ const recipes = {
2350
+ accordion: accordion_default,
2351
+ blockquote: blockquote_default,
2352
+ breadcrumb: breadcrumb_default,
2353
+ button: button_default,
2354
+ card: card_default,
2355
+ checkbox: checkbox_default,
2356
+ chipLabel: chip_label_default,
2357
+ chipTag: chip_tag_default,
2358
+ datePicker: date_picker_default,
2359
+ dateInput: date_input_default,
2360
+ descriptionList: description_list_default,
2361
+ disclosure: disclosure_default,
2362
+ digitalGoDivider: divider_default,
2363
+ drawer: drawer_default,
2364
+ emergencyBanner: emergency_banner_default,
2365
+ errorText: error_text_default,
2366
+ field,
2367
+ fieldset: fieldset_default,
2368
+ fileUpload: file_upload_default,
2369
+ hamburgerMenuButton: hamburger_menu_button_default,
2370
+ input: input_default,
2371
+ label: label_default,
2372
+ legend: legend_default,
2373
+ link: link_default,
2374
+ list: list_default,
2375
+ menu: menu_default,
2376
+ menuItem: menu_item_default,
2377
+ menuList: (0, _pandacss_dev.defineSlotRecipe)({
2378
+ className: "menu-list",
2379
+ slots: menuListAnatomy.keys(),
2380
+ base: {
2381
+ root: {},
2382
+ label: {
2383
+ py: 3,
2384
+ pl: 3,
2385
+ pr: 6,
2386
+ textStyle: "oln-17B-100",
2387
+ textWrap: "nowrap",
1954
2388
  display: "block",
1955
- mt: .5,
1956
- width: 6,
1957
- height: 6,
1958
- bg: "currentColor",
1959
- clipPath: "path('m6.4 18.6-1-1 5.5-5.6-5.6-5.6 1.1-1 5.6 5.5 5.6-5.6 1 1.1L13 12l5.6 5.6-1 1L12 13l-5.6 5.6Z')"
2389
+ mb: 2
2390
+ },
2391
+ content: {},
2392
+ item: { ...menu_item_default.base },
2393
+ itemGroup: { my: 1 },
2394
+ itemGroupLabel: {
2395
+ ...menu_item_default.base,
2396
+ position: "sticky",
2397
+ top: 0,
2398
+ bg: "white"
1960
2399
  },
1961
- ...hamburger_menu_button_default.base,
1962
- display: "inline-flex",
1963
- gap: 1,
1964
- mr: -3,
1965
- color: "solid-gray.900"
1966
- },
1967
- heading: {
1968
- textStyle: {
1969
- base: "std-17B-170",
1970
- md: "std-20B-150"
1971
- },
1972
- color: "solid-gray.900",
1973
- gridColumnStart: 1,
1974
- mt: {
1975
- base: "auto",
1976
- md: .5
2400
+ itemText: {},
2401
+ itemIndicator: {
2402
+ position: "absolute",
2403
+ top: "50%",
2404
+ right: 4,
2405
+ transform: "translateY(-50%)"
1977
2406
  }
1978
2407
  },
1979
- body: {
1980
- gridColumnStart: {
1981
- base: 1,
1982
- md: 2
2408
+ variants: {
2409
+ variant: {
2410
+ standard: {
2411
+ item: { ...menu_item_default.variants?.variant?.standard },
2412
+ itemGroupLabel: { ...menu_item_default.variants?.variant?.standard }
2413
+ },
2414
+ boxed: {
2415
+ item: { ...menu_item_default.variants?.variant?.boxed },
2416
+ itemGroupLabel: { ...menu_item_default.variants?.variant?.boxed }
2417
+ }
1983
2418
  },
1984
- gridColumnEnd: -1,
1985
- textStyle: "std-16N-170",
1986
- color: "solid-gray.800"
2419
+ isCondensed: { true: {} }
1987
2420
  },
1988
- actions: {
1989
- mb: -2,
1990
- display: "grid",
1991
- gap: {
1992
- base: 2,
1993
- md: 4
1994
- },
1995
- gridColumn: {
1996
- base: "1 / 4",
1997
- md: "2 / 4"
1998
- },
1999
- gridAutoFlow: { md: "column" },
2000
- justifyContent: { md: "end" }
2421
+ defaultVariants: {
2422
+ variant: "standard",
2423
+ isCondensed: false
2001
2424
  }
2002
- },
2003
- variants: {
2004
- type: {
2005
- success: {
2006
- root: {
2007
- color: "success.2",
2008
- "--color-chip-color": "currentColor"
2425
+ }),
2426
+ notificationBanner: (0, _pandacss_dev.defineSlotRecipe)({
2427
+ className: "notification-banner",
2428
+ description: "サイト/サービス全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、サイト/サービス側からユーザーへ提示する場合に用いる通知バナーです。通知に対するユーザーアクションを要求することが可能です。メンテナンスを通知したい、ユーザーの対応が必要な情報を通知してアクションさせたい、といった要求に対応することができます。",
2429
+ slots: notificationBannerAnatomy.keys(),
2430
+ base: {
2431
+ root: {
2432
+ /**
2433
+ * [--icon-size:calc(24/16*1rem)] desktop:[--icon-size:calc(36/16*1rem)]
2434
+ */
2435
+ "--icon-size": {
2436
+ base: "{spacing.6}",
2437
+ md: "{spacing.9}"
2009
2438
  },
2010
- icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')" } },
2011
- actions: { "& button": { colorPalette: "green" } }
2012
- },
2013
- error: {
2014
- root: {
2015
- color: "error.1",
2016
- "--color-chip-color": "currentColor"
2439
+ "--icon-scale": {
2440
+ base: 24 / 36,
2441
+ md: 1
2017
2442
  },
2018
- icon: { _before: { clipPath: "path('M10.82 35.3.74 25.22v-14.4L10.82.74h14.4L35.3 10.82v14.4L25.22 35.3h-14.4Zm7.2-14.592 5.472 5.472 2.688-2.688-5.472-5.472 5.472-5.472-2.688-2.688-5.472 5.472-5.472-5.472-2.688 2.688 5.472 5.472-5.472 5.472 2.688 2.688 5.472-5.472Z')" } },
2019
- actions: { "& button": { colorPalette: "red" } }
2020
- },
2021
- warning: {
2022
- root: {
2023
- color: "warning.yellow.2",
2024
- "--color-chip-color": "{colors.yellow.400}"
2443
+ /**
2444
+ * p-4 desktop:p-6 border-current
2445
+ */
2446
+ p: {
2447
+ base: 4,
2448
+ md: 6
2025
2449
  },
2026
- icon: { _before: { clipPath: "path('M0 34.0909H36L18 3L0 34.0909ZM19.6364 29.1818H16.3636V25.9091H19.6364V29.1818ZM19.6364 22.6364H16.3636V16.0909H19.6364V22.6364Z')" } },
2027
- actions: { "& button": { colorPalette: "yellow" } }
2450
+ borderColor: "currentcolor",
2451
+ /**
2452
+ * grid grid-cols-[var(--icon-size)_1fr_minmax(0,auto)]
2453
+ * gap-x-3 desktop:gap-x-6 gap-y-4
2454
+ */
2455
+ display: "grid",
2456
+ gridTemplateColumns: "var(--icon-size) 1fr minmax(0, auto)",
2457
+ columnGap: {
2458
+ base: 3,
2459
+ md: 6
2460
+ },
2461
+ rowGap: 4
2462
+ },
2463
+ header: {
2464
+ /**
2465
+ * grid grid-cols-subgrid col-start-2 -col-end-1 place-items-start
2466
+ [&>*:last-child]:-col-end-1
2467
+ */
2468
+ display: "grid",
2469
+ gridTemplateColumns: "subgrid",
2470
+ gridColumnStart: 2,
2471
+ gridColumnEnd: -1,
2472
+ placeItems: "start",
2473
+ "& > *:last-child": { gridColumnEnd: -1 }
2474
+ },
2475
+ icon: {
2476
+ /**
2477
+ * mt-[calc(2/16*1rem)] desktop:mt-0
2478
+ */
2479
+ mt: {
2480
+ base: .5,
2481
+ md: 0
2482
+ },
2483
+ /**
2484
+ * h-auto max-w-full
2485
+ */
2486
+ height: "auto",
2487
+ maxWidth: "full",
2488
+ /**
2489
+ * icon element
2490
+ * instead of icon component
2491
+ */
2492
+ _before: {
2493
+ content: "\"\"",
2494
+ display: "block",
2495
+ bg: "currentColor",
2496
+ width: "36px",
2497
+ height: "36px",
2498
+ transformOrigin: "left center",
2499
+ transform: "scale(var(--icon-scale))"
2500
+ }
2028
2501
  },
2029
- info1: {
2030
- root: {
2031
- color: "blue.900",
2032
- "--color-chip-color": "currentColor"
2502
+ close: {
2503
+ _before: {
2504
+ content: "\"\"",
2505
+ display: "block",
2506
+ mt: .5,
2507
+ width: 6,
2508
+ height: 6,
2509
+ bg: "currentColor",
2510
+ clipPath: "path('m6.4 18.6-1-1 5.5-5.6-5.6-5.6 1.1-1 5.6 5.5 5.6-5.6 1 1.1L13 12l5.6 5.6-1 1L12 13l-5.6 5.6Z')"
2511
+ },
2512
+ ...hamburger_menu_button_default.base,
2513
+ display: "inline-flex",
2514
+ gap: 1,
2515
+ mr: -3,
2516
+ color: "solid-gray.900"
2517
+ },
2518
+ heading: {
2519
+ /**
2520
+ * text-solid-gray-900 col-start-1 desktop:mt-0.5
2521
+ * text-std-17B-170 desktop:text-std-20B-160
2522
+ *
2523
+ * @todo
2524
+ * std-20B-160 doesn't exist and replace it to std-20B-150
2525
+ */
2526
+ textStyle: {
2527
+ base: "std-17B-170",
2528
+ md: "std-20B-150"
2033
2529
  },
2034
- icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
2035
- actions: { "& button": { colorPalette: "blue" } }
2530
+ color: "solid-gray.900",
2531
+ gridColumnStart: 1,
2532
+ mt: {
2533
+ base: "auto",
2534
+ md: .5
2535
+ }
2036
2536
  },
2037
- info2: {
2038
- root: {
2039
- color: "solid-gray.536",
2040
- "--color-chip-color": "currentColor"
2537
+ body: {
2538
+ /**
2539
+ * col-start-1 -col-end-1 desktop:col-start-2 text-std-16N-170 text-solid-gray-800
2540
+ */
2541
+ gridColumnStart: {
2542
+ base: 1,
2543
+ md: 2
2041
2544
  },
2042
- icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
2043
- actions: { "& button": { colorPalette: "solid-gray" } }
2545
+ gridColumnEnd: -1,
2546
+ textStyle: "std-16N-170",
2547
+ color: "solid-gray.800"
2548
+ },
2549
+ actions: {
2550
+ /**
2551
+ * margin-bottom: calc(-8 / 16 * 1rem);
2552
+ * display: grid;
2553
+ * gap: calc(8 / 16 * 1rem);
2554
+ * grid-column: 1 / 4;
2555
+ * @media (min-width: 48rem) {
2556
+ * .dads-notification-banner__actions {
2557
+ * grid-auto-flow: column;
2558
+ * gap: calc(16 / 16 * 1rem);
2559
+ * grid-column: 2 / 4;
2560
+ * justify-content: end;
2561
+ * }
2562
+ * }
2563
+ */
2564
+ mb: -2,
2565
+ display: "grid",
2566
+ gap: {
2567
+ base: 2,
2568
+ md: 4
2569
+ },
2570
+ gridColumn: {
2571
+ base: "1 / 4",
2572
+ md: "2 / 4"
2573
+ },
2574
+ gridAutoFlow: { md: "column" },
2575
+ justifyContent: { md: "end" }
2044
2576
  }
2045
2577
  },
2046
- bannerStyle: {
2047
- standard: { root: {
2048
- borderWidth: "3px",
2049
- rounded: 12
2050
- } },
2051
- "color-chip": { root: {
2052
- borderWidth: "2px",
2053
- pl: {
2054
- base: 6,
2055
- md: 10
2578
+ variants: {
2579
+ type: {
2580
+ success: {
2581
+ root: {
2582
+ /**
2583
+ * text-success-2 [--color-chip-color:currentColor]
2584
+ */
2585
+ color: "success.2",
2586
+ "--color-chip-color": "currentColor"
2587
+ },
2588
+ icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')" } },
2589
+ actions: { "& button": { colorPalette: "green" } }
2056
2590
  },
2057
- shadow: "inset 16px 0 0 0 var(--color-chip-color)"
2058
- } }
2059
- }
2060
- },
2061
- defaultVariants: {
2062
- type: "info1",
2063
- bannerStyle: "standard"
2064
- }
2065
- });
2066
-
2067
- //#endregion
2068
- //#region src/recipes/ordered-list.ts
2069
- /**
2070
- * source:
2071
- * https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Ol/Ol.tsx
2072
- */
2073
- var ordered_list_default = (0, _pandacss_dev.defineRecipe)({
2074
- className: "ordered-list",
2075
- base: {
2076
- pl: 8,
2077
- listStyle: "revert",
2078
- "&:where(ol,ul)": {
2079
- mt: 1,
2080
- mb: -1
2081
- }
2082
- }
2083
- });
2084
-
2085
- //#endregion
2086
- //#region src/recipes/progress.ts
2087
- /**
2088
- * references:
2089
- * https://github.com/cschroeter/park-ui/blob/main/packages/preset/src/theme/recipes/progress.ts
2090
- * https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/progress.ts
2091
- * https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/theme/recipes/progress-circle.ts
2092
- */
2093
- var progress_default = (0, _pandacss_dev.defineSlotRecipe)({
2094
- className: "progress",
2095
- description: "プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。",
2096
- slots: _zag_js_progress.anatomy.keys(),
2097
- base: {
2098
- root: {
2099
- display: "flex",
2100
- alignItems: "center",
2101
- colorPalette: "keyColor"
2102
- },
2103
- track: {
2104
- height: "4px",
2105
- bg: "colorPalette.500",
2106
- rounded: "full",
2107
- overflow: "hidden",
2108
- position: "relative"
2109
- },
2110
- range: {
2111
- bg: "colorPalette.1200",
2112
- height: "full",
2113
- outlineStyle: "solid",
2114
- outlineWidth: "1px",
2115
- outlineColor: "white",
2116
- rounded: "full",
2117
- transition: "width 0.2s ease-in-out",
2118
- "--translate-x": "-100%",
2119
- _indeterminate: {
2120
- "--animate-from-x": "-40%",
2121
- "--animate-to-x": "100%",
2122
- position: "absolute",
2123
- willChange: "left",
2124
- minWidth: "50%",
2125
- animation: "position 1s ease infinite normal none running",
2126
- backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`
2591
+ error: {
2592
+ root: {
2593
+ /**
2594
+ * text-error-1 [--color-chip-color:currentColor]
2595
+ */
2596
+ color: "error.1",
2597
+ "--color-chip-color": "currentColor"
2598
+ },
2599
+ icon: { _before: { clipPath: "path('M10.82 35.3.74 25.22v-14.4L10.82.74h14.4L35.3 10.82v14.4L25.22 35.3h-14.4Zm7.2-14.592 5.472 5.472 2.688-2.688-5.472-5.472 5.472-5.472-2.688-2.688-5.472 5.472-5.472-5.472-2.688 2.688 5.472 5.472-5.472 5.472 2.688 2.688 5.472-5.472Z')" } },
2600
+ actions: { "& button": { colorPalette: "red" } }
2601
+ },
2602
+ warning: {
2603
+ root: {
2604
+ /**
2605
+ * text-warning-yellow-2 [--color-chip-color:theme(colors.yellow.400)]
2606
+ */
2607
+ color: "warning.yellow.2",
2608
+ "--color-chip-color": "{colors.yellow.400}"
2609
+ },
2610
+ icon: { _before: { clipPath: "path('M0 34.0909H36L18 3L0 34.0909ZM19.6364 29.1818H16.3636V25.9091H19.6364V29.1818ZM19.6364 22.6364H16.3636V16.0909H19.6364V22.6364Z')" } },
2611
+ actions: { "& button": { colorPalette: "yellow" } }
2612
+ },
2613
+ info1: {
2614
+ root: {
2615
+ /**
2616
+ * text-blue-900 [--color-chip-color:currentColor]
2617
+ */
2618
+ color: "blue.900",
2619
+ "--color-chip-color": "currentColor"
2620
+ },
2621
+ icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
2622
+ actions: { "& button": { colorPalette: "blue" } }
2623
+ },
2624
+ info2: {
2625
+ root: {
2626
+ /**
2627
+ * text-solid-gray-536 [--color-chip-color:currentColor]
2628
+ */
2629
+ color: "solid-gray.536",
2630
+ "--color-chip-color": "currentColor"
2631
+ },
2632
+ icon: { _before: { clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0ZM19.8 27H16.2V16.2H19.8V27ZM19.8 12.6H16.2V9H19.8V12.6Z')" } },
2633
+ actions: { "& button": { colorPalette: "solid-gray" } }
2634
+ }
2635
+ },
2636
+ bannerStyle: {
2637
+ standard: { root: {
2638
+ /**
2639
+ * border-[3px] rounded-12
2640
+ */
2641
+ borderWidth: "3px",
2642
+ rounded: 12
2643
+ } },
2644
+ "color-chip": { root: {
2645
+ /**
2646
+ * border-2 !pl-6 desktop:!pl-10
2647
+ * shadow-[inset_8px_0_0_0_var(--color-chip-color)]
2648
+ * desktop:shadow-[inset_16px_0_0_0_var(--color-chip-color)]
2649
+ */
2650
+ borderWidth: "2px",
2651
+ pl: {
2652
+ base: 6,
2653
+ md: 10
2654
+ },
2655
+ shadow: "inset 16px 0 0 0 var(--color-chip-color)"
2656
+ } }
2127
2657
  }
2128
2658
  },
2129
- circle: { _indeterminate: { animation: "spin 2s linear infinite" } },
2130
- circleTrack: { stroke: "colorPalette.500" },
2131
- circleRange: {
2132
- stroke: "colorPalette.1200",
2133
- strokeLinecap: "round",
2134
- transitionProperty: "stroke-dashoffset, stroke-dasharray",
2135
- transitionDuration: "0.6s",
2136
- _indeterminate: { animation: "circular-progress 1.5s linear infinite" }
2137
- },
2138
- label: { textStyle: "std-16N-170" }
2139
- },
2140
- variants: { layout: {
2141
- vertical: {
2659
+ defaultVariants: {
2660
+ type: "info1",
2661
+ bannerStyle: "standard"
2662
+ }
2663
+ }),
2664
+ orderedList: (0, _pandacss_dev.defineRecipe)({
2665
+ className: "ordered-list",
2666
+ base: {
2667
+ /**
2668
+ * pl-8 list-[revert]
2669
+ */
2670
+ pl: 8,
2671
+ listStyle: "revert",
2672
+ /**
2673
+ * [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
2674
+ */
2675
+ "&:where(ol,ul)": {
2676
+ mt: 1,
2677
+ mb: -1
2678
+ }
2679
+ }
2680
+ }),
2681
+ progress: (0, _pandacss_dev.defineSlotRecipe)({
2682
+ className: "progress",
2683
+ description: "プログレスインジケーターは、ユーザーのアクションに対して処理進行中であることを通知します。データ取得リクエストの応答を待っていることをユーザーに伝えたいといった要求に対応します。",
2684
+ slots: _zag_js_progress.anatomy.keys(),
2685
+ base: {
2142
2686
  root: {
2143
- flexDirection: "column",
2144
- gap: 4,
2145
- "--size": "48px",
2146
- "--thickness": "4px"
2687
+ display: "flex",
2688
+ alignItems: "center",
2689
+ colorPalette: "keyColor"
2690
+ },
2691
+ track: {
2692
+ height: "4px",
2693
+ bg: "colorPalette.500",
2694
+ rounded: "full",
2695
+ overflow: "hidden",
2696
+ position: "relative"
2697
+ },
2698
+ range: {
2699
+ bg: "colorPalette.1200",
2700
+ height: "full",
2701
+ outlineStyle: "solid",
2702
+ outlineWidth: "1px",
2703
+ outlineColor: "white",
2704
+ rounded: "full",
2705
+ transition: "width 0.2s ease-in-out",
2706
+ "--translate-x": "-100%",
2707
+ _indeterminate: {
2708
+ "--animate-from-x": "-40%",
2709
+ "--animate-to-x": "100%",
2710
+ position: "absolute",
2711
+ willChange: "left",
2712
+ minWidth: "50%",
2713
+ animation: "position 1s ease infinite normal none running",
2714
+ backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`
2715
+ }
2147
2716
  },
2148
- track: { width: "240px" }
2717
+ circle: { _indeterminate: { animation: "spin 2s linear infinite" } },
2718
+ circleTrack: { stroke: "colorPalette.500" },
2719
+ circleRange: {
2720
+ stroke: "colorPalette.1200",
2721
+ strokeLinecap: "round",
2722
+ transitionProperty: "stroke-dashoffset, stroke-dasharray",
2723
+ transitionDuration: "0.6s",
2724
+ _indeterminate: { animation: "circular-progress 1.5s linear infinite" }
2725
+ },
2726
+ label: { textStyle: "std-16N-170" }
2149
2727
  },
2150
- horizontal: {
2728
+ variants: { layout: {
2729
+ vertical: {
2730
+ root: {
2731
+ flexDirection: "column",
2732
+ gap: 4,
2733
+ "--size": "48px",
2734
+ "--thickness": "4px"
2735
+ },
2736
+ track: { width: "240px" }
2737
+ },
2738
+ horizontal: {
2739
+ root: {
2740
+ flexDirection: "row",
2741
+ gap: 2,
2742
+ "--size": "24px",
2743
+ "--thickness": "2px"
2744
+ },
2745
+ track: { width: "80px" }
2746
+ }
2747
+ } },
2748
+ defaultVariants: { layout: "vertical" }
2749
+ }),
2750
+ radioGroup: (0, _pandacss_dev.defineSlotRecipe)({
2751
+ className: "radio-group",
2752
+ slots: _zag_js_radio_group.anatomy.keys(),
2753
+ base: {
2151
2754
  root: {
2152
- flexDirection: "row",
2153
- gap: 2,
2154
- "--size": "24px",
2155
- "--thickness": "2px"
2755
+ display: "flex",
2756
+ colorPalette: "keyColor",
2757
+ _vertical: {
2758
+ flexDirection: "column",
2759
+ gap: 0
2760
+ },
2761
+ _horizonal: {
2762
+ flexDirection: "row",
2763
+ gap: 4
2764
+ }
2156
2765
  },
2157
- track: { width: "80px" }
2158
- }
2159
- } },
2160
- defaultVariants: { layout: "vertical" }
2161
- });
2162
-
2163
- //#endregion
2164
- //#region src/recipes/radio-group.ts
2165
- /**
2166
- * source:
2167
- * https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Radio/Radio.tsx
2168
- */
2169
- var radio_group_default = (0, _pandacss_dev.defineSlotRecipe)({
2170
- className: "radio-group",
2171
- slots: _zag_js_radio_group.anatomy.keys(),
2172
- base: {
2173
- root: {
2174
- display: "flex",
2175
- colorPalette: "keyColor",
2176
- _vertical: {
2177
- flexDirection: "column",
2178
- gap: 0
2179
- },
2180
- _horizonal: {
2181
- flexDirection: "row",
2182
- gap: 4
2183
- }
2184
- },
2185
- label: { ...legend_default.base },
2186
- item: {
2187
- display: "flex",
2188
- width: "fit-content",
2189
- alignItems: "start",
2190
- py: 2
2191
- },
2192
- itemControl: {
2193
- appearance: "none",
2194
- rounded: "full",
2195
- width: "calc(var(--radio-size) * 5 / 6)",
2196
- height: "calc(var(--radio-size) * 5 / 6)",
2197
- m: "calc(var(--radio-size) / 12)",
2198
- flexShrink: 0,
2199
- bg: {
2200
- base: "white",
2201
- _disabled: "solid-gray.50"
2766
+ label: { ...legend_default.base },
2767
+ item: {
2768
+ /**
2769
+ * flex w-fit items-start py-2
2770
+ */
2771
+ display: "flex",
2772
+ width: "fit-content",
2773
+ alignItems: "start",
2774
+ py: 2
2202
2775
  },
2203
- borderColor: {
2204
- base: "solid-gray.600",
2205
- _hover: "black",
2206
- _highContrast: { base: "ButtonText" },
2207
- _checked: {
2208
- base: "colorPalette.primary",
2209
- _hover: "colorPalette.primary.200",
2776
+ itemControl: {
2777
+ /**
2778
+ * flex items-center justify-center shrink-0 rounded-full
2779
+ * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
2780
+ */
2781
+ /**
2782
+ * appearance-none size-[calc(5/6*100%)] rounded-full
2783
+ */
2784
+ appearance: "none",
2785
+ rounded: "full",
2786
+ width: "calc(var(--radio-size) * 5 / 6)",
2787
+ height: "calc(var(--radio-size) * 5 / 6)",
2788
+ m: "calc(var(--radio-size) / 12)",
2789
+ flexShrink: 0,
2790
+ /**
2791
+ * bg-white aria-disabled:!bg-solid-gray-50
2792
+ */
2793
+ bg: {
2794
+ base: "white",
2795
+ _disabled: "solid-gray.50"
2796
+ },
2797
+ borderColor: {
2798
+ /**
2799
+ * border-solid-gray-600
2800
+ * hover:border-black
2801
+ * checked:border-blue-900
2802
+ * checked:hover:border-blue-1100
2803
+ * forced-colors:!border-[ButtonText] forced-colors:checked:!border-[Highlight]
2804
+ */
2805
+ base: "solid-gray.600",
2806
+ _hover: "black",
2807
+ _highContrast: { base: "ButtonText" },
2808
+ _checked: {
2809
+ base: "colorPalette.primary",
2810
+ _hover: "colorPalette.primary.200",
2811
+ _disabled: {
2812
+ base: "solid-gray.300",
2813
+ _highContrast: "GrayText"
2814
+ },
2815
+ _highContrast: "Highlight"
2816
+ },
2817
+ /**
2818
+ * data-[error]:border-error-1 data-[error]:hover:border-red-1000
2819
+ */
2820
+ _invalid: {
2821
+ base: "error.1",
2822
+ _hover: "red.1000",
2823
+ _disabled: "solid-gray.300"
2824
+ },
2825
+ /**
2826
+ * aria-disabled:!border-solid-gray-300
2827
+ * forced-colors:aria-disabled:!border-[GrayText]
2828
+ */
2210
2829
  _disabled: {
2211
2830
  base: "solid-gray.300",
2212
2831
  _highContrast: "GrayText"
2213
- },
2214
- _highContrast: "Highlight"
2832
+ }
2215
2833
  },
2216
- _invalid: {
2217
- base: "error.1",
2218
- _hover: "red.1000",
2219
- _disabled: "solid-gray.300"
2834
+ /**
2835
+ * outline on hover
2836
+ * has-[input:hover:not(:focus):not([aria-disabled="true"])]:bg-solid-gray-420
2837
+ */
2838
+ "&:is(:hover, [data-hover]):not([aria-disabled=\"true\"])": {
2839
+ outlineStyle: "solid",
2840
+ outlineWidth: "calc(var(--radio-size) / 12)",
2841
+ outlineColor: "solid-gray.420",
2842
+ _focus: {
2843
+ outlineStyle: "solid",
2844
+ outlineWidth: "4px",
2845
+ outlineColor: "black",
2846
+ outlineOffset: .5,
2847
+ focusBox: "calc({spacing.1} / 2)"
2848
+ }
2220
2849
  },
2221
- _disabled: {
2222
- base: "solid-gray.300",
2223
- _highContrast: "GrayText"
2224
- }
2225
- },
2226
- "&:is(:hover, [data-hover]):not([aria-disabled=\"true\"])": {
2227
- outlineStyle: "solid",
2228
- outlineWidth: "calc(var(--radio-size) / 12)",
2229
- outlineColor: "solid-gray.420",
2850
+ /**
2851
+ * focus:outline focus:outline-4 focus:outline-black
2852
+ * focus:outline-offset-[calc(2/16*1rem)]
2853
+ * focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
2854
+ */
2230
2855
  _focus: {
2231
2856
  outlineStyle: "solid",
2232
2857
  outlineWidth: "4px",
2233
2858
  outlineColor: "black",
2234
2859
  outlineOffset: .5,
2235
2860
  focusBox: "calc({spacing.1} / 2)"
2861
+ },
2862
+ _before: {
2863
+ /**
2864
+ * before:hidden
2865
+ * before:size-full
2866
+ * before:[clip-path:circle(calc(5/16*100%))]
2867
+ * before:bg-white
2868
+ */
2869
+ content: "\"\"",
2870
+ display: "none",
2871
+ width: "full",
2872
+ height: "full",
2873
+ clipPath: "circle(calc(5 / 16 * 100%))",
2874
+ bg: "white"
2875
+ },
2876
+ _checked: {
2877
+ /**
2878
+ * checked:before:block
2879
+ * checked:before:bg-blue-900 checked:hover:before:bg-blue-1100
2880
+ * data-[error]:checked:before:bg-error-1
2881
+ * data-[error]:checked:hover:before:bg-red-1000
2882
+ * aria-disabled:checked:before:!bg-solid-gray-300
2883
+ * forced-colors:checked:before:!bg-[Highlight]
2884
+ * forced-colors:aria-disabled:checked:before:!bg-[GrayText]
2885
+ */
2886
+ _before: {
2887
+ display: "block",
2888
+ bg: {
2889
+ base: "colorPalette.primary",
2890
+ _hover: "colorPalette.primary.200",
2891
+ _highContrast: "Highlight"
2892
+ }
2893
+ },
2894
+ _invalid: { _before: { bg: {
2895
+ base: "error.1",
2896
+ _hover: "red.1000"
2897
+ } } },
2898
+ _disabled: {
2899
+ _before: { bg: {
2900
+ base: "solid-gray.300",
2901
+ _highContrast: "GrayText"
2902
+ } },
2903
+ _invalid: { _before: { bg: { base: "solid-gray.300" } } }
2904
+ }
2236
2905
  }
2237
2906
  },
2238
- _focus: {
2239
- outlineStyle: "solid",
2240
- outlineWidth: "4px",
2241
- outlineColor: "black",
2242
- outlineOffset: .5,
2243
- focusBox: "calc({spacing.1} / 2)"
2907
+ itemText: {
2908
+ /**
2909
+ * text-solid-gray-800
2910
+ */
2911
+ color: "solid-gray.800" }
2912
+ },
2913
+ variants: { size: {
2914
+ sm: {
2915
+ label: { ...legend_default.variants?.size?.sm },
2916
+ item: {
2917
+ /**
2918
+ * data-[size=sm]:gap-1
2919
+ */
2920
+ gap: 1 },
2921
+ itemControl: {
2922
+ /**
2923
+ * data-[size=sm]:size-6
2924
+ */
2925
+ "--radio-size": "{spacing.6}",
2926
+ /**
2927
+ * data-[size=sm]:border-[calc(2/16*1rem)]
2928
+ */
2929
+ borderWidth: "{spacing.0.5}"
2930
+ },
2931
+ itemText: {
2932
+ /**
2933
+ * data-[size=sm]:pt-px
2934
+ * data-[size=sm]:text-dns-16N-130
2935
+ */
2936
+ pt: "1px",
2937
+ textStyle: "dns-16N-130"
2938
+ }
2244
2939
  },
2245
- _before: {
2246
- content: "\"\"",
2247
- display: "none",
2248
- width: "full",
2249
- height: "full",
2250
- clipPath: "circle(calc(5 / 16 * 100%))",
2251
- bg: "white"
2940
+ md: {
2941
+ label: { ...legend_default.variants?.size?.md },
2942
+ item: {
2943
+ /**
2944
+ * data-[size=md]:gap-2
2945
+ */
2946
+ gap: 2 },
2947
+ itemControl: {
2948
+ /**
2949
+ * data-[size=md]:size-8
2950
+ */
2951
+ "--radio-size": "{spacing.8}",
2952
+ /**
2953
+ * data-[size=md]:border-[calc(2/16*1rem)]
2954
+ */
2955
+ borderWidth: "{spacing.0.5}"
2956
+ },
2957
+ itemText: {
2958
+ /**
2959
+ * data-[size=md]:pt-1
2960
+ * data-[size=md]:text-dns-16N-130
2961
+ */
2962
+ pt: 1,
2963
+ textStyle: "dns-16N-130"
2964
+ }
2252
2965
  },
2253
- _checked: {
2254
- _before: {
2255
- display: "block",
2256
- bg: {
2257
- base: "colorPalette.primary",
2258
- _hover: "colorPalette.primary.200",
2259
- _highContrast: "Highlight"
2260
- }
2966
+ lg: {
2967
+ label: { ...legend_default.variants?.size?.lg },
2968
+ item: {
2969
+ /**
2970
+ * data-[size=lg]:gap-3
2971
+ */
2972
+ gap: 3 },
2973
+ itemControl: {
2974
+ /**
2975
+ * data-[size=lg]:size-11
2976
+ */
2977
+ "--radio-size": "{spacing.11}",
2978
+ /**
2979
+ * data-[size=lg]:border-[calc(3/16*1rem)]
2980
+ */
2981
+ borderWidth: "calc({spacing.1} * 3 / 4)"
2261
2982
  },
2262
- _invalid: { _before: { bg: {
2263
- base: "error.1",
2264
- _hover: "red.1000"
2265
- } } },
2266
- _disabled: {
2267
- _before: { bg: {
2268
- base: "solid-gray.300",
2269
- _highContrast: "GrayText"
2270
- } },
2271
- _invalid: { _before: { bg: { base: "solid-gray.300" } } }
2983
+ itemText: {
2984
+ /**
2985
+ * data-[size=lg]:pt-2.5
2986
+ * data-[size=lg]:text-dns-17N-130
2987
+ */
2988
+ pt: 2.5,
2989
+ textStyle: "dns-17N-130"
2272
2990
  }
2273
2991
  }
2274
- },
2275
- itemText: { color: "solid-gray.800" }
2276
- },
2277
- variants: { size: {
2278
- sm: {
2279
- label: { ...legend_default.variants?.size?.sm },
2280
- item: { gap: 1 },
2281
- itemControl: {
2282
- "--radio-size": "{spacing.6}",
2283
- borderWidth: "{spacing.0.5}"
2992
+ } },
2993
+ defaultVariants: { size: "sm" }
2994
+ }),
2995
+ requirementBadge: requirement_badge_default,
2996
+ resourceList: (0, _pandacss_dev.defineSlotRecipe)({
2997
+ className: "resource-list",
2998
+ slots: resourceListAnatomy.keys(),
2999
+ base: {
3000
+ root: {
3001
+ display: "flex",
3002
+ borderColor: "solid-gray.420",
3003
+ overflow: "hidden",
3004
+ colorPalette: "keyColor",
3005
+ bg: {
3006
+ "&:has(input:checked)": "colorPalette.bg",
3007
+ _selected: "colorPalette.bg"
3008
+ }
3009
+ },
3010
+ main: {
3011
+ display: "flex",
3012
+ flexGrow: 1,
3013
+ flexDirection: "row",
3014
+ alignItems: "center",
3015
+ justifyContent: "start",
3016
+ gap: {
3017
+ base: 4,
3018
+ md: 6
3019
+ },
3020
+ color: "solid-gray.800",
3021
+ textStyle: "dns-16N-130",
3022
+ /**
3023
+ * p-4 md:px-6 md:py-4
3024
+ */
3025
+ py: 4,
3026
+ px: {
3027
+ base: 4,
3028
+ md: 6
3029
+ },
3030
+ bg: {
3031
+ base: "transparent",
3032
+ _hover: "solid-gray.50"
3033
+ },
3034
+ _focusVisible: {
3035
+ outlineStyle: "solid",
3036
+ outlineWidth: "4px",
3037
+ outlineColor: "black",
3038
+ outlineOffset: .5,
3039
+ focusBox: "calc({spacing.1} / 2)"
3040
+ }
3041
+ },
3042
+ action: {
3043
+ p: 4,
3044
+ display: "flex",
3045
+ alignItems: "center",
3046
+ justifyContent: "center"
2284
3047
  },
2285
- itemText: {
2286
- pt: "1px",
2287
- textStyle: "dns-16N-130"
3048
+ content: {
3049
+ height: "full",
3050
+ flexGrow: 1,
3051
+ display: "flex",
3052
+ flexDirection: "column"
3053
+ },
3054
+ title: {
3055
+ /**
3056
+ * mb-4 text-std-20B-150 font-bold group-hover:text-blue-1000 group-hover:decoration-[calc(3/16*1rem)] md:mb-4
3057
+ */
3058
+ textStyle: "std-20B-150",
3059
+ width: "fit-content"
2288
3060
  }
2289
3061
  },
2290
- md: {
2291
- label: { ...legend_default.variants?.size?.md },
2292
- item: { gap: 2 },
2293
- itemControl: {
2294
- "--radio-size": "{spacing.8}",
2295
- borderWidth: "{spacing.0.5}"
3062
+ variants: {
3063
+ variant: {
3064
+ list: { root: { borderBottomWidth: "1px" } },
3065
+ frame: { root: {
3066
+ rounded: 16,
3067
+ borderWidth: "1px"
3068
+ } }
3069
+ },
3070
+ asLink: { true: {
3071
+ main: { position: "relative" },
3072
+ title: { "& > a": { _before: {
3073
+ content: "\"\"",
3074
+ position: "absolute",
3075
+ top: 0,
3076
+ left: 0,
3077
+ width: "full",
3078
+ height: "full",
3079
+ zIndex: 0,
3080
+ cursor: "inherit"
3081
+ } } }
3082
+ } }
3083
+ },
3084
+ defaultVariants: {
3085
+ variant: "list",
3086
+ asLink: false
3087
+ }
3088
+ }),
3089
+ select: (0, _pandacss_dev.defineSlotRecipe)({
3090
+ className: "select",
3091
+ description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
3092
+ slots: _zag_js_select.anatomy.keys(),
3093
+ base: {
3094
+ root: {
3095
+ display: "flex",
3096
+ flexDirection: "column",
3097
+ gap: 1.5
3098
+ },
3099
+ label: { ...label_default.base },
3100
+ control: {
3101
+ /**
3102
+ * relative min-w-80 max-w-full
3103
+ */
3104
+ position: "relative",
3105
+ minWidth: "80px",
3106
+ maxWidth: "full"
3107
+ },
3108
+ trigger: {
3109
+ ...select_box_default.base,
3110
+ /**
3111
+ * adapt to clearTrigger
3112
+ */
3113
+ pr: 20
3114
+ },
3115
+ indicator: {
3116
+ /**
3117
+ * pointer-events-none absolute right-4 top-1/2 -translate-y-1/2
3118
+ */
3119
+ pointerEvents: "none",
3120
+ position: "absolute",
3121
+ top: "50%",
3122
+ transform: "translateY(-50%)",
3123
+ right: 4,
3124
+ /**
3125
+ * ${props['aria-disabled'] ? 'text-solid-gray-420 forced-colors:text-[GrayText]' : 'text-solid-gray-900 forced-colors:text-[CanvasText]'}
3126
+ */
3127
+ color: {
3128
+ base: {
3129
+ base: "solid-gray.900",
3130
+ _highContrast: "CanvasText"
3131
+ },
3132
+ _disabled: {
3133
+ base: "solid-gray.420",
3134
+ _highContrast: "GrayText"
3135
+ }
3136
+ }
3137
+ },
3138
+ clearTrigger: {
3139
+ position: "absolute",
3140
+ top: "50%",
3141
+ right: 12,
3142
+ transform: "translateY(-50%)"
3143
+ },
3144
+ content: { ...menu_default.base?.content },
3145
+ itemGroupLabel: {
3146
+ textStyle: "oln-16N-1",
3147
+ fontWeight: "bold",
3148
+ py: 3,
3149
+ pl: 3,
3150
+ pr: 6
2296
3151
  },
2297
- itemText: {
2298
- pt: 1,
2299
- textStyle: "dns-16N-130"
3152
+ item: { ...menu_default.base?.item },
3153
+ itemIndicator: {
3154
+ pointerEvents: "none",
3155
+ position: "absolute",
3156
+ right: 4,
3157
+ top: "50%",
3158
+ transform: "translateY(-50%)"
2300
3159
  }
2301
3160
  },
2302
- lg: {
2303
- label: { ...legend_default.variants?.size?.lg },
2304
- item: { gap: 3 },
2305
- itemControl: {
2306
- "--radio-size": "{spacing.11}",
2307
- borderWidth: "calc({spacing.1} * 3 / 4)"
3161
+ variants: { size: {
3162
+ lg: {
3163
+ trigger: { ...select_box_default.variants?.size?.lg },
3164
+ label: { ...label_default.variants?.size?.lg }
3165
+ },
3166
+ md: {
3167
+ trigger: { ...select_box_default.variants?.size?.md },
3168
+ label: { ...label_default.variants?.size?.md }
2308
3169
  },
2309
- itemText: {
2310
- pt: 2.5,
2311
- textStyle: "dns-17N-130"
3170
+ sm: {
3171
+ trigger: { ...select_box_default.variants?.size?.sm },
3172
+ label: { ...label_default.variants?.size?.sm }
2312
3173
  }
2313
- }
2314
- } },
2315
- defaultVariants: { size: "sm" }
2316
- });
2317
-
2318
- //#endregion
2319
- //#region src/recipes/resource-list.ts
2320
- var resource_list_default = (0, _pandacss_dev.defineSlotRecipe)({
2321
- className: "resource-list",
2322
- slots: resourceListAnatomy.keys(),
2323
- base: {
2324
- root: {
2325
- display: "flex",
2326
- borderColor: "solid-gray.420",
2327
- overflow: "hidden",
2328
- colorPalette: "keyColor",
2329
- bg: {
2330
- "&:has(input:checked)": "colorPalette.bg",
2331
- _selected: "colorPalette.bg"
3174
+ } },
3175
+ defaultVariants: { size: "lg" }
3176
+ }),
3177
+ stepNavigation: (0, _pandacss_dev.defineSlotRecipe)({
3178
+ className: "step-navigation",
3179
+ slots: _zag_js_steps.anatomy.extendWith("title", "description").keys(),
3180
+ base: {
3181
+ root: {
3182
+ /**
3183
+ * color: var(--color-neutral-solid-gray-800);
3184
+ * font-weight: normal;
3185
+ * font-size: calc(16 / 16 * 1rem);
3186
+ * font-family: var(--font-family-sans);
3187
+ * line-height: 1.7;
3188
+ * letter-spacing: 0.02em;
3189
+ * overflow-wrap: anywhere;
3190
+ */
3191
+ textStyle: "std-16N-170",
3192
+ overflowWrap: "anywhere",
3193
+ colorPalette: "keyColor"
3194
+ },
3195
+ list: {
3196
+ /**
3197
+ * margin: 0;
3198
+ * padding: 0;
3199
+ * list-style-type: none;
3200
+ */
3201
+ m: 0,
3202
+ p: 0,
3203
+ display: "flex",
3204
+ _horizontal: { flexDirection: "row" },
3205
+ _vertical: { flexDirection: "column" }
3206
+ },
3207
+ item: {
3208
+ /**
3209
+ * position: relative;
3210
+ * box-sizing: border-box;
3211
+ */
3212
+ position: "relative",
3213
+ boxSizing: "border-box",
3214
+ _last: { "& [data-part=separator]": { display: "none" } },
3215
+ _horizontal: {
3216
+ /**
3217
+ * width: calc(var(--_step-width, 320) / 16 * 1rem);
3218
+ * min-width: calc(var(--_step-min-width, 160) / 16 * 1rem);
3219
+ * padding: 0 calc(16 / 16 * 1rem);
3220
+ */
3221
+ width: "calc(var(--_step-width, 320) / 16 * 1rem)",
3222
+ minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
3223
+ px: 4
3224
+ },
3225
+ _vertical: {
3226
+ /**
3227
+ * flex: 1;
3228
+ * padding-bottom: calc(24 / 16 * 1rem);
3229
+ */
3230
+ flex: 1,
3231
+ pb: 6
3232
+ }
3233
+ },
3234
+ trigger: {
3235
+ /**
3236
+ * display: block;
3237
+ * border: 0;
3238
+ * background: none;
3239
+ * padding: 0;
3240
+ * color: inherit;
3241
+ * font: inherit;
3242
+ * text-wrap: pretty;
3243
+ */
3244
+ display: "block",
3245
+ borderWidth: 0,
3246
+ bg: "none",
3247
+ p: 0,
3248
+ color: "inherit",
3249
+ font: "inherit",
3250
+ textWrap: "pretty",
3251
+ cursor: "pointer",
3252
+ _horizontal: {
3253
+ /**
3254
+ * width: 100%;
3255
+ * text-align: center;
3256
+ */
3257
+ width: "100%",
3258
+ textAlign: "center"
3259
+ },
3260
+ _vertical: {
3261
+ /**
3262
+ * position: relative;
3263
+ * display: flex;
3264
+ * align-items: baseline;
3265
+ * column-gap: calc(16 / 16 * 1rem);
3266
+ * text-align: left;
3267
+ */
3268
+ position: "relative",
3269
+ display: "flex",
3270
+ alignItems: "baseline",
3271
+ columnGap: 4,
3272
+ textAlign: "left"
3273
+ }
3274
+ },
3275
+ indicator: {
3276
+ /**
3277
+ * position: relative;
3278
+ * display: grid;
3279
+ * place-content: center;
3280
+ * margin: calc(4 / 16 * 1rem);
3281
+ * box-sizing: border-box;
3282
+ * width: fit-content;
3283
+ * height: var(--_number-size);
3284
+ * min-width: var(--_number-size);
3285
+ * border: 2px solid;
3286
+ * border-radius: 50%;
3287
+ * background-color: var(--color-neutral-white);
3288
+ * padding: 0 calc(2 / 16 * 1rem) calc(2 / 16 * 1rem);
3289
+ * font-weight: bold;
3290
+ * font-size: calc(20 / 16 * 1rem);
3291
+ * line-height: 1.5;
3292
+ * letter-spacing: 0.02em;
3293
+ * text-decoration: inherit;
3294
+ * text-decoration-thickness: inherit;
3295
+ */
3296
+ position: "relative",
3297
+ display: "grid",
3298
+ placeContent: "center",
3299
+ m: 1,
3300
+ boxSizing: "border-box",
3301
+ width: "fit-content",
3302
+ height: "var(--_number-size)",
3303
+ minWidth: "var(--_number-size)",
3304
+ color: "colorPalette.primary",
3305
+ borderWidth: "2px",
3306
+ borderRadius: "full",
3307
+ borderColor: "colorPalette.primary",
3308
+ bg: "white",
3309
+ py: 0,
3310
+ px: .5,
3311
+ textStyle: "std-20B-150",
3312
+ textDecoration: "inherit",
3313
+ textDecorationThickness: "inherit",
3314
+ _after: { content: "\"\"" },
3315
+ _current: {
3316
+ /**
3317
+ * background-color: var(--color-neutral-solid-gray-800);
3318
+ * color: var(--color-neutral-white);
3319
+ * border-color: var(--color-neutral-solid-gray-800);
3320
+ */
3321
+ bg: "colorPalette.primary",
3322
+ color: "white",
3323
+ borderColor: "colorPalette.primary",
3324
+ /**
3325
+ * outline: var(--_outline-width) solid var(--color-neutral-solid-gray-800);
3326
+ * outline-offset: calc(2 / 16 * 1rem);
3327
+ * box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-neutral-white);
3328
+ */
3329
+ outlineWidth: "var(--_outline-width)",
3330
+ outlineStyle: "solid",
3331
+ outlineColor: "colorPalette.primary",
3332
+ outlineOffset: .5,
3333
+ boxShadow: "0 0 0 {spacing.0.5} white"
3334
+ },
3335
+ _complete: {
3336
+ bg: "colorPalette.bg",
3337
+ _after: {
3338
+ /**
3339
+ * position: absolute;
3340
+ * top: calc(-10 / 16 * 1rem);
3341
+ * left: calc(50% + calc(6 / 16 * 1rem));
3342
+ * border-radius: 50%;
3343
+ * background-color: var(--color-neutral-white);
3344
+ */
3345
+ position: "absolute",
3346
+ top: -2.5,
3347
+ left: "calc(50% + {spacing.1.5})",
3348
+ borderRadius: "full",
3349
+ bg: "colorPalette.primary",
3350
+ width: "36px",
3351
+ height: "36px",
3352
+ clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
3353
+ }
3354
+ },
3355
+ "[data-orientation=horizontal] > &": {
3356
+ /**
3357
+ * margin-right: auto;
3358
+ * margin-left: auto;
3359
+ */
3360
+ mr: "auto",
3361
+ ml: "auto"
3362
+ },
3363
+ "[data-orientation=vertical] > &": {
3364
+ /**
3365
+ * flex-shrink: 0;
3366
+ */
3367
+ flexShrink: 0,
3368
+ mx: 1
3369
+ }
3370
+ },
3371
+ title: {
3372
+ /**
3373
+ * display: block;
3374
+ * font-weight: bold;
3375
+ * font-size: calc(18 / 16 * 1rem);
3376
+ * line-height: 1.6;
3377
+ * letter-spacing: 0.02em;
3378
+ * text-decoration-thickness: inherit;
3379
+ */
3380
+ display: "block",
3381
+ textStyle: "std-18B-160",
3382
+ textDecorationThickness: "inherit",
3383
+ "[data-orientation=horizontal] &": {
3384
+ /**
3385
+ * margin-top: var(--_title-margin);
3386
+ */
3387
+ mt: "var(--_title-margin)" },
3388
+ "[data-orientation=vertical] &": {
3389
+ /**
3390
+ * padding: calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem) 0;
3391
+ */
3392
+ pt: "calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)",
3393
+ pb: 0
3394
+ }
3395
+ },
3396
+ description: {
3397
+ /**
3398
+ * margin: var(--_description-margin) 0 0;
3399
+ */
3400
+ mt: "var(--_description-margin)",
3401
+ "[data-orientation=horizontal] &": {
3402
+ /**
3403
+ * text-align: center;
3404
+ */
3405
+ textAlign: "center" },
3406
+ "[data-orientation=vertical] &": {
3407
+ /**
3408
+ * margin-top: calc(
3409
+ * var(--_description-margin) -
3410
+ * (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)
3411
+ * );
3412
+ * padding-left: calc(
3413
+ * var(--_number-size) +
3414
+ * var(--_number-margin) +
3415
+ * var(--_number-margin) +
3416
+ * calc(16 / 16 * 1rem)
3417
+ * );
3418
+ */
3419
+ mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
3420
+ pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + {spacing.4})"
3421
+ }
3422
+ },
3423
+ separator: {
3424
+ /**
3425
+ * position: absolute;
3426
+ * z-index: -1;
3427
+ * content: "";
3428
+ */
3429
+ position: "absolute",
3430
+ zIndex: -1,
3431
+ content: "\"\"",
3432
+ borderColor: "colorPalette.primary",
3433
+ _horizontal: {
3434
+ /**
3435
+ * top: calc(var(--_number-size) / 2 + var(--_number-margin));
3436
+ * left: 50%;
3437
+ * width: 50%;
3438
+ * border-bottom: 1px solid;
3439
+ */
3440
+ top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
3441
+ left: "50%",
3442
+ width: "100%",
3443
+ borderBottomWidth: "1px"
3444
+ },
3445
+ _vertical: {
3446
+ /**
3447
+ * left: calc(var(--_number-size) / 2 + var(--_number-margin));
3448
+ * bottom: 0;
3449
+ * height: calc(100% - calc(32 / 16 * 1rem));
3450
+ * border-right: 1px solid;
3451
+ */
3452
+ left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
3453
+ top: "calc(50% - {spacing.4})",
3454
+ height: "100%",
3455
+ borderRightWidth: "1px"
3456
+ }
2332
3457
  }
2333
3458
  },
2334
- main: {
2335
- display: "flex",
2336
- flexGrow: 1,
2337
- flexDirection: "row",
2338
- alignItems: "center",
2339
- justifyContent: "start",
2340
- gap: {
2341
- base: 4,
2342
- md: 6
3459
+ variants: { size: {
3460
+ md: {
3461
+ root: { root: {
3462
+ /**
3463
+ * --_number-size: calc(44 / 16 * 1rem);
3464
+ * --_number-margin: calc(4 / 16 * 1rem);
3465
+ * --_outline-width: calc(2 / 16 * 1rem);
3466
+ * --_title-margin: calc(24 / 16 * 1rem);
3467
+ * --_description-margin: calc(8 / 16 * 1rem);
3468
+ */
3469
+ "--_number-size": "{spacing.11}",
3470
+ "--_number-margin": "{spacing.1}",
3471
+ "--_outline-width": "{spacing.0.5}",
3472
+ "--_title-margin": "{spacing.6}",
3473
+ "--_description-margin": "{spacing.2}"
3474
+ } },
3475
+ indicator: { _after: { transform: "scale(0.5)" } }
2343
3476
  },
2344
- color: "solid-gray.800",
2345
- textStyle: "dns-16N-130",
2346
- py: 4,
2347
- px: {
2348
- base: 4,
2349
- md: 6
3477
+ sm: {
3478
+ root: {
3479
+ /**
3480
+ * --_number-size: calc(32 / 16 * 1rem);
3481
+ * --_number-margin: calc(3 / 16 * 1rem);
3482
+ * --_outline-width: calc(1 / 16 * 1rem);
3483
+ * --_title-margin: calc(16 / 16 * 1rem);
3484
+ * --_description-margin: calc(4 / 16 * 1rem);
3485
+ */
3486
+ "--_number-size": "{spacing.8}",
3487
+ "--_number-margin": "calc({spacing.1} * 3 / 4)",
3488
+ "--_outline-width": "calc({spacing.1} / 4)",
3489
+ "--_title-margin": "{spacing.4}",
3490
+ "--_description-margin": "{spacing.1}"
3491
+ },
3492
+ indicator: {
3493
+ /**
3494
+ * margin: calc(3 / 16 * 1rem);
3495
+ * border-width: 1px;
3496
+ * font-size: calc(16 / 16 * 1rem);
3497
+ */
3498
+ m: "calc({spacing.1} * 3 / 4)",
3499
+ borderWidth: "1px",
3500
+ textStyle: "std-16B-170",
3501
+ "[data-orientation=horizontal] > &": {
3502
+ /**
3503
+ * margin-right: auto;
3504
+ * margin-left: auto;
3505
+ */
3506
+ mr: "auto",
3507
+ ml: "auto"
3508
+ },
3509
+ "[data-orientation=vertical] > &": { mx: 1 },
3510
+ _after: { transform: "scale(0.33)" }
3511
+ },
3512
+ title: {
3513
+ /**
3514
+ * font-weight: bold;
3515
+ * font-size: calc(16 / 16 * 1rem);
3516
+ * line-height: 1.7;
3517
+ * letter-spacing: 0.02em;
3518
+ */
3519
+ textStyle: "std-16B-170" }
3520
+ }
3521
+ } },
3522
+ defaultVariants: { size: "md" }
3523
+ }),
3524
+ supportText: support_text_default,
3525
+ table: (0, _pandacss_dev.defineSlotRecipe)({
3526
+ className: "table",
3527
+ slots: tableAnatomy.keys(),
3528
+ base: {
3529
+ root: {
3530
+ /**
3531
+ * w-full text-std-16N-170
3532
+ */
3533
+ maxWidth: "full",
3534
+ colorPalette: "keyColor"
3535
+ },
3536
+ head: { "& tr": {
3537
+ /**
3538
+ * border-black bg-solid-gray-50
3539
+ */
3540
+ borderColor: "black",
3541
+ bg: "solid-gray.50"
3542
+ } },
3543
+ body: { "& tr": {
3544
+ /**
3545
+ * border-solid-gray-420
3546
+ */
3547
+ borderColor: "solid-gray.420" } },
3548
+ foot: {},
3549
+ row: {
3550
+ /**
3551
+ * border-b
3552
+ */
3553
+ borderBottomWidth: "1px",
3554
+ "tbody > &:has(input:checked)": { bg: "colorPalette.100" }
3555
+ },
3556
+ header: {
3557
+ /**
3558
+ * px-4 text-start align-top
3559
+ */
3560
+ px: 4,
3561
+ verticalAlign: "top",
3562
+ textAlign: "start"
2350
3563
  },
2351
- bg: {
2352
- base: "transparent",
2353
- _hover: "solid-gray.50"
3564
+ cell: {
3565
+ /**
3566
+ * px-4 align-top
3567
+ */
3568
+ px: 4,
3569
+ verticalAlign: "top"
2354
3570
  },
2355
- _focusVisible: {
2356
- outlineStyle: "solid",
2357
- outlineWidth: "4px",
2358
- outlineColor: "black",
2359
- outlineOffset: .5,
2360
- focusBox: "calc({spacing.1} / 2)"
3571
+ caption: {
3572
+ mb: 4,
3573
+ textStyle: "oln-17B-100"
2361
3574
  }
2362
3575
  },
2363
- action: {
2364
- p: 4,
2365
- display: "flex",
2366
- alignItems: "center",
2367
- justifyContent: "center"
2368
- },
2369
- content: {
2370
- height: "full",
2371
- flexGrow: 1,
2372
- display: "flex",
2373
- flexDirection: "column"
3576
+ variants: {
3577
+ dense: {
3578
+ false: {
3579
+ root: { textStyle: "std-16N-170" },
3580
+ header: {
3581
+ /**
3582
+ * py-5
3583
+ */
3584
+ py: 5 },
3585
+ cell: {
3586
+ /**
3587
+ * py-5
3588
+ */
3589
+ py: 5 }
3590
+ },
3591
+ true: {
3592
+ root: { textStyle: "dns-16N-130" },
3593
+ header: {
3594
+ /**
3595
+ * py-2.5
3596
+ */
3597
+ py: 2.5 },
3598
+ cell: {
3599
+ /**
3600
+ * py-2.5
3601
+ */
3602
+ py: 2.5 }
3603
+ }
3604
+ },
3605
+ striped: { true: { body: { "& tr": { _even: { "&:not(:has(input:checked))": { bg: "{colors.colorPalette.bg}/25" } } } } } },
3606
+ hovered: { true: { body: { "& tr": {
3607
+ _hover: { bg: "colorPalette.bg" },
3608
+ _even: { "&:not(:has(input:checked))": { _hover: { bg: "{colors.colorPalette.bg}" } } }
3609
+ } } } }
2374
3610
  },
2375
- title: {
2376
- textStyle: "std-20B-150",
2377
- width: "fit-content"
3611
+ defaultVariants: {
3612
+ dense: false,
3613
+ striped: false,
3614
+ hovered: false
2378
3615
  }
2379
- },
2380
- variants: {
2381
- variant: {
2382
- list: { root: { borderBottomWidth: "1px" } },
2383
- frame: { root: {
2384
- rounded: 16,
2385
- borderWidth: "1px"
2386
- } }
2387
- },
2388
- asLink: { true: {
2389
- main: { position: "relative" },
2390
- title: { "& > a": { _before: {
2391
- content: "\"\"",
2392
- position: "absolute",
2393
- top: 0,
2394
- left: 0,
3616
+ }),
3617
+ tabs: (0, _pandacss_dev.defineSlotRecipe)({
3618
+ className: "tabs",
3619
+ slots: _zag_js_tabs.anatomy.keys(),
3620
+ base: {
3621
+ root: { colorPalette: "keyColor" },
3622
+ list: {
3623
+ /**
3624
+ * flex w-full min-w-max items-end whitespace-nowrap
3625
+ * border-b border-solid-gray-420
3626
+ */
3627
+ display: "flex",
2395
3628
  width: "full",
2396
- height: "full",
3629
+ alignItems: "end",
3630
+ whiteSpace: "nowrap",
3631
+ borderBottomWidth: "1px",
3632
+ borderColor: "solid-gray.420",
3633
+ overflowX: "auto"
3634
+ },
3635
+ trigger: {
3636
+ /**
3637
+ * relative z-0 inline-flex gap-2 justify-center items-center
3638
+ * text-oln-14B-100 md:text-oln-16B-100
3639
+ */
3640
+ position: "relative",
2397
3641
  zIndex: 0,
2398
- cursor: "inherit"
2399
- } } }
2400
- } }
2401
- },
2402
- defaultVariants: {
2403
- variant: "list",
2404
- asLink: false
2405
- }
2406
- });
2407
-
2408
- //#endregion
2409
- //#region src/recipes/select.ts
2410
- /**
2411
- * source:
2412
- * https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Select/Select.tsx
2413
- */
2414
- var select_default = (0, _pandacss_dev.defineSlotRecipe)({
2415
- className: "select",
2416
- description: "セレクトボックスは、複数の選択肢を提供するフォームコントロールです。",
2417
- slots: _zag_js_select.anatomy.keys(),
2418
- base: {
2419
- root: {
2420
- display: "flex",
2421
- flexDirection: "column",
2422
- gap: 1.5
2423
- },
2424
- label: { ...label_default.base },
2425
- control: {
2426
- position: "relative",
2427
- minWidth: "80px",
2428
- maxWidth: "full"
2429
- },
2430
- trigger: {
2431
- ...select_box_default.base,
2432
- pr: 20
2433
- },
2434
- indicator: {
2435
- pointerEvents: "none",
2436
- position: "absolute",
2437
- top: "50%",
2438
- transform: "translateY(-50%)",
2439
- right: 4,
2440
- color: {
2441
- base: {
2442
- base: "solid-gray.900",
2443
- _highContrast: "CanvasText"
3642
+ display: "inline-flex",
3643
+ gap: 2,
3644
+ justifyContent: "center",
3645
+ alignItems: "center",
3646
+ textStyle: {
3647
+ base: "oln-14B-100",
3648
+ md: "oln-16B-100"
2444
3649
  },
2445
- _disabled: {
2446
- base: "solid-gray.420",
2447
- _highContrast: "GrayText"
2448
- }
2449
- }
2450
- },
2451
- clearTrigger: {
2452
- position: "absolute",
2453
- top: "50%",
2454
- right: 12,
2455
- transform: "translateY(-50%)"
2456
- },
2457
- content: { ...menu_default.base?.content },
2458
- itemGroupLabel: {
2459
- textStyle: "oln-16N-1",
2460
- fontWeight: "bold",
2461
- py: 3,
2462
- pl: 3,
2463
- pr: 6
2464
- },
2465
- item: { ...menu_default.base?.item },
2466
- itemIndicator: {
2467
- pointerEvents: "none",
2468
- position: "absolute",
2469
- right: 4,
2470
- top: "50%",
2471
- transform: "translateY(-50%)"
2472
- }
2473
- },
2474
- variants: { size: {
2475
- lg: {
2476
- trigger: { ...select_box_default.variants?.size?.lg },
2477
- label: { ...label_default.variants?.size?.lg }
2478
- },
2479
- md: {
2480
- trigger: { ...select_box_default.variants?.size?.md },
2481
- label: { ...label_default.variants?.size?.md }
2482
- },
2483
- sm: {
2484
- trigger: { ...select_box_default.variants?.size?.sm },
2485
- label: { ...label_default.variants?.size?.sm }
2486
- }
2487
- } },
2488
- defaultVariants: { size: "lg" }
2489
- });
2490
-
2491
- //#endregion
2492
- //#region src/recipes/step-navigation.ts
2493
- /**
2494
- * reference:
2495
- * https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/step-navigation
2496
- */
2497
- var step_navigation_default = (0, _pandacss_dev.defineSlotRecipe)({
2498
- className: "step-navigation",
2499
- slots: _zag_js_steps.anatomy.extendWith("title", "description").keys(),
2500
- base: {
2501
- root: {
2502
- textStyle: "std-16N-170",
2503
- overflowWrap: "anywhere",
2504
- colorPalette: "keyColor"
2505
- },
2506
- list: {
2507
- m: 0,
2508
- p: 0,
2509
- display: "flex",
2510
- _horizontal: { flexDirection: "row" },
2511
- _vertical: { flexDirection: "column" }
2512
- },
2513
- item: {
2514
- position: "relative",
2515
- boxSizing: "border-box",
2516
- _last: { "& [data-part=separator]": { display: "none" } },
2517
- _horizontal: {
2518
- width: "calc(var(--_step-width, 320) / 16 * 1rem)",
2519
- minWidth: "calc(var(--_step-min-width, 160) / 16 * 1rem)",
2520
- px: 4
2521
- },
2522
- _vertical: {
2523
- flex: 1,
2524
- pb: 6
2525
- }
2526
- },
2527
- trigger: {
2528
- display: "block",
2529
- borderWidth: 0,
2530
- bg: "none",
2531
- p: 0,
2532
- color: "inherit",
2533
- font: "inherit",
2534
- textWrap: "pretty",
2535
- cursor: "pointer",
2536
- _horizontal: {
2537
- width: "100%",
2538
- textAlign: "center"
2539
- },
2540
- _vertical: {
2541
- position: "relative",
2542
- display: "flex",
2543
- alignItems: "baseline",
2544
- columnGap: 4,
2545
- textAlign: "left"
2546
- }
2547
- },
2548
- indicator: {
2549
- position: "relative",
2550
- display: "grid",
2551
- placeContent: "center",
2552
- m: 1,
2553
- boxSizing: "border-box",
2554
- width: "fit-content",
2555
- height: "var(--_number-size)",
2556
- minWidth: "var(--_number-size)",
2557
- color: "colorPalette.primary",
2558
- borderWidth: "2px",
2559
- borderRadius: "full",
2560
- borderColor: "colorPalette.primary",
2561
- bg: "white",
2562
- py: 0,
2563
- px: .5,
2564
- textStyle: "std-20B-150",
2565
- textDecoration: "inherit",
2566
- textDecorationThickness: "inherit",
2567
- _after: { content: "\"\"" },
2568
- _current: {
2569
- bg: "colorPalette.primary",
2570
- color: "white",
2571
- borderColor: "colorPalette.primary",
2572
- outlineWidth: "var(--_outline-width)",
2573
- outlineStyle: "solid",
2574
- outlineColor: "colorPalette.primary",
2575
- outlineOffset: .5,
2576
- boxShadow: "0 0 0 {spacing.0.5} white"
2577
- },
2578
- _complete: {
2579
- bg: "colorPalette.bg",
2580
- _after: {
2581
- position: "absolute",
2582
- top: -2.5,
2583
- left: "calc(50% + {spacing.1.5})",
2584
- borderRadius: "full",
2585
- bg: "colorPalette.primary",
2586
- width: "36px",
2587
- height: "36px",
2588
- clipPath: "path('M18 0C8.064 0 0 8.064 0 18C0 27.936 8.064 36 18 36C27.936 36 36 27.936 36 18C36 8.064 27.936 0 18 0Z M14.4 27L5.4 18L7.938 15.462L14.4 21.906L28.062 8.244L30.6 10.8L14.4 27Z')"
3650
+ /**
3651
+ * px-4 py-6 group md:px-8 md:py-6
3652
+ * hover:bg-solid-gray-50 focus-visible:bg-yellow-300
3653
+ * aria-[current=page]:bg-white
3654
+ */
3655
+ px: {
3656
+ base: 4,
3657
+ md: 8
3658
+ },
3659
+ py: 6,
3660
+ cursor: "pointer",
3661
+ bg: {
3662
+ base: "transparent",
3663
+ _hover: "solid-gray.50",
3664
+ _focusVisible: {
3665
+ base: "yellow.300",
3666
+ _hover: "yellow.300"
3667
+ },
3668
+ _selected: {
3669
+ base: "white",
3670
+ _hover: "white",
3671
+ _focusVisible: "yellow.300"
3672
+ }
3673
+ },
3674
+ /**
3675
+ * focus-visible:z-10 focus-visible:rounded-4
3676
+ * focus-visible:outline focus-visible:outline-4
3677
+ * focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:outline-black
3678
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
3679
+ */
3680
+ _focusVisible: {
3681
+ zIndex: 10,
3682
+ rounded: 4,
3683
+ outlineStyle: "solid",
3684
+ outlineWidth: "4px",
3685
+ outlineColor: "black",
3686
+ outlineOffset: .5,
3687
+ focusBox: "calc({spacing.1} / 2)"
3688
+ },
3689
+ _selected: {
3690
+ /**
3691
+ * relative text-blue-900
3692
+ * after:absolute after:bottom-0 after:left-0 after:w-full after:border-b-4
3693
+ * after:border-current
3694
+ * aria-[current=page]:cursor-default
3695
+ */
3696
+ color: "colorPalette.primary",
3697
+ cursor: "default",
3698
+ _after: {
3699
+ content: "\"\"",
3700
+ position: "absolute",
3701
+ bottom: 0,
3702
+ left: 0,
3703
+ width: "full",
3704
+ borderBottomWidth: "4px",
3705
+ borderBlockColor: "currentcolor"
3706
+ }
2589
3707
  }
2590
- },
2591
- "[data-orientation=horizontal] > &": {
2592
- mr: "auto",
2593
- ml: "auto"
2594
- },
2595
- "[data-orientation=vertical] > &": {
2596
- flexShrink: 0,
2597
- mx: 1
2598
- }
2599
- },
2600
- title: {
2601
- display: "block",
2602
- textStyle: "std-18B-160",
2603
- textDecorationThickness: "inherit",
2604
- "[data-orientation=horizontal] &": { mt: "var(--_title-margin)" },
2605
- "[data-orientation=vertical] &": {
2606
- pt: "calc(var(--_number-size) / 2 + var(--_number-margin) - 0.875rem)",
2607
- pb: 0
2608
- }
2609
- },
2610
- description: {
2611
- mt: "var(--_description-margin)",
2612
- "[data-orientation=horizontal] &": { textAlign: "center" },
2613
- "[data-orientation=vertical] &": {
2614
- mt: "calc(var(--_description-margin) - (var(--_number-size) / 2 + var(--_number-margin) - 0.875rem))",
2615
- pl: "calc(var(--_number-size) + var(--_number-margin) + var(--_number-margin) + {spacing.4})"
2616
- }
2617
- },
2618
- separator: {
2619
- position: "absolute",
2620
- zIndex: -1,
2621
- content: "\"\"",
2622
- borderColor: "colorPalette.primary",
2623
- _horizontal: {
2624
- top: "calc(var(--_number-size) / 2 + var(--_number-margin))",
2625
- left: "50%",
2626
- width: "100%",
2627
- borderBottomWidth: "1px"
2628
- },
2629
- _vertical: {
2630
- left: "calc(var(--_number-size) / 2 + var(--_number-margin))",
2631
- top: "calc(50% - {spacing.4})",
2632
- height: "100%",
2633
- borderRightWidth: "1px"
2634
3708
  }
2635
3709
  }
2636
- },
2637
- variants: { size: {
2638
- md: {
2639
- root: { root: {
2640
- "--_number-size": "{spacing.11}",
2641
- "--_number-margin": "{spacing.1}",
2642
- "--_outline-width": "{spacing.0.5}",
2643
- "--_title-margin": "{spacing.6}",
2644
- "--_description-margin": "{spacing.2}"
3710
+ }),
3711
+ textarea: textarea_default,
3712
+ treeView: (0, _pandacss_dev.defineSlotRecipe)({
3713
+ className: "tree-view",
3714
+ slots: _zag_js_tree_view.anatomy.keys(),
3715
+ base: {
3716
+ root: {},
3717
+ label: {
3718
+ py: 3,
3719
+ pl: 3,
3720
+ pr: 6,
3721
+ textStyle: "oln-17B-100",
3722
+ textWrap: "nowrap",
3723
+ display: "block"
3724
+ },
3725
+ tree: {},
3726
+ item: { ...menu_item_default.base },
3727
+ itemIndicator: { _empty: {
3728
+ _before: {
3729
+ content: "\"\"",
3730
+ display: "block",
3731
+ width: "24px",
3732
+ height: "24px",
3733
+ bg: "black",
3734
+ clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
3735
+ },
3736
+ _selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
2645
3737
  } },
2646
- indicator: { _after: { transform: "scale(0.5)" } }
3738
+ itemText: { flexGrow: 1 },
3739
+ branch: {},
3740
+ branchControl: { ...menu_item_default.base },
3741
+ branchTrigger: {},
3742
+ branchContent: {
3743
+ my: 1,
3744
+ pl: 8
3745
+ },
3746
+ branchIndicator: { _empty: {
3747
+ _before: {
3748
+ content: "\"\"",
3749
+ display: "block",
3750
+ width: "24px",
3751
+ height: "24px",
3752
+ bg: "black",
3753
+ clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
3754
+ },
3755
+ _selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } },
3756
+ _open: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
3757
+ } },
3758
+ branchText: { flexGrow: 1 }
2647
3759
  },
2648
- sm: {
2649
- root: {
2650
- "--_number-size": "{spacing.8}",
2651
- "--_number-margin": "calc({spacing.1} * 3 / 4)",
2652
- "--_outline-width": "calc({spacing.1} / 4)",
2653
- "--_title-margin": "{spacing.4}",
2654
- "--_description-margin": "{spacing.1}"
2655
- },
2656
- indicator: {
2657
- m: "calc({spacing.1} * 3 / 4)",
2658
- borderWidth: "1px",
2659
- textStyle: "std-16B-170",
2660
- "[data-orientation=horizontal] > &": {
2661
- mr: "auto",
2662
- ml: "auto"
3760
+ variants: {
3761
+ variant: {
3762
+ standard: {
3763
+ item: { ...menu_item_default.variants?.variant?.standard },
3764
+ branchControl: { ...menu_item_default.variants?.variant?.standard }
2663
3765
  },
2664
- "[data-orientation=vertical] > &": { mx: 1 },
2665
- _after: { transform: "scale(0.33)" }
3766
+ boxed: {
3767
+ item: { ...menu_item_default.variants?.variant?.boxed },
3768
+ branchControl: { ...menu_item_default.variants?.variant?.boxed }
3769
+ }
2666
3770
  },
2667
- title: { textStyle: "std-16B-170" }
2668
- }
2669
- } },
2670
- defaultVariants: { size: "md" }
2671
- });
2672
-
2673
- //#endregion
2674
- //#region src/recipes/table.ts
2675
- /**
2676
- * source:
2677
- * https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/Table/Table.stories.tsx
2678
- */
2679
- var table_default = (0, _pandacss_dev.defineSlotRecipe)({
2680
- className: "table",
2681
- slots: tableAnatomy.keys(),
2682
- base: {
2683
- root: {
2684
- maxWidth: "full",
2685
- colorPalette: "keyColor"
2686
- },
2687
- head: { "& tr": {
2688
- borderColor: "black",
2689
- bg: "solid-gray.50"
2690
- } },
2691
- body: { "& tr": { borderColor: "solid-gray.420" } },
2692
- foot: {},
2693
- row: {
2694
- borderBottomWidth: "1px",
2695
- "tbody > &:has(input:checked)": { bg: "colorPalette.100" }
2696
- },
2697
- header: {
2698
- px: 4,
2699
- verticalAlign: "top",
2700
- textAlign: "start"
2701
- },
2702
- cell: {
2703
- px: 4,
2704
- verticalAlign: "top"
2705
- },
2706
- caption: {
2707
- mb: 4,
2708
- textStyle: "oln-17B-100"
3771
+ isCondensed: {
3772
+ true: {
3773
+ label: {
3774
+ py: 1.5,
3775
+ pl: 1.5,
3776
+ pr: 4
3777
+ },
3778
+ item: { ...menu_item_default.variants?.isCondensed?.true },
3779
+ branchControl: { ...menu_item_default.variants?.isCondensed?.true }
3780
+ },
3781
+ false: {
3782
+ item: { ...menu_item_default.variants?.isCondensed?.false },
3783
+ branchControl: { ...menu_item_default.variants?.isCondensed?.false }
3784
+ }
3785
+ }
2709
3786
  }
2710
- },
2711
- variants: {
2712
- dense: {
2713
- false: {
2714
- root: { textStyle: "std-16N-170" },
2715
- header: { py: 5 },
2716
- cell: { py: 5 }
2717
- },
2718
- true: {
2719
- root: { textStyle: "dns-16N-130" },
2720
- header: { py: 2.5 },
2721
- cell: { py: 2.5 }
3787
+ }),
3788
+ unorderedList: (0, _pandacss_dev.defineRecipe)({
3789
+ className: "unordered-list",
3790
+ base: {
3791
+ /**
3792
+ * pl-8 list-[revert]
3793
+ */
3794
+ pl: 8,
3795
+ listStyle: "revert",
3796
+ /**
3797
+ * [&_:where(ol,ul)]:mt-1 [&_:where(ol,ul)]:-mb-1
3798
+ */
3799
+ "&:where(ol,ul)": {
3800
+ mt: 1,
3801
+ mb: -1
2722
3802
  }
2723
- },
2724
- striped: { true: { body: { "& tr": { _even: { "&:not(:has(input:checked))": { bg: "{colors.colorPalette.bg}/25" } } } } } },
2725
- hovered: { true: { body: { "& tr": {
2726
- _hover: { bg: "colorPalette.bg" },
2727
- _even: { "&:not(:has(input:checked))": { _hover: { bg: "{colors.colorPalette.bg}" } } }
2728
- } } } }
2729
- },
2730
- defaultVariants: {
2731
- dense: false,
2732
- striped: false,
2733
- hovered: false
2734
- }
2735
- });
2736
-
2737
- //#endregion
2738
- //#region src/recipes/tabs.ts
2739
- var tabs_default = (0, _pandacss_dev.defineSlotRecipe)({
2740
- className: "tabs",
2741
- slots: _zag_js_tabs.anatomy.keys(),
2742
- base: {
2743
- root: { colorPalette: "keyColor" },
2744
- list: {
2745
- display: "flex",
2746
- width: "full",
2747
- alignItems: "end",
2748
- whiteSpace: "nowrap",
2749
- borderBottomWidth: "1px",
2750
- borderColor: "solid-gray.420",
2751
- overflowX: "auto"
2752
- },
2753
- trigger: {
2754
- position: "relative",
2755
- zIndex: 0,
2756
- display: "inline-flex",
2757
- gap: 2,
2758
- justifyContent: "center",
2759
- alignItems: "center",
2760
- textStyle: {
2761
- base: "oln-14B-100",
2762
- md: "oln-16B-100"
2763
- },
2764
- px: {
2765
- base: 4,
2766
- md: 8
3803
+ }
3804
+ }),
3805
+ utilityLink: (0, _pandacss_dev.defineRecipe)({
3806
+ className: "utility-link",
3807
+ description: "ユーティリティリンクはふつうの横並びリンクリストに近いが、それよりもコンパクトに作られています。",
3808
+ base: {
3809
+ colorPalette: "keyColor",
3810
+ /**
3811
+ * !text-solid-gray-800 text-dns-16N-130
3812
+ * focus-visible:bg-yellow-300 focus-visible:text-blue-1000
3813
+ */
3814
+ textStyle: "dns-16N-130",
3815
+ color: {
3816
+ base: "solid-gray.800",
3817
+ _focusVisible: "colorPalette.primary.100"
2767
3818
  },
2768
- py: 6,
2769
- cursor: "pointer",
2770
3819
  bg: {
2771
3820
  base: "transparent",
2772
- _hover: "solid-gray.50",
2773
- _focusVisible: {
2774
- base: "yellow.300",
2775
- _hover: "yellow.300"
2776
- },
2777
- _selected: {
2778
- base: "white",
2779
- _hover: "white",
2780
- _focusVisible: "yellow.300"
2781
- }
3821
+ _focusVisible: "yellow.300"
2782
3822
  },
3823
+ /**
3824
+ * underline underline-offset-[calc(3/16*1rem)]
3825
+ * hover:decoration-[calc(3/16*1rem)]
3826
+ */
3827
+ textDecoration: "underline",
3828
+ textDecorationThickness: {
3829
+ base: "1px",
3830
+ _hover: "calc(3 / 16 * 1rem)"
3831
+ },
3832
+ textUnderlineOffset: "calc(3 / 16 * 1rem)",
3833
+ /**
3834
+ * focus-visible:rounded-4
3835
+ * focus-visible:outline focus-visible:outline-4
3836
+ * focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)]
3837
+ * focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
3838
+ */
2783
3839
  _focusVisible: {
2784
- zIndex: 10,
2785
3840
  rounded: 4,
2786
3841
  outlineStyle: "solid",
2787
3842
  outlineWidth: "4px",
@@ -2789,244 +3844,92 @@ var tabs_default = (0, _pandacss_dev.defineSlotRecipe)({
2789
3844
  outlineOffset: .5,
2790
3845
  focusBox: "calc({spacing.1} / 2)"
2791
3846
  },
2792
- _selected: {
2793
- color: "colorPalette.primary",
2794
- cursor: "default",
2795
- _after: {
2796
- content: "\"\"",
2797
- position: "absolute",
2798
- bottom: 0,
2799
- left: 0,
2800
- width: "full",
2801
- borderBottomWidth: "4px",
2802
- borderBlockColor: "currentcolor"
2803
- }
2804
- }
2805
- }
2806
- }
2807
- });
2808
-
2809
- //#endregion
2810
- //#region src/recipes/tree-view.ts
2811
- var tree_view_default = (0, _pandacss_dev.defineSlotRecipe)({
2812
- className: "tree-view",
2813
- slots: _zag_js_tree_view.anatomy.keys(),
2814
- base: {
2815
- root: {},
2816
- label: {
2817
- py: 3,
2818
- pl: 3,
2819
- pr: 6,
2820
- textStyle: "oln-17B-100",
2821
- textWrap: "nowrap",
2822
- display: "block"
2823
- },
2824
- tree: {},
2825
- item: { ...menu_item_default.base },
2826
- itemIndicator: { _empty: {
2827
- _before: {
2828
- content: "\"\"",
2829
- display: "block",
2830
- width: "24px",
2831
- height: "24px",
2832
- bg: "black",
2833
- clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
2834
- },
2835
- _selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
2836
- } },
2837
- itemText: { flexGrow: 1 },
2838
- branch: {},
2839
- branchControl: { ...menu_item_default.base },
2840
- branchTrigger: {},
2841
- branchContent: {
2842
- my: 1,
2843
- pl: 8
2844
- },
2845
- branchIndicator: { _empty: {
2846
- _before: {
2847
- content: "\"\"",
2848
- display: "block",
2849
- width: "24px",
2850
- height: "24px",
2851
- bg: "black",
2852
- clipPath: "path('M12 19L5 12L12 5L19 12L12 19Z')"
2853
- },
2854
- _selected: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } },
2855
- _open: { _before: { clipPath: "path('M12 19L5 12L12 5L19 12L12 19ZM12 16.15L16.15 12L12 7.85L7.85 12L12 16.15Z')" } }
2856
- } },
2857
- branchText: { flexGrow: 1 }
2858
- },
2859
- variants: {
2860
- variant: {
2861
- standard: {
2862
- item: { ...menu_item_default.variants?.variant?.standard },
2863
- branchControl: { ...menu_item_default.variants?.variant?.standard }
2864
- },
2865
- boxed: {
2866
- item: { ...menu_item_default.variants?.variant?.boxed },
2867
- branchControl: { ...menu_item_default.variants?.variant?.boxed }
2868
- }
2869
- },
2870
- isCondensed: {
2871
- true: {
2872
- label: {
2873
- py: 1.5,
2874
- pl: 1.5,
2875
- pr: 4
2876
- },
2877
- item: { ...menu_item_default.variants?.isCondensed?.true },
2878
- branchControl: { ...menu_item_default.variants?.isCondensed?.true }
2879
- },
2880
- false: {
2881
- item: { ...menu_item_default.variants?.isCondensed?.false },
2882
- branchControl: { ...menu_item_default.variants?.isCondensed?.false }
3847
+ /**
3848
+ * with icon
3849
+ */
3850
+ display: "inline-flex",
3851
+ alignItems: "center",
3852
+ gap: 1,
3853
+ "& svg": {
3854
+ width: "1em",
3855
+ height: "1em"
2883
3856
  }
2884
3857
  }
2885
- }
2886
- });
2887
-
2888
- //#endregion
2889
- //#region src/recipes/unordered-list.ts
2890
- var unordered_list_default = (0, _pandacss_dev.defineRecipe)({
2891
- className: "unordered-list",
2892
- base: {
2893
- pl: 8,
2894
- listStyle: "revert",
2895
- "&:where(ol,ul)": {
2896
- mt: 1,
2897
- mb: -1
2898
- }
2899
- }
2900
- });
2901
-
2902
- //#endregion
2903
- //#region src/recipes/utility-link.ts
2904
- /**
2905
- * https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/components/UtilityLink/UtilityLink.tsx
2906
- */
2907
- var utility_link_default = (0, _pandacss_dev.defineRecipe)({
2908
- className: "utility-link",
2909
- description: "ユーティリティリンクはふつうの横並びリンクリストに近いが、それよりもコンパクトに作られています。",
2910
- base: {
2911
- colorPalette: "keyColor",
2912
- textStyle: "dns-16N-130",
2913
- color: {
2914
- base: "solid-gray.800",
2915
- _focusVisible: "colorPalette.primary.100"
2916
- },
2917
- bg: {
2918
- base: "transparent",
2919
- _focusVisible: "yellow.300"
2920
- },
2921
- textDecoration: "underline",
2922
- textDecorationThickness: {
2923
- base: "1px",
2924
- _hover: "calc(3 / 16 * 1rem)"
2925
- },
2926
- textUnderlineOffset: "calc(3 / 16 * 1rem)",
2927
- _focusVisible: {
2928
- rounded: 4,
2929
- outlineStyle: "solid",
2930
- outlineWidth: "4px",
2931
- outlineColor: "black",
2932
- outlineOffset: .5,
2933
- focusBox: "calc({spacing.1} / 2)"
2934
- },
2935
- display: "inline-flex",
2936
- alignItems: "center",
2937
- gap: 1,
2938
- "& svg": {
2939
- width: "1em",
2940
- height: "1em"
2941
- }
2942
- }
2943
- });
2944
-
2945
- //#endregion
2946
- //#region src/recipes/index.ts
2947
- const recipes = {
2948
- accordion: accordion_default,
2949
- blockquote: blockquote_default,
2950
- breadcrumb: breadcrumb_default,
2951
- button: button_default,
2952
- card: card_default,
2953
- checkbox: checkbox_default,
2954
- chipLabel: chip_label_default,
2955
- chipTag: chip_tag_default,
2956
- datePicker: date_picker_default,
2957
- descriptionList: description_list_default,
2958
- disclosure: disclosure_default,
2959
- digitalGoDivider: divider_default,
2960
- drawer: drawer_default,
2961
- emergencyBanner: emergency_banner_default,
2962
- errorText: error_text_default,
2963
- field: field_default,
2964
- fieldset: fieldset_default,
2965
- fileUpload: file_upload_default,
2966
- hamburgerMenuButton: hamburger_menu_button_default,
2967
- input: input_default,
2968
- label: label_default,
2969
- legend: legend_default,
2970
- link: link_default,
2971
- list: list_default,
2972
- menu: menu_default,
2973
- menuItem: menu_item_default,
2974
- menuList: menu_list_default,
2975
- notificationBanner: notification_banner_default,
2976
- orderedList: ordered_list_default,
2977
- progress: progress_default,
2978
- radioGroup: radio_group_default,
2979
- requirementBadge: requirement_badge_default,
2980
- resourceList: resource_list_default,
2981
- select: select_default,
2982
- stepNavigation: step_navigation_default,
2983
- supportText: support_text_default,
2984
- table: table_default,
2985
- tabs: tabs_default,
2986
- textarea: textarea_default,
2987
- treeView: tree_view_default,
2988
- unorderedList: unordered_list_default,
2989
- utilityLink: utility_link_default
3858
+ })
2990
3859
  };
2991
- var recipes_default = recipes;
2992
-
2993
- //#endregion
2994
- //#region src/keyframes.ts
2995
- const keyframes = {
2996
- "circular-progress": {
2997
- "0%": {
2998
- strokeDasharray: "1, 400",
2999
- strokeDashoffset: "0"
3000
- },
3001
- "50%": {
3002
- strokeDasharray: "400, 400",
3003
- strokeDashoffset: "-100%"
3004
- },
3005
- "100%": {
3006
- strokeDasharray: "400, 400",
3007
- strokeDashoffset: "-260%"
3008
- }
3009
- },
3010
- position: {
3011
- from: {
3012
- insetInlineStart: "var(--animate-from-x)",
3013
- insetBlockStart: "var(--animate-from-y)"
3014
- },
3015
- to: {
3016
- insetInlineStart: "var(--animate-to-x)",
3017
- insetBlockStart: "var(--animate-to-y)"
3018
- }
3019
- }
3020
- };
3021
-
3022
3860
  //#endregion
3023
3861
  //#region src/index.ts
3024
3862
  const base = {
3025
3863
  name: "digital-go-pandacss-preset",
3026
3864
  presets: [_cieloazul310_digital_go_pandacss_plugin.default],
3027
3865
  theme: {
3028
- keyframes,
3029
- recipes: recipes_default
3866
+ keyframes: {
3867
+ "circular-progress": {
3868
+ "0%": {
3869
+ strokeDasharray: "1, 400",
3870
+ strokeDashoffset: "0"
3871
+ },
3872
+ "50%": {
3873
+ strokeDasharray: "400, 400",
3874
+ strokeDashoffset: "-100%"
3875
+ },
3876
+ "100%": {
3877
+ strokeDasharray: "400, 400",
3878
+ strokeDashoffset: "-260%"
3879
+ }
3880
+ },
3881
+ position: {
3882
+ from: {
3883
+ insetInlineStart: "var(--animate-from-x)",
3884
+ insetBlockStart: "var(--animate-from-y)"
3885
+ },
3886
+ to: {
3887
+ insetInlineStart: "var(--animate-to-x)",
3888
+ insetBlockStart: "var(--animate-to-y)"
3889
+ }
3890
+ },
3891
+ "fade-in": {
3892
+ from: { opacity: 0 },
3893
+ to: { opacity: 1 }
3894
+ },
3895
+ "fade-out": {
3896
+ from: { opacity: 1 },
3897
+ to: { opacity: 0 }
3898
+ },
3899
+ "slide-in-bottom": {
3900
+ from: { transform: "translate3d(0, 100%, 0)" },
3901
+ to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
3902
+ },
3903
+ "slide-out-bottom": {
3904
+ from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
3905
+ to: { transform: "translate3d(0, 100%, 0)" }
3906
+ },
3907
+ "slide-in-top": {
3908
+ from: { transform: "translate3d(0, -100%, 0)" },
3909
+ to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
3910
+ },
3911
+ "slide-out-top": {
3912
+ from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
3913
+ to: { transform: "translate3d(0, -100%, 0)" }
3914
+ },
3915
+ "slide-in-left": {
3916
+ from: { transform: "translate3d(-100%, 0, 0)" },
3917
+ to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
3918
+ },
3919
+ "slide-out-left": {
3920
+ from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
3921
+ to: { transform: "translate3d(-100%, 0, 0)" }
3922
+ },
3923
+ "slide-in-right": {
3924
+ from: { transform: "translate3d(100%, 0, 0)" },
3925
+ to: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" }
3926
+ },
3927
+ "slide-out-right": {
3928
+ from: { transform: "translate3d(var(--drawer-translate-x, 0), var(--drawer-translate-y, 0), 0)" },
3929
+ to: { transform: "translate3d(100%, 0, 0)" }
3930
+ }
3931
+ },
3932
+ recipes
3030
3933
  }
3031
3934
  };
3032
3935
  var src_default = (0, _pandacss_dev.definePreset)(base);
@@ -3037,7 +3940,6 @@ const createPreset = (keyColor = "blue") => (0, _pandacss_dev.definePreset)({
3037
3940
  extend: { semanticTokens: { colors: { keyColor: (0, _cieloazul310_digital_go_pandacss_utils.createKeyColor)(keyColor) } } }
3038
3941
  }
3039
3942
  });
3040
-
3041
3943
  //#endregion
3042
3944
  exports.createPreset = createPreset;
3043
- exports.default = src_default;
3945
+ exports.default = src_default;