@kouji-ui/components 0.1.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 (730) hide show
  1. package/.turbo/turbo-build.log +29 -0
  2. package/CHANGELOG.md +192 -0
  3. package/ng-package.json +7 -0
  4. package/package.json +43 -0
  5. package/src/accordion/_examples/accordion.default.example.ts +31 -0
  6. package/src/accordion/_examples/accordion.disabled.example.ts +38 -0
  7. package/src/accordion/_examples/accordion.multiple.example.ts +31 -0
  8. package/src/accordion/_examples/accordion.rich-content.example.ts +49 -0
  9. package/src/accordion/_examples/index.ts +6 -0
  10. package/src/accordion/accordion.arrow-nav.example.ts +39 -0
  11. package/src/accordion/accordion.css +68 -0
  12. package/src/accordion/accordion.playground.ts +119 -0
  13. package/src/accordion/accordion.spec.ts +117 -0
  14. package/src/accordion/accordion.ts +153 -0
  15. package/src/accordion/accordion.usage.example.ts +38 -0
  16. package/src/accordion/accordion.value.example.ts +60 -0
  17. package/src/accordion/index.ts +1 -0
  18. package/src/alert/_examples/alert.banner.example.ts +56 -0
  19. package/src/alert/_examples/alert.dismissible.example.ts +53 -0
  20. package/src/alert/_examples/alert.example.ts +40 -0
  21. package/src/alert/_examples/alert.variants.example.ts +66 -0
  22. package/src/alert/_examples/alert.with-actions.example.ts +57 -0
  23. package/src/alert/_examples/index.ts +7 -0
  24. package/src/alert/alert.css +133 -0
  25. package/src/alert/alert.playground.ts +111 -0
  26. package/src/alert/alert.spec.ts +167 -0
  27. package/src/alert/alert.ts +250 -0
  28. package/src/alert/alert.usage.example.ts +58 -0
  29. package/src/alert/index.ts +8 -0
  30. package/src/avatar/_examples/avatar-group.example.ts +31 -0
  31. package/src/avatar/_examples/avatar-group.list.example.ts +45 -0
  32. package/src/avatar/_examples/avatar-group.overflow.example.ts +33 -0
  33. package/src/avatar/_examples/avatar-group.shapes.example.ts +39 -0
  34. package/src/avatar/_examples/avatar-group.sizes.example.ts +44 -0
  35. package/src/avatar/_examples/avatar.default.example.ts +18 -0
  36. package/src/avatar/_examples/avatar.initials.example.ts +20 -0
  37. package/src/avatar/_examples/avatar.shapes.example.ts +22 -0
  38. package/src/avatar/_examples/avatar.sizes.example.ts +26 -0
  39. package/src/avatar/_examples/avatar.with-image.example.ts +20 -0
  40. package/src/avatar/_examples/index.ts +12 -0
  41. package/src/avatar/avatar-group.spec.ts +138 -0
  42. package/src/avatar/avatar-group.ts +127 -0
  43. package/src/avatar/avatar-group.usage.example.ts +30 -0
  44. package/src/avatar/avatar.css +58 -0
  45. package/src/avatar/avatar.playground.ts +95 -0
  46. package/src/avatar/avatar.ts +123 -0
  47. package/src/avatar/index.ts +2 -0
  48. package/src/badge/_examples/badge.default.example.ts +18 -0
  49. package/src/badge/_examples/badge.sizes.example.ts +25 -0
  50. package/src/badge/_examples/badge.variants.example.ts +24 -0
  51. package/src/badge/_examples/badge.with-dot.example.ts +31 -0
  52. package/src/badge/_examples/badge.with-icon.example.ts +23 -0
  53. package/src/badge/_examples/index.ts +7 -0
  54. package/src/badge/badge.css +59 -0
  55. package/src/badge/badge.playground.ts +49 -0
  56. package/src/badge/badge.ts +86 -0
  57. package/src/badge/badge.usage.example.ts +22 -0
  58. package/src/badge/index.ts +1 -0
  59. package/src/breadcrumb/_examples/breadcrumb.custom-separator.example.ts +53 -0
  60. package/src/breadcrumb/_examples/breadcrumb.example.ts +48 -0
  61. package/src/breadcrumb/_examples/breadcrumb.long-path.example.ts +58 -0
  62. package/src/breadcrumb/_examples/breadcrumb.truncated.example.ts +59 -0
  63. package/src/breadcrumb/_examples/breadcrumb.with-icons.example.ts +66 -0
  64. package/src/breadcrumb/_examples/index.ts +7 -0
  65. package/src/breadcrumb/breadcrumb.css +121 -0
  66. package/src/breadcrumb/breadcrumb.playground.ts +93 -0
  67. package/src/breadcrumb/breadcrumb.spec.ts +230 -0
  68. package/src/breadcrumb/breadcrumb.ts +272 -0
  69. package/src/breadcrumb/breadcrumb.usage.example.ts +45 -0
  70. package/src/breadcrumb/index.ts +1 -0
  71. package/src/button/_examples/button.anchor.example.ts +18 -0
  72. package/src/button/_examples/button.configured.example.ts +43 -0
  73. package/src/button/_examples/button.disabled.example.ts +25 -0
  74. package/src/button/_examples/button.example.ts +22 -0
  75. package/src/button/_examples/button.icon.example.ts +27 -0
  76. package/src/button/_examples/button.loading.example.ts +31 -0
  77. package/src/button/_examples/button.pressed.example.ts +24 -0
  78. package/src/button/_examples/button.sizes.example.ts +26 -0
  79. package/src/button/_examples/button.usage.example.ts +66 -0
  80. package/src/button/_examples/button.variants.example.ts +26 -0
  81. package/src/button/_examples/index.ts +12 -0
  82. package/src/button/button.css +263 -0
  83. package/src/button/button.playground.ts +79 -0
  84. package/src/button/button.spec.ts +100 -0
  85. package/src/button/button.ts +150 -0
  86. package/src/button/index.ts +1 -0
  87. package/src/button-group/_examples/button-group.example.ts +30 -0
  88. package/src/button-group/_examples/button-group.icon-only.example.ts +30 -0
  89. package/src/button-group/_examples/button-group.toggle.example.ts +36 -0
  90. package/src/button-group/_examples/button-group.variants.example.ts +40 -0
  91. package/src/button-group/_examples/button-group.vertical.example.ts +29 -0
  92. package/src/button-group/_examples/index.ts +7 -0
  93. package/src/button-group/button-group.css +80 -0
  94. package/src/button-group/button-group.playground.ts +94 -0
  95. package/src/button-group/button-group.spec.ts +119 -0
  96. package/src/button-group/button-group.ts +130 -0
  97. package/src/button-group/button-group.usage.example.ts +35 -0
  98. package/src/button-group/index.ts +1 -0
  99. package/src/calendar/_examples/calendar.example.ts +33 -0
  100. package/src/calendar/_examples/index.ts +3 -0
  101. package/src/calendar/calendar.css +129 -0
  102. package/src/calendar/calendar.playground.ts +84 -0
  103. package/src/calendar/calendar.spec.ts +50 -0
  104. package/src/calendar/calendar.ts +171 -0
  105. package/src/calendar/calendar.usage.example.ts +33 -0
  106. package/src/calendar/index.ts +1 -0
  107. package/src/card/_examples/card.cover.example.ts +53 -0
  108. package/src/card/_examples/card.example.ts +27 -0
  109. package/src/card/_examples/card.full.example.ts +51 -0
  110. package/src/card/_examples/index.ts +5 -0
  111. package/src/card/card.css +120 -0
  112. package/src/card/card.playground.ts +116 -0
  113. package/src/card/card.spec.ts +50 -0
  114. package/src/card/card.ts +194 -0
  115. package/src/card/card.usage.example.ts +46 -0
  116. package/src/card/index.ts +1 -0
  117. package/src/carousel/_examples/carousel.autoplay.example.ts +69 -0
  118. package/src/carousel/_examples/carousel.example.ts +60 -0
  119. package/src/carousel/_examples/carousel.indicators.example.ts +64 -0
  120. package/src/carousel/_examples/carousel.lazy-load.example.ts +85 -0
  121. package/src/carousel/_examples/carousel.tabs-pattern.example.ts +61 -0
  122. package/src/carousel/_examples/index.ts +7 -0
  123. package/src/carousel/carousel.css +181 -0
  124. package/src/carousel/carousel.playground.ts +135 -0
  125. package/src/carousel/carousel.spec.ts +211 -0
  126. package/src/carousel/carousel.ts +399 -0
  127. package/src/carousel/carousel.usage.example.ts +46 -0
  128. package/src/carousel/index.ts +1 -0
  129. package/src/cascade-select/_examples/cascade-select.data-driven.example.ts +119 -0
  130. package/src/cascade-select/_examples/cascade-select.disabled.example.ts +74 -0
  131. package/src/cascade-select/_examples/cascade-select.example.ts +80 -0
  132. package/src/cascade-select/_examples/cascade-select.field.example.ts +73 -0
  133. package/src/cascade-select/_examples/cascade-select.path.example.ts +85 -0
  134. package/src/cascade-select/_examples/index.ts +7 -0
  135. package/src/cascade-select/cascade-select.css +120 -0
  136. package/src/cascade-select/cascade-select.playground.ts +133 -0
  137. package/src/cascade-select/cascade-select.ts +201 -0
  138. package/src/cascade-select/cascade-select.usage.example.ts +44 -0
  139. package/src/cascade-select/index.ts +5 -0
  140. package/src/chat/_examples/chat-bubble.example.ts +71 -0
  141. package/src/chat/_examples/chat-bubble.grouped.example.ts +69 -0
  142. package/src/chat/_examples/chat-bubble.sides.example.ts +41 -0
  143. package/src/chat/_examples/chat-bubble.variants.example.ts +58 -0
  144. package/src/chat/_examples/chat-bubble.with-state.example.ts +57 -0
  145. package/src/chat/_examples/index.ts +7 -0
  146. package/src/chat/chat.css +231 -0
  147. package/src/chat/chat.playground.ts +171 -0
  148. package/src/chat/chat.spec.ts +343 -0
  149. package/src/chat/chat.ts +269 -0
  150. package/src/chat/chat.usage.example.ts +49 -0
  151. package/src/chat/index.ts +13 -0
  152. package/src/checkbox/_examples/checkbox.checked.example.ts +20 -0
  153. package/src/checkbox/_examples/checkbox.default.example.ts +20 -0
  154. package/src/checkbox/_examples/checkbox.disabled.example.ts +26 -0
  155. package/src/checkbox/_examples/checkbox.indeterminate.example.ts +20 -0
  156. package/src/checkbox/_examples/checkbox.usage.example.ts +62 -0
  157. package/src/checkbox/_examples/index.ts +7 -0
  158. package/src/checkbox/checkbox.css +74 -0
  159. package/src/checkbox/checkbox.playground.ts +68 -0
  160. package/src/checkbox/checkbox.ts +122 -0
  161. package/src/checkbox/index.ts +1 -0
  162. package/src/color-picker/_examples/color-picker.alpha.example.ts +36 -0
  163. package/src/color-picker/_examples/color-picker.example.ts +34 -0
  164. package/src/color-picker/_examples/color-picker.hex-input.example.ts +53 -0
  165. package/src/color-picker/_examples/color-picker.in-form.example.ts +60 -0
  166. package/src/color-picker/_examples/color-picker.usage.example.ts +58 -0
  167. package/src/color-picker/_examples/color-picker.with-presets.example.ts +45 -0
  168. package/src/color-picker/_examples/index.ts +8 -0
  169. package/src/color-picker/color-picker.css +183 -0
  170. package/src/color-picker/color-picker.playground.ts +83 -0
  171. package/src/color-picker/color-picker.spec.ts +94 -0
  172. package/src/color-picker/color-picker.ts +234 -0
  173. package/src/color-picker/index.ts +1 -0
  174. package/src/combobox/_examples/combobox.async.example.ts +85 -0
  175. package/src/combobox/_examples/combobox.empty-state.example.ts +36 -0
  176. package/src/combobox/_examples/combobox.example.ts +36 -0
  177. package/src/combobox/_examples/combobox.free-text.example.ts +42 -0
  178. package/src/combobox/_examples/combobox.usage.example.ts +51 -0
  179. package/src/combobox/_examples/combobox.with-icons.example.ts +49 -0
  180. package/src/combobox/_examples/index.ts +8 -0
  181. package/src/combobox/combobox.css +101 -0
  182. package/src/combobox/combobox.playground.ts +90 -0
  183. package/src/combobox/combobox.spec.ts +111 -0
  184. package/src/combobox/combobox.ts +219 -0
  185. package/src/combobox/index.ts +6 -0
  186. package/src/command-palette/_examples/command-palette.async.example.ts +99 -0
  187. package/src/command-palette/_examples/command-palette.dialog.example.ts +90 -0
  188. package/src/command-palette/_examples/command-palette.example.ts +40 -0
  189. package/src/command-palette/_examples/command-palette.fuzzy.example.ts +54 -0
  190. package/src/command-palette/_examples/command-palette.groups.example.ts +55 -0
  191. package/src/command-palette/_examples/command-palette.usage.example.ts +49 -0
  192. package/src/command-palette/_examples/index.ts +8 -0
  193. package/src/command-palette/command-palette.css +234 -0
  194. package/src/command-palette/command-palette.playground.ts +119 -0
  195. package/src/command-palette/command-palette.ts +448 -0
  196. package/src/command-palette/index.ts +10 -0
  197. package/src/confirm-popup/_examples/confirm-popup.destructive.example.ts +72 -0
  198. package/src/confirm-popup/_examples/confirm-popup.example.ts +82 -0
  199. package/src/confirm-popup/_examples/confirm-popup.placement.example.ts +97 -0
  200. package/src/confirm-popup/_examples/confirm-popup.usage.example.ts +94 -0
  201. package/src/confirm-popup/_examples/confirm-popup.with-message.example.ts +76 -0
  202. package/src/confirm-popup/_examples/index.ts +7 -0
  203. package/src/confirm-popup/confirm-popup.css +47 -0
  204. package/src/confirm-popup/confirm-popup.playground.ts +109 -0
  205. package/src/confirm-popup/confirm-popup.spec.ts +209 -0
  206. package/src/confirm-popup/confirm-popup.ts +279 -0
  207. package/src/confirm-popup/index.ts +1 -0
  208. package/src/date-picker/_examples/date-picker.disabled-dates.example.ts +44 -0
  209. package/src/date-picker/_examples/date-picker.example.ts +38 -0
  210. package/src/date-picker/_examples/date-picker.locale.example.ts +50 -0
  211. package/src/date-picker/_examples/date-picker.readonly.example.ts +32 -0
  212. package/src/date-picker/_examples/date-picker.usage.example.ts +60 -0
  213. package/src/date-picker/_examples/date-picker.with-min-max.example.ts +47 -0
  214. package/src/date-picker/_examples/index.ts +8 -0
  215. package/src/date-picker/date-picker.css +61 -0
  216. package/src/date-picker/date-picker.playground.ts +79 -0
  217. package/src/date-picker/date-picker.spec.ts +71 -0
  218. package/src/date-picker/date-picker.ts +185 -0
  219. package/src/date-picker/index.ts +1 -0
  220. package/src/dialog/_examples/dialog.confirmation.example.ts +30 -0
  221. package/src/dialog/_examples/dialog.default.example.ts +30 -0
  222. package/src/dialog/_examples/dialog.nested.example.ts +86 -0
  223. package/src/dialog/_examples/dialog.scrollable.example.ts +30 -0
  224. package/src/dialog/_examples/dialog.usage.example.ts +57 -0
  225. package/src/dialog/_examples/dialog.with-form.example.ts +48 -0
  226. package/src/dialog/_examples/index.ts +8 -0
  227. package/src/dialog/dialog.css +56 -0
  228. package/src/dialog/dialog.playground.ts +136 -0
  229. package/src/dialog/dialog.ts +82 -0
  230. package/src/dialog/index.ts +1 -0
  231. package/src/divider/_examples/divider.example.ts +27 -0
  232. package/src/divider/_examples/divider.sizes.example.ts +33 -0
  233. package/src/divider/_examples/divider.structural.example.ts +55 -0
  234. package/src/divider/_examples/divider.usage.example.ts +48 -0
  235. package/src/divider/_examples/divider.variants.example.ts +33 -0
  236. package/src/divider/_examples/divider.vertical.example.ts +38 -0
  237. package/src/divider/_examples/divider.with-content.example.ts +38 -0
  238. package/src/divider/_examples/index.ts +9 -0
  239. package/src/divider/divider.css +93 -0
  240. package/src/divider/divider.playground.ts +97 -0
  241. package/src/divider/divider.spec.ts +207 -0
  242. package/src/divider/divider.ts +220 -0
  243. package/src/divider/index.ts +1 -0
  244. package/src/drawer/_examples/drawer.example.ts +30 -0
  245. package/src/drawer/_examples/drawer.modal-vs-non-modal.example.ts +27 -0
  246. package/src/drawer/_examples/drawer.scrollable.example.ts +30 -0
  247. package/src/drawer/_examples/drawer.sides.example.ts +32 -0
  248. package/src/drawer/_examples/drawer.usage.example.ts +56 -0
  249. package/src/drawer/_examples/drawer.with-form.example.ts +48 -0
  250. package/src/drawer/_examples/index.ts +8 -0
  251. package/src/drawer/drawer.css +130 -0
  252. package/src/drawer/drawer.playground.ts +107 -0
  253. package/src/drawer/drawer.spec.ts +216 -0
  254. package/src/drawer/drawer.ts +85 -0
  255. package/src/drawer/index.ts +1 -0
  256. package/src/dropdown-menu/_examples/dropdown-menu.disabled.example.ts +19 -0
  257. package/src/dropdown-menu/_examples/dropdown-menu.example.ts +20 -0
  258. package/src/dropdown-menu/_examples/dropdown-menu.shortcuts.example.ts +31 -0
  259. package/src/dropdown-menu/_examples/dropdown-menu.sides.example.ts +18 -0
  260. package/src/dropdown-menu/_examples/dropdown-menu.usage.example.ts +56 -0
  261. package/src/dropdown-menu/_examples/dropdown-menu.with-icons.example.ts +31 -0
  262. package/src/dropdown-menu/_examples/dropdown-menu.with-separator.example.ts +41 -0
  263. package/src/dropdown-menu/_examples/index.ts +9 -0
  264. package/src/dropdown-menu/dropdown-menu.css +108 -0
  265. package/src/dropdown-menu/dropdown-menu.playground.ts +109 -0
  266. package/src/dropdown-menu/dropdown-menu.spec.ts +5 -0
  267. package/src/dropdown-menu/dropdown-menu.ts +128 -0
  268. package/src/dropdown-menu/index.ts +1 -0
  269. package/src/empty-state/_examples/empty-state.error.example.ts +63 -0
  270. package/src/empty-state/_examples/empty-state.example.ts +59 -0
  271. package/src/empty-state/_examples/empty-state.search.example.ts +82 -0
  272. package/src/empty-state/_examples/empty-state.sizes.example.ts +76 -0
  273. package/src/empty-state/_examples/empty-state.usage.example.ts +66 -0
  274. package/src/empty-state/_examples/empty-state.with-actions.example.ts +68 -0
  275. package/src/empty-state/_examples/index.ts +8 -0
  276. package/src/empty-state/empty-state.css +114 -0
  277. package/src/empty-state/empty-state.playground.ts +87 -0
  278. package/src/empty-state/empty-state.spec.ts +211 -0
  279. package/src/empty-state/empty-state.ts +276 -0
  280. package/src/empty-state/index.ts +1 -0
  281. package/src/example-components.ts +396 -0
  282. package/src/field/_examples/field.disabled.example.ts +49 -0
  283. package/src/field/_examples/field.example.ts +51 -0
  284. package/src/field/_examples/field.required.example.ts +46 -0
  285. package/src/field/_examples/field.with-error.example.ts +73 -0
  286. package/src/field/_examples/field.with-prefix-suffix.example.ts +63 -0
  287. package/src/field/_examples/index.ts +7 -0
  288. package/src/field/field.css +138 -0
  289. package/src/field/field.playground.ts +108 -0
  290. package/src/field/field.spec.ts +132 -0
  291. package/src/field/field.ts +232 -0
  292. package/src/field/field.usage.example.ts +63 -0
  293. package/src/field/index.ts +7 -0
  294. package/src/file-upload/_examples/file-upload.dropzone.example.ts +32 -0
  295. package/src/file-upload/_examples/file-upload.example.ts +29 -0
  296. package/src/file-upload/_examples/file-upload.image-preview.example.ts +31 -0
  297. package/src/file-upload/_examples/file-upload.multiple.example.ts +23 -0
  298. package/src/file-upload/_examples/file-upload.with-progress.example.ts +59 -0
  299. package/src/file-upload/_examples/index.ts +7 -0
  300. package/src/file-upload/file-upload.css +207 -0
  301. package/src/file-upload/file-upload.playground.ts +84 -0
  302. package/src/file-upload/file-upload.spec.ts +94 -0
  303. package/src/file-upload/file-upload.ts +301 -0
  304. package/src/file-upload/file-upload.usage.example.ts +45 -0
  305. package/src/file-upload/index.ts +1 -0
  306. package/src/form/_examples/form.async-submit.example.ts +72 -0
  307. package/src/form/_examples/form.compound.example.ts +93 -0
  308. package/src/form/_examples/form.example.ts +70 -0
  309. package/src/form/_examples/form.validation.example.ts +67 -0
  310. package/src/form/_examples/index.ts +6 -0
  311. package/src/form/form.css +63 -0
  312. package/src/form/form.playground.ts +145 -0
  313. package/src/form/form.spec.ts +96 -0
  314. package/src/form/form.ts +216 -0
  315. package/src/form/form.usage.example.ts +63 -0
  316. package/src/form/index.ts +5 -0
  317. package/src/icon/_examples/icon.gallery.example.ts +199 -0
  318. package/src/icon/_examples/icon.usage.example.ts +46 -0
  319. package/src/icon/_examples/index.ts +4 -0
  320. package/src/icon/icon.playground.ts +63 -0
  321. package/src/icon/index.ts +5 -0
  322. package/src/icon/lucide/icon-names.generated.ts +1708 -0
  323. package/src/icon/lucide/icon-names.ts +18 -0
  324. package/src/icon/lucide/index.ts +2 -0
  325. package/src/icon/lucide/provide-lucide-icons.ts +96 -0
  326. package/src/input/_examples/index.ts +4 -0
  327. package/src/input/_examples/input.color.example.ts +33 -0
  328. package/src/input/_examples/input.example.ts +22 -0
  329. package/src/input/index.ts +1 -0
  330. package/src/input/input.css +70 -0
  331. package/src/input/input.playground.ts +79 -0
  332. package/src/input/input.spec.ts +98 -0
  333. package/src/input/input.ts +158 -0
  334. package/src/input/input.usage.example.ts +40 -0
  335. package/src/input-group/_examples/index.ts +7 -0
  336. package/src/input-group/_examples/input-group.button.example.ts +43 -0
  337. package/src/input-group/_examples/input-group.example.ts +39 -0
  338. package/src/input-group/_examples/input-group.icon.example.ts +49 -0
  339. package/src/input-group/_examples/input-group.url.example.ts +36 -0
  340. package/src/input-group/_examples/input-group.variants.example.ts +39 -0
  341. package/src/input-group/index.ts +1 -0
  342. package/src/input-group/input-group.css +125 -0
  343. package/src/input-group/input-group.playground.ts +90 -0
  344. package/src/input-group/input-group.ts +142 -0
  345. package/src/input-group/input-group.usage.example.ts +47 -0
  346. package/src/input-mask/_examples/index.ts +8 -0
  347. package/src/input-mask/_examples/input-mask.credit-card.example.ts +90 -0
  348. package/src/input-mask/_examples/input-mask.custom-tokens.example.ts +87 -0
  349. package/src/input-mask/_examples/input-mask.date.example.ts +61 -0
  350. package/src/input-mask/_examples/input-mask.example.ts +61 -0
  351. package/src/input-mask/_examples/input-mask.usage.example.ts +44 -0
  352. package/src/input-mask/_examples/input-mask.validation.example.ts +80 -0
  353. package/src/input-mask/index.ts +9 -0
  354. package/src/input-mask/input-mask.css +39 -0
  355. package/src/input-mask/input-mask.playground.ts +79 -0
  356. package/src/input-mask/input-mask.ts +130 -0
  357. package/src/input-otp/_examples/index.ts +8 -0
  358. package/src/input-otp/_examples/input-otp.autosubmit.example.ts +71 -0
  359. package/src/input-otp/_examples/input-otp.example.ts +47 -0
  360. package/src/input-otp/_examples/input-otp.lengths.example.ts +67 -0
  361. package/src/input-otp/_examples/input-otp.masked.example.ts +46 -0
  362. package/src/input-otp/_examples/input-otp.reactive.example.ts +58 -0
  363. package/src/input-otp/_examples/input-otp.separator.example.ts +49 -0
  364. package/src/input-otp/index.ts +1 -0
  365. package/src/input-otp/input-otp.css +87 -0
  366. package/src/input-otp/input-otp.playground.ts +107 -0
  367. package/src/input-otp/input-otp.ts +244 -0
  368. package/src/input-otp/input-otp.usage.example.ts +45 -0
  369. package/src/kbd/_examples/index.ts +6 -0
  370. package/src/kbd/_examples/kbd.combo.example.ts +24 -0
  371. package/src/kbd/_examples/kbd.example.ts +22 -0
  372. package/src/kbd/_examples/kbd.in-tooltip.example.ts +43 -0
  373. package/src/kbd/_examples/kbd.sizes.example.ts +31 -0
  374. package/src/kbd/index.ts +1 -0
  375. package/src/kbd/kbd.css +67 -0
  376. package/src/kbd/kbd.playground.ts +51 -0
  377. package/src/kbd/kbd.spec.ts +123 -0
  378. package/src/kbd/kbd.ts +123 -0
  379. package/src/kbd/kbd.usage.example.ts +38 -0
  380. package/src/link/_examples/index.ts +8 -0
  381. package/src/link/_examples/link.disabled.example.ts +23 -0
  382. package/src/link/_examples/link.example.ts +26 -0
  383. package/src/link/_examples/link.external.example.ts +33 -0
  384. package/src/link/_examples/link.in-prose.example.ts +36 -0
  385. package/src/link/_examples/link.sizes.example.ts +28 -0
  386. package/src/link/_examples/link.variants.example.ts +25 -0
  387. package/src/link/index.ts +1 -0
  388. package/src/link/link.css +104 -0
  389. package/src/link/link.playground.ts +98 -0
  390. package/src/link/link.spec.ts +146 -0
  391. package/src/link/link.ts +133 -0
  392. package/src/link/link.usage.example.ts +37 -0
  393. package/src/list/_examples/index.ts +7 -0
  394. package/src/list/_examples/list.divided.example.ts +32 -0
  395. package/src/list/_examples/list.example.ts +31 -0
  396. package/src/list/_examples/list.interactive.example.ts +51 -0
  397. package/src/list/_examples/list.nav.example.ts +44 -0
  398. package/src/list/_examples/list.with-icons.example.ts +97 -0
  399. package/src/list/index.ts +1 -0
  400. package/src/list/list.css +166 -0
  401. package/src/list/list.playground.ts +90 -0
  402. package/src/list/list.spec.ts +121 -0
  403. package/src/list/list.ts +227 -0
  404. package/src/list/list.usage.example.ts +45 -0
  405. package/src/menubar/_examples/index.ts +6 -0
  406. package/src/menubar/_examples/menubar.disabled-item.example.ts +23 -0
  407. package/src/menubar/_examples/menubar.example.ts +22 -0
  408. package/src/menubar/_examples/menubar.with-shortcuts.example.ts +33 -0
  409. package/src/menubar/_examples/menubar.with-submenu.example.ts +76 -0
  410. package/src/menubar/index.ts +1 -0
  411. package/src/menubar/menubar.css +62 -0
  412. package/src/menubar/menubar.playground.ts +96 -0
  413. package/src/menubar/menubar.ts +160 -0
  414. package/src/menubar/menubar.usage.example.ts +33 -0
  415. package/src/number-input/_examples/index.ts +7 -0
  416. package/src/number-input/_examples/number-input.currency.example.ts +35 -0
  417. package/src/number-input/_examples/number-input.decimal.example.ts +34 -0
  418. package/src/number-input/_examples/number-input.example.ts +24 -0
  419. package/src/number-input/_examples/number-input.min-max.example.ts +33 -0
  420. package/src/number-input/_examples/number-input.with-stepper.example.ts +45 -0
  421. package/src/number-input/index.ts +1 -0
  422. package/src/number-input/number-input.css +115 -0
  423. package/src/number-input/number-input.playground.ts +92 -0
  424. package/src/number-input/number-input.spec.ts +102 -0
  425. package/src/number-input/number-input.ts +212 -0
  426. package/src/number-input/number-input.usage.example.ts +73 -0
  427. package/src/overlay/overlay.css +32 -0
  428. package/src/overlay-badge/_examples/index.ts +7 -0
  429. package/src/overlay-badge/_examples/overlay-badge.described.example.ts +36 -0
  430. package/src/overlay-badge/_examples/overlay-badge.dot.example.ts +28 -0
  431. package/src/overlay-badge/_examples/overlay-badge.example.ts +34 -0
  432. package/src/overlay-badge/_examples/overlay-badge.on-avatar.example.ts +38 -0
  433. package/src/overlay-badge/_examples/overlay-badge.positions.example.ts +39 -0
  434. package/src/overlay-badge/index.ts +1 -0
  435. package/src/overlay-badge/overlay-badge.css +118 -0
  436. package/src/overlay-badge/overlay-badge.playground.ts +92 -0
  437. package/src/overlay-badge/overlay-badge.spec.ts +174 -0
  438. package/src/overlay-badge/overlay-badge.ts +232 -0
  439. package/src/overlay-badge/overlay-badge.usage.example.ts +44 -0
  440. package/src/pagination/_examples/index.ts +7 -0
  441. package/src/pagination/_examples/pagination.boundaries.example.ts +56 -0
  442. package/src/pagination/_examples/pagination.compact.example.ts +42 -0
  443. package/src/pagination/_examples/pagination.example.ts +55 -0
  444. package/src/pagination/_examples/pagination.large.example.ts +54 -0
  445. package/src/pagination/_examples/pagination.with-info.example.ts +49 -0
  446. package/src/pagination/index.ts +1 -0
  447. package/src/pagination/pagination.css +146 -0
  448. package/src/pagination/pagination.playground.ts +107 -0
  449. package/src/pagination/pagination.spec.ts +202 -0
  450. package/src/pagination/pagination.ts +432 -0
  451. package/src/pagination/pagination.usage.example.ts +50 -0
  452. package/src/password-input/_examples/index.ts +6 -0
  453. package/src/password-input/_examples/password-input.example.ts +24 -0
  454. package/src/password-input/_examples/password-input.strength.example.ts +45 -0
  455. package/src/password-input/_examples/password-input.toggle.example.ts +43 -0
  456. package/src/password-input/_examples/password-input.with-rules.example.ts +78 -0
  457. package/src/password-input/index.ts +1 -0
  458. package/src/password-input/password-input.css +155 -0
  459. package/src/password-input/password-input.playground.ts +81 -0
  460. package/src/password-input/password-input.spec.ts +129 -0
  461. package/src/password-input/password-input.ts +254 -0
  462. package/src/password-input/password-input.usage.example.ts +55 -0
  463. package/src/playground-types.ts +47 -0
  464. package/src/popover/_examples/index.ts +7 -0
  465. package/src/popover/_examples/popover.cancellable.example.ts +20 -0
  466. package/src/popover/_examples/popover.example.ts +20 -0
  467. package/src/popover/_examples/popover.modal.example.ts +22 -0
  468. package/src/popover/_examples/popover.sides.example.ts +37 -0
  469. package/src/popover/_examples/popover.with-form.example.ts +38 -0
  470. package/src/popover/index.ts +1 -0
  471. package/src/popover/popover.css +71 -0
  472. package/src/popover/popover.playground.ts +86 -0
  473. package/src/popover/popover.spec.ts +5 -0
  474. package/src/popover/popover.ts +94 -0
  475. package/src/popover/popover.usage.example.ts +48 -0
  476. package/src/progress-bar/_examples/index.ts +7 -0
  477. package/src/progress-bar/_examples/progress-bar.example.ts +22 -0
  478. package/src/progress-bar/_examples/progress-bar.indeterminate.example.ts +23 -0
  479. package/src/progress-bar/_examples/progress-bar.sizes.example.ts +29 -0
  480. package/src/progress-bar/_examples/progress-bar.variants.example.ts +30 -0
  481. package/src/progress-bar/_examples/progress-bar.with-label.example.ts +30 -0
  482. package/src/progress-bar/index.ts +1 -0
  483. package/src/progress-bar/progress-bar.css +113 -0
  484. package/src/progress-bar/progress-bar.playground.ts +87 -0
  485. package/src/progress-bar/progress-bar.spec.ts +233 -0
  486. package/src/progress-bar/progress-bar.ts +155 -0
  487. package/src/progress-bar/progress-bar.usage.example.ts +52 -0
  488. package/src/public-api.ts +61 -0
  489. package/src/radio/_examples/index.ts +6 -0
  490. package/src/radio/_examples/radio.default.example.ts +26 -0
  491. package/src/radio/_examples/radio.disabled.example.ts +26 -0
  492. package/src/radio/_examples/radio.group.example.ts +27 -0
  493. package/src/radio/_examples/radio.inline.example.ts +26 -0
  494. package/src/radio/index.ts +1 -0
  495. package/src/radio/radio.css +58 -0
  496. package/src/radio/radio.playground.ts +90 -0
  497. package/src/radio/radio.ts +143 -0
  498. package/src/radio/radio.usage.example.ts +54 -0
  499. package/src/select/_examples/index.ts +6 -0
  500. package/src/select/_examples/select.default.example.ts +26 -0
  501. package/src/select/_examples/select.disabled.example.ts +24 -0
  502. package/src/select/_examples/select.grouped.example.ts +37 -0
  503. package/src/select/_examples/select.placeholder.example.ts +26 -0
  504. package/src/select/index.ts +1 -0
  505. package/src/select/select.css +65 -0
  506. package/src/select/select.playground.ts +81 -0
  507. package/src/select/select.ts +176 -0
  508. package/src/select/select.usage.example.ts +64 -0
  509. package/src/skeleton/_examples/index.ts +6 -0
  510. package/src/skeleton/_examples/skeleton.animations.example.ts +52 -0
  511. package/src/skeleton/_examples/skeleton.card.example.ts +68 -0
  512. package/src/skeleton/_examples/skeleton.example.ts +24 -0
  513. package/src/skeleton/_examples/skeleton.shapes.example.ts +55 -0
  514. package/src/skeleton/index.ts +1 -0
  515. package/src/skeleton/skeleton.css +111 -0
  516. package/src/skeleton/skeleton.playground.ts +80 -0
  517. package/src/skeleton/skeleton.spec.ts +126 -0
  518. package/src/skeleton/skeleton.ts +155 -0
  519. package/src/skeleton/skeleton.usage.example.ts +49 -0
  520. package/src/slider/_examples/index.ts +7 -0
  521. package/src/slider/_examples/slider.example.ts +41 -0
  522. package/src/slider/_examples/slider.formatted.example.ts +53 -0
  523. package/src/slider/_examples/slider.range.example.ts +48 -0
  524. package/src/slider/_examples/slider.vertical.example.ts +48 -0
  525. package/src/slider/_examples/slider.with-marks.example.ts +46 -0
  526. package/src/slider/index.ts +1 -0
  527. package/src/slider/slider.css +172 -0
  528. package/src/slider/slider.playground.ts +88 -0
  529. package/src/slider/slider.spec.ts +139 -0
  530. package/src/slider/slider.ts +246 -0
  531. package/src/slider/slider.usage.example.ts +68 -0
  532. package/src/speed-dial/_examples/index.ts +7 -0
  533. package/src/speed-dial/_examples/speed-dial.directions.example.ts +85 -0
  534. package/src/speed-dial/_examples/speed-dial.disabled.example.ts +71 -0
  535. package/src/speed-dial/_examples/speed-dial.example.ts +48 -0
  536. package/src/speed-dial/_examples/speed-dial.usage.example.ts +59 -0
  537. package/src/speed-dial/_examples/speed-dial.with-tooltips.example.ts +65 -0
  538. package/src/speed-dial/index.ts +1 -0
  539. package/src/speed-dial/speed-dial.css +137 -0
  540. package/src/speed-dial/speed-dial.playground.ts +137 -0
  541. package/src/speed-dial/speed-dial.spec.ts +191 -0
  542. package/src/speed-dial/speed-dial.ts +257 -0
  543. package/src/spinner/_examples/index.ts +8 -0
  544. package/src/spinner/_examples/spinner.animations.example.ts +54 -0
  545. package/src/spinner/_examples/spinner.example.ts +26 -0
  546. package/src/spinner/_examples/spinner.in-button.example.ts +51 -0
  547. package/src/spinner/_examples/spinner.sizes.example.ts +31 -0
  548. package/src/spinner/_examples/spinner.usage.example.ts +45 -0
  549. package/src/spinner/_examples/spinner.variants.example.ts +34 -0
  550. package/src/spinner/index.ts +1 -0
  551. package/src/spinner/spinner.css +161 -0
  552. package/src/spinner/spinner.playground.ts +68 -0
  553. package/src/spinner/spinner.spec.ts +184 -0
  554. package/src/spinner/spinner.ts +185 -0
  555. package/src/stepper/_examples/index.ts +8 -0
  556. package/src/stepper/_examples/stepper.example.ts +62 -0
  557. package/src/stepper/_examples/stepper.non-linear.example.ts +63 -0
  558. package/src/stepper/_examples/stepper.optional-step.example.ts +62 -0
  559. package/src/stepper/_examples/stepper.usage.example.ts +73 -0
  560. package/src/stepper/_examples/stepper.vertical.example.ts +66 -0
  561. package/src/stepper/_examples/stepper.with-error.example.ts +63 -0
  562. package/src/stepper/index.ts +1 -0
  563. package/src/stepper/stepper.css +147 -0
  564. package/src/stepper/stepper.playground.ts +88 -0
  565. package/src/stepper/stepper.spec.ts +200 -0
  566. package/src/stepper/stepper.ts +242 -0
  567. package/src/table/_examples/index.ts +23 -0
  568. package/src/table/_examples/table.column-pinning.example.ts +55 -0
  569. package/src/table/_examples/table.column-resize.example.ts +49 -0
  570. package/src/table/_examples/table.column-visibility.example.ts +52 -0
  571. package/src/table/_examples/table.density.example.ts +71 -0
  572. package/src/table/_examples/table.editable.example.ts +85 -0
  573. package/src/table/_examples/table.empty-and-error.example.ts +112 -0
  574. package/src/table/_examples/table.example.ts +45 -0
  575. package/src/table/_examples/table.export.example.ts +82 -0
  576. package/src/table/_examples/table.filterable.example.ts +67 -0
  577. package/src/table/_examples/table.grouping.example.ts +63 -0
  578. package/src/table/_examples/table.keyboard.example.ts +115 -0
  579. package/src/table/_examples/table.master-detail.example.ts +102 -0
  580. package/src/table/_examples/table.persistence.example.ts +85 -0
  581. package/src/table/_examples/table.playground.ts +154 -0
  582. package/src/table/_examples/table.row-pinning.example.ts +71 -0
  583. package/src/table/_examples/table.selection.example.ts +67 -0
  584. package/src/table/_examples/table.server-mode.example.ts +120 -0
  585. package/src/table/_examples/table.sortable.example.ts +49 -0
  586. package/src/table/_examples/table.theming.example.ts +64 -0
  587. package/src/table/_examples/table.usage.example.ts +90 -0
  588. package/src/table/_examples/table.virtualized.example.ts +122 -0
  589. package/src/table/index.ts +11 -0
  590. package/src/table/table-cell-editor-outlet.ts +111 -0
  591. package/src/table/table-editors/boolean-editor.ts +71 -0
  592. package/src/table/table-editors/date-editor.ts +117 -0
  593. package/src/table/table-editors/editors.spec.ts +147 -0
  594. package/src/table/table-editors/index.ts +41 -0
  595. package/src/table/table-editors/number-editor.ts +89 -0
  596. package/src/table/table-editors/select-editor.ts +107 -0
  597. package/src/table/table-editors/text-editor.ts +82 -0
  598. package/src/table/table-export.spec.ts +33 -0
  599. package/src/table/table-export.ts +53 -0
  600. package/src/table/table-filter-outlet.ts +137 -0
  601. package/src/table/table-filters/date-filter.ts +122 -0
  602. package/src/table/table-filters/filters.css +53 -0
  603. package/src/table/table-filters/filters.spec.ts +277 -0
  604. package/src/table/table-filters/index.ts +11 -0
  605. package/src/table/table-filters/number-filter.ts +232 -0
  606. package/src/table/table-filters/select-filter.ts +129 -0
  607. package/src/table/table-filters/text-filter.ts +110 -0
  608. package/src/table/table-pagination.spec.ts +118 -0
  609. package/src/table/table-pagination.ts +191 -0
  610. package/src/table/table-side-panel.spec.ts +170 -0
  611. package/src/table/table-side-panel.ts +263 -0
  612. package/src/table/table-status-bar.spec.ts +78 -0
  613. package/src/table/table-status-bar.ts +70 -0
  614. package/src/table/table-toolbar.spec.ts +180 -0
  615. package/src/table/table-toolbar.ts +244 -0
  616. package/src/table/table-virtual.spec.ts +103 -0
  617. package/src/table/table-virtual.ts +180 -0
  618. package/src/table/table.css +468 -0
  619. package/src/table/table.spec.ts +175 -0
  620. package/src/table/table.ts +1009 -0
  621. package/src/tabs/_examples/index.ts +8 -0
  622. package/src/tabs/_examples/tabs.controlled.example.ts +59 -0
  623. package/src/tabs/_examples/tabs.disabled.example.ts +34 -0
  624. package/src/tabs/_examples/tabs.example.ts +34 -0
  625. package/src/tabs/_examples/tabs.manual-activation.example.ts +34 -0
  626. package/src/tabs/_examples/tabs.usage.example.ts +43 -0
  627. package/src/tabs/_examples/tabs.vertical.example.ts +33 -0
  628. package/src/tabs/index.ts +1 -0
  629. package/src/tabs/tabs.css +80 -0
  630. package/src/tabs/tabs.playground.ts +88 -0
  631. package/src/tabs/tabs.spec.ts +135 -0
  632. package/src/tabs/tabs.ts +204 -0
  633. package/src/tag/_examples/index.ts +9 -0
  634. package/src/tag/_examples/tag.example.ts +22 -0
  635. package/src/tag/_examples/tag.list.example.ts +38 -0
  636. package/src/tag/_examples/tag.removable.example.ts +39 -0
  637. package/src/tag/_examples/tag.selectable.example.ts +33 -0
  638. package/src/tag/_examples/tag.sizes.example.ts +25 -0
  639. package/src/tag/_examples/tag.usage.example.ts +62 -0
  640. package/src/tag/_examples/tag.variants.example.ts +29 -0
  641. package/src/tag/index.ts +1 -0
  642. package/src/tag/tag.css +167 -0
  643. package/src/tag/tag.playground.ts +63 -0
  644. package/src/tag/tag.spec.ts +153 -0
  645. package/src/tag/tag.ts +186 -0
  646. package/src/test-setup.ts +5 -0
  647. package/src/textarea/_examples/index.ts +8 -0
  648. package/src/textarea/_examples/textarea.autoresize.example.ts +37 -0
  649. package/src/textarea/_examples/textarea.character-count.example.ts +34 -0
  650. package/src/textarea/_examples/textarea.example.ts +22 -0
  651. package/src/textarea/_examples/textarea.no-resize.example.ts +28 -0
  652. package/src/textarea/_examples/textarea.usage.example.ts +50 -0
  653. package/src/textarea/_examples/textarea.with-field.example.ts +66 -0
  654. package/src/textarea/index.ts +1 -0
  655. package/src/textarea/textarea.css +117 -0
  656. package/src/textarea/textarea.playground.ts +70 -0
  657. package/src/textarea/textarea.spec.ts +161 -0
  658. package/src/textarea/textarea.ts +339 -0
  659. package/src/time-picker/_examples/index.ts +8 -0
  660. package/src/time-picker/_examples/time-picker.12-hour.example.ts +24 -0
  661. package/src/time-picker/_examples/time-picker.example.ts +24 -0
  662. package/src/time-picker/_examples/time-picker.formatted.example.ts +32 -0
  663. package/src/time-picker/_examples/time-picker.range.example.ts +54 -0
  664. package/src/time-picker/_examples/time-picker.usage.example.ts +53 -0
  665. package/src/time-picker/_examples/time-picker.with-seconds.example.ts +24 -0
  666. package/src/time-picker/index.ts +1 -0
  667. package/src/time-picker/time-picker.css +126 -0
  668. package/src/time-picker/time-picker.playground.ts +72 -0
  669. package/src/time-picker/time-picker.spec.ts +77 -0
  670. package/src/time-picker/time-picker.ts +207 -0
  671. package/src/toast/_examples/index.ts +7 -0
  672. package/src/toast/_examples/toast.default.example.ts +37 -0
  673. package/src/toast/_examples/toast.dismissible.example.ts +38 -0
  674. package/src/toast/_examples/toast.usage.example.ts +57 -0
  675. package/src/toast/_examples/toast.variants.example.ts +43 -0
  676. package/src/toast/_examples/toast.with-action.example.ts +46 -0
  677. package/src/toast/index.ts +1 -0
  678. package/src/toast/toast.css +115 -0
  679. package/src/toast/toast.playground.ts +61 -0
  680. package/src/toast/toast.ts +168 -0
  681. package/src/toggle/_examples/index.ts +7 -0
  682. package/src/toggle/_examples/toggle.checked.example.ts +20 -0
  683. package/src/toggle/_examples/toggle.default.example.ts +20 -0
  684. package/src/toggle/_examples/toggle.disabled.example.ts +26 -0
  685. package/src/toggle/_examples/toggle.usage.example.ts +51 -0
  686. package/src/toggle/_examples/toggle.with-label.example.ts +30 -0
  687. package/src/toggle/index.ts +1 -0
  688. package/src/toggle/toggle.css +123 -0
  689. package/src/toggle/toggle.playground.ts +65 -0
  690. package/src/toggle/toggle.ts +113 -0
  691. package/src/tooltip/_examples/index.ts +9 -0
  692. package/src/tooltip/_examples/tooltip.delays.example.ts +16 -0
  693. package/src/tooltip/_examples/tooltip.disabled.example.ts +16 -0
  694. package/src/tooltip/_examples/tooltip.example.ts +16 -0
  695. package/src/tooltip/_examples/tooltip.group.example.ts +20 -0
  696. package/src/tooltip/_examples/tooltip.rich.example.ts +19 -0
  697. package/src/tooltip/_examples/tooltip.sides.example.ts +18 -0
  698. package/src/tooltip/_examples/tooltip.usage.example.ts +50 -0
  699. package/src/tooltip/index.ts +1 -0
  700. package/src/tooltip/tooltip.css +61 -0
  701. package/src/tooltip/tooltip.playground.ts +79 -0
  702. package/src/tooltip/tooltip.spec.ts +5 -0
  703. package/src/tooltip/tooltip.ts +102 -0
  704. package/src/tree-select/_examples/index.ts +8 -0
  705. package/src/tree-select/_examples/tree-select.disabled.example.ts +106 -0
  706. package/src/tree-select/_examples/tree-select.example.ts +65 -0
  707. package/src/tree-select/_examples/tree-select.expanded.example.ts +72 -0
  708. package/src/tree-select/_examples/tree-select.field.example.ts +77 -0
  709. package/src/tree-select/_examples/tree-select.multi.example.ts +73 -0
  710. package/src/tree-select/_examples/tree-select.usage.example.ts +85 -0
  711. package/src/tree-select/index.ts +1 -0
  712. package/src/tree-select/tree-select.css +220 -0
  713. package/src/tree-select/tree-select.playground.ts +83 -0
  714. package/src/tree-select/tree-select.ts +348 -0
  715. package/src/typography/_examples/index.ts +9 -0
  716. package/src/typography/_examples/typography.blockquote.example.ts +34 -0
  717. package/src/typography/_examples/typography.code.example.ts +32 -0
  718. package/src/typography/_examples/typography.example.ts +42 -0
  719. package/src/typography/_examples/typography.lead.example.ts +37 -0
  720. package/src/typography/_examples/typography.muted.example.ts +27 -0
  721. package/src/typography/_examples/typography.truncate.example.ts +41 -0
  722. package/src/typography/_examples/typography.usage.example.ts +44 -0
  723. package/src/typography/index.ts +8 -0
  724. package/src/typography/typography.playground.ts +101 -0
  725. package/src/typography/typography.spec.ts +70 -0
  726. package/src/typography/typography.ts +105 -0
  727. package/tsconfig.lib.json +25 -0
  728. package/tsconfig.lib.prod.json +17 -0
  729. package/tsconfig.spec.json +16 -0
  730. package/vite.config.ts +33 -0
