@iyulab/components 0.4.0 → 1.0.1

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 (472) hide show
  1. package/CHANGELOG.md +59 -0
  2. package/README.md +42 -236
  3. package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js +9 -0
  4. package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js +6 -0
  5. package/dist/_virtual/_glob-assets_raw/bell-fill.svg.d37c41d9.js +4 -0
  6. package/dist/_virtual/_glob-assets_raw/check-circle-fill.svg.51c33a2a.js +4 -0
  7. package/dist/_virtual/_glob-assets_raw/check-lg.svg.371c5e78.js +4 -0
  8. package/dist/_virtual/_glob-assets_raw/chevron-down.svg.0ccd06ea.js +4 -0
  9. package/dist/_virtual/_glob-assets_raw/chevron-left.svg.b4601050.js +4 -0
  10. package/dist/_virtual/_glob-assets_raw/chevron-right.svg.0711bb67.js +4 -0
  11. package/dist/_virtual/_glob-assets_raw/chevron-up.svg.ed917211.js +4 -0
  12. package/dist/_virtual/_glob-assets_raw/dark.css.e8ac080d.js +4 -0
  13. package/dist/_virtual/_glob-assets_raw/dash-lg.svg.b40b8b3a.js +4 -0
  14. package/dist/_virtual/_glob-assets_raw/exclamation-circle-fill.svg.dc8c523e.js +4 -0
  15. package/dist/_virtual/_glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7.js +4 -0
  16. package/dist/_virtual/_glob-assets_raw/eye-slash.svg.240afafa.js +4 -0
  17. package/dist/_virtual/_glob-assets_raw/eye.svg.2e5e9c4c.js +4 -0
  18. package/dist/_virtual/_glob-assets_raw/info-circle-fill.svg.6580071d.js +4 -0
  19. package/dist/_virtual/_glob-assets_raw/light.css.637cb2f8.js +4 -0
  20. package/dist/_virtual/_glob-assets_raw/plus-lg.svg.294e9073.js +4 -0
  21. package/dist/_virtual/_glob-assets_raw/search.svg.0ba2012d.js +4 -0
  22. package/dist/_virtual/_glob-assets_raw/star-fill.svg.f24b5a2d.js +4 -0
  23. package/dist/_virtual/_glob-assets_raw/star.svg.4af61468.js +4 -0
  24. package/dist/_virtual/_glob-assets_raw/three-dots-vertical.svg.9fee78c5.js +4 -0
  25. package/dist/_virtual/_glob-assets_raw/three-dots.svg.6a7a5b23.js +4 -0
  26. package/dist/_virtual/_glob-assets_raw/x-lg.svg.f34b882c.js +4 -0
  27. package/dist/components/{UJsonElement.d.ts → UDataElement.d.ts} +3 -5
  28. package/dist/components/UDataElement.js +101 -0
  29. package/dist/components/{UJsonElement.styles.js → UDataElement.styles.js} +4 -4
  30. package/dist/components/UElement.d.ts +18 -23
  31. package/dist/components/UElement.js +82 -95
  32. package/dist/components/UElement.styles.js +43 -4
  33. package/dist/components/UFloatingElement.d.ts +69 -48
  34. package/dist/components/UFloatingElement.js +236 -193
  35. package/dist/components/UFloatingElement.styles.d.ts +8 -0
  36. package/dist/components/UFloatingElement.styles.js +28 -5
  37. package/dist/components/UFormControlElement.d.ts +57 -0
  38. package/dist/components/UFormControlElement.js +68 -0
  39. package/dist/components/UFormControlElement.styles.js +14 -0
  40. package/dist/components/UOverlayElement.d.ts +66 -0
  41. package/dist/components/UOverlayElement.js +123 -0
  42. package/dist/components/UOverlayElement.styles.d.ts +1 -0
  43. package/dist/components/UOverlayElement.styles.js +35 -0
  44. package/dist/components/alert/UAlert.d.ts +58 -3
  45. package/dist/components/alert/UAlert.js +115 -4
  46. package/dist/components/alert/UAlert.styles.js +73 -48
  47. package/dist/components/avatar/UAvatar.d.ts +27 -0
  48. package/dist/components/avatar/UAvatar.js +42 -0
  49. package/dist/components/avatar/UAvatar.styles.d.ts +1 -0
  50. package/dist/components/avatar/UAvatar.styles.js +45 -0
  51. package/dist/components/badge/UBadge.d.ts +28 -0
  52. package/dist/components/badge/UBadge.js +40 -0
  53. package/dist/components/badge/UBadge.styles.d.ts +1 -0
  54. package/dist/components/badge/UBadge.styles.js +113 -0
  55. package/dist/components/breadcrumb/UBreadcrumb.d.ts +24 -0
  56. package/dist/components/breadcrumb/UBreadcrumb.js +65 -0
  57. package/dist/components/breadcrumb/UBreadcrumb.styles.d.ts +1 -0
  58. package/dist/components/breadcrumb/UBreadcrumb.styles.js +37 -0
  59. package/dist/components/breadcrumb-item/UBreadcrumbItem.d.ts +30 -0
  60. package/dist/components/breadcrumb-item/UBreadcrumbItem.js +52 -0
  61. package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.d.ts +1 -0
  62. package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js +41 -0
  63. package/dist/components/button/UButton.d.ts +46 -3
  64. package/dist/components/button/UButton.js +104 -4
  65. package/dist/components/button/UButton.styles.js +121 -48
  66. package/dist/components/button-group/UButtonGroup.d.ts +28 -0
  67. package/dist/components/button-group/UButtonGroup.js +93 -0
  68. package/dist/components/button-group/UButtonGroup.styles.d.ts +1 -0
  69. package/dist/components/button-group/UButtonGroup.styles.js +34 -0
  70. package/dist/components/card/UCard.d.ts +30 -3
  71. package/dist/components/card/UCard.js +61 -4
  72. package/dist/components/card/UCard.styles.js +13 -12
  73. package/dist/components/carousel/UCarousel.d.ts +65 -3
  74. package/dist/components/carousel/UCarousel.js +219 -2
  75. package/dist/components/carousel/UCarousel.styles.js +17 -17
  76. package/dist/components/checkbox/UCheckbox.d.ts +39 -0
  77. package/dist/components/checkbox/UCheckbox.js +88 -0
  78. package/dist/components/checkbox/UCheckbox.styles.d.ts +1 -0
  79. package/dist/components/checkbox/UCheckbox.styles.js +211 -0
  80. package/dist/components/chip/UChip.d.ts +43 -0
  81. package/dist/components/chip/UChip.js +103 -0
  82. package/dist/components/chip/UChip.styles.d.ts +1 -0
  83. package/dist/components/chip/UChip.styles.js +31 -0
  84. package/dist/components/dialog/UDialog.d.ts +29 -2
  85. package/dist/components/dialog/UDialog.js +66 -4
  86. package/dist/components/dialog/UDialog.styles.js +90 -39
  87. package/dist/components/divider/UDivider.d.ts +27 -2
  88. package/dist/components/divider/UDivider.js +45 -4
  89. package/dist/components/divider/UDivider.styles.js +80 -10
  90. package/dist/components/drawer/UDrawer.d.ts +25 -3
  91. package/dist/components/drawer/UDrawer.js +54 -4
  92. package/dist/components/drawer/UDrawer.styles.js +67 -60
  93. package/dist/components/field/UField.d.ts +31 -0
  94. package/dist/components/field/UField.js +64 -0
  95. package/dist/components/field/UField.styles.d.ts +1 -0
  96. package/dist/components/field/UField.styles.js +47 -0
  97. package/dist/components/form/UForm.d.ts +38 -2
  98. package/dist/components/form/UForm.js +105 -4
  99. package/dist/components/form/UForm.styles.js +5 -5
  100. package/dist/components/icon/UIcon.d.ts +23 -4
  101. package/dist/components/icon/UIcon.js +56 -4
  102. package/dist/components/icon/UIcon.styles.js +5 -6
  103. package/dist/components/icon-button/UIconButton.d.ts +48 -0
  104. package/dist/components/icon-button/UIconButton.js +88 -0
  105. package/dist/components/icon-button/UIconButton.styles.d.ts +1 -0
  106. package/dist/components/icon-button/UIconButton.styles.js +24 -0
  107. package/dist/components/input/UInput.d.ts +95 -3
  108. package/dist/components/input/UInput.js +258 -2
  109. package/dist/components/input/UInput.styles.js +120 -86
  110. package/dist/components/menu/UMenu.d.ts +41 -3
  111. package/dist/components/menu/UMenu.js +178 -4
  112. package/dist/components/menu/UMenu.styles.js +16 -30
  113. package/dist/components/menu-item/UMenuItem.d.ts +48 -2
  114. package/dist/components/menu-item/UMenuItem.js +159 -2
  115. package/dist/components/menu-item/UMenuItem.styles.js +120 -34
  116. package/dist/components/option/UOption.d.ts +42 -0
  117. package/dist/components/option/UOption.js +64 -0
  118. package/dist/components/option/UOption.styles.d.ts +1 -0
  119. package/dist/components/option/UOption.styles.js +132 -0
  120. package/dist/components/panel/UPanel.d.ts +22 -0
  121. package/dist/components/panel/UPanel.js +36 -0
  122. package/dist/components/panel/UPanel.styles.d.ts +1 -0
  123. package/dist/components/panel/UPanel.styles.js +14 -0
  124. package/dist/components/popover/UPopover.d.ts +69 -0
  125. package/dist/components/popover/UPopover.js +235 -0
  126. package/dist/components/popover/UPopover.styles.d.ts +1 -0
  127. package/dist/components/popover/UPopover.styles.js +9 -0
  128. package/dist/components/progress-bar/UProgressBar.d.ts +46 -2
  129. package/dist/components/progress-bar/UProgressBar.js +94 -2
  130. package/dist/components/progress-bar/UProgressBar.styles.js +110 -36
  131. package/dist/components/progress-ring/UProgressRing.d.ts +46 -3
  132. package/dist/components/progress-ring/UProgressRing.js +152 -2
  133. package/dist/components/progress-ring/UProgressRing.styles.js +88 -25
  134. package/dist/components/radio/URadio.d.ts +41 -0
  135. package/dist/components/radio/URadio.js +152 -0
  136. package/dist/components/radio/URadio.styles.d.ts +1 -0
  137. package/dist/components/radio/URadio.styles.js +111 -0
  138. package/dist/components/rating/URating.d.ts +48 -0
  139. package/dist/components/rating/URating.js +196 -0
  140. package/dist/components/rating/URating.styles.d.ts +1 -0
  141. package/dist/components/rating/URating.styles.js +55 -0
  142. package/dist/components/select/USelect.d.ts +70 -0
  143. package/dist/components/select/USelect.js +316 -0
  144. package/dist/components/select/USelect.styles.d.ts +1 -0
  145. package/dist/components/select/USelect.styles.js +200 -0
  146. package/dist/components/skeleton/USkeleton.d.ts +27 -3
  147. package/dist/components/skeleton/USkeleton.js +37 -4
  148. package/dist/components/skeleton/USkeleton.styles.js +15 -18
  149. package/dist/components/slider/USlider.d.ts +88 -0
  150. package/dist/components/slider/USlider.js +286 -0
  151. package/dist/components/slider/USlider.styles.d.ts +1 -0
  152. package/dist/components/slider/USlider.styles.js +125 -0
  153. package/dist/components/spinner/USpinner.d.ts +23 -2
  154. package/dist/components/spinner/USpinner.js +37 -3
  155. package/dist/components/spinner/USpinner.styles.js +34 -13
  156. package/dist/components/split-panel/USplitPanel.d.ts +49 -2
  157. package/dist/components/split-panel/USplitPanel.js +239 -3
  158. package/dist/components/split-panel/USplitPanel.styles.js +47 -15
  159. package/dist/components/switch/USwitch.d.ts +43 -0
  160. package/dist/components/switch/USwitch.js +80 -0
  161. package/dist/components/switch/USwitch.styles.d.ts +1 -0
  162. package/dist/components/switch/USwitch.styles.js +191 -0
  163. package/dist/components/tab/UTab.d.ts +31 -0
  164. package/dist/components/tab/UTab.js +68 -0
  165. package/dist/components/tab/UTab.styles.d.ts +1 -0
  166. package/dist/components/tab/UTab.styles.js +46 -0
  167. package/dist/components/tab-panel/UTabPanel.d.ts +45 -0
  168. package/dist/components/tab-panel/UTabPanel.js +150 -0
  169. package/dist/components/tab-panel/UTabPanel.styles.d.ts +1 -0
  170. package/dist/components/tab-panel/UTabPanel.styles.js +201 -0
  171. package/dist/components/tag/UTag.d.ts +26 -3
  172. package/dist/components/tag/UTag.js +41 -4
  173. package/dist/components/tag/UTag.styles.js +206 -60
  174. package/dist/components/textarea/UTextarea.d.ts +65 -0
  175. package/dist/components/textarea/UTextarea.js +148 -0
  176. package/dist/components/textarea/UTextarea.styles.d.ts +1 -0
  177. package/dist/components/textarea/UTextarea.styles.js +164 -0
  178. package/dist/components/tooltip/UTooltip.d.ts +28 -2
  179. package/dist/components/tooltip/UTooltip.js +104 -4
  180. package/dist/components/tooltip/UTooltip.styles.js +10 -12
  181. package/dist/components/tree/UTree.d.ts +62 -2
  182. package/dist/components/tree/UTree.js +308 -3
  183. package/dist/components/tree/UTree.styles.js +13 -19
  184. package/dist/components/tree-item/UTreeItem.d.ts +61 -2
  185. package/dist/components/tree-item/UTreeItem.js +191 -2
  186. package/dist/components/tree-item/UTreeItem.styles.js +96 -37
  187. package/dist/events/CheckEvent.d.ts +7 -0
  188. package/dist/events/CollapseEvent.d.ts +7 -0
  189. package/dist/events/ExpandEvent.d.ts +7 -0
  190. package/dist/events/HideEvent.d.ts +7 -0
  191. package/dist/events/NavigateEvent.d.ts +7 -0
  192. package/dist/events/PickEvent.d.ts +18 -0
  193. package/dist/events/RemoveEvent.d.ts +7 -0
  194. package/dist/events/ShiftEvent.d.ts +16 -0
  195. package/dist/events/ShowEvent.d.ts +7 -0
  196. package/dist/index.d.ts +37 -10
  197. package/dist/index.js +56 -52
  198. package/dist/react/UAlert.d.ts +13 -0
  199. package/dist/{react-components → react}/UAlert.js +5 -2
  200. package/dist/react/UAvatar.d.ts +9 -0
  201. package/dist/react/UAvatar.js +10 -0
  202. package/dist/react/UBadge.d.ts +9 -0
  203. package/dist/react/UBadge.js +10 -0
  204. package/dist/react/UBreadcrumb.d.ts +9 -0
  205. package/dist/react/UBreadcrumb.js +10 -0
  206. package/dist/react/UBreadcrumbItem.d.ts +11 -0
  207. package/dist/react/UBreadcrumbItem.js +12 -0
  208. package/dist/{react-components → react}/UButton.d.ts +3 -2
  209. package/dist/{react-components → react}/UButton.js +2 -2
  210. package/dist/react/UButtonGroup.d.ts +9 -0
  211. package/dist/react/UButtonGroup.js +10 -0
  212. package/dist/{react-components → react}/UCard.d.ts +3 -2
  213. package/dist/{react-components → react}/UCard.js +2 -2
  214. package/dist/{react-components → react}/UCarousel.d.ts +3 -2
  215. package/dist/{react-components → react}/UCarousel.js +2 -2
  216. package/dist/react/UCheckbox.d.ts +9 -0
  217. package/dist/react/UCheckbox.js +10 -0
  218. package/dist/react/UChip.d.ts +13 -0
  219. package/dist/react/UChip.js +13 -0
  220. package/dist/{react-components → react}/UDialog.d.ts +3 -2
  221. package/dist/{react-components → react}/UDialog.js +2 -2
  222. package/dist/{react-components → react}/UDivider.d.ts +3 -2
  223. package/dist/{react-components → react}/UDivider.js +2 -2
  224. package/dist/{react-components → react}/UDrawer.d.ts +3 -2
  225. package/dist/{react-components → react}/UDrawer.js +2 -2
  226. package/dist/react/UField.d.ts +9 -0
  227. package/dist/react/UField.js +10 -0
  228. package/dist/react/UForm.d.ts +10 -0
  229. package/dist/{react-components → react}/UForm.js +4 -2
  230. package/dist/{react-components → react}/UIcon.d.ts +3 -2
  231. package/dist/{react-components → react}/UIcon.js +2 -2
  232. package/dist/react/UIconButton.d.ts +9 -0
  233. package/dist/react/UIconButton.js +10 -0
  234. package/dist/react/UInput.d.ts +11 -0
  235. package/dist/{react-components → react}/UInput.js +5 -2
  236. package/dist/react/UMenu.d.ts +10 -0
  237. package/dist/{react-components → react}/UMenu.js +4 -2
  238. package/dist/react/UMenuItem.d.ts +11 -0
  239. package/dist/{react-components → react}/UMenuItem.js +4 -2
  240. package/dist/react/UOption.d.ts +9 -0
  241. package/dist/react/UOption.js +10 -0
  242. package/dist/react/UPanel.d.ts +9 -0
  243. package/dist/react/UPanel.js +10 -0
  244. package/dist/react/UPopover.d.ts +11 -0
  245. package/dist/react/UPopover.js +13 -0
  246. package/dist/react/UProgressBar.d.ts +9 -0
  247. package/dist/{react-components → react}/UProgressBar.js +2 -2
  248. package/dist/react/UProgressRing.d.ts +9 -0
  249. package/dist/{react-components → react}/UProgressRing.js +2 -2
  250. package/dist/react/URadio.d.ts +10 -0
  251. package/dist/react/URadio.js +12 -0
  252. package/dist/react/URating.d.ts +10 -0
  253. package/dist/react/URating.js +12 -0
  254. package/dist/react/USelect.d.ts +10 -0
  255. package/dist/react/USelect.js +12 -0
  256. package/dist/{react-components → react}/USkeleton.d.ts +3 -2
  257. package/dist/{react-components → react}/USkeleton.js +2 -2
  258. package/dist/react/USlider.d.ts +10 -0
  259. package/dist/react/USlider.js +12 -0
  260. package/dist/{react-components → react}/USpinner.d.ts +3 -2
  261. package/dist/{react-components → react}/USpinner.js +2 -2
  262. package/dist/react/USplitPanel.d.ts +13 -0
  263. package/dist/{react-components → react}/USplitPanel.js +6 -2
  264. package/dist/react/USwitch.d.ts +10 -0
  265. package/dist/react/USwitch.js +12 -0
  266. package/dist/react/UTab.d.ts +11 -0
  267. package/dist/react/UTab.js +12 -0
  268. package/dist/react/UTabPanel.d.ts +9 -0
  269. package/dist/react/UTabPanel.js +10 -0
  270. package/dist/{react-components → react}/UTag.d.ts +3 -2
  271. package/dist/{react-components → react}/UTag.js +2 -2
  272. package/dist/react/UTextarea.d.ts +11 -0
  273. package/dist/react/UTextarea.js +13 -0
  274. package/dist/react/UTooltip.d.ts +11 -0
  275. package/dist/{react-components → react}/UTooltip.js +5 -2
  276. package/dist/react/UTree.d.ts +10 -0
  277. package/dist/{react-components → react}/UTree.js +4 -2
  278. package/dist/react/UTreeItem.d.ts +17 -0
  279. package/dist/{react-components → react}/UTreeItem.js +7 -2
  280. package/dist/{react-components → react}/index.d.ts +40 -27
  281. package/dist/{react-components → react}/index.js +40 -20
  282. package/dist/{assets/styles → styles}/dark.css +68 -3
  283. package/dist/{assets/styles → styles}/light.css +68 -3
  284. package/dist/utilities/BrowserStorage.d.ts +2 -1
  285. package/dist/utilities/BrowserStorage.js +69 -86
  286. package/dist/utilities/Dialog.d.ts +83 -0
  287. package/dist/utilities/Dialog.js +141 -0
  288. package/dist/utilities/OverlayManager.d.ts +37 -0
  289. package/dist/utilities/OverlayManager.js +68 -0
  290. package/dist/utilities/Theme.js +134 -141
  291. package/dist/utilities/Toast.d.ts +45 -0
  292. package/dist/utilities/Toast.js +114 -0
  293. package/dist/utilities/converters.d.ts +44 -1
  294. package/dist/utilities/converters.js +112 -14
  295. package/dist/utilities/elements.js +62 -33
  296. package/dist/utilities/icons.d.ts +67 -0
  297. package/dist/utilities/icons.js +200 -0
  298. package/dist/utilities/sanitizers.js +64 -32
  299. package/package.json +26 -19
  300. package/plugins/vite-plugin-glob-resolve.d.ts +12 -0
  301. package/plugins/vite-plugin-glob-resolve.js +66 -0
  302. package/plugins/vite-plugin-react-wrapper.d.ts +12 -0
  303. package/plugins/vite-plugin-react-wrapper.js +206 -0
  304. package/skills/iyulab-components/SKILL.md +138 -0
  305. package/skills/iyulab-components/references/components/alert.md +74 -0
  306. package/skills/iyulab-components/references/components/avatar.md +41 -0
  307. package/skills/iyulab-components/references/components/badge.md +38 -0
  308. package/skills/iyulab-components/references/components/breadcrumb.md +75 -0
  309. package/skills/iyulab-components/references/components/button-group.md +38 -0
  310. package/skills/iyulab-components/references/components/button.md +56 -0
  311. package/skills/iyulab-components/references/components/card.md +53 -0
  312. package/skills/iyulab-components/references/components/carousel.md +63 -0
  313. package/skills/iyulab-components/references/components/checkbox.md +70 -0
  314. package/skills/iyulab-components/references/components/chip.md +64 -0
  315. package/skills/iyulab-components/references/components/dialog.md +71 -0
  316. package/skills/iyulab-components/references/components/divider.md +56 -0
  317. package/skills/iyulab-components/references/components/drawer.md +63 -0
  318. package/skills/iyulab-components/references/components/field.md +42 -0
  319. package/skills/iyulab-components/references/components/form.md +68 -0
  320. package/skills/iyulab-components/references/components/icon-button.md +56 -0
  321. package/skills/iyulab-components/references/components/icon.md +49 -0
  322. package/skills/iyulab-components/references/components/input.md +95 -0
  323. package/skills/iyulab-components/references/components/menu.md +106 -0
  324. package/skills/iyulab-components/references/components/option.md +70 -0
  325. package/skills/iyulab-components/references/components/panel.md +38 -0
  326. package/skills/iyulab-components/references/components/popover.md +62 -0
  327. package/skills/iyulab-components/references/components/progress-bar.md +61 -0
  328. package/skills/iyulab-components/references/components/progress-ring.md +58 -0
  329. package/skills/iyulab-components/references/components/radio.md +67 -0
  330. package/skills/iyulab-components/references/components/rating.md +74 -0
  331. package/skills/iyulab-components/references/components/select.md +86 -0
  332. package/skills/iyulab-components/references/components/skeleton.md +46 -0
  333. package/skills/iyulab-components/references/components/slider.md +89 -0
  334. package/skills/iyulab-components/references/components/spinner.md +47 -0
  335. package/skills/iyulab-components/references/components/split-panel.md +65 -0
  336. package/skills/iyulab-components/references/components/switch.md +81 -0
  337. package/skills/iyulab-components/references/components/tab-panel.md +93 -0
  338. package/skills/iyulab-components/references/components/tag.md +55 -0
  339. package/skills/iyulab-components/references/components/textarea.md +67 -0
  340. package/skills/iyulab-components/references/components/tooltip.md +58 -0
  341. package/skills/iyulab-components/references/components/tree.md +128 -0
  342. package/skills/iyulab-components/references/extensions/data.md +60 -0
  343. package/skills/iyulab-components/references/extensions/element.md +57 -0
  344. package/skills/iyulab-components/references/extensions/floating.md +60 -0
  345. package/skills/iyulab-components/references/extensions/form-control.md +79 -0
  346. package/skills/iyulab-components/references/extensions/overlay.md +76 -0
  347. package/skills/iyulab-components/references/usage.md +216 -0
  348. package/skills/iyulab-components/references/utilities/browser-storage.md +54 -0
  349. package/skills/iyulab-components/references/utilities/converters.md +42 -0
  350. package/skills/iyulab-components/references/utilities/dialog.md +75 -0
  351. package/skills/iyulab-components/references/utilities/elements.md +55 -0
  352. package/skills/iyulab-components/references/utilities/icons.md +53 -0
  353. package/skills/iyulab-components/references/utilities/overlay-manager.md +34 -0
  354. package/skills/iyulab-components/references/utilities/sanitizers.md +32 -0
  355. package/skills/iyulab-components/references/utilities/theme.md +45 -0
  356. package/skills/iyulab-components/references/utilities/toast.md +58 -0
  357. package/dist/assets/icons/arrow-down-up.svg.js +0 -3
  358. package/dist/assets/icons/arrow-down.svg.js +0 -3
  359. package/dist/assets/icons/arrow-repeat.svg.js +0 -3
  360. package/dist/assets/icons/arrow-up.svg.js +0 -3
  361. package/dist/assets/icons/ban.svg.js +0 -3
  362. package/dist/assets/icons/bell-fill.svg.js +0 -3
  363. package/dist/assets/icons/box-arrow-up-right.svg.js +0 -3
  364. package/dist/assets/icons/check-circle-fill.svg.js +0 -3
  365. package/dist/assets/icons/check-lg.svg.js +0 -3
  366. package/dist/assets/icons/chevron-down.svg.js +0 -3
  367. package/dist/assets/icons/chevron-left.svg.js +0 -3
  368. package/dist/assets/icons/chevron-right.svg.js +0 -3
  369. package/dist/assets/icons/chevron-up.svg.js +0 -3
  370. package/dist/assets/icons/code-slash.svg.js +0 -3
  371. package/dist/assets/icons/copy.svg.js +0 -3
  372. package/dist/assets/icons/dash-lg.svg.js +0 -3
  373. package/dist/assets/icons/download.svg.js +0 -3
  374. package/dist/assets/icons/exclamation-circle-fill.svg.js +0 -3
  375. package/dist/assets/icons/exclamation-triangle-fill.svg.js +0 -3
  376. package/dist/assets/icons/eye-slash.svg.js +0 -3
  377. package/dist/assets/icons/eye.svg.js +0 -3
  378. package/dist/assets/icons/file-earmark.svg.js +0 -3
  379. package/dist/assets/icons/flag.svg.js +0 -3
  380. package/dist/assets/icons/globe.svg.js +0 -3
  381. package/dist/assets/icons/hand-thumbs-down-fill.svg.js +0 -3
  382. package/dist/assets/icons/hand-thumbs-down.svg.js +0 -3
  383. package/dist/assets/icons/hand-thumbs-up-fill.svg.js +0 -3
  384. package/dist/assets/icons/hand-thumbs-up.svg.js +0 -3
  385. package/dist/assets/icons/info-circle-fill.svg.js +0 -3
  386. package/dist/assets/icons/lightbulb-fill.svg.js +0 -3
  387. package/dist/assets/icons/lightbulb-off.svg.js +0 -3
  388. package/dist/assets/icons/lightbulb.svg.js +0 -3
  389. package/dist/assets/icons/mic-fill.svg.js +0 -3
  390. package/dist/assets/icons/mic-mute-fill.svg.js +0 -3
  391. package/dist/assets/icons/paperclip.svg.js +0 -3
  392. package/dist/assets/icons/pencil-square.svg.js +0 -3
  393. package/dist/assets/icons/plus-lg.svg.js +0 -3
  394. package/dist/assets/icons/search.svg.js +0 -3
  395. package/dist/assets/icons/share.svg.js +0 -3
  396. package/dist/assets/icons/sort-alpha-down.svg.js +0 -3
  397. package/dist/assets/icons/sort-alpha-up.svg.js +0 -3
  398. package/dist/assets/icons/stop-circle.svg.js +0 -3
  399. package/dist/assets/icons/tools.svg.js +0 -3
  400. package/dist/assets/icons/x-lg.svg.js +0 -3
  401. package/dist/assets/styles/dark.css.js +0 -3
  402. package/dist/assets/styles/light.css.js +0 -3
  403. package/dist/components/UJsonElement.js +0 -93
  404. package/dist/components/UModalElement.d.ts +0 -70
  405. package/dist/components/UModalElement.js +0 -144
  406. package/dist/components/UModalElement.styles.js +0 -29
  407. package/dist/components/alert/UAlert.component.d.ts +0 -40
  408. package/dist/components/alert/UAlert.component.js +0 -146
  409. package/dist/components/button/UButton.component.d.ts +0 -23
  410. package/dist/components/button/UButton.component.js +0 -72
  411. package/dist/components/card/UCard.component.d.ts +0 -21
  412. package/dist/components/card/UCard.component.js +0 -66
  413. package/dist/components/carousel/UCarousel.component.d.ts +0 -78
  414. package/dist/components/carousel/UCarousel.component.js +0 -264
  415. package/dist/components/dialog/UDialog.component.d.ts +0 -17
  416. package/dist/components/dialog/UDialog.component.js +0 -70
  417. package/dist/components/divider/UDivider.component.d.ts +0 -10
  418. package/dist/components/divider/UDivider.component.js +0 -30
  419. package/dist/components/drawer/UDrawer.component.d.ts +0 -18
  420. package/dist/components/drawer/UDrawer.component.js +0 -64
  421. package/dist/components/form/UForm.component.d.ts +0 -24
  422. package/dist/components/form/UForm.component.js +0 -76
  423. package/dist/components/icon/UIcon.component.d.ts +0 -29
  424. package/dist/components/icon/UIcon.component.js +0 -57
  425. package/dist/components/input/UInput.component.d.ts +0 -92
  426. package/dist/components/input/UInput.component.js +0 -267
  427. package/dist/components/menu/UMenu.component.d.ts +0 -67
  428. package/dist/components/menu/UMenu.component.js +0 -338
  429. package/dist/components/menu-item/UMenuItem.component.d.ts +0 -25
  430. package/dist/components/menu-item/UMenuItem.component.js +0 -111
  431. package/dist/components/progress-bar/UProgressBar.component.d.ts +0 -27
  432. package/dist/components/progress-bar/UProgressBar.component.js +0 -99
  433. package/dist/components/progress-ring/UProgressRing.component.d.ts +0 -33
  434. package/dist/components/progress-ring/UProgressRing.component.js +0 -114
  435. package/dist/components/skeleton/USkeleton.component.d.ts +0 -22
  436. package/dist/components/skeleton/USkeleton.component.js +0 -58
  437. package/dist/components/spinner/USpinner.component.d.ts +0 -9
  438. package/dist/components/spinner/USpinner.component.js +0 -22
  439. package/dist/components/split-panel/USplitPanel.component.d.ts +0 -44
  440. package/dist/components/split-panel/USplitPanel.component.js +0 -185
  441. package/dist/components/tag/UTag.component.d.ts +0 -23
  442. package/dist/components/tag/UTag.component.js +0 -72
  443. package/dist/components/tooltip/UTooltip.component.d.ts +0 -27
  444. package/dist/components/tooltip/UTooltip.component.js +0 -88
  445. package/dist/components/tree/UTree.component.d.ts +0 -37
  446. package/dist/components/tree/UTree.component.js +0 -120
  447. package/dist/components/tree-item/UTreeItem.component.d.ts +0 -41
  448. package/dist/components/tree-item/UTreeItem.component.js +0 -161
  449. package/dist/events/UChangeEvent.d.ts +0 -6
  450. package/dist/events/UHideEvent.d.ts +0 -6
  451. package/dist/events/UInputEvent.d.ts +0 -6
  452. package/dist/events/UResizeEvent.d.ts +0 -6
  453. package/dist/events/USelectEvent.d.ts +0 -6
  454. package/dist/events/UShowEvent.d.ts +0 -6
  455. package/dist/react-components/UAlert.d.ts +0 -8
  456. package/dist/react-components/UForm.d.ts +0 -8
  457. package/dist/react-components/UInput.d.ts +0 -8
  458. package/dist/react-components/UMenu.d.ts +0 -8
  459. package/dist/react-components/UMenuItem.d.ts +0 -8
  460. package/dist/react-components/UProgressBar.d.ts +0 -8
  461. package/dist/react-components/UProgressRing.d.ts +0 -8
  462. package/dist/react-components/USplitPanel.d.ts +0 -8
  463. package/dist/react-components/UTooltip.d.ts +0 -8
  464. package/dist/react-components/UTree.d.ts +0 -8
  465. package/dist/react-components/UTreeItem.d.ts +0 -8
  466. package/dist/utilities/IconRegistry.d.ts +0 -40
  467. package/dist/utilities/IconRegistry.js +0 -134
  468. package/dist/utilities/Notifier.d.ts +0 -31
  469. package/dist/utilities/Notifier.js +0 -79
  470. package/dist/utilities/decorators.d.ts +0 -28
  471. /package/dist/components/{UJsonElement.styles.d.ts → UDataElement.styles.d.ts} +0 -0
  472. /package/dist/components/{UModalElement.styles.d.ts → UFormControlElement.styles.d.ts} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,64 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.1 (2026-04-01)
