@konce-pt/react 0.12.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (378) hide show
  1. package/README.md +122 -64
  2. package/dist/accordion/accordion.d.ts +14 -6
  3. package/dist/accordion/accordion.js +14 -7
  4. package/dist/accordion/llms.txt +22 -10
  5. package/dist/alert/alert.d.ts +2 -2
  6. package/dist/alert/alert.js +2 -2
  7. package/dist/alert/llms.txt +10 -10
  8. package/dist/app-shell/app-shell.d.ts +14 -14
  9. package/dist/app-shell/app-shell.js +11 -11
  10. package/dist/app-shell/llms.txt +13 -13
  11. package/dist/auth/auth-types.d.ts +6 -6
  12. package/dist/auth/auth.d.ts +2 -2
  13. package/dist/auth/auth.js +7 -7
  14. package/dist/auth/llms.txt +9 -9
  15. package/dist/autocomplete/autocomplete.d.ts +19 -6
  16. package/dist/autocomplete/autocomplete.js +23 -10
  17. package/dist/autocomplete/llms.txt +16 -5
  18. package/dist/avatar/avatar.d.ts +6 -6
  19. package/dist/avatar/avatar.js +5 -5
  20. package/dist/avatar/llms.txt +10 -10
  21. package/dist/avatar-group/avatar-group.d.ts +4 -4
  22. package/dist/avatar-group/avatar-group.js +3 -3
  23. package/dist/avatar-group/llms.txt +8 -8
  24. package/dist/backdrop/backdrop.d.ts +7 -7
  25. package/dist/backdrop/backdrop.js +16 -16
  26. package/dist/backdrop/llms.txt +27 -27
  27. package/dist/badge/badge.d.ts +3 -3
  28. package/dist/badge/badge.js +1 -1
  29. package/dist/badge/llms.txt +11 -11
  30. package/dist/bottom-sheet/bottom-sheet.d.ts +4 -4
  31. package/dist/bottom-sheet/bottom-sheet.js +2 -2
  32. package/dist/bottom-sheet/llms.txt +9 -9
  33. package/dist/breadcrumb/breadcrumb.d.ts +2 -2
  34. package/dist/breadcrumb/breadcrumb.js +3 -3
  35. package/dist/breadcrumb/llms.txt +3 -3
  36. package/dist/button/button.d.ts +3 -3
  37. package/dist/button/button.js +8 -8
  38. package/dist/button/llms.txt +27 -19
  39. package/dist/button-group/button-group.d.ts +9 -9
  40. package/dist/button-group/button-group.js +30 -8
  41. package/dist/button-group/llms.txt +20 -14
  42. package/dist/card/card.d.ts +8 -8
  43. package/dist/card/card.js +6 -6
  44. package/dist/card/llms.txt +20 -20
  45. package/dist/carousel/carousel.d.ts +6 -6
  46. package/dist/carousel/carousel.js +4 -4
  47. package/dist/carousel/llms.txt +10 -10
  48. package/dist/charts/chart-legend.d.ts +3 -3
  49. package/dist/charts/chart-legend.js +1 -1
  50. package/dist/charts/chart-tooltip.d.ts +3 -3
  51. package/dist/charts/chart-tooltip.js +1 -1
  52. package/dist/charts/chart.d.ts +1 -1
  53. package/dist/charts/chart.js +8 -8
  54. package/dist/charts/llms.txt +6 -6
  55. package/dist/charts-entry/public-api.js +2 -2
  56. package/dist/chat/chat.d.ts +17 -10
  57. package/dist/chat/chat.js +42 -18
  58. package/dist/chat/llms.txt +32 -17
  59. package/dist/chat-composer/chat-composer.d.ts +17 -7
  60. package/dist/chat-composer/chat-composer.js +21 -8
  61. package/dist/chat-composer/llms.txt +20 -11
  62. package/dist/chat-dock/chat-dock.d.ts +11 -4
  63. package/dist/chat-dock/chat-dock.js +9 -6
  64. package/dist/chat-dock/llms.txt +15 -14
  65. package/dist/chat-entry/public-api.js +1 -1
  66. package/dist/chat-message/chat-message.d.ts +12 -5
  67. package/dist/chat-message/chat-message.js +17 -7
  68. package/dist/chat-message/llms.txt +16 -15
  69. package/dist/chat-typing/chat-typing.d.ts +2 -2
  70. package/dist/chat-typing/chat-typing.js +3 -3
  71. package/dist/chat-typing/llms.txt +6 -6
  72. package/dist/checkbox/checkbox.d.ts +13 -6
  73. package/dist/checkbox/checkbox.js +26 -7
  74. package/dist/checkbox/llms.txt +24 -12
  75. package/dist/chip/chip.d.ts +4 -4
  76. package/dist/chip/chip.js +2 -2
  77. package/dist/chip/llms.txt +11 -11
  78. package/dist/chips-input/chips-input.d.ts +4 -4
  79. package/dist/chips-input/chips-input.js +35 -9
  80. package/dist/chips-input/llms.txt +15 -8
  81. package/dist/clock/clock.d.ts +4 -4
  82. package/dist/clock/clock.js +7 -7
  83. package/dist/clock/llms.txt +8 -8
  84. package/dist/color-picker/color-picker.d.ts +6 -6
  85. package/dist/color-picker/color-picker.js +3 -3
  86. package/dist/color-picker/llms.txt +5 -5
  87. package/dist/confirm/confirm-container.d.ts +3 -3
  88. package/dist/confirm/confirm-container.js +5 -5
  89. package/dist/confirm/confirm-store.d.ts +4 -4
  90. package/dist/confirm/confirm-store.js +7 -7
  91. package/dist/confirm/llms.txt +6 -6
  92. package/dist/context-menu/context-menu.d.ts +1 -1
  93. package/dist/context-menu/context-menu.js +5 -5
  94. package/dist/context-menu/llms.txt +7 -7
  95. package/dist/data-table/data-table-types.d.ts +5 -5
  96. package/dist/data-table/data-table.d.ts +29 -8
  97. package/dist/data-table/data-table.js +340 -95
  98. package/dist/data-table/export-csv.d.ts +3 -3
  99. package/dist/data-table/export-csv.js +4 -4
  100. package/dist/data-table/llms.txt +127 -94
  101. package/dist/data-view/data-view.d.ts +13 -5
  102. package/dist/data-view/data-view.js +67 -6
  103. package/dist/data-view/llms.txt +29 -10
  104. package/dist/date-range/date-range.d.ts +9 -9
  105. package/dist/date-range/date-range.js +24 -24
  106. package/dist/date-range/llms.txt +20 -20
  107. package/dist/datepicker/datepicker.d.ts +10 -10
  108. package/dist/datepicker/datepicker.js +29 -29
  109. package/dist/datepicker/llms.txt +24 -24
  110. package/dist/dialog/dialog.d.ts +12 -7
  111. package/dist/dialog/dialog.js +4 -4
  112. package/dist/dialog/llms.txt +14 -11
  113. package/dist/divider/divider.d.ts +1 -1
  114. package/dist/divider/llms.txt +4 -4
  115. package/dist/drawer/drawer.d.ts +5 -5
  116. package/dist/drawer/drawer.js +2 -2
  117. package/dist/drawer/llms.txt +11 -11
  118. package/dist/empty/empty.d.ts +2 -2
  119. package/dist/empty/empty.js +1 -1
  120. package/dist/empty/llms.txt +9 -9
  121. package/dist/fab/fab.d.ts +1 -1
  122. package/dist/fab/fab.js +1 -1
  123. package/dist/fab/llms.txt +10 -6
  124. package/dist/fieldset/fieldset.d.ts +18 -4
  125. package/dist/fieldset/fieldset.js +9 -6
  126. package/dist/fieldset/llms.txt +26 -9
  127. package/dist/file-upload/file-upload.d.ts +3 -3
  128. package/dist/file-upload/file-upload.js +7 -7
  129. package/dist/file-upload/llms.txt +7 -7
  130. package/dist/form-field/form-field-context.d.ts +4 -4
  131. package/dist/form-field/form-field.d.ts +12 -4
  132. package/dist/form-field/form-field.js +26 -6
  133. package/dist/form-field/llms.txt +25 -11
  134. package/dist/galleria/galleria.d.ts +3 -3
  135. package/dist/galleria/galleria.js +5 -5
  136. package/dist/galleria/llms.txt +7 -7
  137. package/dist/grid/col.d.ts +4 -4
  138. package/dist/grid/col.js +2 -2
  139. package/dist/grid/flex.d.ts +3 -3
  140. package/dist/grid/flex.js +1 -1
  141. package/dist/grid/grid.d.ts +7 -7
  142. package/dist/grid/grid.js +3 -3
  143. package/dist/grid/layout.d.ts +2 -2
  144. package/dist/grid/layout.js +2 -2
  145. package/dist/grid/llms.txt +15 -15
  146. package/dist/grid-entry/public-api.js +1 -1
  147. package/dist/i18n/i18n-context.d.ts +3 -3
  148. package/dist/i18n/i18n-context.js +7 -7
  149. package/dist/icon/icon-registry.d.ts +3 -3
  150. package/dist/icon/icon-registry.js +3 -3
  151. package/dist/icon/icon.d.ts +4 -4
  152. package/dist/icon/icon.js +6 -6
  153. package/dist/icon/llms.txt +13 -13
  154. package/dist/icon-button/icon-button.d.ts +2 -2
  155. package/dist/icon-button/icon-button.js +1 -1
  156. package/dist/icon-button/llms.txt +9 -5
  157. package/dist/icons-entry/public-api.d.ts +2 -2
  158. package/dist/icons-entry/public-api.js +3 -3
  159. package/dist/image/image.js +1 -1
  160. package/dist/image/llms.txt +13 -13
  161. package/dist/input/input.d.ts +18 -5
  162. package/dist/input/input.js +21 -6
  163. package/dist/input/llms.txt +25 -11
  164. package/dist/input-mask/input-mask.d.ts +1 -1
  165. package/dist/input-mask/input-mask.js +2 -2
  166. package/dist/input-mask/llms.txt +5 -5
  167. package/dist/input-number/input-number.d.ts +9 -9
  168. package/dist/input-number/input-number.js +11 -11
  169. package/dist/input-number/llms.txt +14 -14
  170. package/dist/input-otp/input-otp.d.ts +6 -6
  171. package/dist/input-otp/input-otp.js +10 -10
  172. package/dist/input-otp/llms.txt +9 -9
  173. package/dist/internal/calendar-focus.d.ts +1 -1
  174. package/dist/internal/calendar-focus.js +3 -3
  175. package/dist/internal/cn.d.ts +1 -1
  176. package/dist/internal/mask.d.ts +2 -2
  177. package/dist/internal/mask.js +4 -4
  178. package/dist/internal/option-key.d.ts +2 -2
  179. package/dist/internal/option-key.js +2 -2
  180. package/dist/internal/option-nav.d.ts +4 -4
  181. package/dist/internal/option-nav.js +5 -5
  182. package/dist/internal/overlay-container.js +1 -1
  183. package/dist/internal/overlay.d.ts +3 -3
  184. package/dist/internal/overlay.js +8 -8
  185. package/dist/internal/password-strength.d.ts +2 -2
  186. package/dist/internal/password-strength.js +6 -6
  187. package/dist/internal/roving.d.ts +2 -2
  188. package/dist/internal/roving.js +3 -3
  189. package/dist/internal/scroll-lock.d.ts +1 -1
  190. package/dist/internal/scroll-lock.js +2 -2
  191. package/dist/internal/slot-children.d.ts +3 -3
  192. package/dist/internal/slot-children.js +4 -4
  193. package/dist/internal/slot.d.ts +3 -3
  194. package/dist/internal/slot.js +2 -2
  195. package/dist/internal/step.d.ts +3 -3
  196. package/dist/internal/step.js +4 -4
  197. package/dist/internal/tween.d.ts +5 -5
  198. package/dist/internal/tween.js +5 -5
  199. package/dist/internal/types.d.ts +2 -2
  200. package/dist/internal/use-breakpoint.d.ts +2 -2
  201. package/dist/internal/use-breakpoint.js +4 -4
  202. package/dist/internal/use-controllable-state.d.ts +1 -1
  203. package/dist/internal/use-controllable-state.js +3 -3
  204. package/dist/internal/use-id.d.ts +2 -2
  205. package/dist/internal/use-id.js +2 -2
  206. package/dist/internal/use-modal-focus.d.ts +1 -1
  207. package/dist/internal/use-modal-focus.js +3 -3
  208. package/dist/knob/knob.d.ts +4 -4
  209. package/dist/knob/knob.js +14 -10
  210. package/dist/knob/llms.txt +17 -12
  211. package/dist/listbox/listbox.d.ts +6 -6
  212. package/dist/listbox/listbox.js +9 -9
  213. package/dist/listbox/llms.txt +10 -10
  214. package/dist/loader/llms.txt +56 -0
  215. package/dist/loader/loader.d.ts +49 -0
  216. package/dist/loader/loader.js +68 -0
  217. package/dist/map/llms.txt +25 -22
  218. package/dist/map/map-create-dialog.d.ts +4 -4
  219. package/dist/map/map-create-dialog.js +10 -10
  220. package/dist/map/map-hours-field.d.ts +4 -4
  221. package/dist/map/map-hours-field.js +7 -7
  222. package/dist/map/map-image-field.d.ts +2 -2
  223. package/dist/map/map-image-field.js +4 -4
  224. package/dist/map/map-legend.d.ts +4 -4
  225. package/dist/map/map-legend.js +2 -2
  226. package/dist/map/map-poi-card.d.ts +3 -3
  227. package/dist/map/map-poi-card.js +9 -9
  228. package/dist/map/map-search.d.ts +17 -6
  229. package/dist/map/map-search.js +21 -18
  230. package/dist/map/map.d.ts +21 -14
  231. package/dist/map/map.js +30 -29
  232. package/dist/map/ports.d.ts +9 -9
  233. package/dist/map/ports.js +6 -6
  234. package/dist/map-entry/public-api.js +2 -2
  235. package/dist/megamenu/llms.txt +9 -9
  236. package/dist/megamenu/megamenu.d.ts +6 -6
  237. package/dist/megamenu/megamenu.js +10 -10
  238. package/dist/mention/llms.txt +15 -15
  239. package/dist/mention/mention.d.ts +5 -5
  240. package/dist/mention/mention.js +2 -2
  241. package/dist/mention/mentions.d.ts +1 -1
  242. package/dist/mention/mentions.js +1 -1
  243. package/dist/menu/llms.txt +12 -12
  244. package/dist/menu/menu-item.d.ts +4 -4
  245. package/dist/menu/menu-keys.d.ts +2 -2
  246. package/dist/menu/menu-keys.js +5 -5
  247. package/dist/menu/menu.d.ts +2 -2
  248. package/dist/menu/menu.js +6 -6
  249. package/dist/menubar/llms.txt +10 -10
  250. package/dist/menubar/menubar.d.ts +5 -5
  251. package/dist/menubar/menubar.js +10 -10
  252. package/dist/meter-group/llms.txt +12 -12
  253. package/dist/meter-group/meter-group.d.ts +2 -2
  254. package/dist/meter-group/meter-group.js +1 -1
  255. package/dist/motion/motion-context.d.ts +22 -0
  256. package/dist/motion/motion-context.js +28 -0
  257. package/dist/order-list/llms.txt +22 -10
  258. package/dist/order-list/order-list.d.ts +12 -4
  259. package/dist/order-list/order-list.js +104 -21
  260. package/dist/paginator/llms.txt +8 -8
  261. package/dist/paginator/paginator.js +1 -1
  262. package/dist/panel/llms.txt +25 -13
  263. package/dist/panel/panel.d.ts +11 -3
  264. package/dist/panel/panel.js +7 -4
  265. package/dist/password/llms.txt +16 -8
  266. package/dist/password/password.d.ts +2 -2
  267. package/dist/password/password.js +24 -3
  268. package/dist/peek/llms.txt +10 -10
  269. package/dist/peek/peek.d.ts +6 -6
  270. package/dist/peek/peek.js +7 -7
  271. package/dist/pick-list/llms.txt +33 -13
  272. package/dist/pick-list/pick-list.d.ts +12 -4
  273. package/dist/pick-list/pick-list.js +111 -23
  274. package/dist/popover/llms.txt +11 -11
  275. package/dist/popover/popover.d.ts +4 -4
  276. package/dist/popover/popover.js +5 -5
  277. package/dist/progress/llms.txt +17 -17
  278. package/dist/progress/progress.d.ts +7 -7
  279. package/dist/progress/progress.js +6 -6
  280. package/dist/public-api.d.ts +15 -3
  281. package/dist/public-api.js +13 -7
  282. package/dist/radio-group/llms.txt +13 -6
  283. package/dist/radio-group/radio-group.d.ts +11 -4
  284. package/dist/radio-group/radio-group.js +15 -7
  285. package/dist/rating/llms.txt +20 -13
  286. package/dist/rating/rating-pointer.d.ts +16 -0
  287. package/dist/rating/rating-pointer.js +26 -0
  288. package/dist/rating/rating.d.ts +6 -6
  289. package/dist/rating/rating.js +76 -12
  290. package/dist/rich-text/lists.d.ts +2 -2
  291. package/dist/rich-text/lists.js +7 -7
  292. package/dist/rich-text/llms.txt +26 -17
  293. package/dist/rich-text/rich-text.d.ts +12 -7
  294. package/dist/rich-text/rich-text.js +78 -54
  295. package/dist/rich-text/sanitize.d.ts +3 -3
  296. package/dist/rich-text/sanitize.js +12 -12
  297. package/dist/rich-text/tables.d.ts +3 -3
  298. package/dist/rich-text/tables.js +3 -3
  299. package/dist/roadmap/llms.txt +15 -15
  300. package/dist/roadmap/roadmap.d.ts +6 -6
  301. package/dist/roadmap/roadmap.js +19 -19
  302. package/dist/roadmap-entry/public-api.js +2 -2
  303. package/dist/scroll-top/llms.txt +6 -6
  304. package/dist/scroll-top/scroll-top.d.ts +1 -1
  305. package/dist/scroll-top/scroll-top.js +1 -1
  306. package/dist/select/llms.txt +19 -12
  307. package/dist/select/select.d.ts +8 -8
  308. package/dist/select/select.js +47 -21
  309. package/dist/shared/types.d.ts +5 -5
  310. package/dist/shared/types.js +1 -1
  311. package/dist/sidenav/llms.txt +9 -9
  312. package/dist/sidenav/sidenav.d.ts +1 -1
  313. package/dist/sidenav/sidenav.js +1 -1
  314. package/dist/skeleton/llms.txt +3 -3
  315. package/dist/skeleton/skeleton.d.ts +1 -1
  316. package/dist/skeleton/skeleton.js +1 -1
  317. package/dist/slider/llms.txt +32 -13
  318. package/dist/slider/slider-drag.d.ts +26 -0
  319. package/dist/slider/slider-drag.js +79 -0
  320. package/dist/slider/slider.d.ts +6 -5
  321. package/dist/slider/slider.js +27 -8
  322. package/dist/speech/llms.txt +97 -0
  323. package/dist/speech/speech-button.d.ts +44 -0
  324. package/dist/speech/speech-button.js +86 -0
  325. package/dist/speech/speech-wave.d.ts +19 -0
  326. package/dist/speech/speech-wave.js +16 -0
  327. package/dist/speech/use-speech-recognition.d.ts +81 -0
  328. package/dist/speech/use-speech-recognition.js +179 -0
  329. package/dist/speed-dial/llms.txt +14 -8
  330. package/dist/speed-dial/speed-dial.d.ts +1 -1
  331. package/dist/speed-dial/speed-dial.js +1 -1
  332. package/dist/spinner/llms.txt +7 -7
  333. package/dist/spinner/spinner.d.ts +1 -1
  334. package/dist/spinner/spinner.js +1 -1
  335. package/dist/split-button/llms.txt +21 -15
  336. package/dist/split-button/split-button.d.ts +2 -2
  337. package/dist/split-button/split-button.js +4 -4
  338. package/dist/splitter/llms.txt +11 -11
  339. package/dist/splitter/splitter.d.ts +3 -3
  340. package/dist/splitter/splitter.js +5 -5
  341. package/dist/stepper/llms.txt +33 -14
  342. package/dist/stepper/stepper.d.ts +6 -6
  343. package/dist/stepper/stepper.js +53 -10
  344. package/dist/switch/llms.txt +12 -5
  345. package/dist/switch/switch.d.ts +10 -3
  346. package/dist/switch/switch.js +12 -5
  347. package/dist/switch-group/llms.txt +9 -9
  348. package/dist/switch-group/switch-group.d.ts +4 -4
  349. package/dist/switch-group/switch-group.js +4 -4
  350. package/dist/tabs/llms.txt +10 -10
  351. package/dist/tabs/tabs.d.ts +5 -5
  352. package/dist/tabs/tabs.js +8 -8
  353. package/dist/textarea/llms.txt +23 -12
  354. package/dist/textarea/textarea.d.ts +19 -6
  355. package/dist/textarea/textarea.js +21 -7
  356. package/dist/timeline/llms.txt +4 -4
  357. package/dist/timeline/timeline.d.ts +1 -1
  358. package/dist/timeline/timeline.js +1 -1
  359. package/dist/toast/llms.txt +47 -17
  360. package/dist/toast/toast-container.d.ts +9 -3
  361. package/dist/toast/toast-container.js +17 -9
  362. package/dist/toast/toast-store.d.ts +40 -4
  363. package/dist/toast/toast-store.js +36 -1
  364. package/dist/toolbar/llms.txt +7 -7
  365. package/dist/toolbar/toolbar.d.ts +3 -3
  366. package/dist/toolbar/toolbar.js +2 -2
  367. package/dist/tooltip/llms.txt +10 -10
  368. package/dist/tooltip/tooltip.d.ts +3 -3
  369. package/dist/tooltip/tooltip.js +18 -18
  370. package/dist/tree/llms.txt +25 -12
  371. package/dist/tree/tree-keys.d.ts +5 -5
  372. package/dist/tree/tree-keys.js +7 -7
  373. package/dist/tree/tree.d.ts +14 -7
  374. package/dist/tree/tree.js +53 -18
  375. package/dist/update/llms.txt +54 -0
  376. package/dist/update/update.d.ts +49 -0
  377. package/dist/update/update.js +82 -0
  378. package/package.json +15 -13
