@nurihaus/web-design-system 3.7.0 → 3.9.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 (143) hide show
  1. package/README.md +15 -4
  2. package/dist/ai/components.md +658 -12
  3. package/dist/ai/motion.md +431 -0
  4. package/dist/ai/tokens.md +93 -4
  5. package/dist/avatar.js +5 -3
  6. package/dist/bottom-bar.js +261 -0
  7. package/dist/bottom-nav.js +10 -57
  8. package/dist/breadcrumb.js +7 -5
  9. package/dist/callout.js +5 -3
  10. package/dist/card.js +278 -0
  11. package/dist/check-box.js +7 -5
  12. package/dist/chip-group.js +6 -4
  13. package/dist/chunk-1176.js +24 -0
  14. package/dist/chunk-3274.js +71 -0
  15. package/dist/chunk-345.js +72 -0
  16. package/dist/chunk-3547.js +56 -0
  17. package/dist/chunk-6459.js +107 -0
  18. package/dist/{chunk-6364.js → chunk-7335.js} +2 -67
  19. package/dist/chunk-7653.js +4 -0
  20. package/dist/chunk-910.js +26 -13
  21. package/dist/chunk-9497.js +66 -0
  22. package/dist/collapsible-menu.js +6 -4
  23. package/dist/components/badge/badge-props.d.ts +4 -4
  24. package/dist/components/badge/badge.stories.d.ts +1 -1
  25. package/dist/components/bottom-bar/base-bottom-bar.d.ts +4 -0
  26. package/dist/components/bottom-bar/bottom-bar-props.d.ts +1 -0
  27. package/dist/components/bottom-bar/bottom-bar-type.d.ts +3 -0
  28. package/dist/components/bottom-bar/bottom-bar.d.ts +6 -0
  29. package/dist/components/bottom-bar/bottom-bar.stories.d.ts +282 -0
  30. package/dist/components/button/button-type.d.ts +3 -1
  31. package/dist/components/button/button.stories.d.ts +1 -0
  32. package/dist/components/card/base-card.d.ts +3 -0
  33. package/dist/components/card/card-props.d.ts +9 -0
  34. package/dist/components/card/card-type.d.ts +8 -0
  35. package/dist/components/card/card.d.ts +5 -0
  36. package/dist/components/card/card.stories.d.ts +24 -0
  37. package/dist/components/description-list/base-description-list.d.ts +4 -0
  38. package/dist/components/description-list/description-list-props.d.ts +1 -0
  39. package/dist/components/description-list/description-list-type.d.ts +13 -0
  40. package/dist/components/description-list/description-list.d.ts +5 -0
  41. package/dist/components/description-list/description-list.stories.d.ts +20 -0
  42. package/dist/components/empty-state/base-empty-state.d.ts +4 -0
  43. package/dist/components/empty-state/empty-state-props.d.ts +10 -0
  44. package/dist/components/empty-state/empty-state-type.d.ts +14 -0
  45. package/dist/components/empty-state/empty-state.d.ts +5 -0
  46. package/dist/components/empty-state/empty-state.stories.d.ts +300 -0
  47. package/dist/components/icon/icon-paths.d.ts +4 -0
  48. package/dist/components/icon/icon.stories.d.ts +1 -1
  49. package/dist/components/icon-button/base-icon-button.d.ts +3 -0
  50. package/dist/components/icon-button/icon-button-props.d.ts +12 -0
  51. package/dist/components/icon-button/icon-button-type.d.ts +16 -0
  52. package/dist/components/icon-button/icon-button.d.ts +5 -0
  53. package/dist/components/icon-button/icon-button.stories.d.ts +31 -0
  54. package/dist/components/list/base-list.d.ts +7 -0
  55. package/dist/components/list/list-group.d.ts +5 -0
  56. package/dist/components/list/list-group.stories.d.ts +14 -0
  57. package/dist/components/list/list-props.d.ts +2 -0
  58. package/dist/components/list/list-row.d.ts +5 -0
  59. package/dist/components/list/list-row.stories.d.ts +304 -0
  60. package/dist/components/list/list-type.d.ts +25 -0
  61. package/dist/components/media/base-media.d.ts +16 -0
  62. package/dist/components/media/media-props.d.ts +5 -0
  63. package/dist/components/media/media-thumbnail.d.ts +4 -0
  64. package/dist/components/media/media-thumbnail.stories.d.ts +34 -0
  65. package/dist/components/media/media-type.d.ts +43 -0
  66. package/dist/components/media/media-viewer.d.ts +4 -0
  67. package/dist/components/media/media-viewer.stories.d.ts +24 -0
  68. package/dist/components/message/base-message.d.ts +11 -0
  69. package/dist/components/message/message-event.d.ts +6 -0
  70. package/dist/components/message/message-props.d.ts +17 -0
  71. package/dist/components/message/message-thread.d.ts +6 -0
  72. package/dist/components/message/message-type.d.ts +21 -0
  73. package/dist/components/message/message.d.ts +5 -0
  74. package/dist/components/message/message.stories.d.ts +313 -0
  75. package/dist/components/message-composer/base-message-composer.d.ts +11 -0
  76. package/dist/components/message-composer/message-composer-props.d.ts +1 -0
  77. package/dist/components/message-composer/message-composer-type.d.ts +31 -0
  78. package/dist/components/message-composer/message-composer.d.ts +5 -0
  79. package/dist/components/message-composer/message-composer.stories.d.ts +46 -0
  80. package/dist/components/motion/motion-provider.d.ts +5 -0
  81. package/dist/components/motion/motion-type.d.ts +6 -0
  82. package/dist/components/motion/motion.d.ts +2 -0
  83. package/dist/components/motion/motion.stories.d.ts +23 -0
  84. package/dist/components/notice/base-notice.d.ts +4 -0
  85. package/dist/components/notice/notice-props.d.ts +16 -0
  86. package/dist/components/notice/notice-type.d.ts +21 -0
  87. package/dist/components/notice/notice.d.ts +5 -0
  88. package/dist/components/notice/notice.stories.d.ts +304 -0
  89. package/dist/components/radio/base-radio.d.ts +2 -1
  90. package/dist/components/radio/radio-props.d.ts +9 -1
  91. package/dist/components/radio/radio-type.d.ts +9 -0
  92. package/dist/components/radio/radio.stories.d.ts +10 -0
  93. package/dist/components/tag/base-tag.d.ts +8 -0
  94. package/dist/components/tag/tag-props.d.ts +1 -0
  95. package/dist/components/tag/tag-type.d.ts +20 -0
  96. package/dist/components/tag/tag.d.ts +4 -0
  97. package/dist/components/tag/tag.stories.d.ts +14 -0
  98. package/dist/components.css +1330 -171
  99. package/dist/cta-button.js +38 -21
  100. package/dist/data-table.js +5 -3
  101. package/dist/description-list.js +274 -0
  102. package/dist/drawer.js +7 -5
  103. package/dist/drop-down.js +8 -6
  104. package/dist/empty-state.js +300 -0
  105. package/dist/helpers/utils/fillLinkChild.d.ts +6 -0
  106. package/dist/icon-button.js +338 -0
  107. package/dist/icon-text-badge.js +11 -9
  108. package/dist/icon-text-option-badge.js +8 -6
  109. package/dist/icon.js +7 -4
  110. package/dist/index.d.ts +30 -2
  111. package/dist/index.js +2482 -223
  112. package/dist/list-group.js +253 -0
  113. package/dist/list-row.js +308 -0
  114. package/dist/loading.js +6 -4
  115. package/dist/media-thumbnail.js +412 -0
  116. package/dist/media-viewer.js +274 -0
  117. package/dist/message-composer.js +399 -0
  118. package/dist/message-event.js +216 -0
  119. package/dist/message-thread.js +216 -0
  120. package/dist/message.js +271 -0
  121. package/dist/modal-with-double-button.js +15 -11
  122. package/dist/modal.js +9 -7
  123. package/dist/motion.js +52 -0
  124. package/dist/notice.js +346 -0
  125. package/dist/option-badge.js +11 -9
  126. package/dist/pagination.js +8 -6
  127. package/dist/radio.js +114 -30
  128. package/dist/skeleton.js +4 -2
  129. package/dist/step-progress.js +4 -2
  130. package/dist/styles.css +1215 -130
  131. package/dist/switch.js +6 -4
  132. package/dist/tabs.js +5 -3
  133. package/dist/tag.js +311 -0
  134. package/dist/text-area.js +8 -6
  135. package/dist/text-field.js +8 -6
  136. package/dist/text.js +5 -3
  137. package/dist/toast.js +15 -11
  138. package/dist/tokens/generated/index.d.ts +1 -0
  139. package/dist/tokens/generated/motion.d.ts +153 -0
  140. package/dist/tokens.css +122 -2
  141. package/dist/tokens.js +156 -1
  142. package/dist/tooltip.js +6 -4
  143. package/package.json +67 -1