4
+
5
+ ### Bug Fixes
6
+
7
+ - **`UIcon`**: Auto-apply `fill="currentColor"` only for fill-based icons; skip when `stroke="currentColor"` is set. Removed global `fill: currentColor` CSS rule.
8
+ - **`URadio`** / **`USelect`**: `options` field is now a `@state()` so UI re-renders when options change. `onChangeValue()` is now triggered on both `value` and `options` changes.
9
+ - **`UTextarea`**: Replaced `all: unset` with explicit CSS reset for better cross-browser compatibility. Height recalculation moved inside `requestAnimationFrame` to stabilize auto-resize.
10
+ - **`Dialog`**: Fixed `prompt()` input not capturing user text — switched to property binding (`.value`) and native `@input` event.
11
+
12
+ ### Dependencies
13
+
14
+ - **`@lit/react`**: Moved from `dependencies` to optional `peerDependencies`.
15
+
16
+ ---
17
+
18
+ ## 1.0.0 (2026-04-01)
19
+
20
+ ### Breaking Changes
21
+
22
+ - **Event type renames**: Removed `U`-prefixed event types (`UChangeEvent`, `UInputEvent`, `UShowEvent`, `UHideEvent`, `USelectEvent`, `UResizeEvent`) in favour of action-based names
23
+ - `ShowEvent` / `HideEvent` / `PickEvent` / `CheckEvent` / `ExpandEvent` / `CollapseEvent` / `NavigateEvent` / `RemoveEvent` / `ShiftEvent`
24
+ - **Utility API overhaul**: `Notifier` replaced by `Toast`; `IconRegistry` rewritten as `icons.ts` — existing API is not compatible, migration required
25
+ - **`UModalElement` removed**: Merged into `UOverlayElement`. Components that extended `UModalElement` must now extend `UOverlayElement`
26
+
27
+ ### New Components
28
+
29
+ - `u-avatar` — user avatar with image or initials fallback
30
+ - `u-badge` — numeric or status badge
31
+ - `u-breadcrumb` / `u-breadcrumb-item` — navigation breadcrumb trail
32
+ - `u-chip` — selectable chip with `pick` and `remove` events
33
+ - `u-field` — form field layout wrapper (label, description, validation message)
34
+ - `u-icon-button` — icon-only button
35
+ - `u-option` — option item for `u-select` and combobox inputs
36
+ - `u-panel` — general-purpose container panel
37
+ - `u-radio` — single-choice radio button
38
+ - `u-rating` — star/score input
39
+ - `u-select` — dropdown select control
40
+ - `u-slider` — range slider
41
+ - `u-switch` — toggle switch
42
+ - `u-tab` / `u-tab-panel` — tab navigation
43
+
44
+ ### Improvements
45
+
46
+ - **Component file split**: Heavy components extract render logic into a separate `U<Name>.component.ts`, keeping the class declaration lean
47
+ - **`Toast` utility**: Replaces `Notifier.toast()` with a semantic API — `Toast.show()`, `Toast.success()`, `Toast.error()`, etc.
48
+ - **`Dialog` utility**: Imperative dialog API added — `Dialog.confirm()`, `Dialog.prompt()`, etc.
49
+ - **`OverlayManager`**: Built-in overlay stack management and ESC key handling
50
+ - **`icons.ts`**: Full rewrite of `IconRegistry` with bundled SVG support via Vite `import.meta.glob` and built-in CDN resolvers for Tabler, Heroicons, Lucide, and Bootstrap Icons
51
+ - **`converters.ts`**: Extended type conversion utilities
52
+ - **Vite plugins**: Added `vite-plugin-glob-resolve` and `vite-plugin-react-wrapper` for automatic React wrapper generation
53
+
54
+ ### Documentation
55
+
56
+ - `skills/iyulab-components/` — full agent skill added with 39 component references, 9 utility references, and 5 extension references
57
+ - `docs/` — developer documentation added (architecture, guidelines, events, theming, form-controls, icons)
58
+ - `README.md` overhauled with Agent Skills installation guide
59
+
60
+ ---
61
+
3
62
  ## 0.4.0 (2026-03-02)