@@ -1,22 +1,22 @@
1
1
  # KptChipsInput (@konce-pt/react)
2
2
 
3
- A tag field — add with Enter or a comma, remove with Backspace or ×.
3
+ A tag field - add with Enter or a comma, remove with Backspace or x.
4
4
  Import: `import { KptChipsInput } from '@konce-pt/react';`
5
5
 
6
6
  ## DOM
7
7
  <div class="kpt-chips-input-host">
8
8
  <div class="kpt-chips-input">
9
- …KptChip per tag…
9
+ ...KptChip per tag...
10
10
  <input class="kpt-chips-input__field" type="text">
11
11
  </div>
12
12
  </div>
13
13
 
14
14
  ## Props
15
- - `value` / `defaultValue` / `onValueChange` — `string[]`
16
- - `placeholder`: string — omitted falls back to `chipsInput.placeholder`
15
+ - `value` / `defaultValue` / `onValueChange` - `string[]`
16
+ - `placeholder`: string - omitted falls back to `chipsInput.placeholder`
17
17
  - `allowDuplicates`: boolean (default false)
18
18
  - `disabled`, `invalid`, `touched`, `onTouch()`
19
- - `locale`, `dictionary` — i18n overrides for this component only
19
+ - `locale`, `dictionary` - i18n overrides for this component only
20
20
 