package/dist/tokens.css CHANGED
@@ -150,6 +150,74 @@
150
150
  --line-height-4xl: 43px;
151
151
  --line-height-5xl: 66px;
152
152
  --line-height-6xl: 82px;
153
+ --duration-xs: 120ms;
154
+ --duration-s: 160ms;
155
+ --duration-m: 240ms;
156
+ --duration-l: 350ms;
157
+ --duration-xl: 500ms;
158
+ --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
159
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
160
+ --ease-in-out: cubic-bezier(0.4, 0, 0.1, 1);
161
+ --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
162
+ --ease-symmetric: cubic-bezier(0.5, 0, 0.5, 1);
163
+ --ease-linear: linear;
164
+ --ease-spring-rapid: linear(0, 0.0273, 0.0945, 0.184, 0.2834, 0.384, 0.4804, 0.5691, 0.6483, 0.7174, 0.7764, 0.8259, 0.8667, 0.8999, 0.9264, 0.9473, 0.9634, 0.9757, 0.9849, 0.9916, 0.9964, 0.9996, 1.0017, 1.003, 1.0037, 1.0039, 1.0039, 1.0037, 1.0033, 1.003, 1.0026, 1.0022, 1.0018, 1.0015, 1.0012, 1.001, 1.0007, 1.0006, 1.0004, 1.0003, 1);
165
+ --duration-spring-rapid: 318ms;
166
+ --ease-spring-quick: linear(0, 0.024, 0.0825, 0.1604, 0.247, 0.3352, 0.4205, 0.5002, 0.5728, 0.6377, 0.6948, 0.7445, 0.7872, 0.8237, 0.8546, 0.8806, 0.9023, 0.9204, 0.9354, 0.9477, 0.9578, 0.9661, 0.9728, 0.9783, 0.9827, 0.9863, 0.9891, 0.9914, 0.9933, 0.9947, 0.9959, 0.9968, 0.9975, 0.9981, 0.9985, 0.9989, 0.9991, 0.9993, 0.9995, 0.9996, 1);
167
+ --duration-spring-quick: 334ms;
168
+ --ease-spring-small: linear(0, 0.0202, 0.069, 0.1334, 0.2049, 0.278, 0.3493, 0.417, 0.4799, 0.5375, 0.5898, 0.6369, 0.6791, 0.7167, 0.7501, 0.7798, 0.806, 0.8292, 0.8497, 0.8677, 0.8836, 0.8976, 0.91, 0.9208, 0.9304, 0.9388, 0.9462, 0.9527, 0.9584, 0.9634, 0.9679, 0.9717, 0.9752, 0.9782, 0.9808, 0.9831, 0.9852, 0.987, 0.9885, 0.9899, 0.9911, 0.9922, 0.9932, 0.994, 0.9947, 0.9954, 0.9959, 0.9964, 0.9968, 0.9972, 0.9976, 0.9979, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.999, 0.9991, 1);
169
+ --duration-spring-small: 587ms;
170
+ --ease-spring-medium: linear(0, 0.0121, 0.0444, 0.0919, 0.1501, 0.2152, 0.2844, 0.355, 0.4252, 0.4934, 0.5585, 0.6195, 0.6761, 0.7278, 0.7746, 0.8164, 0.8533, 0.8855, 0.9134, 0.9372, 0.9572, 0.9739, 0.9875, 0.9984, 1.007, 1.0136, 1.0184, 1.0217, 1.0238, 1.0249, 1.0252, 1.0248, 1.0239, 1.0227, 1.0212, 1.0196, 1.0178, 1.016, 1.0143, 1.0126, 1.0109, 1.0094, 1.008, 1.0067, 1.0055, 1.0045, 1.0036, 1.0028, 1.0021, 1.0015, 1.001, 1.0006, 1.0003, 1, 0.9998, 0.9996, 1);
171
+ --duration-spring-medium: 552ms;
172
+ --ease-spring-basic: linear(0, 0.0089, 0.0322, 0.0658, 0.1066, 0.152, 0.2001, 0.2493, 0.2986, 0.3471, 0.3941, 0.4393, 0.4824, 0.5232, 0.5615, 0.5974, 0.6309, 0.662, 0.6909, 0.7175, 0.7421, 0.7648, 0.7855, 0.8046, 0.8221, 0.8381, 0.8527, 0.8661, 0.8783, 0.8894, 0.8995, 0.9088, 0.9172, 0.9248, 0.9318, 0.9381, 0.9438, 0.949, 0.9538, 0.9581, 0.962, 0.9655, 0.9687, 0.9717, 0.9743, 0.9767, 0.9789, 0.9809, 0.9827, 0.9843, 0.9858, 0.9871, 0.9883, 0.9894, 0.9904, 0.9913, 0.9921, 0.9929, 0.9935, 0.9941, 0.9947, 0.9952, 0.9956, 0.9961, 0.9964, 0.9968, 0.9971, 0.9973, 0.9976, 0.9978, 0.998, 0.9982, 0.9984, 0.9985, 0.9987, 0.9988, 0.9989, 1);
173
+ --duration-spring-basic: 761ms;
174
+ --ease-spring-large: linear(0, 0.0047, 0.0179, 0.0383, 0.0648, 0.0961, 0.1315, 0.1699, 0.2106, 0.2529, 0.2963, 0.3401, 0.3838, 0.4272, 0.4699, 0.5115, 0.5518, 0.5906, 0.6278, 0.6633, 0.697, 0.7288, 0.7586, 0.7866, 0.8126, 0.8368, 0.859, 0.8795, 0.8983, 0.9154, 0.9309, 0.9449, 0.9575, 0.9687, 0.9786, 0.9874, 0.995, 1.0017, 1.0074, 1.0122, 1.0163, 1.0196, 1.0223, 1.0244, 1.0261, 1.0272, 1.0279, 1.0283, 1.0284, 1.0282, 1.0277, 1.0271, 1.0263, 1.0254, 1.0243, 1.0232, 1.0221, 1.0208, 1.0196, 1.0184, 1.0171, 1.0159, 1.0147, 1.0135, 1.0124, 1.0113, 1.0103, 1.0093, 1.0083, 1.0074, 1.0066, 1.0058, 1.0051, 1.0044, 1.0038, 1.0033, 1.0027, 1.0023, 1.0018, 1.0015, 1.0011, 1.0008, 1.0005, 1.0003, 1.0001, 0.9999, 0.9997, 0.9996, 1);
175
+ --duration-spring-large: 876ms;
176
+ --ease-spring-bounce: linear(0, 0.0142, 0.0537, 0.1139, 0.1902, 0.2784, 0.3743, 0.4741, 0.5747, 0.673, 0.7667, 0.8538, 0.9329, 1.0028, 1.063, 1.113, 1.153, 1.1831, 1.204, 1.2164, 1.221, 1.2189, 1.211, 1.1984, 1.182, 1.1629, 1.1419, 1.1199, 1.0977, 1.0758, 1.0549, 1.0354, 1.0176, 1.0018, 0.9881, 0.9767, 0.9675, 0.9605, 0.9555, 0.9525, 0.9512, 0.9514, 0.953, 0.9556, 0.9591, 0.9633, 0.9678, 0.9727, 0.9776, 0.9825, 0.9871, 0.9915, 0.9955, 0.9991, 1.0022, 1.0048, 1.0069, 1.0085, 1.0097, 1.0104, 1.0108, 1.0108, 1.0105, 1.0099, 1.0092, 1.0083, 1.0073, 1.0062, 1.0051, 1.0041, 1.003, 1.002, 1.0011, 1.0003, 0.9996, 0.999, 0.9985, 0.9982, 0.9979, 0.9977, 0.9976, 0.9976, 0.9977, 0.9978, 0.9979, 0.9981, 0.9984, 0.9986, 0.9988, 0.9991, 0.9993, 0.9995, 0.9997, 0.9999, 1.0001, 1.0002, 1);
177
+ --duration-spring-bounce: 958ms;
178
+ --ease-spring-slow: linear(0, 0.0033, 0.0122, 0.0257, 0.043, 0.0631, 0.0855, 0.1096, 0.135, 0.1612, 0.188, 0.215, 0.2421, 0.2691, 0.2958, 0.3221, 0.348, 0.3732, 0.3979, 0.4219, 0.4452, 0.4677, 0.4896, 0.5107, 0.5311, 0.5507, 0.5697, 0.5879, 0.6054, 0.6222, 0.6384, 0.654, 0.6689, 0.6832, 0.6969, 0.71, 0.7226, 0.7347, 0.7462, 0.7573, 0.7679, 0.778, 0.7877, 0.797, 0.8059, 0.8144, 0.8225, 0.8303, 0.8378, 0.8449, 0.8517, 0.8582, 0.8645, 0.8704, 0.8761, 0.8816, 0.8868, 0.8918, 0.8965, 0.9011, 0.9054, 0.9096, 0.9136, 0.9174, 0.921, 0.9245, 0.9278, 0.931, 0.934, 0.9369, 0.9397, 0.9424, 0.9449, 0.9473, 0.9497, 0.9519, 0.954, 0.956, 0.958, 0.9598, 0.9616, 0.9633, 0.9649, 0.9664, 0.9679, 0.9693, 0.9707, 0.972, 0.9732, 0.9744, 0.9755, 0.9766, 0.9776, 0.9786, 0.9796, 0.9805, 0.9813, 0.9821, 0.9829, 0.9837, 0.9844, 0.9851, 0.9857, 0.9864, 0.987, 0.9875, 0.9881, 0.9886, 0.9891, 0.9896, 0.9901, 0.9905, 0.9909, 0.9913, 0.9917, 0.9921, 0.9924, 0.9927, 0.9931, 0.9934, 0.9937, 0.9939, 0.9942, 0.9945, 0.9947, 0.9949, 0.9952, 0.9954, 0.9956, 0.9958, 0.996, 0.9961, 0.9963, 0.9965, 0.9966, 0.9968, 0.9969, 0.9971, 0.9972, 0.9973, 0.9974, 0.9975, 0.9976, 0.9978, 0.9979, 0.9979, 0.998, 0.9981, 0.9982, 0.9983, 0.9984, 0.9984, 0.9985, 0.9986, 0.9986, 0.9987, 0.9987, 0.9988, 0.9989, 0.9989, 0.999, 1);
179
+ --duration-spring-slow: 1604ms;
180
+ --motion-press-duration: var(--duration-xs);
181
+ --motion-press-ease: var(--ease-out);
182
+ --motion-press-scale: 0.98;
183
+ --motion-press-dim: 0.12;
184
+ --motion-confirm-weak-ease: var(--ease-spring-small);
185
+ --motion-confirm-weak-duration: var(--duration-spring-small);
186
+ --motion-confirm-strong-ease: var(--ease-spring-bounce);
187
+ --motion-confirm-strong-duration: var(--duration-spring-bounce);
188
+ --motion-reject-duration: var(--duration-l);
189
+ --motion-reject-ease: var(--ease-linear);
190
+ --motion-reject-distance: 2px;
191
+ --motion-enter-duration: var(--duration-m);
192
+ --motion-enter-ease: var(--ease-out);
193
+ --motion-enter-strong-ease: var(--ease-spring-bounce);
194
+ --motion-enter-strong-duration: var(--duration-spring-bounce);
195
+ --motion-enter-scale-from: 0.96;
196
+ --motion-enter-offset: 16px;
197
+ --motion-enter-pop-scale: 0.6;
198
+ --motion-exit-duration: var(--duration-s);
199
+ --motion-exit-ease: var(--ease-in);
200
+ --motion-appear-duration: var(--duration-m);
201
+ --motion-appear-ease: var(--ease-out);
202
+ --motion-reveal-duration: var(--duration-m);
203
+ --motion-reveal-ease: var(--ease-out);
204
+ --motion-reveal-gap: 80ms;
205
+ --motion-progress-duration: var(--duration-m);
206
+ --motion-progress-spring-ease: var(--ease-spring-basic);
207
+ --motion-progress-spring-duration: var(--duration-spring-basic);
208
+ --motion-expand-duration: var(--duration-m);
209
+ --motion-expand-ease: var(--ease-out);
210
+ --motion-expand-rotate: 180deg;
211
+ --motion-dismiss-on-scroll-duration: var(--duration-m);
212
+ --motion-dismiss-on-scroll-ease: var(--ease-out);
213
+ --motion-dismiss-on-scroll-threshold: 1px;
214
+ --motion-attention-shine: 2500ms;
215
+ --motion-attention-blink: 300ms;
216
+ --motion-attention-float-distance: 3px;
217
+ --motion-busy-ring: 1200ms;
218
+ --motion-busy-ring-ease: var(--ease-symmetric);
219
+ --motion-busy-shimmer: 1500ms;
220
+ --motion-busy-dots: 600ms;
153
221
  /* 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field */