4
63
 
5
64
  ### Breaking Changes
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @iyulab/components
2
2
 
3
- Modern web components library built with Lit-Element for building reactive user interfaces.
3
+ Lit 기반 컴포넌트 라이브러리.
4
4
 
5
- Visit our [Demo Site](https://components.iyulab.com) to explore all components and their features.
5
+ [데모 사이트](https://components.iyulab.com)에서 모든 컴포넌트를 직접 확인할 있습니다.
6
6
 
7
7
  ## Installation
8
8
 
@@ -12,271 +12,77 @@ npm install @iyulab/components
12
12
 
13
13
  ## Usage
14
14
 
15
- ```js
16
- import "@iyulab/components";
17
- ```
18
-
19
- ## Components
20
-
21
- | Component | Tag | Description |
22
- |-----------|-----|-------------|
23
- | UAlert | `u-alert` | Alert messages with variants |
24
- | UButton | `u-button` | Button with variants, loading state |
25
- | UDialog | `u-dialog` | Modal dialog |
26
- | UDrawer | `u-drawer` | Slide-in drawer panel |
27
- | UDivider | `u-divider` | Visual divider |
28
- | UForm | `u-form` | Form container with validation |
29
- | UIcon | `u-icon` | Icon display |
30
- | UInput | `u-input` | Text input with validation |
31
- | UMenu | `u-menu` | Dropdown/context menu |
32
- | UMenuItem | `u-menu-item` | Menu item |
33
- | UProgressBar | `u-progress-bar` | Progress bar |
34
- | UProgressRing | `u-progress-ring` | Circular progress indicator |
35
- | USkeleton | `u-skeleton` | Loading placeholder |
36
- | USpinner | `u-spinner` | Loading spinner |
37
- | USplitPanel | `u-split-panel` | Resizable split panel |
38
- | UTag | `u-tag` | Label/status tag |
39
- | UTooltip | `u-tooltip` | Tooltip |
40
- | UTree | `u-tree` | Tree view |
41
- | UTreeItem | `u-tree-item` | Tree view item |
42
-
43
- ## Events
44
-
45
- All custom events use the `u-<action>` naming convention. Events bubble across Shadow DOM boundaries (`bubbles: true`, `composed: true`).
46
-
47
- ### Event Reference
48
-
49
- | Event | Emitted By | Detail | Description |
50
- |-------|-----------|--------|-------------|
51
- | `u-input` | `u-input` | `{ value: string }` | Fires on every keystroke (real-time input) |
52
- | `u-change` | `u-input` | `{ value: string }` | Fires when value is committed (blur/enter) |
53
- | `u-select` | `u-tree-item` | `{ value: string, item: UTreeItem }` | Fires when a leaf item is selected |
54
- | `u-show` | `u-dialog`, `u-drawer`, `u-tooltip` | — | Fires when the element becomes visible |
55
- | `u-hide` | `u-dialog`, `u-drawer`, `u-tooltip` | — | Fires when the element is hidden |
56
- | `u-toggle` | `u-tree-item` | `{ expanded: boolean, item: UTreeItem }` | Fires when a branch item expands/collapses |
57
- | `u-resize` | `u-split-panel` | — | Fires when the panel is resized |
58
-
59
- ### TypeScript Support
15
+ ```ts
16
+ // 전체 import
17
+ import '@iyulab/components';
60
18
 
61
- All events are typed and registered on `GlobalEventHandlersEventMap`:
62
-
63
- ```typescript
64
- import type { UInputEvent, UChangeEvent, USelectEvent, UShowEvent, UHideEvent, UResizeEvent } from '@iyulab/components';
65
-
66
- element.addEventListener('u-input', (e: UInputEvent) => {
67
- console.log(e.detail.value);
68
- });
69
- ```
70
-
71
- ### Listening to Events
72
-
73
- ```html
74
- <!-- Lit template -->
75
- <u-input @u-input=${this.handleInput} @u-change=${this.handleChange}></u-input>
19
+ // 개별 import
20
+ import '@iyulab/components/u-button';
21
+ import '@iyulab/components/u-input';
76
22
  ```
77
23
 
78
- ```javascript
79
- // Vanilla JS
80
- document.querySelector('u-input').addEventListener('u-input', (e) => {
81
- console.log('Real-time value:', e.detail.value);
82
- });
83
-
84
- document.querySelector('u-input').addEventListener('u-change', (e) => {
85
- console.log('Committed value:', e.detail.value);
86
- });
87
- ```
88
-
89
- ## CSS Custom Properties
90
-
91
- All CSS custom properties use the `--u-` prefix and are defined on `:root`. They respond to light/dark theme changes automatically.
92
-
93
- ### Semantic Colors
94
-
95
- These variables reference the color palette and should be used in most cases:
96
-
97
- #### Text
98
-
99
- | Variable | Light | Dark |
100
- |----------|-------|------|
101
- | `--u-txt-color` | neutral-900 | neutral-900 |
102
- | `--u-txt-color-inverse` | neutral-0 | neutral-100 |
103
- | `--u-txt-color-hover` | blue-600 | blue-600 |
104
- | `--u-txt-color-active` | blue-600 | blue-600 |
105
- | `--u-txt-color-disabled` | neutral-400 | neutral-500 |
106
- | `--u-txt-color-weak` | neutral-700 | neutral-700 |
107
- | `--u-txt-color-strong` | neutral-1000 | neutral-1000 |
108
- | `--u-link-txt-color` | blue-700 | blue-700 |
109
- | `--u-tooltip-txt-color` | neutral-0 | neutral-100 |
110
-
111
- #### Icon
112
-
113
- | Variable | Light | Dark |
114
- |----------|-------|------|
115
- | `--u-icon-color` | neutral-700 | neutral-800 |
116
- | `--u-icon-color-inverse` | neutral-0 | neutral-100 |
117
- | `--u-icon-color-hover` | blue-600 | blue-600 |
118
- | `--u-icon-color-active` | blue-600 | blue-600 |
119
- | `--u-icon-color-disabled` | neutral-400 | neutral-500 |
120
-
121
- #### Border
122
-
123
- | Variable | Light | Dark |
124
- |----------|-------|------|
125
- | `--u-border-color` | neutral-300 | neutral-400 |
126
- | `--u-border-color-weak` | neutral-200 | neutral-300 |
127
- | `--u-border-color-strong` | neutral-400 | neutral-500 |
128
- | `--u-input-border-color` | neutral-300 | neutral-400 |
129
- | `--u-input-border-color-hover` | neutral-400 | neutral-500 |
130
- | `--u-input-border-color-focus` | blue-600 | blue-600 |
131
- | `--u-input-border-color-invalid` | red-600 | red-600 |
132
-
133
- #### Background
134
-
135
- | Variable | Light | Dark |
136
- |----------|-------|------|
137
- | `--u-bg-color` | neutral-0 | neutral-100 |
138
- | `--u-bg-color-inverse` | neutral-900 | neutral-0 |
139
- | `--u-bg-color-hover` | neutral-100 | neutral-300 |
140
- | `--u-bg-color-active` | neutral-200 | neutral-400 |
141
- | `--u-bg-color-disabled` | neutral-50 | neutral-100 |
142
- | `--u-input-bg-color` | neutral-0 | neutral-200 |
143
- | `--u-panel-bg-color` | neutral-0 | neutral-200 |
144
- | `--u-overlay-bg-color` | `rgba(0,0,0,0.5)` | `rgba(0,0,0,0.7)` |
145
- | `--u-tooltip-bg-color` | `rgba(0,0,0,0.75)` | `rgba(255,255,255,0.85)` |
146
-
147
- #### Shadow
148
-
149
- | Variable | Light | Dark |
150
- |----------|-------|------|
151
- | `--u-shadow-color-weaker` | `rgba(0,0,0,0.04)` | `rgba(0,0,0,0.15)` |
152
- | `--u-shadow-color-weak` | `rgba(0,0,0,0.08)` | `rgba(0,0,0,0.25)` |
153
- | `--u-shadow-color-normal` | `rgba(0,0,0,0.12)` | `rgba(0,0,0,0.35)` |
154
- | `--u-shadow-color-strong` | `rgba(0,0,0,0.16)` | `rgba(0,0,0,0.45)` |
155
- | `--u-shadow-color-stronger` | `rgba(0,0,0,0.24)` | `rgba(0,0,0,0.60)` |
24
+ ## Skills Usage
156
25
 
157
- #### Scrollbar
26
+ LLM 코딩 에이전트(Claude Code, GitHub Copilot, Cursor 등)를 위한 스킬을 제공합니다.
158
27
 
159
- | Variable | Light | Dark |
160
- |----------|-------|------|
161
- | `--u-scrollbar-color` | neutral-400 | neutral-500 |
162
- | `--u-scrollbar-color-hover` | neutral-500 | neutral-600 |
163
- | `--u-scrollbar-track-color` | `transparent` | `transparent` |
164
-
165
- ### Typography
166
-
167
- | Variable | Value |
168
- |----------|-------|
169
- | `--u-font-base` | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif |
170
- | `--u-font-mono` | ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace |
171
- | `--u-font-serif` | 'Georgia', 'Times New Roman', Times, serif |
172
- | `--u-font-display` | 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
173
- | `--u-font-modern` | 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif |
174
- | `--u-font-rounded` | 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif |
175
-
176
- ### Color Palette
177
-
178
- The base color palettes (`neutral`, `blue`, `green`, `yellow`, `red`) range from `0` (lightest) to `1000` (darkest) in light mode, and are inverted for dark mode.
28
+ ```bash
29
+ # GitHub에서 설치
30
+ npx skills add iyulab/node-components
179
31
 
180
- ```css
181
- --u-neutral-{0|50|100|200|300|400|500|600|700|800|900|1000}
182
- --u-blue-{0|100|200|300|400|500|600|700|800|900|1000}
183
- --u-green-{0|100|200|300|400|500|600|700|800|900|1000}
184
- --u-yellow-{0|100|200|300|400|500|600|700|800|900|1000}
185
- --u-red-{0|100|200|300|400|500|600|700|800|900|1000}
32
+ # 패키지 설치 후 로컬에서 참조
33
+ npx skills add ./node_modules/@iyulab/components
186
34
  ```
187
35
 
188
- ### Customizing Styles
189
-
190
- Override any `--u-*` variable on `:root` or on specific elements:
36
+ ## Components
191
37
 
192
- ```css
193
- /* Global override */
194
- :root {
195
- --u-blue-600: #3B82F6;
196
- --u-font-base: 'Pretendard', sans-serif;
197
- }
38
+ **Feedback** — `u-alert`, `u-badge`, `u-spinner`, `u-skeleton`, `u-progress-bar`, `u-progress-ring`
198
39
 
199
- /* Scoped override */
200
- u-button {
201
- --u-bg-color: var(--my-brand-primary);
202
- --u-txt-color: var(--my-brand-on-primary);
203
- }
204
- ```
40
+ **Buttons & Actions** — `u-button`, `u-button-group`, `u-icon-button`, `u-chip`
205
41
 
206
- ### Integrating with External Design Systems
42
+ **Form Controls** `u-input`, `u-textarea`, `u-select`, `u-checkbox`, `u-radio`, `u-switch`, `u-slider`, `u-rating`, `u-field`, `u-form`, `u-option`
207
43
 
208
- Bridge `--u-*` variables with your design tokens:
44
+ **Overlay & Floating** `u-dialog`, `u-drawer`, `u-popover`, `u-tooltip`
209
45
 
210
- ```css
211
- /* Tailwind CSS bridge */
212
- :root {
213
- --u-blue-500: var(--color-blue-500);
214
- --u-blue-600: var(--color-blue-600);
215
- --u-neutral-0: var(--color-white);
216
- --u-neutral-900: var(--color-gray-900);
217
- --u-font-base: var(--font-sans);
218
- }
46
+ **Navigation** — `u-menu`, `u-menu-item`, `u-tab-panel`, `u-breadcrumb`, `u-breadcrumb-item`, `u-tree`, `u-tree-item`
219
47
 
220
- /* Material Design bridge */
221
- :root {
222
- --u-blue-600: var(--md-sys-color-primary);
223
- --u-bg-color: var(--md-sys-color-surface);
224
- --u-txt-color: var(--md-sys-color-on-surface);
225
- }
226
- ```
48
+ **Layout & Display** `u-avatar`, `u-card`, `u-carousel`, `u-divider`, `u-icon`, `u-panel`, `u-split-panel`, `u-tag`
227
49
 
228
50
  ## Theming
229
51
 
230
- ### Setup
231
-
232
- ```typescript
52
+ ```ts
233
53
  import { Theme } from '@iyulab/components';
234
54
 
235
55
  await Theme.init({
236
- default: 'system', // 'light' | 'dark' | 'system'
237
- useBuiltIn: true, // use built-in light/dark CSS (default: true)
238
- store: { // persist theme preference
239
- type: 'localStorage',
240
- prefix: 'my-app',
241
- },
56
+ default: 'system', // 'light' | 'dark' | 'system'
57
+ useBuiltIn: true, // 내장 light/dark CSS 사용
58
+ store: { type: 'localStorage', prefix: 'my-app' },
242
59
  });
243
- ```
244
-
245
- ### Switching Themes
246
60
 
247
- ```typescript
248
- Theme.set('dark'); // apply dark theme
249
- Theme.set('light'); // apply light theme
250
- Theme.set('system'); // follow OS preference
251
- const current = Theme.get(); // get current theme
61
+ Theme.set('dark');
62
+ Theme.set('system');
252
63
  ```
253
64
 
254
- ### External Theme Toggle Integration
255
-
256
- When using an external dark mode toggle (e.g., Tailwind's `dark:` class), disable built-in styles and bridge the variables:
257
-
258
- ```typescript
259
- // Disable built-in theme styles
260
- await Theme.init({ useBuiltIn: false });
261
- ```
65
+ 모든 CSS 변수는 `--u-` 접두사를 사용하며 `:root`에서 재정의할 수 있습니다.
262
66
 
263
67
  ```css
264
- /* Provide your own light/dark values */
265
68
  :root {
266
- --u-bg-color: #ffffff;
267
- --u-txt-color: #212121;
268
- }
269
-
270
- [data-theme="dark"] {
271
- --u-bg-color: #121212;
272
- --u-txt-color: #d4d4d4;
69
+ --u-blue-600: #3B82F6;
70
+ --u-font-base: 'Pretendard', sans-serif;
273
71
  }
274
72
  ```
275
73
 
276
- ## Core Dependencies
74
+ 자세한 내용은 [docs/theming.md](./docs/theming.md)를 참고하세요.
75
+
76
+ ## Documentation
277
77
 
278
- - [lit](https://www.npmjs.com/package/lit) - Fast web components framework
279
- - [@floating-ui/dom](https://www.npmjs.com/package/@floating-ui/dom) - Positioning library for tooltips and popovers
78
+ | 문서 | 내용 |
79
+ |------|------|
80
+ | [docs/architecture.md](./docs/architecture.md) | 패키지 구조 및 클래스 계층 |
81
+ | [docs/guidelines.md](./docs/guidelines.md) | 컴포넌트 개발 가이드라인 |
82
+ | [docs/events.md](./docs/events.md) | 이벤트 시스템 카탈로그 |
83
+ | [docs/theming.md](./docs/theming.md) | 테마 및 CSS 변수 |
84
+ | [docs/form-controls.md](./docs/form-controls.md) | 폼 연동 및 검증 API |
85
+ | [docs/icons.md](./docs/icons.md) | 아이콘 등록 및 사용 |
280
86
 
281
87
  ## License
282
88
 
@@ -0,0 +1,9 @@
1
+ //#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
2
+ function __decorate(decorators, target, key, desc) {
3
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
7
+ }
8
+ //#endregion
9
+ export { __decorate };
@@ -0,0 +1,6 @@
1
+ //#region \0@oxc-project+runtime@0.122.0/helpers/decorateMetadata.js
2
+ function __decorateMetadata(k, v) {
3
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
4
+ }
5
+ //#endregion
6
+ export { __decorateMetadata };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/bell-fill.svg.d37c41d9
2
+ var bell_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901\"/>\n</svg>";
3
+ //#endregion
4
+ export { bell_fill_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/check-circle-fill.svg.51c33a2a
2
+ var check_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/>\n</svg>";
3
+ //#endregion
4
+ export { check_circle_fill_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/check-lg.svg.371c5e78
2
+ var check_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"/>\n</svg>";
3
+ //#endregion
4
+ export { check_lg_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/chevron-down.svg.0ccd06ea
2
+ var chevron_down_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\n</svg>";
3
+ //#endregion
4
+ export { chevron_down_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/chevron-left.svg.b4601050
2
+ var chevron_left_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\n</svg>";
3
+ //#endregion
4
+ export { chevron_left_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/chevron-right.svg.0711bb67
2
+ var chevron_right_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\n</svg>";
3
+ //#endregion
4
+ export { chevron_right_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/chevron-up.svg.ed917211
2
+ var chevron_up_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z\"></path>\n</svg>";
3
+ //#endregion
4
+ export { chevron_up_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/dark.css.e8ac080d
2
+ var dark_css_default = ":root[theme=\"dark\"] {\n color-scheme: dark;\n\n /* Neutral Colors */\n --u-neutral-0: #000000;\n --u-neutral-50: #0A0A0A;\n --u-neutral-100: #121212;\n --u-neutral-200: #1E1E1E;\n --u-neutral-300: #2A2A2A;\n --u-neutral-400: #3D3D3D;\n --u-neutral-500: #525252;\n --u-neutral-600: #6E6E6E;\n --u-neutral-700: #8A8A8A;\n --u-neutral-800: #B0B0B0;\n --u-neutral-900: #D4D4D4;\n --u-neutral-1000: #FFFFFF;\n\n /* Blue Colors */\n --u-blue-0: #0A1E3D;\n --u-blue-100: #1E3A5F;\n --u-blue-200: #2B4F7E;\n --u-blue-300: #3D6B9E;\n --u-blue-400: #5284BE;\n --u-blue-500: #6BA3E3;\n --u-blue-600: #87B8F5;\n --u-blue-700: #A5CDFF;\n --u-blue-800: #C2DEFF;\n --u-blue-900: #DDEEFF;\n --u-blue-1000: #F0F7FF;\n\n /* Green Colors */\n --u-green-0: #0D2818;\n --u-green-100: #1A3F2A;\n --u-green-200: #285639;\n --u-green-300: #3A7450;\n --u-green-400: #4E9268;\n --u-green-500: #66B584;\n --u-green-600: #81D19D;\n --u-green-700: #9FE5B5;\n --u-green-800: #BEF2CD;\n --u-green-900: #DDF9E5;\n --u-green-1000: #F0FDF5;\n\n /* Yellow Colors */\n --u-yellow-0: #2E2200;\n --u-yellow-100: #4D3A00;\n --u-yellow-200: #6B5200;\n --u-yellow-300: #8A6B00;\n --u-yellow-400: #B08900;\n --u-yellow-500: #D4A712;\n --u-yellow-600: #F5C842;\n --u-yellow-700: #FFE066;\n --u-yellow-800: #FFED99;\n --u-yellow-900: #FFF5CC;\n --u-yellow-1000: #FFFBE6;\n\n /* Red Colors */\n --u-red-0: #2E0A0A;\n --u-red-100: #4D1717;\n --u-red-200: #6B2424;\n --u-red-300: #8F3535;\n --u-red-400: #B24848;\n --u-red-500: #D66060;\n --u-red-600: #F57878;\n --u-red-700: #FF9494;\n --u-red-800: #FFB3B3;\n --u-red-900: #FFD2D2;\n --u-red-1000: #FFF0F0;\n\n /* Orange Colors */\n --u-orange-0: #2E1A00;\n --u-orange-100: #4D2E00;\n --u-orange-200: #6B4200;\n --u-orange-300: #8A5A00;\n --u-orange-400: #B07500;\n --u-orange-500: #D49212;\n --u-orange-600: #F5AE42;\n --u-orange-700: #FFC566;\n --u-orange-800: #FFD899;\n --u-orange-900: #FFEBCC;\n --u-orange-1000: #FFF5E6;\n\n /* Teal Colors */\n --u-teal-0: #002018;\n --u-teal-100: #00382B;\n --u-teal-200: #005040;\n --u-teal-300: #006B55;\n --u-teal-400: #00886C;\n --u-teal-500: #1AA88A;\n --u-teal-600: #42C4A5;\n --u-teal-700: #6EDABD;\n --u-teal-800: #9EEAD5;\n --u-teal-900: #CFF5EA;\n --u-teal-1000: #EDFCF7;\n\n /* Cyan Colors */\n --u-cyan-0: #002830;\n --u-cyan-100: #00404D;\n --u-cyan-200: #005A6B;\n --u-cyan-300: #00768A;\n --u-cyan-400: #0094B0;\n --u-cyan-500: #12B4D4;\n --u-cyan-600: #42CFF5;\n --u-cyan-700: #66DFFF;\n --u-cyan-800: #99EBFF;\n --u-cyan-900: #CCF5FF;\n --u-cyan-1000: #E6FAFF;\n\n /* Purple Colors */\n --u-purple-0: #1A0A2E;\n --u-purple-100: #2E174D;\n --u-purple-200: #42246B;\n --u-purple-300: #5A358F;\n --u-purple-400: #7548B2;\n --u-purple-500: #9260D6;\n --u-purple-600: #AE78F5;\n --u-purple-700: #C494FF;\n --u-purple-800: #D8B3FF;\n --u-purple-900: #ECD2FF;\n --u-purple-1000: #F7F0FF;\n\n /* Pink Colors */\n --u-pink-0: #2E0A1A;\n --u-pink-100: #4D172E;\n --u-pink-200: #6B2442;\n --u-pink-300: #8F355A;\n --u-pink-400: #B24875;\n --u-pink-500: #D66092;\n --u-pink-600: #F578AE;\n --u-pink-700: #FF94C4;\n --u-pink-800: #FFB3D8;\n --u-pink-900: #FFD2EB;\n --u-pink-1000: #FFF0F7;\n\n /* Text Colors */\n --u-txt-color: var(--u-neutral-900);\n --u-txt-color-inverse: var(--u-neutral-100);\n --u-txt-color-hover: var(--u-blue-600);\n --u-txt-color-active: var(--u-blue-600);\n --u-txt-color-disabled: var(--u-neutral-500);\n --u-txt-color-weak: var(--u-neutral-700);\n --u-txt-color-strong: var(--u-neutral-1000);\n\n --u-link-txt-color: var(--u-blue-700);\n --u-tooltip-txt-color: var(--u-neutral-100);\n\n /* Icon Colors */\n --u-icon-color: var(--u-neutral-800);\n --u-icon-color-inverse: var(--u-neutral-100);\n --u-icon-color-hover: var(--u-blue-600);\n --u-icon-color-active: var(--u-blue-600);\n --u-icon-color-disabled: var(--u-neutral-500);\n\n /* Border Colors */\n --u-border-color: var(--u-neutral-400);\n --u-border-color-weak: var(--u-neutral-300);\n --u-border-color-strong: var(--u-neutral-500);\n\n --u-input-border-color: var(--u-neutral-400);\n --u-input-border-color-hover: var(--u-neutral-500);\n --u-input-border-color-focus: var(--u-blue-600);\n --u-input-border-color-invalid: var(--u-red-600);\n\n /* Background Colors */\n --u-bg-color: var(--u-neutral-100);\n --u-bg-color-inverse: var(--u-neutral-0);\n --u-bg-color-hover: var(--u-neutral-300);\n --u-bg-color-active: var(--u-neutral-400);\n --u-bg-color-disabled: var(--u-neutral-100);\n \n --u-input-bg-color: var(--u-neutral-200);\n --u-panel-bg-color: var(--u-neutral-200);\n --u-overlay-bg-color: rgba(0, 0, 0, 0.7);\n --u-tooltip-bg-color: rgba(255, 255, 255, 0.85);\n\n /* Shadow Colors */\n --u-shadow-color-weaker: rgba(0, 0, 0, 0.15);\n --u-shadow-color-weak: rgba(0, 0, 0, 0.25);\n --u-shadow-color-normal: rgba(0, 0, 0, 0.35);\n --u-shadow-color-strong: rgba(0, 0, 0, 0.45);\n --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n /* Scrollbar Colors */\n --u-scrollbar-color: var(--u-neutral-500);\n --u-scrollbar-color-hover: var(--u-neutral-600);\n --u-scrollbar-track-color: transparent;\n\n /* Font Styles */\n --u-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n --u-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n --u-font-serif: 'Georgia', 'Times New Roman', Times, serif;\n --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n --u-font-modern: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
3
+ //#endregion
4
+ export { dark_css_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/dash-lg.svg.b40b8b3a
2
+ var dash_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8\"/>\n</svg>";
3
+ //#endregion
4
+ export { dash_lg_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/exclamation-circle-fill.svg.dc8c523e
2
+ var exclamation_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2\"/>\n</svg>";
3
+ //#endregion
4
+ export { exclamation_circle_fill_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7
2
+ var exclamation_triangle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2\"/>\n</svg>";
3
+ //#endregion
4
+ export { exclamation_triangle_fill_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/eye-slash.svg.240afafa
2
+ var eye_slash_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z\"/>\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829\"/>\n <path d=\"M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z\"/>\n</svg>";
3
+ //#endregion
4
+ export { eye_slash_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/eye.svg.2e5e9c4c
2
+ var eye_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z\"/>\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\"/>\n</svg>";
3
+ //#endregion
4
+ export { eye_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/info-circle-fill.svg.6580071d
2
+ var info_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2\"/>\n</svg>";
3
+ //#endregion
4
+ export { info_circle_fill_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/light.css.637cb2f8
2
+ var light_css_default = ":root {\n color-scheme: light;\n\n /* Neutral Colors */\n --u-neutral-0: #FFFFFF;\n --u-neutral-50: #FAFAFA;\n --u-neutral-100: #F5F5F5;\n --u-neutral-200: #EEEEEE;\n --u-neutral-300: #E0E0E0;\n --u-neutral-400: #BDBDBD;\n --u-neutral-500: #9E9E9E;\n --u-neutral-600: #757575;\n --u-neutral-700: #616161;\n --u-neutral-800: #424242;\n --u-neutral-900: #212121;\n --u-neutral-1000: #000000;\n\n /* Blue Colors */\n --u-blue-0: #E3F2FD;\n --u-blue-100: #BBDEFB;\n --u-blue-200: #90CAF9;\n --u-blue-300: #64B5F6;\n --u-blue-400: #42A5F5;\n --u-blue-500: #2196F3;\n --u-blue-600: #1E88E5;\n --u-blue-700: #1976D2;\n --u-blue-800: #1565C0;\n --u-blue-900: #0D47A1;\n --u-blue-1000: #062A5E;\n\n /* Green Colors */\n --u-green-0: #E8F5E9;\n --u-green-100: #C8E6C9;\n --u-green-200: #A5D6A7;\n --u-green-300: #81C784;\n --u-green-400: #66BB6A;\n --u-green-500: #4CAF50;\n --u-green-600: #43A047;\n --u-green-700: #388E3C;\n --u-green-800: #2E7D32;\n --u-green-900: #1B5E20;\n --u-green-1000: #0F3A12;\n\n /* Yellow Colors */\n --u-yellow-0: #FFFDE7;\n --u-yellow-100: #FFF9C4;\n --u-yellow-200: #FFF59D;\n --u-yellow-300: #FFF176;\n --u-yellow-400: #FFEE58;\n --u-yellow-500: #FFEB3B;\n --u-yellow-600: #FDD835;\n --u-yellow-700: #FBC02D;\n --u-yellow-800: #F9A825;\n --u-yellow-900: #F57F17;\n --u-yellow-1000: #8A4A00;\n\n /* Red Colors */\n --u-red-0: #FFEBEE;\n --u-red-100: #FFCDD2;\n --u-red-200: #EF9A9A;\n --u-red-300: #E57373;\n --u-red-400: #EF5350;\n --u-red-500: #F44336;\n --u-red-600: #E53935;\n --u-red-700: #D32F2F;\n --u-red-800: #C62828;\n --u-red-900: #B71C1C;\n --u-red-1000: #6B0F0F;\n\n /* Orange Colors */\n --u-orange-0: #FFF3E0;\n --u-orange-100: #FFE0B2;\n --u-orange-200: #FFCC80;\n --u-orange-300: #FFB74D;\n --u-orange-400: #FFA726;\n --u-orange-500: #FF9800;\n --u-orange-600: #FB8C00;\n --u-orange-700: #F57C00;\n --u-orange-800: #EF6C00;\n --u-orange-900: #E65100;\n --u-orange-1000: #8C3100;\n\n /* Teal Colors */\n --u-teal-0: #E0F2F1;\n --u-teal-100: #B2DFDB;\n --u-teal-200: #80CBC4;\n --u-teal-300: #4DB6AC;\n --u-teal-400: #26A69A;\n --u-teal-500: #009688;\n --u-teal-600: #00897B;\n --u-teal-700: #00796B;\n --u-teal-800: #00695C;\n --u-teal-900: #004D40;\n --u-teal-1000: #002E26;\n\n /* Cyan Colors */\n --u-cyan-0: #E0F7FA;\n --u-cyan-100: #B2EBF2;\n --u-cyan-200: #80DEEA;\n --u-cyan-300: #4DD0E1;\n --u-cyan-400: #26C6DA;\n --u-cyan-500: #00BCD4;\n --u-cyan-600: #00ACC1;\n --u-cyan-700: #0097A7;\n --u-cyan-800: #00838F;\n --u-cyan-900: #006064;\n --u-cyan-1000: #003A3D;\n\n /* Purple Colors */\n --u-purple-0: #F3E5F5;\n --u-purple-100: #E1BEE7;\n --u-purple-200: #CE93D8;\n --u-purple-300: #BA68C8;\n --u-purple-400: #AB47BC;\n --u-purple-500: #9C27B0;\n --u-purple-600: #8E24AA;\n --u-purple-700: #7B1FA2;\n --u-purple-800: #6A1B9A;\n --u-purple-900: #4A148C;\n --u-purple-1000: #2C0B54;\n\n /* Pink Colors */\n --u-pink-0: #FCE4EC;\n --u-pink-100: #F8BBD0;\n --u-pink-200: #F48FB1;\n --u-pink-300: #F06292;\n --u-pink-400: #EC407A;\n --u-pink-500: #E91E63;\n --u-pink-600: #D81B60;\n --u-pink-700: #C2185B;\n --u-pink-800: #AD1457;\n --u-pink-900: #880E4F;\n --u-pink-1000: #520830;\n\n /* Text Colors */\n --u-txt-color: var(--u-neutral-900);\n --u-txt-color-inverse: var(--u-neutral-0);\n --u-txt-color-hover: var(--u-blue-600);\n --u-txt-color-active: var(--u-blue-600);\n --u-txt-color-disabled: var(--u-neutral-400);\n --u-txt-color-weak: var(--u-neutral-700);\n --u-txt-color-strong: var(--u-neutral-1000);\n\n --u-link-txt-color: var(--u-blue-700);\n --u-tooltip-txt-color: var(--u-neutral-0);\n\n /* Icon Colors */\n --u-icon-color: var(--u-neutral-700);\n --u-icon-color-inverse: var(--u-neutral-0);\n --u-icon-color-hover: var(--u-blue-600);\n --u-icon-color-active: var(--u-blue-600);\n --u-icon-color-disabled: var(--u-neutral-400);\n\n /* Border Colors */\n --u-border-color: var(--u-neutral-300);\n --u-border-color-weak: var(--u-neutral-200);\n --u-border-color-strong: var(--u-neutral-400);\n\n --u-input-border-color: var(--u-neutral-300);\n --u-input-border-color-hover: var(--u-neutral-400);\n --u-input-border-color-focus: var(--u-blue-600);\n --u-input-border-color-invalid: var(--u-red-600);\n\n /* Background Colors */\n --u-bg-color: var(--u-neutral-0);\n --u-bg-color-inverse: var(--u-neutral-900);\n --u-bg-color-hover: var(--u-neutral-100);\n --u-bg-color-active: var(--u-neutral-200);\n --u-bg-color-disabled: var(--u-neutral-50);\n \n --u-input-bg-color: var(--u-neutral-0);\n --u-panel-bg-color: var(--u-neutral-0);\n --u-overlay-bg-color: rgba(0, 0, 0, 0.5);\n --u-tooltip-bg-color: rgba(0, 0, 0, 0.75);\n\n /* Shadow Colors */\n --u-shadow-color-weaker: rgba(0, 0, 0, 0.04);\n --u-shadow-color-weak: rgba(0, 0, 0, 0.08);\n --u-shadow-color-normal: rgba(0, 0, 0, 0.12);\n --u-shadow-color-strong: rgba(0, 0, 0, 0.16);\n --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n /* Scrollbar Colors */\n --u-scrollbar-color: var(--u-neutral-400);\n --u-scrollbar-color-hover: var(--u-neutral-500);\n --u-scrollbar-track-color: transparent;\n\n /* Font Styles */\n --u-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n --u-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n --u-font-serif: 'Georgia', 'Times New Roman', Times, serif;\n --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n --u-font-modern: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
3
+ //#endregion
4
+ export { light_css_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/plus-lg.svg.294e9073
2
+ var plus_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2\"/>\n</svg>";
3
+ //#endregion
4
+ export { plus_lg_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/search.svg.0ba2012d
2
+ var search_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/>\n</svg>";
3
+ //#endregion
4
+ export { search_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/star-fill.svg.f24b5a2d
2
+ var star_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z\"/>\n</svg>";
3
+ //#endregion
4
+ export { star_fill_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/star.svg.4af61468
2
+ var star_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z\"/>\n</svg>";
3
+ //#endregion
4
+ export { star_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/three-dots-vertical.svg.9fee78c5
2
+ var three_dots_vertical_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\"/>\n</svg>";
3
+ //#endregion
4
+ export { three_dots_vertical_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/three-dots.svg.6a7a5b23
2
+ var three_dots_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3\"/>\n</svg>";
3
+ //#endregion
4
+ export { three_dots_svg_default as default };
@@ -0,0 +1,4 @@
1
+ //#region \0glob-assets_raw/x-lg.svg.f34b882c
2
+ var x_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z\"/>\n</svg>";
3
+ //#endregion
4
+ export { x_lg_svg_default as default };
@@ -1,6 +1,6 @@
1
1
  import { UElement } from './UElement.js';
2
2
  /**
3
- * `UJsonElement`는 light DOM 내 `<script type="application/json">` 태그에서
3
+ * `UDataElement`는 light DOM 내 `<script type="application/json">` 태그에서
4
4
  * JSON 데이터를 읽어 컴포넌트 프로퍼티에 자동으로 매핑하는 기반 클래스입니다.
5
5
  *
6
6
  * 사용 예시:
@@ -12,21 +12,19 @@ import { UElement } from './UElement.js';
12
12
  *
13
13
  * JSON 최상위 키가 컴포넌트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
14
14
  */
15
- export declare class UJsonElement extends UElement {
15
+ export declare class UDataElement extends UElement {
16
16
  static styles: import('lit').CSSResultGroup[];
17
- static dependencies: Record<string, typeof UElement>;
18
17
  connectedCallback(): void;
19
18
  /**
20
19
  * 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
21
20
  * 데이터는 `<script type="application/json">` 태그로 주입됩니다.
22
21
  * 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
23
22
  *
24
- * @param tag - 커스텀 엘리먼트 태그 이름 (예: `"u-table-block"`)
25
23
  * @param json - JSON 데이터 객체 또는 문자열
26
24
  * @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
27
25
  * @returns 생성된 HTML 문자열
28
26
  */
29
- static buildHTML(tag: string, json: any, attrs?: Record<string, string | boolean | object | null | undefined>): string;
27
+ static buildHTML(json: object | string, attrs?: Record<string, string | boolean | object | null | undefined>): string;
30
28
  /**
31
29
  * `data` 객체를 컴포넌트 프로퍼티에 할당합니다.
32
30
  * `data`가 제공되지 않은 경우 light DOM 내 `<script type="application/json">` 태그에서 JSON 데이터를 읽어 프로퍼티에 자동으로 할당합니다.