21
21
  ## The buffer is not state
22
22
  The text being typed lives in the DOM, not in React state: the component's value is the list of
@@ -24,19 +24,19 @@ committed tags, and the typing buffer is the field's own business. Every keystro
24
24
  not re-render the chips.
25
25
 
26
26
  ## Keyboard
27
- Enter and a comma commit the tag. Backspace in an empty field eats the last chip — the behaviour
27
+ Enter and a comma commit the tag. Backspace in an empty field eats the last chip - the behaviour
28
28
  every mail client teaches. Blur commits whatever is left in the field, so a half-typed tag is not
29
29
  lost by clicking away.
30
30
 
31
31
  ## Examples
32
- <KptChipsInput value={tags} onValueChange={setTags} placeholder="Add a tag…" />
32
+ <KptChipsInput value={tags} onValueChange={setTags} placeholder="Add a tag..." />
33
33
  <KptChipsInput value={tags} onValueChange={setTags} allowDuplicates />
34
34
 
35
35
  ## Screen reader and keyboard
36
36
  The tags are a list (`role="list"`/`listitem`), so a screen reader hears how many there are. Adding,
37
37
  removing (also with `Backspace`) and a rejected duplicate are announced by a polite live region
38
38
  (`chipsInput.added`/`removed`/`duplicate`); a duplicate stays in the field to be corrected instead