154
222
  --control-height-xs: 28px;
155
223
  --control-height-s: 36px;
@@ -214,6 +282,32 @@
214
282
  --bottom-nav-badge-count: 18px;
215
283
  --glass-blur: 18px;
216
284
 
285
+ /* 목록 행: list-row. 한 줄 이름에 보조 글이 붙어도 이 높이부터 */
286
+ --list-row-height: 56px;
287
+
288
+ /* 손가락 터치 영역. 보이는 크기가 작은 버튼(아이콘 버튼·빼기·보내기)이 이만큼 눌린다 */
289
+ --touch-target: 44px;
290
+
291
+ /* 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 */
292
+ --media-thumbnail-size-s: 64px;
293
+ --media-thumbnail-size-m: 96px;
294
+ --media-thumbnail-max-width: 240px;
295
+ --media-overlay-button-size: 36px;
296
+ --media-remove-size: 20px;
297
+ --media-invalid-border: 2px;
298
+
299
+ /* 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) */
300
+ --composer-send-size: 36px;
301
+ --composer-max-height: 132px;
302
+
303
+ /* 아이콘 버튼: icon-button. 보이는 원의 지름. 누르는 자리는 --touch-target 이상 */
304
+ --icon-button-size-s: 36px;
305
+ --icon-button-size-m: 44px;
306
+ --icon-button-size-l: 56px;
307
+
308
+ /* 빈 화면: empty-state 아이콘 원 */
309
+ --empty-state-icon-box: 64px;
310
+
217
311
  /* 진행 단계 바 */
