prime-ui-kit 0.10.0 → 0.11.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 (1370) hide show
  1. package/README.md +114 -58
  2. package/bin/prime-ui-kit.js +52 -0
  3. package/dist/chunks/{chunk-EJ2ZVQYL.js → chunk-6TI4DSM5.js} +1904 -2040
  4. package/dist/chunks/chunk-CUH6DJ57.js +29335 -0
  5. package/dist/chunks/{chunk-T7CLQXGB.js → chunk-GKX3QAUC.js} +159 -6
  6. package/dist/chunks/chunk-Q3BFRQHZ.js +1729 -0
  7. package/dist/chunks/chunk-WDTSHOTD.js +6841 -0
  8. package/dist/color-picker.d.ts +5 -3
  9. package/dist/color-picker.js +7 -3
  10. package/dist/components/accordion/Accordion.d.ts +1 -1
  11. package/dist/components/avatar/Avatar.d.ts +2 -2
  12. package/dist/components/badge/Badge.d.ts +17 -5
  13. package/dist/components/badge/tier.d.ts +6 -2
  14. package/dist/components/banner/Banner.d.ts +1 -1
  15. package/dist/components/breadcrumb/Breadcrumb.d.ts +1 -1
  16. package/dist/components/button/Button.d.ts +42 -10
  17. package/dist/components/button-group/ButtonGroup.d.ts +22 -5
  18. package/dist/components/card/Card.d.ts +19 -3
  19. package/dist/components/chart-frame/ChartFrame.d.ts +229 -0
  20. package/dist/components/chat/Chat.d.ts +192 -0
  21. package/dist/components/chat/ChatPinned.d.ts +44 -0
  22. package/dist/components/chat/ChatRows.d.ts +30 -0
  23. package/dist/components/chat/MessageList.d.ts +95 -0
  24. package/dist/components/chat/chatContext.d.ts +54 -0
  25. package/dist/components/chat/groupMessages.d.ts +50 -0
  26. package/dist/components/chat/messageFlow.d.ts +42 -0
  27. package/dist/components/checkbox/Checkbox.d.ts +9 -4
  28. package/dist/components/code-block/CodeBlock.d.ts +1 -1
  29. package/dist/components/color-field/ColorField.d.ts +44 -0
  30. package/dist/components/color-picker/ColorPicker.d.ts +5 -4
  31. package/dist/components/color-picker/ColorPresets.d.ts +22 -14
  32. package/dist/components/color-swatches/ColorSwatches.d.ts +9 -4
  33. package/dist/components/command-menu/CommandMenu.d.ts +41 -11
  34. package/dist/components/composer/Composer.d.ts +234 -0
  35. package/dist/components/composer/format.d.ts +39 -0
  36. package/dist/components/composer/liveWave.d.ts +30 -0
  37. package/dist/components/composer/useRecorder.d.ts +72 -0
  38. package/dist/components/confirm-dialog/ConfirmDialog.d.ts +57 -0
  39. package/dist/components/crossfade/Crossfade.d.ts +8 -2
  40. package/dist/components/data-table/ColumnsMenu.d.ts +19 -0
  41. package/dist/components/data-table/DataTable.d.ts +72 -8
  42. package/dist/components/data-table/Footer.d.ts +1 -1
  43. package/dist/components/data-table/Head.d.ts +6 -2
  44. package/dist/components/data-table/Row.d.ts +33 -5
  45. package/dist/components/data-table/StateRows.d.ts +4 -2
  46. package/dist/components/data-table/context.d.ts +14 -0
  47. package/dist/components/data-table/reorder.d.ts +86 -0
  48. package/dist/components/data-table/rowEvents.d.ts +14 -0
  49. package/dist/components/data-table/rows.d.ts +17 -1
  50. package/dist/components/data-table/serverMode.d.ts +8 -0
  51. package/dist/components/data-table/types.d.ts +16 -0
  52. package/dist/components/data-table/useColumnHover.d.ts +2 -1
  53. package/dist/components/data-table/useInfiniteRows.d.ts +4 -1
  54. package/dist/components/data-table/useRowSelection.d.ts +5 -4
  55. package/dist/components/datepicker/Datepicker.d.ts +8 -3
  56. package/dist/components/datepicker/DatepickerPanel.d.ts +2 -2
  57. package/dist/components/datepicker/panelLayout.d.ts +2 -2
  58. package/dist/components/description-list/DescriptionList.d.ts +59 -0
  59. package/dist/components/digit-input/DigitInput.d.ts +12 -5
  60. package/dist/components/divider/Divider.d.ts +1 -1
  61. package/dist/components/dnd/Dnd.d.ts +48 -20
  62. package/dist/components/dnd/dragSession.d.ts +27 -2
  63. package/dist/components/dnd/geometry.d.ts +12 -4
  64. package/dist/components/dnd/labels.d.ts +12 -1
  65. package/dist/components/dnd/useDragSource.d.ts +2 -0
  66. package/dist/components/dnd/useDropTarget.d.ts +6 -3
  67. package/dist/components/dnd/useFlipList.d.ts +8 -2
  68. package/dist/components/dnd/useSortableList.d.ts +13 -10
  69. package/dist/components/drawer/Drawer.d.ts +14 -12
  70. package/dist/components/dropdown/Dropdown.d.ts +23 -4
  71. package/dist/components/empty-page/EmptyPage.d.ts +35 -5
  72. package/dist/components/fieldset/Fieldset.d.ts +24 -0
  73. package/dist/components/file-upload/FileUpload.d.ts +152 -14
  74. package/dist/components/gallery/Gallery.d.ts +79 -0
  75. package/dist/components/gallery/layout.d.ts +34 -0
  76. package/dist/components/gantt/Gantt.d.ts +102 -0
  77. package/dist/components/gantt/GanttBar.d.ts +51 -0
  78. package/dist/components/gantt/GanttRow.d.ts +75 -0
  79. package/dist/components/gantt/ganttModel.d.ts +133 -0
  80. package/dist/components/gantt/useEdgeAutoScroll.d.ts +12 -0
  81. package/dist/components/hint/Hint.d.ts +1 -1
  82. package/dist/components/index.d.ts +53 -22
  83. package/dist/components/input/Input.d.ts +58 -4
  84. package/dist/components/kanban/Kanban.d.ts +77 -12
  85. package/dist/components/kbd/Kbd.d.ts +1 -1
  86. package/dist/components/label/Label.d.ts +1 -1
  87. package/dist/components/link-button/LinkButton.d.ts +2 -2
  88. package/dist/components/login-form/LoginForm.d.ts +1 -1
  89. package/dist/components/media-viewer/MediaViewer.d.ts +55 -0
  90. package/dist/components/media-viewer/ViewerVideo.d.ts +53 -0
  91. package/dist/components/media-viewer/originShape.d.ts +17 -0
  92. package/dist/components/media-viewer/physics.d.ts +81 -0
  93. package/dist/components/media-viewer/types.d.ts +59 -0
  94. package/dist/components/media-viewer/viewerEngine.d.ts +202 -0
  95. package/dist/components/message/Message.d.ts +83 -0
  96. package/dist/components/message/MessageCards.d.ts +64 -0
  97. package/dist/components/message/MessageFile.d.ts +36 -0
  98. package/dist/components/message/MessageMedia.d.ts +12 -0
  99. package/dist/components/message/MessageParts.d.ts +206 -0
  100. package/dist/components/message/MessageReactionBar.d.ts +35 -0
  101. package/dist/components/message/MessageTyping.d.ts +25 -0
  102. package/dist/components/message/bubbleHug.d.ts +10 -0
  103. package/dist/components/message/bubbleMorph.d.ts +43 -0
  104. package/dist/components/message/formatMessageTime.d.ts +2 -0
  105. package/dist/components/message/types.d.ts +21 -0
  106. package/dist/components/modal/DialogGuard.d.ts +21 -0
  107. package/dist/components/modal/DialogParts.d.ts +90 -15
  108. package/dist/components/modal/Modal.d.ts +9 -47
  109. package/dist/components/modal/ModalDialog.d.ts +46 -0
  110. package/dist/components/native-select/NativeSelect.d.ts +3 -3
  111. package/dist/components/notification/Notification.d.ts +7 -1
  112. package/dist/components/page-content/PageContent.d.ts +58 -1
  113. package/dist/components/page-toolbar/PageToolbar.d.ts +8 -7
  114. package/dist/components/pagination/Pagination.d.ts +1 -1
  115. package/dist/components/popover/Popover.d.ts +12 -4
  116. package/dist/components/progress-bar/ProgressBar.d.ts +30 -10
  117. package/dist/components/progress-circle/ProgressCircle.d.ts +42 -7
  118. package/dist/components/radio/Radio.d.ts +4 -4
  119. package/dist/components/scroll-container/ScrollContainer.d.ts +27 -7
  120. package/dist/components/scroll-container/useFitFlag.d.ts +5 -0
  121. package/dist/components/scroll-container/useScrollEdges.d.ts +53 -0
  122. package/dist/components/scroll-container/useWheelToInline.d.ts +10 -0
  123. package/dist/components/segmented-control/SegmentedControl.d.ts +23 -6
  124. package/dist/components/select/Select.d.ts +38 -8
  125. package/dist/components/select/SelectItem.d.ts +7 -4
  126. package/dist/components/select/selectContext.d.ts +12 -3
  127. package/dist/components/sheet/Sheet.d.ts +49 -0
  128. package/dist/components/skeleton/Skeleton.d.ts +1 -1
  129. package/dist/components/slider/Slider.d.ts +17 -3
  130. package/dist/components/smart-filter/SmartFilter.d.ts +48 -6
  131. package/dist/components/smart-filter/model.d.ts +31 -11
  132. package/dist/components/sparkline/Sparkline.d.ts +19 -4
  133. package/dist/components/spinner/Spinner.d.ts +4 -3
  134. package/dist/components/stepper/Stepper.d.ts +2 -2
  135. package/dist/components/switch/Switch.d.ts +14 -4
  136. package/dist/components/tabs/Tabs.d.ts +5 -3
  137. package/dist/components/tag-select/TagOptionMenu.d.ts +6 -2
  138. package/dist/components/tag-select/TagSelect.d.ts +27 -9
  139. package/dist/components/tag-select/VirtualOptions.d.ts +24 -0
  140. package/dist/components/textarea/Textarea.d.ts +48 -2
  141. package/dist/components/thumbnail/Thumbnail.d.ts +48 -6
  142. package/dist/components/timeline/Timeline.d.ts +1 -1
  143. package/dist/components/tooltip/Tooltip.d.ts +9 -4
  144. package/dist/components/typography/Typography.d.ts +1 -1
  145. package/dist/components/video-note/VideoNote.d.ts +27 -0
  146. package/dist/components/voice-player/VoicePlayer.d.ts +33 -0
  147. package/dist/components/voice-player/getWaveform.d.ts +7 -0
  148. package/dist/hooks/useEdgeOverflow.d.ts +17 -8
  149. package/dist/hooks/useImageStatus.d.ts +10 -10
  150. package/dist/hooks/useModalLayer.d.ts +6 -4
  151. package/dist/hooks/usePosition.d.ts +16 -1
  152. package/dist/hooks/usePresence.d.ts +1 -1
  153. package/dist/hooks/useSwipeDismiss.d.ts +11 -19
  154. package/dist/hooks/useTokenValue.d.ts +10 -0
  155. package/dist/hooks/useUploadQueue.d.ts +60 -0
  156. package/dist/hooks/useVirtualRows.d.ts +74 -0
  157. package/dist/icon-set.d.ts +29 -0
  158. package/dist/{icons.js → icon-set.js} +75 -15
  159. package/dist/icons/Icon.d.ts +6 -5
  160. package/dist/icons/glyph.d.ts +18 -3
  161. package/dist/icons/glyphs/bike.d.ts +2 -0
  162. package/dist/icons/glyphs/captions.d.ts +2 -0
  163. package/dist/icons/glyphs/chart-gantt.d.ts +2 -0
  164. package/dist/icons/glyphs/circle-alert.d.ts +2 -0
  165. package/dist/icons/glyphs/code.d.ts +2 -0
  166. package/dist/icons/glyphs/columns-3.d.ts +2 -0
  167. package/dist/icons/glyphs/crown.d.ts +2 -0
  168. package/dist/icons/glyphs/disc.d.ts +2 -0
  169. package/dist/icons/glyphs/file.d.ts +2 -0
  170. package/dist/icons/glyphs/flag.d.ts +2 -0
  171. package/dist/icons/glyphs/forward.d.ts +2 -0
  172. package/dist/icons/glyphs/fuel.d.ts +2 -0
  173. package/dist/icons/glyphs/funnel.d.ts +2 -0
  174. package/dist/icons/glyphs/globe.d.ts +2 -0
  175. package/dist/icons/glyphs/headset.d.ts +2 -0
  176. package/dist/icons/glyphs/megaphone.d.ts +2 -0
  177. package/dist/icons/glyphs/motorbike.d.ts +2 -0
  178. package/dist/icons/glyphs/pin.d.ts +2 -0
  179. package/dist/icons/glyphs/reply.d.ts +2 -0
  180. package/dist/icons/glyphs/scale.d.ts +2 -0
  181. package/dist/icons/glyphs/star.d.ts +2 -0
  182. package/dist/icons/glyphs/strikethrough.d.ts +2 -0
  183. package/dist/icons/glyphs/text-quote.d.ts +2 -0
  184. package/dist/icons/glyphs/trophy.d.ts +2 -0
  185. package/dist/icons/glyphs/video.d.ts +2 -0
  186. package/dist/icons/glyphs/volume-2.d.ts +2 -0
  187. package/dist/icons/glyphs/volume-x.d.ts +2 -0
  188. package/dist/icons/glyphs/zoom-in.d.ts +2 -0
  189. package/dist/icons/glyphs/zoom-out.d.ts +2 -0
  190. package/dist/icons/index.d.ts +1 -1
  191. package/dist/icons/registry.d.ts +59 -0
  192. package/dist/index.css +1 -13089
  193. package/dist/index.d.ts +7 -2
  194. package/dist/index.js +57 -9
  195. package/dist/internal/AnchorRectContext.d.ts +9 -0
  196. package/dist/internal/ChoiceField.d.ts +2 -2
  197. package/dist/internal/ControlSizeContext.d.ts +1 -1
  198. package/dist/internal/Disclosure.d.ts +15 -0
  199. package/dist/internal/FieldAction.d.ts +38 -0
  200. package/dist/internal/FieldCommit.d.ts +46 -0
  201. package/dist/internal/FieldFrame.d.ts +1 -1
  202. package/dist/internal/HighlightMatch.d.ts +5 -3
  203. package/dist/internal/MorphText.d.ts +3 -2
  204. package/dist/internal/ProgressLegend.d.ts +18 -0
  205. package/dist/internal/VisuallyHidden.d.ts +5 -1
  206. package/dist/internal/attachmentTile.d.ts +64 -0
  207. package/dist/internal/attachmentTile.module.css.d.ts +2 -0
  208. package/dist/internal/disabledContext.d.ts +7 -0
  209. package/dist/internal/edgeAutoScroll.d.ts +30 -0
  210. package/dist/internal/fileFormat.d.ts +5 -0
  211. package/dist/internal/fileName.d.ts +9 -0
  212. package/dist/internal/fileSize.d.ts +2 -0
  213. package/dist/internal/formatClock.d.ts +2 -0
  214. package/dist/internal/glyphSwap.d.ts +19 -0
  215. package/dist/internal/iconBox.module.css.d.ts +2 -0
  216. package/dist/internal/imageSlot.d.ts +3 -1
  217. package/dist/internal/leaveInPlace.d.ts +9 -0
  218. package/dist/internal/listbox.d.ts +19 -0
  219. package/dist/internal/mediaDisk.d.ts +14 -0
  220. package/dist/internal/mediaFrame.d.ts +2 -0
  221. package/dist/internal/mediaKind.d.ts +7 -0
  222. package/dist/internal/mediaPlayer.d.ts +135 -0
  223. package/dist/internal/mediaSession.d.ts +13 -0
  224. package/dist/internal/messageList.d.ts +121 -0
  225. package/dist/internal/messagePart.d.ts +106 -0
  226. package/dist/internal/overlay/FloatingPanel.d.ts +1 -1
  227. package/dist/internal/overlay/focus.d.ts +23 -2
  228. package/dist/internal/overlay/useFloatingLayer.d.ts +2 -2
  229. package/dist/internal/palette.d.ts +7 -0
  230. package/dist/internal/progressSegments.d.ts +39 -2
  231. package/dist/internal/readReceipts.d.ts +11 -0
  232. package/dist/internal/richText.d.ts +40 -0
  233. package/dist/internal/ring.d.ts +64 -0
  234. package/dist/internal/sticky.d.ts +2 -0
  235. package/dist/internal/surfaceDepth.d.ts +2 -0
  236. package/dist/internal/transcript.d.ts +73 -0
  237. package/dist/internal/transfer.d.ts +79 -0
  238. package/dist/internal/transferDisk.d.ts +76 -0
  239. package/dist/internal/useNearView.d.ts +7 -0
  240. package/dist/internal/usePendingChanges.d.ts +18 -0
  241. package/dist/internal/useRangeSelection.d.ts +41 -0
  242. package/dist/layout/app-header/AppHeader.d.ts +21 -3
  243. package/dist/layout/bottom-nav/BottomNav.d.ts +27 -7
  244. package/dist/layout/index.d.ts +2 -2
  245. package/dist/layout/sidebar/Sidebar.d.ts +1 -1
  246. package/dist/skill/SKILL.md +130 -0
  247. package/dist/skill/anti-slop.md +224 -0
  248. package/dist/skill/api-contract.md +295 -0
  249. package/dist/skill/cheatsheet.md +317 -0
  250. package/dist/skill/checklist.md +91 -0
  251. package/dist/skill/choosing.md +164 -0
  252. package/dist/skill/components.md +177 -0
  253. package/dist/skill/composition.md +312 -0
  254. package/dist/skill/foundations.md +186 -0
  255. package/dist/skill/layouts.md +262 -0
  256. package/dist/skill/motion.md +211 -0
  257. package/dist/skill/patterns/chat.module.css +33 -0
  258. package/dist/skill/patterns/chat.tsx +838 -0
  259. package/dist/skill/patterns/dashboard.module.css +44 -0
  260. package/dist/skill/patterns/dashboard.tsx +326 -0
  261. package/dist/skill/patterns/detail-page.module.css +74 -0
  262. package/dist/skill/patterns/detail-page.tsx +209 -0
  263. package/dist/skill/patterns/form-drawer.module.css +14 -0
  264. package/dist/skill/patterns/form-drawer.tsx +240 -0
  265. package/dist/skill/patterns/list-page.module.css +19 -0
  266. package/dist/skill/patterns/list-page.tsx +334 -0
  267. package/dist/skill/patterns/screen-states.module.css +54 -0
  268. package/dist/skill/patterns/screen-states.tsx +186 -0
  269. package/dist/skill/patterns/settings-page.module.css +47 -0
  270. package/dist/skill/patterns/settings-page.tsx +217 -0
  271. package/dist/skill/reference/components/accordion/COMPONENT.md +175 -0
  272. package/dist/skill/reference/components/accordion/examples/collapsible.tsx +27 -0
  273. package/dist/skill/reference/components/accordion/examples/controlled.tsx +36 -0
  274. package/dist/skill/reference/components/accordion/examples/examples.module.css +10 -0
  275. package/dist/skill/reference/components/accordion/examples/multiple.tsx +31 -0
  276. package/dist/skill/reference/components/accordion/examples/overview.tsx +39 -0
  277. package/dist/skill/reference/components/accordion/examples/sizes.tsx +28 -0
  278. package/dist/skill/reference/components/accordion/examples/states.tsx +31 -0
  279. package/dist/skill/reference/components/accordion/examples/variants.tsx +35 -0
  280. package/dist/skill/reference/components/accordion/examples/with-icon.tsx +47 -0
  281. package/dist/skill/reference/components/avatar/COMPONENT.md +166 -0
  282. package/dist/skill/reference/components/avatar/examples/examples.module.css +25 -0
  283. package/dist/skill/reference/components/avatar/examples/overview.tsx +18 -0
  284. package/dist/skill/reference/components/avatar/examples/presence.tsx +47 -0
  285. package/dist/skill/reference/components/avatar/examples/sizes.tsx +21 -0
  286. package/dist/skill/reference/components/avatar/examples/src-from-state.tsx +30 -0
  287. package/dist/skill/reference/components/avatar/examples/states.tsx +39 -0
  288. package/dist/skill/reference/components/avatar/examples/team-group.tsx +41 -0
  289. package/dist/skill/reference/components/avatar/examples/variants.tsx +40 -0
  290. package/dist/skill/reference/components/badge/COMPONENT.md +193 -0
  291. package/dist/skill/reference/components/badge/examples/applied-filters.tsx +47 -0
  292. package/dist/skill/reference/components/badge/examples/examples.module.css +32 -0
  293. package/dist/skill/reference/components/badge/examples/filter-values.tsx +39 -0
  294. package/dist/skill/reference/components/badge/examples/in-controls.tsx +23 -0
  295. package/dist/skill/reference/components/badge/examples/overview.tsx +13 -0
  296. package/dist/skill/reference/components/badge/examples/server-tags.tsx +61 -0
  297. package/dist/skill/reference/components/badge/examples/sizes.tsx +21 -0
  298. package/dist/skill/reference/components/badge/examples/states.tsx +59 -0
  299. package/dist/skill/reference/components/badge/examples/variants.tsx +38 -0
  300. package/dist/skill/reference/components/badge/examples/with-icon.tsx +50 -0
  301. package/dist/skill/reference/components/banner/COMPONENT.md +165 -0
  302. package/dist/skill/reference/components/banner/examples/dismissible.tsx +38 -0
  303. package/dist/skill/reference/components/banner/examples/examples.module.css +32 -0
  304. package/dist/skill/reference/components/banner/examples/narrow.tsx +23 -0
  305. package/dist/skill/reference/components/banner/examples/overview.tsx +18 -0
  306. package/dist/skill/reference/components/banner/examples/page-strip.tsx +53 -0
  307. package/dist/skill/reference/components/banner/examples/sizes.tsx +29 -0
  308. package/dist/skill/reference/components/banner/examples/structure.tsx +45 -0
  309. package/dist/skill/reference/components/banner/examples/variants.tsx +43 -0
  310. package/dist/skill/reference/components/breadcrumb/COMPONENT.md +137 -0
  311. package/dist/skill/reference/components/breadcrumb/examples/ellipsis.tsx +12 -0
  312. package/dist/skill/reference/components/breadcrumb/examples/examples.module.css +11 -0
  313. package/dist/skill/reference/components/breadcrumb/examples/overflow.tsx +26 -0
  314. package/dist/skill/reference/components/breadcrumb/examples/overview.tsx +12 -0
  315. package/dist/skill/reference/components/breadcrumb/examples/sizes.tsx +24 -0
  316. package/dist/skill/reference/components/breadcrumb/examples/with-icon.tsx +14 -0
  317. package/dist/skill/reference/components/button/COMPONENT.md +211 -0
  318. package/dist/skill/reference/components/button/examples/as-child.tsx +15 -0
  319. package/dist/skill/reference/components/button/examples/circle.tsx +67 -0
  320. package/dist/skill/reference/components/button/examples/download.tsx +45 -0
  321. package/dist/skill/reference/components/button/examples/examples.module.css +54 -0
  322. package/dist/skill/reference/components/button/examples/hold-to-confirm.tsx +34 -0
  323. package/dist/skill/reference/components/button/examples/in-form.tsx +45 -0
  324. package/dist/skill/reference/components/button/examples/label-morph.tsx +38 -0
  325. package/dist/skill/reference/components/button/examples/on-colored-host.tsx +29 -0
  326. package/dist/skill/reference/components/button/examples/over-media.tsx +36 -0
  327. package/dist/skill/reference/components/button/examples/overview.tsx +13 -0
  328. package/dist/skill/reference/components/button/examples/sizes.tsx +19 -0
  329. package/dist/skill/reference/components/button/examples/states.tsx +38 -0
  330. package/dist/skill/reference/components/button/examples/toggle.tsx +21 -0
  331. package/dist/skill/reference/components/button/examples/variants.tsx +32 -0
  332. package/dist/skill/reference/components/button/examples/with-icon.tsx +41 -0
  333. package/dist/skill/reference/components/button-group/COMPONENT.md +172 -0
  334. package/dist/skill/reference/components/button-group/examples/controlled.tsx +29 -0
  335. package/dist/skill/reference/components/button-group/examples/examples.module.css +8 -0
  336. package/dist/skill/reference/components/button-group/examples/full-width.tsx +19 -0
  337. package/dist/skill/reference/components/button-group/examples/in-form.tsx +55 -0
  338. package/dist/skill/reference/components/button-group/examples/orientation.tsx +19 -0
  339. package/dist/skill/reference/components/button-group/examples/overview.tsx +12 -0
  340. package/dist/skill/reference/components/button-group/examples/sizes.tsx +22 -0
  341. package/dist/skill/reference/components/button-group/examples/states.tsx +33 -0
  342. package/dist/skill/reference/components/button-group/examples/with-icon.tsx +45 -0
  343. package/dist/skill/reference/components/card/COMPONENT.md +218 -0
  344. package/dist/skill/reference/components/card/examples/content-templates.tsx +67 -0
  345. package/dist/skill/reference/components/card/examples/examples.module.css +84 -0
  346. package/dist/skill/reference/components/card/examples/flat.tsx +25 -0
  347. package/dist/skill/reference/components/card/examples/interactive.tsx +28 -0
  348. package/dist/skill/reference/components/card/examples/kpi-media.tsx +42 -0
  349. package/dist/skill/reference/components/card/examples/narrow.tsx +47 -0
  350. package/dist/skill/reference/components/card/examples/overview.tsx +39 -0
  351. package/dist/skill/reference/components/card/examples/panel-chart.tsx +44 -0
  352. package/dist/skill/reference/components/card/examples/variants.tsx +40 -0
  353. package/dist/skill/reference/components/chart-frame/COMPONENT.md +265 -0
  354. package/dist/skill/reference/components/chart-frame/examples/controlled.tsx +92 -0
  355. package/dist/skill/reference/components/chart-frame/examples/examples.module.css +6 -0
  356. package/dist/skill/reference/components/chart-frame/examples/narrow.tsx +46 -0
  357. package/dist/skill/reference/components/chart-frame/examples/overview.tsx +127 -0
  358. package/dist/skill/reference/components/chart-frame/examples/states.tsx +78 -0
  359. package/dist/skill/reference/components/chart-frame/examples/tooltip.tsx +158 -0
  360. package/dist/skill/reference/components/chat/COMPONENT.md +336 -0
  361. package/dist/skill/reference/components/chat/examples/controlled.tsx +68 -0
  362. package/dist/skill/reference/components/chat/examples/examples.module.css +38 -0
  363. package/dist/skill/reference/components/chat/examples/group-chat.tsx +130 -0
  364. package/dist/skill/reference/components/chat/examples/live.tsx +89 -0
  365. package/dist/skill/reference/components/chat/examples/narrow.tsx +46 -0
  366. package/dist/skill/reference/components/chat/examples/overview.tsx +839 -0
  367. package/dist/skill/reference/components/chat/examples/search.tsx +61 -0
  368. package/dist/skill/reference/components/chat/examples/structure.tsx +28 -0
  369. package/dist/skill/reference/components/checkbox/COMPONENT.md +171 -0
  370. package/dist/skill/reference/components/checkbox/examples/controlled.tsx +41 -0
  371. package/dist/skill/reference/components/checkbox/examples/examples.module.css +69 -0
  372. package/dist/skill/reference/components/checkbox/examples/in-form.tsx +34 -0
  373. package/dist/skill/reference/components/checkbox/examples/indicator.tsx +54 -0
  374. package/dist/skill/reference/components/checkbox/examples/overview.tsx +10 -0
  375. package/dist/skill/reference/components/checkbox/examples/sizes.tsx +18 -0
  376. package/dist/skill/reference/components/checkbox/examples/states.tsx +48 -0
  377. package/dist/skill/reference/components/checkbox/examples/variants.tsx +30 -0
  378. package/dist/skill/reference/components/checkbox/examples/without-label.tsx +13 -0
  379. package/dist/skill/reference/components/code-block/COMPONENT.md +108 -0
  380. package/dist/skill/reference/components/code-block/examples/color-scheme.tsx +16 -0
  381. package/dist/skill/reference/components/code-block/examples/examples.module.css +21 -0
  382. package/dist/skill/reference/components/code-block/examples/narrow.tsx +14 -0
  383. package/dist/skill/reference/components/code-block/examples/overview.tsx +19 -0
  384. package/dist/skill/reference/components/code-block/examples/variants.tsx +21 -0
  385. package/dist/skill/reference/components/color-field/COMPONENT.md +163 -0
  386. package/dist/skill/reference/components/color-field/examples/controlled.tsx +33 -0
  387. package/dist/skill/reference/components/color-field/examples/examples.module.css +22 -0
  388. package/dist/skill/reference/components/color-field/examples/in-form.tsx +45 -0
  389. package/dist/skill/reference/components/color-field/examples/overview.tsx +6 -0
  390. package/dist/skill/reference/components/color-field/examples/presets.tsx +20 -0
  391. package/dist/skill/reference/components/color-field/examples/sizes.tsx +14 -0
  392. package/dist/skill/reference/components/color-field/examples/states.tsx +12 -0
  393. package/dist/skill/reference/components/color-field/examples/validation.tsx +29 -0
  394. package/dist/skill/reference/components/color-picker/COMPONENT.md +339 -0
  395. package/dist/skill/reference/components/color-picker/examples/controlled.tsx +37 -0
  396. package/dist/skill/reference/components/color-picker/examples/examples.module.css +48 -0
  397. package/dist/skill/reference/components/color-picker/examples/formats.tsx +26 -0
  398. package/dist/skill/reference/components/color-picker/examples/in-form.tsx +52 -0
  399. package/dist/skill/reference/components/color-picker/examples/overview.tsx +37 -0
  400. package/dist/skill/reference/components/color-picker/examples/panel.tsx +41 -0
  401. package/dist/skill/reference/components/color-picker/examples/presets-sizes.tsx +28 -0
  402. package/dist/skill/reference/components/color-picker/examples/presets.tsx +35 -0
  403. package/dist/skill/reference/components/color-picker/examples/sizes.tsx +26 -0
  404. package/dist/skill/reference/components/color-picker/examples/states.tsx +22 -0
  405. package/dist/skill/reference/components/color-picker/examples/validation.tsx +24 -0
  406. package/dist/skill/reference/components/color-swatches/COMPONENT.md +146 -0
  407. package/dist/skill/reference/components/color-swatches/examples/controlled.tsx +22 -0
  408. package/dist/skill/reference/components/color-swatches/examples/examples.module.css +19 -0
  409. package/dist/skill/reference/components/color-swatches/examples/in-form.tsx +41 -0
  410. package/dist/skill/reference/components/color-swatches/examples/overview.tsx +6 -0
  411. package/dist/skill/reference/components/color-swatches/examples/sizes.tsx +19 -0
  412. package/dist/skill/reference/components/color-swatches/examples/states.tsx +20 -0
  413. package/dist/skill/reference/components/color-swatches/examples/wrapping.tsx +12 -0
  414. package/dist/skill/reference/components/command-menu/COMPONENT.md +225 -0
  415. package/dist/skill/reference/components/command-menu/examples/controlled-open.tsx +29 -0
  416. package/dist/skill/reference/components/command-menu/examples/controlled.tsx +42 -0
  417. package/dist/skill/reference/components/command-menu/examples/dismiss.tsx +39 -0
  418. package/dist/skill/reference/components/command-menu/examples/load-error.tsx +65 -0
  419. package/dist/skill/reference/components/command-menu/examples/overview.tsx +61 -0
  420. package/dist/skill/reference/components/command-menu/examples/server-search.tsx +91 -0
  421. package/dist/skill/reference/components/command-menu/examples/sizes.tsx +53 -0
  422. package/dist/skill/reference/components/command-menu/examples/states.tsx +48 -0
  423. package/dist/skill/reference/components/command-menu/examples/structure.tsx +54 -0
  424. package/dist/skill/reference/components/composer/COMPONENT.md +310 -0
  425. package/dist/skill/reference/components/composer/examples/attachments.tsx +36 -0
  426. package/dist/skill/reference/components/composer/examples/controlled.tsx +46 -0
  427. package/dist/skill/reference/components/composer/examples/examples.module.css +30 -0
  428. package/dist/skill/reference/components/composer/examples/formatting.tsx +15 -0
  429. package/dist/skill/reference/components/composer/examples/narrow.tsx +22 -0
  430. package/dist/skill/reference/components/composer/examples/overview.tsx +39 -0
  431. package/dist/skill/reference/components/composer/examples/reply-edit.tsx +68 -0
  432. package/dist/skill/reference/components/composer/examples/sizes.tsx +23 -0
  433. package/dist/skill/reference/components/composer/examples/states.tsx +31 -0
  434. package/dist/skill/reference/components/composer/examples/typing.tsx +24 -0
  435. package/dist/skill/reference/components/composer/examples/voice.tsx +21 -0
  436. package/dist/skill/reference/components/confirm-dialog/COMPONENT.md +124 -0
  437. package/dist/skill/reference/components/confirm-dialog/examples/controlled-open.tsx +35 -0
  438. package/dist/skill/reference/components/confirm-dialog/examples/failure.tsx +37 -0
  439. package/dist/skill/reference/components/confirm-dialog/examples/overview.tsx +24 -0
  440. package/dist/skill/reference/components/confirm-dialog/examples/variants.tsx +44 -0
  441. package/dist/skill/reference/components/crossfade/COMPONENT.md +118 -0
  442. package/dist/skill/reference/components/crossfade/examples/examples.module.css +93 -0
  443. package/dist/skill/reference/components/crossfade/examples/fill.tsx +79 -0
  444. package/dist/skill/reference/components/crossfade/examples/overview.tsx +102 -0
  445. package/dist/skill/reference/components/crossfade/examples/record-switch.tsx +67 -0
  446. package/dist/skill/reference/components/data-table/COMPONENT.md +366 -0
  447. package/dist/skill/reference/components/data-table/examples/appearance.tsx +62 -0
  448. package/dist/skill/reference/components/data-table/examples/columns-visibility.tsx +151 -0
  449. package/dist/skill/reference/components/data-table/examples/content-width.tsx +65 -0
  450. package/dist/skill/reference/components/data-table/examples/controlled.tsx +56 -0
  451. package/dist/skill/reference/components/data-table/examples/detail-panel.tsx +101 -0
  452. package/dist/skill/reference/components/data-table/examples/examples.module.css +86 -0
  453. package/dist/skill/reference/components/data-table/examples/fill-height.tsx +55 -0
  454. package/dist/skill/reference/components/data-table/examples/groups.tsx +73 -0
  455. package/dist/skill/reference/components/data-table/examples/heatmap.tsx +44 -0
  456. package/dist/skill/reference/components/data-table/examples/infinite-scroll.tsx +53 -0
  457. package/dist/skill/reference/components/data-table/examples/narrow.tsx +50 -0
  458. package/dist/skill/reference/components/data-table/examples/nested-rows.tsx +128 -0
  459. package/dist/skill/reference/components/data-table/examples/numeric.tsx +41 -0
  460. package/dist/skill/reference/components/data-table/examples/overview.tsx +54 -0
  461. package/dist/skill/reference/components/data-table/examples/reorder.tsx +61 -0
  462. package/dist/skill/reference/components/data-table/examples/row-link.tsx +100 -0
  463. package/dist/skill/reference/components/data-table/examples/row-open.tsx +129 -0
  464. package/dist/skill/reference/components/data-table/examples/selection.tsx +60 -0
  465. package/dist/skill/reference/components/data-table/examples/server.tsx +181 -0
  466. package/dist/skill/reference/components/data-table/examples/sizes.tsx +56 -0
  467. package/dist/skill/reference/components/data-table/examples/states.tsx +50 -0
  468. package/dist/skill/reference/components/data-table/examples/sticky.tsx +54 -0
  469. package/dist/skill/reference/components/data-table/examples/toolbar.tsx +124 -0
  470. package/dist/skill/reference/components/datepicker/COMPONENT.md +228 -0
  471. package/dist/skill/reference/components/datepicker/examples/controlled-open.tsx +32 -0
  472. package/dist/skill/reference/components/datepicker/examples/controlled.tsx +39 -0
  473. package/dist/skill/reference/components/datepicker/examples/examples.module.css +26 -0
  474. package/dist/skill/reference/components/datepicker/examples/in-form.tsx +74 -0
  475. package/dist/skill/reference/components/datepicker/examples/inline-panel.tsx +14 -0
  476. package/dist/skill/reference/components/datepicker/examples/narrow.tsx +14 -0
  477. package/dist/skill/reference/components/datepicker/examples/overview.tsx +6 -0
  478. package/dist/skill/reference/components/datepicker/examples/range-presets.tsx +22 -0
  479. package/dist/skill/reference/components/datepicker/examples/sizes.tsx +22 -0
  480. package/dist/skill/reference/components/datepicker/examples/states.tsx +20 -0
  481. package/dist/skill/reference/components/datepicker/examples/validation.tsx +36 -0
  482. package/dist/skill/reference/components/datepicker/examples/yearless.tsx +20 -0
  483. package/dist/skill/reference/components/description-list/COMPONENT.md +132 -0
  484. package/dist/skill/reference/components/description-list/examples/examples.module.css +41 -0
  485. package/dist/skill/reference/components/description-list/examples/narrow.tsx +20 -0
  486. package/dist/skill/reference/components/description-list/examples/overview.tsx +35 -0
  487. package/dist/skill/reference/components/description-list/examples/sizes.tsx +24 -0
  488. package/dist/skill/reference/components/description-list/examples/structure.tsx +29 -0
  489. package/dist/skill/reference/components/description-list/examples/vertical.tsx +21 -0
  490. package/dist/skill/reference/components/digit-input/COMPONENT.md +165 -0
  491. package/dist/skill/reference/components/digit-input/examples/controlled.tsx +23 -0
  492. package/dist/skill/reference/components/digit-input/examples/examples.module.css +25 -0
  493. package/dist/skill/reference/components/digit-input/examples/full-width.tsx +13 -0
  494. package/dist/skill/reference/components/digit-input/examples/grouped.tsx +11 -0
  495. package/dist/skill/reference/components/digit-input/examples/in-form.tsx +50 -0
  496. package/dist/skill/reference/components/digit-input/examples/on-complete.tsx +33 -0
  497. package/dist/skill/reference/components/digit-input/examples/overview.tsx +6 -0
  498. package/dist/skill/reference/components/digit-input/examples/sizes.tsx +14 -0
  499. package/dist/skill/reference/components/digit-input/examples/states.tsx +11 -0
  500. package/dist/skill/reference/components/digit-input/examples/validation.tsx +24 -0
  501. package/dist/skill/reference/components/divider/COMPONENT.md +113 -0
  502. package/dist/skill/reference/components/divider/examples/align.tsx +14 -0
  503. package/dist/skill/reference/components/divider/examples/examples.module.css +30 -0
  504. package/dist/skill/reference/components/divider/examples/or-separator.tsx +19 -0
  505. package/dist/skill/reference/components/divider/examples/overview.tsx +30 -0
  506. package/dist/skill/reference/components/divider/examples/sizes.tsx +19 -0
  507. package/dist/skill/reference/components/divider/examples/vertical.tsx +21 -0
  508. package/dist/skill/reference/components/divider/examples/with-icon.tsx +26 -0
  509. package/dist/skill/reference/components/dnd/COMPONENT.md +260 -0
  510. package/dist/skill/reference/components/dnd/examples/board.tsx +91 -0
  511. package/dist/skill/reference/components/dnd/examples/drop-zones.tsx +82 -0
  512. package/dist/skill/reference/components/dnd/examples/examples.module.css +112 -0
  513. package/dist/skill/reference/components/dnd/examples/grid.tsx +48 -0
  514. package/dist/skill/reference/components/dnd/examples/handle.tsx +58 -0
  515. package/dist/skill/reference/components/dnd/examples/locked.tsx +57 -0
  516. package/dist/skill/reference/components/dnd/examples/narrow.tsx +42 -0
  517. package/dist/skill/reference/components/dnd/examples/overview.tsx +45 -0
  518. package/dist/skill/reference/components/drawer/COMPONENT.md +229 -0
  519. package/dist/skill/reference/components/drawer/examples/controlled-open.tsx +40 -0
  520. package/dist/skill/reference/components/drawer/examples/dismiss.tsx +55 -0
  521. package/dist/skill/reference/components/drawer/examples/examples.module.css +21 -0
  522. package/dist/skill/reference/components/drawer/examples/guard.tsx +80 -0
  523. package/dist/skill/reference/components/drawer/examples/header-actions.tsx +63 -0
  524. package/dist/skill/reference/components/drawer/examples/in-form.tsx +87 -0
  525. package/dist/skill/reference/components/drawer/examples/long-content.tsx +40 -0
  526. package/dist/skill/reference/components/drawer/examples/overview.tsx +56 -0
  527. package/dist/skill/reference/components/drawer/examples/placement.tsx +40 -0
  528. package/dist/skill/reference/components/drawer/examples/sizes.tsx +43 -0
  529. package/dist/skill/reference/components/drawer/examples/structure.tsx +35 -0
  530. package/dist/skill/reference/components/dropdown/COMPONENT.md +235 -0
  531. package/dist/skill/reference/components/dropdown/examples/checkbox-items.tsx +48 -0
  532. package/dist/skill/reference/components/dropdown/examples/controlled-open.tsx +32 -0
  533. package/dist/skill/reference/components/dropdown/examples/dismiss.tsx +17 -0
  534. package/dist/skill/reference/components/dropdown/examples/examples.module.css +22 -0
  535. package/dist/skill/reference/components/dropdown/examples/item-description.tsx +30 -0
  536. package/dist/skill/reference/components/dropdown/examples/link-items.tsx +29 -0
  537. package/dist/skill/reference/components/dropdown/examples/long-list.tsx +42 -0
  538. package/dist/skill/reference/components/dropdown/examples/match-trigger-width.tsx +23 -0
  539. package/dist/skill/reference/components/dropdown/examples/overview.tsx +41 -0
  540. package/dist/skill/reference/components/dropdown/examples/placement.tsx +33 -0
  541. package/dist/skill/reference/components/dropdown/examples/sizes.tsx +43 -0
  542. package/dist/skill/reference/components/dropdown/examples/states.tsx +35 -0
  543. package/dist/skill/reference/components/dropdown/examples/structure.tsx +56 -0
  544. package/dist/skill/reference/components/empty-page/COMPONENT.md +167 -0
  545. package/dist/skill/reference/components/empty-page/examples/compact.tsx +23 -0
  546. package/dist/skill/reference/components/empty-page/examples/data-region.tsx +32 -0
  547. package/dist/skill/reference/components/empty-page/examples/examples.module.css +54 -0
  548. package/dist/skill/reference/components/empty-page/examples/narrow.tsx +26 -0
  549. package/dist/skill/reference/components/empty-page/examples/overview.tsx +22 -0
  550. package/dist/skill/reference/components/empty-page/examples/region-error.tsx +86 -0
  551. package/dist/skill/reference/components/empty-page/examples/sizes.tsx +25 -0
  552. package/{src/components/empty-page/examples/icon-tones.tsx → dist/skill/reference/components/empty-page/examples/variants.tsx} +10 -9
  553. package/dist/skill/reference/components/example-frame/COMPONENT.md +140 -0
  554. package/dist/skill/reference/components/example-frame/examples/controlled.tsx +42 -0
  555. package/dist/skill/reference/components/example-frame/examples/overview.tsx +16 -0
  556. package/dist/skill/reference/components/fieldset/COMPONENT.md +107 -0
  557. package/dist/skill/reference/components/fieldset/examples/examples.module.css +14 -0
  558. package/dist/skill/reference/components/fieldset/examples/in-form.tsx +59 -0
  559. package/dist/skill/reference/components/fieldset/examples/overview.tsx +22 -0
  560. package/dist/skill/reference/components/fieldset/examples/states.tsx +35 -0
  561. package/dist/skill/reference/components/file-upload/COMPONENT.md +407 -0
  562. package/dist/skill/reference/components/file-upload/examples/attachment-tray.tsx +99 -0
  563. package/dist/skill/reference/components/file-upload/examples/avatar-upload.tsx +56 -0
  564. package/dist/skill/reference/components/file-upload/examples/controlled.tsx +77 -0
  565. package/dist/skill/reference/components/file-upload/examples/custom-body.tsx +44 -0
  566. package/dist/skill/reference/components/file-upload/examples/examples.module.css +122 -0
  567. package/dist/skill/reference/components/file-upload/examples/file-cards.tsx +64 -0
  568. package/dist/skill/reference/components/file-upload/examples/gallery.tsx +104 -0
  569. package/dist/skill/reference/components/file-upload/examples/in-form.tsx +79 -0
  570. package/dist/skill/reference/components/file-upload/examples/narrow.tsx +73 -0
  571. package/dist/skill/reference/components/file-upload/examples/overview.tsx +49 -0
  572. package/dist/skill/reference/components/file-upload/examples/row-parts.tsx +41 -0
  573. package/dist/skill/reference/components/file-upload/examples/saving.tsx +71 -0
  574. package/dist/skill/reference/components/file-upload/examples/sizes.tsx +26 -0
  575. package/dist/skill/reference/components/file-upload/examples/states.tsx +23 -0
  576. package/dist/skill/reference/components/file-upload/examples/validation.tsx +42 -0
  577. package/dist/skill/reference/components/file-upload/examples/variants.tsx +32 -0
  578. package/dist/skill/reference/components/gallery/COMPONENT.md +151 -0
  579. package/dist/skill/reference/components/gallery/examples/controlled-open.tsx +39 -0
  580. package/dist/skill/reference/components/gallery/examples/examples.module.css +14 -0
  581. package/dist/skill/reference/components/gallery/examples/overview.tsx +52 -0
  582. package/dist/skill/reference/components/gallery/examples/transfer.tsx +45 -0
  583. package/dist/skill/reference/components/gantt/COMPONENT.md +224 -0
  584. package/dist/skill/reference/components/gantt/examples/controlled.tsx +72 -0
  585. package/dist/skill/reference/components/gantt/examples/examples.module.css +30 -0
  586. package/dist/skill/reference/components/gantt/examples/large.tsx +96 -0
  587. package/dist/skill/reference/components/gantt/examples/narrow.tsx +54 -0
  588. package/dist/skill/reference/components/gantt/examples/occupancy.tsx +149 -0
  589. package/dist/skill/reference/components/gantt/examples/overview.tsx +82 -0
  590. package/dist/skill/reference/components/gantt/examples/sizes.tsx +48 -0
  591. package/dist/skill/reference/components/gantt/examples/states.tsx +68 -0
  592. package/dist/skill/reference/components/gantt/examples/variants.tsx +82 -0
  593. package/dist/skill/reference/components/hint/COMPONENT.md +113 -0
  594. package/dist/skill/reference/components/hint/examples/examples.module.css +14 -0
  595. package/dist/skill/reference/components/hint/examples/hint-or-error.tsx +27 -0
  596. package/dist/skill/reference/components/hint/examples/overview.tsx +22 -0
  597. package/dist/skill/reference/components/hint/examples/sizes.tsx +19 -0
  598. package/dist/skill/reference/components/hint/examples/states.tsx +27 -0
  599. package/dist/skill/reference/components/hint/examples/with-icon.tsx +31 -0
  600. package/dist/skill/reference/components/input/COMPONENT.md +297 -0
  601. package/dist/skill/reference/components/input/examples/affixes.tsx +22 -0
  602. package/dist/skill/reference/components/input/examples/controlled.tsx +39 -0
  603. package/dist/skill/reference/components/input/examples/edge-actions.tsx +30 -0
  604. package/dist/skill/reference/components/input/examples/examples.module.css +38 -0
  605. package/dist/skill/reference/components/input/examples/in-form.tsx +107 -0
  606. package/dist/skill/reference/components/input/examples/inline-edit.tsx +52 -0
  607. package/dist/skill/reference/components/input/examples/overview.tsx +12 -0
  608. package/dist/skill/reference/components/input/examples/password-strength.tsx +13 -0
  609. package/dist/skill/reference/components/input/examples/sizes.tsx +18 -0
  610. package/dist/skill/reference/components/input/examples/states.tsx +27 -0
  611. package/dist/skill/reference/components/input/examples/validation.tsx +60 -0
  612. package/dist/skill/reference/components/input/examples/with-icon.tsx +25 -0
  613. package/dist/skill/reference/components/input/examples/without-focus-ring.tsx +25 -0
  614. package/dist/skill/reference/components/kanban/COMPONENT.md +239 -0
  615. package/dist/skill/reference/components/kanban/examples/cards.tsx +152 -0
  616. package/dist/skill/reference/components/kanban/examples/columns.tsx +182 -0
  617. package/dist/skill/reference/components/kanban/examples/controlled.tsx +78 -0
  618. package/dist/skill/reference/components/kanban/examples/examples.module.css +37 -0
  619. package/dist/skill/reference/components/kanban/examples/limits.tsx +60 -0
  620. package/dist/skill/reference/components/kanban/examples/narrow.tsx +76 -0
  621. package/dist/skill/reference/components/kanban/examples/overview.tsx +130 -0
  622. package/dist/skill/reference/components/kanban/examples/saving.tsx +83 -0
  623. package/dist/skill/reference/components/kanban/examples/states.tsx +75 -0
  624. package/dist/skill/reference/components/kanban/examples/structure.tsx +76 -0
  625. package/dist/skill/reference/components/kanban/examples/variants.tsx +57 -0
  626. package/dist/skill/reference/components/kbd/COMPONENT.md +99 -0
  627. package/dist/skill/reference/components/kbd/examples/examples.module.css +37 -0
  628. package/dist/skill/reference/components/kbd/examples/in-controls.tsx +34 -0
  629. package/dist/skill/reference/components/kbd/examples/overview.tsx +24 -0
  630. package/dist/skill/reference/components/kbd/examples/shortcut-list.tsx +49 -0
  631. package/dist/skill/reference/components/kbd/examples/sizes.tsx +19 -0
  632. package/dist/skill/reference/components/label/COMPONENT.md +126 -0
  633. package/dist/skill/reference/components/label/examples/examples.module.css +16 -0
  634. package/dist/skill/reference/components/label/examples/overview.tsx +20 -0
  635. package/dist/skill/reference/components/label/examples/sizes.tsx +19 -0
  636. package/dist/skill/reference/components/label/examples/states.tsx +23 -0
  637. package/dist/skill/reference/components/label/examples/structure.tsx +32 -0
  638. package/dist/skill/reference/components/label/examples/with-icon.tsx +31 -0
  639. package/dist/skill/reference/components/link-button/COMPONENT.md +128 -0
  640. package/dist/skill/reference/components/link-button/examples/as-child.tsx +18 -0
  641. package/dist/skill/reference/components/link-button/examples/external-link.tsx +14 -0
  642. package/dist/skill/reference/components/link-button/examples/overview.tsx +11 -0
  643. package/dist/skill/reference/components/link-button/examples/sizes.tsx +21 -0
  644. package/dist/skill/reference/components/link-button/examples/states.tsx +31 -0
  645. package/dist/skill/reference/components/link-button/examples/variants.tsx +21 -0
  646. package/dist/skill/reference/components/link-button/examples/with-icon.tsx +27 -0
  647. package/dist/skill/reference/components/login-form/COMPONENT.md +163 -0
  648. package/dist/skill/reference/components/login-form/examples/examples.module.css +39 -0
  649. package/dist/skill/reference/components/login-form/examples/forgot-password.tsx +39 -0
  650. package/dist/skill/reference/components/login-form/examples/narrow.tsx +32 -0
  651. package/dist/skill/reference/components/login-form/examples/overview.tsx +58 -0
  652. package/dist/skill/reference/components/login-form/examples/register.tsx +80 -0
  653. package/dist/skill/reference/components/login-form/examples/reset-password.tsx +60 -0
  654. package/dist/skill/reference/components/login-form/examples/sizes.tsx +38 -0
  655. package/dist/skill/reference/components/login-form/examples/states.tsx +71 -0
  656. package/dist/skill/reference/components/login-form/examples/structure.tsx +28 -0
  657. package/dist/skill/reference/components/login-form/examples/verification-code.tsx +57 -0
  658. package/dist/skill/reference/components/media-viewer/COMPONENT.md +207 -0
  659. package/dist/skill/reference/components/media-viewer/examples/actions.tsx +86 -0
  660. package/dist/skill/reference/components/media-viewer/examples/controlled-open.tsx +30 -0
  661. package/dist/skill/reference/components/media-viewer/examples/controlled.tsx +54 -0
  662. package/dist/skill/reference/components/media-viewer/examples/dismiss.tsx +34 -0
  663. package/dist/skill/reference/components/media-viewer/examples/examples.module.css +16 -0
  664. package/dist/skill/reference/components/media-viewer/examples/origin.tsx +60 -0
  665. package/dist/skill/reference/components/media-viewer/examples/overview.tsx +75 -0
  666. package/dist/skill/reference/components/media-viewer/examples/thumbnails.tsx +49 -0
  667. package/dist/skill/reference/components/media-viewer/examples/video.tsx +55 -0
  668. package/dist/skill/reference/components/message/COMPONENT.md +444 -0
  669. package/dist/skill/reference/components/message/examples/author.tsx +74 -0
  670. package/dist/skill/reference/components/message/examples/contact.tsx +24 -0
  671. package/dist/skill/reference/components/message/examples/context-menu.tsx +71 -0
  672. package/dist/skill/reference/components/message/examples/examples.module.css +18 -0
  673. package/dist/skill/reference/components/message/examples/file.tsx +79 -0
  674. package/dist/skill/reference/components/message/examples/kinds.tsx +93 -0
  675. package/dist/skill/reference/components/message/examples/link-preview.tsx +17 -0
  676. package/dist/skill/reference/components/message/examples/location.tsx +30 -0
  677. package/dist/skill/reference/components/message/examples/media.tsx +93 -0
  678. package/dist/skill/reference/components/message/examples/narrow.tsx +29 -0
  679. package/dist/skill/reference/components/message/examples/overview.tsx +52 -0
  680. package/dist/skill/reference/components/message/examples/reactions.tsx +73 -0
  681. package/dist/skill/reference/components/message/examples/status.tsx +45 -0
  682. package/dist/skill/reference/components/message/examples/structure.tsx +32 -0
  683. package/dist/skill/reference/components/message/examples/text-formatting.tsx +27 -0
  684. package/dist/skill/reference/components/message/examples/typing.tsx +22 -0
  685. package/dist/skill/reference/components/message/examples/voice.tsx +39 -0
  686. package/dist/skill/reference/components/modal/COMPONENT.md +247 -0
  687. package/dist/skill/reference/components/modal/examples/controlled-open.tsx +33 -0
  688. package/dist/skill/reference/components/modal/examples/custom-container.tsx +29 -0
  689. package/dist/skill/reference/components/modal/examples/dismiss.tsx +54 -0
  690. package/dist/skill/reference/components/modal/examples/examples.module.css +21 -0
  691. package/dist/skill/reference/components/modal/examples/guard.tsx +87 -0
  692. package/dist/skill/reference/components/modal/examples/in-form.tsx +83 -0
  693. package/dist/skill/reference/components/modal/examples/long-content.tsx +52 -0
  694. package/dist/skill/reference/components/modal/examples/overview.tsx +35 -0
  695. package/dist/skill/reference/components/modal/examples/sizes.tsx +48 -0
  696. package/dist/skill/reference/components/modal/examples/structure.tsx +53 -0
  697. package/dist/skill/reference/components/native-select/COMPONENT.md +132 -0
  698. package/dist/skill/reference/components/native-select/examples/controlled.tsx +26 -0
  699. package/dist/skill/reference/components/native-select/examples/examples.module.css +16 -0
  700. package/dist/skill/reference/components/native-select/examples/in-form.tsx +58 -0
  701. package/dist/skill/reference/components/native-select/examples/option-groups.tsx +17 -0
  702. package/dist/skill/reference/components/native-select/examples/overview.tsx +16 -0
  703. package/dist/skill/reference/components/native-select/examples/sizes.tsx +18 -0
  704. package/dist/skill/reference/components/native-select/examples/states.tsx +21 -0
  705. package/dist/skill/reference/components/native-select/examples/validation.tsx +31 -0
  706. package/dist/skill/reference/components/notification/COMPONENT.md +193 -0
  707. package/dist/skill/reference/components/notification/examples/dismiss.tsx +50 -0
  708. package/dist/skill/reference/components/notification/examples/examples.module.css +52 -0
  709. package/dist/skill/reference/components/notification/examples/in-form.tsx +64 -0
  710. package/dist/skill/reference/components/notification/examples/overview.tsx +24 -0
  711. package/dist/skill/reference/components/notification/examples/placement.tsx +66 -0
  712. package/dist/skill/reference/components/notification/examples/sizes.tsx +22 -0
  713. package/dist/skill/reference/components/notification/examples/stacking.tsx +45 -0
  714. package/dist/skill/reference/components/notification/examples/structure.tsx +20 -0
  715. package/dist/skill/reference/components/notification/examples/tones.tsx +25 -0
  716. package/dist/skill/reference/components/notification/examples/undo.tsx +61 -0
  717. package/dist/skill/reference/components/page-content/COMPONENT.md +215 -0
  718. package/dist/skill/reference/components/page-content/examples/examples.module.css +76 -0
  719. package/dist/skill/reference/components/page-content/examples/list-detail.tsx +114 -0
  720. package/dist/skill/reference/components/page-content/examples/narrow.tsx +25 -0
  721. package/dist/skill/reference/components/page-content/examples/overview.tsx +41 -0
  722. package/dist/skill/reference/components/page-content/examples/variants.tsx +39 -0
  723. package/dist/skill/reference/components/page-toolbar/COMPONENT.md +141 -0
  724. package/dist/skill/reference/components/page-toolbar/examples/examples.module.css +16 -0
  725. package/dist/skill/reference/components/page-toolbar/examples/narrow.tsx +103 -0
  726. package/dist/skill/reference/components/page-toolbar/examples/overview.tsx +113 -0
  727. package/dist/skill/reference/components/page-toolbar/examples/save-changes.tsx +40 -0
  728. package/dist/skill/reference/components/page-toolbar/examples/without-search.tsx +60 -0
  729. package/dist/skill/reference/components/pagination/COMPONENT.md +132 -0
  730. package/dist/skill/reference/components/pagination/examples/controlled.tsx +51 -0
  731. package/dist/skill/reference/components/pagination/examples/examples.module.css +24 -0
  732. package/dist/skill/reference/components/pagination/examples/narrow.tsx +25 -0
  733. package/dist/skill/reference/components/pagination/examples/overflow.tsx +23 -0
  734. package/dist/skill/reference/components/pagination/examples/overview.tsx +6 -0
  735. package/dist/skill/reference/components/pagination/examples/sizes.tsx +19 -0
  736. package/dist/skill/reference/components/popover/COMPONENT.md +183 -0
  737. package/dist/skill/reference/components/popover/examples/controlled-open.tsx +32 -0
  738. package/dist/skill/reference/components/popover/examples/dismiss.tsx +49 -0
  739. package/dist/skill/reference/components/popover/examples/examples.module.css +49 -0
  740. package/dist/skill/reference/components/popover/examples/flush.tsx +47 -0
  741. package/dist/skill/reference/components/popover/examples/from-menu.tsx +56 -0
  742. package/dist/skill/reference/components/popover/examples/in-form.tsx +76 -0
  743. package/dist/skill/reference/components/popover/examples/match-trigger-width.tsx +23 -0
  744. package/dist/skill/reference/components/popover/examples/overview.tsx +43 -0
  745. package/dist/skill/reference/components/popover/examples/placement.tsx +34 -0
  746. package/dist/skill/reference/components/popover/examples/sizes.tsx +36 -0
  747. package/dist/skill/reference/components/popover/examples/structure.tsx +50 -0
  748. package/dist/skill/reference/components/progress-bar/COMPONENT.md +199 -0
  749. package/dist/skill/reference/components/progress-bar/examples/custom-max.tsx +12 -0
  750. package/dist/skill/reference/components/progress-bar/examples/examples.module.css +17 -0
  751. package/dist/skill/reference/components/progress-bar/examples/legend.tsx +28 -0
  752. package/dist/skill/reference/components/progress-bar/examples/milestone.tsx +43 -0
  753. package/dist/skill/reference/components/progress-bar/examples/overview.tsx +12 -0
  754. package/dist/skill/reference/components/progress-bar/examples/ranking.tsx +28 -0
  755. package/dist/skill/reference/components/progress-bar/examples/segments.tsx +32 -0
  756. package/dist/skill/reference/components/progress-bar/examples/sizes.tsx +19 -0
  757. package/dist/skill/reference/components/progress-bar/examples/states.tsx +43 -0
  758. package/dist/skill/reference/components/progress-bar/examples/steps.tsx +35 -0
  759. package/dist/skill/reference/components/progress-bar/examples/variants.tsx +34 -0
  760. package/dist/skill/reference/components/progress-circle/COMPONENT.md +189 -0
  761. package/dist/skill/reference/components/progress-circle/examples/examples.module.css +22 -0
  762. package/dist/skill/reference/components/progress-circle/examples/inner-content.tsx +35 -0
  763. package/dist/skill/reference/components/progress-circle/examples/legend.tsx +33 -0
  764. package/dist/skill/reference/components/progress-circle/examples/overview.tsx +10 -0
  765. package/dist/skill/reference/components/progress-circle/examples/segments.tsx +64 -0
  766. package/dist/skill/reference/components/progress-circle/examples/sizes.tsx +21 -0
  767. package/dist/skill/reference/components/progress-circle/examples/states.tsx +25 -0
  768. package/dist/skill/reference/components/progress-circle/examples/under-way.tsx +54 -0
  769. package/dist/skill/reference/components/progress-circle/examples/variants.tsx +28 -0
  770. package/dist/skill/reference/components/radio/COMPONENT.md +165 -0
  771. package/dist/skill/reference/components/radio/examples/controlled.tsx +30 -0
  772. package/dist/skill/reference/components/radio/examples/group.tsx +23 -0
  773. package/dist/skill/reference/components/radio/examples/orientation.tsx +34 -0
  774. package/dist/skill/reference/components/radio/examples/overview.tsx +18 -0
  775. package/dist/skill/reference/components/radio/examples/sizes.tsx +20 -0
  776. package/dist/skill/reference/components/radio/examples/states.tsx +48 -0
  777. package/dist/skill/reference/components/scroll-container/COMPONENT.md +179 -0
  778. package/dist/skill/reference/components/scroll-container/examples/auto-scroll.tsx +52 -0
  779. package/dist/skill/reference/components/scroll-container/examples/chat.tsx +101 -0
  780. package/dist/skill/reference/components/scroll-container/examples/edges.tsx +43 -0
  781. package/dist/skill/reference/components/scroll-container/examples/examples.module.css +139 -0
  782. package/dist/skill/reference/components/scroll-container/examples/lock.tsx +49 -0
  783. package/dist/skill/reference/components/scroll-container/examples/overscroll.tsx +27 -0
  784. package/dist/skill/reference/components/scroll-container/examples/overview.tsx +27 -0
  785. package/dist/skill/reference/components/scroll-container/examples/scrollbar.tsx +52 -0
  786. package/dist/skill/reference/components/scroll-container/examples/snap.tsx +36 -0
  787. package/dist/skill/reference/components/scroll-container/examples/variants.tsx +54 -0
  788. package/dist/skill/reference/components/segmented-control/COMPONENT.md +214 -0
  789. package/dist/skill/reference/components/segmented-control/examples/colors.tsx +18 -0
  790. package/dist/skill/reference/components/segmented-control/examples/controlled.tsx +28 -0
  791. package/dist/skill/reference/components/segmented-control/examples/examples.module.css +20 -0
  792. package/dist/skill/reference/components/segmented-control/examples/full-width.tsx +12 -0
  793. package/dist/skill/reference/components/segmented-control/examples/in-form.tsx +42 -0
  794. package/dist/skill/reference/components/segmented-control/examples/overview.tsx +12 -0
  795. package/dist/skill/reference/components/segmented-control/examples/scroll.tsx +16 -0
  796. package/dist/skill/reference/components/segmented-control/examples/sizes.tsx +22 -0
  797. package/dist/skill/reference/components/segmented-control/examples/states.tsx +47 -0
  798. package/dist/skill/reference/components/segmented-control/examples/two-line.tsx +28 -0
  799. package/dist/skill/reference/components/segmented-control/examples/with-icon.tsx +52 -0
  800. package/dist/skill/reference/components/select/COMPONENT.md +300 -0
  801. package/dist/skill/reference/components/select/examples/clearable.tsx +23 -0
  802. package/dist/skill/reference/components/select/examples/controlled-open.tsx +30 -0
  803. package/dist/skill/reference/components/select/examples/controlled.tsx +34 -0
  804. package/dist/skill/reference/components/select/examples/examples.module.css +35 -0
  805. package/dist/skill/reference/components/select/examples/in-form.tsx +88 -0
  806. package/dist/skill/reference/components/select/examples/load-error.tsx +45 -0
  807. package/dist/skill/reference/components/select/examples/multiple.tsx +26 -0
  808. package/dist/skill/reference/components/select/examples/overview.tsx +17 -0
  809. package/dist/skill/reference/components/select/examples/people.tsx +53 -0
  810. package/dist/skill/reference/components/select/examples/rich-options.tsx +72 -0
  811. package/dist/skill/reference/components/select/examples/searchable.tsx +42 -0
  812. package/dist/skill/reference/components/select/examples/server-search.tsx +93 -0
  813. package/dist/skill/reference/components/select/examples/sizes.tsx +23 -0
  814. package/dist/skill/reference/components/select/examples/states.tsx +67 -0
  815. package/dist/skill/reference/components/select/examples/validation.tsx +46 -0
  816. package/dist/skill/reference/components/select/examples/with-icon.tsx +35 -0
  817. package/dist/skill/reference/components/sheet/COMPONENT.md +216 -0
  818. package/dist/skill/reference/components/sheet/examples/controlled-open.tsx +37 -0
  819. package/dist/skill/reference/components/sheet/examples/dismiss.tsx +42 -0
  820. package/dist/skill/reference/components/sheet/examples/examples.module.css +13 -0
  821. package/dist/skill/reference/components/sheet/examples/in-form.tsx +65 -0
  822. package/dist/skill/reference/components/sheet/examples/overview.tsx +50 -0
  823. package/{src/components/drawer/examples/date-sheet.tsx → dist/skill/reference/components/sheet/examples/structure.tsx} +11 -17
  824. package/dist/skill/reference/components/skeleton/COMPONENT.md +104 -0
  825. package/dist/skill/reference/components/skeleton/examples/examples.module.css +89 -0
  826. package/dist/skill/reference/components/skeleton/examples/form.tsx +20 -0
  827. package/dist/skill/reference/components/skeleton/examples/overview.tsx +21 -0
  828. package/dist/skill/reference/components/skeleton/examples/sizes.tsx +24 -0
  829. package/dist/skill/reference/components/skeleton/examples/with-crossfade.tsx +68 -0
  830. package/dist/skill/reference/components/slider/COMPONENT.md +186 -0
  831. package/dist/skill/reference/components/slider/examples/autosave.tsx +39 -0
  832. package/dist/skill/reference/components/slider/examples/controlled.tsx +39 -0
  833. package/dist/skill/reference/components/slider/examples/examples.module.css +24 -0
  834. package/dist/skill/reference/components/slider/examples/hint-and-error.tsx +33 -0
  835. package/dist/skill/reference/components/slider/examples/orientation.tsx +27 -0
  836. package/dist/skill/reference/components/slider/examples/overview.tsx +6 -0
  837. package/dist/skill/reference/components/slider/examples/range-step.tsx +19 -0
  838. package/dist/skill/reference/components/slider/examples/sizes.tsx +18 -0
  839. package/dist/skill/reference/components/slider/examples/states.tsx +18 -0
  840. package/dist/skill/reference/components/slider/examples/value-format.tsx +32 -0
  841. package/dist/skill/reference/components/slider/examples/variants.tsx +23 -0
  842. package/dist/skill/reference/components/smart-filter/COMPONENT.md +235 -0
  843. package/dist/skill/reference/components/smart-filter/examples/controlled.tsx +48 -0
  844. package/dist/skill/reference/components/smart-filter/examples/examples.module.css +56 -0
  845. package/dist/skill/reference/components/smart-filter/examples/many-values.tsx +53 -0
  846. package/dist/skill/reference/components/smart-filter/examples/narrow.tsx +38 -0
  847. package/dist/skill/reference/components/smart-filter/examples/option-groups.tsx +40 -0
  848. package/dist/skill/reference/components/smart-filter/examples/overview.tsx +109 -0
  849. package/dist/skill/reference/components/smart-filter/examples/ranges.tsx +89 -0
  850. package/dist/skill/reference/components/smart-filter/examples/single-value.tsx +41 -0
  851. package/dist/skill/reference/components/smart-filter/examples/sizes.tsx +33 -0
  852. package/dist/skill/reference/components/sparkline/COMPONENT.md +127 -0
  853. package/dist/skill/reference/components/sparkline/examples/examples.module.css +13 -0
  854. package/dist/skill/reference/components/sparkline/examples/overview.tsx +27 -0
  855. package/dist/skill/reference/components/sparkline/examples/period.tsx +46 -0
  856. package/dist/skill/reference/components/sparkline/examples/signed-bars.tsx +41 -0
  857. package/dist/skill/reference/components/sparkline/examples/states.tsx +30 -0
  858. package/dist/skill/reference/components/sparkline/examples/variants.tsx +29 -0
  859. package/dist/skill/reference/components/spinner/COMPONENT.md +114 -0
  860. package/dist/skill/reference/components/spinner/examples/examples.module.css +20 -0
  861. package/dist/skill/reference/components/spinner/examples/loading-region.tsx +22 -0
  862. package/dist/skill/reference/components/spinner/examples/overview.tsx +15 -0
  863. package/dist/skill/reference/components/spinner/examples/sizes.tsx +19 -0
  864. package/dist/skill/reference/components/spinner/examples/variants.tsx +19 -0
  865. package/dist/skill/reference/components/stepper/COMPONENT.md +176 -0
  866. package/dist/skill/reference/components/stepper/examples/controlled.tsx +46 -0
  867. package/dist/skill/reference/components/stepper/examples/examples.module.css +24 -0
  868. package/dist/skill/reference/components/stepper/examples/narrow.tsx +23 -0
  869. package/dist/skill/reference/components/stepper/examples/orientation.tsx +35 -0
  870. package/dist/skill/reference/components/stepper/examples/overview.tsx +28 -0
  871. package/dist/skill/reference/components/stepper/examples/sizes.tsx +31 -0
  872. package/dist/skill/reference/components/stepper/examples/states.tsx +49 -0
  873. package/dist/skill/reference/components/stepper/examples/with-icon.tsx +29 -0
  874. package/dist/skill/reference/components/switch/COMPONENT.md +147 -0
  875. package/dist/skill/reference/components/switch/examples/controlled.tsx +17 -0
  876. package/dist/skill/reference/components/switch/examples/examples.module.css +30 -0
  877. package/dist/skill/reference/components/switch/examples/in-form.tsx +36 -0
  878. package/dist/skill/reference/components/switch/examples/overview.tsx +10 -0
  879. package/dist/skill/reference/components/switch/examples/saving.tsx +53 -0
  880. package/dist/skill/reference/components/switch/examples/settings-row.tsx +24 -0
  881. package/dist/skill/reference/components/switch/examples/sizes.tsx +18 -0
  882. package/dist/skill/reference/components/switch/examples/states.tsx +48 -0
  883. package/dist/skill/reference/components/tabs/COMPONENT.md +276 -0
  884. package/dist/skill/reference/components/tabs/examples/closable.tsx +48 -0
  885. package/dist/skill/reference/components/tabs/examples/controlled.tsx +33 -0
  886. package/dist/skill/reference/components/tabs/examples/examples.module.css +38 -0
  887. package/dist/skill/reference/components/tabs/examples/in-drawer.tsx +100 -0
  888. package/dist/skill/reference/components/tabs/examples/orientation.tsx +94 -0
  889. package/dist/skill/reference/components/tabs/examples/overflow.tsx +60 -0
  890. package/dist/skill/reference/components/tabs/examples/overview.tsx +30 -0
  891. package/dist/skill/reference/components/tabs/examples/sizes.tsx +30 -0
  892. package/dist/skill/reference/components/tabs/examples/states.tsx +26 -0
  893. package/dist/skill/reference/components/tabs/examples/two-line.tsx +56 -0
  894. package/dist/skill/reference/components/tabs/examples/variants.tsx +40 -0
  895. package/dist/skill/reference/components/tabs/examples/with-icon.tsx +44 -0
  896. package/dist/skill/reference/components/tag-select/COMPONENT.md +179 -0
  897. package/dist/skill/reference/components/tag-select/examples/confirm-delete.tsx +60 -0
  898. package/dist/skill/reference/components/tag-select/examples/controlled-open.tsx +29 -0
  899. package/dist/skill/reference/components/tag-select/examples/controlled.tsx +26 -0
  900. package/dist/skill/reference/components/tag-select/examples/creatable.tsx +49 -0
  901. package/dist/skill/reference/components/tag-select/examples/examples.module.css +16 -0
  902. package/dist/skill/reference/components/tag-select/examples/in-form.tsx +85 -0
  903. package/dist/skill/reference/components/tag-select/examples/manage-tags.tsx +38 -0
  904. package/dist/skill/reference/components/tag-select/examples/many-tags.tsx +20 -0
  905. package/dist/skill/reference/components/tag-select/examples/overview.tsx +21 -0
  906. package/dist/skill/reference/components/tag-select/examples/sizes.tsx +27 -0
  907. package/dist/skill/reference/components/tag-select/examples/states.tsx +24 -0
  908. package/dist/skill/reference/components/tag-select/examples/validation.tsx +40 -0
  909. package/dist/skill/reference/components/textarea/COMPONENT.md +206 -0
  910. package/dist/skill/reference/components/textarea/examples/auto-resize.tsx +28 -0
  911. package/dist/skill/reference/components/textarea/examples/controlled.tsx +21 -0
  912. package/dist/skill/reference/components/textarea/examples/edge-actions.tsx +24 -0
  913. package/dist/skill/reference/components/textarea/examples/examples.module.css +27 -0
  914. package/dist/skill/reference/components/textarea/examples/in-form.tsx +76 -0
  915. package/dist/skill/reference/components/textarea/examples/inline-edit.tsx +42 -0
  916. package/dist/skill/reference/components/textarea/examples/overview.tsx +12 -0
  917. package/dist/skill/reference/components/textarea/examples/sizes.tsx +20 -0
  918. package/dist/skill/reference/components/textarea/examples/states.tsx +21 -0
  919. package/dist/skill/reference/components/textarea/examples/validation.tsx +50 -0
  920. package/dist/skill/reference/components/textarea/examples/without-focus-ring.tsx +12 -0
  921. package/dist/skill/reference/components/thumbnail/COMPONENT.md +191 -0
  922. package/dist/skill/reference/components/thumbnail/examples/controlled.tsx +61 -0
  923. package/dist/skill/reference/components/thumbnail/examples/examples.module.css +76 -0
  924. package/dist/skill/reference/components/thumbnail/examples/full-width.tsx +45 -0
  925. package/dist/skill/reference/components/thumbnail/examples/overview.tsx +27 -0
  926. package/dist/skill/reference/components/thumbnail/examples/pressable.tsx +56 -0
  927. package/dist/skill/reference/components/thumbnail/examples/ratios.tsx +25 -0
  928. package/dist/skill/reference/components/thumbnail/examples/ring.tsx +29 -0
  929. package/dist/skill/reference/components/thumbnail/examples/sizes.tsx +23 -0
  930. package/dist/skill/reference/components/thumbnail/examples/states.tsx +38 -0
  931. package/dist/skill/reference/components/thumbnail/examples/variants.tsx +28 -0
  932. package/dist/skill/reference/components/thumbnail/examples/video.tsx +46 -0
  933. package/dist/skill/reference/components/timeline/COMPONENT.md +181 -0
  934. package/dist/skill/reference/components/timeline/examples/examples.module.css +25 -0
  935. package/dist/skill/reference/components/timeline/examples/links.tsx +28 -0
  936. package/dist/skill/reference/components/timeline/examples/narrow.tsx +41 -0
  937. package/dist/skill/reference/components/timeline/examples/overview.tsx +47 -0
  938. package/dist/skill/reference/components/timeline/examples/sizes.tsx +33 -0
  939. package/dist/skill/reference/components/timeline/examples/structure.tsx +56 -0
  940. package/dist/skill/reference/components/timeline/examples/variants.tsx +56 -0
  941. package/dist/skill/reference/components/tooltip/COMPONENT.md +167 -0
  942. package/dist/skill/reference/components/tooltip/examples/controlled-open.tsx +23 -0
  943. package/dist/skill/reference/components/tooltip/examples/delay.tsx +25 -0
  944. package/dist/skill/reference/components/tooltip/examples/disabled-trigger.tsx +13 -0
  945. package/dist/skill/reference/components/tooltip/examples/examples.module.css +20 -0
  946. package/dist/skill/reference/components/tooltip/examples/long-content.tsx +18 -0
  947. package/dist/skill/reference/components/tooltip/examples/non-interactive-trigger.tsx +31 -0
  948. package/dist/skill/reference/components/tooltip/examples/overview.tsx +17 -0
  949. package/dist/skill/reference/components/tooltip/examples/placement.tsx +30 -0
  950. package/dist/skill/reference/components/tooltip/examples/sizes.tsx +21 -0
  951. package/dist/skill/reference/components/tooltip/examples/toolbar.tsx +35 -0
  952. package/dist/skill/reference/components/typography/COMPONENT.md +126 -0
  953. package/dist/skill/reference/components/typography/examples/article.tsx +36 -0
  954. package/dist/skill/reference/components/typography/examples/examples.module.css +41 -0
  955. package/dist/skill/reference/components/typography/examples/inline-emphasis.tsx +20 -0
  956. package/dist/skill/reference/components/typography/examples/overview.tsx +20 -0
  957. package/dist/skill/reference/components/typography/examples/semantic-tag.tsx +17 -0
  958. package/dist/skill/reference/components/typography/examples/truncate.tsx +19 -0
  959. package/dist/skill/reference/components/typography/examples/variants.tsx +50 -0
  960. package/dist/skill/reference/components/typography/examples/weights.tsx +31 -0
  961. package/dist/skill/reference/components/video-note/COMPONENT.md +173 -0
  962. package/dist/skill/reference/components/video-note/examples/controlled.tsx +28 -0
  963. package/dist/skill/reference/components/video-note/examples/examples.module.css +4 -0
  964. package/dist/skill/reference/components/video-note/examples/in-message.tsx +22 -0
  965. package/dist/skill/reference/components/video-note/examples/overview.tsx +8 -0
  966. package/dist/skill/reference/components/video-note/examples/states.tsx +74 -0
  967. package/dist/skill/reference/components/video-note/examples/transcript.tsx +29 -0
  968. package/dist/skill/reference/components/video-note/examples/transfer.tsx +76 -0
  969. package/dist/skill/reference/components/visually-hidden/COMPONENT.md +81 -0
  970. package/dist/skill/reference/components/visually-hidden/examples/overview.tsx +22 -0
  971. package/dist/skill/reference/components/voice-player/COMPONENT.md +192 -0
  972. package/dist/skill/reference/components/voice-player/examples/call-recording.tsx +34 -0
  973. package/dist/skill/reference/components/voice-player/examples/controlled.tsx +38 -0
  974. package/dist/skill/reference/components/voice-player/examples/examples.module.css +23 -0
  975. package/dist/skill/reference/components/voice-player/examples/in-message.tsx +29 -0
  976. package/dist/skill/reference/components/voice-player/examples/overview.tsx +13 -0
  977. package/dist/skill/reference/components/voice-player/examples/states.tsx +81 -0
  978. package/dist/skill/reference/components/voice-player/examples/transcript.tsx +50 -0
  979. package/dist/skill/reference/components/voice-player/examples/transfer.tsx +88 -0
  980. package/dist/skill/reference/icon-set.ts +530 -0
  981. package/dist/skill/reference/layout/app-header/COMPONENT.md +203 -0
  982. package/dist/skill/reference/layout/app-header/examples/breadcrumbs.tsx +36 -0
  983. package/dist/skill/reference/layout/app-header/examples/examples.module.css +47 -0
  984. package/dist/skill/reference/layout/app-header/examples/in-app-shell.tsx +70 -0
  985. package/dist/skill/reference/layout/app-header/examples/narrow.tsx +29 -0
  986. package/dist/skill/reference/layout/app-header/examples/overview.tsx +36 -0
  987. package/dist/skill/reference/layout/app-header/examples/page-title.tsx +85 -0
  988. package/dist/skill/reference/layout/app-shell/COMPONENT.md +156 -0
  989. package/dist/skill/reference/layout/app-shell/examples/contained.tsx +30 -0
  990. package/dist/skill/reference/layout/app-shell/examples/examples.module.css +44 -0
  991. package/dist/skill/reference/layout/app-shell/examples/footer.tsx +59 -0
  992. package/dist/skill/reference/layout/app-shell/examples/overview.tsx +83 -0
  993. package/dist/skill/reference/layout/app-shell/examples/template.tsx +54 -0
  994. package/dist/skill/reference/layout/bottom-nav/COMPONENT.md +169 -0
  995. package/dist/skill/reference/layout/bottom-nav/examples/examples.module.css +46 -0
  996. package/dist/skill/reference/layout/bottom-nav/examples/floating-action.tsx +91 -0
  997. package/dist/skill/reference/layout/bottom-nav/examples/floating.tsx +89 -0
  998. package/dist/skill/reference/layout/bottom-nav/examples/icon-only.tsx +41 -0
  999. package/dist/skill/reference/layout/bottom-nav/examples/in-app-shell.tsx +64 -0
  1000. package/dist/skill/reference/layout/bottom-nav/examples/overview.tsx +44 -0
  1001. package/dist/skill/reference/layout/bottom-nav/examples/router.tsx +31 -0
  1002. package/dist/skill/reference/layout/bottom-nav/examples/structure.tsx +47 -0
  1003. package/dist/skill/reference/layout/sidebar/COMPONENT.md +402 -0
  1004. package/dist/skill/reference/layout/sidebar/examples/account.tsx +88 -0
  1005. package/dist/skill/reference/layout/sidebar/examples/brand-header.tsx +45 -0
  1006. package/dist/skill/reference/layout/sidebar/examples/collapsible-groups.tsx +77 -0
  1007. package/dist/skill/reference/layout/sidebar/examples/controlled-open.tsx +55 -0
  1008. package/dist/skill/reference/layout/sidebar/examples/controlled.tsx +68 -0
  1009. package/dist/skill/reference/layout/sidebar/examples/examples.module.css +64 -0
  1010. package/dist/skill/reference/layout/sidebar/examples/nested-items.tsx +74 -0
  1011. package/dist/skill/reference/layout/sidebar/examples/overview.tsx +126 -0
  1012. package/dist/skill/reference/layout/sidebar/examples/router.tsx +33 -0
  1013. package/dist/skill/reference/layout/sidebar/examples/sizes.tsx +39 -0
  1014. package/dist/skill/reference/layout/sidebar/examples/structure.tsx +81 -0
  1015. package/dist/skill/responsive.md +274 -0
  1016. package/dist/theme/chartColors.d.ts +20 -0
  1017. package/dist/tokens/primitives.d.ts +30 -0
  1018. package/dist/tokens/semantic.d.ts +188 -18
  1019. package/dist/tokens/themes/dark.d.ts +41 -2
  1020. package/package.json +14 -10
  1021. package/src/components/accordion/COMPONENT.md +1 -1
  1022. package/src/components/avatar/COMPONENT.md +5 -3
  1023. package/src/components/avatar/examples/presence.tsx +17 -2
  1024. package/src/components/avatar/examples/team-group.tsx +27 -7
  1025. package/src/components/badge/COMPONENT.md +17 -6
  1026. package/src/components/badge/examples/server-tags.tsx +61 -0
  1027. package/src/components/badge/examples/states.tsx +9 -1
  1028. package/src/components/banner/COMPONENT.md +1 -1
  1029. package/src/components/breadcrumb/COMPONENT.md +2 -2
  1030. package/src/components/button/COMPONENT.md +40 -14
  1031. package/src/components/button/examples/circle.tsx +67 -0
  1032. package/src/components/button/examples/examples.module.css +22 -0
  1033. package/src/components/button/examples/hold-to-confirm.tsx +13 -2
  1034. package/src/components/button/examples/over-media.tsx +36 -0
  1035. package/src/components/button/examples/toggle.tsx +21 -0
  1036. package/src/components/button-group/COMPONENT.md +30 -13
  1037. package/src/components/button-group/examples/in-form.tsx +42 -7
  1038. package/src/components/card/COMPONENT.md +37 -13
  1039. package/src/components/card/examples/interactive.tsx +28 -0
  1040. package/src/components/card/examples/panel-chart.tsx +2 -1
  1041. package/src/components/card/examples/variants.tsx +3 -1
  1042. package/src/components/chart-frame/COMPONENT.md +265 -0
  1043. package/src/components/chart-frame/examples/controlled.tsx +92 -0
  1044. package/src/components/chart-frame/examples/examples.module.css +6 -0
  1045. package/src/components/chart-frame/examples/narrow.tsx +46 -0
  1046. package/src/components/chart-frame/examples/overview.tsx +127 -0
  1047. package/src/components/chart-frame/examples/states.tsx +78 -0
  1048. package/src/components/chart-frame/examples/tooltip.tsx +158 -0
  1049. package/src/components/chat/COMPONENT.md +336 -0
  1050. package/src/components/chat/examples/controlled.tsx +68 -0
  1051. package/src/components/chat/examples/examples.module.css +38 -0
  1052. package/src/components/chat/examples/group-chat.tsx +130 -0
  1053. package/src/components/chat/examples/live.tsx +89 -0
  1054. package/src/components/chat/examples/narrow.tsx +46 -0
  1055. package/src/components/chat/examples/overview.tsx +839 -0
  1056. package/src/components/chat/examples/search.tsx +61 -0
  1057. package/src/components/chat/examples/structure.tsx +28 -0
  1058. package/src/components/checkbox/COMPONENT.md +14 -3
  1059. package/src/components/checkbox/examples/variants.tsx +30 -0
  1060. package/src/components/color-field/COMPONENT.md +163 -0
  1061. package/src/components/color-field/examples/controlled.tsx +33 -0
  1062. package/src/components/color-field/examples/examples.module.css +22 -0
  1063. package/src/components/color-field/examples/in-form.tsx +45 -0
  1064. package/src/components/color-field/examples/overview.tsx +6 -0
  1065. package/src/components/color-field/examples/presets.tsx +20 -0
  1066. package/src/components/color-field/examples/sizes.tsx +14 -0
  1067. package/src/components/color-field/examples/states.tsx +12 -0
  1068. package/src/components/color-field/examples/validation.tsx +29 -0
  1069. package/src/components/color-picker/COMPONENT.md +26 -16
  1070. package/src/components/color-picker/examples/overview.tsx +1 -1
  1071. package/src/components/color-picker/examples/presets-sizes.tsx +3 -1
  1072. package/src/components/color-picker/examples/presets.tsx +5 -3
  1073. package/src/components/color-swatches/COMPONENT.md +13 -12
  1074. package/src/components/color-swatches/examples/sizes.tsx +1 -1
  1075. package/src/components/color-swatches/examples/wrapping.tsx +1 -1
  1076. package/src/components/command-menu/COMPONENT.md +46 -17
  1077. package/src/components/command-menu/examples/controlled.tsx +3 -3
  1078. package/src/components/command-menu/examples/load-error.tsx +65 -0
  1079. package/src/components/command-menu/examples/server-search.tsx +91 -0
  1080. package/src/components/composer/COMPONENT.md +310 -0
  1081. package/src/components/composer/examples/attachments.tsx +36 -0
  1082. package/src/components/composer/examples/controlled.tsx +46 -0
  1083. package/src/components/composer/examples/examples.module.css +30 -0
  1084. package/src/components/composer/examples/formatting.tsx +15 -0
  1085. package/src/components/composer/examples/narrow.tsx +22 -0
  1086. package/src/components/composer/examples/overview.tsx +39 -0
  1087. package/src/components/composer/examples/reply-edit.tsx +68 -0
  1088. package/src/components/composer/examples/sizes.tsx +23 -0
  1089. package/src/components/composer/examples/states.tsx +31 -0
  1090. package/src/components/composer/examples/typing.tsx +24 -0
  1091. package/src/components/composer/examples/voice.tsx +21 -0
  1092. package/src/components/confirm-dialog/COMPONENT.md +124 -0
  1093. package/src/components/confirm-dialog/examples/controlled-open.tsx +35 -0
  1094. package/src/components/confirm-dialog/examples/failure.tsx +37 -0
  1095. package/src/components/confirm-dialog/examples/overview.tsx +24 -0
  1096. package/src/components/confirm-dialog/examples/variants.tsx +44 -0
  1097. package/src/components/crossfade/COMPONENT.md +16 -2
  1098. package/src/components/crossfade/examples/examples.module.css +28 -0
  1099. package/src/components/crossfade/examples/fill.tsx +79 -0
  1100. package/src/components/data-table/COMPONENT.md +136 -29
  1101. package/src/components/data-table/examples/columns-visibility.tsx +26 -42
  1102. package/src/components/data-table/examples/examples.module.css +9 -0
  1103. package/src/components/data-table/examples/fill-height.tsx +55 -0
  1104. package/src/components/data-table/examples/groups.tsx +73 -0
  1105. package/src/components/data-table/examples/heatmap.tsx +44 -0
  1106. package/src/components/data-table/examples/reorder.tsx +61 -0
  1107. package/src/components/data-table/examples/row-link.tsx +100 -0
  1108. package/src/components/data-table/examples/row-open.tsx +129 -0
  1109. package/src/components/data-table/examples/server.tsx +181 -0
  1110. package/src/components/datepicker/COMPONENT.md +14 -10
  1111. package/src/components/datepicker/examples/in-form.tsx +12 -3
  1112. package/src/components/datepicker/examples/inline-panel.tsx +9 -3
  1113. package/src/components/description-list/COMPONENT.md +132 -0
  1114. package/src/components/description-list/examples/examples.module.css +41 -0
  1115. package/src/components/description-list/examples/narrow.tsx +20 -0
  1116. package/src/components/description-list/examples/overview.tsx +35 -0
  1117. package/src/components/description-list/examples/sizes.tsx +24 -0
  1118. package/src/components/description-list/examples/structure.tsx +29 -0
  1119. package/src/components/description-list/examples/vertical.tsx +21 -0
  1120. package/src/components/digit-input/COMPONENT.md +12 -6
  1121. package/src/components/digit-input/examples/on-complete.tsx +19 -7
  1122. package/src/components/divider/COMPONENT.md +1 -1
  1123. package/src/components/dnd/COMPONENT.md +93 -30
  1124. package/src/components/dnd/examples/board.tsx +16 -8
  1125. package/src/components/dnd/examples/drop-zones.tsx +2 -2
  1126. package/src/components/dnd/examples/examples.module.css +23 -0
  1127. package/src/components/dnd/examples/grid.tsx +48 -0
  1128. package/src/components/dnd/examples/handle.tsx +7 -2
  1129. package/src/components/dnd/examples/locked.tsx +57 -0
  1130. package/src/components/dnd/examples/narrow.tsx +1 -1
  1131. package/src/components/drawer/COMPONENT.md +66 -33
  1132. package/src/components/drawer/examples/controlled-open.tsx +8 -1
  1133. package/src/components/drawer/examples/examples.module.css +0 -5
  1134. package/src/components/drawer/examples/guard.tsx +80 -0
  1135. package/src/components/drawer/examples/header-actions.tsx +63 -0
  1136. package/src/components/drawer/examples/overview.tsx +9 -1
  1137. package/src/components/drawer/examples/placement.tsx +9 -4
  1138. package/src/components/drawer/examples/sizes.tsx +7 -0
  1139. package/src/components/dropdown/COMPONENT.md +35 -17
  1140. package/src/components/dropdown/examples/item-description.tsx +30 -0
  1141. package/src/components/dropdown/examples/link-items.tsx +29 -0
  1142. package/src/components/dropdown/examples/overview.tsx +1 -1
  1143. package/src/components/dropdown/examples/structure.tsx +1 -1
  1144. package/src/components/empty-page/COMPONENT.md +44 -16
  1145. package/src/components/empty-page/examples/examples.module.css +19 -2
  1146. package/src/components/empty-page/examples/region-error.tsx +86 -0
  1147. package/src/components/empty-page/examples/variants.tsx +43 -0
  1148. package/src/components/example-frame/COMPONENT.md +3 -2
  1149. package/src/components/fieldset/COMPONENT.md +107 -0
  1150. package/src/components/fieldset/examples/examples.module.css +14 -0
  1151. package/src/components/fieldset/examples/in-form.tsx +59 -0
  1152. package/src/components/fieldset/examples/overview.tsx +22 -0
  1153. package/src/components/fieldset/examples/states.tsx +35 -0
  1154. package/src/components/file-upload/COMPONENT.md +254 -62
  1155. package/src/components/file-upload/examples/attachment-tray.tsx +99 -0
  1156. package/src/components/file-upload/examples/controlled.tsx +77 -0
  1157. package/src/components/file-upload/examples/examples.module.css +38 -7
  1158. package/src/components/file-upload/examples/file-cards.tsx +64 -0
  1159. package/src/components/file-upload/examples/gallery.tsx +104 -0
  1160. package/src/components/file-upload/examples/in-form.tsx +33 -54
  1161. package/src/components/file-upload/examples/narrow.tsx +64 -8
  1162. package/src/components/file-upload/examples/overview.tsx +34 -37
  1163. package/src/components/file-upload/examples/row-parts.tsx +41 -0
  1164. package/src/components/file-upload/examples/saving.tsx +71 -0
  1165. package/src/components/file-upload/examples/sizes.tsx +13 -14
  1166. package/src/components/file-upload/examples/states.tsx +12 -3
  1167. package/src/components/file-upload/examples/validation.tsx +17 -25
  1168. package/src/components/file-upload/examples/variants.tsx +21 -2
  1169. package/src/components/gallery/COMPONENT.md +151 -0
  1170. package/src/components/gallery/examples/controlled-open.tsx +39 -0
  1171. package/src/components/gallery/examples/examples.module.css +14 -0
  1172. package/src/components/gallery/examples/overview.tsx +52 -0
  1173. package/src/components/gallery/examples/transfer.tsx +45 -0
  1174. package/src/components/gantt/COMPONENT.md +224 -0
  1175. package/src/components/gantt/examples/controlled.tsx +72 -0
  1176. package/src/components/gantt/examples/examples.module.css +30 -0
  1177. package/src/components/gantt/examples/large.tsx +96 -0
  1178. package/src/components/gantt/examples/narrow.tsx +54 -0
  1179. package/src/components/gantt/examples/occupancy.tsx +149 -0
  1180. package/src/components/gantt/examples/overview.tsx +82 -0
  1181. package/src/components/gantt/examples/sizes.tsx +48 -0
  1182. package/src/components/gantt/examples/states.tsx +68 -0
  1183. package/src/components/gantt/examples/variants.tsx +82 -0
  1184. package/src/components/hint/COMPONENT.md +3 -3
  1185. package/src/components/hint/examples/overview.tsx +10 -22
  1186. package/src/components/input/COMPONENT.md +69 -13
  1187. package/src/components/input/examples/edge-actions.tsx +30 -0
  1188. package/src/components/input/examples/inline-edit.tsx +52 -0
  1189. package/src/components/input/examples/password-strength.tsx +2 -1
  1190. package/src/components/kanban/COMPONENT.md +94 -36
  1191. package/src/components/kanban/examples/cards.tsx +152 -0
  1192. package/src/components/kanban/examples/columns.tsx +182 -0
  1193. package/src/components/kanban/examples/examples.module.css +6 -0
  1194. package/src/components/kanban/examples/limits.tsx +5 -3
  1195. package/src/components/kanban/examples/saving.tsx +83 -0
  1196. package/src/components/kanban/examples/variants.tsx +57 -0
  1197. package/src/components/label/COMPONENT.md +4 -4
  1198. package/src/components/label/examples/overview.tsx +11 -8
  1199. package/src/components/link-button/COMPONENT.md +3 -1
  1200. package/src/components/login-form/COMPONENT.md +4 -3
  1201. package/src/components/login-form/examples/overview.tsx +2 -2
  1202. package/src/components/login-form/examples/register.tsx +2 -7
  1203. package/src/components/login-form/examples/states.tsx +18 -22
  1204. package/src/components/media-viewer/COMPONENT.md +207 -0
  1205. package/src/components/media-viewer/examples/actions.tsx +86 -0
  1206. package/src/components/media-viewer/examples/controlled-open.tsx +30 -0
  1207. package/src/components/media-viewer/examples/controlled.tsx +54 -0
  1208. package/src/components/media-viewer/examples/dismiss.tsx +34 -0
  1209. package/src/components/media-viewer/examples/examples.module.css +16 -0
  1210. package/src/components/media-viewer/examples/origin.tsx +60 -0
  1211. package/src/components/media-viewer/examples/overview.tsx +75 -0
  1212. package/src/components/media-viewer/examples/thumbnails.tsx +49 -0
  1213. package/src/components/media-viewer/examples/video.tsx +55 -0
  1214. package/src/components/message/COMPONENT.md +444 -0
  1215. package/src/components/message/examples/author.tsx +74 -0
  1216. package/src/components/message/examples/contact.tsx +24 -0
  1217. package/src/components/message/examples/context-menu.tsx +71 -0
  1218. package/src/components/message/examples/examples.module.css +18 -0
  1219. package/src/components/message/examples/file.tsx +79 -0
  1220. package/src/components/message/examples/kinds.tsx +93 -0
  1221. package/src/components/message/examples/link-preview.tsx +17 -0
  1222. package/src/components/message/examples/location.tsx +30 -0
  1223. package/src/components/message/examples/media.tsx +93 -0
  1224. package/src/components/message/examples/narrow.tsx +29 -0
  1225. package/src/components/message/examples/overview.tsx +52 -0
  1226. package/src/components/message/examples/reactions.tsx +73 -0
  1227. package/src/components/message/examples/status.tsx +45 -0
  1228. package/src/components/message/examples/structure.tsx +32 -0
  1229. package/src/components/message/examples/text-formatting.tsx +27 -0
  1230. package/src/components/message/examples/typing.tsx +22 -0
  1231. package/src/components/message/examples/voice.tsx +39 -0
  1232. package/src/components/modal/COMPONENT.md +51 -20
  1233. package/src/components/modal/examples/guard.tsx +87 -0
  1234. package/src/components/modal/examples/sizes.tsx +2 -1
  1235. package/src/components/native-select/COMPONENT.md +1 -1
  1236. package/src/components/notification/COMPONENT.md +4 -1
  1237. package/src/components/notification/examples/examples.module.css +11 -1
  1238. package/src/components/notification/examples/undo.tsx +61 -0
  1239. package/src/components/page-content/COMPONENT.md +78 -11
  1240. package/src/components/page-content/examples/examples.module.css +54 -0
  1241. package/src/components/page-content/examples/list-detail.tsx +114 -0
  1242. package/src/components/page-content/examples/variants.tsx +1 -1
  1243. package/src/components/page-toolbar/COMPONENT.md +21 -22
  1244. package/src/components/page-toolbar/examples/narrow.tsx +4 -4
  1245. package/src/components/page-toolbar/examples/overview.tsx +4 -4
  1246. package/src/components/pagination/COMPONENT.md +1 -1
  1247. package/src/components/popover/COMPONENT.md +15 -7
  1248. package/src/components/popover/examples/examples.module.css +5 -0
  1249. package/src/components/popover/examples/from-menu.tsx +56 -0
  1250. package/src/components/progress-bar/COMPONENT.md +57 -13
  1251. package/src/components/progress-bar/examples/legend.tsx +28 -0
  1252. package/src/components/progress-bar/examples/ranking.tsx +28 -0
  1253. package/src/components/progress-bar/examples/states.tsx +43 -0
  1254. package/src/components/progress-circle/COMPONENT.md +70 -27
  1255. package/src/components/progress-circle/examples/examples.module.css +5 -0
  1256. package/src/components/progress-circle/examples/legend.tsx +33 -0
  1257. package/src/components/progress-circle/examples/states.tsx +25 -0
  1258. package/src/components/progress-circle/examples/under-way.tsx +54 -0
  1259. package/src/components/radio/COMPONENT.md +3 -3
  1260. package/src/components/scroll-container/COMPONENT.md +85 -24
  1261. package/src/components/scroll-container/examples/auto-scroll.tsx +52 -0
  1262. package/src/components/scroll-container/examples/chat.tsx +101 -0
  1263. package/src/components/scroll-container/examples/edges.tsx +43 -0
  1264. package/src/components/scroll-container/examples/examples.module.css +73 -0
  1265. package/src/components/scroll-container/examples/lock.tsx +49 -0
  1266. package/src/components/scroll-container/examples/scrollbar.tsx +52 -0
  1267. package/src/components/scroll-container/examples/snap.tsx +36 -0
  1268. package/src/components/segmented-control/COMPONENT.md +32 -13
  1269. package/src/components/segmented-control/examples/examples.module.css +11 -0
  1270. package/src/components/segmented-control/examples/in-form.tsx +42 -0
  1271. package/src/components/select/COMPONENT.md +89 -21
  1272. package/src/components/select/examples/load-error.tsx +45 -0
  1273. package/src/components/select/examples/people.tsx +53 -0
  1274. package/src/components/select/examples/server-search.tsx +93 -0
  1275. package/src/components/sheet/COMPONENT.md +216 -0
  1276. package/src/components/sheet/examples/controlled-open.tsx +37 -0
  1277. package/src/components/sheet/examples/dismiss.tsx +42 -0
  1278. package/src/components/sheet/examples/examples.module.css +13 -0
  1279. package/src/components/sheet/examples/in-form.tsx +65 -0
  1280. package/src/components/sheet/examples/overview.tsx +50 -0
  1281. package/src/components/sheet/examples/structure.tsx +35 -0
  1282. package/src/components/skeleton/COMPONENT.md +1 -1
  1283. package/src/components/slider/COMPONENT.md +21 -4
  1284. package/src/components/slider/examples/autosave.tsx +39 -0
  1285. package/src/components/slider/examples/examples.module.css +6 -0
  1286. package/src/components/slider/examples/orientation.tsx +27 -0
  1287. package/src/components/smart-filter/COMPONENT.md +67 -16
  1288. package/src/components/smart-filter/examples/option-groups.tsx +40 -0
  1289. package/src/components/smart-filter/examples/ranges.tsx +89 -0
  1290. package/src/components/smart-filter/examples/single-value.tsx +41 -0
  1291. package/src/components/sparkline/COMPONENT.md +48 -19
  1292. package/src/components/sparkline/examples/signed-bars.tsx +41 -0
  1293. package/src/components/sparkline/examples/states.tsx +30 -0
  1294. package/src/components/sparkline/examples/variants.tsx +29 -0
  1295. package/src/components/spinner/COMPONENT.md +10 -8
  1296. package/src/components/stepper/COMPONENT.md +4 -0
  1297. package/src/components/switch/COMPONENT.md +11 -5
  1298. package/src/components/switch/examples/in-form.tsx +3 -1
  1299. package/src/components/switch/examples/saving.tsx +53 -0
  1300. package/src/components/switch/examples/states.tsx +6 -1
  1301. package/src/components/tabs/COMPONENT.md +46 -26
  1302. package/src/components/tabs/examples/examples.module.css +6 -0
  1303. package/src/components/tabs/examples/in-drawer.tsx +100 -0
  1304. package/src/components/tabs/examples/overview.tsx +1 -1
  1305. package/src/components/tag-select/COMPONENT.md +34 -21
  1306. package/src/components/tag-select/examples/confirm-delete.tsx +60 -0
  1307. package/src/components/tag-select/examples/creatable.tsx +23 -2
  1308. package/src/components/tag-select/examples/in-form.tsx +9 -2
  1309. package/src/components/tag-select/examples/manage-tags.tsx +10 -6
  1310. package/src/components/textarea/COMPONENT.md +57 -10
  1311. package/src/components/textarea/examples/auto-resize.tsx +8 -1
  1312. package/src/components/textarea/examples/edge-actions.tsx +24 -0
  1313. package/src/components/textarea/examples/inline-edit.tsx +42 -0
  1314. package/src/components/thumbnail/COMPONENT.md +51 -10
  1315. package/src/components/thumbnail/examples/controlled.tsx +61 -0
  1316. package/src/components/thumbnail/examples/examples.module.css +31 -0
  1317. package/src/components/thumbnail/examples/full-width.tsx +2 -5
  1318. package/src/components/thumbnail/examples/overview.tsx +2 -6
  1319. package/src/components/thumbnail/examples/pressable.tsx +56 -0
  1320. package/src/components/thumbnail/examples/video.tsx +46 -0
  1321. package/src/components/timeline/COMPONENT.md +2 -1
  1322. package/src/components/tooltip/COMPONENT.md +13 -7
  1323. package/src/components/tooltip/examples/disabled-trigger.tsx +2 -7
  1324. package/src/components/tooltip/examples/examples.module.css +6 -9
  1325. package/src/components/tooltip/examples/non-interactive-trigger.tsx +31 -0
  1326. package/src/components/typography/COMPONENT.md +2 -0
  1327. package/src/components/video-note/COMPONENT.md +173 -0
  1328. package/src/components/video-note/examples/controlled.tsx +28 -0
  1329. package/src/components/video-note/examples/examples.module.css +4 -0
  1330. package/src/components/video-note/examples/in-message.tsx +22 -0
  1331. package/src/components/video-note/examples/overview.tsx +8 -0
  1332. package/src/components/video-note/examples/states.tsx +74 -0
  1333. package/src/components/video-note/examples/transcript.tsx +29 -0
  1334. package/src/components/video-note/examples/transfer.tsx +76 -0
  1335. package/src/components/visually-hidden/COMPONENT.md +81 -0
  1336. package/src/components/visually-hidden/examples/overview.tsx +22 -0
  1337. package/src/components/voice-player/COMPONENT.md +192 -0
  1338. package/src/components/voice-player/examples/call-recording.tsx +34 -0
  1339. package/src/components/voice-player/examples/controlled.tsx +38 -0
  1340. package/src/components/voice-player/examples/examples.module.css +23 -0
  1341. package/src/components/voice-player/examples/in-message.tsx +29 -0
  1342. package/src/components/voice-player/examples/overview.tsx +13 -0
  1343. package/src/components/voice-player/examples/states.tsx +81 -0
  1344. package/src/components/voice-player/examples/transcript.tsx +50 -0
  1345. package/src/components/voice-player/examples/transfer.tsx +88 -0
  1346. package/src/layout/app-header/COMPONENT.md +35 -10
  1347. package/src/layout/app-header/examples/page-title.tsx +85 -0
  1348. package/src/layout/app-shell/COMPONENT.md +11 -5
  1349. package/src/layout/app-shell/examples/examples.module.css +1 -1
  1350. package/src/layout/app-shell/examples/footer.tsx +1 -1
  1351. package/src/layout/bottom-nav/COMPONENT.md +50 -34
  1352. package/src/layout/bottom-nav/examples/examples.module.css +8 -1
  1353. package/src/layout/bottom-nav/examples/floating-action.tsx +91 -0
  1354. package/src/layout/bottom-nav/examples/floating.tsx +6 -6
  1355. package/src/layout/bottom-nav/examples/in-app-shell.tsx +1 -1
  1356. package/src/layout/sidebar/COMPONENT.md +18 -13
  1357. package/src/layout/sidebar/examples/account.tsx +1 -1
  1358. package/src/layout/sidebar/examples/overview.tsx +1 -1
  1359. package/src/styles/controls.css +138 -0
  1360. package/src/styles/globals.css +8 -0
  1361. package/src/styles/reset.css +34 -30
  1362. package/src/styles/theme-dark.css +30 -2
  1363. package/src/styles/theme-light.css +72 -6
  1364. package/src/styles/tokens.css +17 -0
  1365. package/dist/chunks/chunk-4TRNUP45.js +0 -4052
  1366. package/dist/chunks/chunk-GFKDZFQR.js +0 -1208
  1367. package/dist/chunks/chunk-K4FACFQ2.js +0 -13552
  1368. package/dist/components/dnd/autoScroll.d.ts +0 -5
  1369. package/src/components/file-upload/examples/upload-progress.tsx +0 -39
  1370. package/src/components/scroll-container/examples/edge-fade.tsx +0 -53