39
- of vanishing. After removing a tag with its `×`, focus returns to the text field.
39
+ of vanishing. After removing a tag with its `x`, focus returns to the text field.
40
40
 
41
41
  ## Label and description
42
42
  `id` goes to the native field, not the host; without one it comes from `KptFormField` or is
@@ -44,6 +44,13 @@ generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the
44
44
  added to `aria-describedby` (merged with your own). Without a wrapper, name it with `ariaLabel`.
45
45
  New: `id`, `ariaLabel`, `required` and `aria-invalid` on the text field.
46
46
 
47
+ ## Motion
48
+ An added tag pops in (grows from a smaller size and sharpens out of a blur); a removed one - by its "x"
49
+ or by `Backspace` - fades and shrinks in place while the following tags and the text field slide over on
50
+ a spring. The value changes at once; the motion only illustrates it. Follows `enter` from `KptMotionProvider`
51
+ (`spring` / `fade` - only fades, the neighbours slide without the spring / `none`); `enabled: false`
52
+ and the system "reduce motion" setting always win.
53
+
47
54
  ## Tokens
48
55
  `--kpt-form-field-{bg,border,border-focus,border-error,radius}` plus the chip tokens.
49
56
 
@@ -1,18 +1,18 @@
1
1
  import { type ComponentPropsWithRef } from 'react';
2
2
  import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
3
3
  export interface KptClockProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
4
- /** Godzina jako 'HH:mm' — zawsze 24h, niezależnie od `hourFormat`. */
4
+ /** Godzina jako 'HH:mm' - zawsze 24h, niezależnie od `hourFormat`. */
5
5
  value?: string;
6
6
  onValueChange?: (value: string) => void;
7
7
  hourFormat?: 12 | 24;
8
8
  minuteStep?: number;
9
9
  }
10
10
  /**
11
- * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
12
- * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
11
+ * Tarcza zegara - dwa etapy: godziny -> minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
12
+ * wewnętrzny pierścień 13-00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
13
13
  * przez `KptDatepicker` i `KptDateRange`.
14
14
  *
15
- * Klawiatura: segmenty godzin i minut to `role="spinbutton"` — `↑`/`↓` o jeden krok (minuty
15
+ * Klawiatura: segmenty godzin i minut to `role="spinbutton"` - `ArrowUp`/`ArrowDown` o jeden krok (minuty
16
16
  * o `minuteStep`), `PageUp`/`PageDown` o pięć, `Home`/`End` do granic. Tak da się ustawić każdą
17
17
  * minutę, także spoza znaczników tarczy co pięć.
18
18
  *
@@ -4,14 +4,14 @@ import { useRef, useState } from 'react';
4
4
  import { dayPeriodLabels, from12h, handAngle, handIsInner, hourFromAngle, hourMarks, minuteFromAngle, minuteMarks, pad, parseTime, stepClockTime, } from '@konce-pt/datetime';
5
5
  import { cn } from "../internal/cn.js";
6
6
  import { useKptMessages } from "../i18n/i18n-context.js";
7
- /** Klawisze segmentu czasu → liczba kroków. */
7
+ /** Klawisze segmentu czasu -> liczba kroków. */
8
8
  const SEGMENT_STEPS = { ArrowUp: 1, ArrowDown: -1, PageUp: 5, PageDown: -5 };