218
312
  --step-bar-height: 4px;
219
313
 
@@ -253,7 +347,8 @@
253
347
  --z-modal: 9999;
254
348
  --z-toast: 10000;
255
349
 
256
- /* 모션 */
350
+ /* 옛 모션 변수 */
351
+ /* 컴포넌트 작업(KAN-9516~9528)이 --motion-{토큰}-* 로 바꾸면 지운다. 새 코드는 쓰지 않는다. 새 토큰은 tokens/motion.json */
257
352
  --motion-fast: 160ms;
258
353
  --motion-base: 300ms;
259
354
  --motion-ease: ease;
@@ -377,8 +472,33 @@
377
472
  --button-size-l: 54;
378
473
  --button-size-xl: 60;
379
474
  }
475
+ /* tokens/motion.json 에서 생성됨 — 손으로 고치지 않는다. `yarn tokens` */
476
+ /* 시간을 0 으로 만들면 의미 토큰이 var() 로 따라온다. 끝 상태는 그대로 보인다 */
477
+ @media (prefers-reduced-motion: reduce) {
478
+ :root {
479
+ --duration-xs: 0ms;
480
+ --duration-s: 0ms;
481
+ --duration-m: 0ms;
482
+ --duration-l: 0ms;
483
+ --duration-xl: 0ms;
484
+ --duration-spring-rapid: 0ms;
485
+ --duration-spring-quick: 0ms;
486
+ --duration-spring-small: 0ms;
487
+ --duration-spring-medium: 0ms;
488
+ --duration-spring-basic: 0ms;
489
+ --duration-spring-large: 0ms;
490
+ --duration-spring-bounce: 0ms;
491
+ --duration-spring-slow: 0ms;
492
+ --motion-reveal-gap: 0ms;
493
+ --motion-attention-shine: 0ms;
494
+ --motion-attention-blink: 0ms;
495
+ --motion-busy-ring: 0ms;
496
+ --motion-busy-shimmer: 0ms;
497
+ --motion-busy-dots: 0ms;
498
+ }
499
+ }
380
500
  /*
381
- * 크기·두께·레이어·모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
501
+ * 크기·두께·레이어·옛 모션. figma.json 에서 만들지 않고 손으로 유지한다(font-face.css 와 같다).
382
502
  * 디자이너가 숫자를 바꾸는 곳은 여기다. 컴포넌트 CSS 는 숫자를 쓰지 않고 이 변수를 쓴다(빌드가 검사).
383
503
  * 크기 이름은 xs · s · m · l · xl 다섯 개다. 컴포넌트는 그중 지원하는 것만 고른다.
384
504
  */
