@kouji-ui/components 0.1.1 → 0.1.3

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 (733) hide show
  1. package/fesm2022/kouji-ui-components.mjs +17668 -0
  2. package/fesm2022/kouji-ui-components.mjs.map +1 -0
  3. package/package.json +21 -11
  4. package/types/kouji-ui-components.d.ts +8032 -0
  5. package/.turbo/turbo-build.log +0 -29
  6. package/CHANGELOG.md +0 -192
  7. package/ng-package.json +0 -7
  8. package/src/accordion/_examples/accordion.default.example.ts +0 -31
  9. package/src/accordion/_examples/accordion.disabled.example.ts +0 -38
  10. package/src/accordion/_examples/accordion.multiple.example.ts +0 -31
  11. package/src/accordion/_examples/accordion.rich-content.example.ts +0 -49
  12. package/src/accordion/_examples/index.ts +0 -6
  13. package/src/accordion/accordion.arrow-nav.example.ts +0 -39
  14. package/src/accordion/accordion.css +0 -68
  15. package/src/accordion/accordion.playground.ts +0 -119
  16. package/src/accordion/accordion.spec.ts +0 -117
  17. package/src/accordion/accordion.ts +0 -153
  18. package/src/accordion/accordion.usage.example.ts +0 -38
  19. package/src/accordion/accordion.value.example.ts +0 -60
  20. package/src/accordion/index.ts +0 -1
  21. package/src/alert/_examples/alert.banner.example.ts +0 -56
  22. package/src/alert/_examples/alert.dismissible.example.ts +0 -53
  23. package/src/alert/_examples/alert.example.ts +0 -40
  24. package/src/alert/_examples/alert.variants.example.ts +0 -66
  25. package/src/alert/_examples/alert.with-actions.example.ts +0 -57
  26. package/src/alert/_examples/index.ts +0 -7
  27. package/src/alert/alert.css +0 -133
  28. package/src/alert/alert.playground.ts +0 -111
  29. package/src/alert/alert.spec.ts +0 -167
  30. package/src/alert/alert.ts +0 -250
  31. package/src/alert/alert.usage.example.ts +0 -58
  32. package/src/alert/index.ts +0 -8
  33. package/src/avatar/_examples/avatar-group.example.ts +0 -31
  34. package/src/avatar/_examples/avatar-group.list.example.ts +0 -45
  35. package/src/avatar/_examples/avatar-group.overflow.example.ts +0 -33
  36. package/src/avatar/_examples/avatar-group.shapes.example.ts +0 -39
  37. package/src/avatar/_examples/avatar-group.sizes.example.ts +0 -44
  38. package/src/avatar/_examples/avatar.default.example.ts +0 -18
  39. package/src/avatar/_examples/avatar.initials.example.ts +0 -20
  40. package/src/avatar/_examples/avatar.shapes.example.ts +0 -22
  41. package/src/avatar/_examples/avatar.sizes.example.ts +0 -26
  42. package/src/avatar/_examples/avatar.with-image.example.ts +0 -20
  43. package/src/avatar/_examples/index.ts +0 -12
  44. package/src/avatar/avatar-group.spec.ts +0 -138
  45. package/src/avatar/avatar-group.ts +0 -127
  46. package/src/avatar/avatar-group.usage.example.ts +0 -30
  47. package/src/avatar/avatar.css +0 -58
  48. package/src/avatar/avatar.playground.ts +0 -95
  49. package/src/avatar/avatar.ts +0 -123
  50. package/src/avatar/index.ts +0 -2
  51. package/src/badge/_examples/badge.default.example.ts +0 -18
  52. package/src/badge/_examples/badge.sizes.example.ts +0 -25
  53. package/src/badge/_examples/badge.variants.example.ts +0 -24
  54. package/src/badge/_examples/badge.with-dot.example.ts +0 -31
  55. package/src/badge/_examples/badge.with-icon.example.ts +0 -23
  56. package/src/badge/_examples/index.ts +0 -7
  57. package/src/badge/badge.css +0 -59
  58. package/src/badge/badge.playground.ts +0 -49
  59. package/src/badge/badge.ts +0 -86
  60. package/src/badge/badge.usage.example.ts +0 -22
  61. package/src/badge/index.ts +0 -1
  62. package/src/breadcrumb/_examples/breadcrumb.custom-separator.example.ts +0 -53
  63. package/src/breadcrumb/_examples/breadcrumb.example.ts +0 -48
  64. package/src/breadcrumb/_examples/breadcrumb.long-path.example.ts +0 -58
  65. package/src/breadcrumb/_examples/breadcrumb.truncated.example.ts +0 -59
  66. package/src/breadcrumb/_examples/breadcrumb.with-icons.example.ts +0 -66
  67. package/src/breadcrumb/_examples/index.ts +0 -7
  68. package/src/breadcrumb/breadcrumb.css +0 -121
  69. package/src/breadcrumb/breadcrumb.playground.ts +0 -93
  70. package/src/breadcrumb/breadcrumb.spec.ts +0 -230
  71. package/src/breadcrumb/breadcrumb.ts +0 -272
  72. package/src/breadcrumb/breadcrumb.usage.example.ts +0 -45
  73. package/src/breadcrumb/index.ts +0 -1
  74. package/src/button/_examples/button.anchor.example.ts +0 -18
  75. package/src/button/_examples/button.configured.example.ts +0 -43
  76. package/src/button/_examples/button.disabled.example.ts +0 -25
  77. package/src/button/_examples/button.example.ts +0 -22
  78. package/src/button/_examples/button.icon.example.ts +0 -27
  79. package/src/button/_examples/button.loading.example.ts +0 -31
  80. package/src/button/_examples/button.pressed.example.ts +0 -24
  81. package/src/button/_examples/button.sizes.example.ts +0 -26
  82. package/src/button/_examples/button.usage.example.ts +0 -66
  83. package/src/button/_examples/button.variants.example.ts +0 -26
  84. package/src/button/_examples/index.ts +0 -12
  85. package/src/button/button.css +0 -263
  86. package/src/button/button.playground.ts +0 -79
  87. package/src/button/button.spec.ts +0 -100
  88. package/src/button/button.ts +0 -150
  89. package/src/button/index.ts +0 -1
  90. package/src/button-group/_examples/button-group.example.ts +0 -30
  91. package/src/button-group/_examples/button-group.icon-only.example.ts +0 -30
  92. package/src/button-group/_examples/button-group.toggle.example.ts +0 -36
  93. package/src/button-group/_examples/button-group.variants.example.ts +0 -40
  94. package/src/button-group/_examples/button-group.vertical.example.ts +0 -29
  95. package/src/button-group/_examples/index.ts +0 -7
  96. package/src/button-group/button-group.css +0 -80
  97. package/src/button-group/button-group.playground.ts +0 -94
  98. package/src/button-group/button-group.spec.ts +0 -119
  99. package/src/button-group/button-group.ts +0 -130
  100. package/src/button-group/button-group.usage.example.ts +0 -35
  101. package/src/button-group/index.ts +0 -1
  102. package/src/calendar/_examples/calendar.example.ts +0 -33
  103. package/src/calendar/_examples/index.ts +0 -3
  104. package/src/calendar/calendar.css +0 -129
  105. package/src/calendar/calendar.playground.ts +0 -84
  106. package/src/calendar/calendar.spec.ts +0 -50
  107. package/src/calendar/calendar.ts +0 -171
  108. package/src/calendar/calendar.usage.example.ts +0 -33
  109. package/src/calendar/index.ts +0 -1
  110. package/src/card/_examples/card.cover.example.ts +0 -53
  111. package/src/card/_examples/card.example.ts +0 -27
  112. package/src/card/_examples/card.full.example.ts +0 -51
  113. package/src/card/_examples/index.ts +0 -5
  114. package/src/card/card.css +0 -120
  115. package/src/card/card.playground.ts +0 -116
  116. package/src/card/card.spec.ts +0 -50
  117. package/src/card/card.ts +0 -194
  118. package/src/card/card.usage.example.ts +0 -46
  119. package/src/card/index.ts +0 -1
  120. package/src/carousel/_examples/carousel.autoplay.example.ts +0 -69
  121. package/src/carousel/_examples/carousel.example.ts +0 -60
  122. package/src/carousel/_examples/carousel.indicators.example.ts +0 -64
  123. package/src/carousel/_examples/carousel.lazy-load.example.ts +0 -85
  124. package/src/carousel/_examples/carousel.tabs-pattern.example.ts +0 -61
  125. package/src/carousel/_examples/index.ts +0 -7
  126. package/src/carousel/carousel.css +0 -181
  127. package/src/carousel/carousel.playground.ts +0 -135
  128. package/src/carousel/carousel.spec.ts +0 -211
  129. package/src/carousel/carousel.ts +0 -399
  130. package/src/carousel/carousel.usage.example.ts +0 -46
  131. package/src/carousel/index.ts +0 -1
  132. package/src/cascade-select/_examples/cascade-select.data-driven.example.ts +0 -119
  133. package/src/cascade-select/_examples/cascade-select.disabled.example.ts +0 -74
  134. package/src/cascade-select/_examples/cascade-select.example.ts +0 -80
  135. package/src/cascade-select/_examples/cascade-select.field.example.ts +0 -73
  136. package/src/cascade-select/_examples/cascade-select.path.example.ts +0 -85
  137. package/src/cascade-select/_examples/index.ts +0 -7
  138. package/src/cascade-select/cascade-select.css +0 -120
  139. package/src/cascade-select/cascade-select.playground.ts +0 -133
  140. package/src/cascade-select/cascade-select.ts +0 -201
  141. package/src/cascade-select/cascade-select.usage.example.ts +0 -44
  142. package/src/cascade-select/index.ts +0 -5
  143. package/src/chat/_examples/chat-bubble.example.ts +0 -71
  144. package/src/chat/_examples/chat-bubble.grouped.example.ts +0 -69
  145. package/src/chat/_examples/chat-bubble.sides.example.ts +0 -41
  146. package/src/chat/_examples/chat-bubble.variants.example.ts +0 -58
  147. package/src/chat/_examples/chat-bubble.with-state.example.ts +0 -57
  148. package/src/chat/_examples/index.ts +0 -7
  149. package/src/chat/chat.css +0 -231
  150. package/src/chat/chat.playground.ts +0 -171
  151. package/src/chat/chat.spec.ts +0 -343
  152. package/src/chat/chat.ts +0 -269
  153. package/src/chat/chat.usage.example.ts +0 -49
  154. package/src/chat/index.ts +0 -13
  155. package/src/checkbox/_examples/checkbox.checked.example.ts +0 -20
  156. package/src/checkbox/_examples/checkbox.default.example.ts +0 -20
  157. package/src/checkbox/_examples/checkbox.disabled.example.ts +0 -26
  158. package/src/checkbox/_examples/checkbox.indeterminate.example.ts +0 -20
  159. package/src/checkbox/_examples/checkbox.usage.example.ts +0 -62
  160. package/src/checkbox/_examples/index.ts +0 -7
  161. package/src/checkbox/checkbox.css +0 -74
  162. package/src/checkbox/checkbox.playground.ts +0 -68
  163. package/src/checkbox/checkbox.ts +0 -122
  164. package/src/checkbox/index.ts +0 -1
  165. package/src/color-picker/_examples/color-picker.alpha.example.ts +0 -36
  166. package/src/color-picker/_examples/color-picker.example.ts +0 -34
  167. package/src/color-picker/_examples/color-picker.hex-input.example.ts +0 -53
  168. package/src/color-picker/_examples/color-picker.in-form.example.ts +0 -60
  169. package/src/color-picker/_examples/color-picker.usage.example.ts +0 -58
  170. package/src/color-picker/_examples/color-picker.with-presets.example.ts +0 -45
  171. package/src/color-picker/_examples/index.ts +0 -8
  172. package/src/color-picker/color-picker.css +0 -183
  173. package/src/color-picker/color-picker.playground.ts +0 -83
  174. package/src/color-picker/color-picker.spec.ts +0 -94
  175. package/src/color-picker/color-picker.ts +0 -234
  176. package/src/color-picker/index.ts +0 -1
  177. package/src/combobox/_examples/combobox.async.example.ts +0 -85
  178. package/src/combobox/_examples/combobox.empty-state.example.ts +0 -36
  179. package/src/combobox/_examples/combobox.example.ts +0 -36
  180. package/src/combobox/_examples/combobox.free-text.example.ts +0 -42
  181. package/src/combobox/_examples/combobox.usage.example.ts +0 -51
  182. package/src/combobox/_examples/combobox.with-icons.example.ts +0 -49
  183. package/src/combobox/_examples/index.ts +0 -8
  184. package/src/combobox/combobox.css +0 -101
  185. package/src/combobox/combobox.playground.ts +0 -90
  186. package/src/combobox/combobox.spec.ts +0 -111
  187. package/src/combobox/combobox.ts +0 -219
  188. package/src/combobox/index.ts +0 -6
  189. package/src/command-palette/_examples/command-palette.async.example.ts +0 -99
  190. package/src/command-palette/_examples/command-palette.dialog.example.ts +0 -90
  191. package/src/command-palette/_examples/command-palette.example.ts +0 -40
  192. package/src/command-palette/_examples/command-palette.fuzzy.example.ts +0 -54
  193. package/src/command-palette/_examples/command-palette.groups.example.ts +0 -55
  194. package/src/command-palette/_examples/command-palette.usage.example.ts +0 -49
  195. package/src/command-palette/_examples/index.ts +0 -8
  196. package/src/command-palette/command-palette.css +0 -234
  197. package/src/command-palette/command-palette.playground.ts +0 -119
  198. package/src/command-palette/command-palette.ts +0 -448
  199. package/src/command-palette/index.ts +0 -10
  200. package/src/confirm-popup/_examples/confirm-popup.destructive.example.ts +0 -72
  201. package/src/confirm-popup/_examples/confirm-popup.example.ts +0 -82
  202. package/src/confirm-popup/_examples/confirm-popup.placement.example.ts +0 -97
  203. package/src/confirm-popup/_examples/confirm-popup.usage.example.ts +0 -94
  204. package/src/confirm-popup/_examples/confirm-popup.with-message.example.ts +0 -76
  205. package/src/confirm-popup/_examples/index.ts +0 -7
  206. package/src/confirm-popup/confirm-popup.css +0 -47
  207. package/src/confirm-popup/confirm-popup.playground.ts +0 -109
  208. package/src/confirm-popup/confirm-popup.spec.ts +0 -209
  209. package/src/confirm-popup/confirm-popup.ts +0 -279
  210. package/src/confirm-popup/index.ts +0 -1
  211. package/src/date-picker/_examples/date-picker.disabled-dates.example.ts +0 -44
  212. package/src/date-picker/_examples/date-picker.example.ts +0 -38
  213. package/src/date-picker/_examples/date-picker.locale.example.ts +0 -50
  214. package/src/date-picker/_examples/date-picker.readonly.example.ts +0 -32
  215. package/src/date-picker/_examples/date-picker.usage.example.ts +0 -60
  216. package/src/date-picker/_examples/date-picker.with-min-max.example.ts +0 -47
  217. package/src/date-picker/_examples/index.ts +0 -8
  218. package/src/date-picker/date-picker.css +0 -61
  219. package/src/date-picker/date-picker.playground.ts +0 -79
  220. package/src/date-picker/date-picker.spec.ts +0 -71
  221. package/src/date-picker/date-picker.ts +0 -185
  222. package/src/date-picker/index.ts +0 -1
  223. package/src/dialog/_examples/dialog.confirmation.example.ts +0 -30
  224. package/src/dialog/_examples/dialog.default.example.ts +0 -30
  225. package/src/dialog/_examples/dialog.nested.example.ts +0 -86
  226. package/src/dialog/_examples/dialog.scrollable.example.ts +0 -30
  227. package/src/dialog/_examples/dialog.usage.example.ts +0 -57
  228. package/src/dialog/_examples/dialog.with-form.example.ts +0 -48
  229. package/src/dialog/_examples/index.ts +0 -8
  230. package/src/dialog/dialog.css +0 -56
  231. package/src/dialog/dialog.playground.ts +0 -136
  232. package/src/dialog/dialog.ts +0 -82
  233. package/src/dialog/index.ts +0 -1
  234. package/src/divider/_examples/divider.example.ts +0 -27
  235. package/src/divider/_examples/divider.sizes.example.ts +0 -33
  236. package/src/divider/_examples/divider.structural.example.ts +0 -55
  237. package/src/divider/_examples/divider.usage.example.ts +0 -48
  238. package/src/divider/_examples/divider.variants.example.ts +0 -33
  239. package/src/divider/_examples/divider.vertical.example.ts +0 -38
  240. package/src/divider/_examples/divider.with-content.example.ts +0 -38
  241. package/src/divider/_examples/index.ts +0 -9
  242. package/src/divider/divider.css +0 -93
  243. package/src/divider/divider.playground.ts +0 -97
  244. package/src/divider/divider.spec.ts +0 -207
  245. package/src/divider/divider.ts +0 -220
  246. package/src/divider/index.ts +0 -1
  247. package/src/drawer/_examples/drawer.example.ts +0 -30
  248. package/src/drawer/_examples/drawer.modal-vs-non-modal.example.ts +0 -27
  249. package/src/drawer/_examples/drawer.scrollable.example.ts +0 -30
  250. package/src/drawer/_examples/drawer.sides.example.ts +0 -32
  251. package/src/drawer/_examples/drawer.usage.example.ts +0 -56
  252. package/src/drawer/_examples/drawer.with-form.example.ts +0 -48
  253. package/src/drawer/_examples/index.ts +0 -8
  254. package/src/drawer/drawer.css +0 -130
  255. package/src/drawer/drawer.playground.ts +0 -107
  256. package/src/drawer/drawer.spec.ts +0 -216
  257. package/src/drawer/drawer.ts +0 -85
  258. package/src/drawer/index.ts +0 -1
  259. package/src/dropdown-menu/_examples/dropdown-menu.disabled.example.ts +0 -19
  260. package/src/dropdown-menu/_examples/dropdown-menu.example.ts +0 -20
  261. package/src/dropdown-menu/_examples/dropdown-menu.shortcuts.example.ts +0 -31
  262. package/src/dropdown-menu/_examples/dropdown-menu.sides.example.ts +0 -18
  263. package/src/dropdown-menu/_examples/dropdown-menu.usage.example.ts +0 -56
  264. package/src/dropdown-menu/_examples/dropdown-menu.with-icons.example.ts +0 -31
  265. package/src/dropdown-menu/_examples/dropdown-menu.with-separator.example.ts +0 -41
  266. package/src/dropdown-menu/_examples/index.ts +0 -9
  267. package/src/dropdown-menu/dropdown-menu.css +0 -108
  268. package/src/dropdown-menu/dropdown-menu.playground.ts +0 -109
  269. package/src/dropdown-menu/dropdown-menu.spec.ts +0 -5
  270. package/src/dropdown-menu/dropdown-menu.ts +0 -128
  271. package/src/dropdown-menu/index.ts +0 -1
  272. package/src/empty-state/_examples/empty-state.error.example.ts +0 -63
  273. package/src/empty-state/_examples/empty-state.example.ts +0 -59
  274. package/src/empty-state/_examples/empty-state.search.example.ts +0 -82
  275. package/src/empty-state/_examples/empty-state.sizes.example.ts +0 -76
  276. package/src/empty-state/_examples/empty-state.usage.example.ts +0 -66
  277. package/src/empty-state/_examples/empty-state.with-actions.example.ts +0 -68
  278. package/src/empty-state/_examples/index.ts +0 -8
  279. package/src/empty-state/empty-state.css +0 -114
  280. package/src/empty-state/empty-state.playground.ts +0 -87
  281. package/src/empty-state/empty-state.spec.ts +0 -211
  282. package/src/empty-state/empty-state.ts +0 -276
  283. package/src/empty-state/index.ts +0 -1
  284. package/src/example-components.ts +0 -396
  285. package/src/field/_examples/field.disabled.example.ts +0 -49
  286. package/src/field/_examples/field.example.ts +0 -51
  287. package/src/field/_examples/field.required.example.ts +0 -46
  288. package/src/field/_examples/field.with-error.example.ts +0 -73
  289. package/src/field/_examples/field.with-prefix-suffix.example.ts +0 -63
  290. package/src/field/_examples/index.ts +0 -7
  291. package/src/field/field.css +0 -138
  292. package/src/field/field.playground.ts +0 -108
  293. package/src/field/field.spec.ts +0 -132
  294. package/src/field/field.ts +0 -232
  295. package/src/field/field.usage.example.ts +0 -63
  296. package/src/field/index.ts +0 -7
  297. package/src/file-upload/_examples/file-upload.dropzone.example.ts +0 -32
  298. package/src/file-upload/_examples/file-upload.example.ts +0 -29
  299. package/src/file-upload/_examples/file-upload.image-preview.example.ts +0 -31
  300. package/src/file-upload/_examples/file-upload.multiple.example.ts +0 -23
  301. package/src/file-upload/_examples/file-upload.with-progress.example.ts +0 -59
  302. package/src/file-upload/_examples/index.ts +0 -7
  303. package/src/file-upload/file-upload.css +0 -207
  304. package/src/file-upload/file-upload.playground.ts +0 -84
  305. package/src/file-upload/file-upload.spec.ts +0 -94
  306. package/src/file-upload/file-upload.ts +0 -301
  307. package/src/file-upload/file-upload.usage.example.ts +0 -45
  308. package/src/file-upload/index.ts +0 -1
  309. package/src/form/_examples/form.async-submit.example.ts +0 -72
  310. package/src/form/_examples/form.compound.example.ts +0 -93
  311. package/src/form/_examples/form.example.ts +0 -70
  312. package/src/form/_examples/form.validation.example.ts +0 -67
  313. package/src/form/_examples/index.ts +0 -6
  314. package/src/form/form.css +0 -63
  315. package/src/form/form.playground.ts +0 -145
  316. package/src/form/form.spec.ts +0 -96
  317. package/src/form/form.ts +0 -216
  318. package/src/form/form.usage.example.ts +0 -63
  319. package/src/form/index.ts +0 -5
  320. package/src/icon/_examples/icon.gallery.example.ts +0 -199
  321. package/src/icon/_examples/icon.usage.example.ts +0 -46
  322. package/src/icon/_examples/index.ts +0 -4
  323. package/src/icon/icon.playground.ts +0 -63
  324. package/src/icon/index.ts +0 -5
  325. package/src/icon/lucide/icon-names.generated.ts +0 -1708
  326. package/src/icon/lucide/icon-names.ts +0 -18
  327. package/src/icon/lucide/index.ts +0 -2
  328. package/src/icon/lucide/provide-lucide-icons.ts +0 -96
  329. package/src/input/_examples/index.ts +0 -4
  330. package/src/input/_examples/input.color.example.ts +0 -33
  331. package/src/input/_examples/input.example.ts +0 -22
  332. package/src/input/index.ts +0 -1
  333. package/src/input/input.css +0 -70
  334. package/src/input/input.playground.ts +0 -79
  335. package/src/input/input.spec.ts +0 -98
  336. package/src/input/input.ts +0 -158
  337. package/src/input/input.usage.example.ts +0 -40
  338. package/src/input-group/_examples/index.ts +0 -7
  339. package/src/input-group/_examples/input-group.button.example.ts +0 -43
  340. package/src/input-group/_examples/input-group.example.ts +0 -39
  341. package/src/input-group/_examples/input-group.icon.example.ts +0 -49
  342. package/src/input-group/_examples/input-group.url.example.ts +0 -36
  343. package/src/input-group/_examples/input-group.variants.example.ts +0 -39
  344. package/src/input-group/index.ts +0 -1
  345. package/src/input-group/input-group.css +0 -125
  346. package/src/input-group/input-group.playground.ts +0 -90
  347. package/src/input-group/input-group.ts +0 -142
  348. package/src/input-group/input-group.usage.example.ts +0 -47
  349. package/src/input-mask/_examples/index.ts +0 -8
  350. package/src/input-mask/_examples/input-mask.credit-card.example.ts +0 -90
  351. package/src/input-mask/_examples/input-mask.custom-tokens.example.ts +0 -87
  352. package/src/input-mask/_examples/input-mask.date.example.ts +0 -61
  353. package/src/input-mask/_examples/input-mask.example.ts +0 -61
  354. package/src/input-mask/_examples/input-mask.usage.example.ts +0 -44
  355. package/src/input-mask/_examples/input-mask.validation.example.ts +0 -80
  356. package/src/input-mask/index.ts +0 -9
  357. package/src/input-mask/input-mask.css +0 -39
  358. package/src/input-mask/input-mask.playground.ts +0 -79
  359. package/src/input-mask/input-mask.ts +0 -130
  360. package/src/input-otp/_examples/index.ts +0 -8
  361. package/src/input-otp/_examples/input-otp.autosubmit.example.ts +0 -71
  362. package/src/input-otp/_examples/input-otp.example.ts +0 -47
  363. package/src/input-otp/_examples/input-otp.lengths.example.ts +0 -67
  364. package/src/input-otp/_examples/input-otp.masked.example.ts +0 -46
  365. package/src/input-otp/_examples/input-otp.reactive.example.ts +0 -58
  366. package/src/input-otp/_examples/input-otp.separator.example.ts +0 -49
  367. package/src/input-otp/index.ts +0 -1
  368. package/src/input-otp/input-otp.css +0 -87
  369. package/src/input-otp/input-otp.playground.ts +0 -107
  370. package/src/input-otp/input-otp.ts +0 -244
  371. package/src/input-otp/input-otp.usage.example.ts +0 -45
  372. package/src/kbd/_examples/index.ts +0 -6
  373. package/src/kbd/_examples/kbd.combo.example.ts +0 -24
  374. package/src/kbd/_examples/kbd.example.ts +0 -22
  375. package/src/kbd/_examples/kbd.in-tooltip.example.ts +0 -43
  376. package/src/kbd/_examples/kbd.sizes.example.ts +0 -31
  377. package/src/kbd/index.ts +0 -1
  378. package/src/kbd/kbd.css +0 -67
  379. package/src/kbd/kbd.playground.ts +0 -51
  380. package/src/kbd/kbd.spec.ts +0 -123
  381. package/src/kbd/kbd.ts +0 -123
  382. package/src/kbd/kbd.usage.example.ts +0 -38
  383. package/src/link/_examples/index.ts +0 -8
  384. package/src/link/_examples/link.disabled.example.ts +0 -23
  385. package/src/link/_examples/link.example.ts +0 -26
  386. package/src/link/_examples/link.external.example.ts +0 -33
  387. package/src/link/_examples/link.in-prose.example.ts +0 -36
  388. package/src/link/_examples/link.sizes.example.ts +0 -28
  389. package/src/link/_examples/link.variants.example.ts +0 -25
  390. package/src/link/index.ts +0 -1
  391. package/src/link/link.css +0 -104
  392. package/src/link/link.playground.ts +0 -98
  393. package/src/link/link.spec.ts +0 -146
  394. package/src/link/link.ts +0 -133
  395. package/src/link/link.usage.example.ts +0 -37
  396. package/src/list/_examples/index.ts +0 -7
  397. package/src/list/_examples/list.divided.example.ts +0 -32
  398. package/src/list/_examples/list.example.ts +0 -31
  399. package/src/list/_examples/list.interactive.example.ts +0 -51
  400. package/src/list/_examples/list.nav.example.ts +0 -44
  401. package/src/list/_examples/list.with-icons.example.ts +0 -97
  402. package/src/list/index.ts +0 -1
  403. package/src/list/list.css +0 -166
  404. package/src/list/list.playground.ts +0 -90
  405. package/src/list/list.spec.ts +0 -121
  406. package/src/list/list.ts +0 -227
  407. package/src/list/list.usage.example.ts +0 -45
  408. package/src/menubar/_examples/index.ts +0 -6
  409. package/src/menubar/_examples/menubar.disabled-item.example.ts +0 -23
  410. package/src/menubar/_examples/menubar.example.ts +0 -22
  411. package/src/menubar/_examples/menubar.with-shortcuts.example.ts +0 -33
  412. package/src/menubar/_examples/menubar.with-submenu.example.ts +0 -76
  413. package/src/menubar/index.ts +0 -1
  414. package/src/menubar/menubar.css +0 -62
  415. package/src/menubar/menubar.playground.ts +0 -96
  416. package/src/menubar/menubar.ts +0 -160
  417. package/src/menubar/menubar.usage.example.ts +0 -33
  418. package/src/number-input/_examples/index.ts +0 -7
  419. package/src/number-input/_examples/number-input.currency.example.ts +0 -35
  420. package/src/number-input/_examples/number-input.decimal.example.ts +0 -34
  421. package/src/number-input/_examples/number-input.example.ts +0 -24
  422. package/src/number-input/_examples/number-input.min-max.example.ts +0 -33
  423. package/src/number-input/_examples/number-input.with-stepper.example.ts +0 -45
  424. package/src/number-input/index.ts +0 -1
  425. package/src/number-input/number-input.css +0 -115
  426. package/src/number-input/number-input.playground.ts +0 -92
  427. package/src/number-input/number-input.spec.ts +0 -102
  428. package/src/number-input/number-input.ts +0 -212
  429. package/src/number-input/number-input.usage.example.ts +0 -73
  430. package/src/overlay/overlay.css +0 -32
  431. package/src/overlay-badge/_examples/index.ts +0 -7
  432. package/src/overlay-badge/_examples/overlay-badge.described.example.ts +0 -36
  433. package/src/overlay-badge/_examples/overlay-badge.dot.example.ts +0 -28
  434. package/src/overlay-badge/_examples/overlay-badge.example.ts +0 -34
  435. package/src/overlay-badge/_examples/overlay-badge.on-avatar.example.ts +0 -38
  436. package/src/overlay-badge/_examples/overlay-badge.positions.example.ts +0 -39
  437. package/src/overlay-badge/index.ts +0 -1
  438. package/src/overlay-badge/overlay-badge.css +0 -118
  439. package/src/overlay-badge/overlay-badge.playground.ts +0 -92
  440. package/src/overlay-badge/overlay-badge.spec.ts +0 -174
  441. package/src/overlay-badge/overlay-badge.ts +0 -232
  442. package/src/overlay-badge/overlay-badge.usage.example.ts +0 -44
  443. package/src/pagination/_examples/index.ts +0 -7
  444. package/src/pagination/_examples/pagination.boundaries.example.ts +0 -56
  445. package/src/pagination/_examples/pagination.compact.example.ts +0 -42
  446. package/src/pagination/_examples/pagination.example.ts +0 -55
  447. package/src/pagination/_examples/pagination.large.example.ts +0 -54
  448. package/src/pagination/_examples/pagination.with-info.example.ts +0 -49
  449. package/src/pagination/index.ts +0 -1
  450. package/src/pagination/pagination.css +0 -146
  451. package/src/pagination/pagination.playground.ts +0 -107
  452. package/src/pagination/pagination.spec.ts +0 -202
  453. package/src/pagination/pagination.ts +0 -432
  454. package/src/pagination/pagination.usage.example.ts +0 -50
  455. package/src/password-input/_examples/index.ts +0 -6
  456. package/src/password-input/_examples/password-input.example.ts +0 -24
  457. package/src/password-input/_examples/password-input.strength.example.ts +0 -45
  458. package/src/password-input/_examples/password-input.toggle.example.ts +0 -43
  459. package/src/password-input/_examples/password-input.with-rules.example.ts +0 -78
  460. package/src/password-input/index.ts +0 -1
  461. package/src/password-input/password-input.css +0 -155
  462. package/src/password-input/password-input.playground.ts +0 -81
  463. package/src/password-input/password-input.spec.ts +0 -129
  464. package/src/password-input/password-input.ts +0 -254
  465. package/src/password-input/password-input.usage.example.ts +0 -55
  466. package/src/playground-types.ts +0 -47
  467. package/src/popover/_examples/index.ts +0 -7
  468. package/src/popover/_examples/popover.cancellable.example.ts +0 -20
  469. package/src/popover/_examples/popover.example.ts +0 -20
  470. package/src/popover/_examples/popover.modal.example.ts +0 -22
  471. package/src/popover/_examples/popover.sides.example.ts +0 -37
  472. package/src/popover/_examples/popover.with-form.example.ts +0 -38
  473. package/src/popover/index.ts +0 -1
  474. package/src/popover/popover.css +0 -71
  475. package/src/popover/popover.playground.ts +0 -86
  476. package/src/popover/popover.spec.ts +0 -5
  477. package/src/popover/popover.ts +0 -94
  478. package/src/popover/popover.usage.example.ts +0 -48
  479. package/src/progress-bar/_examples/index.ts +0 -7
  480. package/src/progress-bar/_examples/progress-bar.example.ts +0 -22
  481. package/src/progress-bar/_examples/progress-bar.indeterminate.example.ts +0 -23
  482. package/src/progress-bar/_examples/progress-bar.sizes.example.ts +0 -29
  483. package/src/progress-bar/_examples/progress-bar.variants.example.ts +0 -30
  484. package/src/progress-bar/_examples/progress-bar.with-label.example.ts +0 -30
  485. package/src/progress-bar/index.ts +0 -1
  486. package/src/progress-bar/progress-bar.css +0 -113
  487. package/src/progress-bar/progress-bar.playground.ts +0 -87
  488. package/src/progress-bar/progress-bar.spec.ts +0 -233
  489. package/src/progress-bar/progress-bar.ts +0 -155
  490. package/src/progress-bar/progress-bar.usage.example.ts +0 -52
  491. package/src/public-api.ts +0 -61
  492. package/src/radio/_examples/index.ts +0 -6
  493. package/src/radio/_examples/radio.default.example.ts +0 -26
  494. package/src/radio/_examples/radio.disabled.example.ts +0 -26
  495. package/src/radio/_examples/radio.group.example.ts +0 -27
  496. package/src/radio/_examples/radio.inline.example.ts +0 -26
  497. package/src/radio/index.ts +0 -1
  498. package/src/radio/radio.css +0 -58
  499. package/src/radio/radio.playground.ts +0 -90
  500. package/src/radio/radio.ts +0 -143
  501. package/src/radio/radio.usage.example.ts +0 -54
  502. package/src/select/_examples/index.ts +0 -6
  503. package/src/select/_examples/select.default.example.ts +0 -26
  504. package/src/select/_examples/select.disabled.example.ts +0 -24
  505. package/src/select/_examples/select.grouped.example.ts +0 -37
  506. package/src/select/_examples/select.placeholder.example.ts +0 -26
  507. package/src/select/index.ts +0 -1
  508. package/src/select/select.css +0 -65
  509. package/src/select/select.playground.ts +0 -81
  510. package/src/select/select.ts +0 -176
  511. package/src/select/select.usage.example.ts +0 -64
  512. package/src/skeleton/_examples/index.ts +0 -6
  513. package/src/skeleton/_examples/skeleton.animations.example.ts +0 -52
  514. package/src/skeleton/_examples/skeleton.card.example.ts +0 -68
  515. package/src/skeleton/_examples/skeleton.example.ts +0 -24
  516. package/src/skeleton/_examples/skeleton.shapes.example.ts +0 -55
  517. package/src/skeleton/index.ts +0 -1
  518. package/src/skeleton/skeleton.css +0 -111
  519. package/src/skeleton/skeleton.playground.ts +0 -80
  520. package/src/skeleton/skeleton.spec.ts +0 -126
  521. package/src/skeleton/skeleton.ts +0 -155
  522. package/src/skeleton/skeleton.usage.example.ts +0 -49
  523. package/src/slider/_examples/index.ts +0 -7
  524. package/src/slider/_examples/slider.example.ts +0 -41
  525. package/src/slider/_examples/slider.formatted.example.ts +0 -53
  526. package/src/slider/_examples/slider.range.example.ts +0 -48
  527. package/src/slider/_examples/slider.vertical.example.ts +0 -48
  528. package/src/slider/_examples/slider.with-marks.example.ts +0 -46
  529. package/src/slider/index.ts +0 -1
  530. package/src/slider/slider.css +0 -172
  531. package/src/slider/slider.playground.ts +0 -88
  532. package/src/slider/slider.spec.ts +0 -139
  533. package/src/slider/slider.ts +0 -246
  534. package/src/slider/slider.usage.example.ts +0 -68
  535. package/src/speed-dial/_examples/index.ts +0 -7
  536. package/src/speed-dial/_examples/speed-dial.directions.example.ts +0 -85
  537. package/src/speed-dial/_examples/speed-dial.disabled.example.ts +0 -71
  538. package/src/speed-dial/_examples/speed-dial.example.ts +0 -48
  539. package/src/speed-dial/_examples/speed-dial.usage.example.ts +0 -59
  540. package/src/speed-dial/_examples/speed-dial.with-tooltips.example.ts +0 -65
  541. package/src/speed-dial/index.ts +0 -1
  542. package/src/speed-dial/speed-dial.css +0 -137
  543. package/src/speed-dial/speed-dial.playground.ts +0 -137
  544. package/src/speed-dial/speed-dial.spec.ts +0 -191
  545. package/src/speed-dial/speed-dial.ts +0 -257
  546. package/src/spinner/_examples/index.ts +0 -8
  547. package/src/spinner/_examples/spinner.animations.example.ts +0 -54
  548. package/src/spinner/_examples/spinner.example.ts +0 -26
  549. package/src/spinner/_examples/spinner.in-button.example.ts +0 -51
  550. package/src/spinner/_examples/spinner.sizes.example.ts +0 -31
  551. package/src/spinner/_examples/spinner.usage.example.ts +0 -45
  552. package/src/spinner/_examples/spinner.variants.example.ts +0 -34
  553. package/src/spinner/index.ts +0 -1
  554. package/src/spinner/spinner.css +0 -161
  555. package/src/spinner/spinner.playground.ts +0 -68
  556. package/src/spinner/spinner.spec.ts +0 -184
  557. package/src/spinner/spinner.ts +0 -185
  558. package/src/stepper/_examples/index.ts +0 -8
  559. package/src/stepper/_examples/stepper.example.ts +0 -62
  560. package/src/stepper/_examples/stepper.non-linear.example.ts +0 -63
  561. package/src/stepper/_examples/stepper.optional-step.example.ts +0 -62
  562. package/src/stepper/_examples/stepper.usage.example.ts +0 -73
  563. package/src/stepper/_examples/stepper.vertical.example.ts +0 -66
  564. package/src/stepper/_examples/stepper.with-error.example.ts +0 -63
  565. package/src/stepper/index.ts +0 -1
  566. package/src/stepper/stepper.css +0 -147
  567. package/src/stepper/stepper.playground.ts +0 -88
  568. package/src/stepper/stepper.spec.ts +0 -200
  569. package/src/stepper/stepper.ts +0 -242
  570. package/src/table/_examples/index.ts +0 -23
  571. package/src/table/_examples/table.column-pinning.example.ts +0 -55
  572. package/src/table/_examples/table.column-resize.example.ts +0 -49
  573. package/src/table/_examples/table.column-visibility.example.ts +0 -52
  574. package/src/table/_examples/table.density.example.ts +0 -71
  575. package/src/table/_examples/table.editable.example.ts +0 -85
  576. package/src/table/_examples/table.empty-and-error.example.ts +0 -112
  577. package/src/table/_examples/table.example.ts +0 -45
  578. package/src/table/_examples/table.export.example.ts +0 -82
  579. package/src/table/_examples/table.filterable.example.ts +0 -67
  580. package/src/table/_examples/table.grouping.example.ts +0 -63
  581. package/src/table/_examples/table.keyboard.example.ts +0 -115
  582. package/src/table/_examples/table.master-detail.example.ts +0 -102
  583. package/src/table/_examples/table.persistence.example.ts +0 -85
  584. package/src/table/_examples/table.playground.ts +0 -154
  585. package/src/table/_examples/table.row-pinning.example.ts +0 -71
  586. package/src/table/_examples/table.selection.example.ts +0 -67
  587. package/src/table/_examples/table.server-mode.example.ts +0 -120
  588. package/src/table/_examples/table.sortable.example.ts +0 -49
  589. package/src/table/_examples/table.theming.example.ts +0 -64
  590. package/src/table/_examples/table.usage.example.ts +0 -90
  591. package/src/table/_examples/table.virtualized.example.ts +0 -122
  592. package/src/table/index.ts +0 -11
  593. package/src/table/table-cell-editor-outlet.ts +0 -111
  594. package/src/table/table-editors/boolean-editor.ts +0 -71
  595. package/src/table/table-editors/date-editor.ts +0 -117
  596. package/src/table/table-editors/editors.spec.ts +0 -147
  597. package/src/table/table-editors/index.ts +0 -41
  598. package/src/table/table-editors/number-editor.ts +0 -89
  599. package/src/table/table-editors/select-editor.ts +0 -107
  600. package/src/table/table-editors/text-editor.ts +0 -82
  601. package/src/table/table-export.spec.ts +0 -33
  602. package/src/table/table-export.ts +0 -53
  603. package/src/table/table-filter-outlet.ts +0 -137
  604. package/src/table/table-filters/date-filter.ts +0 -122
  605. package/src/table/table-filters/filters.css +0 -53
  606. package/src/table/table-filters/filters.spec.ts +0 -277
  607. package/src/table/table-filters/index.ts +0 -11
  608. package/src/table/table-filters/number-filter.ts +0 -232
  609. package/src/table/table-filters/select-filter.ts +0 -129
  610. package/src/table/table-filters/text-filter.ts +0 -110
  611. package/src/table/table-pagination.spec.ts +0 -118
  612. package/src/table/table-pagination.ts +0 -191
  613. package/src/table/table-side-panel.spec.ts +0 -170
  614. package/src/table/table-side-panel.ts +0 -263
  615. package/src/table/table-status-bar.spec.ts +0 -78
  616. package/src/table/table-status-bar.ts +0 -70
  617. package/src/table/table-toolbar.spec.ts +0 -180
  618. package/src/table/table-toolbar.ts +0 -244
  619. package/src/table/table-virtual.spec.ts +0 -103
  620. package/src/table/table-virtual.ts +0 -180
  621. package/src/table/table.css +0 -468
  622. package/src/table/table.spec.ts +0 -175
  623. package/src/table/table.ts +0 -1009
  624. package/src/tabs/_examples/index.ts +0 -8
  625. package/src/tabs/_examples/tabs.controlled.example.ts +0 -59
  626. package/src/tabs/_examples/tabs.disabled.example.ts +0 -34
  627. package/src/tabs/_examples/tabs.example.ts +0 -34
  628. package/src/tabs/_examples/tabs.manual-activation.example.ts +0 -34
  629. package/src/tabs/_examples/tabs.usage.example.ts +0 -43
  630. package/src/tabs/_examples/tabs.vertical.example.ts +0 -33
  631. package/src/tabs/index.ts +0 -1
  632. package/src/tabs/tabs.css +0 -80
  633. package/src/tabs/tabs.playground.ts +0 -88
  634. package/src/tabs/tabs.spec.ts +0 -135
  635. package/src/tabs/tabs.ts +0 -204
  636. package/src/tag/_examples/index.ts +0 -9
  637. package/src/tag/_examples/tag.example.ts +0 -22
  638. package/src/tag/_examples/tag.list.example.ts +0 -38
  639. package/src/tag/_examples/tag.removable.example.ts +0 -39
  640. package/src/tag/_examples/tag.selectable.example.ts +0 -33
  641. package/src/tag/_examples/tag.sizes.example.ts +0 -25
  642. package/src/tag/_examples/tag.usage.example.ts +0 -62
  643. package/src/tag/_examples/tag.variants.example.ts +0 -29
  644. package/src/tag/index.ts +0 -1
  645. package/src/tag/tag.css +0 -167
  646. package/src/tag/tag.playground.ts +0 -63
  647. package/src/tag/tag.spec.ts +0 -153
  648. package/src/tag/tag.ts +0 -186
  649. package/src/test-setup.ts +0 -5
  650. package/src/textarea/_examples/index.ts +0 -8
  651. package/src/textarea/_examples/textarea.autoresize.example.ts +0 -37
  652. package/src/textarea/_examples/textarea.character-count.example.ts +0 -34
  653. package/src/textarea/_examples/textarea.example.ts +0 -22
  654. package/src/textarea/_examples/textarea.no-resize.example.ts +0 -28
  655. package/src/textarea/_examples/textarea.usage.example.ts +0 -50
  656. package/src/textarea/_examples/textarea.with-field.example.ts +0 -66
  657. package/src/textarea/index.ts +0 -1
  658. package/src/textarea/textarea.css +0 -117
  659. package/src/textarea/textarea.playground.ts +0 -70
  660. package/src/textarea/textarea.spec.ts +0 -161
  661. package/src/textarea/textarea.ts +0 -339
  662. package/src/time-picker/_examples/index.ts +0 -8
  663. package/src/time-picker/_examples/time-picker.12-hour.example.ts +0 -24
  664. package/src/time-picker/_examples/time-picker.example.ts +0 -24
  665. package/src/time-picker/_examples/time-picker.formatted.example.ts +0 -32
  666. package/src/time-picker/_examples/time-picker.range.example.ts +0 -54
  667. package/src/time-picker/_examples/time-picker.usage.example.ts +0 -53
  668. package/src/time-picker/_examples/time-picker.with-seconds.example.ts +0 -24
  669. package/src/time-picker/index.ts +0 -1
  670. package/src/time-picker/time-picker.css +0 -126
  671. package/src/time-picker/time-picker.playground.ts +0 -72
  672. package/src/time-picker/time-picker.spec.ts +0 -77
  673. package/src/time-picker/time-picker.ts +0 -207
  674. package/src/toast/_examples/index.ts +0 -7
  675. package/src/toast/_examples/toast.default.example.ts +0 -37
  676. package/src/toast/_examples/toast.dismissible.example.ts +0 -38
  677. package/src/toast/_examples/toast.usage.example.ts +0 -57
  678. package/src/toast/_examples/toast.variants.example.ts +0 -43
  679. package/src/toast/_examples/toast.with-action.example.ts +0 -46
  680. package/src/toast/index.ts +0 -1
  681. package/src/toast/toast.css +0 -115
  682. package/src/toast/toast.playground.ts +0 -61
  683. package/src/toast/toast.ts +0 -168
  684. package/src/toggle/_examples/index.ts +0 -7
  685. package/src/toggle/_examples/toggle.checked.example.ts +0 -20
  686. package/src/toggle/_examples/toggle.default.example.ts +0 -20
  687. package/src/toggle/_examples/toggle.disabled.example.ts +0 -26
  688. package/src/toggle/_examples/toggle.usage.example.ts +0 -51
  689. package/src/toggle/_examples/toggle.with-label.example.ts +0 -30
  690. package/src/toggle/index.ts +0 -1
  691. package/src/toggle/toggle.css +0 -123
  692. package/src/toggle/toggle.playground.ts +0 -65
  693. package/src/toggle/toggle.ts +0 -113
  694. package/src/tooltip/_examples/index.ts +0 -9
  695. package/src/tooltip/_examples/tooltip.delays.example.ts +0 -16
  696. package/src/tooltip/_examples/tooltip.disabled.example.ts +0 -16
  697. package/src/tooltip/_examples/tooltip.example.ts +0 -16
  698. package/src/tooltip/_examples/tooltip.group.example.ts +0 -20
  699. package/src/tooltip/_examples/tooltip.rich.example.ts +0 -19
  700. package/src/tooltip/_examples/tooltip.sides.example.ts +0 -18
  701. package/src/tooltip/_examples/tooltip.usage.example.ts +0 -50
  702. package/src/tooltip/index.ts +0 -1
  703. package/src/tooltip/tooltip.css +0 -61
  704. package/src/tooltip/tooltip.playground.ts +0 -79
  705. package/src/tooltip/tooltip.spec.ts +0 -5
  706. package/src/tooltip/tooltip.ts +0 -102
  707. package/src/tree-select/_examples/index.ts +0 -8
  708. package/src/tree-select/_examples/tree-select.disabled.example.ts +0 -106
  709. package/src/tree-select/_examples/tree-select.example.ts +0 -65
  710. package/src/tree-select/_examples/tree-select.expanded.example.ts +0 -72
  711. package/src/tree-select/_examples/tree-select.field.example.ts +0 -77
  712. package/src/tree-select/_examples/tree-select.multi.example.ts +0 -73
  713. package/src/tree-select/_examples/tree-select.usage.example.ts +0 -85
  714. package/src/tree-select/index.ts +0 -1
  715. package/src/tree-select/tree-select.css +0 -220
  716. package/src/tree-select/tree-select.playground.ts +0 -83
  717. package/src/tree-select/tree-select.ts +0 -348
  718. package/src/typography/_examples/index.ts +0 -9
  719. package/src/typography/_examples/typography.blockquote.example.ts +0 -34
  720. package/src/typography/_examples/typography.code.example.ts +0 -32
  721. package/src/typography/_examples/typography.example.ts +0 -42
  722. package/src/typography/_examples/typography.lead.example.ts +0 -37
  723. package/src/typography/_examples/typography.muted.example.ts +0 -27
  724. package/src/typography/_examples/typography.truncate.example.ts +0 -41
  725. package/src/typography/_examples/typography.usage.example.ts +0 -44
  726. package/src/typography/index.ts +0 -8
  727. package/src/typography/typography.playground.ts +0 -101
  728. package/src/typography/typography.spec.ts +0 -70
  729. package/src/typography/typography.ts +0 -105
  730. package/tsconfig.lib.json +0 -25
  731. package/tsconfig.lib.prod.json +0 -17
  732. package/tsconfig.spec.json +0 -16
  733. package/vite.config.ts +0 -33