@@ -1,4052 +0,0 @@
1
- import {
2
- Activity,
3
- ArrowDown,
4
- ArrowUp,
5
- ArrowUpDown,
6
- Bell,
7
- Bold,
8
- BookOpen,
9
- Calendar,
10
- ChartColumn,
11
- Check,
12
- ChevronDown,
13
- ChevronLeft,
14
- ChevronRight,
15
- ChevronUp,
16
- ChevronsLeft,
17
- ChevronsUpDown,
18
- Circle,
19
- CircleCheck,
20
- CircleX,
21
- CloudOff,
22
- CloudUpload,
23
- CodeXml,
24
- ControlSizeProvider,
25
- Copy,
26
- Download,
27
- Ellipsis,
28
- ExternalLink,
29
- Eye,
30
- EyeOff,
31
- FileText,
32
- GripVertical,
33
- HardDrive,
34
- House,
35
- Image,
36
- Inbox,
37
- Info,
38
- Italic,
39
- KeyRound,
40
- LayoutDashboard,
41
- LayoutGrid,
42
- Link2,
43
- List,
44
- ListFilter,
45
- ListTodo,
46
- Lock,
47
- LogIn,
48
- LogOut,
49
- Mail,
50
- MailCheck,
51
- Menu,
52
- MessageSquare,
53
- Minus,
54
- Monitor,
55
- Moon,
56
- Package,
57
- PanelLeftClose,
58
- PanelLeftOpen,
59
- Pipette,
60
- Plus,
61
- Receipt,
62
- RefreshCw,
63
- Rocket,
64
- Search,
65
- Send,
66
- Settings,
67
- ShoppingCart,
68
- Smartphone,
69
- Sun,
70
- Tablet,
71
- Trash2,
72
- TriangleAlert,
73
- Truck,
74
- Underline,
75
- UserRound,
76
- Users,
77
- Wallet,
78
- X,
79
- cx,
80
- iconBoxClass,
81
- textTone_default,
82
- useControlSize,
83
- useIconRoot,
84
- useOptionalControlSize
85
- } from "./chunk-GFKDZFQR.js";
86
-
87
- // src/components/spinner/Spinner.tsx
88
- import * as React from "react";
89
-
90
- // src/internal/data-attributes.ts
91
- function toDataAttributes(input) {
92
- const result = {};
93
- for (const [key, value] of Object.entries(input)) {
94
- if (value === void 0) {
95
- continue;
96
- }
97
- const attributeName = `data-${key}`;
98
- result[attributeName] = typeof value === "boolean" ? String(value) : `${value}`;
99
- }
100
- return result;
101
- }
102
-
103
- // src/internal/VisuallyHidden.module.css
104
- var VisuallyHidden_default = {
105
- root: "VisuallyHidden_root"
106
- };
107
-
108
- // src/internal/VisuallyHidden.tsx
109
- import { jsx } from "react/jsx-runtime";
110
- var visuallyHiddenClass = VisuallyHidden_default.root;
111
- function VisuallyHidden({ className, ...rest }) {
112
- return /* @__PURE__ */ jsx("span", { className: cx(VisuallyHidden_default.root, className), ...rest });
113
- }
114
-
115
- // src/components/spinner/Spinner.module.css
116
- var Spinner_default = {
117
- root: "Spinner_root",
118
- ring: "Spinner_ring",
119
- primeSpinnerTurn: "Spinner_primeSpinnerTurn"
120
- };
121
-
122
- // src/components/spinner/Spinner.tsx
123
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
124
- var SPINNER_LABELS = {
125
- loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"
126
- };
127
- function Spinner({
128
- size: sizeProp,
129
- tone = "default",
130
- labels: labelsProp,
131
- className,
132
- ...rest
133
- }) {
134
- const controlSize = useOptionalControlSize();
135
- const labels = React.useMemo(() => ({ ...SPINNER_LABELS, ...labelsProp }), [labelsProp]);
136
- const size = sizeProp ?? controlSize ?? "m";
137
- return /* @__PURE__ */ jsxs(
138
- "span",
139
- {
140
- role: "status",
141
- className: cx(Spinner_default.root, iconBoxClass(sizeProp, controlSize), textTone_default.tone, className),
142
- ...toDataAttributes({ size, tone: tone === "default" ? void 0 : tone }),
143
- ...rest,
144
- children: [
145
- /* @__PURE__ */ jsx2("span", { className: Spinner_default.ring, "aria-hidden": "true" }),
146
- /* @__PURE__ */ jsx2(VisuallyHidden, { children: labels.loading })
147
- ]
148
- }
149
- );
150
- }
151
-
152
- // src/components/button/Button.tsx
153
- import * as React7 from "react";
154
-
155
- // src/internal/fieldSurface.module.css
156
- var fieldSurface_default = {
157
- surface: "fieldSurface_surface"
158
- };
159
-
160
- // src/internal/fieldTier.module.css
161
- var fieldTier_default = {
162
- tier: "fieldTier_tier"
163
- };
164
-
165
- // src/internal/fieldTrigger.module.css
166
- var fieldTrigger_default = {
167
- trigger: "fieldTrigger_trigger"
168
- };
169
-
170
- // src/internal/fieldClasses.ts
171
- var fieldSurfaceClass = fieldSurface_default.surface;
172
- var fieldTierClass = fieldTier_default.tier;
173
- var fieldTriggerClass = `${fieldTier_default.tier} ${fieldSurface_default.surface} ${fieldTrigger_default.trigger}`;
174
-
175
- // src/internal/iconLayout.ts
176
- import * as React2 from "react";
177
- function iconLayout(children, iconType) {
178
- const content = React2.Children.toArray(children).filter(
179
- (child) => !(typeof child === "string" && child.trim() === "")
180
- );
181
- const isIcon = (child) => React2.isValidElement(child) && child.type === iconType;
182
- const iconOnly = content.length > 0 && content.every(isIcon);
183
- return {
184
- iconOnly,
185
- leadingIcon: !iconOnly && content.length > 0 && isIcon(content[0]),
186
- trailingIcon: !iconOnly && content.length > 0 && isIcon(content[content.length - 1])
187
- };
188
- }
189
-
190
- // src/internal/MorphText.tsx
191
- import * as React4 from "react";
192
-
193
- // src/hooks/usePresence.ts
194
- import * as React3 from "react";
195
- var DURATION_FALLBACK_MS = {
196
- fast: 230,
197
- base: 380,
198
- slow: 570
199
- };
200
- var TIMEOUT_SLACK_MS = 50;
201
- function prefersReducedMotion() {
202
- return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
203
- }
204
- function parseDurationMs(raw) {
205
- const value = raw.trim();
206
- if (value === "") return null;
207
- const n = Number.parseFloat(value);
208
- if (Number.isNaN(n)) return null;
209
- if (value.endsWith("ms")) return n;
210
- if (value.endsWith("s")) return n * 1e3;
211
- return null;
212
- }
213
- function motionDurationMs(token) {
214
- if (typeof document === "undefined") return DURATION_FALLBACK_MS[token];
215
- const raw = getComputedStyle(document.documentElement).getPropertyValue(
216
- `--prime-motion-duration-${token}`
217
- );
218
- return parseDurationMs(raw) ?? DURATION_FALLBACK_MS[token];
219
- }
220
- function exitTimeoutMs(token) {
221
- return motionDurationMs(token) + TIMEOUT_SLACK_MS;
222
- }
223
- function usePresence(open, options = {}) {
224
- const { exitDuration = "base" } = options;
225
- const [mounted, setMounted] = React3.useState(open);
226
- if (open && !mounted) setMounted(true);
227
- if (!open && mounted && prefersReducedMotion()) setMounted(false);
228
- const openRef = React3.useRef(open);
229
- openRef.current = open;
230
- React3.useEffect(() => {
231
- if (open || !mounted) return;
232
- const id = window.setTimeout(() => setMounted(false), exitTimeoutMs(exitDuration));
233
- return () => window.clearTimeout(id);
234
- }, [open, mounted, exitDuration]);
235
- const onExitEnd = React3.useCallback((event) => {
236
- if (event.target !== event.currentTarget) return;
237
- if (!openRef.current) setMounted(false);
238
- }, []);
239
- return { mounted: open || mounted, state: open ? "open" : "closed", onExitEnd };
240
- }
241
-
242
- // src/internal/MorphText.module.css
243
- var MorphText_default = {
244
- root: "MorphText_root",
245
- morphing: "MorphText_morphing",
246
- sizer: "MorphText_sizer",
247
- layer: "MorphText_layer",
248
- letter: "MorphText_letter",
249
- letterOut: "MorphText_letterOut",
250
- primeMorphOut: "MorphText_primeMorphOut",
251
- letterIn: "MorphText_letterIn",
252
- primeMorphIn: "MorphText_primeMorphIn"
253
- };
254
-
255
- // src/internal/MorphText.tsx
256
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
257
- function digitsOnly(a, b) {
258
- return a.replace(/\d/g, "") === b.replace(/\d/g, "");
259
- }
260
- function letters(text, kind) {
261
- return [...text].map((char, i) => /* @__PURE__ */ jsx3(
262
- "span",
263
- {
264
- className: cx(MorphText_default.letter, kind === "in" ? MorphText_default.letterIn : MorphText_default.letterOut),
265
- style: { "--morph-i": i },
266
- children: char
267
- },
268
- i
269
- ));
270
- }
271
- function settleMs(text, root) {
272
- const css = getComputedStyle(root);
273
- const read = (name) => Number.parseFloat(css.getPropertyValue(name)) || 0;
274
- const base = read("--prime-motion-duration-base");
275
- const step = read("--prime-motion-stagger") / 6;
276
- return base + step * text.length + 50;
277
- }
278
- function MorphText({ children: text, className }) {
279
- const rootRef = React4.useRef(null);
280
- const sizerRef = React4.useRef(null);
281
- const prevText = React4.useRef(null);
282
- const restWidth = React4.useRef(0);
283
- const nextId = React4.useRef(0);
284
- const [morph, setMorph] = React4.useState(null);
285
- const morphRef = React4.useRef(morph);
286
- morphRef.current = morph;
287
- React4.useLayoutEffect(() => {
288
- const root = rootRef.current;
289
- const prev = prevText.current;
290
- prevText.current = text;
291
- if (!root || prev === null || prev === text) return;
292
- if (prefersReducedMotion() || digitsOnly(prev, text)) {
293
- setMorph(null);
294
- return;
295
- }
296
- const running = morphRef.current;
297
- const width = running ? root.getBoundingClientRect().width : restWidth.current;
298
- nextId.current += 1;
299
- setMorph({ id: nextId.current, from: running ? running.to : prev, to: text, width });
300
- }, [text]);
301
- React4.useLayoutEffect(() => {
302
- if (!morph) return;
303
- const root = rootRef.current;
304
- const sizer = sizerRef.current;
305
- if (!root || !sizer) return;
306
- const target = sizer.getBoundingClientRect().width;
307
- if (target !== morph.width) {
308
- root.style.width = `${morph.width}px`;
309
- root.getBoundingClientRect();
310
- root.style.width = `${target}px`;
311
- }
312
- const timer = window.setTimeout(() => setMorph(null), settleMs(morph.to, root));
313
- return () => window.clearTimeout(timer);
314
- }, [morph]);
315
- React4.useLayoutEffect(() => {
316
- if (morph || !rootRef.current) return;
317
- rootRef.current.style.width = "";
318
- restWidth.current = rootRef.current.getBoundingClientRect().width;
319
- });
320
- if (!morph) {
321
- return /* @__PURE__ */ jsx3("span", { ref: rootRef, className: cx(MorphText_default.root, className), children: text });
322
- }
323
- return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: cx(MorphText_default.root, MorphText_default.morphing, className), children: [
324
- /* @__PURE__ */ jsx3("span", { ref: sizerRef, className: MorphText_default.sizer, "aria-hidden": "true", children: morph.to }),
325
- /* @__PURE__ */ jsx3("span", { className: MorphText_default.layer, "aria-hidden": "true", children: letters(morph.from, "out") }, `out-${morph.id}`),
326
- /* @__PURE__ */ jsx3("span", { className: MorphText_default.layer, "aria-hidden": "true", children: letters(morph.to, "in") }, `in-${morph.id}`),
327
- /* @__PURE__ */ jsx3(VisuallyHidden, { children: morph.to })
328
- ] });
329
- }
330
-
331
- // src/internal/slot.tsx
332
- import * as React6 from "react";
333
-
334
- // src/hooks/useMergedRefs.ts
335
- import * as React5 from "react";
336
-
337
- // src/internal/mergeRefs.ts
338
- function mergeRefs(...refs) {
339
- return (value) => {
340
- for (const ref of refs) {
341
- if (ref == null) continue;
342
- if (typeof ref === "function") {
343
- ref(value);
344
- } else {
345
- ref.current = value;
346
- }
347
- }
348
- };
349
- }
350
-
351
- // src/hooks/useMergedRefs.ts
352
- function useMergedRefs(...refs) {
353
- return React5.useMemo(() => mergeRefs(...refs), refs);
354
- }
355
-
356
- // src/internal/slot.tsx
357
- import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
358
- var isPrevented = (event) => typeof event === "object" && event !== null && event.defaultPrevented === true;
359
- function mergeProps(slotProps, childProps) {
360
- const merged = { ...slotProps };
361
- for (const key of Object.keys(childProps)) {
362
- const slotValue = slotProps[key];
363
- const childValue = childProps[key];
364
- if (key === "ref") continue;
365
- if (key === "className") {
366
- if (typeof childValue === "function" && typeof slotValue === "string") {
367
- const slotClass = slotValue;
368
- merged[key] = (...args) => {
369
- const resolved = childValue(...args);
370
- return [slotClass, resolved].filter(Boolean).join(" ") || void 0;
371
- };
372
- } else {
373
- const parts = [slotValue, childValue].filter(Boolean);
374
- merged[key] = parts.length > 0 ? parts.join(" ") : void 0;
375
- }
376
- } else if (key === "style") {
377
- merged[key] = slotValue != null && childValue != null ? { ...slotValue, ...childValue } : childValue ?? slotValue;
378
- } else if (key === "aria-describedby" && slotValue && childValue) {
379
- merged[key] = `${childValue} ${slotValue}`;
380
- } else if (key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function") {
381
- merged[key] = (...args) => {
382
- childValue(...args);
383
- if (!isPrevented(args[0])) slotValue(...args);
384
- };
385
- } else if (childValue !== void 0) {
386
- merged[key] = childValue;
387
- }
388
- }
389
- return merged;
390
- }
391
- function blockDisabledClick(event) {
392
- event.preventDefault();
393
- event.stopPropagation();
394
- }
395
- function Slot({ children, ref, ...slotProps }) {
396
- const child = React6.isValidElement(children) ? children : null;
397
- const childRef = child?.props.ref ?? void 0;
398
- const composedRef = useMergedRefs(ref, childRef);
399
- if (!child) return /* @__PURE__ */ jsx4(Fragment, { children });
400
- const merged = mergeProps(slotProps, child.props);
401
- const disabled = slotProps["aria-disabled"] === true || slotProps["aria-disabled"] === "true";
402
- if (disabled) merged.onClickCapture = blockDisabledClick;
403
- return React6.cloneElement(child, { ...merged, ref: composedRef });
404
- }
405
- Slot.displayName = "Slot";
406
-
407
- // src/internal/touchTarget.module.css
408
- var touchTarget_default = {
409
- target: "touchTarget_target",
410
- targetBlock: "touchTarget_targetBlock"
411
- };
412
-
413
- // src/internal/touchTarget.ts
414
- var touchTargetClass = touchTarget_default.target;
415
- var touchTargetBlockClass = touchTarget_default.targetBlock;
416
-
417
- // src/components/button/Button.module.css
418
- var Button_default = {
419
- root: "Button_root",
420
- icon: "Button_icon",
421
- spinner: "Button_spinner",
422
- fillTrack: "Button_fillTrack",
423
- fill: "Button_fill"
424
- };
425
-
426
- // src/components/button/Button.tsx
427
- import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
428
- var BUTTON_LABELS = { holdHint: "\u0423\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" };
429
- var HOLD_MS = 1200;
430
- function useHoldToConfirm(enabled, onConfirm) {
431
- const [phase, setPhase] = React7.useState("idle");
432
- const timer = React7.useRef(void 0);
433
- const confirm = React7.useRef(onConfirm);
434
- confirm.current = onConfirm;
435
- React7.useEffect(() => () => window.clearTimeout(timer.current), []);
436
- const start = () => {
437
- if (!enabled || phase === "holding" || phase === "done") return;
438
- setPhase("holding");
439
- timer.current = window.setTimeout(() => {
440
- setPhase("done");
441
- confirm.current?.();
442
- }, HOLD_MS);
443
- };
444
- const stop = () => {
445
- window.clearTimeout(timer.current);
446
- setPhase(
447
- (current) => current === "holding" ? "cancel" : current === "done" ? "idle" : current
448
- );
449
- };
450
- return { phase, start, stop };
451
- }
452
- function morphLabels(children) {
453
- const out = [];
454
- let run = null;
455
- const flush = () => {
456
- if (run !== null && run !== "") {
457
- out.push(/* @__PURE__ */ jsx5(MorphText, { children: run }, `label-${out.length}`));
458
- }
459
- run = null;
460
- };
461
- for (const child of React7.Children.toArray(children)) {
462
- if (typeof child === "string" || typeof child === "number") {
463
- run = (run ?? "") + String(child);
464
- } else {
465
- flush();
466
- out.push(child);
467
- }
468
- }
469
- flush();
470
- return out;
471
- }
472
- function ButtonRoot({
473
- children,
474
- className,
475
- variant = "solid",
476
- tone = "accent",
477
- size: sizeProp,
478
- fullWidth,
479
- type = "button",
480
- loading = false,
481
- progress,
482
- holdToConfirm = false,
483
- onConfirm,
484
- labels,
485
- disabled,
486
- asChild = false,
487
- onClick: onClick2,
488
- ref,
489
- ...rest
490
- }) {
491
- const size = useControlSize(sizeProp);
492
- const isDisabled = disabled || loading;
493
- const layout = iconLayout(children, ButtonIcon);
494
- const hold = useHoldToConfirm(holdToConfirm && !isDisabled, onConfirm);
495
- const hintId = React7.useId();
496
- const inProgress = progress !== void 0;
497
- const [fillUsed, setFillUsed] = React7.useState(false);
498
- if ((inProgress || holdToConfirm) && !fillUsed) setFillUsed(true);
499
- const dataAttrs = toDataAttributes({
500
- variant,
501
- tone,
502
- size,
503
- // `disabled` only: a loading button is busy, not unavailable, and keeps its colors.
504
- disabled: disabled || void 0,
505
- loading,
506
- "full-width": fullWidth,
507
- "icon-only": layout.iconOnly || void 0,
508
- "leading-icon": layout.leadingIcon || void 0,
509
- "trailing-icon": layout.trailingIcon || void 0,
510
- // Without a leading icon the spinner is centered over the hidden label: width stays put.
511
- "loading-overlay": loading && !asChild && !layout.leadingIcon && !layout.iconOnly || void 0,
512
- progress: inProgress || void 0,
513
- hold: holdToConfirm ? hold.phase : void 0
514
- });
515
- const classes = cx(fieldTierClass, touchTargetClass, Button_default.root, className);
516
- if (asChild) {
517
- return /* @__PURE__ */ jsx5(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx5(
518
- Slot,
519
- {
520
- ...rest,
521
- ref,
522
- className: classes,
523
- "aria-disabled": isDisabled || void 0,
524
- "aria-busy": loading || void 0,
525
- onClick: isDisabled ? (event) => event.preventDefault() : onClick2,
526
- ...dataAttrs,
527
- children
528
- }
529
- ) });
530
- }
531
- const {
532
- onPointerDown: onPointerDown2,
533
- onPointerUp,
534
- onPointerLeave,
535
- onPointerCancel,
536
- onKeyDown: onKeyDown2,
537
- onKeyUp,
538
- onBlur
539
- } = rest;
540
- const holdHandlers = holdToConfirm ? {
541
- onPointerDown: (event) => {
542
- onPointerDown2?.(event);
543
- if (event.button === 0) hold.start();
544
- },
545
- onPointerUp: (event) => {
546
- onPointerUp?.(event);
547
- hold.stop();
548
- },
549
- onPointerLeave: (event) => {
550
- onPointerLeave?.(event);
551
- hold.stop();
552
- },
553
- onPointerCancel: (event) => {
554
- onPointerCancel?.(event);
555
- hold.stop();
556
- },
557
- onKeyDown: (event) => {
558
- onKeyDown2?.(event);
559
- if ((event.key === " " || event.key === "Enter") && !event.repeat) {
560
- event.preventDefault();
561
- hold.start();
562
- }
563
- },
564
- onKeyUp: (event) => {
565
- onKeyUp?.(event);
566
- if (event.key === " " || event.key === "Enter") hold.stop();
567
- },
568
- onBlur: (event) => {
569
- onBlur?.(event);
570
- hold.stop();
571
- },
572
- onContextMenu: (event) => {
573
- rest.onContextMenu?.(event);
574
- if (hold.phase === "holding" || hold.phase === "done") event.preventDefault();
575
- }
576
- } : null;
577
- const describedBy = holdToConfirm ? cx(rest["aria-describedby"], hintId) || void 0 : rest["aria-describedby"];
578
- const button = /* @__PURE__ */ jsxs3(
579
- "button",
580
- {
581
- ...rest,
582
- ...holdHandlers,
583
- ref,
584
- type,
585
- className: classes,
586
- disabled: isDisabled,
587
- "aria-busy": loading || inProgress || void 0,
588
- "aria-describedby": describedBy,
589
- onClick: onClick2,
590
- style: inProgress || holdToConfirm ? {
591
- ...rest.style,
592
- "--btn-progress": inProgress ? Math.min(1, Math.max(0, progress)) : void 0,
593
- "--btn-hold-duration": holdToConfirm ? `${HOLD_MS}ms` : void 0
594
- } : rest.style,
595
- ...dataAttrs,
596
- children: [
597
- fillUsed ? /* @__PURE__ */ jsx5("span", { className: Button_default.fillTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: Button_default.fill }) }) : null,
598
- /* @__PURE__ */ jsxs3(ControlSizeProvider, { value: size, children: [
599
- loading ? /* @__PURE__ */ jsx5(Spinner, { className: Button_default.spinner, "aria-hidden": "true" }) : null,
600
- morphLabels(children)
601
- ] })
602
- ]
603
- }
604
- );
605
- if (!holdToConfirm) return button;
606
- return /* @__PURE__ */ jsxs3(Fragment2, { children: [
607
- button,
608
- /* @__PURE__ */ jsx5(VisuallyHidden, { id: hintId, children: { ...BUTTON_LABELS, ...labels }.holdHint })
609
- ] });
610
- }
611
- ButtonRoot.displayName = "Button.Root";
612
- function ButtonIcon({ children, className, ...rest }) {
613
- return /* @__PURE__ */ jsx5("span", { className: cx(Button_default.icon, className), "aria-hidden": "true", ...rest, children });
614
- }
615
- ButtonIcon.displayName = "Button.Icon";
616
- var Button = { Root: ButtonRoot, Icon: ButtonIcon };
617
-
618
- // src/components/divider/Divider.module.css
619
- var Divider_default = {
620
- root: "Divider_root",
621
- content: "Divider_content"
622
- };
623
-
624
- // src/components/divider/Divider.tsx
625
- import { jsx as jsx6 } from "react/jsx-runtime";
626
- function Divider({
627
- orientation = "horizontal",
628
- align = "center",
629
- size = "m",
630
- children,
631
- className,
632
- role = "separator",
633
- ...rest
634
- }) {
635
- return /* @__PURE__ */ jsx6(
636
- "div",
637
- {
638
- ...rest,
639
- className: cx(Divider_default.root, className),
640
- role,
641
- ...orientation === "vertical" ? { "aria-orientation": "vertical" } : {},
642
- ...toDataAttributes({ orientation, align, size }),
643
- children: children != null ? /* @__PURE__ */ jsx6(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx6("span", { className: Divider_default.content, children }) }) : null
644
- }
645
- );
646
- }
647
-
648
- // src/icons/registry.ts
649
- var iconRegistry = {
650
- "nav.chevronDown": ChevronDown,
651
- "nav.chevronLeft": ChevronLeft,
652
- "nav.chevronRight": ChevronRight,
653
- "nav.chevronUp": ChevronUp,
654
- "nav.chevronsLeft": ChevronsLeft,
655
- "nav.chevronsUpDown": ChevronsUpDown,
656
- "nav.dashboard": LayoutDashboard,
657
- "nav.home": House,
658
- "nav.itemDot": Circle,
659
- "nav.layoutGrid": LayoutGrid,
660
- "nav.menu": Menu,
661
- "nav.sidebarCollapse": PanelLeftClose,
662
- "nav.sidebarExpand": PanelLeftOpen,
663
- "action.add": Plus,
664
- "action.check": Check,
665
- "action.close": X,
666
- "action.copy": Copy,
667
- "action.delete": Trash2,
668
- "action.download": Download,
669
- "action.drag": GripVertical,
670
- "action.externalLink": ExternalLink,
671
- "action.eyedropper": Pipette,
672
- "action.filter": ListFilter,
673
- "action.login": LogIn,
674
- "action.logout": LogOut,
675
- "action.more": Ellipsis,
676
- "action.refresh": RefreshCw,
677
- "action.remove": Minus,
678
- "action.search": Search,
679
- "action.send": Send,
680
- "action.settings": Settings,
681
- "action.upload": CloudUpload,
682
- "field.calendar": Calendar,
683
- "field.email": Mail,
684
- "field.password.show": Eye,
685
- "field.password.hide": EyeOff,
686
- "format.bold": Bold,
687
- "format.italic": Italic,
688
- "format.link": Link2,
689
- "format.list": List,
690
- "format.underline": Underline,
691
- "object.activity": Activity,
692
- "object.bell": Bell,
693
- "object.book": BookOpen,
694
- "object.cart": ShoppingCart,
695
- "object.chart": ChartColumn,
696
- "object.document": FileText,
697
- "object.image": Image,
698
- "object.inbox": Inbox,
699
- "object.key": KeyRound,
700
- "object.message": MessageSquare,
701
- "object.package": Package,
702
- "object.receipt": Receipt,
703
- "object.rocket": Rocket,
704
- "object.storage": HardDrive,
705
- "object.tasks": ListTodo,
706
- "object.truck": Truck,
707
- "object.user": UserRound,
708
- "object.users": Users,
709
- "object.wallet": Wallet,
710
- "sort.ascending": ArrowUp,
711
- "sort.descending": ArrowDown,
712
- "sort.none": ArrowUpDown,
713
- "status.danger": CircleX,
714
- "status.emailSent": MailCheck,
715
- "status.info": Info,
716
- "status.locked": Lock,
717
- "status.offline": CloudOff,
718
- "status.success": CircleCheck,
719
- /** A rising trend; a falling one is the same arrow turned half a turn (it rotates between them). */
720
- "status.trendUp": ArrowUp,
721
- "status.warning": TriangleAlert,
722
- "theme.dark": Moon,
723
- "theme.light": Sun,
724
- "view.code": CodeXml,
725
- "view.preview": Eye,
726
- "viewport.desktop": Monitor,
727
- "viewport.mobile": Smartphone,
728
- "viewport.tablet": Tablet
729
- };
730
-
731
- // src/icons/Icon.tsx
732
- import { jsx as jsx7 } from "react/jsx-runtime";
733
- function Icon({ name, ...rest }) {
734
- const Glyph = iconRegistry[name];
735
- return /* @__PURE__ */ jsx7(Glyph, { ...rest });
736
- }
737
- function createIcon(glyph) {
738
- const LucideGlyph = glyph;
739
- function DomainIcon({
740
- className,
741
- size,
742
- tone,
743
- animated,
744
- strokeWidth = 1.75,
745
- ...rest
746
- }) {
747
- const root = useIconRoot({ className, size, tone, animated, motion: "generic" });
748
- return /* @__PURE__ */ jsx7(
749
- LucideGlyph,
750
- {
751
- strokeWidth,
752
- "aria-hidden": "true",
753
- ...root,
754
- ...rest
755
- }
756
- );
757
- }
758
- DomainIcon.displayName = `Icon(${glyph.displayName ?? "Glyph"})`;
759
- return DomainIcon;
760
- }
761
-
762
- // src/components/scroll-container/ScrollContainer.tsx
763
- import * as React9 from "react";
764
-
765
- // src/hooks/useEdgeOverflow.ts
766
- import * as React8 from "react";
767
- var NONE = { start: false, end: false };
768
- function useEdgeOverflow(ref, enabled, horizontal) {
769
- const [overflow, setOverflow] = React8.useState(NONE);
770
- React8.useLayoutEffect(() => {
771
- const node = ref.current;
772
- if (!enabled || !node) return;
773
- const update = () => {
774
- const position = horizontal ? Math.abs(node.scrollLeft) : node.scrollTop;
775
- const max = horizontal ? node.scrollWidth - node.clientWidth : node.scrollHeight - node.clientHeight;
776
- const start = position > 1;
777
- const end = max - position > 1;
778
- node.style.setProperty("--edge-start", `${Math.max(0, position)}px`);
779
- node.style.setProperty("--edge-end", `${Math.max(0, max - position)}px`);
780
- setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
781
- };
782
- let frame = 0;
783
- const schedule = () => {
784
- if (frame) return;
785
- frame = requestAnimationFrame(() => {
786
- frame = 0;
787
- update();
788
- });
789
- };
790
- update();
791
- node.addEventListener("scroll", schedule, { passive: true });
792
- const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
793
- const observeChildren = () => {
794
- for (const child of Array.from(node.children)) resize?.observe(child);
795
- };
796
- resize?.observe(node);
797
- observeChildren();
798
- const mutation = new MutationObserver(() => {
799
- observeChildren();
800
- schedule();
801
- });
802
- mutation.observe(node, { childList: true });
803
- return () => {
804
- cancelAnimationFrame(frame);
805
- node.removeEventListener("scroll", schedule);
806
- resize?.disconnect();
807
- mutation.disconnect();
808
- };
809
- }, [ref, enabled, horizontal]);
810
- return enabled ? overflow : NONE;
811
- }
812
-
813
- // src/components/scroll-container/ScrollContainer.module.css
814
- var ScrollContainer_default = {
815
- root: "ScrollContainer_root",
816
- vertical: "ScrollContainer_vertical",
817
- horizontal: "ScrollContainer_horizontal",
818
- both: "ScrollContainer_both",
819
- overscrollContain: "ScrollContainer_overscrollContain",
820
- overscrollNone: "ScrollContainer_overscrollNone",
821
- scrollbarHidden: "ScrollContainer_scrollbarHidden"
822
- };
823
-
824
- // src/components/scroll-container/ScrollContainer.tsx
825
- import { jsx as jsx8 } from "react/jsx-runtime";
826
- var axisClass = {
827
- vertical: ScrollContainer_default.vertical,
828
- horizontal: ScrollContainer_default.horizontal,
829
- both: ScrollContainer_default.both
830
- };
831
- function ScrollContainer({
832
- as: Component = "div",
833
- axis = "vertical",
834
- overscrollBehavior = "contain",
835
- fade = false,
836
- scrollbar = "thin",
837
- className,
838
- ref,
839
- ...rest
840
- }) {
841
- const innerRef = React9.useRef(null);
842
- const mergedRef = useMergedRefs(innerRef, ref);
843
- const horizontal = axis === "horizontal";
844
- const overflow = useEdgeOverflow(innerRef, fade, horizontal);
845
- return /* @__PURE__ */ jsx8(
846
- Component,
847
- {
848
- ref: mergedRef,
849
- className: cx(
850
- ScrollContainer_default.root,
851
- axisClass[axis],
852
- overscrollBehavior === "contain" && ScrollContainer_default.overscrollContain,
853
- overscrollBehavior === "none" && ScrollContainer_default.overscrollNone,
854
- scrollbar === "hidden" && ScrollContainer_default.scrollbarHidden,
855
- className
856
- ),
857
- ...toDataAttributes({
858
- fade: fade ? horizontal ? "horizontal" : "vertical" : void 0,
859
- "overflow-start": overflow.start || void 0,
860
- "overflow-end": overflow.end || void 0
861
- }),
862
- ...rest
863
- }
864
- );
865
- }
866
-
867
- // src/internal/states.ts
868
- var controlSizes = ["xs", "s", "m", "l", "xl"];
869
- function stepDown(size, n = 1) {
870
- return controlSizes[Math.max(0, controlSizes.indexOf(size) - n)] ?? "xs";
871
- }
872
- var variants = ["solid", "soft", "outline", "ghost"];
873
- var tones = ["neutral", "accent", "success", "warning", "danger", "info"];
874
- var paletteColors = [
875
- "gray",
876
- "blue",
877
- "green",
878
- "orange",
879
- "red",
880
- "yellow",
881
- "purple",
882
- "sky",
883
- "pink",
884
- "teal"
885
- ];
886
- var dataStates = [
887
- "open",
888
- "closed",
889
- "checked",
890
- "unchecked",
891
- "indeterminate",
892
- "active",
893
- "inactive"
894
- ];
895
- var textTones = [
896
- "default",
897
- "secondary",
898
- "muted",
899
- "accent",
900
- "success",
901
- "warning",
902
- "danger"
903
- ];
904
-
905
- // src/internal/enterMotion.module.css
906
- var enterMotion_default = {
907
- enter: "enterMotion_enter",
908
- primeEnter: "enterMotion_primeEnter",
909
- enterBase: "enterMotion_enterBase",
910
- enterBaseChildren: "enterMotion_enterBaseChildren"
911
- };
912
-
913
- // src/components/hint/Hint.module.css
914
- var Hint_default = {
915
- root: "Hint_root",
916
- icon: "Hint_icon"
917
- };
918
-
919
- // src/components/hint/Hint.tsx
920
- import { jsx as jsx9 } from "react/jsx-runtime";
921
- function HintRoot({ className, size = "m", invalid, disabled, children, ...rest }) {
922
- return /* @__PURE__ */ jsx9(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx9(
923
- "p",
924
- {
925
- ...rest,
926
- className: cx(Hint_default.root, invalid && enterMotion_default.enter, className),
927
- ...toDataAttributes({
928
- size,
929
- invalid: invalid || void 0,
930
- disabled: disabled || void 0
931
- }),
932
- children
933
- }
934
- ) });
935
- }
936
- HintRoot.displayName = "Hint.Root";
937
- function HintIcon({ className, ...rest }) {
938
- return /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: cx(Hint_default.icon, className), ...rest });
939
- }
940
- HintIcon.displayName = "Hint.Icon";
941
- var Hint = { Root: HintRoot, Icon: HintIcon };
942
-
943
- // src/components/label/Label.module.css
944
- var Label_default = {
945
- root: "Label_root",
946
- icon: "Label_icon",
947
- asterisk: "Label_asterisk",
948
- description: "Label_description",
949
- optional: "Label_optional"
950
- };
951
-
952
- // src/components/label/Label.tsx
953
- import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
954
- var LABEL_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
955
- function LabelRoot({
956
- className,
957
- disabled,
958
- children,
959
- size: sizeProp,
960
- required,
961
- optional,
962
- labels,
963
- ref,
964
- ...rest
965
- }) {
966
- const size = useControlSize(sizeProp);
967
- return (
968
- // biome-ignore lint/a11y/noLabelWithoutControl: field label primitive; association via htmlFor or wrapping control is caller responsibility
969
- /* @__PURE__ */ jsx10(
970
- "label",
971
- {
972
- ref,
973
- className: cx(Label_default.root, className),
974
- "aria-disabled": disabled || void 0,
975
- ...rest,
976
- ...toDataAttributes({ disabled: disabled || void 0, size }),
977
- children: /* @__PURE__ */ jsxs4(ControlSizeProvider, { value: size, children: [
978
- children,
979
- required ? /* @__PURE__ */ jsx10("span", { className: Label_default.asterisk, "aria-hidden": "true", children: "*" }) : null,
980
- optional ? /* @__PURE__ */ jsx10("span", { className: Label_default.optional, children: labels?.optional ?? LABEL_LABELS.optional }) : null
981
- ] })
982
- }
983
- )
984
- );
985
- }
986
- LabelRoot.displayName = "Label.Root";
987
- function LabelIcon({ className, ...rest }) {
988
- return /* @__PURE__ */ jsx10("span", { className: cx(Label_default.icon, className), "aria-hidden": "true", ...rest });
989
- }
990
- LabelIcon.displayName = "Label.Icon";
991
- function LabelDescription({ className, ...rest }) {
992
- return /* @__PURE__ */ jsx10("span", { className: cx(Label_default.description, className), ...rest });
993
- }
994
- LabelDescription.displayName = "Label.Description";
995
- var Label = {
996
- Root: LabelRoot,
997
- Icon: LabelIcon,
998
- Description: LabelDescription
999
- };
1000
-
1001
- // src/components/checkbox/Checkbox.tsx
1002
- import * as React12 from "react";
1003
-
1004
- // src/hooks/useControllableState.ts
1005
- import * as React10 from "react";
1006
- function useControllableState({
1007
- value,
1008
- defaultValue,
1009
- onChange
1010
- }) {
1011
- const [internalValue, setInternalValue] = React10.useState(defaultValue);
1012
- const isControlled = value !== void 0;
1013
- const currentValue = isControlled ? value : internalValue;
1014
- const currentValueRef = React10.useRef(currentValue);
1015
- currentValueRef.current = currentValue;
1016
- const setValue = React10.useCallback(
1017
- (nextValue) => {
1018
- const previousValue = currentValueRef.current;
1019
- const computedValue = typeof nextValue === "function" ? nextValue(previousValue) : nextValue;
1020
- if (Object.is(previousValue, computedValue)) {
1021
- return;
1022
- }
1023
- currentValueRef.current = computedValue;
1024
- if (!isControlled) {
1025
- setInternalValue(computedValue);
1026
- }
1027
- onChange?.(computedValue);
1028
- },
1029
- [isControlled, onChange]
1030
- );
1031
- return [currentValue, setValue];
1032
- }
1033
-
1034
- // src/internal/CheckMark.module.css
1035
- var CheckMark_default = {
1036
- svg: "CheckMark_svg",
1037
- check: "CheckMark_check",
1038
- bar: "CheckMark_bar"
1039
- };
1040
-
1041
- // src/internal/CheckMark.tsx
1042
- import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
1043
- function CheckMark({ state, className }) {
1044
- return /* @__PURE__ */ jsxs5(
1045
- "svg",
1046
- {
1047
- viewBox: "0 0 24 24",
1048
- className: cx(CheckMark_default.svg, className),
1049
- "data-state": state,
1050
- "aria-hidden": "true",
1051
- focusable: "false",
1052
- children: [
1053
- /* @__PURE__ */ jsx11("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
1054
- /* @__PURE__ */ jsx11("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
1055
- ]
1056
- }
1057
- );
1058
- }
1059
-
1060
- // src/internal/FieldFrame.tsx
1061
- import * as React11 from "react";
1062
-
1063
- // src/internal/formatLabel.ts
1064
- function formatLabel(template, values) {
1065
- return template.replace(
1066
- /\{(\w+)\}/g,
1067
- (_, name) => Object.hasOwn(values, name) ? String(values[name] ?? "") : ""
1068
- ).trim();
1069
- }
1070
-
1071
- // src/internal/RollingNumber.module.css
1072
- var RollingNumber_default = {
1073
- root: "RollingNumber_root",
1074
- digit: "RollingNumber_digit",
1075
- char: "RollingNumber_char"
1076
- };
1077
-
1078
- // src/internal/RollingNumber.tsx
1079
- import { jsx as jsx12 } from "react/jsx-runtime";
1080
- function RollingNumber({ children, className }) {
1081
- const chars = [...String(children)];
1082
- return /* @__PURE__ */ jsx12("span", { className: cx(RollingNumber_default.root, className), children: chars.map((char, i) => {
1083
- const key = chars.length - i;
1084
- return /\d/.test(char) ? /* @__PURE__ */ jsx12(
1085
- "span",
1086
- {
1087
- className: RollingNumber_default.digit,
1088
- style: { "--rolling-n": char },
1089
- children: char
1090
- },
1091
- `d${key}`
1092
- ) : /* @__PURE__ */ jsx12("span", { className: RollingNumber_default.char, children: char }, `c${key}`);
1093
- }) });
1094
- }
1095
-
1096
- // src/internal/FieldFrame.module.css
1097
- var FieldFrame_default = {
1098
- root: "FieldFrame_root",
1099
- label: "FieldFrame_label",
1100
- labelRow: "FieldFrame_labelRow",
1101
- labelEnd: "FieldFrame_labelEnd",
1102
- body: "FieldFrame_body",
1103
- supportText: "FieldFrame_supportText",
1104
- support: "FieldFrame_support",
1105
- shakeSelf: "FieldFrame_shakeSelf",
1106
- "field-shake-odd": "FieldFrame_field-shake-odd",
1107
- "field-shake-even": "FieldFrame_field-shake-even",
1108
- counter: "FieldFrame_counter",
1109
- leaving: "FieldFrame_leaving",
1110
- "field-error-leave": "FieldFrame_field-error-leave"
1111
- };
1112
-
1113
- // src/internal/FieldFrame.tsx
1114
- import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
1115
- function hasContent(node) {
1116
- return node != null && node !== false && node !== "";
1117
- }
1118
- function useFieldFrame(explicitId, {
1119
- label,
1120
- hint,
1121
- error,
1122
- invalid
1123
- }, ariaDescribedBy) {
1124
- const generated = React11.useId();
1125
- const controlId = explicitId ?? generated;
1126
- const labelId = `${controlId}-label`;
1127
- const hintId = `${controlId}-hint`;
1128
- const errorId = `${controlId}-error`;
1129
- const showError = hasContent(error);
1130
- const showHint = !showError && hasContent(hint);
1131
- const describedBy = [ariaDescribedBy, showHint ? hintId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
1132
- return {
1133
- controlId,
1134
- labelId,
1135
- hintId,
1136
- errorId,
1137
- describedBy,
1138
- labelledBy: hasContent(label) ? labelId : void 0,
1139
- showHint,
1140
- showError,
1141
- invalid: Boolean(invalid) || showError
1142
- };
1143
- }
1144
- function useErrorShake(invalid, error) {
1145
- const key = !invalid ? null : typeof error === "string" || typeof error === "number" ? String(error) : "invalid";
1146
- const previous = React11.useRef(key);
1147
- const [count, setCount] = React11.useState(0);
1148
- React11.useEffect(() => {
1149
- if (key !== null && key !== previous.current) setCount((n) => n + 1);
1150
- previous.current = key;
1151
- }, [key]);
1152
- if (count === 0) return void 0;
1153
- return count % 2 ? "odd" : "even";
1154
- }
1155
- function useLeavingError(showError, error) {
1156
- const last = React11.useRef(error);
1157
- if (showError) last.current = error;
1158
- const presence = usePresence(showError, { exitDuration: "fast" });
1159
- if (showError || !presence.mounted) return null;
1160
- return { node: last.current, onExitEnd: presence.onExitEnd };
1161
- }
1162
- var leavingErrorClass = FieldFrame_default.leaving;
1163
- function FieldFrame({
1164
- size,
1165
- ids,
1166
- label,
1167
- required,
1168
- optional,
1169
- hint,
1170
- error,
1171
- disabled,
1172
- optionalLabel,
1173
- group = false,
1174
- labelEnd,
1175
- counter,
1176
- reserveSupportRow = false,
1177
- className,
1178
- children,
1179
- ...rest
1180
- }) {
1181
- const { showError, showHint } = ids;
1182
- const leaving = useLeavingError(showError, error);
1183
- const showSupport = showError || showHint || leaving != null || counter != null || reserveSupportRow;
1184
- const shake = useErrorShake(ids.invalid, error);
1185
- const labelNode = hasContent(label) ? /* @__PURE__ */ jsx13(
1186
- Label.Root,
1187
- {
1188
- id: ids.labelId,
1189
- htmlFor: group ? void 0 : ids.controlId,
1190
- size,
1191
- required,
1192
- optional,
1193
- disabled,
1194
- labels: { optional: optionalLabel },
1195
- className: FieldFrame_default.label,
1196
- children: label
1197
- }
1198
- ) : null;
1199
- return /* @__PURE__ */ jsxs6(
1200
- "div",
1201
- {
1202
- ...rest,
1203
- className: cx(FieldFrame_default.root, className),
1204
- ...toDataAttributes({
1205
- size,
1206
- invalid: ids.invalid || void 0,
1207
- disabled: disabled || void 0,
1208
- shake
1209
- }),
1210
- children: [
1211
- labelEnd != null ? /* @__PURE__ */ jsxs6("div", { className: FieldFrame_default.labelRow, children: [
1212
- labelNode,
1213
- /* @__PURE__ */ jsx13("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
1214
- ] }) : labelNode,
1215
- /* @__PURE__ */ jsxs6("div", { className: FieldFrame_default.body, children: [
1216
- children,
1217
- showSupport ? /* @__PURE__ */ jsxs6(
1218
- "div",
1219
- {
1220
- className: FieldFrame_default.support,
1221
- ...toDataAttributes({ size, reserve: reserveSupportRow || void 0 }),
1222
- children: [
1223
- showError ? /* @__PURE__ */ jsx13(Hint.Root, { id: ids.errorId, size, invalid: true, className: FieldFrame_default.supportText, children: error }) : leaving ? /* @__PURE__ */ jsx13(
1224
- Hint.Root,
1225
- {
1226
- size,
1227
- invalid: true,
1228
- "aria-hidden": "true",
1229
- "data-state": "closed",
1230
- onAnimationEnd: leaving.onExitEnd,
1231
- className: cx(FieldFrame_default.supportText, FieldFrame_default.leaving),
1232
- children: leaving.node
1233
- }
1234
- ) : showHint ? /* @__PURE__ */ jsx13(
1235
- Hint.Root,
1236
- {
1237
- id: ids.hintId,
1238
- size,
1239
- disabled,
1240
- className: FieldFrame_default.supportText,
1241
- children: hint
1242
- }
1243
- ) : /* @__PURE__ */ jsx13("span", { className: FieldFrame_default.supportText }),
1244
- counter
1245
- ]
1246
- }
1247
- ) : null
1248
- ] })
1249
- ]
1250
- }
1251
- );
1252
- }
1253
- function FieldCounter({ current, max, size, label, className, ...rest }) {
1254
- return /* @__PURE__ */ jsxs6(
1255
- "span",
1256
- {
1257
- ...rest,
1258
- className: cx(FieldFrame_default.counter, className),
1259
- "data-size": size,
1260
- "data-invalid": current > max || void 0,
1261
- "aria-live": "polite",
1262
- children: [
1263
- /* @__PURE__ */ jsxs6("span", { "aria-hidden": "true", children: [
1264
- /* @__PURE__ */ jsx13(RollingNumber, { children: current }),
1265
- "/",
1266
- max
1267
- ] }),
1268
- /* @__PURE__ */ jsx13(VisuallyHidden, { children: formatLabel(label, { current, max }) })
1269
- ]
1270
- }
1271
- );
1272
- }
1273
-
1274
- // src/internal/ChoiceField.module.css
1275
- var ChoiceField_default = {
1276
- tier: "ChoiceField_tier",
1277
- field: "ChoiceField_field",
1278
- row: "ChoiceField_row",
1279
- controlCell: "ChoiceField_controlCell",
1280
- input: "ChoiceField_input",
1281
- text: "ChoiceField_text",
1282
- support: "ChoiceField_support",
1283
- visual: "ChoiceField_visual"
1284
- };
1285
-
1286
- // src/internal/ChoiceField.tsx
1287
- import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
1288
- var choiceInputClass = ChoiceField_default.input;
1289
- var choiceVisualClass = ChoiceField_default.visual;
1290
- var choiceTierClass = ChoiceField_default.tier;
1291
- function ChoiceField({
1292
- ids,
1293
- size,
1294
- state,
1295
- disabled,
1296
- readOnly = false,
1297
- hint,
1298
- error,
1299
- control,
1300
- className,
1301
- children
1302
- }) {
1303
- const shake = useErrorShake(ids.invalid, error);
1304
- const leaving = useLeavingError(ids.showError, error);
1305
- return /* @__PURE__ */ jsx14(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs7(
1306
- "div",
1307
- {
1308
- className: cx(ChoiceField_default.tier, ChoiceField_default.field, className),
1309
- ...toDataAttributes({
1310
- size,
1311
- state,
1312
- invalid: ids.invalid || void 0,
1313
- disabled: disabled || void 0,
1314
- readonly: readOnly || void 0
1315
- }),
1316
- children: [
1317
- /* @__PURE__ */ jsxs7(
1318
- "label",
1319
- {
1320
- htmlFor: ids.controlId,
1321
- className: cx(ChoiceField_default.row, FieldFrame_default.shakeSelf),
1322
- "data-shake": shake,
1323
- children: [
1324
- /* @__PURE__ */ jsx14("span", { className: cx(ChoiceField_default.controlCell, touchTargetClass), children: control }),
1325
- children
1326
- ]
1327
- }
1328
- ),
1329
- ids.showError ? /* @__PURE__ */ jsx14(Hint.Root, { id: ids.errorId, size, invalid: true, className: ChoiceField_default.support, children: error }) : leaving ? /* @__PURE__ */ jsx14(
1330
- Hint.Root,
1331
- {
1332
- size,
1333
- invalid: true,
1334
- "aria-hidden": "true",
1335
- "data-state": "closed",
1336
- onAnimationEnd: leaving.onExitEnd,
1337
- className: cx(ChoiceField_default.support, leavingErrorClass),
1338
- children: leaving.node
1339
- }
1340
- ) : ids.showHint ? /* @__PURE__ */ jsx14(Hint.Root, { id: ids.hintId, size, disabled, className: ChoiceField_default.support, children: hint }) : null
1341
- ]
1342
- }
1343
- ) });
1344
- }
1345
- function ChoiceLabel({ className, ...rest }) {
1346
- return /* @__PURE__ */ jsx14("span", { className: cx(ChoiceField_default.text, className), ...rest });
1347
- }
1348
-
1349
- // src/components/checkbox/Checkbox.module.css
1350
- var Checkbox_default = {
1351
- root: "Checkbox_root",
1352
- indicator: "Checkbox_indicator",
1353
- control: "Checkbox_control"
1354
- };
1355
-
1356
- // src/components/checkbox/Checkbox.tsx
1357
- import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
1358
- function CheckboxRoot({
1359
- id,
1360
- checked: checkedProp,
1361
- defaultChecked = false,
1362
- onCheckedChange,
1363
- indeterminate = false,
1364
- invalid,
1365
- hint,
1366
- error,
1367
- size: sizeProp,
1368
- disabled = false,
1369
- readOnly = false,
1370
- className,
1371
- "aria-describedby": ariaDescribedBy,
1372
- children,
1373
- ref,
1374
- ...inputRest
1375
- }) {
1376
- const size = useControlSize(sizeProp);
1377
- const ids = useFieldFrame(id, { hint, error, invalid }, ariaDescribedBy);
1378
- const [checked, setChecked] = useControllableState({
1379
- value: checkedProp,
1380
- defaultValue: defaultChecked,
1381
- onChange: onCheckedChange
1382
- });
1383
- const internalRef = React12.useRef(null);
1384
- const mergedRef = useMergedRefs(internalRef, ref);
1385
- React12.useEffect(() => {
1386
- if (internalRef.current) internalRef.current.indeterminate = indeterminate;
1387
- }, [indeterminate]);
1388
- return /* @__PURE__ */ jsx15(
1389
- ChoiceField,
1390
- {
1391
- ids,
1392
- size,
1393
- state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
1394
- disabled,
1395
- readOnly,
1396
- hint,
1397
- error,
1398
- className: cx(Checkbox_default.root, className),
1399
- control: /* @__PURE__ */ jsxs8(Fragment3, { children: [
1400
- /* @__PURE__ */ jsx15(
1401
- "input",
1402
- {
1403
- ...inputRest,
1404
- ref: mergedRef,
1405
- id: ids.controlId,
1406
- type: "checkbox",
1407
- className: choiceInputClass,
1408
- disabled,
1409
- checked,
1410
- onChange: (event) => {
1411
- if (!readOnly) setChecked(event.target.checked);
1412
- },
1413
- "aria-invalid": ids.invalid || void 0,
1414
- "aria-readonly": readOnly || void 0,
1415
- "aria-describedby": ids.describedBy
1416
- }
1417
- ),
1418
- /* @__PURE__ */ jsx15("span", { className: cx(choiceVisualClass, Checkbox_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx15(
1419
- CheckMark,
1420
- {
1421
- state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
1422
- }
1423
- ) })
1424
- ] }),
1425
- children
1426
- }
1427
- );
1428
- }
1429
- CheckboxRoot.displayName = "Checkbox.Root";
1430
- function CheckboxLabel(props) {
1431
- return /* @__PURE__ */ jsx15(ChoiceLabel, { ...props });
1432
- }
1433
- CheckboxLabel.displayName = "Checkbox.Label";
1434
- function CheckboxIndicator({
1435
- checked = false,
1436
- indeterminate = false,
1437
- disabled = false,
1438
- size: sizeProp,
1439
- className,
1440
- ...rest
1441
- }) {
1442
- const size = useControlSize(sizeProp);
1443
- return /* @__PURE__ */ jsx15(
1444
- "span",
1445
- {
1446
- "aria-hidden": "true",
1447
- className: cx(
1448
- choiceTierClass,
1449
- choiceVisualClass,
1450
- Checkbox_default.control,
1451
- Checkbox_default.indicator,
1452
- className
1453
- ),
1454
- ...toDataAttributes({
1455
- size,
1456
- state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
1457
- disabled: disabled || void 0
1458
- }),
1459
- ...rest,
1460
- children: /* @__PURE__ */ jsx15(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
1461
- }
1462
- );
1463
- }
1464
- CheckboxIndicator.displayName = "Checkbox.Indicator";
1465
- var Checkbox = {
1466
- Root: CheckboxRoot,
1467
- Label: CheckboxLabel,
1468
- Indicator: CheckboxIndicator
1469
- };
1470
-
1471
- // src/internal/swatch.tsx
1472
- import * as React13 from "react";
1473
-
1474
- // src/internal/swatch.module.css
1475
- var swatch_default = {
1476
- fill: "swatch_fill",
1477
- checker: "swatch_checker",
1478
- tier: "swatch_tier",
1479
- chip: "swatch_chip",
1480
- swatch: "swatch_swatch",
1481
- check: "swatch_check"
1482
- };
1483
-
1484
- // src/internal/swatch.tsx
1485
- import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
1486
- var COLOR_PRESETS = [
1487
- { value: "#ef4444", label: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439" },
1488
- { value: "#f97316", label: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
1489
- { value: "#eab308", label: "\u0416\u0451\u043B\u0442\u044B\u0439" },
1490
- { value: "#22c55e", label: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439" },
1491
- { value: "#14b8a6", label: "\u0411\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439" },
1492
- { value: "#5068f5", label: "\u0421\u0438\u043D\u0438\u0439" },
1493
- { value: "#a855f7", label: "\u0424\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439" },
1494
- { value: "#ec4899", label: "\u0420\u043E\u0437\u043E\u0432\u044B\u0439" },
1495
- { value: "#b91c1c", label: "\u0422\u0451\u043C\u043D\u043E-\u043A\u0440\u0430\u0441\u043D\u044B\u0439" },
1496
- { value: "#c2410c", label: "\u0422\u0451\u043C\u043D\u043E-\u043E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
1497
- { value: "#a16207", label: "\u0413\u043E\u0440\u0447\u0438\u0447\u043D\u044B\u0439" },
1498
- { value: "#15803d", label: "\u0422\u0451\u043C\u043D\u043E-\u0437\u0435\u043B\u0451\u043D\u044B\u0439" },
1499
- { value: "#0f766e", label: "\u0422\u0451\u043C\u043D\u043E-\u0431\u0438\u0440\u044E\u0437\u043E\u0432\u044B\u0439" },
1500
- { value: "#2f4ae0", label: "\u0422\u0451\u043C\u043D\u043E-\u0441\u0438\u043D\u0438\u0439" },
1501
- { value: "#7e22ce", label: "\u0422\u0451\u043C\u043D\u043E-\u0444\u0438\u043E\u043B\u0435\u0442\u043E\u0432\u044B\u0439" },
1502
- { value: "#be185d", label: "\u0422\u0451\u043C\u043D\u043E-\u0440\u043E\u0437\u043E\u0432\u044B\u0439" }
1503
- ];
1504
- function useSwatchOptions(presets, allowEmpty, emptyLabel) {
1505
- return React13.useMemo(
1506
- () => [
1507
- ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
1508
- ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "dark" }] : []
1509
- ],
1510
- [presets, allowEmpty, emptyLabel]
1511
- );
1512
- }
1513
- var swatchClass = swatch_default.swatch;
1514
- var swatchTierClass = swatch_default.tier;
1515
- function SwatchFill({ value }) {
1516
- if (value == null) return /* @__PURE__ */ jsx16("span", { "aria-hidden": true, className: swatch_default.checker });
1517
- return /* @__PURE__ */ jsx16("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx16("rect", { width: "1", height: "1", fill: value }) });
1518
- }
1519
- function SwatchContent({ value, selected }) {
1520
- return /* @__PURE__ */ jsxs9(Fragment4, { children: [
1521
- /* @__PURE__ */ jsx16(SwatchFill, { value }),
1522
- /* @__PURE__ */ jsx16(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
1523
- ] });
1524
- }
1525
- function SwatchChip({ value, className, ...rest }) {
1526
- return /* @__PURE__ */ jsx16("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx16(SwatchFill, { value }) });
1527
- }
1528
- function sameColor(a, b) {
1529
- return (a ?? "").trim().toLowerCase() === (b ?? "").trim().toLowerCase();
1530
- }
1531
- function colorToRgb(value) {
1532
- const input = value.trim().toLowerCase();
1533
- const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(input)?.[1];
1534
- if (hex) {
1535
- const full = hex.length <= 4 ? [...hex].map((c) => c + c).join("") : hex;
1536
- return [0, 2, 4].map((i) => Number.parseInt(full.slice(i, i + 2), 16));
1537
- }
1538
- const fn = /^(rgba?|hsla?)\(([^)]+)\)$/.exec(input);
1539
- if (!fn) return null;
1540
- const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
1541
- if (parts.length < 3) return null;
1542
- const num = (part, scale) => part.endsWith("%") ? Number.parseFloat(part) / 100 * scale : Number.parseFloat(part);
1543
- if (fn[1].startsWith("rgb")) {
1544
- const rgb = parts.slice(0, 3).map((part) => num(part, 255));
1545
- return rgb.every(Number.isFinite) ? rgb : null;
1546
- }
1547
- const h = Number.parseFloat(parts[0]);
1548
- const s = num(parts[1], 1);
1549
- const l = num(parts[2], 1);
1550
- if (![h, s, l].every(Number.isFinite)) return null;
1551
- const a = s * Math.min(l, 1 - l);
1552
- const channel = (n) => {
1553
- const k = (n + h / 30) % 12;
1554
- return 255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
1555
- };
1556
- return [channel(0), channel(8), channel(4)];
1557
- }
1558
- function markContrast(value) {
1559
- const rgb = colorToRgb(value);
1560
- if (!rgb) return "dark";
1561
- const lin = (c) => {
1562
- const s = c / 255;
1563
- return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
1564
- };
1565
- const l = 0.2126 * lin(rgb[0]) + 0.7152 * lin(rgb[1]) + 0.0722 * lin(rgb[2]);
1566
- return l > 0.179 ? "dark" : "light";
1567
- }
1568
-
1569
- // src/components/color-swatches/ColorSwatches.tsx
1570
- import * as React14 from "react";
1571
-
1572
- // src/internal/rovingFocus.ts
1573
- var PREV = {
1574
- horizontal: ["ArrowLeft"],
1575
- vertical: ["ArrowUp"],
1576
- both: ["ArrowLeft", "ArrowUp"]
1577
- };
1578
- var NEXT = {
1579
- horizontal: ["ArrowRight"],
1580
- vertical: ["ArrowDown"],
1581
- both: ["ArrowRight", "ArrowDown"]
1582
- };
1583
- function rovingIndex(key, index, count, orientation = "both") {
1584
- if (count <= 0) return null;
1585
- if (key === "Home") return 0;
1586
- if (key === "End") return count - 1;
1587
- if (NEXT[orientation].includes(key)) return index < 0 ? 0 : (index + 1) % count;
1588
- if (PREV[orientation].includes(key)) return index < 0 ? count - 1 : (index - 1 + count) % count;
1589
- return null;
1590
- }
1591
- function gridIndex(key, index, count, columns) {
1592
- if (count <= 0) return null;
1593
- const from = Math.min(Math.max(index, 0), count - 1);
1594
- const step = Math.max(1, columns);
1595
- switch (key) {
1596
- case "ArrowRight":
1597
- return Math.min(from + 1, count - 1);
1598
- case "ArrowLeft":
1599
- return Math.max(from - 1, 0);
1600
- case "ArrowDown":
1601
- return from + step < count ? from + step : from;
1602
- case "ArrowUp":
1603
- return from - step >= 0 ? from - step : from;
1604
- case "Home":
1605
- return 0;
1606
- case "End":
1607
- return count - 1;
1608
- default:
1609
- return null;
1610
- }
1611
- }
1612
-
1613
- // src/components/color-swatches/ColorSwatches.module.css
1614
- var ColorSwatches_default = {
1615
- grid: "ColorSwatches_grid"
1616
- };
1617
-
1618
- // src/components/color-swatches/ColorSwatches.tsx
1619
- import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
1620
- var COLOR_SWATCHES_LABELS = {
1621
- group: "\u0426\u0432\u0435\u0442",
1622
- empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
1623
- optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E"
1624
- };
1625
- function columnsOf(items) {
1626
- const top = items[0]?.offsetTop;
1627
- const count = items.findIndex((item) => !item || item.offsetTop !== top);
1628
- return Math.max(1, count === -1 ? items.length : count);
1629
- }
1630
- function ColorSwatches({
1631
- value: valueProp,
1632
- defaultValue = null,
1633
- onValueChange,
1634
- presets = COLOR_PRESETS,
1635
- size: sizeProp,
1636
- disabled = false,
1637
- invalid,
1638
- allowEmpty = false,
1639
- name,
1640
- id,
1641
- className,
1642
- label,
1643
- required,
1644
- optional,
1645
- hint,
1646
- error,
1647
- "aria-label": ariaLabel,
1648
- "aria-labelledby": ariaLabelledBy,
1649
- "aria-describedby": ariaDescribedBy,
1650
- labels: labelsProp,
1651
- ...rest
1652
- }) {
1653
- const size = useControlSize(sizeProp);
1654
- const labels = { ...COLOR_SWATCHES_LABELS, ...labelsProp };
1655
- const [value, setValue] = useControllableState({
1656
- value: valueProp,
1657
- defaultValue,
1658
- onChange: onValueChange
1659
- });
1660
- const ids = useFieldFrame(id, { label, hint, error, invalid }, ariaDescribedBy);
1661
- const options = useSwatchOptions(presets, allowEmpty, labels.empty);
1662
- const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
1663
- const focusIndex = Math.max(0, selectedIndex);
1664
- const itemRefs = React14.useRef([]);
1665
- const labelledBy = ariaLabelledBy ?? ids.labelledBy;
1666
- const onKeyDown2 = (event) => {
1667
- const current = itemRefs.current.indexOf(document.activeElement);
1668
- const next = gridIndex(
1669
- event.key,
1670
- current === -1 ? focusIndex : current,
1671
- options.length,
1672
- columnsOf(itemRefs.current)
1673
- );
1674
- if (next === null) return;
1675
- event.preventDefault();
1676
- setValue(options[next].value);
1677
- itemRefs.current[next]?.focus();
1678
- };
1679
- return /* @__PURE__ */ jsx17(
1680
- FieldFrame,
1681
- {
1682
- ...rest,
1683
- size,
1684
- ids,
1685
- label,
1686
- required,
1687
- optional,
1688
- hint,
1689
- error,
1690
- disabled,
1691
- optionalLabel: labels.optional,
1692
- group: true,
1693
- className,
1694
- children: /* @__PURE__ */ jsxs10(
1695
- "div",
1696
- {
1697
- id: ids.controlId,
1698
- role: "radiogroup",
1699
- "aria-label": labelledBy ? void 0 : ariaLabel ?? labels.group,
1700
- "aria-labelledby": labelledBy,
1701
- "aria-describedby": ids.describedBy,
1702
- "aria-required": required || void 0,
1703
- "aria-invalid": ids.invalid || void 0,
1704
- className: cx(swatchTierClass, ColorSwatches_default.grid),
1705
- ...toDataAttributes({
1706
- size,
1707
- invalid: ids.invalid || void 0,
1708
- disabled: disabled || void 0
1709
- }),
1710
- onKeyDown: disabled ? void 0 : onKeyDown2,
1711
- children: [
1712
- options.map((option, index) => {
1713
- const selected = index === selectedIndex;
1714
- return (
1715
- // biome-ignore lint/a11y/useSemanticElements: a swatch is a styled button in a roving radiogroup; a native radio cannot carry the color fill and check mark
1716
- /* @__PURE__ */ jsx17(
1717
- "button",
1718
- {
1719
- ref: (el) => {
1720
- itemRefs.current[index] = el;
1721
- },
1722
- type: "button",
1723
- role: "radio",
1724
- "aria-checked": selected,
1725
- "aria-label": option.label,
1726
- title: option.label,
1727
- tabIndex: index === focusIndex ? 0 : -1,
1728
- disabled,
1729
- className: swatchClass,
1730
- ...toDataAttributes({
1731
- state: selected ? "checked" : "unchecked",
1732
- contrast: option.contrast
1733
- }),
1734
- onClick: () => setValue(option.value),
1735
- children: /* @__PURE__ */ jsx17(SwatchContent, { value: option.value, selected })
1736
- },
1737
- option.value ?? "empty"
1738
- )
1739
- );
1740
- }),
1741
- name ? /* @__PURE__ */ jsx17("input", { type: "hidden", name, value: value ?? "" }) : null
1742
- ]
1743
- }
1744
- )
1745
- }
1746
- );
1747
- }
1748
-
1749
- // src/components/empty-page/EmptyPage.module.css
1750
- var EmptyPage_default = {
1751
- root: "EmptyPage_root",
1752
- iconWrap: "EmptyPage_iconWrap",
1753
- title: "EmptyPage_title",
1754
- description: "EmptyPage_description",
1755
- actions: "EmptyPage_actions"
1756
- };
1757
-
1758
- // src/components/empty-page/EmptyPage.tsx
1759
- import { jsx as jsx18 } from "react/jsx-runtime";
1760
- function EmptyPageRoot({
1761
- size = "m",
1762
- layout = "default",
1763
- className,
1764
- children,
1765
- ...rest
1766
- }) {
1767
- return /* @__PURE__ */ jsx18(
1768
- "div",
1769
- {
1770
- className: cx(EmptyPage_default.root, layout !== "compact" && enterMotion_default.enterBaseChildren, className),
1771
- ...rest,
1772
- ...toDataAttributes({ size, layout: layout === "default" ? void 0 : layout }),
1773
- children: /* @__PURE__ */ jsx18(ControlSizeProvider, { value: size, children })
1774
- }
1775
- );
1776
- }
1777
- EmptyPageRoot.displayName = "EmptyPage.Root";
1778
- function EmptyPageIcon({ tone = "neutral", className, ...rest }) {
1779
- return /* @__PURE__ */ jsx18("div", { className: cx(EmptyPage_default.iconWrap, className), "data-tone": tone, ...rest });
1780
- }
1781
- EmptyPageIcon.displayName = "EmptyPage.Icon";
1782
- function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
1783
- return /* @__PURE__ */ jsx18(Tag, { ref, className: cx(EmptyPage_default.title, className), ...rest });
1784
- }
1785
- EmptyPageTitle.displayName = "EmptyPage.Title";
1786
- function EmptyPageDescription({ className, ...rest }) {
1787
- return /* @__PURE__ */ jsx18("p", { className: cx(EmptyPage_default.description, className), ...rest });
1788
- }
1789
- EmptyPageDescription.displayName = "EmptyPage.Description";
1790
- function EmptyPageActions({ className, ...rest }) {
1791
- return /* @__PURE__ */ jsx18("div", { className: cx(EmptyPage_default.actions, className), ...rest });
1792
- }
1793
- EmptyPageActions.displayName = "EmptyPage.Actions";
1794
- var EmptyPage = {
1795
- Root: EmptyPageRoot,
1796
- Icon: EmptyPageIcon,
1797
- Title: EmptyPageTitle,
1798
- Description: EmptyPageDescription,
1799
- Actions: EmptyPageActions
1800
- };
1801
-
1802
- // src/components/progress-bar/ProgressBar.tsx
1803
- import * as React15 from "react";
1804
-
1805
- // src/internal/progressSegments.ts
1806
- function resolveValue(value, max) {
1807
- const top = max !== void 0 && max > 0 ? max : 100;
1808
- const clamped = Math.min(top, Math.max(Number.isFinite(value) ? value : 0, 0));
1809
- return {
1810
- value: clamped,
1811
- max: top,
1812
- ratio: clamped / top,
1813
- percent: Math.round(clamped / top * 100)
1814
- };
1815
- }
1816
- var DEFAULT_PROGRESS_SEGMENTS_LABELS = {
1817
- empty: "\u041D\u0435\u0442 \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u043E\u0432",
1818
- allEmpty: "\u0412\u0441\u0435 \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u044B \u043F\u0443\u0441\u0442\u044B"
1819
- };
1820
- function nonNegative(n) {
1821
- return Number.isFinite(n) && n > 0 ? n : 0;
1822
- }
1823
- function resolveSegments(input, max, labels) {
1824
- const segments = input.map((s) => ({ ...s, value: nonNegative(s.value) }));
1825
- const total = segments.reduce((acc, s) => acc + s.value, 0);
1826
- const scale = max !== void 0 && max > 0 ? Math.max(max, total) : total;
1827
- let text;
1828
- if (segments.length === 0) text = labels.empty;
1829
- else if (scale <= 0) text = labels.allEmpty;
1830
- else
1831
- text = segments.map((s) => {
1832
- const pct = Math.round(s.value / scale * 100);
1833
- return s.label ? `${s.label}: ${pct}%` : `${pct}%`;
1834
- }).join(", ");
1835
- return {
1836
- segments,
1837
- total,
1838
- scale,
1839
- rest: scale - total,
1840
- percent: scale > 0 ? Math.round(total / scale * 100) : 0,
1841
- text
1842
- };
1843
- }
1844
-
1845
- // src/components/progress-bar/ProgressBar.module.css
1846
- var ProgressBar_default = {
1847
- root: "ProgressBar_root",
1848
- segment: "ProgressBar_segment",
1849
- header: "ProgressBar_header",
1850
- label: "ProgressBar_label",
1851
- value: "ProgressBar_value",
1852
- native: "ProgressBar_native",
1853
- bar: "ProgressBar_bar",
1854
- fill: "ProgressBar_fill",
1855
- segments: "ProgressBar_segments",
1856
- rest: "ProgressBar_rest",
1857
- step: "ProgressBar_step"
1858
- };
1859
-
1860
- // src/components/progress-bar/ProgressBar.tsx
1861
- import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
1862
- var MIN_STEPS = 2;
1863
- var MAX_STEPS = 12;
1864
- function useStepOrder(filled, count) {
1865
- const prev = React15.useRef(filled);
1866
- const from = prev.current;
1867
- React15.useEffect(() => {
1868
- prev.current = filled;
1869
- }, [filled]);
1870
- return Array.from(
1871
- { length: count },
1872
- (_, i) => filled >= from ? Math.max(0, i - from) : Math.max(0, from - 1 - i)
1873
- );
1874
- }
1875
- function ProgressBar(props) {
1876
- const {
1877
- label,
1878
- size = "m",
1879
- showValue = false,
1880
- className,
1881
- value: valueProp,
1882
- max: maxProp,
1883
- tone: toneProp,
1884
- segments: segmentsProp,
1885
- segmentGap = "none",
1886
- steps = false,
1887
- labels,
1888
- "aria-label": ariaLabel,
1889
- ...rest
1890
- } = props;
1891
- const labelId = React15.useId();
1892
- const descriptionId = React15.useId();
1893
- const stepResolved = !segmentsProp && steps ? resolveValue(valueProp ?? 0, maxProp) : null;
1894
- const stepCount = stepResolved ? Math.min(MAX_STEPS, Math.max(MIN_STEPS, Math.round(stepResolved.max))) : 0;
1895
- const stepFilled = stepResolved ? Math.round(stepResolved.value / stepResolved.max * stepCount) : 0;
1896
- const stepOrder = useStepOrder(stepFilled, stepCount);
1897
- let percent;
1898
- let tone;
1899
- let bar;
1900
- if (segmentsProp) {
1901
- const resolved = resolveSegments(segmentsProp, maxProp, {
1902
- ...DEFAULT_PROGRESS_SEGMENTS_LABELS,
1903
- ...labels
1904
- });
1905
- const { segments, total, rest: free, text } = resolved;
1906
- percent = resolved.percent;
1907
- const named = Boolean(label || ariaLabel);
1908
- const a11y = named ? {
1909
- "aria-labelledby": label ? labelId : void 0,
1910
- "aria-label": label ? void 0 : ariaLabel,
1911
- "aria-describedby": descriptionId
1912
- } : { "aria-label": text };
1913
- bar = /* @__PURE__ */ jsxs11(Fragment5, { children: [
1914
- named ? /* @__PURE__ */ jsx19(VisuallyHidden, { id: descriptionId, children: text }) : null,
1915
- /* @__PURE__ */ jsxs11(
1916
- "div",
1917
- {
1918
- className: ProgressBar_default.bar,
1919
- role: "group",
1920
- ...a11y,
1921
- ...toDataAttributes({ "segment-gap": segmentGap }),
1922
- children: [
1923
- total > 0 ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.segments, style: { flexGrow: total }, children: segments.map((seg, i) => /* @__PURE__ */ jsx19(
1924
- "span",
1925
- {
1926
- className: ProgressBar_default.segment,
1927
- style: { flexGrow: seg.value },
1928
- title: seg.label,
1929
- ...toDataAttributes({ tone: seg.tone ?? "accent" })
1930
- },
1931
- i
1932
- )) }) : null,
1933
- free > 0 || total === 0 ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.rest, style: { flexGrow: free > 0 ? free : 1 } }) : null
1934
- ]
1935
- }
1936
- )
1937
- ] });
1938
- } else {
1939
- const resolved = resolveValue(valueProp ?? 0, maxProp);
1940
- const { value, max } = resolved;
1941
- percent = resolved.percent;
1942
- tone = toneProp ?? "accent";
1943
- bar = /* @__PURE__ */ jsxs11(Fragment5, { children: [
1944
- /* @__PURE__ */ jsx19(
1945
- "progress",
1946
- {
1947
- value,
1948
- max,
1949
- "aria-labelledby": label ? labelId : void 0,
1950
- "aria-label": label ? void 0 : ariaLabel,
1951
- className: ProgressBar_default.native
1952
- }
1953
- ),
1954
- steps ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.bar, "aria-hidden": "true", "data-steps": "true", children: stepOrder.map((order, i) => /* @__PURE__ */ jsx19(
1955
- "span",
1956
- {
1957
- className: ProgressBar_default.step,
1958
- "data-filled": i < stepFilled || void 0,
1959
- style: { "--pb-step-order": order }
1960
- },
1961
- i
1962
- )) }) : /* @__PURE__ */ jsx19(
1963
- "span",
1964
- {
1965
- className: ProgressBar_default.bar,
1966
- "aria-hidden": "true",
1967
- style: { "--pb-ratio": resolved.ratio },
1968
- children: /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.fill })
1969
- }
1970
- )
1971
- ] });
1972
- }
1973
- return /* @__PURE__ */ jsxs11("div", { className: cx(ProgressBar_default.root, className), ...rest, ...toDataAttributes({ size, tone }), children: [
1974
- label || showValue ? /* @__PURE__ */ jsxs11("div", { className: ProgressBar_default.header, children: [
1975
- label ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.label, id: labelId, children: label }) : null,
1976
- showValue ? /* @__PURE__ */ jsxs11("span", { className: ProgressBar_default.value, "aria-hidden": "true", children: [
1977
- percent,
1978
- "%"
1979
- ] }) : null
1980
- ] }) : null,
1981
- bar
1982
- ] });
1983
- }
1984
-
1985
- // src/components/input/passwordStrength.ts
1986
- var SHORT = 8;
1987
- function getPasswordStrength(value) {
1988
- if (value.length === 0) return 0;
1989
- const points = Number(/\p{Ll}/u.test(value)) + Number(/\p{Lu}/u.test(value)) + Number(/\p{N}/u.test(value)) + Number(/[^\p{L}\p{N}\s]/u.test(value)) + Number(value.length >= 10) + Number(value.length >= 14);
1990
- const level = points >= 5 ? 4 : points === 4 ? 3 : points === 3 ? 2 : 1;
1991
- return value.length < SHORT ? Math.min(level, 2) : level;
1992
- }
1993
-
1994
- // src/components/input/Input.tsx
1995
- import * as React17 from "react";
1996
-
1997
- // src/internal/context.ts
1998
- import * as React16 from "react";
1999
- function createComponentContext(displayName) {
2000
- const Ctx = React16.createContext(null);
2001
- Ctx.displayName = `${displayName}Context`;
2002
- function useComponentContext() {
2003
- const value = React16.useContext(Ctx);
2004
- if (value === null) {
2005
- throw new Error(
2006
- `[prime-ui-kit] \`${displayName}\` sub-component must be used inside \`${displayName}.Root\`.`
2007
- );
2008
- }
2009
- return value;
2010
- }
2011
- return [Ctx.Provider, useComponentContext];
2012
- }
2013
-
2014
- // src/components/input/Input.module.css
2015
- var Input_default = {
2016
- root: "Input_root",
2017
- wrapper: "Input_wrapper",
2018
- affix: "Input_affix",
2019
- field: "Input_field",
2020
- inlineAffix: "Input_inlineAffix",
2021
- icon: "Input_icon",
2022
- action: "Input_action",
2023
- strengthWord: "Input_strengthWord"
2024
- };
2025
-
2026
- // src/components/input/Input.tsx
2027
- import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
2028
- var INPUT_LABELS = {
2029
- optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
2030
- clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
2031
- counter: "{current} \u0438\u0437 {max} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
2032
- strength: "\u041D\u0430\u0434\u0451\u0436\u043D\u043E\u0441\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044F",
2033
- strengthWeak: "\u0421\u043B\u0430\u0431\u044B\u0439",
2034
- strengthEasy: "\u041B\u0451\u0433\u043A\u0438\u0439",
2035
- strengthMedium: "\u0421\u0440\u0435\u0434\u043D\u0438\u0439",
2036
- strengthHard: "\u0421\u043B\u043E\u0436\u043D\u044B\u0439"
2037
- };
2038
- var STRENGTH_TONES = {
2039
- 1: "danger",
2040
- 2: "warning",
2041
- 3: "accent",
2042
- 4: "success"
2043
- };
2044
- var [InputProvider, useInputContext] = createComponentContext("Input");
2045
- function InputRoot({
2046
- size: sizeProp,
2047
- invalid,
2048
- focusRing = true,
2049
- label,
2050
- required = false,
2051
- optional = false,
2052
- hint,
2053
- error,
2054
- counter,
2055
- reserveSupportRow = false,
2056
- id,
2057
- strength = false,
2058
- getStrength = getPasswordStrength,
2059
- labels: labelsProp,
2060
- children,
2061
- className,
2062
- ...rest
2063
- }) {
2064
- const [strengthValue, setStrengthValue] = React17.useState("");
2065
- const size = useControlSize(sizeProp);
2066
- const ids = useFieldFrame(id, { label, hint, error, invalid });
2067
- const labels = React17.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
2068
- const { invalid: isInvalid, controlId: inputId, describedBy } = ids;
2069
- const inputRef = React17.useRef(null);
2070
- const contextValue = React17.useMemo(
2071
- () => ({
2072
- size,
2073
- invalid: isInvalid,
2074
- focusRing,
2075
- required,
2076
- inputId,
2077
- inputRef,
2078
- describedBy,
2079
- labels,
2080
- reportValue: strength ? setStrengthValue : null
2081
- }),
2082
- [size, isInvalid, focusRing, required, inputId, describedBy, labels, strength]
2083
- );
2084
- const level = strength ? getStrength(strengthValue) : 0;
2085
- const levelWord = level ? [labels.strengthWeak, labels.strengthEasy, labels.strengthMedium, labels.strengthHard][level - 1] : "";
2086
- return /* @__PURE__ */ jsx20(InputProvider, { value: contextValue, children: /* @__PURE__ */ jsx20(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs12(
2087
- FieldFrame,
2088
- {
2089
- ...rest,
2090
- size,
2091
- ids,
2092
- label,
2093
- required,
2094
- optional,
2095
- hint,
2096
- error,
2097
- counter: strength ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
2098
- /* @__PURE__ */ jsx20(
2099
- "span",
2100
- {
2101
- className: Input_default.strengthWord,
2102
- "data-tone": level ? STRENGTH_TONES[level] : void 0,
2103
- "aria-live": "polite",
2104
- children: levelWord ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
2105
- /* @__PURE__ */ jsx20(VisuallyHidden, { children: `${labels.strength}: ` }),
2106
- /* @__PURE__ */ jsx20(MorphText, { children: levelWord })
2107
- ] }) : null
2108
- }
2109
- ),
2110
- counter
2111
- ] }) : counter,
2112
- reserveSupportRow: reserveSupportRow || strength,
2113
- optionalLabel: labels.optional,
2114
- className: cx(fieldTierClass, Input_default.root, className),
2115
- children: [
2116
- children,
2117
- strength ? /* @__PURE__ */ jsx20(
2118
- ProgressBar,
2119
- {
2120
- steps: true,
2121
- value: level,
2122
- max: 4,
2123
- tone: level ? STRENGTH_TONES[level] : "neutral",
2124
- size: "xs",
2125
- "aria-label": labels.strength
2126
- }
2127
- ) : null
2128
- ]
2129
- }
2130
- ) }) });
2131
- }
2132
- InputRoot.displayName = "Input.Root";
2133
- function InputWrapper({ children, className, ...rest }) {
2134
- const { size, invalid, focusRing } = useInputContext();
2135
- return /* @__PURE__ */ jsx20(
2136
- "div",
2137
- {
2138
- ...rest,
2139
- className: cx(fieldSurfaceClass, Input_default.wrapper, className),
2140
- ...toDataAttributes({
2141
- size,
2142
- invalid: invalid || void 0,
2143
- "focus-ring": focusRing ? void 0 : false
2144
- }),
2145
- children
2146
- }
2147
- );
2148
- }
2149
- InputWrapper.displayName = "Input.Wrapper";
2150
- function InputField({
2151
- className,
2152
- "aria-describedby": ariaDescribedBy,
2153
- required,
2154
- onChange,
2155
- onValueChange,
2156
- ref,
2157
- ...rest
2158
- }) {
2159
- const {
2160
- inputId,
2161
- inputRef,
2162
- invalid,
2163
- required: requiredCtx,
2164
- describedBy,
2165
- reportValue
2166
- } = useInputContext();
2167
- const setRefs = useMergedRefs(inputRef, ref);
2168
- const controlled = rest.value;
2169
- React17.useEffect(() => {
2170
- if (!reportValue) return;
2171
- if (controlled !== void 0) reportValue(String(controlled));
2172
- else if (inputRef.current) reportValue(inputRef.current.value);
2173
- }, [reportValue, controlled, inputRef]);
2174
- const resolvedDescribedBy = [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0;
2175
- return /* @__PURE__ */ jsx20(
2176
- "input",
2177
- {
2178
- ...rest,
2179
- ref: setRefs,
2180
- id: inputId,
2181
- className: cx(Input_default.field, className),
2182
- "aria-invalid": invalid || void 0,
2183
- "aria-describedby": resolvedDescribedBy,
2184
- required: required ?? (requiredCtx || void 0),
2185
- onChange: (event) => {
2186
- onChange?.(event);
2187
- onValueChange?.(event.target.value);
2188
- reportValue?.(event.target.value);
2189
- }
2190
- }
2191
- );
2192
- }
2193
- InputField.displayName = "Input.Field";
2194
- function InputIcon({ side, children, className, ...rest }) {
2195
- return /* @__PURE__ */ jsx20("span", { ...rest, className: cx(Input_default.icon, className), "data-side": side, "aria-hidden": "true", children });
2196
- }
2197
- InputIcon.displayName = "Input.Icon";
2198
- function InputAffix({ side, children, className, ...rest }) {
2199
- return /* @__PURE__ */ jsx20("div", { ...rest, className: cx(Input_default.affix, className), "data-side": side, "aria-hidden": "true", children });
2200
- }
2201
- InputAffix.displayName = "Input.Affix";
2202
- function InputInlineAffix({ side, children, className, ...rest }) {
2203
- return /* @__PURE__ */ jsx20(
2204
- "span",
2205
- {
2206
- ...rest,
2207
- className: cx(Input_default.inlineAffix, className),
2208
- "data-side": side,
2209
- "aria-hidden": "true",
2210
- children
2211
- }
2212
- );
2213
- }
2214
- InputInlineAffix.displayName = "Input.InlineAffix";
2215
- function InputClearButton({ className, onClick: onClick2, ref, ...rest }) {
2216
- const { inputId, inputRef, labels } = useInputContext();
2217
- return /* @__PURE__ */ jsx20(
2218
- "button",
2219
- {
2220
- ...rest,
2221
- ref,
2222
- type: "button",
2223
- className: cx(Input_default.action, className),
2224
- "aria-label": labels.clear,
2225
- "aria-controls": inputId,
2226
- onClick: (event) => {
2227
- onClick2?.(event);
2228
- if (!event.defaultPrevented) inputRef.current?.focus();
2229
- },
2230
- children: /* @__PURE__ */ jsx20(Icon, { name: "action.close" })
2231
- }
2232
- );
2233
- }
2234
- InputClearButton.displayName = "Input.ClearButton";
2235
- function InputCounter(props) {
2236
- const { size, labels } = useInputContext();
2237
- return /* @__PURE__ */ jsx20(FieldCounter, { ...props, size, label: labels.counter });
2238
- }
2239
- InputCounter.displayName = "Input.Counter";
2240
- var Input = {
2241
- Root: InputRoot,
2242
- Wrapper: InputWrapper,
2243
- Field: InputField,
2244
- Icon: InputIcon,
2245
- Affix: InputAffix,
2246
- InlineAffix: InputInlineAffix,
2247
- ClearButton: InputClearButton,
2248
- Counter: InputCounter
2249
- };
2250
-
2251
- // src/internal/imageSlot.tsx
2252
- import * as React19 from "react";
2253
-
2254
- // src/hooks/useImageStatus.ts
2255
- import * as React18 from "react";
2256
- function useImageStatus(report, { onLoad, onError } = {}) {
2257
- const [status, setStatus] = React18.useState("loading");
2258
- React18.useLayoutEffect(() => {
2259
- report("loading");
2260
- return () => report("idle");
2261
- }, [report]);
2262
- const handleLoad = React18.useCallback(
2263
- (event) => {
2264
- setStatus("loaded");
2265
- report("loaded");
2266
- onLoad?.(event);
2267
- },
2268
- [onLoad, report]
2269
- );
2270
- const handleError = React18.useCallback(
2271
- (event) => {
2272
- setStatus("error");
2273
- report("error");
2274
- onError?.(event);
2275
- },
2276
- [onError, report]
2277
- );
2278
- return { status, onLoad: handleLoad, onError: handleError };
2279
- }
2280
-
2281
- // src/internal/imageSlot.tsx
2282
- import { jsx as jsx21 } from "react/jsx-runtime";
2283
- function createImageSlot(name, classNames) {
2284
- const [Provider, useSlotContext] = createComponentContext(name);
2285
- function ImageSlotProvider({ children }) {
2286
- const [imageStatus, setImageStatus] = React19.useState("idle");
2287
- const value = React19.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
2288
- return /* @__PURE__ */ jsx21(Provider, { value, children });
2289
- }
2290
- function ImageInner({ src, alt = "", className, onLoad, onError, ...rest }) {
2291
- const { setImageStatus } = useSlotContext();
2292
- const image = useImageStatus(setImageStatus, { onLoad, onError });
2293
- return /* @__PURE__ */ jsx21(
2294
- "img",
2295
- {
2296
- src,
2297
- alt,
2298
- className: cx(classNames.image, className),
2299
- onLoad: image.onLoad,
2300
- onError: image.onError,
2301
- ...toDataAttributes({ status: image.status }),
2302
- ...rest
2303
- }
2304
- );
2305
- }
2306
- function Image2(props) {
2307
- return /* @__PURE__ */ jsx21(ImageInner, { ...props }, props.src);
2308
- }
2309
- Image2.displayName = `${name}.Image`;
2310
- function Fallback({ className, ...rest }) {
2311
- const { imageStatus } = useSlotContext();
2312
- return /* @__PURE__ */ jsx21(
2313
- "span",
2314
- {
2315
- className: cx(classNames.fallback, className),
2316
- "aria-hidden": imageStatus === "loaded" ? true : void 0,
2317
- ...rest
2318
- }
2319
- );
2320
- }
2321
- Fallback.displayName = `${name}.Fallback`;
2322
- return {
2323
- ImageSlotProvider,
2324
- useImageSlot: () => useSlotContext().imageStatus,
2325
- Image: Image2,
2326
- Fallback
2327
- };
2328
- }
2329
-
2330
- // src/internal/palette.module.css
2331
- var palette_default = {
2332
- hue: "palette_hue"
2333
- };
2334
-
2335
- // src/components/thumbnail/Thumbnail.module.css
2336
- var Thumbnail_default = {
2337
- root: "Thumbnail_root",
2338
- image: "Thumbnail_image",
2339
- fallback: "Thumbnail_fallback"
2340
- };
2341
-
2342
- // src/components/thumbnail/Thumbnail.tsx
2343
- import { jsx as jsx22 } from "react/jsx-runtime";
2344
- var slot = createImageSlot("Thumbnail", { image: Thumbnail_default.image, fallback: Thumbnail_default.fallback });
2345
- function ThumbnailRoot({
2346
- size = "m",
2347
- ratio = "1:1",
2348
- color = "gray",
2349
- variant = "soft",
2350
- fullWidth = false,
2351
- ring = false,
2352
- className,
2353
- children,
2354
- ...rest
2355
- }) {
2356
- return /* @__PURE__ */ jsx22(slot.ImageSlotProvider, { children: /* @__PURE__ */ jsx22(
2357
- "div",
2358
- {
2359
- className: cx(Thumbnail_default.root, palette_default.hue, className),
2360
- ...toDataAttributes({
2361
- size,
2362
- ratio,
2363
- color,
2364
- variant,
2365
- "full-width": fullWidth || void 0,
2366
- ring: ring || void 0
2367
- }),
2368
- ...rest,
2369
- children
2370
- }
2371
- ) });
2372
- }
2373
- ThumbnailRoot.displayName = "Thumbnail.Root";
2374
- function ThumbnailImage({ fit = "cover", ...rest }) {
2375
- return /* @__PURE__ */ jsx22(slot.Image, { ...rest, "data-fit": fit });
2376
- }
2377
- ThumbnailImage.displayName = "Thumbnail.Image";
2378
- var ThumbnailFallback = slot.Fallback;
2379
- var Thumbnail = {
2380
- Root: ThumbnailRoot,
2381
- Image: ThumbnailImage,
2382
- Fallback: ThumbnailFallback
2383
- };
2384
-
2385
- // src/components/select/Select.tsx
2386
- import * as React33 from "react";
2387
-
2388
- // src/internal/listbox.ts
2389
- import * as React20 from "react";
2390
- var optionDomId = (listboxId, value) => `${listboxId}-opt-${value.replace(/\s+/g, "_")}`;
2391
- function enabledOptions(container) {
2392
- if (!container) return [];
2393
- return Array.from(
2394
- container.querySelectorAll('[role="option"]:not([data-disabled="true"])')
2395
- );
2396
- }
2397
- function createStore(initial) {
2398
- let value = initial;
2399
- const listeners = /* @__PURE__ */ new Set();
2400
- return {
2401
- get: () => value,
2402
- set: (next) => {
2403
- if (Object.is(value, next)) return;
2404
- value = next;
2405
- for (const listener of listeners) listener();
2406
- },
2407
- subscribe: (listener) => {
2408
- listeners.add(listener);
2409
- return () => listeners.delete(listener);
2410
- }
2411
- };
2412
- }
2413
- function useCreateStore(initial) {
2414
- return React20.useState(() => createStore(initial))[0];
2415
- }
2416
- function useStoreSlice(store, select) {
2417
- const read = () => select(store.get());
2418
- return React20.useSyncExternalStore(store.subscribe, read, read);
2419
- }
2420
- function handleListboxKeyDown(event, { items, highlight, onSelect }) {
2421
- if (items.length === 0) return;
2422
- const highlighted = highlight.get();
2423
- const current = items.findIndex((item) => item.dataset.value === highlighted);
2424
- const next = rovingIndex(event.key, current, items.length, "vertical");
2425
- if (next !== null) {
2426
- event.preventDefault();
2427
- const item = items[next];
2428
- highlight.set(item?.dataset.value);
2429
- item?.scrollIntoView?.({ block: "nearest" });
2430
- return;
2431
- }
2432
- if (event.key === "Enter" || event.key === " ") {
2433
- event.preventDefault();
2434
- if (highlighted === void 0) return;
2435
- onSelect(highlighted, items[current]?.dataset.label ?? highlighted);
2436
- }
2437
- }
2438
- var TYPEAHEAD_RESET_MS = 500;
2439
- function useTypeahead() {
2440
- const state = React20.useRef({ buffer: "", timer: 0 });
2441
- React20.useEffect(() => () => window.clearTimeout(state.current.timer), []);
2442
- const isTyping = React20.useCallback(() => state.current.buffer !== "", []);
2443
- const find = React20.useCallback(
2444
- (key, items, highlighted) => {
2445
- const s = state.current;
2446
- window.clearTimeout(s.timer);
2447
- s.buffer += key.toLocaleLowerCase();
2448
- s.timer = window.setTimeout(() => {
2449
- s.buffer = "";
2450
- }, TYPEAHEAD_RESET_MS);
2451
- const start = items.findIndex((item) => item.dataset.value === highlighted);
2452
- const repeated = [...s.buffer].every((char) => char === s.buffer[0]);
2453
- const prefix = repeated ? key.toLocaleLowerCase() : s.buffer;
2454
- const from = repeated ? start + 1 : Math.max(start, 0);
2455
- return [...items.slice(from), ...items.slice(0, from)].find(
2456
- (item) => (item.dataset.label ?? "").toLocaleLowerCase().startsWith(prefix)
2457
- );
2458
- },
2459
- []
2460
- );
2461
- return { find, isTyping };
2462
- }
2463
-
2464
- // src/internal/MenuGroup.tsx
2465
- import * as React21 from "react";
2466
-
2467
- // src/internal/menu.module.css
2468
- var menu_default = {
2469
- tier: "menu_tier",
2470
- menu: "menu_menu",
2471
- item: "menu_item",
2472
- itemIcon: "menu_itemIcon",
2473
- shortcut: "menu_shortcut",
2474
- check: "menu_check",
2475
- group: "menu_group",
2476
- groupLabel: "menu_groupLabel",
2477
- separator: "menu_separator",
2478
- searchRow: "menu_searchRow",
2479
- searchInput: "menu_searchInput"
2480
- };
2481
-
2482
- // src/internal/MenuGroup.tsx
2483
- import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
2484
- function MenuGroup({ label, className, children, ...rest }) {
2485
- const labelId = React21.useId();
2486
- return (
2487
- // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
2488
- /* @__PURE__ */ jsxs13(
2489
- "div",
2490
- {
2491
- ...rest,
2492
- role: "group",
2493
- "aria-labelledby": label != null ? labelId : void 0,
2494
- className: cx(menu_default.group, className),
2495
- children: [
2496
- label != null ? /* @__PURE__ */ jsx23("div", { id: labelId, role: "presentation", className: menu_default.groupLabel, children: label }) : null,
2497
- children
2498
- ]
2499
- }
2500
- )
2501
- );
2502
- }
2503
-
2504
- // src/internal/floatingSurface.module.css
2505
- var floatingSurface_default = {
2506
- surface: "floatingSurface_surface",
2507
- layer: "floatingSurface_layer",
2508
- scrim: "floatingSurface_scrim",
2509
- sheet: "floatingSurface_sheet",
2510
- sheetContent: "floatingSurface_sheetContent"
2511
- };
2512
-
2513
- // src/internal/overlayMotion.module.css
2514
- var overlayMotion_default = {
2515
- dialog: "overlayMotion_dialog",
2516
- drawer: "overlayMotion_drawer",
2517
- sheet: "overlayMotion_sheet",
2518
- floating: "overlayMotion_floating",
2519
- scrim: "overlayMotion_scrim",
2520
- overlayFadeIn: "overlayMotion_overlayFadeIn",
2521
- overlayFadeOut: "overlayMotion_overlayFadeOut",
2522
- overlayDialogIn: "overlayMotion_overlayDialogIn",
2523
- overlayDialogOut: "overlayMotion_overlayDialogOut",
2524
- overlaySheetIn: "overlayMotion_overlaySheetIn",
2525
- overlaySheetOut: "overlayMotion_overlaySheetOut",
2526
- overlayDrawerIn: "overlayMotion_overlayDrawerIn",
2527
- overlayDrawerOut: "overlayMotion_overlayDrawerOut",
2528
- overlayFloatIn: "overlayMotion_overlayFloatIn",
2529
- overlayFloatOut: "overlayMotion_overlayFloatOut"
2530
- };
2531
-
2532
- // src/internal/Portal.tsx
2533
- import * as React22 from "react";
2534
- import { createPortal } from "react-dom";
2535
- function Portal({ children, container }) {
2536
- const [mounted, setMounted] = React22.useState(false);
2537
- React22.useLayoutEffect(() => {
2538
- setMounted(true);
2539
- return () => setMounted(false);
2540
- }, []);
2541
- if (!mounted) return null;
2542
- return createPortal(children, container ?? document.body);
2543
- }
2544
-
2545
- // src/internal/sheet.module.css
2546
- var sheet_default = {
2547
- handle: "sheet_handle",
2548
- swipeY: "sheet_swipeY",
2549
- swipeX: "sheet_swipeX"
2550
- };
2551
-
2552
- // src/internal/surfaceDepth.tsx
2553
- import * as React23 from "react";
2554
- var SurfaceDepthContext = React23.createContext(0);
2555
- SurfaceDepthContext.displayName = "SurfaceDepthContext";
2556
- function nextSurfaceDepth(depth) {
2557
- if (typeof depth === "number") return Math.min(depth + 1, 4);
2558
- if (depth === "tinted") return 1;
2559
- return depth === "floating" ? "floating-1" : "floating-2";
2560
- }
2561
- function useNestedSurfaceDepth() {
2562
- return nextSurfaceDepth(React23.useContext(SurfaceDepthContext));
2563
- }
2564
- var SurfaceDepthProvider = SurfaceDepthContext.Provider;
2565
- var StageDepthContext = React23.createContext(0);
2566
- StageDepthContext.displayName = "StageDepthContext";
2567
- var StageDepthProvider = StageDepthContext.Provider;
2568
- function useStageDepth() {
2569
- return React23.useContext(StageDepthContext);
2570
- }
2571
-
2572
- // src/internal/overlay/layerStack.ts
2573
- import * as React24 from "react";
2574
-
2575
- // src/internal/overlay/focus.ts
2576
- var FOCUSABLE = [
2577
- "a[href]",
2578
- "button:not([disabled])",
2579
- 'input:not([disabled]):not([type="hidden"])',
2580
- "select:not([disabled])",
2581
- "textarea:not([disabled])",
2582
- "[tabindex]"
2583
- ].map((selector) => `${selector}:not([tabindex="-1"])`).join(", ");
2584
- function getFocusable(container) {
2585
- return Array.from(container.querySelectorAll(FOCUSABLE)).filter((el) => {
2586
- if (el.getAttribute("aria-hidden") === "true") return false;
2587
- const style = window.getComputedStyle(el);
2588
- return style.display !== "none" && style.visibility !== "hidden";
2589
- });
2590
- }
2591
- function focusInto(container) {
2592
- if (container.contains(document.activeElement)) return;
2593
- const target = container.querySelector("[data-autofocus]") ?? getFocusable(container)[0] ?? container;
2594
- target.focus({ preventScroll: true });
2595
- }
2596
- function focusBack(el) {
2597
- if (el?.isConnected) el.focus({ preventScroll: true });
2598
- }
2599
- function activeElement() {
2600
- if (typeof document === "undefined") return null;
2601
- const el = document.activeElement;
2602
- return el instanceof HTMLElement && el !== document.body ? el : null;
2603
- }
2604
-
2605
- // src/internal/overlay/layerStack.ts
2606
- var stack = [];
2607
- var pendingClick = null;
2608
- function isAncestor(ancestor, entry) {
2609
- for (let p = entry.parent; p; p = p.parent) if (p === ancestor) return true;
2610
- return false;
2611
- }
2612
- function contains(entry, target) {
2613
- return target !== null && entry.refs.some((ref) => ref.current?.contains(target));
2614
- }
2615
- function topInteractive() {
2616
- for (let i = stack.length - 1; i >= 0; i--) {
2617
- if (stack[i]?.dismiss !== "none") return stack[i];
2618
- }
2619
- return void 0;
2620
- }
2621
- function trapTab(event) {
2622
- const active = document.activeElement;
2623
- for (let i = stack.length - 1; i >= 0; i--) {
2624
- const entry = stack[i];
2625
- if (!entry || entry.dismiss === "none") continue;
2626
- const panel = entry.refs[0]?.current;
2627
- if (!panel) continue;
2628
- const inside = panel.contains(active);
2629
- if (!entry.trap) {
2630
- if (inside) return;
2631
- continue;
2632
- }
2633
- const focusable = getFocusable(panel);
2634
- if (focusable.length === 0) {
2635
- event.preventDefault();
2636
- panel.focus({ preventScroll: true });
2637
- return;
2638
- }
2639
- const first = focusable[0];
2640
- const last = focusable[focusable.length - 1];
2641
- if (event.shiftKey ? !inside || active === first : !inside || active === last) {
2642
- event.preventDefault();
2643
- (event.shiftKey ? last : first)?.focus();
2644
- }
2645
- return;
2646
- }
2647
- }
2648
- function onKeyDown(event) {
2649
- if (event.key === "Tab") {
2650
- trapTab(event);
2651
- return;
2652
- }
2653
- if (event.key !== "Escape" || event.defaultPrevented) return;
2654
- stack[stack.length - 1]?.onDismiss("escape");
2655
- }
2656
- function onPointerDown(event) {
2657
- pendingClick = null;
2658
- const top = topInteractive();
2659
- const target = event.target instanceof Node ? event.target : null;
2660
- if (!top || !target || contains(top, target)) return;
2661
- if (top.dismiss === "click") pendingClick = top;
2662
- else top.onDismiss("outside");
2663
- }
2664
- function onClick(event) {
2665
- const layer = pendingClick;
2666
- pendingClick = null;
2667
- const target = event.target instanceof Node ? event.target : null;
2668
- if (!layer || layer !== topInteractive() || !target || contains(layer, target)) return;
2669
- layer.onDismiss("scrim");
2670
- }
2671
- function listen(on) {
2672
- if (on) {
2673
- document.addEventListener("keydown", onKeyDown);
2674
- document.addEventListener("pointerdown", onPointerDown, true);
2675
- document.addEventListener("click", onClick, true);
2676
- } else {
2677
- document.removeEventListener("keydown", onKeyDown);
2678
- document.removeEventListener("pointerdown", onPointerDown, true);
2679
- document.removeEventListener("click", onClick, true);
2680
- }
2681
- }
2682
- function push(entry) {
2683
- if (stack.length === 0) listen(true);
2684
- const below = stack.findIndex((other) => isAncestor(entry, other));
2685
- if (below === -1) stack.push(entry);
2686
- else stack.splice(below, 0, entry);
2687
- return () => {
2688
- const index = stack.indexOf(entry);
2689
- if (index !== -1) stack.splice(index, 1);
2690
- if (pendingClick === entry) pendingClick = null;
2691
- if (stack.length === 0) listen(false);
2692
- };
2693
- }
2694
- var LayerContext = React24.createContext(null);
2695
- var LayerProvider = LayerContext.Provider;
2696
- function useLayer(open, options) {
2697
- const parent = React24.useContext(LayerContext);
2698
- const [entry] = React24.useState(() => ({ parent, trap: false, ...options }));
2699
- entry.parent = parent;
2700
- entry.refs = options.refs;
2701
- entry.dismiss = options.dismiss;
2702
- entry.trap = options.trap ?? false;
2703
- entry.onDismiss = options.onDismiss;
2704
- React24.useLayoutEffect(() => open ? push(entry) : void 0, [open, entry]);
2705
- return entry;
2706
- }
2707
-
2708
- // src/internal/overlay/FloatingPanel.tsx
2709
- import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
2710
- function FloatingPanel({
2711
- floating,
2712
- size,
2713
- scroll = false,
2714
- surface = true,
2715
- className,
2716
- onKeyDown: onKeyDown2,
2717
- children,
2718
- ref,
2719
- ...rest
2720
- }) {
2721
- const mergedRef = useMergedRefs(floating.panelRef, ref);
2722
- if (!floating.mounted) return null;
2723
- const { sheet, presence } = floating;
2724
- const panelRef = sheet ? ref : mergedRef;
2725
- const props = {
2726
- ...rest,
2727
- className: sheet ? cx(floatingSurface_default.sheetContent, className) : cx(
2728
- surface && floatingSurface_default.surface,
2729
- floatingSurface_default.layer,
2730
- overlayMotion_default.floating,
2731
- className
2732
- ),
2733
- "data-size": size,
2734
- ...surface && !sheet ? { "data-depth": "floating" } : null,
2735
- ...sheet ? null : {
2736
- "data-state": presence.state,
2737
- "data-side": floating.side,
2738
- onAnimationEnd: presence.onExitEnd
2739
- },
2740
- onKeyDown: (event) => {
2741
- onKeyDown2?.(event);
2742
- floating.onKeyDown(event);
2743
- }
2744
- };
2745
- const panel = scroll ? /* @__PURE__ */ jsx24(ScrollContainer, { ...props, ref: panelRef, children }) : /* @__PURE__ */ jsx24("div", { ...props, ref: panelRef, children });
2746
- return /* @__PURE__ */ jsx24(Portal, { children: /* @__PURE__ */ jsx24(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx24(SurfaceDepthProvider, { value: "floating", children: /* @__PURE__ */ jsx24(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
2747
- /* @__PURE__ */ jsx24(
2748
- "div",
2749
- {
2750
- role: "presentation",
2751
- className: cx(floatingSurface_default.scrim, floatingSurface_default.layer, overlayMotion_default.scrim),
2752
- "data-state": presence.state
2753
- }
2754
- ),
2755
- /* @__PURE__ */ jsxs14(
2756
- "div",
2757
- {
2758
- ref: floating.panelRef,
2759
- className: cx(
2760
- floatingSurface_default.sheet,
2761
- floatingSurface_default.layer,
2762
- overlayMotion_default.sheet,
2763
- sheet_default.swipeY
2764
- ),
2765
- "data-depth": "floating",
2766
- "data-state": presence.state,
2767
- onAnimationEnd: presence.onExitEnd,
2768
- onPointerDown: floating.onSheetPointerDown,
2769
- children: [
2770
- /* @__PURE__ */ jsx24("div", { className: sheet_default.handle, "data-swipe-handle": "", "aria-hidden": "true" }),
2771
- panel
2772
- ]
2773
- }
2774
- )
2775
- ] }) : panel }) }) }) });
2776
- }
2777
- function FloatingTrigger({ triggerProps, children, ...forwarded }) {
2778
- return /* @__PURE__ */ jsx24(Slot, { ...forwarded, children: /* @__PURE__ */ jsx24(Slot, { ...triggerProps, children }) });
2779
- }
2780
-
2781
- // src/internal/overlay/useFloatingLayer.ts
2782
- import * as React30 from "react";
2783
-
2784
- // src/hooks/useMediaQuery.ts
2785
- import * as React25 from "react";
2786
- var COMPACT_QUERY = "(max-width: 639px)";
2787
- function useMediaQuery(query, enabled = true) {
2788
- const subscribe = React25.useCallback(
2789
- (onChange) => {
2790
- if (!enabled || typeof window === "undefined" || !window.matchMedia) return () => {
2791
- };
2792
- const mq = window.matchMedia(query);
2793
- mq.addEventListener("change", onChange);
2794
- return () => mq.removeEventListener("change", onChange);
2795
- },
2796
- [enabled, query]
2797
- );
2798
- const getSnapshot = () => enabled && typeof window !== "undefined" && !!window.matchMedia ? window.matchMedia(query).matches : false;
2799
- return React25.useSyncExternalStore(subscribe, getSnapshot, () => false);
2800
- }
2801
-
2802
- // src/hooks/usePosition.ts
2803
- import * as React27 from "react";
2804
-
2805
- // src/internal/AnchorRectContext.tsx
2806
- import * as React26 from "react";
2807
- var AnchorRectContext = React26.createContext(null);
2808
- var AnchorRectProvider = AnchorRectContext.Provider;
2809
- function useAnchorRectResolver() {
2810
- return React26.useContext(AnchorRectContext);
2811
- }
2812
-
2813
- // src/internal/layoutPxFromPrimitives.ts
2814
- var FALLBACK_ROOT_FONT_PX = 16;
2815
- function getRootFontSizePx() {
2816
- if (typeof document === "undefined") {
2817
- return FALLBACK_ROOT_FONT_PX;
2818
- }
2819
- const raw = getComputedStyle(document.documentElement).fontSize;
2820
- const parsed = Number.parseFloat(raw);
2821
- return Number.isFinite(parsed) && parsed > 0 ? parsed : FALLBACK_ROOT_FONT_PX;
2822
- }
2823
-
2824
- // src/internal/scrollAncestors.ts
2825
- var SCROLLABLE = /^(auto|scroll|overlay)$/;
2826
- function getScrollContainers(node) {
2827
- const out = [window];
2828
- if (!node || typeof window === "undefined") return out;
2829
- for (let el = node.parentElement; el; el = el.parentElement) {
2830
- const { overflowX, overflowY } = window.getComputedStyle(el);
2831
- if (SCROLLABLE.test(overflowY) || SCROLLABLE.test(overflowX)) {
2832
- out.push(el);
2833
- }
2834
- }
2835
- if (window.visualViewport) out.push(window.visualViewport);
2836
- return out;
2837
- }
2838
-
2839
- // src/hooks/usePosition.ts
2840
- var FLOAT_MAX_HEIGHT_VAR = "--float-max-h";
2841
- var FLOAT_MIN_WIDTH_VAR = "--float-min-w";
2842
- var FLOAT_MAX_WIDTH_VAR = "--float-max-w";
2843
- var FLOAT_ARROW_VAR = "--float-arrow";
2844
- var MIN_MENU_ESTIMATE = 176;
2845
- var FALLBACK_VIEWPORT_PAD_PX = 8;
2846
- var FALLBACK_PANEL_OFFSET_PX = 4;
2847
- var MIN_FLOATING_MAX_HEIGHT = 120;
2848
- var FIRST_PAINT_FLOAT_HEIGHT_GUESS_PX = 280;
2849
- var OPPOSITE = {
2850
- top: "bottom",
2851
- bottom: "top",
2852
- left: "right",
2853
- right: "left"
2854
- };
2855
- function readCssLengthPx(name, fallbackPx) {
2856
- if (typeof document === "undefined") return fallbackPx;
2857
- const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
2858
- if (!raw) return fallbackPx;
2859
- const n = Number.parseFloat(raw);
2860
- if (!Number.isFinite(n)) return fallbackPx;
2861
- if (raw.endsWith("rem")) return Math.round(n * getRootFontSizePx());
2862
- if (raw.endsWith("px") || n === 0) return Math.round(n);
2863
- return fallbackPx;
2864
- }
2865
- function getViewportPadPx() {
2866
- return readCssLengthPx("--prime-space-2", FALLBACK_VIEWPORT_PAD_PX);
2867
- }
2868
- var clamp = (value, min, max) => Math.max(min, Math.min(value, Math.max(min, max)));
2869
- function computeFloatingPosition(anchor, contentW, contentH, vw, vh, opts) {
2870
- const { align, offset, flip, matchAnchorWidth, arrowInset } = opts;
2871
- const pad = opts.viewportPad ?? FALLBACK_VIEWPORT_PAD_PX;
2872
- const room = {
2873
- top: anchor.top - offset - pad,
2874
- bottom: vh - anchor.bottom - offset - pad,
2875
- left: anchor.left - offset - pad,
2876
- right: vw - anchor.right - offset - pad
2877
- };
2878
- const isVertical = (s) => s === "top" || s === "bottom";
2879
- const mainSize = isVertical(opts.side) ? contentH : contentW;
2880
- let side = opts.side;
2881
- if (flip && mainSize > 0 && room[side] < mainSize) {
2882
- const opposite = OPPOSITE[side];
2883
- if (room[opposite] >= mainSize || room[opposite] > room[side]) side = opposite;
2884
- }
2885
- const vertical = isVertical(side);
2886
- const viewportMaxWidth = Math.max(0, Math.floor(vw - pad * 2));
2887
- const maxWidth = vertical ? viewportMaxWidth : Math.max(0, Math.min(viewportMaxWidth, Math.floor(room[side])));
2888
- const width = Math.min(
2889
- maxWidth,
2890
- contentW > 0 ? contentW : matchAnchorWidth ? anchor.width : Math.max(anchor.width, MIN_MENU_ESTIMATE)
2891
- );
2892
- let main;
2893
- if (side === "bottom") main = anchor.bottom + offset;
2894
- else if (side === "right") main = anchor.right + offset;
2895
- else if (side === "left") main = Math.max(pad, anchor.left - offset - width);
2896
- else
2897
- main = Math.max(
2898
- pad,
2899
- anchor.top - offset - (contentH > 0 ? contentH : FIRST_PAINT_FLOAT_HEIGHT_GUESS_PX)
2900
- );
2901
- const anchorStart = vertical ? anchor.left : anchor.top;
2902
- const anchorSize = vertical ? anchor.width : anchor.height;
2903
- const crossSize = vertical ? width : contentH;
2904
- const viewport = vertical ? vw : vh;
2905
- const crossFor = (a) => a === "start" ? anchorStart : a === "end" ? anchorStart + anchorSize - crossSize : anchorStart + anchorSize / 2 - crossSize / 2;
2906
- const fits = (x) => x >= pad && x + crossSize <= viewport - pad;
2907
- let cross = crossFor(align);
2908
- if (flip && !fits(cross)) {
2909
- const opposite = align === "end" ? "start" : align === "start" ? "end" : align;
2910
- if (opposite !== align && fits(crossFor(opposite))) cross = crossFor(opposite);
2911
- }
2912
- cross = Math.round(clamp(cross, pad, viewport - crossSize - pad));
2913
- const out = {
2914
- top: Math.round(vertical ? main : cross),
2915
- left: Math.round(vertical ? cross : main),
2916
- side,
2917
- maxWidth,
2918
- maxHeight: Math.max(MIN_FLOATING_MAX_HEIGHT, Math.floor(vertical ? room[side] : vh - pad * 2))
2919
- };
2920
- if (matchAnchorWidth) out.minWidth = Math.min(anchor.width, maxWidth);
2921
- if (arrowInset !== void 0) {
2922
- out.arrow = Math.round(
2923
- clamp(anchorStart + anchorSize / 2 - cross, arrowInset, crossSize - arrowInset)
2924
- );
2925
- }
2926
- return out;
2927
- }
2928
- function usePosition(enabled, anchorRef, layerRef, {
2929
- side: preferredSide = "bottom",
2930
- align = "start",
2931
- matchAnchorWidth = false,
2932
- offsetToken = "--prime-panel-offset",
2933
- arrowInset
2934
- } = {}) {
2935
- const [attached, setAttached] = React27.useState(false);
2936
- const [resolvedSide, setResolvedSide] = React27.useState(preferredSide);
2937
- const resolveAnchorRect = useAnchorRectResolver();
2938
- const metricsRef = React27.useRef(null);
2939
- const update = React27.useCallback(
2940
- (remeasure) => {
2941
- const anchor = anchorRef.current;
2942
- const layer = layerRef.current;
2943
- if (!anchor || !layer) return;
2944
- if (remeasure || !metricsRef.current) {
2945
- metricsRef.current = {
2946
- offset: readCssLengthPx(offsetToken, FALLBACK_PANEL_OFFSET_PX),
2947
- pad: getViewportPadPx(),
2948
- arrow: arrowInset?.(layer)
2949
- };
2950
- }
2951
- const { offset, pad, arrow } = metricsRef.current;
2952
- const rect = anchor.getBoundingClientRect();
2953
- const pos = computeFloatingPosition(
2954
- resolveAnchorRect ? resolveAnchorRect(anchor, rect) : rect,
2955
- layer.offsetWidth,
2956
- layer.offsetHeight,
2957
- window.innerWidth,
2958
- window.innerHeight,
2959
- {
2960
- side: preferredSide,
2961
- align,
2962
- offset,
2963
- viewportPad: pad,
2964
- flip: true,
2965
- matchAnchorWidth,
2966
- arrowInset: arrow
2967
- }
2968
- );
2969
- setResolvedSide(pos.side);
2970
- const set = (name, value) => {
2971
- if (layer.style.getPropertyValue(name) !== value) layer.style.setProperty(name, value);
2972
- };
2973
- const px = (n) => n === void 0 ? "" : `${n}px`;
2974
- set("position", "fixed");
2975
- set("top", px(pos.top));
2976
- set("left", px(pos.left));
2977
- set(FLOAT_MIN_WIDTH_VAR, px(pos.minWidth));
2978
- set(FLOAT_MAX_WIDTH_VAR, px(pos.maxWidth));
2979
- set(FLOAT_MAX_HEIGHT_VAR, px(pos.maxHeight));
2980
- set(FLOAT_ARROW_VAR, px(pos.arrow));
2981
- },
2982
- [
2983
- anchorRef,
2984
- layerRef,
2985
- preferredSide,
2986
- align,
2987
- matchAnchorWidth,
2988
- offsetToken,
2989
- arrowInset,
2990
- resolveAnchorRect
2991
- ]
2992
- );
2993
- const updateRef = React27.useRef(update);
2994
- updateRef.current = update;
2995
- const attachLayer = React27.useCallback(
2996
- (node) => {
2997
- layerRef.current = node;
2998
- setAttached(node !== null);
2999
- },
3000
- [layerRef]
3001
- );
3002
- const active = enabled && attached;
3003
- React27.useLayoutEffect(() => {
3004
- if (active) update(true);
3005
- }, [active, update]);
3006
- React27.useLayoutEffect(() => {
3007
- if (!active) return;
3008
- let frame = 0;
3009
- let remeasure = false;
3010
- const schedule = (measure) => {
3011
- remeasure ||= measure;
3012
- cancelAnimationFrame(frame);
3013
- frame = requestAnimationFrame(() => {
3014
- updateRef.current(remeasure);
3015
- remeasure = false;
3016
- });
3017
- };
3018
- const follow = () => schedule(false);
3019
- const resize = () => schedule(true);
3020
- window.addEventListener("resize", resize);
3021
- const scrollTargets = getScrollContainers(anchorRef.current);
3022
- for (const target of scrollTargets) {
3023
- target.addEventListener("scroll", follow, { passive: true });
3024
- }
3025
- window.visualViewport?.addEventListener("resize", resize);
3026
- const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(follow);
3027
- if (layerRef.current) observer?.observe(layerRef.current);
3028
- if (anchorRef.current) observer?.observe(anchorRef.current);
3029
- return () => {
3030
- cancelAnimationFrame(frame);
3031
- window.removeEventListener("resize", resize);
3032
- for (const target of scrollTargets) target.removeEventListener("scroll", follow);
3033
- window.visualViewport?.removeEventListener("resize", resize);
3034
- observer?.disconnect();
3035
- };
3036
- }, [active, anchorRef, layerRef]);
3037
- return { side: resolvedSide, attachLayer };
3038
- }
3039
-
3040
- // src/hooks/useScrollLock.ts
3041
- import * as React28 from "react";
3042
- var lockCount = 0;
3043
- var saved = null;
3044
- function lockScroll() {
3045
- if (lockCount === 0) {
3046
- const { body, documentElement } = document;
3047
- const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
3048
- saved = { overflow: body.style.overflow, paddingRight: body.style.paddingRight };
3049
- if (scrollbarWidth > 0) {
3050
- const padding = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
3051
- body.style.paddingRight = `${padding + scrollbarWidth}px`;
3052
- }
3053
- body.style.overflow = "hidden";
3054
- }
3055
- lockCount++;
3056
- }
3057
- function unlockScroll() {
3058
- lockCount = Math.max(0, lockCount - 1);
3059
- if (lockCount === 0 && saved) {
3060
- document.body.style.overflow = saved.overflow;
3061
- document.body.style.paddingRight = saved.paddingRight;
3062
- saved = null;
3063
- }
3064
- }
3065
- function useScrollLock(enabled) {
3066
- React28.useEffect(() => {
3067
- if (!enabled) return;
3068
- lockScroll();
3069
- return unlockScroll;
3070
- }, [enabled]);
3071
- }
3072
-
3073
- // src/hooks/useSwipeDismiss.ts
3074
- import * as React29 from "react";
3075
- var SLOP_PX = 8;
3076
- var DISTANCE_RATIO = 0.3;
3077
- var FLICK_VELOCITY = 0.5;
3078
- var VELOCITY_WINDOW_MS = 100;
3079
- var NO_DRAG = "input, textarea, select, [contenteditable], [role='slider']";
3080
- var SWIPE_OFFSET_VAR = "--swipe-offset";
3081
- var OVERPULL_PX = 24;
3082
- function rubberBand(distance) {
3083
- return -OVERPULL_PX * (1 - 1 / (1 + Math.abs(distance) / OVERPULL_PX));
3084
- }
3085
- function inCrossScroller(target, panel, horizontal) {
3086
- for (let node = target; node && node !== panel; node = node.parentElement) {
3087
- const style = getComputedStyle(node);
3088
- const overflow = horizontal ? style.overflowX : style.overflowY;
3089
- const scrolls = horizontal ? node.scrollWidth > node.clientWidth : node.scrollHeight > node.clientHeight;
3090
- if (scrolls && (overflow === "auto" || overflow === "scroll")) return true;
3091
- }
3092
- return false;
3093
- }
3094
- function useSwipeDismiss({
3095
- enabled,
3096
- direction,
3097
- onDismiss,
3098
- handle,
3099
- touchAnywhere = false,
3100
- onProgress
3101
- }) {
3102
- const optionsRef = React29.useRef({ direction, onDismiss, handle, touchAnywhere, onProgress });
3103
- optionsRef.current = { direction, onDismiss, handle, touchAnywhere, onProgress };
3104
- const cleanupRef = React29.useRef(null);
3105
- React29.useEffect(() => () => cleanupRef.current?.(), []);
3106
- const onPointerDown2 = React29.useCallback(
3107
- (event) => {
3108
- if (!enabled || event.defaultPrevented || !event.isPrimary || event.button !== 0) return;
3109
- const { direction: direction2, handle: handle2, touchAnywhere: touchAnywhere2 } = optionsRef.current;
3110
- const panel = event.currentTarget;
3111
- const target = event.target;
3112
- if (target.closest(NO_DRAG)) return;
3113
- const fromHandle = target.closest(handle2) !== null && panel.contains(target.closest(handle2));
3114
- const horizontal = direction2 !== "down";
3115
- if (!fromHandle) {
3116
- if (!touchAnywhere2 || event.pointerType !== "touch") return;
3117
- if (inCrossScroller(target, panel, horizontal)) return;
3118
- }
3119
- cleanupRef.current?.();
3120
- const pointerId = event.pointerId;
3121
- const sign = direction2 === "left" ? -1 : 1;
3122
- const start = horizontal ? event.clientX : event.clientY;
3123
- const startCross = horizontal ? event.clientY : event.clientX;
3124
- let dragging = false;
3125
- let offset = 0;
3126
- let samples = [];
3127
- const full = horizontal ? panel.offsetWidth : panel.offsetHeight;
3128
- const write = (value, progress = full > 0 ? value / full : value > 0 ? 1 : 0) => {
3129
- panel.style.setProperty(SWIPE_OFFSET_VAR, `${value * sign}px`);
3130
- optionsRef.current.onProgress?.(Math.min(1, Math.max(0, progress)));
3131
- };
3132
- const finish = () => {
3133
- window.removeEventListener("pointermove", onMove);
3134
- window.removeEventListener("pointerup", onUp);
3135
- window.removeEventListener("pointercancel", onCancel);
3136
- cleanupRef.current = null;
3137
- };
3138
- const settle = (dismiss) => {
3139
- delete panel.dataset.swiping;
3140
- if (dismiss) {
3141
- panel.dataset.swipeDismissed = "";
3142
- write(full, 1);
3143
- optionsRef.current.onDismiss();
3144
- } else {
3145
- write(0);
3146
- }
3147
- };
3148
- const onMove = (move) => {
3149
- if (move.pointerId !== pointerId) return;
3150
- const along = ((horizontal ? move.clientX : move.clientY) - start) * sign;
3151
- const across = (horizontal ? move.clientY : move.clientX) - startCross;
3152
- if (!dragging) {
3153
- if (Math.abs(along) < SLOP_PX && Math.abs(across) < SLOP_PX) return;
3154
- if (Math.abs(across) > Math.abs(along) || !fromHandle && along < 0) {
3155
- finish();
3156
- return;
3157
- }
3158
- dragging = true;
3159
- panel.dataset.swiping = "";
3160
- panel.setPointerCapture?.(pointerId);
3161
- }
3162
- move.preventDefault();
3163
- offset = along > 0 ? along : rubberBand(along);
3164
- write(offset);
3165
- const now = move.timeStamp;
3166
- samples.push({ t: now, d: along });
3167
- samples = samples.filter((s) => now - s.t <= VELOCITY_WINDOW_MS);
3168
- };
3169
- const onUp = (up) => {
3170
- if (up.pointerId !== pointerId) return;
3171
- finish();
3172
- if (!dragging) return;
3173
- const first = samples[0];
3174
- const last = samples[samples.length - 1];
3175
- const elapsed = first && last ? last.t - first.t : 0;
3176
- const velocity = elapsed > 0 ? (last.d - first.d) / elapsed : 0;
3177
- settle(offset > full * DISTANCE_RATIO || offset > SLOP_PX && velocity > FLICK_VELOCITY);
3178
- };
3179
- const onCancel = (cancel) => {
3180
- if (cancel.pointerId !== pointerId) return;
3181
- finish();
3182
- if (dragging) settle(false);
3183
- };
3184
- window.addEventListener("pointermove", onMove, { passive: false });
3185
- window.addEventListener("pointerup", onUp);
3186
- window.addEventListener("pointercancel", onCancel);
3187
- cleanupRef.current = finish;
3188
- },
3189
- [enabled]
3190
- );
3191
- return { onPointerDown: onPointerDown2 };
3192
- }
3193
-
3194
- // src/internal/overlay/useFloatingLayer.ts
3195
- function useFloatingLayer({
3196
- open,
3197
- onOpenChange,
3198
- triggerRef,
3199
- closeOnEscape = true,
3200
- closeOnOutsideClick = true,
3201
- dismiss = "pointerdown",
3202
- focusOnOpen = false,
3203
- trap = false,
3204
- tabExit = "none",
3205
- exitDuration = "fast",
3206
- skipExit = false,
3207
- sheet: sheetOption = false,
3208
- ...positionOptions
3209
- }) {
3210
- const sheet = useMediaQuery(COMPACT_QUERY, sheetOption);
3211
- const presence = usePresence(open, { exitDuration: sheet ? "base" : exitDuration });
3212
- const mounted = presence.mounted && (open || !skipExit);
3213
- const contentRef = React30.useRef(null);
3214
- const position = usePosition(mounted && !sheet, triggerRef, contentRef, positionOptions);
3215
- useScrollLock(open && sheet);
3216
- const [panel, setPanel] = React30.useState(null);
3217
- const { attachLayer } = position;
3218
- const panelRef = React30.useCallback(
3219
- (node) => {
3220
- attachLayer(node);
3221
- setPanel(node);
3222
- },
3223
- [attachLayer]
3224
- );
3225
- const outsideRef = React30.useRef(false);
3226
- const close = React30.useCallback(() => {
3227
- outsideRef.current = false;
3228
- onOpenChange(false);
3229
- }, [onOpenChange]);
3230
- const dismissOutside = React30.useCallback(() => {
3231
- outsideRef.current = true;
3232
- onOpenChange(false);
3233
- }, [onOpenChange]);
3234
- const swipe = useSwipeDismiss({
3235
- enabled: sheet && open && closeOnOutsideClick,
3236
- direction: "down",
3237
- onDismiss: dismissOutside,
3238
- handle: "[data-swipe-handle]"
3239
- });
3240
- const onDismiss = (reason) => {
3241
- if (reason === "escape") {
3242
- if (closeOnEscape) close();
3243
- } else if (closeOnOutsideClick) {
3244
- dismissOutside();
3245
- }
3246
- };
3247
- const layer = useLayer(open, {
3248
- refs: [contentRef, triggerRef],
3249
- dismiss,
3250
- trap,
3251
- onDismiss
3252
- });
3253
- const passive = dismiss === "none";
3254
- React30.useEffect(() => {
3255
- if (!open || !panel || passive) return;
3256
- outsideRef.current = false;
3257
- if (focusOnOpen) focusInto(panel);
3258
- return () => {
3259
- if (outsideRef.current) return;
3260
- const active = document.activeElement;
3261
- if (!active || active === document.body || panel.contains(active)) {
3262
- focusBack(triggerRef.current);
3263
- }
3264
- };
3265
- }, [open, panel, passive, focusOnOpen, triggerRef]);
3266
- const onKeyDown2 = (event) => {
3267
- if (event.key !== "Tab" || event.defaultPrevented || trap || tabExit === "none") return;
3268
- const node = contentRef.current;
3269
- if (!node) return;
3270
- if (tabExit === "edges") {
3271
- const focusable = getFocusable(node);
3272
- const active = document.activeElement;
3273
- const leaving = event.shiftKey ? active === node || active === focusable[0] : focusable.length === 0 || active === focusable[focusable.length - 1];
3274
- if (!leaving) return;
3275
- }
3276
- if (event.shiftKey) event.preventDefault();
3277
- focusBack(triggerRef.current);
3278
- close();
3279
- };
3280
- return {
3281
- open,
3282
- presence,
3283
- mounted,
3284
- side: position.side,
3285
- sheet,
3286
- onSheetPointerDown: swipe.onPointerDown,
3287
- panelRef,
3288
- contentRef,
3289
- layer,
3290
- close,
3291
- onKeyDown: onKeyDown2
3292
- };
3293
- }
3294
-
3295
- // src/components/select/Select.module.css
3296
- var Select_default = {
3297
- trigger: "Select_trigger",
3298
- triggerMain: "Select_triggerMain",
3299
- value: "Select_value",
3300
- valueBody: "Select_valueBody",
3301
- triggerIcon: "Select_triggerIcon",
3302
- chevron: "Select_chevron",
3303
- clear: "Select_clear",
3304
- content: "Select_content",
3305
- listbox: "Select_listbox",
3306
- search: "Select_search",
3307
- group: "Select_group",
3308
- separator: "Select_separator",
3309
- status: "Select_status",
3310
- item: "Select_item",
3311
- itemText: "Select_itemText",
3312
- itemTitle: "Select_itemTitle",
3313
- itemDescription: "Select_itemDescription",
3314
- itemMeta: "Select_itemMeta",
3315
- media: "Select_media"
3316
- };
3317
-
3318
- // src/components/select/SelectItem.tsx
3319
- import * as React32 from "react";
3320
-
3321
- // src/internal/HighlightMatch.tsx
3322
- import * as React31 from "react";
3323
-
3324
- // src/internal/HighlightMatch.module.css
3325
- var HighlightMatch_default = {
3326
- match: "HighlightMatch_match"
3327
- };
3328
-
3329
- // src/internal/HighlightMatch.tsx
3330
- import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
3331
- function matchIndex(text, query) {
3332
- if (!query) return -1;
3333
- return text.toLowerCase().indexOf(query.toLowerCase());
3334
- }
3335
- function HighlightMatch({ text, query }) {
3336
- const q = query.trim();
3337
- const at = matchIndex(text, q);
3338
- if (at < 0) return /* @__PURE__ */ jsx25(Fragment8, { children: text });
3339
- return /* @__PURE__ */ jsxs15("span", { children: [
3340
- text.slice(0, at),
3341
- /* @__PURE__ */ jsx25("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
3342
- text.slice(at + q.length)
3343
- ] });
3344
- }
3345
- function highlightChildren(children, query) {
3346
- if (!query.trim()) return children;
3347
- return React31.Children.map(
3348
- children,
3349
- (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx25(HighlightMatch, { text: String(child), query }) : child
3350
- );
3351
- }
3352
-
3353
- // src/components/select/selectContext.ts
3354
- var normalize = (text) => text.trim().toLocaleLowerCase();
3355
- function createItemRegistry() {
3356
- const entries = /* @__PURE__ */ new Map();
3357
- const version = createStore(0);
3358
- const bump = () => version.set(version.get() + 1);
3359
- return {
3360
- version,
3361
- labelOf: (value) => entries.get(value)?.label ?? value,
3362
- register: (value, label, haystack) => {
3363
- const entry = entries.get(value);
3364
- entries.set(value, { label, haystack, mounted: (entry?.mounted ?? 0) + 1 });
3365
- bump();
3366
- return () => {
3367
- const current = entries.get(value);
3368
- if (current) current.mounted -= 1;
3369
- bump();
3370
- };
3371
- },
3372
- anyMatch: (query) => {
3373
- for (const entry of entries.values()) {
3374
- if (entry.mounted > 0 && (query === "" || entry.haystack.includes(query))) return true;
3375
- }
3376
- return false;
3377
- }
3378
- };
3379
- }
3380
- var [SelectProvider, useSelectContext] = createComponentContext("Select");
3381
-
3382
- // src/components/select/SelectItem.tsx
3383
- import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
3384
- var MEDIA_SIZE = { xs: "xs", s: "xs", m: "s", l: "s", xl: "m" };
3385
- function textOf(node) {
3386
- if (node == null || typeof node === "boolean") return "";
3387
- if (typeof node === "string" || typeof node === "number") return String(node);
3388
- if (Array.isArray(node)) return node.map(textOf).join("");
3389
- if (React32.isValidElement(node))
3390
- return textOf(node.props.children);
3391
- return "";
3392
- }
3393
- function SelectItemIcon({ className, ...rest }) {
3394
- return /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, className), ...rest });
3395
- }
3396
- SelectItemIcon.displayName = "Select.ItemIcon";
3397
- var OptionQueryContext = React32.createContext("");
3398
- function SelectItemText({ children, className, ...rest }) {
3399
- const query = React32.useContext(OptionQueryContext);
3400
- return /* @__PURE__ */ jsx26("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
3401
- }
3402
- SelectItemText.displayName = "Select.ItemText";
3403
- function SelectItemDescription({
3404
- children,
3405
- className,
3406
- ...rest
3407
- }) {
3408
- const query = React32.useContext(OptionQueryContext);
3409
- return /* @__PURE__ */ jsx26("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
3410
- }
3411
- SelectItemDescription.displayName = "Select.ItemDescription";
3412
- function SelectItemMeta({ children, className, ...rest }) {
3413
- return /* @__PURE__ */ jsx26("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
3414
- }
3415
- SelectItemMeta.displayName = "Select.ItemMeta";
3416
- function splitItemChildren(children) {
3417
- const parts = {
3418
- leading: [],
3419
- body: [],
3420
- meta: [],
3421
- rich: false,
3422
- title: "",
3423
- description: ""
3424
- };
3425
- let plain = "";
3426
- for (const child of React32.Children.toArray(children)) {
3427
- if (!React32.isValidElement(child)) {
3428
- plain += textOf(child);
3429
- parts.body.push(child);
3430
- } else if (child.type === React32.Fragment) {
3431
- const inner = splitItemChildren(child.props.children);
3432
- parts.leading.push(...inner.leading);
3433
- parts.body.push(...inner.body);
3434
- parts.meta.push(...inner.meta);
3435
- parts.rich ||= inner.rich;
3436
- parts.title ||= inner.title;
3437
- parts.description ||= inner.description;
3438
- plain += inner.title;
3439
- } else if (child.type === SelectItemIcon) {
3440
- parts.leading.push(child);
3441
- } else if (child.type === Thumbnail.Root) {
3442
- parts.leading.push(child);
3443
- parts.rich = true;
3444
- } else if (child.type === SelectItemMeta) {
3445
- parts.meta.push(child);
3446
- } else {
3447
- if (child.type === SelectItemText) parts.title = textOf(child.props.children);
3448
- if (child.type === SelectItemDescription) {
3449
- parts.description = textOf(child.props.children);
3450
- parts.rich = true;
3451
- }
3452
- parts.body.push(child);
3453
- }
3454
- }
3455
- parts.title = (parts.title || plain).trim();
3456
- return parts;
3457
- }
3458
- function sizeMedia(leading, size) {
3459
- return leading.map(
3460
- (node) => React32.isValidElement(node) && node.type === Thumbnail.Root ? React32.cloneElement(node, {
3461
- size: node.props.size ?? MEDIA_SIZE[size],
3462
- className: cx(Select_default.media, node.props.className),
3463
- "aria-hidden": true
3464
- }) : node
3465
- );
3466
- }
3467
- function SelectItem({
3468
- value,
3469
- label,
3470
- keywords,
3471
- disabled,
3472
- className,
3473
- children,
3474
- ref
3475
- }) {
3476
- const { multiple, size, selected, highlight, pick, registry, listboxId, query } = useSelectContext();
3477
- const parts = splitItemChildren(children);
3478
- const resolvedLabel = label || parts.title || value;
3479
- const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
3480
- const isSelected = selected.includes(value);
3481
- const isHighlighted = useStoreSlice(highlight, (current) => current === value);
3482
- React32.useLayoutEffect(
3483
- () => registry.register(value, resolvedLabel, haystack),
3484
- [registry, value, resolvedLabel, haystack]
3485
- );
3486
- const search = normalize(query);
3487
- if (search !== "" && !haystack.includes(search)) return null;
3488
- return (
3489
- // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
3490
- // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
3491
- /* @__PURE__ */ jsxs16(
3492
- "div",
3493
- {
3494
- ref,
3495
- id: optionDomId(listboxId, value),
3496
- role: "option",
3497
- "aria-selected": isSelected,
3498
- "aria-disabled": disabled || void 0,
3499
- className: cx(menu_default.item, Select_default.item, className),
3500
- onClick: () => {
3501
- if (!disabled) pick(value);
3502
- },
3503
- onMouseMove: () => {
3504
- if (!disabled && !isHighlighted) highlight.set(value);
3505
- },
3506
- ...toDataAttributes({
3507
- value,
3508
- label: resolvedLabel,
3509
- selected: isSelected,
3510
- highlighted: isHighlighted,
3511
- disabled: Boolean(disabled),
3512
- rich: parts.rich || void 0
3513
- }),
3514
- children: [
3515
- multiple ? /* @__PURE__ */ jsx26(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
3516
- sizeMedia(parts.leading, size),
3517
- /* @__PURE__ */ jsx26("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx26(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
3518
- parts.meta,
3519
- multiple ? null : /* @__PURE__ */ jsx26("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx26(Icon, { name: "action.check" }) : null })
3520
- ]
3521
- }
3522
- )
3523
- );
3524
- }
3525
- SelectItem.displayName = "Select.Item";
3526
-
3527
- // src/components/select/Select.tsx
3528
- import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
3529
- var SELECT_LABELS = {
3530
- search: "\u041F\u043E\u0438\u0441\u043A",
3531
- empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
3532
- emptyHint: "\u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u044C \u0437\u0430\u043F\u0440\u043E\u0441",
3533
- loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
3534
- clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
3535
- optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E"
3536
- };
3537
- function SelectRoot(props) {
3538
- const {
3539
- size = "m",
3540
- label,
3541
- required = false,
3542
- optional,
3543
- hint,
3544
- error,
3545
- invalid,
3546
- focusRing = true,
3547
- disabled = false,
3548
- placeholder,
3549
- id,
3550
- open,
3551
- defaultOpen = false,
3552
- onOpenChange,
3553
- clearable = false,
3554
- loading = false,
3555
- labels: labelsProp,
3556
- className,
3557
- children,
3558
- multiple: _multiple,
3559
- value: _value,
3560
- defaultValue: _defaultValue,
3561
- onValueChange: _onValueChange,
3562
- ...rest
3563
- } = props;
3564
- const multiple = props.multiple === true;
3565
- const labels = React33.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
3566
- const ids = useFieldFrame(id, { hint, error, invalid });
3567
- const [value, setValue] = useControllableState({
3568
- value: props.value,
3569
- defaultValue: props.defaultValue ?? (multiple ? [] : void 0),
3570
- onChange: props.onValueChange
3571
- });
3572
- const selected = React33.useMemo(
3573
- () => Array.isArray(value) ? value : value ? [value] : [],
3574
- [value]
3575
- );
3576
- const [isOpen, setOpen] = useControllableState({
3577
- value: open,
3578
- defaultValue: defaultOpen,
3579
- onChange: onOpenChange
3580
- });
3581
- const highlight = useCreateStore(void 0);
3582
- const [registry] = React33.useState(createItemRegistry);
3583
- const [query, setQuery] = React33.useState("");
3584
- const triggerRef = React33.useRef(null);
3585
- if (!isOpen && query !== "") setQuery("");
3586
- const pick = React33.useCallback(
3587
- (optionValue) => {
3588
- if (multiple) {
3589
- setValue((prev) => {
3590
- const list = Array.isArray(prev) ? prev : [];
3591
- return list.includes(optionValue) ? list.filter((item) => item !== optionValue) : [...list, optionValue];
3592
- });
3593
- return;
3594
- }
3595
- setValue(optionValue);
3596
- setOpen(false);
3597
- },
3598
- [multiple, setValue, setOpen]
3599
- );
3600
- const clear = React33.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
3601
- const context = React33.useMemo(
3602
- () => ({
3603
- size,
3604
- invalid: ids.invalid,
3605
- focusRing,
3606
- required,
3607
- disabled,
3608
- placeholder,
3609
- multiple,
3610
- selected,
3611
- registry,
3612
- pick,
3613
- clear,
3614
- clearable,
3615
- loading,
3616
- isOpen,
3617
- setOpen,
3618
- highlight,
3619
- query,
3620
- setQuery,
3621
- triggerId: ids.controlId,
3622
- listboxId: `${ids.controlId}-listbox`,
3623
- describedBy: ids.describedBy,
3624
- triggerRef,
3625
- labels
3626
- }),
3627
- [
3628
- size,
3629
- ids.invalid,
3630
- ids.controlId,
3631
- ids.describedBy,
3632
- focusRing,
3633
- required,
3634
- disabled,
3635
- placeholder,
3636
- multiple,
3637
- selected,
3638
- registry,
3639
- pick,
3640
- clear,
3641
- clearable,
3642
- loading,
3643
- isOpen,
3644
- setOpen,
3645
- highlight,
3646
- query,
3647
- labels
3648
- ]
3649
- );
3650
- return /* @__PURE__ */ jsx27(
3651
- FieldFrame,
3652
- {
3653
- ...rest,
3654
- size,
3655
- ids,
3656
- label,
3657
- required,
3658
- optional,
3659
- hint,
3660
- error,
3661
- disabled,
3662
- optionalLabel: labels.optional,
3663
- className,
3664
- children: /* @__PURE__ */ jsx27(SelectProvider, { value: context, children: /* @__PURE__ */ jsx27(ControlSizeProvider, { value: size, children }) })
3665
- }
3666
- );
3667
- }
3668
- SelectRoot.displayName = "Select.Root";
3669
- function SelectTrigger({
3670
- className,
3671
- children,
3672
- onClick: onClick2,
3673
- onKeyDown: onKeyDown2,
3674
- "aria-describedby": ariaDescribedBy,
3675
- ref,
3676
- ...rest
3677
- }) {
3678
- const {
3679
- isOpen,
3680
- setOpen,
3681
- triggerId,
3682
- listboxId,
3683
- disabled,
3684
- size,
3685
- invalid,
3686
- focusRing,
3687
- required,
3688
- describedBy,
3689
- triggerRef,
3690
- loading,
3691
- clearable,
3692
- selected,
3693
- clear,
3694
- labels
3695
- } = useSelectContext();
3696
- const mergedRef = useMergedRefs(triggerRef, ref);
3697
- const showClear = clearable && selected.length > 0 && !disabled && !loading;
3698
- return /* @__PURE__ */ jsxs17(
3699
- "button",
3700
- {
3701
- ...rest,
3702
- ref: mergedRef,
3703
- id: triggerId,
3704
- type: "button",
3705
- role: "combobox",
3706
- "aria-expanded": isOpen,
3707
- "aria-haspopup": "listbox",
3708
- "aria-controls": listboxId,
3709
- "aria-invalid": invalid || void 0,
3710
- "aria-required": required || void 0,
3711
- "aria-describedby": [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0,
3712
- "aria-busy": loading || void 0,
3713
- disabled,
3714
- className: cx(fieldTriggerClass, Select_default.trigger, className),
3715
- onClick: (event) => {
3716
- onClick2?.(event);
3717
- if (!event.defaultPrevented) setOpen(!isOpen);
3718
- },
3719
- onKeyDown: (event) => {
3720
- onKeyDown2?.(event);
3721
- if (event.defaultPrevented) return;
3722
- if (["ArrowDown", "ArrowUp", " ", "Enter"].includes(event.key)) {
3723
- event.preventDefault();
3724
- if (!isOpen) setOpen(true);
3725
- } else if (showClear && (event.key === "Delete" || event.key === "Backspace")) {
3726
- event.preventDefault();
3727
- clear();
3728
- }
3729
- },
3730
- ...toDataAttributes({
3731
- state: isOpen ? "open" : "closed",
3732
- size,
3733
- invalid: invalid || void 0,
3734
- loading: loading || void 0,
3735
- disabled: disabled || void 0,
3736
- "focus-ring": focusRing ? void 0 : false
3737
- }),
3738
- children: [
3739
- /* @__PURE__ */ jsx27("span", { className: Select_default.triggerMain, children }),
3740
- showClear ? (
3741
- // A segment, not a button: interactive content inside a <button> is invalid. The keyboard
3742
- // clears with Delete / Backspace on the trigger.
3743
- /* @__PURE__ */ jsx27(
3744
- "span",
3745
- {
3746
- className: Select_default.clear,
3747
- "aria-hidden": "true",
3748
- title: labels.clear,
3749
- "data-select-clear": "",
3750
- onMouseDown: (event) => event.preventDefault(),
3751
- onClick: (event) => {
3752
- event.stopPropagation();
3753
- clear();
3754
- },
3755
- children: /* @__PURE__ */ jsx27(Icon, { name: "action.close" })
3756
- }
3757
- )
3758
- ) : null,
3759
- /* @__PURE__ */ jsx27("span", { className: Select_default.chevron, "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx27(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(Icon, { name: "nav.chevronDown" }) })
3760
- ]
3761
- }
3762
- );
3763
- }
3764
- SelectTrigger.displayName = "Select.Trigger";
3765
- function SelectValue({ renderValue, className, ...rest }) {
3766
- const { selected, registry, placeholder, multiple, size } = useSelectContext();
3767
- const text = useStoreSlice(registry.version, () => selected.map(registry.labelOf).join(", "));
3768
- if (selected.length > 0 && renderValue && !multiple) {
3769
- const value = selected[0] ?? "";
3770
- const parts = splitItemChildren(renderValue({ value, label: text }));
3771
- return /* @__PURE__ */ jsxs17(
3772
- "span",
3773
- {
3774
- ...rest,
3775
- className: cx(Select_default.value, className),
3776
- ...toDataAttributes({ rich: parts.rich || void 0 }),
3777
- children: [
3778
- sizeMedia(parts.leading, size),
3779
- /* @__PURE__ */ jsx27("span", { className: Select_default.valueBody, children: parts.body })
3780
- ]
3781
- }
3782
- );
3783
- }
3784
- return /* @__PURE__ */ jsx27(
3785
- "span",
3786
- {
3787
- ...rest,
3788
- className: cx(Select_default.value, className),
3789
- ...toDataAttributes({ placeholder: selected.length === 0 || void 0 }),
3790
- children: selected.length > 0 ? text : placeholder
3791
- }
3792
- );
3793
- }
3794
- SelectValue.displayName = "Select.Value";
3795
- function SelectTriggerIcon({ className, ...rest }) {
3796
- return /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
3797
- }
3798
- SelectTriggerIcon.displayName = "Select.TriggerIcon";
3799
- function SelectContent({ searchable = false, className, children, ...rest }) {
3800
- const {
3801
- isOpen,
3802
- setOpen,
3803
- pick,
3804
- triggerId,
3805
- listboxId,
3806
- triggerRef,
3807
- highlight,
3808
- multiple,
3809
- size,
3810
- query,
3811
- setQuery,
3812
- loading,
3813
- labels,
3814
- registry
3815
- } = useSelectContext();
3816
- const listboxRef = React33.useRef(null);
3817
- const floating = useFloatingLayer({
3818
- open: isOpen,
3819
- onOpenChange: setOpen,
3820
- triggerRef,
3821
- side: "bottom",
3822
- align: "start",
3823
- matchAnchorWidth: true,
3824
- focusOnOpen: true,
3825
- tabExit: "always",
3826
- sheet: true
3827
- });
3828
- const highlighted = useStoreSlice(highlight, (value) => value);
3829
- const isEmpty = useStoreSlice(registry.version, () => !registry.anyMatch(normalize(query)));
3830
- const typeahead = useTypeahead();
3831
- const handleKeyDown = (event) => {
3832
- const inSearch = event.target instanceof HTMLInputElement;
3833
- if (inSearch && [" ", "Home", "End"].includes(event.key)) return;
3834
- const items = enabledOptions(listboxRef.current);
3835
- const printable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
3836
- if (printable && !inSearch && (event.key !== " " || typeahead.isTyping())) {
3837
- event.preventDefault();
3838
- const match = typeahead.find(event.key, items, highlight.get());
3839
- if (match) {
3840
- highlight.set(match.dataset.value);
3841
- match.scrollIntoView?.({ block: "nearest" });
3842
- }
3843
- return;
3844
- }
3845
- handleListboxKeyDown(event, { items, highlight, onSelect: pick });
3846
- };
3847
- if (!floating.mounted) return /* @__PURE__ */ jsx27("div", { hidden: true, children });
3848
- const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
3849
- return /* @__PURE__ */ jsxs17(
3850
- FloatingPanel,
3851
- {
3852
- ...rest,
3853
- floating,
3854
- size,
3855
- className: cx(menu_default.tier, menu_default.menu, Select_default.content, className),
3856
- onKeyDown: handleKeyDown,
3857
- ...toDataAttributes({ searching: query !== "" || void 0 }),
3858
- children: [
3859
- searchable ? (
3860
- // The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
3861
- /* @__PURE__ */ jsxs17("div", { className: cx(menu_default.searchRow, Select_default.search), "data-focus-ring": "false", children: [
3862
- /* @__PURE__ */ jsx27(Icon, { name: "action.search", size: "s" }),
3863
- /* @__PURE__ */ jsx27(
3864
- "input",
3865
- {
3866
- type: "text",
3867
- className: menu_default.searchInput,
3868
- value: query,
3869
- placeholder: labels.search,
3870
- "aria-label": labels.search,
3871
- "aria-controls": listboxId,
3872
- "aria-activedescendant": activeDescendant,
3873
- "aria-autocomplete": "list",
3874
- autoComplete: "off",
3875
- spellCheck: false,
3876
- "data-autofocus": "",
3877
- onChange: (event) => setQuery(event.target.value)
3878
- }
3879
- )
3880
- ] })
3881
- ) : null,
3882
- loading ? /* @__PURE__ */ jsxs17("div", { className: Select_default.status, role: "status", children: [
3883
- /* @__PURE__ */ jsx27(Spinner, { "aria-hidden": "true" }),
3884
- labels.loading
3885
- ] }) : null,
3886
- /* @__PURE__ */ jsx27(
3887
- ScrollContainer,
3888
- {
3889
- ref: listboxRef,
3890
- id: listboxId,
3891
- role: "listbox",
3892
- "aria-multiselectable": multiple || void 0,
3893
- "aria-labelledby": triggerId,
3894
- "aria-activedescendant": searchable ? void 0 : activeDescendant,
3895
- "aria-busy": loading || void 0,
3896
- tabIndex: -1,
3897
- "data-autofocus": searchable ? void 0 : "",
3898
- className: Select_default.listbox,
3899
- children
3900
- }
3901
- ),
3902
- isEmpty && !loading ? /* @__PURE__ */ jsxs17(EmptyPage.Root, { layout: "compact", role: "status", children: [
3903
- /* @__PURE__ */ jsx27(EmptyPage.Title, { as: "p", children: labels.empty }),
3904
- query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx27(EmptyPage.Description, { children: labels.emptyHint }) : null
3905
- ] }) : null,
3906
- /* @__PURE__ */ jsx27(HighlightOnOpen, { listboxRef, highlight })
3907
- ]
3908
- }
3909
- );
3910
- }
3911
- SelectContent.displayName = "Select.Content";
3912
- function HighlightOnOpen({
3913
- listboxRef,
3914
- highlight
3915
- }) {
3916
- const { isOpen, query, selected } = useSelectContext();
3917
- const selectedRef = React33.useRef(selected);
3918
- selectedRef.current = selected;
3919
- React33.useLayoutEffect(() => {
3920
- if (!isOpen) return;
3921
- const options = enabledOptions(listboxRef.current);
3922
- const first = options.find((item) => selectedRef.current.includes(item.dataset.value ?? ""));
3923
- highlight.set(first?.dataset.value);
3924
- first?.scrollIntoView?.({ block: "nearest" });
3925
- return () => highlight.set(void 0);
3926
- }, [isOpen, listboxRef, highlight]);
3927
- React33.useLayoutEffect(() => {
3928
- if (query !== "") highlight.set(enabledOptions(listboxRef.current)[0]?.dataset.value);
3929
- }, [query, listboxRef, highlight]);
3930
- return null;
3931
- }
3932
- function SelectGroup({ className, ...rest }) {
3933
- return /* @__PURE__ */ jsx27(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
3934
- }
3935
- SelectGroup.displayName = "Select.Group";
3936
- function SelectSeparator({ className, ...rest }) {
3937
- return /* @__PURE__ */ jsx27(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
3938
- }
3939
- SelectSeparator.displayName = "Select.Separator";
3940
- var Select = {
3941
- Root: SelectRoot,
3942
- Trigger: SelectTrigger,
3943
- Value: SelectValue,
3944
- TriggerIcon: SelectTriggerIcon,
3945
- Content: SelectContent,
3946
- Item: SelectItem,
3947
- ItemIcon: SelectItemIcon,
3948
- ItemText: SelectItemText,
3949
- ItemDescription: SelectItemDescription,
3950
- ItemMeta: SelectItemMeta,
3951
- Group: SelectGroup,
3952
- Separator: SelectSeparator
3953
- };
3954
-
3955
- export {
3956
- toDataAttributes,
3957
- fieldSurfaceClass,
3958
- fieldTierClass,
3959
- fieldTriggerClass,
3960
- iconLayout,
3961
- prefersReducedMotion,
3962
- motionDurationMs,
3963
- exitTimeoutMs,
3964
- usePresence,
3965
- visuallyHiddenClass,
3966
- VisuallyHidden,
3967
- useMergedRefs,
3968
- Slot,
3969
- touchTargetBlockClass,
3970
- Spinner,
3971
- Button,
3972
- Divider,
3973
- Icon,
3974
- createIcon,
3975
- useEdgeOverflow,
3976
- ScrollContainer,
3977
- palette_default,
3978
- RollingNumber,
3979
- createComponentContext,
3980
- createImageSlot,
3981
- useControllableState,
3982
- overlayMotion_default,
3983
- Portal,
3984
- sheet_default,
3985
- useNestedSurfaceDepth,
3986
- SurfaceDepthProvider,
3987
- useStageDepth,
3988
- focusInto,
3989
- focusBack,
3990
- activeElement,
3991
- LayerProvider,
3992
- useLayer,
3993
- FloatingPanel,
3994
- FloatingTrigger,
3995
- COMPACT_QUERY,
3996
- useMediaQuery,
3997
- AnchorRectProvider,
3998
- readCssLengthPx,
3999
- getViewportPadPx,
4000
- useScrollLock,
4001
- useSwipeDismiss,
4002
- useFloatingLayer,
4003
- rovingIndex,
4004
- gridIndex,
4005
- controlSizes,
4006
- stepDown,
4007
- variants,
4008
- tones,
4009
- paletteColors,
4010
- dataStates,
4011
- textTones,
4012
- enterMotion_default,
4013
- Hint,
4014
- Label,
4015
- formatLabel,
4016
- useFieldFrame,
4017
- FieldFrame,
4018
- FieldCounter,
4019
- choiceInputClass,
4020
- choiceVisualClass,
4021
- ChoiceField,
4022
- ChoiceLabel,
4023
- Checkbox,
4024
- COLOR_PRESETS,
4025
- useSwatchOptions,
4026
- swatchClass,
4027
- swatchTierClass,
4028
- SwatchFill,
4029
- SwatchContent,
4030
- SwatchChip,
4031
- sameColor,
4032
- ColorSwatches,
4033
- EmptyPage,
4034
- matchIndex,
4035
- HighlightMatch,
4036
- highlightChildren,
4037
- optionDomId,
4038
- enabledOptions,
4039
- useCreateStore,
4040
- useStoreSlice,
4041
- handleListboxKeyDown,
4042
- menu_default,
4043
- MenuGroup,
4044
- resolveValue,
4045
- DEFAULT_PROGRESS_SEGMENTS_LABELS,
4046
- resolveSegments,
4047
- ProgressBar,
4048
- getPasswordStrength,
4049
- Input,
4050
- Thumbnail,
4051
- Select
4052
- };