package/dist/tokens.js CHANGED
@@ -502,10 +502,165 @@ var colors = {
502
502
  "black": "#000000",
503
503
  "white": "#FFFFFF"
504
504
  };
505
+ ;// ./tokens/generated/motion.ts
506
+ // tokens/motion.json 에서 생성됨 — 손으로 고치지 않는다. `yarn tokens`
507
+ /** 원시값. 컴포넌트는 motionTokens 만 쓴다(빌드 R17). 시간은 초다(motion 의 transition 단위). */
508
+ var motionPresets = {
509
+ "duration": {
510
+ "xs": 0.12,
511
+ "s": 0.16,
512
+ "m": 0.24,
513
+ "l": 0.35,
514
+ "xl": 0.5
515
+ },
516
+ "ease": {
517
+ "out": [0.25, 0.1, 0.25, 1],
518
+ "in": [0.4, 0, 1, 1],
519
+ "in-out": [0.4, 0, 0.1, 1],
520
+ "back": [0.34, 1.56, 0.64, 1],
521
+ "symmetric": [0.5, 0, 0.5, 1],
522
+ "linear": "linear"
523
+ },
524
+ "spring": {
525
+ "rapid": {
526
+ "type": "spring",
527
+ "stiffness": 1000,
528
+ "damping": 55,
529
+ "mass": 1
530
+ },
531
+ "quick": {
532
+ "type": "spring",
533
+ "stiffness": 800,
534
+ "damping": 55,
535
+ "mass": 1
536
+ },
537
+ "small": {
538
+ "type": "spring",
539
+ "stiffness": 480,
540
+ "damping": 50,
541
+ "mass": 1
542
+ },
543
+ "medium": {
544
+ "type": "spring",
545
+ "stiffness": 270,
546
+ "damping": 25,
547
+ "mass": 1
548
+ },
549
+ "basic": {
550
+ "type": "spring",
551
+ "stiffness": 200,
552
+ "damping": 30,
553
+ "mass": 1
554
+ },
555
+ "large": {
556
+ "type": "spring",
557
+ "stiffness": 100,
558
+ "damping": 15,
559
+ "mass": 1
560
+ },
561
+ "bounce": {
562
+ "type": "spring",
563
+ "stiffness": 300,
564
+ "damping": 15,
565
+ "mass": 1
566
+ },
567
+ "slow": {
568
+ "type": "spring",
569
+ "stiffness": 70,
570
+ "damping": 20,
571
+ "mass": 1
572
+ }
573
+ }
574
+ };
575
+ /** 의미 토큰. 참조를 실제 값으로 풀었다. 시간은 초라 motion 의 transition 에 그대로 넣는다. */
576
+ var motionTokens = {
577
+ "press": {
578
+ "duration": 0.12,
579
+ "ease": [0.25, 0.1, 0.25, 1],
580
+ "scale": 0.98,
581
+ "dim": 0.12
582
+ },
583
+ "confirm": {
584
+ "weak": {
585
+ "type": "spring",
586
+ "stiffness": 480,
587
+ "damping": 50,
588
+ "mass": 1
589
+ },
590
+ "strong": {
591
+ "type": "spring",
592
+ "stiffness": 300,
593
+ "damping": 15,
594
+ "mass": 1
595
+ }
596
+ },
597
+ "reject": {
598
+ "duration": 0.35,
599
+ "ease": "linear",
600
+ "distance": "2px"
601
+ },
602
+ "enter": {
603
+ "duration": 0.24,
604
+ "ease": [0.25, 0.1, 0.25, 1],
605
+ "strong": {
606
+ "type": "spring",
607
+ "stiffness": 300,
608
+ "damping": 15,
609
+ "mass": 1
610
+ },
611
+ "scale-from": 0.96,
612
+ "offset": "16px",
613
+ "pop-scale": 0.6
614
+ },
615
+ "exit": {
616
+ "duration": 0.16,
617
+ "ease": [0.4, 0, 1, 1]
618
+ },
619
+ "appear": {
620
+ "duration": 0.24,
621
+ "ease": [0.25, 0.1, 0.25, 1]
622
+ },
623
+ "reveal": {
624
+ "duration": 0.24,
625
+ "ease": [0.25, 0.1, 0.25, 1],
626
+ "gap": 0.08
627
+ },
628
+ "progress": {
629
+ "duration": 0.24,
630
+ "spring": {
631
+ "type": "spring",
632
+ "stiffness": 200,
633
+ "damping": 30,
634
+ "mass": 1
635
+ }
636
+ },
637
+ "expand": {
638
+ "duration": 0.24,
639
+ "ease": [0.25, 0.1, 0.25, 1],
640
+ "rotate": "180deg"
641
+ },
642
+ "dismiss-on-scroll": {
643
+ "duration": 0.24,
644
+ "ease": [0.25, 0.1, 0.25, 1],
645
+ "threshold": "1px"
646
+ },
647
+ "attention": {
648
+ "shine": 2.5,
649
+ "blink": 0.3,
650
+ "float-distance": "3px"
651
+ },
652
+ "busy": {
653
+ "ring": 1.2,
654
+ "ring-ease": [0.5, 0, 0.5, 1],
655
+ "shimmer": 1.5,
656
+ "dots": 0.6
657
+ }
658
+ };
505
659
  ;// ./tokens/generated/index.ts