9
9
  /**
10
- * Tarcza zegara — dwa etapy: godziny → minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
11
- * wewnętrzny pierścień 13–00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
10
+ * Tarcza zegara - dwa etapy: godziny -> minuty, klikiem albo przeciąganiem. W trybie 24h dochodzi
11
+ * wewnętrzny pierścień 13-00; w 12h przełącznik AM/PM z etykietami pory dnia z `Intl`. Używana
12
12
  * przez `KptDatepicker` i `KptDateRange`.
13
13
  *
14
- * Klawiatura: segmenty godzin i minut to `role="spinbutton"` — `↑`/`↓` o jeden krok (minuty
14
+ * Klawiatura: segmenty godzin i minut to `role="spinbutton"` - `ArrowUp`/`ArrowDown` o jeden krok (minuty
15
15
  * o `minuteStep`), `PageUp`/`PageDown` o pięć, `Home`/`End` do granic. Tak da się ustawić każdą
16
16
  * minutę, także spoza znaczników tarczy co pięć.
17
17
  *
@@ -22,7 +22,7 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
22
22
  const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
23
23
  const faceRef = useRef(null);
24
24
  const [phase, setPhase] = useState('hours');
25
- // Wartość jest jedynym źródłem prawdy — stan tarczy wyliczamy z niej przy każdym renderze,
25
+ // Wartość jest jedynym źródłem prawdy - stan tarczy wyliczamy z niej przy każdym renderze,
26
26
  // więc podmiana `value` z zewnątrz nie wymaga synchronizacji.
27
27
  const parsed = parseTime(value);
28
28
  const hour = parsed?.h ?? 0;
@@ -31,7 +31,7 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
31
31
  const hour12 = hour % 12 === 0 ? 12 : hour % 12;
32
32
  const periods = dayPeriodLabels(activeLocale);
33
33
  const hourLabel = hourFormat === 12 ? String(hour12) : pad(hour);
34
- // W 12h czytnik słyszy godzinę z porą dnia („9 PM”), nie samą liczbę 21.
34
+ // W 12h czytnik słyszy godzinę z porą dnia ("9 PM"), nie samą liczbę 21.
35
35
  const hourText = hourFormat === 12 ? `${hour12} ${ampm === 'AM' ? periods.am : periods.pm}` : hourLabel;
36
36
  const emit = (h, m) => onValueChange?.(`${pad(h)}:${pad(m)}`);
37
37
  const onSegmentKey = (part, event) => {
@@ -58,7 +58,7 @@ export function KptClock({ value = '', onValueChange, hourFormat = 24, minuteSte
58
58
  if (event.type === 'pointerdown')
59
59
  face.setPointerCapture(event.pointerId);
60
60
  // Przy ruchu bez wciśniętego przycisku tarcza ma tylko śledzić kursor wzrokiem, nie zmieniać
61
- // wartości — inaczej samo przesunięcie myszy nad zegarem przestawiałoby godzinę.
61
+ // wartości - inaczej samo przesunięcie myszy nad zegarem przestawiałoby godzinę.
62
62
  else if (!(event.buttons & 1))
63
63
  return;
64
64
  const rect = face.getBoundingClientRect();
@@ -1,6 +1,6 @@
1
1
  # KptClock (@konce-pt/react)
2
2
 
3
- A clock dial — two stages: hours → minutes, by click or by drag. Used by `KptDatepicker` and
3
+ A clock dial - two stages: hours -> minutes, by click or by drag. Used by `KptDatepicker` and
4
4
  `KptDateRange`, and available on its own.
5
5
  Import: `import { KptClock } from '@konce-pt/react';`
6
6
 
@@ -9,19 +9,19 @@ Import: `import { KptClock } from '@konce-pt/react';`
9
9
  <div class="kpt-clock">
10
10
  <div class="kpt-clock__time">
11
11
  <button class="kpt-clock__seg is-active">15</button>:<button class="kpt-clock__seg">30</button>
12
- <div class="kpt-clock__ampm">…12h only…</div>
12
+ <div class="kpt-clock__ampm">...12h only...</div>
13
13
  </div>
14
14
  <div class="kpt-clock__face">
15
15
  <span class="kpt-clock__hand"></span>
16
- <button class="kpt-clock__num kpt-clock__num--inner">15</button>…
16
+ <button class="kpt-clock__num kpt-clock__num--inner">15</button>...
17
17
  </div>
18
18
  </div>
19
19
  </div>
20
20
 
21
21
  ## Props
22
- - `value` / `onValueChange` — 'HH:mm', always 24h regardless of `hourFormat`
22
+ - `value` / `onValueChange` - 'HH:mm', always 24h regardless of `hourFormat`
23
23
  - `hourFormat`: 12 | 24 (default 24)
24
- - `minuteStep`: number (default 1) — minute snapping while dragging
24
+ - `minuteStep`: number (default 1) - minute snapping while dragging
25
25
  - `className`, `ref` and every other `<div>` prop go to the host
26
26
 
27
27
  ## The value is the only state
@@ -29,7 +29,7 @@ Hours and minutes are derived from `value` on every render, so replacing it from
29
29
  synchronisation. The component keeps one piece of state of its own: which stage the dial is on.
30
30
 
31
31
  ## Two rings in 24h
32
- 12 and 1–11 sit on the outer ring, 00 and 13–23 on the inner one, because 24 numbers on one circle
32
+ 12 and 1-11 sit on the outer ring, 00 and 13-23 on the inner one, because 24 numbers on one circle
33
33
  are unreadable. While dragging, the click radius decides the ring; in 12h the AM/PM toggle decides
34
34
  the half-day instead.
35
35
 
@@ -47,8 +47,8 @@ the numbers `--kpt-color-on-surface`.
47
47
 
48
48
  ## Accessibility
49
49
  Every mark is a real `<button>` with `aria-pressed`, inside a group named "Hours"/"Minutes". The hour and
50
- minute segments are `role="spinbutton"`: Tab to them, `↑`/`↓` step by one (minutes by `minuteStep`),
51
- `PageUp`/`PageDown` by five, `Home`/`End` to the bounds — so every minute is reachable, not only the
50
+ minute segments are `role="spinbutton"`: Tab to them, `ArrowUp`/`ArrowDown` step by one (minutes by `minuteStep`),
51
+ `PageUp`/`PageDown` by five, `Home`/`End` to the bounds - so every minute is reachable, not only the
52
52
  five-minute marks. Focusing a segment switches the stage. AM/PM labels come from `Intl` for the active
53
53
  language and the hour's `aria-valuetext` includes the period ("9 PM"). `locale`/`dictionary` override the
54
54
  language for this component.
@@ -1,6 +1,6 @@
1
1
  import { type ComponentPropsWithRef } from 'react';
2
2
  import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
3
- /** Gotowy kolor z nazwą — nazwa trafia do `aria-label` próbki. */
3
+ /** Gotowy kolor z nazwą - nazwa trafia do `aria-label` próbki. */
4
4
  export interface KptColorPreset {
5
5
  value: string;
6
6
  label: string;
@@ -12,17 +12,17 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
12
12
  onValueChange?: (value: string) => void;
13
13
  /**
14
14
  * Paleta szybkiego wyboru: kody albo `{ value, label }`. Kod sam w sobie niewiele mówi
15
- * czytnikowi („#3b82f6”), więc własną paletę warto nazwać; domyślne kolory mają nazwy z i18n.
15
+ * czytnikowi ("#3b82f6"), więc własną paletę warto nazwać; domyślne kolory mają nazwy z i18n.
16
16
  */
17
17
  presets?: readonly (string | KptColorPreset)[];
18
- /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
18
+ /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` - z wrappera. */
19
19
  id?: string;
20
20
  /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
21
21
  ariaLabel?: string | null;
22
22
  disabled?: boolean;
23
- /** Tylko do odczytu — kolor widać, nie da się go zmienić. */
23
+ /** Tylko do odczytu - kolor widać, nie da się go zmienić. */
24
24
  readOnly?: boolean;
25
- /** Pole wymagane — `aria-required` na polu kodu. */
25
+ /** Pole wymagane - `aria-required` na polu kodu. */
26
26
  required?: boolean;
27
27
  invalid?: boolean;
28
28
  touched?: boolean;
@@ -31,7 +31,7 @@ export interface KptColorPickerProps extends Omit<ComponentPropsWithRef<'div'>,
31
31
  /**
32
32
  * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
33
33
  *
34
- * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem — paletę systemową
34
+ * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem - paletę systemową
35
35
  * otwiera przeglądarka, więc działa też na telefonie i nie duplikujemy jej własnym kodem.
36
36
  *
37
37
  * @example
@@ -19,7 +19,7 @@ const DEFAULT_NAMES = {
19
19
  };
20
20
  /**
21
21
  * Kod z pola tekstowego jako `#rrggbb` albo `null`. Przyjmuje zapis bez `#` i skrót `#rgb`
22
- * (`#fff` → `#ffffff`). Bliźniak w porcie Angulara (`color-picker.component.ts`) — zmiana w obu.
22
+ * (`#fff` -> `#ffffff`). Bliźniak w porcie Angulara (`color-picker.component.ts`) - zmiana w obu.
23
23
  */
24
24
  function parseHex(text) {
25
25
  const raw = text.trim().replace(/^#/, '').toLowerCase();
@@ -30,7 +30,7 @@ function parseHex(text) {
30
30
  /**
31
31
  * Wybór koloru: próbka, pole hex i presety. Wartością jest hex.
32
32
  *
33
- * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem — paletę systemową
33
+ * Próbka to natywny `<input type="color">` schowany pod kolorowym kwadratem - paletę systemową
34
34
  * otwiera przeglądarka, więc działa też na telefonie i nie duplikujemy jej własnym kodem.
35
35
  *
36
36
  * @example
@@ -75,7 +75,7 @@ export function KptColorPicker({ value, defaultValue = '#3b82f6', onValueChange,
75
75
  } }), _jsx("div", { className: "kpt-color-picker__presets", children: presetList.map((preset) => (_jsx("button", { type: "button", className: cn('kpt-color-picker__preset', isActive(preset.value) && 'is-active'), style: { backgroundColor: preset.value }, disabled: disabled || readOnly, "aria-pressed": isActive(preset.value), onClick: () => {
76
76
  setHexDraft(null);
77
77
  setCurrent(preset.value);
78
- // Wybór presetem to też dotknięcie pola — inaczej błąd walidacji nigdy by się nie pokazał.
78
+ // Wybór presetem to też dotknięcie pola - inaczej błąd walidacji nigdy by się nie pokazał.
79
79
  onTouch?.();
80
80
  }, "aria-label": preset.label }, preset.value))) })] }) }));
81
81
  }
@@ -11,20 +11,20 @@ Import: `import { KptColorPicker } from '@konce-pt/react';`
11
11
  </label>
12
12
  <input type="text" class="kpt-color-picker__hex" maxlength="7" value="#3b82f6">
13
13
  <div class="kpt-color-picker__presets">
14
- <button class="kpt-color-picker__preset is-active" aria-label="#3b82f6"></button>…
14
+ <button class="kpt-color-picker__preset is-active" aria-label="#3b82f6"></button>...
15
15
  </div>
16
16
  </div>
17
17
  </div>
18
18
 
19
19
  ## Props
20
- - `value` / `defaultValue` / `onValueChange` — the hex colour (default `'#3b82f6'`)
21
- - `presets`: string[] — the quick-pick palette (8 colours by default; `[]` hides the row)
20
+ - `value` / `defaultValue` / `onValueChange` - the hex colour (default `'#3b82f6'`)
21
+ - `presets`: string[] - the quick-pick palette (8 colours by default; `[]` hides the row)
22
22
  - `disabled`, `invalid`, `touched`, `onTouch()`
23
23
  - `className`, `ref` and every other `<div>` prop go to the host
24
24
 
25
25
  ## The swatch is a native colour input
26
26
  `<input type="color">` sits transparent under the coloured square, so the system palette is the
27
- browser's — it works on a phone and there is no picker of ours to maintain. The hex field edits the
27
+ browser's - it works on a phone and there is no picker of ours to maintain. The hex field edits the
28
28
  same value as text, and the presets write it directly.
29
29
 
30
30
  ## Examples
@@ -34,7 +34,7 @@ same value as text, and the presets write it directly.
34
34
  ## Screen reader and keyboard
35
35
  `presets` accepts codes or `{ value, label }` (the `KptColorPreset` type): the label names the
36
36
  swatch, because a hex code says little to a screen reader; the default palette is named from i18n
37
- (`colorPicker.red`…). The active swatch has `aria-pressed`. The hex field changes the value only on
37
+ (`colorPicker.red`...). The active swatch has `aria-pressed`. The hex field changes the value only on
38
38
  a full `#rrggbb` code (a missing `#` is added); an incomplete code stays visible with
39
39
  `aria-invalid`.
40
40
 
@@ -3,15 +3,15 @@ import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
3
3
  export interface KptConfirmContainerProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
4
4
  }
5
5
  /**
6
- * Kontener potwierdzeń — renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
6
+ * Kontener potwierdzeń - renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
7
7
  * w aplikacji, obok `<KptToastContainer />`.
8
8
  *
9
9
  * Okno to `role="alertdialog"` z treścią pytania w `aria-describedby`, więc czytnik odczytuje
10
- * je od razu po otwarciu. Fokus startuje na przycisku odmowy — bezpieczniejszej odpowiedzi,
10
+ * je od razu po otwarciu. Fokus startuje na przycisku odmowy - bezpieczniejszej odpowiedzi,
11
11
  * której przypadkowy `Enter` niczego nie usunie.
12
12
  *
13
13
  * @example
14
14
  * <KptConfirmContainer />
15
- * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { … }
15
+ * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { ... }
16
16
  */
17
17
  export declare function KptConfirmContainer({ locale, dictionary, className, ...rest }: Readonly<KptConfirmContainerProps>): import("react").JSX.Element;
@@ -9,30 +9,30 @@ import { KptDialog } from "../dialog/dialog.js";
9
9
  import { KptIcon } from "../icon/icon.js";
10
10
  import { acceptKptConfirm, rejectKptConfirm, useKptConfirmRequest } from "./confirm-store.js";
11
11
  /**
12
- * Kontener potwierdzeń — renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
12
+ * Kontener potwierdzeń - renderuje żądanie z `kptConfirm()` na `KptDialog`. Umieść raz
13
13
  * w aplikacji, obok `<KptToastContainer />`.
14
14
  *
15
15
  * Okno to `role="alertdialog"` z treścią pytania w `aria-describedby`, więc czytnik odczytuje
16
- * je od razu po otwarciu. Fokus startuje na przycisku odmowy — bezpieczniejszej odpowiedzi,
16
+ * je od razu po otwarciu. Fokus startuje na przycisku odmowy - bezpieczniejszej odpowiedzi,
17
17
  * której przypadkowy `Enter` niczego nie usunie.
18
18
  *
19
19
  * @example
20
20
  * <KptConfirmContainer />
21
- * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { … }
21
+ * // gdziekolwiek: if (await kptConfirm({ message: 'Usunąć?' })) { ... }
22
22
  */
23
23
  export function KptConfirmContainer({ locale, dictionary, className, ...rest }) {
24
24
  const { t } = useKptMessages({ locale, dictionary });
25
25
  const request = useKptConfirmRequest();
26
26
  const messageId = useKptId(undefined, 'kpt-confirm-message');
27
27
  const rejectRef = useRef(null);
28
- // `showModal()` skupia pierwszy element okna, czyli „×” w nagłówku. Efekt dziecka (`KptDialog`)
28
+ // `showModal()` skupia pierwszy element okna, czyli "x" w nagłówku. Efekt dziecka (`KptDialog`)
29
29
  // biegnie przed efektem rodzica, więc tu okno jest już otwarte i fokus można przenieść.
30
30
  useEffect(() => {
31
31
  if (request)
32
32
  rejectRef.current?.focus();
33
33
  }, [request]);
34
34
  return (_jsx("div", { className: cn('kpt-confirm-container-host', className), ...rest, children: _jsxs(KptDialog, { open: request !== null,
35
- // Escape i × zamykają okno bez odpowiedzi — traktujemy to jak odmowę, żeby czekający
35
+ // Escape i x zamykają okno bez odpowiedzi - traktujemy to jak odmowę, żeby czekający
36
36
  // `await` zawsze coś dostał.
37
37
  onOpenChange: (open) => {
38
38
  if (!open)
@@ -15,15 +15,15 @@ export interface KptConfirmRequest extends KptConfirmOptions {
15
15
  * Pyta użytkownika o potwierdzenie. Wymaga `<KptConfirmContainer />` w aplikacji.
16
16
  *
17
17
  * Jedno żądanie naraz: kolejne wywołanie przy otwartym oknie odrzuca poprzednie, żeby jego
18
- * Promise nigdy nie został nierozstrzygnięty — czekający `await` zostałby inaczej na zawsze.
18
+ * Promise nigdy nie został nierozstrzygnięty - czekający `await` zostałby inaczej na zawsze.
19
19
  *
20
20
  * @example
21
- * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
21
+ * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { ... }
22
22
  */
23
23
  export declare function kptConfirm(options: KptConfirmOptions): Promise<boolean>;
24
- /** Zamyka bieżące potwierdzenie odpowiedzią „tak". Używane przez kontener. */
24
+ /** Zamyka bieżące potwierdzenie odpowiedzią "tak". Używane przez kontener. */
25
25
  export declare function acceptKptConfirm(): void;
26
- /** Zamyka bieżące potwierdzenie odpowiedzią „nie" — także przy Escape i kliknięciu w tło. */
26
+ /** Zamyka bieżące potwierdzenie odpowiedzią "nie" - także przy Escape i kliknięciu w tło. */
27
27
  export declare function rejectKptConfirm(): void;
28
28
  /** Bieżące żądanie potwierdzenia albo `null`. */
29
29
  export declare function useKptConfirmRequest(): KptConfirmRequest | null;
@@ -1,7 +1,7 @@
1
1
  import { useSyncExternalStore } from 'react';
2
2
  import { isDevBuild } from "../internal/dev.js";
3
3
  /*
4
- * Magazyn potwierdzeń jako moduł-singleton — odpowiednik serwisu `providedIn: 'root'` z Angulara,
4
+ * Magazyn potwierdzeń jako moduł-singleton - odpowiednik serwisu `providedIn: 'root'` z Angulara,
5
5
  * ten sam wzorzec co `kptToast`. Dzięki temu `await kptConfirm(...)` woła się także spoza drzewa
6
6
  * Reacta (warstwa danych, guard nawigacji), bez owijania aplikacji providerem.
7
7
  */
@@ -16,15 +16,15 @@ function emit() {
16
16
  * Pyta użytkownika o potwierdzenie. Wymaga `<KptConfirmContainer />` w aplikacji.
17
17
  *
18
18
  * Jedno żądanie naraz: kolejne wywołanie przy otwartym oknie odrzuca poprzednie, żeby jego
19
- * Promise nigdy nie został nierozstrzygnięty — czekający `await` zostałby inaczej na zawsze.
19
+ * Promise nigdy nie został nierozstrzygnięty - czekający `await` zostałby inaczej na zawsze.
20
20
  *
21
21
  * @example
22
- * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { … }
22
+ * if (await kptConfirm({ message: 'Usunąć rekord?', variant: 'danger' })) { ... }
23
23
  */
24
24
  export function kptConfirm(options) {
25
- // Kontener subskrybuje magazyn — bez subskrybentów nikt nie pokaże okna ani nie rozstrzygnie obietnicy.
25
+ // Kontener subskrybuje magazyn - bez subskrybentów nikt nie pokaże okna ani nie rozstrzygnie obietnicy.
26
26
  if (isDevBuild() && listeners.size === 0) {
27
- console.warn('kptConfirm: brak <KptConfirmContainer /> w aplikacji — okno się nie pokaże, ' +
27
+ console.warn('kptConfirm: brak <KptConfirmContainer /> w aplikacji - okno się nie pokaże, ' +
28
28
  'a obietnica nie rozstrzygnie się, dopóki kontener nie zostanie dodany.');
29
29
  }
30
30
  return new Promise((resolve) => {
@@ -38,11 +38,11 @@ function settle(accepted) {
38
38
  current = null;
39
39
  emit();
40
40
  }
41
- /** Zamyka bieżące potwierdzenie odpowiedzią „tak". Używane przez kontener. */
41
+ /** Zamyka bieżące potwierdzenie odpowiedzią "tak". Używane przez kontener. */
42
42
  export function acceptKptConfirm() {
43
43
  settle(true);
44
44
  }
45
- /** Zamyka bieżące potwierdzenie odpowiedzią „nie" — także przy Escape i kliknięciu w tło. */
45
+ /** Zamyka bieżące potwierdzenie odpowiedzią "nie" - także przy Escape i kliknięciu w tło. */
46
46
  export function rejectKptConfirm() {
47
47
  settle(false);
48
48
  }
@@ -6,21 +6,21 @@ Import: `import { kptConfirm, KptConfirmContainer } from '@konce-pt/react';`
6
6
 
7
7
  ## Usage
8
8
  1. Render `<KptConfirmContainer />` once in the app, next to `<KptToastContainer />`.
9
- 2. `await kptConfirm(options)` from anywhere — it resolves to `true` or `false`.
9
+ 2. `await kptConfirm(options)` from anywhere - it resolves to `true` or `false`.
10
10
 
11
11
  ## KptConfirmOptions
12
12
  - `message`: string (required); `header?`: string
13
13
  - `acceptLabel?`, `rejectLabel?`: string
14
- - `variant?`: `'filled'` | `'danger'` — the accept button and the icon colour
14
+ - `variant?`: `'filled'` | `'danger'` - the accept button and the icon colour
15
15
  - `icon?`: an icon name from the registry
16
16
 
17
17
  ## A store, not a hook
18
- The state is a module singleton, so `kptConfirm()` works outside the React tree too — a data layer,
19
- a navigation guard — without wrapping the app in a provider. `useKptConfirmRequest()` exposes the
18
+ The state is a module singleton, so `kptConfirm()` works outside the React tree too - a data layer,
19
+ a navigation guard - without wrapping the app in a provider. `useKptConfirmRequest()` exposes the
20
20
  current request through `useSyncExternalStore` for anyone rendering their own container.
21
21
 
22
22
  ## The promise always settles
23
- Escape and the × close the dialog through `onOpenChange`, which resolves `false` — an awaiting
23
+ Escape and the x close the dialog through `onOpenChange`, which resolves `false` - an awaiting
24
24
  caller is never left hanging. A second `kptConfirm()` while one is open rejects the previous
25
25
  request for the same reason: one request at a time, and nothing is dropped silently. Without a
26
26
  mounted `<KptConfirmContainer />` nobody can show the dialog, so a dev build warns in the console.
@@ -44,4 +44,4 @@ Inherited from `KptDialog`; the icon follows the variant (`--kpt-color-danger` /
44
44
  Built on `KptDialog`, so the focus trap, Escape and the backdrop are the native `<dialog>`'s.
45
45
  The window is `role="alertdialog"` named by its header, with the message tied to it through
46
46
  `aria-describedby`, so a screen reader reads the question as soon as it opens. Focus starts on the
47
- reject button — the safe answer, so a stray `Enter` deletes nothing. Escape and × reject.
47
+ reject button - the safe answer, so a stray `Enter` deletes nothing. Escape and x reject.
@@ -14,7 +14,7 @@ export interface KptContextMenuProps<T> extends Omit<ComponentPropsWithRef<'div'
14
14
  * gdzie był. `Shift+F10` i klawisz Menu na skupionym elemencie obszaru też otwierają menu
15
15
  * (panel staje wtedy przy tym elemencie). Panel jest dociskany do krawędzi okna.
16
16
  *
17
- * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` — nie ma tu wyzwalacza,
17
+ * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` - nie ma tu wyzwalacza,
18
18
  * względem którego dałoby się go przypiąć; pozycję wyznaczają współrzędne kliknięcia,
19
19
  * a wygląd i warstwę niesie wspólny SCSS (`.kpt-context-menu__panel`).
20
20
  *
@@ -14,7 +14,7 @@ const EDGE = 8;
14
14
  * gdzie był. `Shift+F10` i klawisz Menu na skupionym elemencie obszaru też otwierają menu
15
15
  * (panel staje wtedy przy tym elemencie). Panel jest dociskany do krawędzi okna.
16
16
  *
17
- * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` — nie ma tu wyzwalacza,
17
+ * W odróżnieniu od `KptMenu` panel nie idzie przez `KptOverlay` - nie ma tu wyzwalacza,
18
18
  * względem którego dałoby się go przypiąć; pozycję wyznaczają współrzędne kliknięcia,
19
19
  * a wygląd i warstwę niesie wspólny SCSS (`.kpt-context-menu__panel`).
20
20
  *
@@ -28,9 +28,9 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
28
28
  const [point, setPoint] = useState({ x: 0, y: 0 });
29
29
  const panelRef = useRef(null);
30
30
  const layerRef = useRef(null);
31
- /** Licznik otwarć — każde PPM (także przy otwartym menu) dociska panel i ustawia fokus od nowa. */
31
+ /** Licznik otwarć - każde PPM (także przy otwartym menu) dociska panel i ustawia fokus od nowa. */
32
32
  const [openSeq, setOpenSeq] = useState(0);
33
- /** Element, który miał fokus przed otwarciem — tam fokus wraca po zamknięciu. */
33
+ /** Element, który miał fokus przed otwarciem - tam fokus wraca po zamknięciu. */
34
34
  const returnTo = useRef(null);
35
35
  const onContextMenu = (event) => {
36
36
  event.preventDefault();
@@ -49,7 +49,7 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
49
49
  };
50
50
  // Po każdym otwarciu: warstwa w top layer, dociśnięcie do okna i fokus na pierwszej pozycji.
51
51
  // Przed malowaniem (`useLayoutEffect`), żeby panel nie mignął w niedociśniętym miejscu. Docisk
52
- // idzie wprost w styl elementu — stan `point` zostaje, więc React go nie nadpisze.
52
+ // idzie wprost w styl elementu - stan `point` zostaje, więc React go nie nadpisze.
53
53
  useLayoutEffect(() => {
54
54
  const panel = panelRef.current;
55
55
  if (openSeq === 0 || !panel)
@@ -73,7 +73,7 @@ export function KptContextMenu({ items = [], children, onSelect, className, ...r
73
73
  if (target?.isConnected)
74
74
  target.focus();
75
75
  };
76
- // Przewinięcie albo zmiana rozmiaru okna odrywa panel od miejsca kliknięcia — zamykamy go.
76
+ // Przewinięcie albo zmiana rozmiaru okna odrywa panel od miejsca kliknięcia - zamykamy go.
77
77
  const closeOnMove = useEffectEvent(() => close());
78
78
  useEffect(() => {
79
79
  if (!open)
@@ -5,15 +5,15 @@ Import: `import { KptContextMenu } from '@konce-pt/react';`
5
5
 
6
6
  ## DOM
7
7
  <div class="kpt-context-menu-host">
8
- <div class="kpt-context-menu__area">…children…</div>
8
+ <div class="kpt-context-menu__area">...children...</div>
9
9
  <div class="kpt-context-menu__backdrop"></div>
10
- <div class="kpt-context-menu__panel" role="menu" style="left: 320px; top: 210px">…</div>
10
+ <div class="kpt-context-menu__panel" role="menu" style="left: 320px; top: 210px">...</div>
11
11
  </div>
12
12
 
13
13
  ## Props
14
- - `items`: `KptMenuItem<T>[]` — the same shape as `KptMenu`
15
- - `children`: ReactNode — the area that reacts to the right mouse button
16
- - `onSelect(item)` — the picked item
14
+ - `items`: `KptMenuItem<T>[]` - the same shape as `KptMenu`
15
+ - `children`: ReactNode - the area that reacts to the right mouse button
16
+ - `onSelect(item)` - the picked item
17
17
  - `className`, `ref` and every other `<div>` prop go to the host
18
18
 
19
19
  ## Not an overlay
@@ -29,7 +29,7 @@ open the browser's own menu. Picking an item closes it and reports the choice; `
29
29
  The same model as `KptMenu` (the shared `menu-keys.ts`): opening moves focus to the first item, arrows /
30
30
  `Home` / `End` move between items (disabled ones and separators are skipped), `Escape` and `Tab` close
31
31
  it and focus returns to where it was. `Shift+F10` and the context-menu key on a focused element inside
32
- the area open it too — the browser then sends `contextmenu` without mouse coordinates, so the panel is
32
+ the area open it too - the browser then sends `contextmenu` without mouse coordinates, so the panel is
33
33
  placed at that element. The panel is kept inside the viewport (8px from the edges). Touch screens have
34
34
  no right click, so still offer the same actions through a visible button with `KptMenu`.
35
35
 
@@ -42,7 +42,7 @@ no right click, so still offer the same actions through a visible button with `K
42
42
  `--kpt-color-surface-raised`, `--kpt-color-border`, `--kpt-elevation-3`, `--kpt-color-danger`.
43
43
 
44
44
  ## Accessibility
45
- The panel is `role="menu"` with `role="menuitem"` buttons at `tabindex="-1"` (one Tab stop). Keyboard — see
45
+ The panel is `role="menu"` with `role="menuitem"` buttons at `tabindex="-1"` (one Tab stop). Keyboard - see
46
46
  "Keyboard" above.
47
47
 
48
48
  ## Positioning
@@ -22,7 +22,7 @@ export interface KptColumn {
22
22
  align?: 'start' | 'center' | 'end';
23
23
  /** Szerokość kolumny (np. '10rem', '20%'). Wymagana dla kolumn zamrożonych. */
24
24
  width?: string;
25
- /** Zamrożenie (sticky) — obsługiwane dla wiodących, sąsiadujących kolumn. */
25
+ /** Zamrożenie (sticky) - obsługiwane dla wiodących, sąsiadujących kolumn. */
26
26
  frozen?: boolean;
27
27
  /** Filtr kolumny w wierszu nagłówka. */
28
28
  filter?: KptColumnFilter;
@@ -38,7 +38,7 @@ export interface KptCellEditEvent<T> {
38
38
  field: string;
39
39
  /** Nowa wartość. */
40
40
  value: unknown;
41
- /** Wiersz po scaleniu ze zmienioną wartością — gotowe body PUT/PATCH. */
41
+ /** Wiersz po scaleniu ze zmienioną wartością - gotowe body PUT/PATCH. */
42
42
  updatedRow: T;
43
43
  }
44
44
  export type KptSortDir = 'asc' | 'desc' | null;
@@ -49,7 +49,7 @@ export interface KptTableLazyState {
49
49
  sortField: string | null;
50
50
  sortDir: KptSortDir;
51
51
  filter: string;
52
- /** Wartości filtrów per kolumna (pole → wartość kontrolki). */
52
+ /** Wartości filtrów per kolumna (pole -> wartość kontrolki). */
53
53
  columnFilters: Record<string, unknown>;
54
54
  }
55
55
  /** Kontekst własnego edytora komórki (odpowiednik `kptCellEdit` z Angulara). */
@@ -61,7 +61,7 @@ export interface KptCellEditContext<T> {
61
61
  /** Porzuca zmianę. */
62
62
  cancel: () => void;
63
63
  }
64
- /** Szablony komórek: pole → funkcja renderująca (odpowiednik `kptCell`). */
64
+ /** Szablony komórek: pole -> funkcja renderująca (odpowiednik `kptCell`). */
65
65
  export type KptCellRenderers<T> = Record<string, (row: T, value: unknown) => ReactNode>;
66
- /** Własne edytory komórek: pole → funkcja renderująca (odpowiednik `kptCellEdit`). */
66
+ /** Własne edytory komórek: pole -> funkcja renderująca (odpowiednik `kptCellEdit`). */
67
67
  export type KptCellEditRenderers<T> = Record<string, (context: KptCellEditContext<T>) => ReactNode>;