package/src/menubar/_examples/menubar.example.ts ADDED
@@ -0,0 +1,22 @@
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 {}
package/src/menubar/_examples/menubar.with-shortcuts.example.ts ADDED
@@ -0,0 +1,33 @@
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 {}
package/src/menubar/_examples/menubar.with-submenu.example.ts ADDED
@@ -0,0 +1,76 @@
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 {}
package/src/menubar/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './menubar';
package/src/menubar/menubar.css ADDED
@@ -0,0 +1,62 @@
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
+ }
package/src/menubar/menubar.playground.ts ADDED
@@ -0,0 +1,96 @@
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
+ };
package/src/menubar/menubar.ts ADDED
@@ -0,0 +1,160 @@
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
+ }
package/src/menubar/menubar.usage.example.ts ADDED
@@ -0,0 +1,33 @@
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 {}
package/src/number-input/_examples/index.ts ADDED
@@ -0,0 +1,7 @@
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';
package/src/number-input/_examples/number-input.currency.example.ts ADDED
@@ -0,0 +1,35 @@
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
+ }
package/src/number-input/_examples/number-input.decimal.example.ts ADDED
@@ -0,0 +1,34 @@
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
+ }
package/src/number-input/_examples/number-input.example.ts ADDED
@@ -0,0 +1,24 @@
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
+ }
package/src/number-input/_examples/number-input.min-max.example.ts ADDED
@@ -0,0 +1,33 @@
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
+ }
package/src/number-input/_examples/number-input.with-stepper.example.ts ADDED
@@ -0,0 +1,45 @@
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
+ }
package/src/number-input/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './number-input';