@@ -1,22 +0,0 @@
1
- import { ChangeDetectionStrategy, Component } from '@angular/core';
2
- import { KjMenubarComponent, KjMenubarItemComponent } from '../menubar';
3
-
4
- /**
5
- * Default menubar — the canonical File / Edit / View arrangement.
6
- */
7
- @Component({
8
- selector: 'kj-menubar-example',
9
- standalone: true,
10
- imports: [KjMenubarComponent, KjMenubarItemComponent],
11
- styles: [`:host { display: block; }`],
12
- template: `
13
- <kj-menubar kjAriaLabel="Application">
14
- <kj-menubar-item>File</kj-menubar-item>
15
- <kj-menubar-item>Edit</kj-menubar-item>
16
- <kj-menubar-item>View</kj-menubar-item>
17
- <kj-menubar-item>Help</kj-menubar-item>
18
- </kj-menubar>
19
- `,
20
- changeDetection: ChangeDetectionStrategy.OnPush,
21
- })
22
- export class KjMenubarExample {}
@@ -1,33 +0,0 @@
1
- import { ChangeDetectionStrategy, Component } from '@angular/core';
2
- import { KjMenubarComponent, KjMenubarItemComponent } from '../menubar';
3
- import { KjKbdComponent } from '../../kbd/kbd';
4
-
5
- /**
6
- * Menubar items with trailing keyboard-shortcut hints. The `<kj-kbd>`
7
- * sibling sits inline alongside the label and stays right-aligned via the
8
- * menubar item's flex layout.
9
- */
10
- @Component({
11
- selector: 'kj-menubar-with-shortcuts-example',
12
- standalone: true,
13
- imports: [KjMenubarComponent, KjMenubarItemComponent, KjKbdComponent],
14
- styles: [`:host { display: block; }`],
15
- template: `
16
- <kj-menubar kjAriaLabel="Application">
17
- <kj-menubar-item>
18
- File <kj-kbd>Alt+F</kj-kbd>
19
- </kj-menubar-item>
20
- <kj-menubar-item>
21
- Edit <kj-kbd>Alt+E</kj-kbd>
22
- </kj-menubar-item>
23
- <kj-menubar-item>
24
- View <kj-kbd>Alt+V</kj-kbd>
25
- </kj-menubar-item>
26
- <kj-menubar-item>
27
- Help <kj-kbd>F1</kj-kbd>
28
- </kj-menubar-item>
29
- </kj-menubar>
30
- `,
31
- changeDetection: ChangeDetectionStrategy.OnPush,
32
- })
33
- export class KjMenubarWithShortcutsExample {}
@@ -1,76 +0,0 @@
1
- import { ChangeDetectionStrategy, Component } from '@angular/core';
2
- import { KjMenubarComponent } from '../menubar';
3
- import { KjDropdownMenuContent } from '../../dropdown-menu/dropdown-menu';
4
- import {
5
- KjDropdownMenuItem,
6
- KjDropdownMenuSeparator,
7
- KjDropdownMenuTrigger,
8
- KjMenubarItem,
9
- } from '@kouji-ui/core';
10
-
11
- /**
12
- * Menubar with nested submenus. Each item is a raw
13
- * `<button kjMenubarItem kjDropdownMenuTrigger>` that composes the menubar
14
- * item with the dropdown-menu trigger — activating the item opens the
15
- * paired `<kj-dropdown-menu-content [kjFor]="…">` panel, which is portalled
16
- * to `<body>` and anchored to the trigger.
17
- */
18
- @Component({
19
- selector: 'kj-menubar-with-submenu-example',
20
- standalone: true,
21
- imports: [
22
- KjMenubarComponent,
23
- KjMenubarItem,
24
- KjDropdownMenuTrigger,
25
- KjDropdownMenuContent,
26
- KjDropdownMenuItem,
27
- KjDropdownMenuSeparator,
28
- ],
29
- styles: [`:host { display: block; }`],
30
- template: `
31
- <kj-menubar kjAriaLabel="Application">
32
- <button
33
- kjMenubarItem
34
- kjDropdownMenuTrigger
35
- #fileT="kjDropdownMenuTrigger"
36
- class="kj-menubar-item"
37
- >File</button>
38
- <kj-dropdown-menu-content [kjFor]="fileT" kjSide="bottom" kjAlign="start">
39
- <button kjDropdownMenuItem>New</button>
40
- <button kjDropdownMenuItem>Open…</button>
41
- <hr kjDropdownMenuSeparator />
42
- <button kjDropdownMenuItem>Save</button>
43
- <button kjDropdownMenuItem>Save As…</button>
44
- </kj-dropdown-menu-content>
45
-
46
- <button
47
- kjMenubarItem
48
- kjDropdownMenuTrigger
49
- #editT="kjDropdownMenuTrigger"
50
- class="kj-menubar-item"
51
- >Edit</button>
52
- <kj-dropdown-menu-content [kjFor]="editT" kjSide="bottom" kjAlign="start">
53
- <button kjDropdownMenuItem>Undo</button>
54
- <button kjDropdownMenuItem>Redo</button>
55
- <hr kjDropdownMenuSeparator />
56
- <button kjDropdownMenuItem>Cut</button>
57
- <button kjDropdownMenuItem>Copy</button>
58
- <button kjDropdownMenuItem>Paste</button>
59
- </kj-dropdown-menu-content>
60
-
61
- <button
62
- kjMenubarItem
63
- kjDropdownMenuTrigger
64
- #viewT="kjDropdownMenuTrigger"
65
- class="kj-menubar-item"
66
- >View</button>
67
- <kj-dropdown-menu-content [kjFor]="viewT" kjSide="bottom" kjAlign="start">
68
- <button kjDropdownMenuItem>Zoom in</button>
69
- <button kjDropdownMenuItem>Zoom out</button>
70
- <button kjDropdownMenuItem>Reset zoom</button>
71
- </kj-dropdown-menu-content>
72
- </kj-menubar>
73
- `,
74
- changeDetection: ChangeDetectionStrategy.OnPush,
75
- })
76
- export class KjMenubarWithSubmenuExample {}
@@ -1 +0,0 @@
1
- export * from './menubar';
@@ -1,62 +0,0 @@
1
- @layer kj.component {
2
- .kj-menubar {
3
- --kj-menubar-bg: var(--kj-bg-body);
4
- --kj-menubar-fg: var(--kj-fg-default);
5
- --kj-menubar-border-color: var(--kj-border-default);
6
- --kj-menubar-radius: var(--kj-radius-box);
7
- --kj-menubar-padding: var(--kj-space-2xs);
8
- --kj-menubar-gap: var(--kj-space-2xs);
9
-
10
- display: flex;
11
- flex-direction: row;
12
- align-items: stretch;
13
- gap: var(--kj-menubar-gap);
14
- box-sizing: border-box;
15
- background: var(--kj-menubar-bg);
16
- color: var(--kj-menubar-fg);
17
- border: var(--kj-border) solid var(--kj-menubar-border-color);
18
- border-radius: var(--kj-menubar-radius);
19
- padding: var(--kj-menubar-padding);
20
- font: 0.875rem / 1.5 var(--kj-font-sans);
21
- }
22
-
23
- .kj-menubar-item {
24
- --kj-menubar-item-padding-x: var(--kj-space-md);
25
- --kj-menubar-item-padding-y: var(--kj-space-xs);
26
- --kj-menubar-item-min-height: 2.75rem; /* 44px AAA touch target */
27
- --kj-menubar-item-radius: var(--kj-radius-field);
28
- --kj-menubar-item-hover-bg: var(--kj-bg-surface);
29
- --kj-menubar-item-active-bg: var(--kj-bg-elevated);
30
-
31
- display: inline-flex;
32
- align-items: center;
33
- justify-content: center;
34
- min-height: var(--kj-menubar-item-min-height);
35
- box-sizing: border-box;
36
- padding: var(--kj-menubar-item-padding-y) var(--kj-menubar-item-padding-x);
37
- margin: 0;
38
- background: transparent;
39
- color: inherit;
40
- border: none;
41
- border-radius: var(--kj-menubar-item-radius);
42
- font: inherit;
43
- line-height: 1;
44
- cursor: pointer;
45
- user-select: none;
46
- }
47
-
48
- .kj-menubar-item:hover:not([aria-disabled="true"]) {
49
- background: var(--kj-menubar-item-hover-bg);
50
- }
51
- .kj-menubar-item:focus-visible {
52
- outline: 2px solid var(--kj-fg-primary);
53
- outline-offset: -2px;
54
- }
55
- .kj-menubar-item[data-state="active"] {
56
- background: var(--kj-menubar-item-active-bg);
57
- }
58
- .kj-menubar-item[aria-disabled="true"] {
59
- cursor: not-allowed;
60
- opacity: 0.5;
61
- }
62
- }
@@ -1,96 +0,0 @@
1
- import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
2
- import { KjMenubarComponent, KjMenubarItemComponent } from './menubar';
3
- import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
4
-
5
- /**
6
- * Playground state — module-scope signals. Compound knobs cover item
7
- * count, an optional disabled item, and the bar-level loop / aria-label
8
- * affordances. Submenu disclosure stays out — pending the overlay-
9
- * migration follow-up tracked on the menubar examples.
10
- */
11
- const itemCount = signal<3 | 4 | 5>(4);
12
- const disableLast = signal(true);
13
- const loop = signal(false);
14
- const ariaLabel = signal('Application');
15
-
16
- const ITEMS = ['File', 'Edit', 'View', 'Help', 'Window'] as const;
17
-
18
- @Component({
19
- selector: 'kj-menubar-playground',
20
- standalone: true,
21
- imports: [KjMenubarComponent, KjMenubarItemComponent],
22
- styles: [`
23
- :host { display: flex; flex-direction: column; gap: var(--kj-space-md); align-items: flex-start; }
24
- .kj-menubar-playground-readout { font: 0.875rem var(--kj-font-sans); color: var(--kj-fg-muted); }
25
- .kj-menubar-playground-readout strong { color: var(--kj-fg-default); font-weight: 600; }
26
- `],
27
- template: `
28
- <kj-menubar [kjLoop]="loop()" [kjAriaLabel]="ariaLabel()">
29
- @for (item of visibleItems(); track item; let last = $last) {
30
- <kj-menubar-item
31
- [kjDisabled]="disableLast() && last"
32
- (kjActivate)="lastSelected.set(item)"
33
- >{{ item }}</kj-menubar-item>
34
- }
35
- </kj-menubar>
36
-
37
- <p class="kj-menubar-playground-readout">
38
- Last selected: <strong>{{ lastSelected() ?? '—' }}</strong>
39
- </p>
40
- `,
41
- changeDetection: ChangeDetectionStrategy.OnPush,
42
- })
43
- export class KjMenubarPlaygroundDemo {
44
- protected readonly itemCount = itemCount;
45
- protected readonly disableLast = disableLast;
46
- protected readonly loop = loop;
47
- protected readonly ariaLabel = ariaLabel;
48
- protected readonly lastSelected = signal<string | null>(null);
49
-
50
- protected readonly visibleItems = computed(() =>
51
- ITEMS.slice(0, itemCount()),
52
- );
53
-
54
- }
55
-
56
- export const PLAYGROUND: PlaygroundFile = {
57
- component: KjMenubarPlaygroundDemo,
58
- state: {
59
- itemCount: itemCount as unknown as ReturnType<typeof signal>,
60
- disableLast: disableLast as unknown as ReturnType<typeof signal>,
61
- loop: loop as unknown as ReturnType<typeof signal>,
62
- ariaLabel: ariaLabel as unknown as ReturnType<typeof signal>,
63
- },
64
- controls: [
65
- { kind: 'chips', name: 'itemCount', label: 'items', options: [3, 4, 5] },
66
- { kind: 'text', name: 'ariaLabel', label: 'aria-label' },
67
- { kind: 'toggle', name: 'disableLast', label: 'disable last' },
68
- { kind: 'toggle', name: 'loop', label: 'loop focus' },
69
- ],
70
- snippet: (values) => {
71
- const s = values as {
72
- itemCount: number;
73
- disableLast: boolean;
74
- loop: boolean;
75
- ariaLabel: string;
76
- };
77
- const attrs: string[] = [`kjAriaLabel="${s.ariaLabel}"`];
78
- if (s.loop) attrs.push('[kjLoop]="true"');
79
- const rows = Array.from(ITEMS.slice(0, s.itemCount))
80
- .map((label, i, arr) => {
81
- const isLast = i === arr.length - 1;
82
- const disabled = s.disableLast && isLast ? ' [kjDisabled]="true"' : '';
83
- return ` <kj-menubar-item${disabled} (kjActivate)="lastSelected.set('${label}')">${label}</kj-menubar-item>`;
84
- })
85
- .join('\n');
86
- return [
87
- `<kj-menubar`,
88
- ` ${attrs.join('\n ')}`,
89
- `>`,
90
- rows,
91
- `</kj-menubar>`,
92
- '',
93
- `<p>Last selected: <strong>{{ lastSelected() ?? '—' }}</strong></p>`,
94
- ].join('\n');
95
- },
96
- };
@@ -1,160 +0,0 @@
1
- import {
2
- ChangeDetectionStrategy,
3
- Component,
4
- ViewEncapsulation,
5
- booleanAttribute,
6
- input,
7
- output,
8
- } from '@angular/core';
9
- import {
10
- KjMenubar,
11
- KjMenubarItem,
12
- } from '@kouji-ui/core';
13
-
14
- /**
15
- * Styled wrapper around the headless `KjMenubar` directive.
16
- *
17
- * Renders an inner `<nav kjMenubar>` so theme tokens land on the bar
18
- * element. The component projects its bar items as content; the bar items
19
- * themselves use `<kj-menubar-item>` (styled wrapper) or `<button
20
- * kjMenubarItem>` directly.
21
- *
22
- * @doc-example Default
23
- * The canonical File / Edit / View bar — the bare-minimum recipe.
24
- * @doc-file menubar.example.ts
25
- * @doc-example Usage
26
- * A walkthrough of the most common menubar usages — action items and a
27
- * disabled item. Use this as the copy-paste starting point.
28
- * @doc-file menubar.usage.example.ts
29
- * @doc-example With shortcuts
30
- * Trailing `<kj-kbd>` hints render aligned to the right of each item label.
31
- * @doc-file menubar.with-shortcuts.example.ts
32
- * @doc-example With submenu
33
- * Nested submenu trigger pattern (pending overlay-migration follow-up).
34
- * @doc-file menubar.with-submenu.example.ts
35
- * @doc-example Disabled item
36
- * `[kjDisabled]="true"` drops the item from the keyboard cycle and dims it.
37
- * @doc-file menubar.disabled-item.example.ts
38
- *
39
- * @doc-keyboard
40
- * ArrowLeft|ArrowRight — Moves focus between menubar items (wraps when [kjLoop]="true")
41
- * Home — Moves focus to the first menubar item
42
- * End — Moves focus to the last menubar item
43
- * Enter|Space — Activates the focused item
44
- * Tab — Moves focus out of the bar to the next focusable element
45
- *
46
- * @doc-aria
47
- * role="menubar" — On the host `<nav>` (provided by the directive)
48
- * aria-label — Wired from `kjAriaLabel` so AT announces the bar's purpose
49
- * aria-orientation — Reflects horizontal orientation
50
- * aria-disabled — Reflected on items when `kjDisabled` is true
51
- * data-active — Mirrors the active/open state for theme hooks
52
- *
53
- * @doc-touch
54
- * Items use a 2.75rem (44px) min-height by default — meets WCAG 2.5.5 for
55
- * touch-first surfaces. Override `--kj-menubar-item-min-height` for denser
56
- * keyboard-only desktop chrome.
57
- *
58
- * @doc-a11y
59
- * Follows the WAI-ARIA menubar pattern. Focus cycles left/right within the
60
- * bar; submenu disclosure is opt-in via `kjAutoDisclose`. The bar always
61
- * exposes a programmatic name — supply `kjAriaLabel` even when a visible
62
- * heading is nearby.
63
- *
64
- * @doc-related dropdown-menu,command-palette,tabs
65
- *
66
- * @doc-css-var
67
- * --kj-menubar-bg — Bar background fill. Defaults to --kj-bg-body.
68
- * --kj-menubar-fg — Bar foreground (label) color. Defaults to --kj-fg-default.
69
- * --kj-menubar-border-color — Bar outer border color. Inherits --kj-border-default.
70
- * --kj-menubar-radius — Bar corner radius. Inherits --kj-radius-box.
71
- * --kj-menubar-padding — Inner padding around the item row.
72
- * --kj-menubar-gap — Gap between adjacent menubar items.
73
- * --kj-menubar-item-padding-x — Per-item horizontal padding.
74
- * --kj-menubar-item-padding-y — Per-item vertical padding.
75
- * --kj-menubar-item-min-height — Per-item min height. 2.75rem for WCAG 2.5.5.
76
- * --kj-menubar-item-radius — Per-item corner radius. Inherits --kj-radius-field.
77
- * --kj-menubar-item-hover-bg — Item hover background fill.
78
- * --kj-menubar-item-active-bg — Item background when its menu is open.
79
- *
80
- * @doc-category Library/Navigation
81
- * @doc
82
- * @doc-name menubar
83
- * @doc-description Themed desktop-style application menubar with arrow-key navigation and dropdown submenus.
84
- * @doc-is-main
85
- */
86
- @Component({
87
- selector: 'kj-menubar',
88
- standalone: true,
89
- // KjMenubar must live on this component's host element (not on an
90
- // inner `<nav>`) so projected `<kj-menubar-item>` children can
91
- // resolve KJ_MENUBAR through their declaration-tree element-injector
92
- // walk. Composing via hostDirectives places the directive — and the
93
- // KJ_MENUBAR provider — exactly there.
94
- hostDirectives: [
95
- {
96
- directive: KjMenubar,
97
- inputs: [
98
- 'kjLoop',
99
- 'kjAutoDisclose',
100
- 'kjAutoDiscloseDelayMs',
101
- 'kjAriaLabel',
102
- ],
103
- },
104
- ],
105
- template: `<ng-content />`,
106
- styleUrl: './menubar.css',
107
- encapsulation: ViewEncapsulation.None,
108
- host: {
109
- 'class': 'kj-menubar',
110
- },
111
- changeDetection: ChangeDetectionStrategy.OnPush,
112
- })
113
- export class KjMenubarComponent {
114
- // Inputs (kjLoop, kjAutoDisclose, kjAutoDiscloseDelayMs, kjAriaLabel)
115
- // are exposed via the composed `KjMenubar` host directive above.
116
- // Re-declaring them on this class would register them twice in the
117
- // component's input metadata, which the docs extractor renders as
118
- // duplicated rows and which triggers NG0955 (duplicate track keys)
119
- // when the `@for` walking the inputs uses the input name as its key.
120
- }
121
-
122
- /**
123
- * Styled wrapper around `KjMenubarItem`. Renders a real `<button>` with
124
- * the `[kjMenubarItem]` directive applied.
125
- *
126
- * TODO: menubar+dropdown-menu wiring pending overlay-migration follow-up.
127
- * In this version, menubar items are plain action buttons without submenu
128
- * support. Submenu wiring will be reintroduced via the new dropdown-menu
129
- * API (`<kj-dropdown-menu-content [kjFor]="t">` on the panel side).
130
- *
131
- * @doc-category Library/Navigation
132
- * @doc
133
- * @doc-name menubar
134
- */
135
- @Component({
136
- selector: 'kj-menubar-item',
137
- standalone: true,
138
- imports: [KjMenubarItem],
139
- template: `
140
- <button
141
- type="button"
142
- kjMenubarItem
143
- class="kj-menubar-item"
144
- [kjDisabled]="kjDisabled()"
145
- (kjActivate)="kjActivate.emit()"
146
- >
147
- <ng-content />
148
- </button>
149
- `,
150
- styleUrl: './menubar.css',
151
- encapsulation: ViewEncapsulation.None,
152
- host: { style: 'display: contents;' },
153
- changeDetection: ChangeDetectionStrategy.OnPush,
154
- })
155
- export class KjMenubarItemComponent {
156
- /** Disable the item. Reflects `aria-disabled`; popup never opens. */
157
- readonly kjDisabled = input(false, { transform: booleanAttribute });
158
- /** Fires when the item is activated (click / Enter / Space). */
159
- readonly kjActivate = output<void>();
160
- }
@@ -1,33 +0,0 @@
1
- import { Component, ChangeDetectionStrategy } from '@angular/core';
2
- import { KjMenubarComponent, KjMenubarItemComponent } from './menubar';
3
-
4
- /**
5
- * A walkthrough of the most common menubar usages — a single bar with action
6
- * items, one disabled item, and an explicit `kjAriaLabel`. Use this as the
7
- * copy-paste starting point for an application-level menubar.
8
- *
9
- * TODO(overlay-migration): extend with submenu triggers once the dropdown-menu
10
- * compound exposes its `[kjFor]` content panel via the new overlay primitives.
11
- */
12
- @Component({
13
- selector: 'kj-menubar-usage-example',
14
- standalone: true,
15
- imports: [KjMenubarComponent, KjMenubarItemComponent],
16
- styles: [
17
- `
18
- :host {
19
- display: block;
20
- }
21
- `,
22
- ],
23
- changeDetection: ChangeDetectionStrategy.Eager,
24
- template: `
25
- <kj-menubar kjAriaLabel="Application">
26
- <kj-menubar-item>File</kj-menubar-item>
27
- <kj-menubar-item>Edit</kj-menubar-item>
28
- <kj-menubar-item>View</kj-menubar-item>
29
- <kj-menubar-item [kjDisabled]="true">Help</kj-menubar-item>
30
- </kj-menubar>
31
- `,
32
- })
33
- export class KjMenubarUsageExample {}
@@ -1,7 +0,0 @@
1
- // AUTO-GENERATED by scripts/migrate-examples.mjs
2
- // One barrel per component folder — used by the docs app as a lazy chunk.
3
- export { KjNumberInputCurrencyExample } from './number-input.currency.example';
4
- export { KjNumberInputDecimalExample } from './number-input.decimal.example';
5
- export { KjNumberInputExample } from './number-input.example';
6
- export { KjNumberInputMinMaxExample } from './number-input.min-max.example';
7
- export { KjNumberInputWithStepperExample } from './number-input.with-stepper.example';
@@ -1,35 +0,0 @@
1
- import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
2
- import { KjNumberInputComponent } from '../number-input';
3
-
4
- /**
5
- * Currency formatting via `Intl.NumberFormat`. The displayed value shows the
6
- * currency symbol and locale-aware grouping; the stored model stays a clean
7
- * `number` (e.g. `1234.5`).
8
- */
9
- @Component({
10
- selector: 'kj-number-input-currency-example',
11
- standalone: true,
12
- imports: [KjNumberInputComponent],
13
- styles: [
14
- `
15
- :host {
16
- display: block;
17
- }
18
- `,
19
- ],
20
- changeDetection: ChangeDetectionStrategy.Eager,
21
- template: `
22
- <kj-number-input
23
- [(kjValue)]="price"
24
- kjFormat="currency"
25
- kjCurrency="USD"
26
- kjLocale="en-US"
27
- [kjMin]="0"
28
- [kjStep]="0.01"
29
- kjAriaLabel="Price"
30
- />
31
- `,
32
- })
33
- export class KjNumberInputCurrencyExample {
34
- readonly price = signal<number>(1234.5);
35
- }
@@ -1,34 +0,0 @@
1
- import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
2
- import { KjNumberInputComponent } from '../number-input';
3
-
4
- /**
5
- * Demonstrates fractional precision via `kjMinimumFractionDigits` /
6
- * `kjMaximumFractionDigits` and a decimal step (`0.1`).
7
- */
8
- @Component({
9
- selector: 'kj-number-input-decimal-example',
10
- standalone: true,
11
- imports: [KjNumberInputComponent],
12
- styles: [
13
- `
14
- :host {
15
- display: block;
16
- }
17
- `,
18
- ],
19
- changeDetection: ChangeDetectionStrategy.Eager,
20
- template: `
21
- <kj-number-input
22
- [(kjValue)]="weight"
23
- [kjMin]="0"
24
- [kjMax]="200"
25
- [kjStep]="0.1"
26
- [kjMinimumFractionDigits]="1"
27
- [kjMaximumFractionDigits]="2"
28
- kjAriaLabel="Weight in kilograms"
29
- />
30
- `,
31
- })
32
- export class KjNumberInputDecimalExample {
33
- readonly weight = signal<number>(72.5);
34
- }
@@ -1,24 +0,0 @@
1
- import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
2
- import { KjNumberInputComponent } from '../number-input';
3
-
4
- /**
5
- * Default usage example for KjNumberInputComponent.
6
- * Rendered live in the docs and as code in the example panel.
7
- */
8
- @Component({
9
- selector: 'kj-number-input-example',
10
- standalone: true,
11
- imports: [KjNumberInputComponent],
12
- styles: [
13
- `
14
- :host {
15
- display: block;
16
- }
17
- `,
18
- ],
19
- changeDetection: ChangeDetectionStrategy.Eager,
20
- template: ` <kj-number-input [(kjValue)]="qty" kjAriaLabel="Quantity" /> `,
21
- })
22
- export class KjNumberInputExample {
23
- readonly qty = signal<number>(3);
24
- }
@@ -1,33 +0,0 @@
1
- import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
2
- import { KjNumberInputComponent } from '../number-input';
3
-
4
- /**
5
- * Demonstrates clamp-on-commit + snap-to-step. Bounds are 0..100 with step 5;
6
- * values typed off the lattice snap on the next stepper press, and PageUp /
7
- * PageDown jump by 50.
8
- */
9
- @Component({
10
- selector: 'kj-number-input-min-max-example',
11
- standalone: true,
12
- imports: [KjNumberInputComponent],
13
- styles: [
14
- `
15
- :host {
16
- display: block;
17
- }
18
- `,
19
- ],
20
- changeDetection: ChangeDetectionStrategy.Eager,
21
- template: `
22
- <kj-number-input
23
- [(kjValue)]="percentage"
24
- [kjMin]="0"
25
- [kjMax]="100"
26
- [kjStep]="5"
27
- kjAriaLabel="Percentage"
28
- />
29
- `,
30
- })
31
- export class KjNumberInputMinMaxExample {
32
- readonly percentage = signal<number>(50);
33
- }
@@ -1,45 +0,0 @@
1
- import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
2
- import { KjNumberInputComponent } from '../number-input';
3
-
4
- /**
5
- * Demonstrates the canonical stepper layout. The wrapper renders the +/-
6
- * buttons internally; consumers only set bounds + step.
7
- */
8
- @Component({
9
- selector: 'kj-number-input-with-stepper-example',
10
- standalone: true,
11
- imports: [KjNumberInputComponent],
12
- styles: [
13
- `
14
- :host {
15
- display: block;
16
- }
17
- .row {
18
- display: flex;
19
- gap: var(--kj-space-md);
20
- align-items: center;
21
- }
22
- label {
23
- font: 0.875rem var(--kj-font-sans);
24
- color: var(--kj-fg-default);
25
- }
26
- `,
27
- ],
28
- changeDetection: ChangeDetectionStrategy.Eager,
29
- template: `
30
- <div class="row">
31
- <label for="number-input-servings">Servings</label>
32
- <kj-number-input
33
- id="number-input-servings"
34
- [(kjValue)]="servings"
35
- [kjMin]="1"
36
- [kjMax]="20"
37
- [kjStep]="1"
38
- kjAriaLabel="Servings"
39
- />
40
- </div>
41
- `,
42
- })
43
- export class KjNumberInputWithStepperExample {
44
- readonly servings = signal<number>(4);
45
- }
@@ -1 +0,0 @@
1
- export * from './number-input';