506
660
  // tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens`
507
661
 
508
662
 
509
663
 
510
664
 
511
- export { colors, primitive, semanticAdmin, semanticApp };
665
+
666
+ export { colors, motionPresets, motionTokens, primitive, semanticAdmin, semanticApp };
package/dist/tooltip.js CHANGED
@@ -357,17 +357,19 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
357
357
  /******/
358
358
  /************************************************************************/
359
359
  /******/
360
- /******/ import * as __webpack_chunk_1__ from "./chunk-6364.js";
360
+ /******/ import * as __webpack_chunk_1__ from "./chunk-3274.js";
361
361
  /******/ __nuri_require__.C(__webpack_chunk_1__);
362
- /******/ import * as __webpack_chunk_2__ from "./chunk-4560.js";
362
+ /******/ import * as __webpack_chunk_2__ from "./chunk-7335.js";
363
363
  /******/ __nuri_require__.C(__webpack_chunk_2__);
364
- /******/ import * as __webpack_chunk_3__ from "./chunk-8690.js";
364
+ /******/ import * as __webpack_chunk_3__ from "./chunk-4560.js";
365
365
  /******/ __nuri_require__.C(__webpack_chunk_3__);
366
+ /******/ import * as __webpack_chunk_4__ from "./chunk-8690.js";
367
+ /******/ __nuri_require__.C(__webpack_chunk_4__);
366
368
  /******/
367
369
  /******/ // startup
368
370
  /******/ // Load entry module and return exports
369
371
  /******/ // This entry module depends on other loaded chunks and execution need to be delayed
370
- /******/ var __webpack_exports__ = __nuri_require__.O(undefined, [6364,4560,8690], () => (__nuri_require__(1563)))
372
+ /******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,8690], () => (__nuri_require__(1563)))
371
373
  /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
372
374
  /******/ const __webpack_exports__TooltipProvider = __webpack_exports__.B;
373
375
  /******/ const __webpack_exports__default = __webpack_exports__.A;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nurihaus/web-design-system",
3
- "version": "3.7.0",
3
+ "version": "3.9.0",
4
4
  "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -73,6 +73,7 @@
73
73
  "globals": "^17.13.0",
74
74
  "html-webpack-plugin": "^5.6.0",
75
75
  "jsdom": "^26.1.0",
76
+ "motion": "^12.0.0",
76
77
  "postcss": "^8.5.6",
77
78
  "postcss-combine-duplicated-selectors": "^10.0.3",
78
79
  "postcss-discard-empty": "^7.0.1",
@@ -93,6 +94,7 @@
93
94
  "webpack-dev-server": "^5.1.0"
94
95
  },
95
96
  "peerDependencies": {
97
+ "motion": "^12.0.0",
96
98
  "radix-ui": "^1.4.3",
97
99
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
98
100
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 ||^19.0.0"
@@ -118,6 +120,10 @@
118
120
  "types": "./dist/components/button/cta-button.d.ts",
119
121
  "default": "./dist/cta-button.js"
120
122
  },
123
+ "./icon-button": {
124
+ "types": "./dist/components/icon-button/icon-button.d.ts",
125
+ "default": "./dist/icon-button.js"
126
+ },
121
127
  "./callout": {
122
128
  "types": "./dist/components/callout/callout.d.ts",
123
129
  "default": "./dist/callout.js"
@@ -231,9 +237,69 @@
231
237
  "types": "./dist/components/chip-group/chip-group.d.ts",
232
238
  "default": "./dist/chip-group.js"
233
239
  },
240
+ "./card": {
241
+ "types": "./dist/components/card/card.d.ts",
242
+ "default": "./dist/card.js"
243
+ },
244
+ "./list-group": {
245
+ "types": "./dist/components/list/list-group.d.ts",
246
+ "default": "./dist/list-group.js"
247
+ },
248
+ "./list-row": {
249
+ "types": "./dist/components/list/list-row.d.ts",
250
+ "default": "./dist/list-row.js"
251
+ },
252
+ "./description-list": {
253
+ "types": "./dist/components/description-list/description-list.d.ts",
254
+ "default": "./dist/description-list.js"
255
+ },
256
+ "./notice": {
257
+ "types": "./dist/components/notice/notice.d.ts",
258
+ "default": "./dist/notice.js"
259
+ },
260
+ "./empty-state": {
261
+ "types": "./dist/components/empty-state/empty-state.d.ts",
262
+ "default": "./dist/empty-state.js"
263
+ },
264
+ "./tag": {
265
+ "types": "./dist/components/tag/tag.d.ts",
266
+ "default": "./dist/tag.js"
267
+ },
268
+ "./message-thread": {
269
+ "types": "./dist/components/message/message-thread.d.ts",
270
+ "default": "./dist/message-thread.js"
271
+ },
272
+ "./message": {
273
+ "types": "./dist/components/message/message.d.ts",
274
+ "default": "./dist/message.js"
275
+ },
276
+ "./message-event": {
277
+ "types": "./dist/components/message/message-event.d.ts",
278
+ "default": "./dist/message-event.js"
279
+ },
280
+ "./message-composer": {
281
+ "types": "./dist/components/message-composer/message-composer.d.ts",
282
+ "default": "./dist/message-composer.js"
283
+ },
284
+ "./bottom-bar": {
285
+ "types": "./dist/components/bottom-bar/bottom-bar.d.ts",
286
+ "default": "./dist/bottom-bar.js"
287
+ },
288
+ "./media-thumbnail": {
289
+ "types": "./dist/components/media/media-thumbnail.d.ts",
290
+ "default": "./dist/media-thumbnail.js"
291
+ },
292
+ "./media-viewer": {
293
+ "types": "./dist/components/media/media-viewer.d.ts",
294
+ "default": "./dist/media-viewer.js"
295
+ },
234
296
  "./logging": {
235
297
  "types": "./dist/components/logging/logging.d.ts",
236
298
  "default": "./dist/logging.js"
299
+ },
300
+ "./motion": {
301
+ "types": "./dist/components/motion/motion.d.ts",
302
+ "default": "./dist/motion.js"
237
303
  }
238
304
  }
239
305
  }