@bysages/react 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (263) hide show
  1. package/dist/ai-response-jZy-0Tvv.mjs +127 -0
  2. package/dist/chevron-BeHvt46K.mjs +17 -0
  3. package/dist/components/accordion/index.d.mts +7 -0
  4. package/dist/components/accordion/index.mjs +10 -0
  5. package/dist/components/affix/index.d.mts +20 -0
  6. package/dist/components/affix/index.mjs +18 -0
  7. package/dist/components/ai/index.d.mts +2 -0
  8. package/dist/components/ai/index.mjs +65 -0
  9. package/dist/components/ai-action/index.d.mts +14 -0
  10. package/dist/components/ai-action/index.mjs +18 -0
  11. package/dist/components/ai-attachments/index.d.mts +19 -0
  12. package/dist/components/ai-attachments/index.mjs +106 -0
  13. package/dist/components/ai-message/index.d.mts +11 -0
  14. package/dist/components/ai-message/index.mjs +15 -0
  15. package/dist/components/ai-prompt-input/index.d.mts +47 -0
  16. package/dist/components/ai-prompt-input/index.mjs +135 -0
  17. package/dist/components/ai-reasoning/index.d.mts +13 -0
  18. package/dist/components/ai-reasoning/index.mjs +19 -0
  19. package/dist/components/ai-response/index.d.mts +22 -0
  20. package/dist/components/ai-response/index.mjs +2 -0
  21. package/dist/components/ai-source/index.d.mts +17 -0
  22. package/dist/components/ai-source/index.mjs +27 -0
  23. package/dist/components/ai-suggestion/index.d.mts +13 -0
  24. package/dist/components/ai-suggestion/index.mjs +16 -0
  25. package/dist/components/ai-tool/index.d.mts +21 -0
  26. package/dist/components/ai-tool/index.mjs +36 -0
  27. package/dist/components/alert/index.d.mts +23 -0
  28. package/dist/components/alert/index.mjs +80 -0
  29. package/dist/components/angle-slider/index.d.mts +16 -0
  30. package/dist/components/angle-slider/index.mjs +21 -0
  31. package/dist/components/aspect-ratio/index.d.mts +10 -0
  32. package/dist/components/aspect-ratio/index.mjs +17 -0
  33. package/dist/components/autocomplete/index.d.mts +21 -0
  34. package/dist/components/autocomplete/index.mjs +35 -0
  35. package/dist/components/avatar/index.d.mts +20 -0
  36. package/dist/components/avatar/index.mjs +14 -0
  37. package/dist/components/avatar-group/index.d.mts +11 -0
  38. package/dist/components/avatar-group/index.mjs +15 -0
  39. package/dist/components/back-top/index.d.mts +29 -0
  40. package/dist/components/back-top/index.mjs +82 -0
  41. package/dist/components/badge/index.d.mts +10 -0
  42. package/dist/components/badge/index.mjs +15 -0
  43. package/dist/components/banner/index.d.mts +31 -0
  44. package/dist/components/banner/index.mjs +63 -0
  45. package/dist/components/breadcrumb/index.d.mts +32 -0
  46. package/dist/components/breadcrumb/index.mjs +35 -0
  47. package/dist/components/button/index.d.mts +19 -0
  48. package/dist/components/button/index.mjs +29 -0
  49. package/dist/components/button-group/index.d.mts +24 -0
  50. package/dist/components/button-group/index.mjs +25 -0
  51. package/dist/components/calendar/index.d.mts +17 -0
  52. package/dist/components/calendar/index.mjs +96 -0
  53. package/dist/components/card/index.d.mts +46 -0
  54. package/dist/components/card/index.mjs +44 -0
  55. package/dist/components/carousel/index.d.mts +9 -0
  56. package/dist/components/carousel/index.mjs +12 -0
  57. package/dist/components/cascade-select/index.d.mts +31 -0
  58. package/dist/components/cascade-select/index.mjs +223 -0
  59. package/dist/components/checkbox/index.d.mts +16 -0
  60. package/dist/components/checkbox/index.mjs +21 -0
  61. package/dist/components/checkbox-group/index.d.mts +28 -0
  62. package/dist/components/checkbox-group/index.mjs +65 -0
  63. package/dist/components/chip/index.d.mts +12 -0
  64. package/dist/components/chip/index.mjs +17 -0
  65. package/dist/components/client-only/index.d.mts +2 -0
  66. package/dist/components/client-only/index.mjs +2 -0
  67. package/dist/components/clipboard/index.d.mts +17 -0
  68. package/dist/components/clipboard/index.mjs +17 -0
  69. package/dist/components/collapsible/index.d.mts +7 -0
  70. package/dist/components/collapsible/index.mjs +10 -0
  71. package/dist/components/collection/index.d.mts +2 -0
  72. package/dist/components/collection/index.mjs +2 -0
  73. package/dist/components/color-picker/index.d.mts +20 -0
  74. package/dist/components/color-picker/index.mjs +25 -0
  75. package/dist/components/combobox/index.d.mts +17 -0
  76. package/dist/components/combobox/index.mjs +18 -0
  77. package/dist/components/command/index.d.mts +43 -0
  78. package/dist/components/command/index.mjs +137 -0
  79. package/dist/components/comment/index.d.mts +17 -0
  80. package/dist/components/comment/index.mjs +47 -0
  81. package/dist/components/config-provider/index.d.mts +46 -0
  82. package/dist/components/config-provider/index.mjs +41 -0
  83. package/dist/components/container/index.d.mts +13 -0
  84. package/dist/components/container/index.mjs +15 -0
  85. package/dist/components/date-input/index.d.mts +17 -0
  86. package/dist/components/date-input/index.mjs +21 -0
  87. package/dist/components/date-picker/index.d.mts +19 -0
  88. package/dist/components/date-picker/index.mjs +23 -0
  89. package/dist/components/descriptions/index.d.mts +25 -0
  90. package/dist/components/descriptions/index.mjs +32 -0
  91. package/dist/components/dialog/index.d.mts +9 -0
  92. package/dist/components/dialog/index.mjs +11 -0
  93. package/dist/components/download-trigger/index.d.mts +2 -0
  94. package/dist/components/download-trigger/index.mjs +2 -0
  95. package/dist/components/drawer/index.d.mts +9 -0
  96. package/dist/components/drawer/index.mjs +12 -0
  97. package/dist/components/dynamic-input/index.d.mts +28 -0
  98. package/dist/components/dynamic-input/index.mjs +83 -0
  99. package/dist/components/editable/index.d.mts +16 -0
  100. package/dist/components/editable/index.mjs +17 -0
  101. package/dist/components/ellipsis/index.d.mts +10 -0
  102. package/dist/components/ellipsis/index.mjs +19 -0
  103. package/dist/components/empty/index.d.mts +28 -0
  104. package/dist/components/empty/index.mjs +32 -0
  105. package/dist/components/field/index.d.mts +8 -0
  106. package/dist/components/field/index.mjs +11 -0
  107. package/dist/components/fieldset/index.d.mts +7 -0
  108. package/dist/components/fieldset/index.mjs +10 -0
  109. package/dist/components/file-upload/index.d.mts +18 -0
  110. package/dist/components/file-upload/index.mjs +23 -0
  111. package/dist/components/float-button/index.d.mts +59 -0
  112. package/dist/components/float-button/index.mjs +90 -0
  113. package/dist/components/floating-panel/index.d.mts +9 -0
  114. package/dist/components/floating-panel/index.mjs +12 -0
  115. package/dist/components/focus-trap/index.d.mts +2 -0
  116. package/dist/components/focus-trap/index.mjs +2 -0
  117. package/dist/components/form/index.d.mts +2 -0
  118. package/dist/components/form/index.mjs +67 -0
  119. package/dist/components/format/index.d.mts +9 -0
  120. package/dist/components/format/index.mjs +10 -0
  121. package/dist/components/frame/index.d.mts +10 -0
  122. package/dist/components/frame/index.mjs +12 -0
  123. package/dist/components/grid/index.d.mts +13 -0
  124. package/dist/components/grid/index.mjs +31 -0
  125. package/dist/components/highlight/index.d.mts +7 -0
  126. package/dist/components/highlight/index.mjs +11 -0
  127. package/dist/components/hover-card/index.d.mts +7 -0
  128. package/dist/components/hover-card/index.mjs +10 -0
  129. package/dist/components/icon/index.d.mts +19 -0
  130. package/dist/components/icon/index.mjs +26 -0
  131. package/dist/components/image/index.d.mts +17 -0
  132. package/dist/components/image/index.mjs +57 -0
  133. package/dist/components/image-cropper/index.d.mts +8 -0
  134. package/dist/components/image-cropper/index.mjs +11 -0
  135. package/dist/components/image-viewer/index.d.mts +18 -0
  136. package/dist/components/image-viewer/index.mjs +110 -0
  137. package/dist/components/input/index.d.mts +16 -0
  138. package/dist/components/input/index.mjs +21 -0
  139. package/dist/components/input-group/index.d.mts +17 -0
  140. package/dist/components/input-group/index.mjs +31 -0
  141. package/dist/components/json-tree-view/index.d.mts +7 -0
  142. package/dist/components/json-tree-view/index.mjs +10 -0
  143. package/dist/components/kbd/index.d.mts +6 -0
  144. package/dist/components/kbd/index.mjs +14 -0
  145. package/dist/components/layout/index.d.mts +63 -0
  146. package/dist/components/layout/index.mjs +133 -0
  147. package/dist/components/link/index.d.mts +10 -0
  148. package/dist/components/link/index.mjs +18 -0
  149. package/dist/components/list/index.d.mts +39 -0
  150. package/dist/components/list/index.mjs +66 -0
  151. package/dist/components/listbox/index.d.mts +18 -0
  152. package/dist/components/listbox/index.mjs +18 -0
  153. package/dist/components/marquee/index.d.mts +7 -0
  154. package/dist/components/marquee/index.mjs +10 -0
  155. package/dist/components/masonry/index.d.mts +11 -0
  156. package/dist/components/masonry/index.mjs +29 -0
  157. package/dist/components/mentions/index.d.mts +2 -0
  158. package/dist/components/mentions/index.mjs +2 -0
  159. package/dist/components/menu/index.d.mts +20 -0
  160. package/dist/components/menu/index.mjs +37 -0
  161. package/dist/components/menubar/index.d.mts +32 -0
  162. package/dist/components/menubar/index.mjs +35 -0
  163. package/dist/components/meter/index.d.mts +26 -0
  164. package/dist/components/meter/index.mjs +59 -0
  165. package/dist/components/navigation-menu/index.d.mts +8 -0
  166. package/dist/components/navigation-menu/index.mjs +11 -0
  167. package/dist/components/number-input/index.d.mts +16 -0
  168. package/dist/components/number-input/index.mjs +21 -0
  169. package/dist/components/page-header/index.d.mts +32 -0
  170. package/dist/components/page-header/index.mjs +34 -0
  171. package/dist/components/pagination/index.d.mts +18 -0
  172. package/dist/components/pagination/index.mjs +23 -0
  173. package/dist/components/password-input/index.d.mts +16 -0
  174. package/dist/components/password-input/index.mjs +21 -0
  175. package/dist/components/pin-input/index.d.mts +15 -0
  176. package/dist/components/pin-input/index.mjs +20 -0
  177. package/dist/components/popconfirm/index.d.mts +20 -0
  178. package/dist/components/popconfirm/index.mjs +44 -0
  179. package/dist/components/popover/index.d.mts +8 -0
  180. package/dist/components/popover/index.mjs +11 -0
  181. package/dist/components/presence/index.d.mts +2 -0
  182. package/dist/components/presence/index.mjs +2 -0
  183. package/dist/components/progress/index.d.mts +16 -0
  184. package/dist/components/progress/index.mjs +21 -0
  185. package/dist/components/progress-group/index.d.mts +22 -0
  186. package/dist/components/progress-group/index.mjs +56 -0
  187. package/dist/components/qr-code/index.d.mts +8 -0
  188. package/dist/components/qr-code/index.mjs +11 -0
  189. package/dist/components/radio-group/index.d.mts +16 -0
  190. package/dist/components/radio-group/index.mjs +21 -0
  191. package/dist/components/rating-group/index.d.mts +16 -0
  192. package/dist/components/rating-group/index.mjs +21 -0
  193. package/dist/components/scroll-area/index.d.mts +7 -0
  194. package/dist/components/scroll-area/index.mjs +10 -0
  195. package/dist/components/segment-group/index.d.mts +18 -0
  196. package/dist/components/segment-group/index.mjs +20 -0
  197. package/dist/components/select/index.d.mts +17 -0
  198. package/dist/components/select/index.mjs +18 -0
  199. package/dist/components/separator/index.d.mts +11 -0
  200. package/dist/components/separator/index.mjs +16 -0
  201. package/dist/components/signature-pad/index.d.mts +8 -0
  202. package/dist/components/signature-pad/index.mjs +11 -0
  203. package/dist/components/skeleton/index.d.mts +7 -0
  204. package/dist/components/skeleton/index.mjs +13 -0
  205. package/dist/components/slider/index.d.mts +16 -0
  206. package/dist/components/slider/index.mjs +21 -0
  207. package/dist/components/spinner/index.d.mts +9 -0
  208. package/dist/components/spinner/index.mjs +36 -0
  209. package/dist/components/split-button/index.d.mts +36 -0
  210. package/dist/components/split-button/index.mjs +71 -0
  211. package/dist/components/splitter/index.d.mts +7 -0
  212. package/dist/components/splitter/index.mjs +10 -0
  213. package/dist/components/stack/index.d.mts +11 -0
  214. package/dist/components/stack/index.mjs +32 -0
  215. package/dist/components/stat/index.d.mts +29 -0
  216. package/dist/components/stat/index.mjs +37 -0
  217. package/dist/components/steps/index.d.mts +19 -0
  218. package/dist/components/steps/index.mjs +24 -0
  219. package/dist/components/swap/index.d.mts +8 -0
  220. package/dist/components/swap/index.mjs +11 -0
  221. package/dist/components/switch/index.d.mts +16 -0
  222. package/dist/components/switch/index.mjs +21 -0
  223. package/dist/components/table/index.d.mts +79 -0
  224. package/dist/components/table/index.mjs +688 -0
  225. package/dist/components/tabs/index.d.mts +18 -0
  226. package/dist/components/tabs/index.mjs +23 -0
  227. package/dist/components/tags-input/index.d.mts +17 -0
  228. package/dist/components/tags-input/index.mjs +22 -0
  229. package/dist/components/textarea/index.d.mts +14 -0
  230. package/dist/components/textarea/index.mjs +20 -0
  231. package/dist/components/timeline/index.d.mts +24 -0
  232. package/dist/components/timeline/index.mjs +30 -0
  233. package/dist/components/timer/index.d.mts +8 -0
  234. package/dist/components/timer/index.mjs +11 -0
  235. package/dist/components/toast/index.d.mts +11 -0
  236. package/dist/components/toast/index.mjs +13 -0
  237. package/dist/components/toc/index.d.mts +7 -0
  238. package/dist/components/toc/index.mjs +10 -0
  239. package/dist/components/toggle/index.d.mts +7 -0
  240. package/dist/components/toggle/index.mjs +10 -0
  241. package/dist/components/toggle-group/index.d.mts +15 -0
  242. package/dist/components/toggle-group/index.mjs +20 -0
  243. package/dist/components/tooltip/index.d.mts +7 -0
  244. package/dist/components/tooltip/index.mjs +10 -0
  245. package/dist/components/tour/index.d.mts +11 -0
  246. package/dist/components/tour/index.mjs +13 -0
  247. package/dist/components/transfer/index.d.mts +23 -0
  248. package/dist/components/transfer/index.mjs +154 -0
  249. package/dist/components/tree-select/index.d.mts +28 -0
  250. package/dist/components/tree-select/index.mjs +157 -0
  251. package/dist/components/tree-view/index.d.mts +19 -0
  252. package/dist/components/tree-view/index.mjs +18 -0
  253. package/dist/components/typography/index.d.mts +32 -0
  254. package/dist/components/typography/index.mjs +34 -0
  255. package/dist/components/watermark/index.d.mts +16 -0
  256. package/dist/components/watermark/index.mjs +80 -0
  257. package/dist/index-DaAbbSz9.d.mts +13416 -0
  258. package/dist/index-Uefyw7Im.d.mts +108 -0
  259. package/dist/index-uPyYiWaL.d.mts +1813 -0
  260. package/dist/index.d.mts +128 -15218
  261. package/dist/index.mjs +128 -4556
  262. package/dist/mentions-DMIBCBOd.mjs +181 -0
  263. package/package.json +77 -3
package/dist/index.mjs CHANGED
@@ -1,4557 +1,129 @@
1
- import { injectComponentStyle } from "@bysages/core";
2
- import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
3
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
- import { Children, cloneElement, createContext, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
5
- import { Field as Field$1, useFieldContext } from "@ark-ui/react/field";
6
- import { Popover as Popover$1 } from "@ark-ui/react/popover";
7
- import { Portal } from "@ark-ui/react/portal";
8
- import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
9
- import { renderHtml } from "@tanstack/markdown/html";
10
- import { AngleSlider as AngleSlider$1 } from "@ark-ui/react/angle-slider";
11
- import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListCollection as useListCollection$1, useListSelection } from "@ark-ui/react/collection";
12
- import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
13
- import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
14
- import { DatePicker as DatePicker$1 } from "@ark-ui/react/date-picker";
15
- import { useEnvironmentContext } from "@ark-ui/react/environment";
16
- import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
17
- import * as cascade from "@zag-js/cascade-select";
18
- import { normalizeProps, useMachine } from "@zag-js/react";
19
- import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
20
- import { Checkbox as Checkbox$1 } from "@ark-ui/react/checkbox";
21
- import { Clipboard as Clipboard$1 } from "@ark-ui/react/clipboard";
22
- import { ClientOnly } from "@ark-ui/react/client-only";
23
- import { ColorPicker as ColorPicker$1 } from "@ark-ui/react/color-picker";
24
- import { Dialog as Dialog$1 } from "@ark-ui/react/dialog";
25
- import { DateInput as DateInput$1 } from "@ark-ui/react/date-input";
26
- import { DownloadTrigger, useDownload } from "@ark-ui/react/download-trigger";
27
- import { Drawer as Drawer$1 } from "@ark-ui/react/drawer";
28
- import { Editable as Editable$1 } from "@ark-ui/react/editable";
29
- import { Fieldset as Fieldset$1 } from "@ark-ui/react/fieldset";
30
- import { FileUpload as FileUpload$1 } from "@ark-ui/react/file-upload";
31
- import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
32
- import { FocusTrap } from "@ark-ui/react/focus-trap";
33
- import { Format as Format$1 } from "@ark-ui/react/format";
34
- import { Frame as Frame$1 } from "@ark-ui/react/frame";
35
- import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
36
- import { HoverCard as HoverCard$1 } from "@ark-ui/react/hover-card";
37
- import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/image-cropper";
38
- import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/react/json-tree-view";
39
- import { Listbox as Listbox$1 } from "@ark-ui/react/listbox";
40
- import { Marquee as Marquee$1 } from "@ark-ui/react/marquee";
41
- import { Menu as Menu$1 } from "@ark-ui/react/menu";
42
- import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/react/navigation-menu";
43
- import { NumberInput as NumberInput$1 } from "@ark-ui/react/number-input";
44
- import { Pagination as Pagination$1 } from "@ark-ui/react/pagination";
45
- import { PasswordInput as PasswordInput$1 } from "@ark-ui/react/password-input";
46
- import { PinInput as PinInput$1 } from "@ark-ui/react/pin-input";
47
- import { Presence, PresenceProvider, usePresence, usePresenceContext } from "@ark-ui/react/presence";
48
- import { Progress as Progress$1 } from "@ark-ui/react/progress";
49
- import { QrCode as QrCode$1 } from "@ark-ui/react/qr-code";
50
- import { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
51
- import { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
52
- import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
53
- import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
54
- import { Select as Select$1, createListCollection } from "@ark-ui/react/select";
55
- import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
56
- import { Slider as Slider$1 } from "@ark-ui/react/slider";
57
- import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
58
- import { Steps as Steps$1 } from "@ark-ui/react/steps";
59
- import { Swap as Swap$1 } from "@ark-ui/react/swap";
60
- import { Switch as Switch$1 } from "@ark-ui/react/switch";
61
- import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
62
- import { TagsInput as TagsInput$1 } from "@ark-ui/react/tags-input";
63
- import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
64
- import { useVirtualizer } from "@tanstack/react-virtual";
65
- import { Timer as Timer$1 } from "@ark-ui/react/timer";
66
- import { Toast as Toast$1, Toaster as Toaster$1, createToaster } from "@ark-ui/react/toast";
67
- import { Toc as Toc$1 } from "@ark-ui/react/toc";
68
- import { Toggle as Toggle$1 } from "@ark-ui/react/toggle";
69
- import { ToggleGroup as ToggleGroup$1 } from "@ark-ui/react/toggle-group";
70
- import { Tooltip as Tooltip$1 } from "@ark-ui/react/tooltip";
71
- import { Tour as Tour$1, useTour } from "@ark-ui/react/tour";
72
- import { TreeView as TreeView$1, createTreeCollection as createTreeCollection$1 } from "@ark-ui/react/tree-view";
1
+ import { Accordion } from "./components/accordion/index.mjs";
2
+ import { Affix } from "./components/affix/index.mjs";
3
+ import { Button } from "./components/button/index.mjs";
4
+ import { Action } from "./components/ai-action/index.mjs";
5
+ import { AiMessage as Message } from "./components/ai-message/index.mjs";
6
+ import { Field } from "./components/field/index.mjs";
7
+ import { n as MentionsVessel, r as useMentions, t as Mentions } from "./mentions-DMIBCBOd.mjs";
8
+ import { AiPromptInput as PromptInput } from "./components/ai-prompt-input/index.mjs";
9
+ import { Collapsible } from "./components/collapsible/index.mjs";
10
+ import { AiReasoning as Reasoning } from "./components/ai-reasoning/index.mjs";
11
+ import { t as Response } from "./ai-response-jZy-0Tvv.mjs";
12
+ import { AiSource as Source, AiSources as Sources } from "./components/ai-source/index.mjs";
13
+ import { AiSuggestion as Suggestion } from "./components/ai-suggestion/index.mjs";
14
+ import { AiTool as Tool } from "./components/ai-tool/index.mjs";
15
+ import { Ai } from "./components/ai/index.mjs";
16
+ import { AiAttachment as Attachment, AiAttachments as Attachments } from "./components/ai-attachments/index.mjs";
17
+ import { Alert } from "./components/alert/index.mjs";
18
+ import { AngleSlider } from "./components/angle-slider/index.mjs";
19
+ import { AspectRatio } from "./components/aspect-ratio/index.mjs";
20
+ import { AutoComplete } from "./components/autocomplete/index.mjs";
21
+ import { Avatar } from "./components/avatar/index.mjs";
22
+ import { AvatarGroup } from "./components/avatar-group/index.mjs";
23
+ import { BackTop } from "./components/back-top/index.mjs";
24
+ import { Badge } from "./components/badge/index.mjs";
25
+ import { Breadcrumb } from "./components/breadcrumb/index.mjs";
26
+ import { ButtonGroup } from "./components/button-group/index.mjs";
27
+ import { Banner } from "./components/banner/index.mjs";
28
+ import { Calendar } from "./components/calendar/index.mjs";
29
+ import { Card } from "./components/card/index.mjs";
30
+ import { Input } from "./components/input/index.mjs";
31
+ import { CascadeSelect } from "./components/cascade-select/index.mjs";
32
+ import { Carousel } from "./components/carousel/index.mjs";
33
+ import { Checkbox } from "./components/checkbox/index.mjs";
34
+ import { CheckboxGroup } from "./components/checkbox-group/index.mjs";
35
+ import { Chip } from "./components/chip/index.mjs";
36
+ import { Clipboard } from "./components/clipboard/index.mjs";
37
+ import { ClientOnly } from "./components/client-only/index.mjs";
38
+ import { ColorPicker } from "./components/color-picker/index.mjs";
39
+ import { createFileTreeCollection, createGridCollection, createTreeCollection, useAsyncList, useListCollection, useListSelection } from "./components/collection/index.mjs";
40
+ import { Combobox } from "./components/combobox/index.mjs";
41
+ import { Command } from "./components/command/index.mjs";
42
+ import { Comment } from "./components/comment/index.mjs";
43
+ import { ConfigProvider, useConfig } from "./components/config-provider/index.mjs";
44
+ import { Container } from "./components/container/index.mjs";
45
+ import { DateInput } from "./components/date-input/index.mjs";
46
+ import { DatePicker } from "./components/date-picker/index.mjs";
47
+ import { Descriptions, DescriptionsRoot } from "./components/descriptions/index.mjs";
48
+ import { Dialog } from "./components/dialog/index.mjs";
49
+ import { DownloadTrigger, useDownload } from "./components/download-trigger/index.mjs";
50
+ import { Drawer } from "./components/drawer/index.mjs";
51
+ import { DynamicInput } from "./components/dynamic-input/index.mjs";
52
+ import { Editable } from "./components/editable/index.mjs";
53
+ import { Ellipsis } from "./components/ellipsis/index.mjs";
54
+ import { Empty } from "./components/empty/index.mjs";
55
+ import { Fieldset } from "./components/fieldset/index.mjs";
56
+ import { FileUpload } from "./components/file-upload/index.mjs";
57
+ import { FLOAT_BUTTON_CONTEXT, FloatButton } from "./components/float-button/index.mjs";
58
+ import { FloatingPanel } from "./components/floating-panel/index.mjs";
59
+ import { FocusTrap } from "./components/focus-trap/index.mjs";
60
+ import { Form, FormField, useField, useForm } from "./components/form/index.mjs";
61
+ import { Format } from "./components/format/index.mjs";
62
+ import { Frame } from "./components/frame/index.mjs";
63
+ import { Grid } from "./components/grid/index.mjs";
64
+ import { Highlight } from "./components/highlight/index.mjs";
65
+ import { HoverCard } from "./components/hover-card/index.mjs";
66
+ import { Icon } from "./components/icon/index.mjs";
67
+ import { Image } from "./components/image/index.mjs";
68
+ import { ImageCropper } from "./components/image-cropper/index.mjs";
69
+ import { ImageViewer } from "./components/image-viewer/index.mjs";
70
+ import { InputGroup } from "./components/input-group/index.mjs";
71
+ import { JsonTreeView } from "./components/json-tree-view/index.mjs";
72
+ import { Kbd } from "./components/kbd/index.mjs";
73
+ import { Layout } from "./components/layout/index.mjs";
74
+ import { Link } from "./components/link/index.mjs";
75
+ import { List } from "./components/list/index.mjs";
76
+ import { Listbox } from "./components/listbox/index.mjs";
77
+ import { Marquee } from "./components/marquee/index.mjs";
78
+ import { Masonry } from "./components/masonry/index.mjs";
79
+ import { Menu } from "./components/menu/index.mjs";
80
+ import { Menubar } from "./components/menubar/index.mjs";
81
+ import { Meter } from "./components/meter/index.mjs";
82
+ import { NavigationMenu } from "./components/navigation-menu/index.mjs";
83
+ import { NumberInput } from "./components/number-input/index.mjs";
84
+ import { Pagination } from "./components/pagination/index.mjs";
85
+ import { PasswordInput } from "./components/password-input/index.mjs";
86
+ import { PinInput } from "./components/pin-input/index.mjs";
87
+ import { Popconfirm } from "./components/popconfirm/index.mjs";
88
+ import { Popover } from "./components/popover/index.mjs";
89
+ import { Presence, PresenceProvider, usePresence, usePresenceContext } from "./components/presence/index.mjs";
90
+ import { Progress } from "./components/progress/index.mjs";
91
+ import { ProgressGroup } from "./components/progress-group/index.mjs";
92
+ import { QrCode } from "./components/qr-code/index.mjs";
93
+ import { RadioGroup } from "./components/radio-group/index.mjs";
94
+ import { RatingGroup } from "./components/rating-group/index.mjs";
95
+ import { ScrollArea } from "./components/scroll-area/index.mjs";
96
+ import { SegmentGroup } from "./components/segment-group/index.mjs";
97
+ import { Select } from "./components/select/index.mjs";
98
+ import { Separator } from "./components/separator/index.mjs";
99
+ import { SignaturePad } from "./components/signature-pad/index.mjs";
100
+ import { Skeleton } from "./components/skeleton/index.mjs";
101
+ import { Slider } from "./components/slider/index.mjs";
102
+ import { SplitButton } from "./components/split-button/index.mjs";
103
+ import { Splitter } from "./components/splitter/index.mjs";
104
+ import { Stack } from "./components/stack/index.mjs";
105
+ import { PageHeader } from "./components/page-header/index.mjs";
106
+ import { Spinner } from "./components/spinner/index.mjs";
107
+ import { Stat } from "./components/stat/index.mjs";
108
+ import { Steps } from "./components/steps/index.mjs";
109
+ import { Swap } from "./components/swap/index.mjs";
110
+ import { Switch } from "./components/switch/index.mjs";
111
+ import { Tabs } from "./components/tabs/index.mjs";
112
+ import { TagsInput } from "./components/tags-input/index.mjs";
113
+ import { DataTable, FlexRender, createColumnHelper } from "./components/table/index.mjs";
114
+ import { Textarea } from "./components/textarea/index.mjs";
115
+ import { Timeline } from "./components/timeline/index.mjs";
116
+ import { Timer } from "./components/timer/index.mjs";
117
+ import { Toast, Toaster, createToaster } from "./components/toast/index.mjs";
118
+ import { Toc } from "./components/toc/index.mjs";
119
+ import { Toggle } from "./components/toggle/index.mjs";
120
+ import { Typography } from "./components/typography/index.mjs";
121
+ import { ToggleGroup } from "./components/toggle-group/index.mjs";
122
+ import { Tooltip } from "./components/tooltip/index.mjs";
123
+ import { Tour, useTour } from "./components/tour/index.mjs";
124
+ import { Transfer } from "./components/transfer/index.mjs";
125
+ import { TreeSelect } from "./components/tree-select/index.mjs";
126
+ import { TreeView } from "./components/tree-view/index.mjs";
127
+ import { Watermark } from "./components/watermark/index.mjs";
73
128
  export * from "@bysages/core";
74
- //#region src/components/accordion/index.tsx
75
- /** Ark's Accordion, dressed in the paper-and-ink system: a ruled sheet
76
- * folded by quiet rows, unfolding with a spring-chevoned dissolve. The
77
- * API is Ark's own — Root, Item, ItemTrigger, ItemContent, ItemIndicator. */
78
- const Accordion = Accordion$1;
79
- injectComponentStyle("accordion");
80
- //#endregion
81
- //#region src/components/affix/index.tsx
82
- function Affix({ offsetTop = "0px", offsetBottom = "0px", ...rest }) {
83
- return /* @__PURE__ */ jsx("div", {
84
- ...rest,
85
- style: {
86
- ...rest.style,
87
- top: offsetTop,
88
- bottom: offsetBottom
89
- },
90
- "data-scope": "affix",
91
- "data-part": "root"
92
- });
93
- }
94
- injectComponentStyle("affix");
95
- //#endregion
96
- //#region src/components/button/index.tsx
97
- function Button({ variant = "solid", tone = "ink", size = "md", square = false, asChild = false, disabled = false, type = "button", children, ...rest }) {
98
- const partProps = {
99
- ...rest,
100
- "data-scope": "button",
101
- "data-part": "root",
102
- "data-variant": variant,
103
- "data-tone": tone,
104
- "data-size": size,
105
- "data-square": square ? "true" : void 0,
106
- "data-motion": "ink-ripple lit"
107
- };
108
- if (asChild) {
109
- const child = Children.only(children);
110
- return isValidElement(child) ? cloneElement(child, partProps) : null;
111
- }
112
- return /* @__PURE__ */ jsx("button", {
113
- type,
114
- disabled,
115
- ...partProps,
116
- children
117
- });
118
- }
119
- injectComponentStyle("button");
120
- //#endregion
121
- //#region src/components/ai-action/index.tsx
122
- function Action({ label, children, ...rest }) {
123
- return /* @__PURE__ */ jsx(Button, {
124
- variant: "ghost",
125
- size: "sm",
126
- square: true,
127
- "aria-label": label,
128
- title: label,
129
- ...rest,
130
- children
131
- });
132
- }
133
- injectComponentStyle("ai");
134
- //#endregion
135
- //#region src/components/ai-message/index.tsx
136
- function Message({ role = "assistant", children, ...rest }) {
137
- return /* @__PURE__ */ jsx("article", {
138
- ...rest,
139
- "data-scope": "ai",
140
- "data-part": "message",
141
- "data-role": role,
142
- children
143
- });
144
- }
145
- injectComponentStyle("ai");
146
- //#endregion
147
- //#region src/components/field/index.tsx
148
- /** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
149
- * border-and-halo control, and quiet help text. The API is Ark's own —
150
- * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
151
- * RequiredIndicator. */
152
- const Field = Field$1;
153
- injectComponentStyle("field");
154
- //#endregion
155
- //#region src/components/mentions/use-mentions.ts
156
- /** The @-detection machinery behind a mention field: watch the caret,
157
- * offer the matching candidates, and answer for the keys that drive
158
- * them. The field element arrives as a getter because hosts wrap it
159
- * differently (a bare textarea, a field part's ref).
160
- *
161
- * `onKeydown` answers whether the vessel consumed the key, so a host
162
- * with its own Enter semantics — a composer that sends — can yield to
163
- * the candidates first and act only when the vessel stands down. */
164
- function useMentions(options, textarea, handlers) {
165
- const [popupOpen, setPopupOpen] = useState(false);
166
- const [matches, setMatches] = useState([]);
167
- const [active, setActive] = useState(0);
168
- const anchorIndex = useRef(0);
169
- const caretIndex = useRef(0);
170
- const resolve = () => typeof options === "function" ? options() : options;
171
- const closePopup = () => {
172
- setPopupOpen(false);
173
- setMatches([]);
174
- };
175
- const detect = () => {
176
- const text = handlers.getText();
177
- const caret = textarea()?.selectionStart ?? text.length;
178
- caretIndex.current = caret;
179
- const head = text.slice(0, caret);
180
- const char = resolve().trigger ?? "@";
181
- const anchor = head.lastIndexOf(char);
182
- const token = anchor === -1 ? "" : head.slice(anchor + char.length);
183
- if (anchor === -1 || /\s/.test(token)) {
184
- closePopup();
185
- return;
186
- }
187
- const found = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
188
- setMatches(found);
189
- setActive(0);
190
- anchorIndex.current = anchor;
191
- setPopupOpen(found.length > 0);
192
- };
193
- const insert = (entry) => {
194
- const text = handlers.getText();
195
- const char = resolve().trigger ?? "@";
196
- const next = text.slice(0, anchorIndex.current) + char + entry.label + " " + text.slice(caretIndex.current);
197
- handlers.setText(next);
198
- closePopup();
199
- setTimeout(() => {
200
- const el = textarea();
201
- if (!el) return;
202
- const caret = anchorIndex.current + char.length + entry.label.length + 1;
203
- el.focus();
204
- el.setSelectionRange(caret, caret);
205
- }, 0);
206
- };
207
- /** Feed the field's input events through here — the vessel watches
208
- * the text as it lands, from the element itself. */
209
- const onInput = () => detect();
210
- /** Arrows move, Enter inserts, Escape dismisses. Answers `true` when
211
- * the vessel consumed the key. */
212
- const onKeydown = (event) => {
213
- if (!popupOpen || matches.length === 0) return false;
214
- if (event.key === "ArrowDown") {
215
- event.preventDefault();
216
- setActive((current) => (current + 1) % matches.length);
217
- } else if (event.key === "ArrowUp") {
218
- event.preventDefault();
219
- setActive((current) => (current - 1 + matches.length) % matches.length);
220
- } else if (event.key === "Enter") {
221
- event.preventDefault();
222
- insert(matches[active]);
223
- } else if (event.key === "Escape") closePopup();
224
- else return false;
225
- return true;
226
- };
227
- return {
228
- open: popupOpen,
229
- matches,
230
- active,
231
- setActive,
232
- insert,
233
- close: closePopup,
234
- onInput,
235
- onKeydown
236
- };
237
- }
238
- //#endregion
239
- //#region src/components/mentions/index.tsx
240
- /** The vessel: the candidates themselves as a floating card. The anchor
241
- * is virtual — a live rectangle off the host's field — so a host keeps
242
- * its own anatomy (the textarea rides where the host puts it) and the
243
- * vessel still points at the right place. Shares the detection state
244
- * with the host through `useMentions`. */
245
- function MentionsVessel({ open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange }) {
246
- return /* @__PURE__ */ jsx(Popover$1.Root, {
247
- open,
248
- onOpenChange: (details) => onOpenChange?.(details.open),
249
- positioning: {
250
- placement: "bottom-start",
251
- getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
252
- },
253
- children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
254
- asChild: true,
255
- children: /* @__PURE__ */ jsx("div", {
256
- "data-scope": "mentions",
257
- "data-part": "popup",
258
- children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
259
- "data-scope": "mentions",
260
- "data-part": "option",
261
- "data-active": index === active ? "" : void 0,
262
- onMouseEnter: () => onActiveChange?.(index),
263
- onMouseDown: (event) => event.preventDefault(),
264
- onClick: () => onInsert?.(entry),
265
- children: entry.label
266
- }, entry.value))
267
- })
268
- }) }) })
269
- });
270
- }
271
- function Mentions({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, onValueChange, children, ...rest }) {
272
- const [internal, setInternal] = useState("");
273
- const fieldRef = useRef(null);
274
- const el = () => fieldRef.current;
275
- const current = value ?? internal;
276
- const mentions = useMentions({
277
- items,
278
- trigger
279
- }, el, {
280
- getText: () => el()?.value ?? current,
281
- setText: (next) => {
282
- setInternal(next);
283
- onValueChange?.(next);
284
- }
285
- });
286
- const handleChange = (event) => {
287
- const node = event.currentTarget;
288
- setInternal(node.value);
289
- onValueChange?.(node.value);
290
- mentions.onInput();
291
- };
292
- return /* @__PURE__ */ jsxs("div", {
293
- ...rest,
294
- "data-scope": "mentions",
295
- "data-part": "root",
296
- children: [
297
- /* @__PURE__ */ jsx(Field.Textarea, {
298
- ref: fieldRef,
299
- autoresize,
300
- rows: 3,
301
- placeholder,
302
- value: current,
303
- onChange: handleChange,
304
- onKeyDown: (event) => mentions.onKeydown(event),
305
- "data-invalid": invalid || void 0,
306
- "data-scope": "mentions",
307
- "data-part": "textarea"
308
- }),
309
- /* @__PURE__ */ jsx(MentionsVessel, {
310
- open: mentions.open,
311
- matches: mentions.matches,
312
- active: mentions.active,
313
- anchor: el(),
314
- onInsert: mentions.insert,
315
- onActiveChange: mentions.setActive,
316
- onOpenChange: (open) => {
317
- if (!open) mentions.close();
318
- }
319
- }),
320
- children
321
- ]
322
- });
323
- }
324
- injectComponentStyle("mentions");
325
- //#endregion
326
- //#region src/components/ai-prompt-input/index.tsx
327
- const arrowUpGlyph = /* @__PURE__ */ jsx("svg", {
328
- viewBox: "0 0 16 16",
329
- width: 14,
330
- height: 14,
331
- "aria-hidden": "true",
332
- fill: "none",
333
- stroke: "currentColor",
334
- strokeWidth: 1.5,
335
- strokeLinecap: "square",
336
- children: /* @__PURE__ */ jsx("path", { d: "M8 13V3M3.5 7.5 8 3l4.5 4.5" })
337
- });
338
- const stopGlyph = /* @__PURE__ */ jsx("svg", {
339
- viewBox: "0 0 16 16",
340
- width: 14,
341
- height: 14,
342
- "aria-hidden": "true",
343
- children: /* @__PURE__ */ jsx("rect", {
344
- x: 4.5,
345
- y: 4.5,
346
- width: 7,
347
- height: 7,
348
- fill: "currentColor"
349
- })
350
- });
351
- /** An empty slot leaves no part in the anatomy — the bare vessel keeps
352
- * its single-line posture. */
353
- function row(part, content) {
354
- if (content == null || Array.isArray(content) && content.length === 0) return null;
355
- return /* @__PURE__ */ jsx("div", {
356
- "data-scope": "ai",
357
- "data-part": part,
358
- children: content
359
- });
360
- }
361
- function PromptInput({ value, onValueChange, onSubmit, onStop, placeholder = "Send a message", disabled = false, busy = false, mentions, header, leading, trailing, footer, footerEnd, ...rest }) {
362
- const fieldRef = useRef(null);
363
- const mentionState = useMentions(() => ({
364
- items: mentions?.items ?? [],
365
- trigger: mentions?.trigger
366
- }), () => fieldRef.current, {
367
- getText: () => fieldRef.current?.value ?? value,
368
- setText: (next) => onValueChange?.(next)
369
- });
370
- const mentionsActive = mentions != null;
371
- const submit = () => {
372
- const text = value.trim();
373
- if (!text || disabled || busy) return;
374
- onSubmit?.(text);
375
- onValueChange?.("");
376
- };
377
- const seal = busy ? /* @__PURE__ */ jsx(Button, {
378
- variant: "solid",
379
- size: "sm",
380
- square: true,
381
- type: "button",
382
- "aria-label": "Stop",
383
- disabled,
384
- onClick: () => onStop?.(),
385
- children: stopGlyph
386
- }) : /* @__PURE__ */ jsx(Button, {
387
- variant: "solid",
388
- size: "sm",
389
- square: true,
390
- type: "submit",
391
- "aria-label": "Send",
392
- disabled: disabled || !value.trim(),
393
- children: arrowUpGlyph
394
- });
395
- const hasFooter = footer != null && (!Array.isArray(footer) || footer.length > 0);
396
- return /* @__PURE__ */ jsxs("form", {
397
- ...rest,
398
- "data-scope": "ai",
399
- "data-part": "prompt",
400
- onSubmit: (event) => {
401
- event.preventDefault();
402
- submit();
403
- },
404
- children: [
405
- row("prompt-header", header),
406
- /* @__PURE__ */ jsxs("div", {
407
- "data-scope": "ai",
408
- "data-part": "prompt-main",
409
- children: [
410
- row("prompt-leading", leading),
411
- /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Textarea, {
412
- ref: fieldRef,
413
- autoresize: true,
414
- rows: 1,
415
- value,
416
- placeholder,
417
- disabled,
418
- onChange: (event) => {
419
- onValueChange?.(event.target.value);
420
- mentionState.onInput();
421
- },
422
- onKeyDown: (event) => {
423
- if (mentionState.onKeydown(event)) return;
424
- if (event.key === "Enter" && !event.shiftKey) {
425
- event.preventDefault();
426
- submit();
427
- }
428
- }
429
- }) }),
430
- mentionsActive ? /* @__PURE__ */ jsx(MentionsVessel, {
431
- open: mentionState.open,
432
- matches: mentionState.matches,
433
- active: mentionState.active,
434
- anchor: fieldRef.current,
435
- onInsert: mentionState.insert,
436
- onActiveChange: mentionState.setActive,
437
- onOpenChange: (open) => {
438
- if (!open) mentionState.close();
439
- }
440
- }) : null,
441
- row("prompt-trailing", hasFooter ? trailing : trailing ?? seal)
442
- ]
443
- }),
444
- hasFooter ? /* @__PURE__ */ jsxs("div", {
445
- "data-scope": "ai",
446
- "data-part": "prompt-footer",
447
- children: [footer, row("prompt-end", footerEnd == null ? seal : /* @__PURE__ */ jsxs(Fragment, { children: [footerEnd, seal] }))]
448
- }) : null
449
- ]
450
- });
451
- }
452
- injectComponentStyle("ai");
453
- //#endregion
454
- //#region src/components/ai/chevron.tsx
455
- /** The folding chevron the shared indicator turns. */
456
- const chevron$2 = /* @__PURE__ */ jsx("svg", {
457
- viewBox: "0 0 16 16",
458
- fill: "none",
459
- "aria-hidden": "true",
460
- children: /* @__PURE__ */ jsx("path", {
461
- d: "M6 4l4 4-4 4",
462
- stroke: "currentColor",
463
- strokeWidth: 1.5,
464
- strokeLinecap: "round",
465
- strokeLinejoin: "round"
466
- })
467
- });
468
- //#endregion
469
- //#region src/components/collapsible/index.tsx
470
- /** Ark's Collapsible, dressed in the paper-and-ink system: one control on
471
- * the paper, its panel dissolving open to the machine's measured height.
472
- * The API is Ark's own — Root, Trigger, Content, Indicator. */
473
- const Collapsible = Collapsible$1;
474
- injectComponentStyle("collapsible");
475
- //#endregion
476
- //#region src/components/ai-reasoning/index.tsx
477
- function Reasoning({ label = "Thinking", children, ...rest }) {
478
- return /* @__PURE__ */ jsxs(Collapsible.Root, {
479
- ...rest,
480
- "data-ai": "reasoning",
481
- children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$2 })] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("div", {
482
- "data-scope": "ai",
483
- "data-part": "reasoning-content",
484
- children
485
- }) })]
486
- });
487
- }
488
- injectComponentStyle("ai");
489
- //#endregion
490
- //#region src/components/ai-response/code-copy.ts
491
- /** The two glyphs a copy affordance needs: the stamp and its
492
- * confirmation. Inline SVG keeps the enhancement framework-agnostic —
493
- * it lives beside the renderer's generated code HTML. */
494
- const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
495
- const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
496
- /** How long the confirmation stays before the stamp returns. */
497
- const REVERT_MS = 1500;
498
- /** Make sure every fenced block under `host` carries its copy stamp.
499
- * The stamp anchors to a wrapper outside the scrolling `pre` — inside,
500
- * it would fix to the overflow area and travel out of view with the
501
- * code. The renderer rebuilds the markdown as one HTML string on every
502
- * stream tick, so this stays idempotent and cheap enough to re-run
503
- * after each patch. */
504
- function decorateCodeCopy(host, copyLabel) {
505
- for (const pre of host.querySelectorAll("pre")) {
506
- let body = pre.parentElement;
507
- if (!body || body.getAttribute("data-part") !== "code-body") {
508
- body = document.createElement("div");
509
- body.setAttribute("data-scope", "ai");
510
- body.setAttribute("data-part", "code-body");
511
- pre.replaceWith(body);
512
- body.appendChild(pre);
513
- }
514
- let button = body.querySelector("[data-part=\"code-copy\"]");
515
- if (!button) {
516
- button = document.createElement("button");
517
- button.type = "button";
518
- button.setAttribute("data-scope", "ai");
519
- button.setAttribute("data-part", "code-copy");
520
- button.innerHTML = COPY_CODE_ICON;
521
- body.appendChild(button);
522
- }
523
- button.title = copyLabel;
524
- button.setAttribute("aria-label", copyLabel);
525
- }
526
- }
527
- /** The one delegated click for the whole response: copy the block's
528
- * text and confirm in place, then return the stamp after a beat. */
529
- async function clickCodeCopy(event, copyLabel, copiedLabel) {
530
- const button = event.target?.closest("[data-part=\"code-copy\"]");
531
- const pre = button?.closest("[data-part=\"code-body\"]")?.querySelector("pre");
532
- if (!button || !pre) return;
533
- await navigator.clipboard.writeText(pre.textContent ?? "");
534
- button.innerHTML = COPIED_CODE_ICON;
535
- button.setAttribute("data-state", "copied");
536
- button.title = copiedLabel;
537
- button.setAttribute("aria-label", copiedLabel);
538
- setTimeout(() => {
539
- if (!button.isConnected) return;
540
- button.innerHTML = COPY_CODE_ICON;
541
- button.removeAttribute("data-state");
542
- button.title = copyLabel;
543
- button.setAttribute("aria-label", copyLabel);
544
- }, REVERT_MS);
545
- }
546
- //#endregion
547
- //#region src/components/ai-response/index.tsx
548
- function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
549
- const root = useRef(null);
550
- useEffect(() => {
551
- const host = root.current;
552
- if (host) decorateCodeCopy(host, copyLabel);
553
- }, [
554
- content,
555
- highlighter,
556
- copyLabel
557
- ]);
558
- const onClick = (event) => {
559
- clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
560
- };
561
- return /* @__PURE__ */ jsx("div", {
562
- ...rest,
563
- ref: root,
564
- "data-scope": "ai",
565
- "data-part": "response",
566
- onClick,
567
- dangerouslySetInnerHTML: { __html: renderHtml(content, highlighter ? { highlighter } : void 0) }
568
- });
569
- }
570
- injectComponentStyle("ai");
571
- //#endregion
572
- //#region src/components/ai-source/index.tsx
573
- function Source({ href, children, ...rest }) {
574
- return /* @__PURE__ */ jsx("li", {
575
- "data-scope": "ai",
576
- "data-part": "source",
577
- children: /* @__PURE__ */ jsx("a", {
578
- ...rest,
579
- href,
580
- target: "_blank",
581
- rel: "noreferrer",
582
- children: children ?? href
583
- })
584
- });
585
- }
586
- function Sources({ children, ...rest }) {
587
- return /* @__PURE__ */ jsx("ol", {
588
- ...rest,
589
- "data-scope": "ai",
590
- "data-part": "sources",
591
- children
592
- });
593
- }
594
- injectComponentStyle("ai");
595
- //#endregion
596
- //#region src/components/ai-suggestion/index.tsx
597
- function Suggestion({ prompt, onSelect, ...rest }) {
598
- return /* @__PURE__ */ jsx(Button, {
599
- variant: "outline",
600
- size: "sm",
601
- ...rest,
602
- onClick: () => onSelect?.(prompt),
603
- children: prompt
604
- });
605
- }
606
- injectComponentStyle("ai");
607
- //#endregion
608
- //#region src/components/ai-tool/index.tsx
609
- function Tool({ name, label, status, input, output, ...rest }) {
610
- return /* @__PURE__ */ jsxs(Collapsible.Root, {
611
- ...rest,
612
- "data-ai": "tool",
613
- "data-status": status,
614
- children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, { children: [
615
- /* @__PURE__ */ jsx("span", { children: label ?? name }),
616
- status ? /* @__PURE__ */ jsx("span", {
617
- "data-scope": "ai",
618
- "data-part": "tool-status",
619
- children: status.charAt(0).toUpperCase() + status.slice(1)
620
- }) : null,
621
- /* @__PURE__ */ jsx(Collapsible.Indicator, { children: chevron$2 })
622
- ] }), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsxs("div", {
623
- "data-scope": "ai",
624
- "data-part": "tool-body",
625
- children: [input ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
626
- "data-scope": "ai",
627
- "data-part": "tool-label",
628
- children: "Input"
629
- }), /* @__PURE__ */ jsx("pre", { children: input })] }) : null, output ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
630
- "data-scope": "ai",
631
- "data-part": "tool-label",
632
- children: "Output"
633
- }), /* @__PURE__ */ jsx("pre", { children: output })] }) : null]
634
- }) })]
635
- });
636
- }
637
- injectComponentStyle("ai");
638
- //#endregion
639
- //#region src/components/ai/index.tsx
640
- /** A conversation column: Root is the log, Message carries a role, and
641
- * the speaking parts — Response, Reasoning, Tool, Sources — part the
642
- * stream. The interactive folds are the shared Collapsible wearing a
643
- * `data-ai` marker, so the machine work is never ours. Parts stay
644
- * agnostic of any client; consumers map their message format (e.g. the
645
- * `UIMessage` parts re-exported here) onto these primitives. */
646
- function part$12(name, tag, extra = {}) {
647
- const Tag = tag;
648
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
649
- ...extra,
650
- ...rest,
651
- "data-scope": "ai",
652
- "data-part": name.toLowerCase(),
653
- children
654
- });
655
- Component.displayName = "Ai" + name;
656
- return Component;
657
- }
658
- /** The log itself: the column every stroke lands in, a landmark to
659
- * screen readers. */
660
- const Conversation = part$12("Conversation", "div", {
661
- role: "log",
662
- "aria-label": "Conversation"
663
- });
664
- /** The bubble's inner measure — content that belongs to neither side
665
- * specifically. */
666
- const MessageContent = part$12("Content", "div");
667
- /** The quiet row under a message — copy, retry, feedback. */
668
- const Actions$4 = part$12("Actions", "div");
669
- /** The while-it-works whisper for the in-flight turns. */
670
- const Loader = part$12("Loader", "span", {
671
- role: "status",
672
- "aria-label": "Loading"
673
- });
674
- /** The whole family under one handle — `Ai.Conversation`,
675
- * `Ai.Message`, and the rest, exactly as before the split. */
676
- const Ai = Object.assign(Conversation, {
677
- Conversation,
678
- MessageContent,
679
- Actions: Actions$4,
680
- Loader,
681
- Message,
682
- Response,
683
- Reasoning,
684
- Tool,
685
- Sources,
686
- Source,
687
- Action,
688
- Suggestion,
689
- PromptInput
690
- });
691
- injectComponentStyle("ai");
692
- //#endregion
693
- //#region src/components/ai-attachments/index.tsx
694
- const imageGlyph = /* @__PURE__ */ jsxs("svg", {
695
- viewBox: "0 0 16 16",
696
- "aria-hidden": "true",
697
- fill: "none",
698
- stroke: "currentColor",
699
- strokeWidth: 1.5,
700
- strokeLinecap: "square",
701
- children: [
702
- /* @__PURE__ */ jsx("rect", {
703
- x: 2.5,
704
- y: 3.5,
705
- width: 11,
706
- height: 9
707
- }),
708
- /* @__PURE__ */ jsx("path", { d: "M2.5 10.5 6 7l3 3 2-1.5 2.5 2" }),
709
- /* @__PURE__ */ jsx("circle", {
710
- cx: 6,
711
- cy: 6,
712
- r: .75,
713
- fill: "currentColor",
714
- stroke: "none"
715
- })
716
- ]
717
- });
718
- const fileGlyph = /* @__PURE__ */ jsxs("svg", {
719
- viewBox: "0 0 16 16",
720
- "aria-hidden": "true",
721
- fill: "none",
722
- stroke: "currentColor",
723
- strokeWidth: 1.5,
724
- strokeLinecap: "square",
725
- children: [/* @__PURE__ */ jsx("path", { d: "M4 2.5h5l3 3V13.5H4z" }), /* @__PURE__ */ jsx("path", { d: "M9 2.5v3h3" })]
726
- });
727
- const removeGlyph = /* @__PURE__ */ jsx("svg", {
728
- viewBox: "0 0 16 16",
729
- width: 12,
730
- height: 12,
731
- "aria-hidden": "true",
732
- fill: "none",
733
- stroke: "currentColor",
734
- strokeWidth: 1.5,
735
- strokeLinecap: "square",
736
- children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
737
- });
738
- const IMAGE_EXTS = [
739
- "png",
740
- "jpg",
741
- "jpeg",
742
- "gif",
743
- "webp",
744
- "svg",
745
- "avif",
746
- "bmp",
747
- "ico"
748
- ];
749
- const isImage = (name) => IMAGE_EXTS.includes(name.split(".").pop()?.toLowerCase() ?? "");
750
- const humanSize = (bytes) => {
751
- if (bytes < 1024) return `${bytes} B`;
752
- const units = [
753
- "KB",
754
- "MB",
755
- "GB"
756
- ];
757
- let value = bytes;
758
- let unit = -1;
759
- do {
760
- value /= 1024;
761
- unit += 1;
762
- } while (value >= 1024 && unit < units.length - 1);
763
- return `${value.toFixed(1)} ${units[unit]}`;
764
- };
765
- function Attachment({ name, size, status = "ready", onRemove, ...rest }) {
766
- return /* @__PURE__ */ jsxs("span", {
767
- ...rest,
768
- "data-scope": "ai",
769
- "data-part": "attachment",
770
- "data-status": status,
771
- children: [
772
- isImage(name) ? imageGlyph : fileGlyph,
773
- /* @__PURE__ */ jsx("span", { children: name }),
774
- size !== void 0 ? /* @__PURE__ */ jsx("span", { children: humanSize(size) }) : null,
775
- /* @__PURE__ */ jsx("button", {
776
- type: "button",
777
- "data-remove": "",
778
- "aria-label": `Remove ${name}`,
779
- onClick: () => onRemove?.(),
780
- children: removeGlyph
781
- })
782
- ]
783
- });
784
- }
785
- /** The row the files ride in — a wrapping line of chips. */
786
- function Attachments({ children, ...rest }) {
787
- return /* @__PURE__ */ jsx("span", {
788
- ...rest,
789
- "data-scope": "ai",
790
- "data-part": "attachments",
791
- children
792
- });
793
- }
794
- injectComponentStyle("ai");
795
- //#endregion
796
- //#region src/components/alert/index.tsx
797
- const StatusContext = createContext("ink");
798
- function glyph(status) {
799
- return /* @__PURE__ */ jsx("svg", {
800
- width: 16,
801
- height: 16,
802
- viewBox: "0 0 24 24",
803
- fill: "none",
804
- stroke: "currentColor",
805
- strokeWidth: 1.75,
806
- strokeLinecap: "round",
807
- strokeLinejoin: "round",
808
- "aria-hidden": "true",
809
- children: /* @__PURE__ */ jsx("path", { d: {
810
- info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
811
- success: "m4 12.5 5 5L20 6.5",
812
- warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
813
- danger: "M6 6l12 12M18 6 6 18",
814
- ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
815
- }[status] })
816
- });
817
- }
818
- function AlertRoot({ status = "ink", children, ...rest }) {
819
- return /* @__PURE__ */ jsx(StatusContext.Provider, {
820
- value: status,
821
- children: /* @__PURE__ */ jsx("div", {
822
- ...rest,
823
- role: status === "ink" || status === "info" ? "status" : "alert",
824
- "data-scope": "alert",
825
- "data-part": "root",
826
- "data-status": status,
827
- children
828
- })
829
- });
830
- }
831
- function Icon$2() {
832
- const status = useContext(StatusContext);
833
- return /* @__PURE__ */ jsx("span", {
834
- "data-scope": "alert",
835
- "data-part": "icon",
836
- children: glyph(status)
837
- });
838
- }
839
- function Body$2({ children, ...rest }) {
840
- return /* @__PURE__ */ jsx("div", {
841
- ...rest,
842
- "data-scope": "alert",
843
- "data-part": "body",
844
- children
845
- });
846
- }
847
- function Title$4({ children, ...rest }) {
848
- return /* @__PURE__ */ jsx("p", {
849
- ...rest,
850
- "data-scope": "alert",
851
- "data-part": "title",
852
- children
853
- });
854
- }
855
- function Description$5({ children, ...rest }) {
856
- return /* @__PURE__ */ jsx("p", {
857
- ...rest,
858
- "data-scope": "alert",
859
- "data-part": "description",
860
- children
861
- });
862
- }
863
- const Alert = Object.assign(AlertRoot, {
864
- Root: AlertRoot,
865
- Icon: Icon$2,
866
- Body: Body$2,
867
- Title: Title$4,
868
- Description: Description$5
869
- });
870
- injectComponentStyle("alert");
871
- //#endregion
872
- //#region src/components/angle-slider/index.tsx
873
- /** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
874
- * the thumb sweeps as a pigment needle over hairline degree ticks. The API
875
- * is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
876
- * Marker, HiddenInput. */
877
- const AngleSlider = AngleSlider$1;
878
- injectComponentStyle("angle-slider");
879
- //#endregion
880
- //#region src/components/aspect-ratio/index.tsx
881
- function AspectRatio({ ratio = "1 / 1", ...rest }) {
882
- return /* @__PURE__ */ jsx("div", {
883
- ...rest,
884
- style: {
885
- ...rest.style,
886
- "--bs-aspect-ratio": ratio
887
- },
888
- "data-scope": "aspect-ratio",
889
- "data-part": "root"
890
- });
891
- }
892
- injectComponentStyle("aspect-ratio");
893
- //#endregion
894
- //#region src/components/autocomplete/index.tsx
895
- function AutoComplete({ value = "", items = [], placeholder, filter, onValueChange, ...rest }) {
896
- const { collection, filter: filterItems } = useListCollection$1({
897
- initialItems: items,
898
- filter: (item, input) => filter ? filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
899
- });
900
- return /* @__PURE__ */ jsxs(Combobox$1.Root, {
901
- ...rest,
902
- collection,
903
- inputValue: value,
904
- allowCustomValue: true,
905
- onValueChange: (details) => {
906
- const [first] = details.value;
907
- if (first != null) onValueChange?.(first);
908
- },
909
- onInputValueChange: (details) => {
910
- filterItems(details.inputValue);
911
- onValueChange?.(details.inputValue);
912
- },
913
- positioning: { sameWidth: true },
914
- children: [/* @__PURE__ */ jsx(Combobox$1.Control, { children: /* @__PURE__ */ jsx(Combobox$1.Input, { placeholder }) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [/* @__PURE__ */ jsx(Combobox$1.Empty, { children: "No matches" }), collection.items.map((item) => /* @__PURE__ */ jsx(Combobox$1.Item, {
915
- item,
916
- children: /* @__PURE__ */ jsx(Combobox$1.ItemText, { children: item })
917
- }, item))] }) }) })]
918
- });
919
- }
920
- injectComponentStyle("combobox");
921
- //#endregion
922
- //#region src/components/avatar/index.tsx
923
- function AvatarRoot({ size, ...rest }) {
924
- return /* @__PURE__ */ jsx(Avatar$1.Root, {
925
- ...rest,
926
- "data-size": size
927
- });
928
- }
929
- const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
930
- injectComponentStyle("avatar");
931
- //#endregion
932
- //#region src/components/avatar-group/index.tsx
933
- function AvatarGroup({ children, ...rest }) {
934
- return /* @__PURE__ */ jsx("div", {
935
- ...rest,
936
- "data-scope": "avatar-group",
937
- "data-part": "root",
938
- children
939
- });
940
- }
941
- injectComponentStyle("avatar-group");
942
- //#endregion
943
- //#region src/components/back-top/index.tsx
944
- /** The single glyph a way-home control needs: one stroke pointing up. */
945
- function chevronUp() {
946
- return /* @__PURE__ */ jsx("svg", {
947
- width: 16,
948
- height: 16,
949
- viewBox: "0 0 24 24",
950
- fill: "none",
951
- stroke: "currentColor",
952
- strokeWidth: 1.75,
953
- strokeLinecap: "round",
954
- strokeLinejoin: "round",
955
- "aria-hidden": "true",
956
- children: /* @__PURE__ */ jsx("path", { d: "m6 14 6-6 6 6" })
957
- });
958
- }
959
- /**
960
- * A way home: after the page has scrolled past `threshold`, a small
961
- * floating control rises at the page's corner and returns the reader to
962
- * the top. The scroll itself stays native — `window.scrollTo` defers to
963
- * the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
964
- * back into an instant jump (a moored control asks the media query
965
- * directly, since a scroller of its own has no stylesheet to defer to).
966
- * The button stays mounted either way so the entrance is a transition,
967
- * never a pop.
968
- *
969
- * The control itself is the shared `Button` (outline, square) — the
970
- * paper, hairline and halo are its; this family owns only the floating
971
- * and the entrance.
972
- */
973
- function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
974
- const [visible, setVisible] = useState(false);
975
- useEffect(() => {
976
- if (typeof window === "undefined") return;
977
- const el = scrollEl?.() ?? null;
978
- const onScroll = () => setVisible((el ? el.scrollTop : window.scrollY) > threshold);
979
- onScroll();
980
- if (el) el.addEventListener("scroll", onScroll, { passive: true });
981
- else window.addEventListener("scroll", onScroll, { passive: true });
982
- return () => {
983
- if (el) el.removeEventListener("scroll", onScroll);
984
- else window.removeEventListener("scroll", onScroll);
985
- };
986
- }, [threshold, scrollEl]);
987
- const toTop = () => {
988
- const el = scrollEl?.();
989
- if (!el) {
990
- window.scrollTo({ top: 0 });
991
- return;
992
- }
993
- const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
994
- el.scrollTo({
995
- top: 0,
996
- behavior: reduce ? "auto" : "smooth"
997
- });
998
- };
999
- return /* @__PURE__ */ jsx("div", {
1000
- "data-scope": "back-top",
1001
- "data-part": "root",
1002
- "data-state": visible ? "shown" : "hidden",
1003
- ...scrollEl ? { "data-container": "" } : {},
1004
- children: /* @__PURE__ */ jsx(Button, {
1005
- ...rest,
1006
- variant: "outline",
1007
- square: true,
1008
- size: "lg",
1009
- type: "button",
1010
- "aria-label": label,
1011
- "aria-hidden": visible ? void 0 : "true",
1012
- tabIndex: visible ? 0 : -1,
1013
- onClick: toTop,
1014
- children: rest.children ?? chevronUp()
1015
- })
1016
- });
1017
- }
1018
- injectComponentStyle("back-top");
1019
- //#endregion
1020
- //#region src/components/badge/index.tsx
1021
- function Badge({ tone = "ink", variant = "solid", ...rest }) {
1022
- return /* @__PURE__ */ jsx("span", {
1023
- ...rest,
1024
- "data-scope": "badge",
1025
- "data-part": "root",
1026
- "data-tone": tone,
1027
- "data-variant": variant
1028
- });
1029
- }
1030
- injectComponentStyle("badge");
1031
- //#endregion
1032
- //#region src/components/breadcrumb/index.tsx
1033
- /** A trail of waymarks: Root wraps the nav, List the ordered trail, and
1034
- * each Item carries a Link — or the Current page — parted by a quiet
1035
- * Separator. Links take href and the rest through attributes. */
1036
- function part$11(name, tag, extra = {}, fallback) {
1037
- const Tag = tag;
1038
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
1039
- ...extra,
1040
- ...rest,
1041
- "data-scope": "breadcrumb",
1042
- "data-part": name.toLowerCase(),
1043
- children: children ?? fallback
1044
- });
1045
- Component.displayName = "Breadcrumb" + name;
1046
- return Component;
1047
- }
1048
- const Root$12 = part$11("Root", "nav", { "aria-label": "Breadcrumb" });
1049
- const List$1 = part$11("List", "ol");
1050
- const Item$4 = part$11("Item", "li");
1051
- const Link$1 = part$11("Link", "a");
1052
- const Current = part$11("Current", "span", { "aria-current": "page" });
1053
- const Separator$1 = part$11("Separator", "span", { "aria-hidden": "true" }, "/");
1054
- const Breadcrumb = Object.assign(Root$12, {
1055
- Root: Root$12,
1056
- List: List$1,
1057
- Item: Item$4,
1058
- Link: Link$1,
1059
- Current,
1060
- Separator: Separator$1
1061
- });
1062
- injectComponentStyle("breadcrumb");
1063
- //#endregion
1064
- //#region src/components/button-group/index.tsx
1065
- /**
1066
- * Buttons fused into one control: the group owns only the joinery, so
1067
- * members keep every variant they were given — a solid action can sit
1068
- * beside an outline one and the seam still reads. Selection belongs to
1069
- * the toggle group; this is layout alone.
1070
- */
1071
- function Root$11({ orientation = "horizontal", size, radius, children, ...rest }) {
1072
- return /* @__PURE__ */ jsx("div", {
1073
- ...rest,
1074
- role: "group",
1075
- "data-scope": "button-group",
1076
- "data-part": "root",
1077
- "data-orientation": orientation,
1078
- "data-size": size,
1079
- "data-radius": radius,
1080
- children
1081
- });
1082
- }
1083
- const ButtonGroup = Object.assign(Root$11, { Root: Root$11 });
1084
- injectComponentStyle("button-group");
1085
- //#endregion
1086
- //#region src/components/banner/index.tsx
1087
- /** A page-level notice, spoken across the full measure: a wash of the
1088
- * status pigment, one heavier hairline on the leading edge, and room
1089
- * for actions and a quiet close. Ink is the neutral register; the four
1090
- * semantic pigments are fixed. */
1091
- const Root$10 = ({ status = "ink", children, ...rest }) => /* @__PURE__ */ jsx("div", {
1092
- ...rest,
1093
- role: status === "ink" ? void 0 : "status",
1094
- "data-scope": "banner",
1095
- "data-part": "root",
1096
- "data-status": status,
1097
- children
1098
- });
1099
- function part$10(name, tag) {
1100
- const Tag = tag;
1101
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
1102
- ...rest,
1103
- "data-scope": "banner",
1104
- "data-part": name.toLowerCase(),
1105
- children
1106
- });
1107
- Component.displayName = "Banner" + name;
1108
- return Component;
1109
- }
1110
- const Icon$1 = part$10("Icon", "span");
1111
- const Body$1 = part$10("Body", "div");
1112
- const Title$3 = part$10("Title", "p");
1113
- const Description$4 = part$10("Description", "p");
1114
- const Actions$3 = part$10("Actions", "div");
1115
- /** The quiet close: a plain square-cut button; dismissal stays the
1116
- * consumer's state. */
1117
- const Close = (rest) => /* @__PURE__ */ jsx("button", {
1118
- ...rest,
1119
- type: rest.type ?? "button",
1120
- "aria-label": rest["aria-label"] ?? "Dismiss",
1121
- "data-scope": "banner",
1122
- "data-part": "close",
1123
- children: /* @__PURE__ */ jsx("svg", {
1124
- viewBox: "0 0 16 16",
1125
- fill: "none",
1126
- "aria-hidden": true,
1127
- children: /* @__PURE__ */ jsx("path", {
1128
- d: "M4 4l8 8M12 4l-8 8",
1129
- stroke: "currentColor",
1130
- strokeWidth: 1.5,
1131
- strokeLinecap: "round"
1132
- })
1133
- })
1134
- });
1135
- const Banner = Object.assign(Root$10, {
1136
- Root: Root$10,
1137
- Icon: Icon$1,
1138
- Body: Body$1,
1139
- Title: Title$3,
1140
- Description: Description$4,
1141
- Actions: Actions$3,
1142
- Close
1143
- });
1144
- injectComponentStyle("banner");
1145
- //#endregion
1146
- //#region src/components/calendar/index.tsx
1147
- function chevron$1(dir) {
1148
- return /* @__PURE__ */ jsx("svg", {
1149
- width: 16,
1150
- height: 16,
1151
- viewBox: "0 0 24 24",
1152
- fill: "none",
1153
- stroke: "currentColor",
1154
- strokeWidth: 1.75,
1155
- "aria-hidden": true,
1156
- style: dir === "left" ? { transform: "rotate(180deg)" } : void 0,
1157
- children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" })
1158
- });
1159
- }
1160
- /** The date-picker's month grid, standing on the page without its
1161
- * popup: always open, the trigger gone, the vessel a quiet card. The
1162
- * title zooms out through month and year grids; the grids themselves
1163
- * are the shared machinery — value, range selection, and focus ride
1164
- * Ark's own contract. */
1165
- function Calendar({ value, min, max, onValueChange, children, ...rest }) {
1166
- const title = (dp) => {
1167
- const d = dp.focusedValue;
1168
- if (!d) return "";
1169
- if (dp.view === "day") return dp.format(d, {
1170
- month: "long",
1171
- year: "numeric"
1172
- });
1173
- if (dp.view === "month") return dp.format(d, { year: "numeric" });
1174
- const decade = Math.floor(d.year / 10) * 10;
1175
- return `${decade} - ${decade + 9}`;
1176
- };
1177
- const header = /* @__PURE__ */ jsx("div", {
1178
- "data-scope": "calendar",
1179
- "data-part": "header",
1180
- children: /* @__PURE__ */ jsxs(DatePicker$1.ViewControl, { children: [
1181
- /* @__PURE__ */ jsx(DatePicker$1.PrevTrigger, { children: chevron$1("left") }),
1182
- /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => /* @__PURE__ */ jsx(DatePicker$1.ViewTrigger, { children: title(dp) }) }),
1183
- /* @__PURE__ */ jsx(DatePicker$1.NextTrigger, { children: chevron$1("right") })
1184
- ] })
1185
- });
1186
- return /* @__PURE__ */ jsxs("div", {
1187
- ...rest,
1188
- "data-scope": "calendar",
1189
- "data-part": "root",
1190
- children: [/* @__PURE__ */ jsxs(DatePicker$1.Root, {
1191
- open: true,
1192
- closeOnSelect: true,
1193
- inline: true,
1194
- ...value !== void 0 ? { value } : {},
1195
- ...min !== void 0 ? { min } : {},
1196
- ...max !== void 0 ? { max } : {},
1197
- onValueChange: (details) => onValueChange?.(details.value),
1198
- children: [
1199
- /* @__PURE__ */ jsxs(DatePicker$1.View, {
1200
- view: "day",
1201
- children: [header, /* @__PURE__ */ jsxs(DatePicker$1.Table, { children: [/* @__PURE__ */ jsx(DatePicker$1.TableHead, { children: /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.weekDays.map((day, id) => /* @__PURE__ */ jsx(DatePicker$1.TableHeader, {
1202
- "aria-label": day.long,
1203
- children: day.narrow
1204
- }, id)) }) }) }), /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.weeks.map((week, id) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
1205
- value: day,
1206
- children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: day.day })
1207
- }, id2)) }, id)) }) })] })]
1208
- }),
1209
- /* @__PURE__ */ jsxs(DatePicker$1.View, {
1210
- view: "month",
1211
- children: [header, /* @__PURE__ */ jsx(DatePicker$1.Table, {
1212
- columns: 3,
1213
- children: /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.getMonthsGrid({ columns: 3 }).map((months, id) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
1214
- value: month.value,
1215
- columns: 3,
1216
- children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: month.label })
1217
- }, id2)) }, id)) }) })
1218
- })]
1219
- }),
1220
- /* @__PURE__ */ jsxs(DatePicker$1.View, {
1221
- view: "year",
1222
- children: [header, /* @__PURE__ */ jsx(DatePicker$1.Table, {
1223
- columns: 3,
1224
- children: /* @__PURE__ */ jsx(DatePicker$1.TableBody, { children: /* @__PURE__ */ jsx(DatePicker$1.Context, { children: (dp) => dp.getYearsGrid({ columns: 3 }).map((years, id) => /* @__PURE__ */ jsx(DatePicker$1.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePicker$1.TableCell, {
1225
- value: year.value,
1226
- columns: 3,
1227
- children: /* @__PURE__ */ jsx(DatePicker$1.TableCellTrigger, { children: year.label })
1228
- }, id2)) }, id)) }) })
1229
- })]
1230
- })
1231
- ]
1232
- }), children]
1233
- });
1234
- }
1235
- injectComponentStyle("calendar");
1236
- injectComponentStyle("date-picker");
1237
- //#endregion
1238
- //#region src/components/card/index.tsx
1239
- /** A vessel: round, resting at the first elevation, one hairline for its
1240
- * edge. Root, Header, Title, Description, Content, Footer — sections
1241
- * carry their own whitespace, so any subset composes. */
1242
- function part$9(name, tag) {
1243
- const Tag = tag;
1244
- const Component = ({ asChild, children, ...rest }) => {
1245
- const partProps = {
1246
- ...rest,
1247
- "data-scope": "card",
1248
- "data-part": name.toLowerCase()
1249
- };
1250
- if (asChild) {
1251
- const child = Children.only(children);
1252
- return isValidElement(child) ? cloneElement(child, partProps) : null;
1253
- }
1254
- return /* @__PURE__ */ jsx(Tag, {
1255
- ...partProps,
1256
- children
1257
- });
1258
- };
1259
- Component.displayName = "Card" + name;
1260
- return Component;
1261
- }
1262
- const Root$9 = part$9("Root", "section");
1263
- const Header$1 = part$9("Header", "header");
1264
- const Title$2 = part$9("Title", "h3");
1265
- const Description$3 = part$9("Description", "p");
1266
- const Content$3 = part$9("Content", "div");
1267
- const Footer$1 = part$9("Footer", "footer");
1268
- const Card = Object.assign(Root$9, {
1269
- Root: Root$9,
1270
- Header: Header$1,
1271
- Title: Title$2,
1272
- Description: Description$3,
1273
- Content: Content$3,
1274
- Footer: Footer$1
1275
- });
1276
- injectComponentStyle("card");
1277
- //#endregion
1278
- //#region src/components/input/index.tsx
1279
- function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
1280
- const field = useFieldContext();
1281
- const fieldProps = field?.getInputProps() ?? {};
1282
- return /* @__PURE__ */ jsx("input", {
1283
- ...fieldProps,
1284
- ...rest,
1285
- ...value !== void 0 ? { value } : {},
1286
- "data-scope": "input",
1287
- "data-part": "root",
1288
- "data-size": size,
1289
- "data-invalid": invalid || field?.invalid ? "" : void 0,
1290
- onChange: (event) => onValueChange?.(event.target.value)
1291
- });
1292
- }
1293
- injectComponentStyle("input");
1294
- //#endregion
1295
- //#region src/components/cascade-select/index.tsx
1296
- const chevronDown$2 = /* @__PURE__ */ jsx("svg", {
1297
- viewBox: "0 0 24 24",
1298
- fill: "none",
1299
- stroke: "currentColor",
1300
- strokeWidth: 2,
1301
- strokeLinecap: "round",
1302
- strokeLinejoin: "round",
1303
- "aria-hidden": "true",
1304
- children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
1305
- });
1306
- const chevronRight = /* @__PURE__ */ jsx("svg", {
1307
- viewBox: "0 0 24 24",
1308
- fill: "none",
1309
- stroke: "currentColor",
1310
- strokeWidth: 2,
1311
- strokeLinecap: "round",
1312
- strokeLinejoin: "round",
1313
- "aria-hidden": "true",
1314
- children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
1315
- });
1316
- const checkGlyph$2 = /* @__PURE__ */ jsx("svg", {
1317
- viewBox: "0 0 24 24",
1318
- fill: "none",
1319
- stroke: "currentColor",
1320
- strokeWidth: 3,
1321
- strokeLinecap: "round",
1322
- strokeLinejoin: "round",
1323
- "aria-hidden": "true",
1324
- children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
1325
- });
1326
- function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, onValueChange, ...rest }) {
1327
- const id = useId();
1328
- const locale = useLocaleContext();
1329
- const env = useEnvironmentContext();
1330
- const collection = cascade.collection({
1331
- nodeToValue: (node) => node.value,
1332
- nodeToString: (node) => node.label,
1333
- nodeToChildren: (node) => node.children ?? [],
1334
- rootNode: {
1335
- value: "ROOT",
1336
- label: "",
1337
- children: data
1338
- }
1339
- });
1340
- const service = useMachine(cascade.machine, {
1341
- id,
1342
- collection,
1343
- dir: locale.dir,
1344
- getRootNode: env.getRootNode.bind(env),
1345
- disabled: disabled || void 0,
1346
- multiple: multiple || void 0,
1347
- ...value !== void 0 ? { value } : {},
1348
- ...highlightTrigger != null ? { highlightTrigger } : {},
1349
- onValueChange(details) {
1350
- onValueChange?.(details.value);
1351
- }
1352
- });
1353
- const api = cascade.connect(service, normalizeProps);
1354
- const [query, setQuery] = useState("");
1355
- const filterFns = useFilter({ sensitivity: "base" });
1356
- const filtering = filterable && query.trim().length > 0;
1357
- /** The corridor's answer to a query: every leaf whose route matches —
1358
- * the query may land on any hop, and the whole route still shows. */
1359
- const matchPaths = useMemo(() => {
1360
- if (!filtering) return [];
1361
- const q = query.trim();
1362
- const hits = [];
1363
- const walk = (nodes, path, labels, matched) => {
1364
- for (const node of nodes ?? []) {
1365
- const hit = matched || filterFns.contains(node.label, q);
1366
- const nextPath = [...path, node.value];
1367
- const nextLabels = [...labels, node.label];
1368
- if (node.children?.length) walk(node.children, nextPath, nextLabels, hit);
1369
- else if (hit) hits.push({
1370
- path: nextPath,
1371
- labels: nextLabels
1372
- });
1373
- }
1374
- };
1375
- walk(data, [], [], false);
1376
- return hits;
1377
- }, [
1378
- filtering,
1379
- query,
1380
- filterFns,
1381
- data
1382
- ]);
1383
- const isSelected = (path) => (value ?? []).some((p) => p.join("/") === path.join("/"));
1384
- function pickMatch(path) {
1385
- if (multiple) {
1386
- const current = value ?? [];
1387
- const key = path.join("/");
1388
- const next = current.some((p) => p.join("/") === key) ? current.filter((p) => p.join("/") !== key) : [...current, path];
1389
- api.setValue(next);
1390
- } else {
1391
- api.selectValue(path);
1392
- api.setOpen(false);
1393
- }
1394
- }
1395
- /** The machine's `valueAsString` only updates through its select
1396
- * event, so an externally-set `value` would render the placeholder
1397
- * forever — resolve the labels from the data instead. */
1398
- function labelsFor(path) {
1399
- const out = [];
1400
- let nodes = data;
1401
- for (const entry of path) {
1402
- const node = nodes?.find((n) => n.value === entry);
1403
- if (!node) return null;
1404
- out.push(node.label);
1405
- nodes = node.children;
1406
- }
1407
- return out;
1408
- }
1409
- const display = (value ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null).join(", ");
1410
- /** One column per walk of the highlighted path — the list binds to
1411
- * the node, the next column hangs off its highlighted child. */
1412
- function renderColumn(node, indexPath, valuePath) {
1413
- const nodeProps = {
1414
- item: node,
1415
- indexPath,
1416
- value: valuePath
1417
- };
1418
- const nodeState = api.getItemState(nodeProps);
1419
- const children = collection.getNodeChildren(node);
1420
- const list = /* @__PURE__ */ jsx("ul", {
1421
- ...api.getListProps(nodeProps),
1422
- children: children.map((item, index) => {
1423
- const itemValue = collection.getNodeValue(item);
1424
- const itemProps = {
1425
- item,
1426
- indexPath: [...indexPath, index],
1427
- value: [...valuePath, itemValue]
1428
- };
1429
- const itemState = api.getItemState(itemProps);
1430
- return /* @__PURE__ */ jsxs("li", {
1431
- ...api.getItemProps(itemProps),
1432
- children: [
1433
- /* @__PURE__ */ jsx("span", {
1434
- ...api.getItemTextProps(itemProps),
1435
- children: item.label
1436
- }),
1437
- itemState.hasChildren ? /* @__PURE__ */ jsx("span", {
1438
- "data-part": "branch-indicator",
1439
- "aria-hidden": "true",
1440
- children: chevronRight
1441
- }) : null,
1442
- /* @__PURE__ */ jsx("span", {
1443
- ...api.getItemIndicatorProps(itemProps),
1444
- children: checkGlyph$2
1445
- })
1446
- ]
1447
- }, itemValue);
1448
- })
1449
- });
1450
- const next = nodeState.highlightedChild;
1451
- return [list, next != null && collection.isBranchNode(next) ? renderColumn(next, [...indexPath, nodeState.highlightedIndex], [...valuePath, collection.getNodeValue(next)]) : null];
1452
- }
1453
- return /* @__PURE__ */ jsxs("div", {
1454
- ...rest,
1455
- ...api.getRootProps(),
1456
- children: [/* @__PURE__ */ jsx("div", {
1457
- ...api.getControlProps(),
1458
- children: /* @__PURE__ */ jsxs("button", {
1459
- ...api.getTriggerProps(),
1460
- onClick: (event) => {
1461
- api.getTriggerProps().onClick?.(event);
1462
- setQuery("");
1463
- },
1464
- disabled: disabled || void 0,
1465
- children: [/* @__PURE__ */ jsx("span", {
1466
- ...api.getValueTextProps(),
1467
- children: display || placeholder
1468
- }), /* @__PURE__ */ jsx("span", {
1469
- ...api.getIndicatorProps(),
1470
- children: chevronDown$2
1471
- })]
1472
- })
1473
- }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
1474
- ...api.getPositionerProps(),
1475
- children: /* @__PURE__ */ jsxs("div", {
1476
- ...api.getContentProps(),
1477
- children: [filterable ? /* @__PURE__ */ jsx("div", {
1478
- "data-part": "search",
1479
- children: /* @__PURE__ */ jsx(Input, {
1480
- size: "sm",
1481
- value: query,
1482
- onValueChange: setQuery,
1483
- placeholder: "Filter…",
1484
- "aria-label": "Filter options"
1485
- })
1486
- }) : null, filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
1487
- "data-part": "empty",
1488
- children: "Nothing matches"
1489
- }) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
1490
- type: "button",
1491
- "data-part": "match",
1492
- "data-selected": isSelected(hit.path) || void 0,
1493
- onClick: () => pickMatch(hit.path),
1494
- children: hit.labels.join(" / ")
1495
- }, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])]
1496
- })
1497
- }) })]
1498
- });
1499
- }
1500
- injectComponentStyle("cascade-select");
1501
- //#endregion
1502
- //#region src/components/carousel/index.tsx
1503
- /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
1504
- * hairline-clipped lane, the triggers are quiet outline controls, and the
1505
- * current indicator alone carries the ink. The API is Ark's own — Root,
1506
- * Control, PrevTrigger, NextTrigger, ItemGroup, Item, IndicatorGroup,
1507
- * Indicator, AutoplayTrigger, ProgressText. */
1508
- const Carousel = Carousel$1;
1509
- injectComponentStyle("carousel");
1510
- //#endregion
1511
- //#region src/components/checkbox/index.tsx
1512
- /** Ark's Checkbox, dressed in the paper-and-ink system: a square-cut seal
1513
- * that fills flat with primary ink when ticked, the mark springing into
1514
- * place. The API is Ark's own — Root, Label, Control, Indicator,
1515
- * HiddenInput. */
1516
- const Checkbox = Checkbox$1;
1517
- injectComponentStyle("checkbox");
1518
- //#endregion
1519
- //#region src/components/checkbox-group/index.tsx
1520
- const checkGlyph$1 = /* @__PURE__ */ jsx("svg", {
1521
- viewBox: "0 0 24 24",
1522
- fill: "none",
1523
- stroke: "currentColor",
1524
- strokeWidth: 3,
1525
- strokeLinecap: "round",
1526
- strokeLinejoin: "round",
1527
- "aria-hidden": "true",
1528
- children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
1529
- });
1530
- /**
1531
- * One question, many answers: a labelled stack (or row) of the seal-cut
1532
- * checkboxes bound to a single array. Toggling a box adds or removes its
1533
- * value; the group itself is semantics (`role="group"`), the boxes stay
1534
- * the machine-driven originals. Inside a `Field.Root` the group picks up
1535
- * the field context, so the invalid and disabled states a Form routes to
1536
- * its name dress every box at once.
1537
- */
1538
- function CheckboxGroup({ value = [], options, layout = "vertical", invalid = false, disabled = false, onValueChange, ...rest }) {
1539
- const field = useFieldContext();
1540
- const selected = new Set(value);
1541
- const isInvalid = invalid || field?.invalid === true;
1542
- const isDisabled = disabled || field?.disabled === true;
1543
- function toggle(option) {
1544
- const next = new Set(selected);
1545
- if (next.has(option)) next.delete(option);
1546
- else next.add(option);
1547
- onValueChange?.([...next]);
1548
- }
1549
- return /* @__PURE__ */ jsx("div", {
1550
- ...rest,
1551
- role: "group",
1552
- "data-scope": "checkbox-group",
1553
- "data-part": "root",
1554
- "data-layout": layout,
1555
- "data-invalid": isInvalid ? "" : void 0,
1556
- children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox$1.Root, {
1557
- checked: selected.has(option.value),
1558
- invalid: isInvalid,
1559
- disabled: isDisabled || option.disabled === true,
1560
- onCheckedChange: () => toggle(option.value),
1561
- children: [
1562
- /* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph$1 }) }),
1563
- /* @__PURE__ */ jsx(Checkbox$1.Label, { children: option.label }),
1564
- /* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
1565
- ]
1566
- }, option.value))
1567
- });
1568
- }
1569
- injectComponentStyle("checkbox-group");
1570
- injectComponentStyle("checkbox");
1571
- //#endregion
1572
- //#region src/components/chip/index.tsx
1573
- function Chip({ value, max, tone = "ink", variant = "solid", ...rest }) {
1574
- const text = max != null && value > max ? `${max}+` : String(value);
1575
- return /* @__PURE__ */ jsx("span", {
1576
- ...rest,
1577
- "data-scope": "chip",
1578
- "data-part": "root",
1579
- "data-tone": tone,
1580
- "data-variant": variant,
1581
- children: text
1582
- });
1583
- }
1584
- injectComponentStyle("chip");
1585
- //#endregion
1586
- //#region src/components/clipboard/index.tsx
1587
- /** Ark's Clipboard, dressed in the paper-and-ink system: a hairline value
1588
- * field beside an icon-sized copy trigger whose ink turns bamboo while the
1589
- * copy is confirmed. The API is Ark's own — Root, Label, Control, Input,
1590
- * Trigger, Indicator, Context, HiddenInput. */
1591
- const Clipboard = Clipboard$1;
1592
- injectComponentStyle("clipboard");
1593
- //#endregion
1594
- //#region src/components/color-picker/index.tsx
1595
- /** Ark's ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch
1596
- * on the paper, opening into an area and channel sliders where pigment is
1597
- * picked. The API is Ark's own — Root, Label, Control, Trigger, Positioner,
1598
- * Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch,
1599
- * ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb,
1600
- * ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup,
1601
- * SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger,
1602
- * FormatSelect, HiddenInput, Context. */
1603
- const ColorPicker = ColorPicker$1;
1604
- injectComponentStyle("color-picker");
1605
- //#endregion
1606
- //#region src/components/combobox/index.tsx
1607
- /** Ark's Combobox, dressed in the paper-and-ink system: the field carries
1608
- * the control recipe and its matches dissolve open as a paper vessel, the
1609
- * checked row taking the flat ink fill. The API is Ark's own — Root, Label,
1610
- * Control, Input, Trigger, ClearTrigger, Positioner, Content, List, Empty,
1611
- * Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
1612
- const Combobox = Combobox$1;
1613
- injectComponentStyle("combobox");
1614
- //#endregion
1615
- //#region src/components/command/index.tsx
1616
- function Command({ items = [], placeholder, open, autoFilter = true, inputValue, emptyText = "No matching commands", onSelect, onOpenChange, onInputValueChange }) {
1617
- const [internalOpen, setInternalOpen] = useState(false);
1618
- const [listOpen, setListOpen] = useState(true);
1619
- const [fieldText, setFieldText] = useState("");
1620
- const { collection, set, filter } = useListCollection$1({
1621
- initialItems: items.map((entry) => entry.value),
1622
- filter: (value, input) => {
1623
- const entry = items.find((candidate) => candidate.value === value);
1624
- if (!entry) return false;
1625
- const query = input.toLowerCase();
1626
- return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
1627
- }
1628
- });
1629
- useEffect(() => {
1630
- set(items.map((entry) => entry.value));
1631
- if (autoFilter) filter(fieldText);
1632
- }, [items]);
1633
- const currentOpen = open ?? internalOpen;
1634
- useEffect(() => {
1635
- if (currentOpen) setListOpen(true);
1636
- }, [currentOpen]);
1637
- const setOpen = (value) => {
1638
- if (open === void 0) setInternalOpen(value);
1639
- onOpenChange?.(value);
1640
- };
1641
- const available = new Set(collection.items);
1642
- const groups = /* @__PURE__ */ new Map();
1643
- for (const entry of items) {
1644
- if (!available.has(entry.value)) continue;
1645
- const key = entry.group ?? "";
1646
- if (!groups.has(key)) groups.set(key, []);
1647
- groups.get(key).push(entry);
1648
- }
1649
- const row = (entry) => /* @__PURE__ */ jsx(Combobox$1.Item, {
1650
- item: entry.value,
1651
- asChild: true,
1652
- children: /* @__PURE__ */ jsxs("div", {
1653
- "data-scope": "command",
1654
- "data-part": "item",
1655
- children: [/* @__PURE__ */ jsx(Combobox$1.ItemText, {
1656
- asChild: true,
1657
- children: /* @__PURE__ */ jsx("span", {
1658
- "data-scope": "command",
1659
- "data-part": "item-label",
1660
- children: entry.label
1661
- })
1662
- }), entry.hint ? /* @__PURE__ */ jsx("span", {
1663
- "data-scope": "command",
1664
- "data-part": "item-hint",
1665
- children: entry.hint
1666
- }) : void 0]
1667
- })
1668
- }, entry.value);
1669
- return /* @__PURE__ */ jsx(Dialog$1.Root, {
1670
- open: currentOpen,
1671
- onOpenChange: (details) => setOpen(details.open),
1672
- children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {}), /* @__PURE__ */ jsx(Dialog$1.Positioner, {
1673
- asChild: true,
1674
- children: /* @__PURE__ */ jsx("div", {
1675
- "data-scope": "command",
1676
- "data-part": "positioner",
1677
- children: /* @__PURE__ */ jsx(Dialog$1.Content, {
1678
- asChild: true,
1679
- children: /* @__PURE__ */ jsx("div", {
1680
- "data-scope": "command",
1681
- "data-part": "content",
1682
- children: /* @__PURE__ */ jsxs(Combobox$1.Root, {
1683
- collection,
1684
- inputValue,
1685
- open: listOpen,
1686
- onOpenChange: (details) => setListOpen(details.open),
1687
- inputBehavior: "autohighlight",
1688
- loopFocus: true,
1689
- onInputValueChange: (details) => {
1690
- setFieldText(details.inputValue);
1691
- if (autoFilter) filter(details.inputValue);
1692
- onInputValueChange?.(details.inputValue);
1693
- },
1694
- onValueChange: (details) => {
1695
- const [first] = details.value;
1696
- if (first == null) return;
1697
- onSelect?.(first);
1698
- setOpen(false);
1699
- },
1700
- children: [/* @__PURE__ */ jsx(Combobox$1.Input, {
1701
- asChild: true,
1702
- children: /* @__PURE__ */ jsx("input", {
1703
- type: "text",
1704
- placeholder,
1705
- "data-scope": "command",
1706
- "data-part": "input"
1707
- })
1708
- }), /* @__PURE__ */ jsx(Combobox$1.Content, {
1709
- asChild: true,
1710
- children: /* @__PURE__ */ jsxs("div", {
1711
- "data-scope": "command",
1712
- "data-part": "list",
1713
- children: [Array.from(groups, ([group, entries]) => group === "" ? entries.map(row) : /* @__PURE__ */ jsx(Combobox$1.ItemGroup, {
1714
- asChild: true,
1715
- children: /* @__PURE__ */ jsxs("div", {
1716
- "data-scope": "command",
1717
- "data-part": "group",
1718
- children: [/* @__PURE__ */ jsx(Combobox$1.ItemGroupLabel, {
1719
- asChild: true,
1720
- children: /* @__PURE__ */ jsx("div", {
1721
- "data-scope": "command",
1722
- "data-part": "group-label",
1723
- children: group
1724
- })
1725
- }), entries.map(row)]
1726
- })
1727
- }, group)), groups.size === 0 ? /* @__PURE__ */ jsx("div", {
1728
- "data-scope": "command",
1729
- "data-part": "empty",
1730
- children: emptyText
1731
- }) : null]
1732
- })
1733
- })]
1734
- })
1735
- })
1736
- })
1737
- })
1738
- })] })
1739
- });
1740
- }
1741
- injectComponentStyle("command");
1742
- injectComponentStyle("dialog");
1743
- //#endregion
1744
- //#region src/components/comment/index.tsx
1745
- function Comment({ author, datetime, avatar, actions, children, ...rest }) {
1746
- return /* @__PURE__ */ jsxs("article", {
1747
- ...rest,
1748
- "data-scope": "comment",
1749
- "data-part": "root",
1750
- children: [avatar ? /* @__PURE__ */ jsx("div", {
1751
- "data-scope": "comment",
1752
- "data-part": "avatar",
1753
- children: avatar
1754
- }) : null, /* @__PURE__ */ jsxs("div", {
1755
- "data-scope": "comment",
1756
- "data-part": "body",
1757
- children: [
1758
- author || datetime ? /* @__PURE__ */ jsxs("header", {
1759
- "data-scope": "comment",
1760
- "data-part": "header",
1761
- children: [author ? /* @__PURE__ */ jsx("span", {
1762
- "data-scope": "comment",
1763
- "data-part": "author",
1764
- children: author
1765
- }) : null, datetime ? /* @__PURE__ */ jsx("time", {
1766
- "data-scope": "comment",
1767
- "data-part": "datetime",
1768
- dateTime: datetime,
1769
- children: datetime
1770
- }) : null]
1771
- }) : null,
1772
- /* @__PURE__ */ jsx("div", {
1773
- "data-scope": "comment",
1774
- "data-part": "content",
1775
- children
1776
- }),
1777
- actions ? /* @__PURE__ */ jsx("div", {
1778
- "data-scope": "comment",
1779
- "data-part": "actions",
1780
- children: actions
1781
- }) : null
1782
- ]
1783
- })]
1784
- });
1785
- }
1786
- injectComponentStyle("comment");
1787
- //#endregion
1788
- //#region src/components/config-provider/index.tsx
1789
- const ConfigContextImpl = createContext({});
1790
- /** The nearest provider's snapshot, or an empty one when no provider
1791
- * wraps the caller — the hook the date and format families will consume
1792
- * to localize their output. */
1793
- function useConfig() {
1794
- return useContext(ConfigContextImpl);
1795
- }
1796
- /**
1797
- * The declarative host for global configuration: one element that both
1798
- * carries the token layer's attributes — `[data-density]` and
1799
- * `[data-accent]` fire on any element — and provides the same values to
1800
- * descendants through `useConfig`, so interactive behavior (formatting,
1801
- * messages) and visual theming stay one decision.
1802
- */
1803
- function ConfigProvider({ density, accent, dir, locale, children, ...rest }) {
1804
- return /* @__PURE__ */ jsx(ConfigContextImpl.Provider, {
1805
- value: {
1806
- density,
1807
- accent,
1808
- dir,
1809
- locale
1810
- },
1811
- children: /* @__PURE__ */ jsx("div", {
1812
- ...rest,
1813
- "data-scope": "config-provider",
1814
- "data-part": "root",
1815
- ...density != null ? { "data-density": density } : {},
1816
- ...accent != null ? { "data-accent": accent } : {},
1817
- ...dir != null ? { dir } : {},
1818
- ...locale != null ? { lang: locale } : {},
1819
- children
1820
- })
1821
- });
1822
- }
1823
- //#endregion
1824
- //#region src/components/container/index.tsx
1825
- function Container({ size = "readable", padding = true, ...rest }) {
1826
- return /* @__PURE__ */ jsx("div", {
1827
- ...rest,
1828
- "data-scope": "container",
1829
- "data-part": "root",
1830
- "data-size": size,
1831
- "data-padding": padding ? "" : void 0
1832
- });
1833
- }
1834
- injectComponentStyle("container");
1835
- //#endregion
1836
- //#region src/components/date-input/index.tsx
1837
- /** Ark's DateInput, dressed in the paper-and-ink system: a segmented
1838
- * field where the focused segment takes the flat ink fill. The API is
1839
- * Ark's own — Root, Label, Control, SegmentGroup, Segment, SegmentContext,
1840
- * HiddenInput. */
1841
- const DateInput = DateInput$1;
1842
- injectComponentStyle("date-input");
1843
- //#endregion
1844
- //#region src/components/date-picker/index.tsx
1845
- /** Ark's DatePicker, dressed in the paper-and-ink system: the popup
1846
- * dissolves in on elevation, selected days take the flat ink fill, and
1847
- * range middles run subtle with cut corners. The API is Ark's own —
1848
- * Root, Label, Control, Input, Trigger, ClearTrigger, Positioner,
1849
- * Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger,
1850
- * NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger. */
1851
- const DatePicker = DatePicker$1;
1852
- injectComponentStyle("date-picker");
1853
- //#endregion
1854
- //#region src/components/descriptions/index.tsx
1855
- function DescriptionsRoot({ layout = "horizontal", children, ...rest }) {
1856
- return /* @__PURE__ */ jsx("dl", {
1857
- ...rest,
1858
- "data-scope": "descriptions",
1859
- "data-part": "root",
1860
- "data-layout": layout,
1861
- children
1862
- });
1863
- }
1864
- function part$8(name, tag) {
1865
- const Tag = tag;
1866
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
1867
- ...rest,
1868
- "data-scope": "descriptions",
1869
- "data-part": name.toLowerCase(),
1870
- children
1871
- });
1872
- Component.displayName = "Descriptions" + name;
1873
- return Component;
1874
- }
1875
- const Descriptions = {
1876
- Root: DescriptionsRoot,
1877
- Item: part$8("Item", "div"),
1878
- Term: part$8("Term", "dt"),
1879
- Detail: part$8("Detail", "dd")
1880
- };
1881
- injectComponentStyle("descriptions");
1882
- //#endregion
1883
- //#region src/components/dialog/index.tsx
1884
- /** Ark's Dialog, dressed in the paper-and-ink system: the sheet dissolves
1885
- * in on elevation, the backdrop fades, and nested overlays stack through
1886
- * the shared z-index ladder. The API is Ark's own — Root, Trigger,
1887
- * Backdrop, Positioner, Content, Title, Description, CloseTrigger. */
1888
- const Dialog = Dialog$1;
1889
- injectComponentStyle("dialog");
1890
- //#endregion
1891
- //#region src/components/drawer/index.tsx
1892
- /** Ark's Drawer, dressed in the paper-and-ink system: a full-height sheet
1893
- * cut flush to the edge it rises from, sliding on the machine's translate
1894
- * under the grabber's hand. The API is Ark's own — Root, Trigger,
1895
- * Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title,
1896
- * Description, CloseTrigger, SwipeArea. */
1897
- const Drawer = Drawer$1;
1898
- injectComponentStyle("drawer");
1899
- //#endregion
1900
- //#region src/components/dynamic-input/index.tsx
1901
- /**
1902
- * A column of entry rows: one Input per line, each with a quiet remove
1903
- * seal, and an add row at the tail. The list is controlled — every edit
1904
- * reports a fresh array through `onValueChange` and the caller's array
1905
- * stays the only truth. Deleting never drops below `min`, adding never
1906
- * grows past `max`, and the group always keeps one row: an entry list
1907
- * that emptied itself would leave the reader no place to type.
1908
- */
1909
- function DynamicInput({ value, min = 0, max, placeholder, addLabel = "Add entry", disabled = false, invalid = false, onValueChange, children: _children, ...rest }) {
1910
- const values = value ?? [""];
1911
- const update = (index, next) => {
1912
- const rows = values.slice();
1913
- rows[index] = next;
1914
- onValueChange?.(rows);
1915
- };
1916
- const remove = (index) => {
1917
- const rows = values.filter((_, i) => i !== index);
1918
- onValueChange?.(rows.length > 0 ? rows : [""]);
1919
- };
1920
- const add = () => {
1921
- onValueChange?.([...values, ""]);
1922
- };
1923
- const canRemove = values.length > Math.max(min, 1);
1924
- const canAdd = max === void 0 || values.length < max;
1925
- return /* @__PURE__ */ jsxs("div", {
1926
- ...rest,
1927
- "data-scope": "dynamic-input",
1928
- "data-part": "root",
1929
- children: [values.map((value, index) => /* @__PURE__ */ jsxs("div", {
1930
- "data-scope": "dynamic-input",
1931
- "data-part": "row",
1932
- children: [/* @__PURE__ */ jsx(Input, {
1933
- value,
1934
- placeholder,
1935
- disabled,
1936
- invalid,
1937
- onValueChange: (next) => update(index, next)
1938
- }), /* @__PURE__ */ jsx(Button, {
1939
- variant: "ghost",
1940
- square: true,
1941
- disabled: disabled || !canRemove,
1942
- "aria-label": `Remove entry ${index + 1}`,
1943
- onClick: () => remove(index),
1944
- children: crossIcon()
1945
- })]
1946
- }, index)), /* @__PURE__ */ jsx("div", {
1947
- "data-scope": "dynamic-input",
1948
- "data-part": "add",
1949
- children: /* @__PURE__ */ jsxs(Button, {
1950
- variant: "ghost",
1951
- disabled: disabled || !canAdd,
1952
- onClick: () => add(),
1953
- children: ["+", addLabel]
1954
- })
1955
- })]
1956
- });
1957
- }
1958
- /** The one glyph a remove seal needs: a single crossing stroke. */
1959
- function crossIcon() {
1960
- return /* @__PURE__ */ jsx("svg", {
1961
- width: 16,
1962
- height: 16,
1963
- viewBox: "0 0 24 24",
1964
- fill: "none",
1965
- stroke: "currentColor",
1966
- strokeWidth: 1.75,
1967
- strokeLinecap: "round",
1968
- strokeLinejoin: "round",
1969
- "aria-hidden": "true",
1970
- children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
1971
- });
1972
- }
1973
- injectComponentStyle("dynamic-input");
1974
- //#endregion
1975
- //#region src/components/editable/index.tsx
1976
- /** Ark's Editable, dressed in the paper-and-ink system: bare ink while
1977
- * reading, the full field recipe while editing. The API is Ark's own —
1978
- * Root, Area, Label, Preview, Input, EditTrigger, SubmitTrigger,
1979
- * CancelTrigger, Control. */
1980
- const Editable = Editable$1;
1981
- injectComponentStyle("editable");
1982
- //#endregion
1983
- //#region src/components/ellipsis/index.tsx
1984
- function Ellipsis({ lines = 1, ...rest }) {
1985
- const multiline = lines > 1;
1986
- return /* @__PURE__ */ jsx("span", {
1987
- ...rest,
1988
- style: multiline ? {
1989
- ...rest.style,
1990
- "--bs-ellipsis-lines": String(lines)
1991
- } : rest.style,
1992
- "data-scope": "ellipsis",
1993
- "data-part": "root",
1994
- "data-multiline": multiline ? "" : void 0
1995
- });
1996
- }
1997
- injectComponentStyle("ellipsis");
1998
- //#endregion
1999
- //#region src/components/empty/index.tsx
2000
- /** An empty state: the page holds its breath. Root centers the column,
2001
- * Visual carries the mark, Title and Description carry the ink, Actions
2002
- * the way out. Any subset composes. */
2003
- function part$7(name, tag) {
2004
- const Tag = tag;
2005
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
2006
- ...rest,
2007
- "data-scope": "empty",
2008
- "data-part": name.toLowerCase(),
2009
- children
2010
- });
2011
- Component.displayName = "Empty" + name;
2012
- return Component;
2013
- }
2014
- const Root$8 = part$7("Root", "div");
2015
- const Visual = part$7("Visual", "div");
2016
- const Title$1 = part$7("Title", "h3");
2017
- const Description$2 = part$7("Description", "p");
2018
- const Actions$2 = part$7("Actions", "div");
2019
- const Empty = Object.assign(Root$8, {
2020
- Root: Root$8,
2021
- Visual,
2022
- Title: Title$1,
2023
- Description: Description$2,
2024
- Actions: Actions$2
2025
- });
2026
- injectComponentStyle("empty");
2027
- //#endregion
2028
- //#region src/components/fieldset/index.tsx
2029
- /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
2030
- * legend heading a column of fields. The API is Ark's own — Root, Legend,
2031
- * HelperText, ErrorText. */
2032
- const Fieldset = Fieldset$1;
2033
- injectComponentStyle("fieldset");
2034
- //#endregion
2035
- //#region src/components/file-upload/index.tsx
2036
- /** Ark's FileUpload, dressed in the paper-and-ink system: a dashed
2037
- * dropzone that floods with subtle light on drag-over, and accepted files
2038
- * as loose hairline slips. The API is Ark's own — Root, Label, Trigger,
2039
- * Dropzone, HiddenInput, ItemGroup, Item, ItemName, ItemSizeText,
2040
- * ItemPreview, ItemPreviewImage, ItemDeleteTrigger, ClearTrigger,
2041
- * Context. */
2042
- const FileUpload = FileUpload$1;
2043
- injectComponentStyle("file-upload");
2044
- //#endregion
2045
- //#region src/components/float-button/index.tsx
2046
- /** Context for {@link FloatButtonContextValue}, exported so a custom
2047
- * part can read the group's state. */
2048
- const FLOAT_BUTTON_CONTEXT = createContext(null);
2049
- /**
2050
- * A floating action and its fanned-out alternatives — FAB and speed
2051
- * dial in one family. The Root moors the group at a page corner and
2052
- * holds the openness (mirrored from `open` when controlled); the
2053
- * Trigger flips it; each Item is a round action with its name surfacing
2054
- * beside it while the group is open. The buttons are the shared recipe
2055
- * (vessels here: round); this family owns only the mooring, the fan
2056
- * and the fold.
2057
- */
2058
- function Root$7({ open: openProp, placement = "bottom-end", onOpenChange, children, ...rest }) {
2059
- const [inner, setInner] = useState(false);
2060
- const open = openProp !== void 0 ? openProp : inner;
2061
- const setOpen = (value) => {
2062
- setInner(value);
2063
- onOpenChange?.(value);
2064
- };
2065
- return /* @__PURE__ */ jsx(FLOAT_BUTTON_CONTEXT.Provider, {
2066
- value: {
2067
- open,
2068
- toggle: () => setOpen(!open),
2069
- close: () => setOpen(false)
2070
- },
2071
- children: /* @__PURE__ */ jsx("div", {
2072
- ...rest,
2073
- "data-scope": "float-button",
2074
- "data-part": "root",
2075
- "data-placement": placement,
2076
- "data-state": open ? "open" : "closed",
2077
- children
2078
- })
2079
- });
2080
- }
2081
- function Trigger({ label, children }) {
2082
- const context = useContext(FLOAT_BUTTON_CONTEXT);
2083
- return /* @__PURE__ */ jsx(Button, {
2084
- variant: "solid",
2085
- square: true,
2086
- size: "lg",
2087
- onClick: () => context?.toggle(),
2088
- "aria-label": label || "Actions",
2089
- "aria-expanded": context ? context.open : false,
2090
- children
2091
- });
2092
- }
2093
- function Item$2({ label, disabled = false, onClick, children }) {
2094
- const context = useContext(FLOAT_BUTTON_CONTEXT);
2095
- return /* @__PURE__ */ jsxs("div", {
2096
- "data-scope": "float-button",
2097
- "data-part": "item",
2098
- children: [/* @__PURE__ */ jsx(Button, {
2099
- variant: "outline",
2100
- square: true,
2101
- size: "md",
2102
- disabled,
2103
- "aria-label": label,
2104
- onClick: () => {
2105
- onClick?.();
2106
- context?.close();
2107
- },
2108
- children
2109
- }), /* @__PURE__ */ jsx("span", {
2110
- "data-scope": "float-button",
2111
- "data-part": "item-label",
2112
- "aria-hidden": "true",
2113
- children: label
2114
- })]
2115
- });
2116
- }
2117
- const FloatButton = Object.assign(Root$7, {
2118
- Root: Root$7,
2119
- Trigger,
2120
- Item: Item$2
2121
- });
2122
- injectComponentStyle("float-button");
2123
- //#endregion
2124
- //#region src/components/floating-panel/index.tsx
2125
- /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
2126
- * popup vessel let loose — a draggable, resizable sheet whose header is the
2127
- * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
2128
- * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
2129
- * Body. */
2130
- const FloatingPanel = FloatingPanel$1;
2131
- injectComponentStyle("floating-panel");
2132
- //#endregion
2133
- //#region src/components/form/index.tsx
2134
- const FormContext = createContext(null);
2135
- /** Walk a Standard Schema issue's path back to the dotted name the
2136
- * matching FormField declared. */
2137
- function issueName(issue) {
2138
- return (issue.path ?? []).map((segment) => typeof segment === "object" ? segment.key : segment).join(".");
2139
- }
2140
- /**
2141
- * The validation scheduler: one error map, a submit that validates
2142
- * before it fires, live re-validation on the events the `validateOn`
2143
- * prop names, and the imperative handle. The schema is any Standard
2144
- * Schema (valibot, zod, arktype, …) — none are bundled; a `validate`
2145
- * function composes with it for the cases schemas can't express. Errors
2146
- * reach their field by name, through FormField.
2147
- */
2148
- function Form({ state, schema, validate, validateOn = [
2149
- "input",
2150
- "change",
2151
- "blur"
2152
- ], disabled = false, onSubmit, onError, ref, children, ...rest }) {
2153
- const [errors, setErrors] = useState(() => /* @__PURE__ */ new Map());
2154
- const run = useRef(0);
2155
- async function runValidate() {
2156
- const seq = ++run.current;
2157
- const next = /* @__PURE__ */ new Map();
2158
- if (validate) for (const error of await validate(state)) next.set(error.name, error.message);
2159
- if (schema) {
2160
- const result = await schema["~standard"].validate(state);
2161
- for (const issue of result.issues ?? []) {
2162
- const name = issueName(issue);
2163
- if (!next.has(name)) next.set(name, issue.message);
2164
- }
2165
- }
2166
- if (seq === run.current) setErrors(next);
2167
- return next;
2168
- }
2169
- function clear(name) {
2170
- if (!name) {
2171
- setErrors(/* @__PURE__ */ new Map());
2172
- return;
2173
- }
2174
- setErrors((prev) => {
2175
- const next = new Map(prev);
2176
- for (const key of next.keys()) if (typeof name === "string" ? key === name : name.test(key)) next.delete(key);
2177
- return next;
2178
- });
2179
- }
2180
- function setErrorsFrom(list) {
2181
- setErrors(new Map(list.map((error) => [error.name, error.message])));
2182
- }
2183
- function getErrors(name) {
2184
- const all = [...errors].map(([entry, message]) => ({
2185
- name: entry,
2186
- message
2187
- }));
2188
- if (!name) return all;
2189
- return all.filter((error) => typeof name === "string" ? error.name === name : name.test(error.name));
2190
- }
2191
- useImperativeHandle(ref, () => ({
2192
- validate: runValidate,
2193
- clear,
2194
- setErrors: setErrorsFrom,
2195
- getErrors,
2196
- errors
2197
- }));
2198
- function handleSubmit(event) {
2199
- event.preventDefault();
2200
- runValidate().then((map) => {
2201
- if (map.size === 0) {
2202
- onSubmit?.(state);
2203
- return;
2204
- }
2205
- onError?.([...map].map(([name, message]) => ({
2206
- name,
2207
- message
2208
- })));
2209
- });
2210
- }
2211
- const timer = useRef(void 0);
2212
- function onDelegated(kind, event) {
2213
- if (!validateOn.includes(kind)) return;
2214
- const target = event.target;
2215
- if (!target || !("value" in target)) return;
2216
- clearTimeout(timer.current);
2217
- timer.current = setTimeout(() => void runValidate(), kind === "blur" ? 0 : 300);
2218
- }
2219
- return /* @__PURE__ */ jsx(FormContext.Provider, {
2220
- value: {
2221
- errors,
2222
- disabled
2223
- },
2224
- children: /* @__PURE__ */ jsx("form", {
2225
- ...rest,
2226
- "data-scope": "form",
2227
- "data-part": "root",
2228
- noValidate: true,
2229
- onSubmit: handleSubmit,
2230
- onInput: (event) => onDelegated("input", event),
2231
- onChange: (event) => onDelegated("change", event),
2232
- onBlurCapture: (event) => onDelegated("blur", event),
2233
- children
2234
- })
2235
- });
2236
- }
2237
- function FormField({ name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
2238
- const form = useContext(FormContext);
2239
- const formError = name ? form?.errors.get(name) : void 0;
2240
- const isInvalid = invalid || formError != null;
2241
- const isDisabled = disabled || (form?.disabled ?? false);
2242
- return /* @__PURE__ */ jsx("div", {
2243
- ...rest,
2244
- "data-form-field": name,
2245
- children: /* @__PURE__ */ jsxs(Field$1.Root, {
2246
- invalid: isInvalid,
2247
- required,
2248
- disabled: isDisabled,
2249
- children: [
2250
- label ? /* @__PURE__ */ jsx(Field$1.Label, { children: label }) : null,
2251
- children,
2252
- hint && formError == null ? /* @__PURE__ */ jsx(Field$1.HelperText, { children: hint }) : null,
2253
- formError != null ? /* @__PURE__ */ jsx(Field$1.ErrorText, { children: formError }) : null
2254
- ]
2255
- })
2256
- });
2257
- }
2258
- injectComponentStyle("form");
2259
- injectComponentStyle("field");
2260
- //#endregion
2261
- //#region src/components/format/index.tsx
2262
- /** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
2263
- * numbers, currency, bytes and relative time. The components render bare
2264
- * text with no DOM of their own — typography flows from the token layer,
2265
- * so there is no component stylesheet. The API is Ark's own — Number,
2266
- * Byte, Time, RelativeTime. */
2267
- const Format = Format$1;
2268
- //#endregion
2269
- //#region src/components/frame/index.tsx
2270
- /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
2271
- * iframe whose body teleports the children and whose `head` prop
2272
- * carries extra <head> nodes — styles the child renders must travel
2273
- * through that prop. The frame measures its content and grows to
2274
- * fit; the vessel's border and paper belong to the consumer, since
2275
- * an iframe carries no anatomy attributes for the core stylesheet
2276
- * to hook. The API is Ark's own. */
2277
- const Frame = Frame$1;
2278
- //#endregion
2279
- //#region src/components/grid/index.tsx
2280
- /** The same named steps of the space ramp the stack uses — one
2281
- * vocabulary of distance across the layout primitives. */
2282
- const gapVars$2 = {
2283
- none: "0",
2284
- xs: "var(--bs-gap-xs)",
2285
- sm: "var(--bs-gap-sm)",
2286
- md: "var(--bs-gap-md)",
2287
- lg: "var(--bs-gap-lg)",
2288
- xl: "var(--bs-gap-xl)"
2289
- };
2290
- function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
2291
- const style = {
2292
- ...rest.style,
2293
- "--bs-grid-columns": String(columns),
2294
- "--bs-grid-gap": gapVars$2[gap] ?? gapVars$2.md,
2295
- ...minChildWidth != null ? { "--bs-grid-min-child-width": minChildWidth } : {}
2296
- };
2297
- return /* @__PURE__ */ jsx("div", {
2298
- ...rest,
2299
- style,
2300
- "data-scope": "grid",
2301
- "data-part": "root",
2302
- "data-autofill": minChildWidth != null ? "" : void 0
2303
- });
2304
- }
2305
- injectComponentStyle("grid");
2306
- //#endregion
2307
- //#region src/components/highlight/index.tsx
2308
- /** Ark's Highlight, dressed in the paper-and-ink system: query hits are
2309
- * strokes of pigment on the page — a quiet tint of the accent behind the
2310
- * ink, never neon. The component renders bare <mark> elements, so the
2311
- * document-wide mark default carries the look. The API is Ark's own. */
2312
- const Highlight = Highlight$1;
2313
- injectComponentStyle("highlight");
2314
- //#endregion
2315
- //#region src/components/hover-card/index.tsx
2316
- /** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
2317
- * that dissolves in over a quiet inline link, never stealing focus. The
2318
- * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
2319
- const HoverCard = HoverCard$1;
2320
- injectComponentStyle("hover-card");
2321
- //#endregion
2322
- //#region src/components/icon/index.tsx
2323
- function Icon({ size = "inherit", label, children, ...rest }) {
2324
- return /* @__PURE__ */ jsx("span", {
2325
- ...rest,
2326
- role: label != null ? "img" : void 0,
2327
- "aria-label": label,
2328
- "aria-hidden": label != null ? void 0 : "true",
2329
- "data-scope": "icon",
2330
- "data-part": "root",
2331
- "data-size": size,
2332
- children
2333
- });
2334
- }
2335
- injectComponentStyle("icon");
2336
- //#endregion
2337
- //#region src/components/image/index.tsx
2338
- /** The mark for a source that never arrived: a quiet mountain-and-sun,
2339
- * drawn in the stylesheet's stroke and hidden from the reader. */
2340
- function placeholderGlyph() {
2341
- return /* @__PURE__ */ jsxs("svg", {
2342
- viewBox: "0 0 24 24",
2343
- fill: "none",
2344
- stroke: "currentColor",
2345
- "aria-hidden": "true",
2346
- children: [
2347
- /* @__PURE__ */ jsx("rect", {
2348
- x: 3,
2349
- y: 4,
2350
- width: 18,
2351
- height: 16,
2352
- rx: 1.5
2353
- }),
2354
- /* @__PURE__ */ jsx("circle", {
2355
- cx: 9,
2356
- cy: 10,
2357
- r: 1.5
2358
- }),
2359
- /* @__PURE__ */ jsx("path", { d: "m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5" })
2360
- ]
2361
- });
2362
- }
2363
- function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
2364
- const [state, setState] = useState("loading");
2365
- useEffect(() => setState("loading"), [src]);
2366
- return /* @__PURE__ */ jsxs("figure", {
2367
- ...rest,
2368
- "data-scope": "image",
2369
- "data-part": "root",
2370
- "data-state": state,
2371
- "data-fit": fit,
2372
- children: [/* @__PURE__ */ jsx("img", {
2373
- "data-scope": "image",
2374
- "data-part": "img",
2375
- src,
2376
- alt,
2377
- loading,
2378
- decoding: "async",
2379
- onLoad: () => setState("loaded"),
2380
- onError: () => setState("error")
2381
- }), state === "error" ? /* @__PURE__ */ jsx("div", {
2382
- "data-scope": "image",
2383
- "data-part": "fallback",
2384
- children: fallback ?? placeholderGlyph()
2385
- }) : null]
2386
- });
2387
- }
2388
- injectComponentStyle("image");
2389
- //#endregion
2390
- //#region src/components/image-cropper/index.tsx
2391
- /** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
2392
- * holding the photograph, one lit selection window framed by light hairlines.
2393
- * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
2394
- * Context. */
2395
- const ImageCropper = ImageCropper$1;
2396
- injectComponentStyle("image-cropper");
2397
- //#endregion
2398
- //#region src/components/image-viewer/index.tsx
2399
- const MIN_SCALE = .5;
2400
- const MAX_SCALE = 3;
2401
- const SCALE_STEP = .25;
2402
- /** The toolbar's line-drawn glyphs, fresh per render. */
2403
- const TOOL_GLYPHS = {
2404
- zoomIn: () => /* @__PURE__ */ jsxs(Fragment, { children: [
2405
- /* @__PURE__ */ jsx("circle", {
2406
- cx: 11,
2407
- cy: 11,
2408
- r: 7
2409
- }),
2410
- /* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
2411
- /* @__PURE__ */ jsx("path", { d: "M8 11h6" }),
2412
- /* @__PURE__ */ jsx("path", { d: "M11 8v6" })
2413
- ] }),
2414
- zoomOut: () => /* @__PURE__ */ jsxs(Fragment, { children: [
2415
- /* @__PURE__ */ jsx("circle", {
2416
- cx: 11,
2417
- cy: 11,
2418
- r: 7
2419
- }),
2420
- /* @__PURE__ */ jsx("path", { d: "m16.2 16.2 4.8 4.8" }),
2421
- /* @__PURE__ */ jsx("path", { d: "M8 11h6" })
2422
- ] }),
2423
- rotate: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M20.49 12A8.5 8.5 0 1 1 18 6.06" }), /* @__PURE__ */ jsx("path", { d: "M20.5 3.5v4h-4" })] }),
2424
- close: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" }), /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" })] })
2425
- };
2426
- function ImageViewer({ src, alt = "", open, zoomable = true, onOpenChange }) {
2427
- const [localOpen, setLocalOpen] = useState(false);
2428
- const [scale, setScale] = useState(1);
2429
- const [rotation, setRotation] = useState(0);
2430
- const isOpen = open ?? localOpen;
2431
- const setOpen = (value) => {
2432
- if (open === void 0) setLocalOpen(value);
2433
- onOpenChange?.(value);
2434
- };
2435
- useEffect(() => {
2436
- if (isOpen) {
2437
- setScale(1);
2438
- setRotation(0);
2439
- }
2440
- }, [isOpen]);
2441
- function zoom(step) {
2442
- setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
2443
- }
2444
- function rotate() {
2445
- setRotation((current) => (current + 90) % 360);
2446
- }
2447
- function toolButton(label, glyph, onClick) {
2448
- return /* @__PURE__ */ jsx(Button, {
2449
- variant: "ghost",
2450
- square: true,
2451
- size: "lg",
2452
- "aria-label": label,
2453
- onClick,
2454
- children: /* @__PURE__ */ jsx("svg", {
2455
- viewBox: "0 0 24 24",
2456
- fill: "none",
2457
- stroke: "currentColor",
2458
- strokeWidth: 1.5,
2459
- strokeLinecap: "round",
2460
- strokeLinejoin: "round",
2461
- "aria-hidden": "true",
2462
- children: glyph()
2463
- })
2464
- });
2465
- }
2466
- return /* @__PURE__ */ jsx(Dialog$1.Root, {
2467
- open: isOpen,
2468
- onOpenChange: (details) => setOpen(details.open),
2469
- lazyMount: true,
2470
- unmountOnExit: true,
2471
- children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog$1.Positioner, {
2472
- className: "bs-image-viewer-positioner",
2473
- children: /* @__PURE__ */ jsxs(Dialog$1.Content, {
2474
- className: "bs-image-viewer-content",
2475
- "aria-label": alt || "Image preview",
2476
- onClick: (event) => {
2477
- if (event.target === event.currentTarget) setOpen(false);
2478
- },
2479
- children: [/* @__PURE__ */ jsx("img", {
2480
- "data-scope": "image-viewer",
2481
- "data-part": "viewport",
2482
- src,
2483
- alt,
2484
- style: { transform: `scale(${scale}) rotate(${rotation}deg)` }
2485
- }), /* @__PURE__ */ jsx("div", {
2486
- "data-scope": "image-viewer",
2487
- "data-part": "toolbar",
2488
- children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
2489
- zoomable ? [toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP)), toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25))] : null,
2490
- toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate),
2491
- toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false))
2492
- ] })
2493
- })]
2494
- })
2495
- })] })
2496
- });
2497
- }
2498
- injectComponentStyle("image-viewer");
2499
- //#endregion
2500
- //#region src/components/input-group/index.tsx
2501
- function part$6(name) {
2502
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
2503
- ...rest,
2504
- "data-scope": "input-group",
2505
- "data-part": name.toLowerCase(),
2506
- children
2507
- });
2508
- Component.displayName = "InputGroup" + name;
2509
- return Component;
2510
- }
2511
- /**
2512
- * Merged controls: attachments and the entry fused into one seal. The
2513
- * Root draws the single hairline and carries the group's focus halo;
2514
- * the Addon is a recessed cell for the reader's fixed words — a scheme,
2515
- * a unit, a quiet button — placed before or after the entry. Put our
2516
- * Input (or Textarea) inside and its own border and halo step aside in
2517
- * favor of the group's; the stylesheet does the merging, the wrapper
2518
- * adds no visuals of its own.
2519
- */
2520
- const Root$6 = part$6("Root");
2521
- const Addon = part$6("Addon");
2522
- const InputGroup = Object.assign(Root$6, {
2523
- Root: Root$6,
2524
- Addon
2525
- });
2526
- injectComponentStyle("input-group");
2527
- //#endregion
2528
- //#region src/components/json-tree-view/index.tsx
2529
- /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
2530
- * recipes re-scoped, with value nodes reading as tabular data. The API is
2531
- * Ark's own — Root, Tree, plus createJsonTreeCollection. */
2532
- const JsonTreeView = JsonTreeView$1;
2533
- injectComponentStyle("json-tree-view");
2534
- //#endregion
2535
- //#region src/components/kbd/index.tsx
2536
- function Kbd({ children, ...rest }) {
2537
- return /* @__PURE__ */ jsx("kbd", {
2538
- ...rest,
2539
- "data-scope": "kbd",
2540
- "data-part": "root",
2541
- children
2542
- });
2543
- }
2544
- injectComponentStyle("kbd");
2545
- //#endregion
2546
- //#region src/components/layout/index.tsx
2547
- const LAYOUT_CONTEXT = createContext(null);
2548
- /**
2549
- * The application skeleton: Root, Header, Sider, Content, Footer —
2550
- * the admin arrangement dressed in the paper-and-ink surfaces. The
2551
- * root is a full-height grid; a declared `sider` turns the columns
2552
- * around to meet whichever edge the rail stands on.
2553
- */
2554
- function Root$5({ sider, children, ...rest }) {
2555
- return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
2556
- value: { siderPlacement: () => sider },
2557
- children: /* @__PURE__ */ jsx("div", {
2558
- ...rest,
2559
- "data-scope": "layout",
2560
- "data-part": "root",
2561
- "data-sider": sider,
2562
- children
2563
- })
2564
- });
2565
- }
2566
- /** A semantic block of the skeleton — header, footer, and the flow's
2567
- * main content each land on their native element and their grid area. */
2568
- function region(name, tag) {
2569
- const Tag = tag;
2570
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
2571
- ...rest,
2572
- "data-scope": "layout",
2573
- "data-part": name.toLowerCase(),
2574
- children
2575
- });
2576
- Component.displayName = "Layout" + name;
2577
- return Component;
2578
- }
2579
- const Header = region("Header", "header");
2580
- const Content$2 = region("Content", "main");
2581
- const Footer = region("Footer", "footer");
2582
- /** One step of the arrow-key resize, in px. */
2583
- const RESIZE_STEP = 16;
2584
- function Sider({ collapsed = false, width: widthProp, collapsedWidth = "3.5rem", resizable = false, minWidth = "12rem", maxWidth = "24rem", style, onCollapsedChange, onWidthChange, children, ...rest }) {
2585
- const layout = useContext(LAYOUT_CONTEXT);
2586
- const rail = useRef(null);
2587
- const [dragging, setDragging] = useState(false);
2588
- const [innerWidth, setInnerWidth] = useState(widthProp ?? "16rem");
2589
- const width = widthProp !== void 0 ? widthProp : innerWidth;
2590
- const prevCollapsed = useRef(collapsed);
2591
- useEffect(() => {
2592
- if (prevCollapsed.current === collapsed) return;
2593
- prevCollapsed.current = collapsed;
2594
- onCollapsedChange?.(collapsed);
2595
- }, [collapsed, onCollapsedChange]);
2596
- const innerWidthRef = useRef(innerWidth);
2597
- innerWidthRef.current = innerWidth;
2598
- useEffect(() => {
2599
- if (widthProp === void 0 || widthProp === innerWidthRef.current) return;
2600
- setInnerWidth(widthProp);
2601
- onWidthChange?.(widthProp);
2602
- }, [widthProp, onWidthChange]);
2603
- const applyWidth = (next) => {
2604
- setInnerWidth(next);
2605
- onWidthChange?.(next);
2606
- };
2607
- const dragStart = useRef({
2608
- x: 0,
2609
- width: 0
2610
- });
2611
- const onPointerDown = (event) => {
2612
- setDragging(true);
2613
- dragStart.current = {
2614
- x: event.clientX,
2615
- width: rail.current ? rail.current.getBoundingClientRect().width : 0
2616
- };
2617
- event.currentTarget.setPointerCapture(event.pointerId);
2618
- };
2619
- const onPointerMove = (event) => {
2620
- if (!dragging) return;
2621
- const towardFlow = (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1;
2622
- applyWidth(`${Math.round(dragStart.current.width + towardFlow * (event.clientX - dragStart.current.x))}px`);
2623
- };
2624
- const onPointerUp = (event) => {
2625
- setDragging(false);
2626
- event.currentTarget.releasePointerCapture(event.pointerId);
2627
- };
2628
- const onKeyDown = (event) => {
2629
- if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
2630
- event.preventDefault();
2631
- const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
2632
- const current = rail.current ? rail.current.getBoundingClientRect().width : 0;
2633
- applyWidth(`${Math.round(current + (widen ? RESIZE_STEP : -16))}px`);
2634
- };
2635
- const handle = resizable && !collapsed ? /* @__PURE__ */ jsx("div", {
2636
- "data-scope": "layout",
2637
- "data-part": "sider-resize",
2638
- "data-dragging": dragging ? "" : void 0,
2639
- role: "separator",
2640
- "aria-orientation": "vertical",
2641
- tabIndex: 0,
2642
- "aria-label": "Resize sidebar",
2643
- "aria-valuenow": Math.round(rail.current ? rail.current.getBoundingClientRect().width : 0),
2644
- onPointerDown,
2645
- onPointerMove,
2646
- onPointerUp,
2647
- onKeyDown
2648
- }) : null;
2649
- return /* @__PURE__ */ jsxs("aside", {
2650
- ...rest,
2651
- ref: rail,
2652
- style: {
2653
- ...style,
2654
- "--bs-layout-sider-width": collapsed ? collapsedWidth : width,
2655
- "--bs-layout-sider-min": collapsed ? collapsedWidth : minWidth,
2656
- "--bs-layout-sider-max": collapsed ? collapsedWidth : maxWidth
2657
- },
2658
- "data-scope": "layout",
2659
- "data-part": "sider",
2660
- "data-collapsed": collapsed ? "" : void 0,
2661
- "data-dragging": dragging ? "" : void 0,
2662
- "data-resizable": resizable ? "" : void 0,
2663
- children: [typeof children === "function" ? children({ collapsed }) : children, handle]
2664
- });
2665
- }
2666
- const Layout = Object.assign(Root$5, {
2667
- Root: Root$5,
2668
- Header,
2669
- Sider,
2670
- Content: Content$2,
2671
- Footer
2672
- });
2673
- injectComponentStyle("layout");
2674
- //#endregion
2675
- //#region src/components/link/index.tsx
2676
- /** A link is ink in the accent's voice: quiet at rest, deepening under
2677
- * the hand, the halo at focus. The underline follows the prose —
2678
- * always, on hover, or never. */
2679
- function Link({ underline = "hover", children, ...rest }) {
2680
- return /* @__PURE__ */ jsx("a", {
2681
- ...rest,
2682
- "data-scope": "link",
2683
- "data-part": "root",
2684
- "data-underline": underline,
2685
- children
2686
- });
2687
- }
2688
- injectComponentStyle("link");
2689
- //#endregion
2690
- //#region src/components/list/index.tsx
2691
- /** A ledger of rows: Root is the list, Item one row, Leading the mark
2692
- * before the words, Content the title and its quiet echo, Actions the
2693
- * way out. The bordered variant draws the hairlines; the hoverable
2694
- * variant gives every row the wash — and any row the caller makes
2695
- * clickable (role="button") answers the pointer on its own. */
2696
- function part$5(name, tag) {
2697
- const Tag = tag;
2698
- function Component({ children, ...rest }) {
2699
- return /* @__PURE__ */ jsx(Tag, {
2700
- ...rest,
2701
- "data-scope": "list",
2702
- "data-part": name.toLowerCase(),
2703
- children
2704
- });
2705
- }
2706
- Component.displayName = "List" + name;
2707
- return Component;
2708
- }
2709
- function Root$4({ bordered = false, hoverable = false, children, ...rest }) {
2710
- return /* @__PURE__ */ jsx("ul", {
2711
- ...rest,
2712
- "data-scope": "list",
2713
- "data-part": "root",
2714
- "data-bordered": bordered || void 0,
2715
- "data-hoverable": hoverable || void 0,
2716
- children
2717
- });
2718
- }
2719
- Root$4.displayName = "ListRoot";
2720
- const Item$1 = part$5("Item", "li");
2721
- const Leading = part$5("Leading", "div");
2722
- const Actions$1 = part$5("Actions", "div");
2723
- function Content$1({ title, description, children, ...rest }) {
2724
- return /* @__PURE__ */ jsxs("div", {
2725
- ...rest,
2726
- "data-scope": "list",
2727
- "data-part": "content",
2728
- children: [
2729
- title ? /* @__PURE__ */ jsx("div", {
2730
- "data-scope": "list",
2731
- "data-part": "title",
2732
- children: title
2733
- }) : null,
2734
- description ? /* @__PURE__ */ jsx("div", {
2735
- "data-scope": "list",
2736
- "data-part": "description",
2737
- children: description
2738
- }) : null,
2739
- children
2740
- ]
2741
- });
2742
- }
2743
- Content$1.displayName = "ListContent";
2744
- const List = Object.assign(Root$4, {
2745
- Root: Root$4,
2746
- Item: Item$1,
2747
- Leading,
2748
- Content: Content$1,
2749
- Actions: Actions$1
2750
- });
2751
- injectComponentStyle("list");
2752
- //#endregion
2753
- //#region src/components/listbox/index.tsx
2754
- /** Ark's Listbox, dressed in the paper-and-ink system: quiet rows of ink
2755
- * where the checked row alone takes the flat primary fill. The API is
2756
- * Ark's own — Root, Label, Input, Content, Empty, Item, ItemText,
2757
- * ItemIndicator, ItemGroup, ItemGroupLabel, ValueText, plus
2758
- * createListCollection. */
2759
- const Listbox = Listbox$1;
2760
- injectComponentStyle("listbox");
2761
- //#endregion
2762
- //#region src/components/marquee/index.tsx
2763
- /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
2764
- * seal-cut chips that dissolves into the paper at its edges rather than
2765
- * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
2766
- const Marquee = Marquee$1;
2767
- injectComponentStyle("marquee");
2768
- //#endregion
2769
- //#region src/components/masonry/index.tsx
2770
- /** The same named steps of the space ramp the stack uses — one
2771
- * vocabulary of distance across the layout primitives. */
2772
- const gapVars$1 = {
2773
- none: "0",
2774
- xs: "var(--bs-gap-xs)",
2775
- sm: "var(--bs-gap-sm)",
2776
- md: "var(--bs-gap-md)",
2777
- lg: "var(--bs-gap-lg)",
2778
- xl: "var(--bs-gap-xl)"
2779
- };
2780
- function Masonry({ columns = 3, gap = "md", ...rest }) {
2781
- const style = {
2782
- ...rest.style,
2783
- "--bs-masonry-columns": String(columns),
2784
- "--bs-masonry-gap": gapVars$1[gap] ?? gapVars$1.md
2785
- };
2786
- return /* @__PURE__ */ jsx("div", {
2787
- ...rest,
2788
- style,
2789
- "data-scope": "masonry",
2790
- "data-part": "root"
2791
- });
2792
- }
2793
- injectComponentStyle("masonry");
2794
- //#endregion
2795
- //#region src/components/menu/index.tsx
2796
- /** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
2797
- * elevation, hover as light on the row, checked items as the flat ink fill.
2798
- * The API is Ark's own — Root, Trigger, ContextTrigger, Indicator, Positioner,
2799
- * Content, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel,
2800
- * TriggerItem, Separator, Arrow, ArrowTip. */
2801
- const Menu = Menu$1;
2802
- injectComponentStyle("menu");
2803
- //#endregion
2804
- //#region src/components/menubar/index.tsx
2805
- function Menubar({ items, onSelect, children, ...rest }) {
2806
- return /* @__PURE__ */ jsxs("div", {
2807
- ...rest,
2808
- "data-scope": "menubar",
2809
- "data-part": "root",
2810
- role: "menubar",
2811
- children: [items.map((group) => /* @__PURE__ */ jsxs(Menu$1.Root, {
2812
- positioning: { placement: "bottom-start" },
2813
- children: [/* @__PURE__ */ jsx(Menu$1.Trigger, {
2814
- asChild: true,
2815
- children: /* @__PURE__ */ jsx("button", {
2816
- type: "button",
2817
- "data-scope": "menubar",
2818
- "data-part": "trigger",
2819
- children: group.label
2820
- })
2821
- }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { children: group.items.map((entry) => /* @__PURE__ */ jsx(Menu$1.Item, {
2822
- value: entry.value,
2823
- disabled: entry.disabled,
2824
- "data-danger": entry.danger ? "" : void 0,
2825
- onSelect: () => onSelect?.(entry.value),
2826
- children: /* @__PURE__ */ jsx(Menu$1.ItemText, { children: entry.label })
2827
- }, entry.value)) }) }) })]
2828
- }, group.label)), children]
2829
- });
2830
- }
2831
- injectComponentStyle("menubar");
2832
- injectComponentStyle("menu");
2833
- //#endregion
2834
- //#region src/components/meter/index.tsx
2835
- function part$4(name, tag) {
2836
- const Tag = tag;
2837
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
2838
- ...rest,
2839
- "data-scope": "meter",
2840
- "data-part": name.toLowerCase(),
2841
- children
2842
- });
2843
- Component.displayName = "Meter" + name;
2844
- return Component;
2845
- }
2846
- const Label$2 = part$4("Label", "span");
2847
- const ValueText = part$4("ValueText", "span");
2848
- const Track = ({ ...rest }) => /* @__PURE__ */ jsx("span", {
2849
- ...rest,
2850
- "data-scope": "meter",
2851
- "data-part": "track",
2852
- children: /* @__PURE__ */ jsx("span", {
2853
- "data-scope": "meter",
2854
- "data-part": "range"
2855
- })
2856
- });
2857
- const Root$3 = ({ value, min = 0, max = 100, level = "normal", label, children, ...rest }) => {
2858
- const span = max - min;
2859
- const ratio = span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;
2860
- return /* @__PURE__ */ jsx("div", {
2861
- ...rest,
2862
- role: "meter",
2863
- "aria-valuemin": min,
2864
- "aria-valuemax": max,
2865
- "aria-valuenow": value,
2866
- "aria-label": label ?? rest["aria-label"],
2867
- "data-scope": "meter",
2868
- "data-part": "root",
2869
- "data-level": level !== "normal" ? level : void 0,
2870
- style: {
2871
- ...rest.style,
2872
- "--_percent": `${ratio * 100}%`
2873
- },
2874
- children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
2875
- /* @__PURE__ */ jsx(Label$2, { children: label }),
2876
- /* @__PURE__ */ jsx(ValueText, { children: `${Math.round(ratio * 100)}%` }),
2877
- /* @__PURE__ */ jsx(Track, {})
2878
- ] })
2879
- });
2880
- };
2881
- const Meter = Object.assign(Root$3, {
2882
- Root: Root$3,
2883
- Label: Label$2,
2884
- ValueText,
2885
- Track
2886
- });
2887
- injectComponentStyle("meter");
2888
- //#endregion
2889
- //#region src/components/navigation-menu/index.tsx
2890
- /** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
2891
- * ghost triggers with one sliding stroke of primary ink, opening the shared
2892
- * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
2893
- * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
2894
- const NavigationMenu = NavigationMenu$1;
2895
- injectComponentStyle("navigation-menu");
2896
- //#endregion
2897
- //#region src/components/number-input/index.tsx
2898
- /** Ark's NumberInput, dressed in the paper-and-ink system: the stepper
2899
- * rides inside the field as one seal split by a hairline, numbers set in
2900
- * tabular figures. The API is Ark's own — Root, Label, Control, Input,
2901
- * ValueText, IncrementTrigger, DecrementTrigger, Scrubber. */
2902
- const NumberInput = NumberInput$1;
2903
- injectComponentStyle("number-input");
2904
- //#endregion
2905
- //#region src/components/pagination/index.tsx
2906
- /**
2907
- * Pagination — paged navigation.
2908
- *
2909
- * Parts: Root, Item (page seals), Ellipsis, PrevTrigger, NextTrigger,
2910
- * FirstTrigger, LastTrigger. Items carry data-selected.
2911
- */
2912
- const Pagination = Pagination$1;
2913
- injectComponentStyle("pagination");
2914
- //#endregion
2915
- //#region src/components/password-input/index.tsx
2916
- /** Ark's PasswordInput, dressed in the paper-and-ink system: the reveal
2917
- * eye sits quiet at the field's edge and swaps in place — no shift, no
2918
- * noise. The API is Ark's own — Root, Label, Control, Input, Indicator,
2919
- * VisibilityTrigger. */
2920
- const PasswordInput = PasswordInput$1;
2921
- injectComponentStyle("password-input");
2922
- //#endregion
2923
- //#region src/components/pin-input/index.tsx
2924
- /** Ark's PinInput, dressed in the paper-and-ink system: one character per
2925
- * square-cut seal, centered ink in tabular figures. The API is Ark's own —
2926
- * Root, Label, Control, Input, HiddenInput. */
2927
- const PinInput = PinInput$1;
2928
- injectComponentStyle("pin-input");
2929
- //#endregion
2930
- //#region src/components/popconfirm/index.tsx
2931
- function Popconfirm({ message, confirmText = "Confirm", cancelText = "Cancel", children, onConfirm, onCancel }) {
2932
- const [open, setOpen] = useState(false);
2933
- function settle(confirmed) {
2934
- setOpen(false);
2935
- (confirmed ? onConfirm : onCancel)?.();
2936
- }
2937
- return /* @__PURE__ */ jsxs(Popover$1.Root, {
2938
- open,
2939
- onOpenChange: (details) => setOpen(details.open),
2940
- positioning: { placement: "top" },
2941
- children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
2942
- asChild: true,
2943
- children
2944
- }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
2945
- className: "bs-popconfirm",
2946
- children: [/* @__PURE__ */ jsx("p", {
2947
- "data-part": "message",
2948
- children: message
2949
- }), /* @__PURE__ */ jsxs("div", {
2950
- "data-part": "actions",
2951
- children: [/* @__PURE__ */ jsx(Button, {
2952
- variant: "ghost",
2953
- size: "sm",
2954
- onClick: () => settle(false),
2955
- children: cancelText
2956
- }), /* @__PURE__ */ jsx(Button, {
2957
- size: "sm",
2958
- onClick: () => settle(true),
2959
- children: confirmText
2960
- })]
2961
- })]
2962
- }) }) })]
2963
- });
2964
- }
2965
- injectComponentStyle("popconfirm");
2966
- //#endregion
2967
- //#region src/components/popover/index.tsx
2968
- /** Ark's Popover, dressed in the paper-and-ink system: a paper vessel that
2969
- * dissolves in on elevation, anchored to its trigger by a whisker arrow. The
2970
- * API is Ark's own — Root, Trigger, Anchor, Indicator, Positioner, Content,
2971
- * Title, Description, CloseTrigger, Arrow, ArrowTip. */
2972
- const Popover = Popover$1;
2973
- injectComponentStyle("popover");
2974
- //#endregion
2975
- //#region src/components/progress/index.tsx
2976
- /** Ark's Progress, dressed in the paper-and-ink system: a quiet hairline
2977
- * groove that the primary ink fills at the machine's pace. The API is
2978
- * Ark's own — Root, Label, ValueText, Track, Range, View, Circle,
2979
- * CircleTrack, CircleRange. */
2980
- const Progress = Progress$1;
2981
- injectComponentStyle("progress");
2982
- //#endregion
2983
- //#region src/components/progress-group/index.tsx
2984
- function ProgressGroup({ segments, max, showLegend = true, ...rest }) {
2985
- const total = max ?? segments.reduce((sum, segment) => sum + segment.value, 0);
2986
- const share = (value) => total > 0 ? `${value / total * 100}%` : "0%";
2987
- const nameOf = (segment, index) => segment.label ?? segment.pigment ?? `Segment ${index + 1}`;
2988
- return /* @__PURE__ */ jsxs("div", {
2989
- ...rest,
2990
- "data-scope": "progress-group",
2991
- "data-part": "root",
2992
- children: [/* @__PURE__ */ jsx("div", {
2993
- "data-scope": "progress-group",
2994
- "data-part": "track",
2995
- children: segments.map((segment, index) => /* @__PURE__ */ jsx("div", {
2996
- "data-scope": "progress-group",
2997
- "data-part": "segment",
2998
- "data-pigment": segment.pigment,
2999
- role: "progressbar",
3000
- "aria-valuenow": segment.value,
3001
- "aria-valuemin": 0,
3002
- "aria-valuemax": total,
3003
- "aria-label": nameOf(segment, index),
3004
- style: { inlineSize: share(segment.value) }
3005
- }, index))
3006
- }), showLegend ? /* @__PURE__ */ jsx("div", {
3007
- "data-scope": "progress-group",
3008
- "data-part": "legend",
3009
- children: segments.map((segment, index) => /* @__PURE__ */ jsxs("div", {
3010
- "data-scope": "progress-group",
3011
- "data-part": "legend-item",
3012
- "data-pigment": segment.pigment,
3013
- children: [
3014
- /* @__PURE__ */ jsx("span", {
3015
- "data-scope": "progress-group",
3016
- "data-part": "swatch",
3017
- "aria-hidden": "true"
3018
- }),
3019
- /* @__PURE__ */ jsx("span", {
3020
- "data-scope": "progress-group",
3021
- "data-part": "legend-label",
3022
- children: nameOf(segment, index)
3023
- }),
3024
- /* @__PURE__ */ jsx("span", {
3025
- "data-scope": "progress-group",
3026
- "data-part": "legend-value",
3027
- children: String(segment.value)
3028
- })
3029
- ]
3030
- }, index))
3031
- }) : null]
3032
- });
3033
- }
3034
- injectComponentStyle("progress-group");
3035
- //#endregion
3036
- //#region src/components/qr-code/index.tsx
3037
- /** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
3038
- * ink on the page, with an optional paper badge and a seal-cut download
3039
- * control. The API is Ark's own — Root, Frame, Pattern, Overlay,
3040
- * DownloadTrigger. */
3041
- const QrCode = QrCode$1;
3042
- injectComponentStyle("qr-code");
3043
- //#endregion
3044
- //#region src/components/radio-group/index.tsx
3045
- /** Ark's RadioGroup, dressed in the paper-and-ink system: a column of
3046
- * full-circle seals that fill flat with primary ink when chosen, the dot
3047
- * punched through as paper. The API is Ark's own — Root, Label, Item,
3048
- * ItemText, ItemControl, Indicator, ItemHiddenInput. */
3049
- const RadioGroup = RadioGroup$1;
3050
- injectComponentStyle("radio-group");
3051
- //#endregion
3052
- //#region src/components/rating-group/index.tsx
3053
- /** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
3054
- * seals whose glyphs take the primary pigment as they light up. The API is
3055
- * Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
3056
- * ItemContext render helpers). */
3057
- const RatingGroup = RatingGroup$1;
3058
- injectComponentStyle("rating-group");
3059
- //#endregion
3060
- //#region src/components/scroll-area/index.tsx
3061
- /** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
3062
- * give way to quiet ink lanes that surface on hover and scroll. The API
3063
- * is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
3064
- const ScrollArea = ScrollArea$1;
3065
- injectComponentStyle("scroll-area");
3066
- //#endregion
3067
- //#region src/components/segment-group/index.tsx
3068
- /** Ark's SegmentGroup, dressed in the paper-and-ink system: a hairline tray
3069
- * where one flat ink plate travels beneath the checked seal. The API is
3070
- * Ark's own — Root, Label, Indicator, Item, ItemText, ItemControl,
3071
- * ItemHiddenInput. */
3072
- const SegmentGroup = SegmentGroup$1;
3073
- injectComponentStyle("segment-group");
3074
- //#endregion
3075
- //#region src/components/select/index.tsx
3076
- /** Ark's Select, dressed in the paper-and-ink system: the trigger is the
3077
- * whole control and its list dissolves open as a paper vessel, the checked
3078
- * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
3079
- * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
3080
- * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
3081
- const Select = Select$1;
3082
- injectComponentStyle("select");
3083
- //#endregion
3084
- //#region src/components/separator/index.tsx
3085
- function Separator({ orientation = "horizontal", decorative = false, ...rest }) {
3086
- return /* @__PURE__ */ jsx("div", {
3087
- ...rest,
3088
- role: decorative ? "none" : "separator",
3089
- "data-scope": "separator",
3090
- "data-part": "root",
3091
- "data-orientation": orientation,
3092
- "aria-orientation": decorative ? void 0 : orientation
3093
- });
3094
- }
3095
- injectComponentStyle("separator");
3096
- //#endregion
3097
- //#region src/components/signature-pad/index.tsx
3098
- /** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
3099
- * field with a guide hairline where ink — real ink strokes — is laid down.
3100
- * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
3101
- * ClearTrigger, HiddenInput, Context. */
3102
- const SignaturePad = SignaturePad$1;
3103
- injectComponentStyle("signature-pad");
3104
- //#endregion
3105
- //#region src/components/skeleton/index.tsx
3106
- function Skeleton({ ...rest }) {
3107
- return /* @__PURE__ */ jsx("div", {
3108
- ...rest,
3109
- "data-scope": "skeleton",
3110
- "data-part": "root"
3111
- });
3112
- }
3113
- injectComponentStyle("skeleton");
3114
- //#endregion
3115
- //#region src/components/slider/index.tsx
3116
- /** Ark's Slider, dressed in the paper-and-ink system: a recessed track the
3117
- * primary ink runs along, a paper-seal thumb, and hairline tick markers.
3118
- * The API is Ark's own — Root, Label, ValueText, Control, Track, Range,
3119
- * Thumb, MarkerGroup, Marker, DraggingIndicator, HiddenInput. */
3120
- const Slider = Slider$1;
3121
- injectComponentStyle("slider");
3122
- //#endregion
3123
- //#region src/components/split-button/index.tsx
3124
- /**
3125
- * A primary action with its alternatives one seam away: the main button
3126
- * fires `onClick`, the fitted arrow opens a paper vessel of the same
3127
- * register whose entries report `onSelect` with their value. The arrow
3128
- * is the menu machine's trigger grafting the button recipe — the
3129
- * machine keeps the element (positioning, focus, `data-state`), the
3130
- * button stylesheet's trigger register dresses it. The popup keeps the
3131
- * menu parts untouched.
3132
- */
3133
- function SplitButton({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
3134
- return /* @__PURE__ */ jsxs("div", {
3135
- ...rest,
3136
- "data-scope": "split-button",
3137
- "data-part": "root",
3138
- children: [/* @__PURE__ */ jsx(Button, {
3139
- variant,
3140
- tone,
3141
- size,
3142
- disabled,
3143
- onClick,
3144
- children: label
3145
- }), /* @__PURE__ */ jsxs(Menu$1.Root, {
3146
- positioning: { placement: "bottom-end" },
3147
- children: [/* @__PURE__ */ jsx(Menu$1.Trigger, {
3148
- asChild: true,
3149
- children: /* @__PURE__ */ jsx("button", {
3150
- type: "button",
3151
- disabled,
3152
- "data-variant": variant,
3153
- "data-tone": tone,
3154
- "data-size": size,
3155
- "data-square": "true",
3156
- "data-motion": "ink-ripple lit",
3157
- "aria-label": "More actions",
3158
- children: chevronDown$1()
3159
- })
3160
- }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(Menu$1.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu$1.Item, {
3161
- value: entry.value,
3162
- disabled: entry.disabled,
3163
- "data-danger": entry.danger ? "" : void 0,
3164
- onSelect: () => onSelect?.(entry.value),
3165
- children: /* @__PURE__ */ jsx(Menu$1.ItemText, { children: entry.label })
3166
- }, entry.value)) }) }) })]
3167
- })]
3168
- });
3169
- }
3170
- /** One stroke pointing down: all a fitted dropdown arrow needs. */
3171
- function chevronDown$1() {
3172
- return /* @__PURE__ */ jsx("svg", {
3173
- width: 16,
3174
- height: 16,
3175
- viewBox: "0 0 24 24",
3176
- fill: "none",
3177
- stroke: "currentColor",
3178
- strokeWidth: 1.75,
3179
- strokeLinecap: "round",
3180
- strokeLinejoin: "round",
3181
- "aria-hidden": "true",
3182
- children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
3183
- });
3184
- }
3185
- injectComponentStyle("split-button");
3186
- injectComponentStyle("menu");
3187
- //#endregion
3188
- //#region src/components/splitter/index.tsx
3189
- /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
3190
- * a hairline and a small paper-seal thumb answers the hand. The API is
3191
- * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
3192
- const Splitter = Splitter$1;
3193
- injectComponentStyle("splitter");
3194
- //#endregion
3195
- //#region src/components/stack/index.tsx
3196
- /** Whitespace chosen by name: the named steps point at the space ramp so
3197
- * siblings are held apart by one token, never by ad-hoc margins. */
3198
- const gapVars = {
3199
- none: "0",
3200
- xs: "var(--bs-gap-xs)",
3201
- sm: "var(--bs-gap-sm)",
3202
- md: "var(--bs-gap-md)",
3203
- lg: "var(--bs-gap-lg)",
3204
- xl: "var(--bs-gap-xl)"
3205
- };
3206
- function Stack({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
3207
- const style = {
3208
- ...rest.style,
3209
- "--bs-stack-gap": gapVars[gap] ?? gapVars.md,
3210
- alignItems: align,
3211
- justifyContent: justify,
3212
- flexWrap: wrap ? "wrap" : void 0
3213
- };
3214
- return /* @__PURE__ */ jsx("div", {
3215
- ...rest,
3216
- style,
3217
- "data-scope": "stack",
3218
- "data-part": "root",
3219
- "data-direction": direction
3220
- });
3221
- }
3222
- injectComponentStyle("stack");
3223
- //#endregion
3224
- //#region src/components/page-header/index.tsx
3225
- /** The page's face: an eyebrow whisper, a serif title, one line of
3226
- * description, and the actions resting beside the title on the same
3227
- * baseline. Heading groups title and actions; the rest compose below. */
3228
- function part$3(name, tag) {
3229
- const Tag = tag;
3230
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
3231
- ...rest,
3232
- "data-scope": "page-header",
3233
- "data-part": name.toLowerCase(),
3234
- children
3235
- });
3236
- Component.displayName = "PageHeader" + name;
3237
- return Component;
3238
- }
3239
- const Root$2 = part$3("Root", "header");
3240
- const Heading$1 = part$3("Heading", "div");
3241
- const Eyebrow = part$3("Eyebrow", "p");
3242
- const Title = part$3("Title", "h1");
3243
- const Description$1 = part$3("Description", "p");
3244
- const Actions = part$3("Actions", "div");
3245
- const PageHeader = Object.assign(Root$2, {
3246
- Root: Root$2,
3247
- Heading: Heading$1,
3248
- Eyebrow,
3249
- Title,
3250
- Description: Description$1,
3251
- Actions
3252
- });
3253
- injectComponentStyle("page-header");
3254
- //#endregion
3255
- //#region src/components/spinner/index.tsx
3256
- /** A wheel of waiting: one arc of ink turning about its center. Quiet by
3257
- * default — it reports progress without claiming attention. */
3258
- function Spinner({ size = "md", children, ...rest }) {
3259
- return /* @__PURE__ */ jsxs("span", {
3260
- ...rest,
3261
- role: "status",
3262
- "aria-label": rest["aria-label"] ?? "Loading",
3263
- "data-scope": "spinner",
3264
- "data-part": "root",
3265
- "data-size": size,
3266
- children: [/* @__PURE__ */ jsxs("svg", {
3267
- viewBox: "0 0 24 24",
3268
- fill: "none",
3269
- "aria-hidden": true,
3270
- children: [/* @__PURE__ */ jsx("circle", {
3271
- cx: 12,
3272
- cy: 12,
3273
- r: 9,
3274
- stroke: "currentColor",
3275
- strokeOpacity: .2,
3276
- strokeWidth: 2.5
3277
- }), /* @__PURE__ */ jsx("path", {
3278
- d: "M21 12a9 9 0 0 0-9-9",
3279
- stroke: "currentColor",
3280
- strokeWidth: 2.5,
3281
- strokeLinecap: "round"
3282
- })]
3283
- }), children]
3284
- });
3285
- }
3286
- injectComponentStyle("spinner");
3287
- //#endregion
3288
- //#region src/components/stat/index.tsx
3289
- function part$2(name, tag) {
3290
- const Tag = tag;
3291
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
3292
- ...rest,
3293
- "data-scope": "stat",
3294
- "data-part": name.toLowerCase(),
3295
- children
3296
- });
3297
- Component.displayName = "Stat" + name;
3298
- return Component;
3299
- }
3300
- const Root$1 = part$2("Root", "div");
3301
- const Label$1 = part$2("Label", "p");
3302
- const Value = part$2("Value", "div");
3303
- const Description = part$2("Description", "p");
3304
- /** The delta reads the direction in the fixed semantic pigments; an
3305
- * explicit `data-direction` attribute on the consumer side still wins. */
3306
- const Delta = ({ direction = "flat", children, ...rest }) => /* @__PURE__ */ jsx("span", {
3307
- ...rest,
3308
- "data-scope": "stat",
3309
- "data-part": "delta",
3310
- "data-direction": rest["data-direction"] ?? direction,
3311
- children
3312
- });
3313
- const Stat = Object.assign(Root$1, {
3314
- Root: Root$1,
3315
- Label: Label$1,
3316
- Value,
3317
- Delta,
3318
- Description
3319
- });
3320
- injectComponentStyle("stat");
3321
- //#endregion
3322
- //#region src/components/steps/index.tsx
3323
- /**
3324
- * Steps — linear progress through a sequence.
3325
- *
3326
- * Parts: Root, List, Item, Trigger, Indicator, Separator, Content,
3327
- * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
3328
- * data-complete / data-current / data-incomplete.
3329
- */
3330
- const Steps = Steps$1;
3331
- injectComponentStyle("steps");
3332
- //#endregion
3333
- //#region src/components/swap/index.tsx
3334
- /** Ark's Swap, dressed in the paper-and-ink system: two impressions
3335
- * occupying one seal, the arriving one growing into place on the spring
3336
- * while the departing one shrinks away. The API is Ark's own — Root,
3337
- * Indicator (type="on" | "off"), RootProvider. */
3338
- const Swap = Swap$1;
3339
- injectComponentStyle("swap");
3340
- //#endregion
3341
- //#region src/components/switch/index.tsx
3342
- /** Ark's Switch, dressed in the paper-and-ink system: a track that rests
3343
- * in the inset shade of the paper and fills flat with primary ink when on,
3344
- * the thumb sliding on the spring. The API is Ark's own — Root, Label,
3345
- * Control, Thumb, HiddenInput. */
3346
- const Switch = Switch$1;
3347
- injectComponentStyle("switch");
3348
- //#endregion
3349
- //#region src/components/tabs/index.tsx
3350
- /**
3351
- * Tabs — tabbed navigation.
3352
- *
3353
- * Parts: Root, List, Trigger, Content, Indicator (machine-positioned ink
3354
- * bar on the list rule).
3355
- */
3356
- const Tabs = Tabs$1;
3357
- injectComponentStyle("tabs");
3358
- //#endregion
3359
- //#region src/components/tags-input/index.tsx
3360
- /** Ark's TagsInput, dressed in the paper-and-ink system: one field vessel
3361
- * whose chips rest as quiet ink and lift only a tone when edited. The API
3362
- * is Ark's own — Root, Label, Control, Input, ClearTrigger, Item,
3363
- * ItemPreview, ItemText, ItemInput, ItemDeleteTrigger, HiddenInput,
3364
- * Context. */
3365
- const TagsInput = TagsInput$1;
3366
- injectComponentStyle("tags-input");
3367
- //#endregion
3368
- //#region src/components/table/index.tsx
3369
- /** The pagination bar's arrows — thin chevrons for the row of seals. */
3370
- function pageGlyph(direction) {
3371
- return /* @__PURE__ */ jsx("svg", {
3372
- viewBox: "0 0 24 24",
3373
- width: 14,
3374
- height: 14,
3375
- fill: "none",
3376
- stroke: "currentColor",
3377
- strokeWidth: 2,
3378
- strokeLinecap: "round",
3379
- strokeLinejoin: "round",
3380
- "aria-hidden": "true",
3381
- children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
3382
- });
3383
- }
3384
- /** The page-size select's pointing chevron. */
3385
- function chevronDownGlyph() {
3386
- return /* @__PURE__ */ jsx("svg", {
3387
- viewBox: "0 0 24 24",
3388
- width: 14,
3389
- height: 14,
3390
- fill: "none",
3391
- stroke: "currentColor",
3392
- strokeWidth: 2.5,
3393
- strokeLinecap: "round",
3394
- strokeLinejoin: "round",
3395
- "aria-hidden": "true",
3396
- children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
3397
- });
3398
- }
3399
- const SELECT_COL_ID = "__select";
3400
- const SELECT_COL_WIDTH = 48;
3401
- /** The list holding `id` and the index inside it, or null when absent. */
3402
- function findNode(rows, id) {
3403
- for (let index = 0; index < rows.length; index++) {
3404
- const row = rows[index];
3405
- if (String(row.id) === id) return {
3406
- list: rows,
3407
- index
3408
- };
3409
- if (row.subRows) {
3410
- const hit = findNode(row.subRows, id);
3411
- if (hit) return hit;
3412
- }
3413
- }
3414
- return null;
3415
- }
3416
- /** True when `id` sits anywhere in the node's subtree — dropping a node
3417
- * into its own descendants would orphan it. */
3418
- function containsNode(node, id) {
3419
- return !!node.subRows?.some((child) => String(child.id) === id || containsNode(child, id));
3420
- }
3421
- /** Rebuild every array along the path to `id`, leaving sibling branches
3422
- * untouched by reference (TanStack's memoization keeps their rows). */
3423
- function removeById(rows, id) {
3424
- const next = [];
3425
- for (const row of rows) {
3426
- if (String(row.id) === id) continue;
3427
- next.push(row.subRows ? {
3428
- ...row,
3429
- subRows: removeById(row.subRows, id)
3430
- } : row);
3431
- }
3432
- return next;
3433
- }
3434
- /** Rebuild the path to `id` and swap the node for `patch(node)`. */
3435
- function replaceById(rows, id, patch) {
3436
- return rows.map((row) => {
3437
- if (String(row.id) === id) return patch(row);
3438
- return row.subRows ? {
3439
- ...row,
3440
- subRows: replaceById(row.subRows, id, patch)
3441
- } : row;
3442
- });
3443
- }
3444
- /** Toggle one drop-indicator attribute without rewriting it every event. */
3445
- function mark(el, attr, on) {
3446
- if (on) el.setAttribute(attr, "");
3447
- else el.removeAttribute(attr);
3448
- }
3449
- function ChevronGlyph() {
3450
- return /* @__PURE__ */ jsx("svg", {
3451
- viewBox: "0 0 24 24",
3452
- fill: "none",
3453
- stroke: "currentColor",
3454
- strokeWidth: 2.5,
3455
- strokeLinecap: "round",
3456
- strokeLinejoin: "round",
3457
- "aria-hidden": true,
3458
- children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
3459
- });
3460
- }
3461
- /** React keeps `indeterminate` off the JSX types; the DOM property is the
3462
- * only channel, so the checkbox owns its ref. */
3463
- function SelectBox(props) {
3464
- const box = useRef(null);
3465
- useLayoutEffect(() => {
3466
- if (box.current) box.current.indeterminate = props.indeterminate;
3467
- });
3468
- return /* @__PURE__ */ jsx("input", {
3469
- ref: box,
3470
- type: "checkbox",
3471
- checked: props.checked,
3472
- "aria-label": props.label,
3473
- onChange: props.onToggle
3474
- });
3475
- }
3476
- function DataTable(rawProps) {
3477
- const props = rawProps;
3478
- const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
3479
- 10,
3480
- 20,
3481
- 50
3482
- ], globalFilterPlaceholder = "Filter rows", emptyText = "No rows", reorderable = false } = props;
3483
- const merge = props.merge;
3484
- const virtual = virtualProp && !merge;
3485
- const mergeMode = !virtualProp && !!merge;
3486
- /** Features follow the construction-time switches: sorting, selection,
3487
- * expansion, pinning, and spanning are always part of the one-stop
3488
- * shape; filtering and pagination ride their own render paths. Memoized
3489
- * so the feature registry stays stable across renders. */
3490
- const features = useMemo(() => tableFeatures({
3491
- rowSortingFeature,
3492
- sortedRowModel: createSortedRowModel(),
3493
- sortFns: {
3494
- alphanumeric: sortFn_alphanumeric,
3495
- alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
3496
- basic: sortFn_basic,
3497
- datetime: sortFn_datetime,
3498
- text: sortFn_text,
3499
- textCaseSensitive: sortFn_textCaseSensitive
3500
- },
3501
- rowSelectionFeature,
3502
- rowExpandingFeature,
3503
- expandedRowModel: createExpandedRowModel(),
3504
- columnPinningFeature,
3505
- columnOrderingFeature,
3506
- columnSizingFeature,
3507
- columnVisibilityFeature,
3508
- cellSpanningFeature,
3509
- ...filterable ? {
3510
- columnFilteringFeature,
3511
- globalFilteringFeature,
3512
- filteredRowModel: createFilteredRowModel(),
3513
- filterFns: {
3514
- arrIncludes: filterFn_arrIncludes,
3515
- equals: filterFn_equals,
3516
- includesString: filterFn_includesString,
3517
- inDateRange: filterFn_inDateRange,
3518
- inNumberRange: filterFn_inNumberRange,
3519
- weakEquals: filterFn_weakEquals
3520
- }
3521
- } : {},
3522
- ...paginated ? {
3523
- rowPaginationFeature,
3524
- paginatedRowModel: createPaginatedRowModel()
3525
- } : {}
3526
- }), [filterable, paginated]);
3527
- const columns = useMemo(() => {
3528
- if (virtualProp && merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
3529
- const mergeIds = new Set(merge ?? []);
3530
- const defId = (def) => def.id ?? ("accessorKey" in def ? String(def.accessorKey) : "");
3531
- const narrowed = props.columns.map((def) => mergeIds.has(defId(def)) ? {
3532
- ...def,
3533
- spanRows: true
3534
- } : def);
3535
- if (selectable) narrowed.unshift({
3536
- id: SELECT_COL_ID,
3537
- size: SELECT_COL_WIDTH,
3538
- enableSorting: false,
3539
- header: () => "",
3540
- cell: () => ""
3541
- });
3542
- return narrowed;
3543
- }, [
3544
- props.columns,
3545
- merge,
3546
- selectable,
3547
- features
3548
- ]);
3549
- const table = useTable({
3550
- features,
3551
- columns,
3552
- data: props.data,
3553
- enableSorting: sortable,
3554
- getRowId: (row) => String(row.id),
3555
- getSubRows: (row) => row.subRows,
3556
- autoResetExpanded: false,
3557
- initialState: {
3558
- ...props.initialSorting ? { sorting: props.initialSorting } : {},
3559
- ...paginated ? { pagination: {
3560
- pageIndex: 0,
3561
- pageSize
3562
- } } : {},
3563
- ...props.pinStart || props.pinEnd ? { columnPinning: {
3564
- start: props.pinStart ?? [],
3565
- end: props.pinEnd ?? []
3566
- } } : {}
3567
- }
3568
- });
3569
- const viewport = useRef(null);
3570
- const rows = table.getRowModel().rows;
3571
- /** The declared row height is the density-scale baseline; the live
3572
- * scale comes off the document so the virtual window matches what CSS
3573
- * actually renders. It is read once and re-read only when the density
3574
- * or scene attribute moves — estimateSize runs on every scroll frame. */
3575
- let densityScale = 1;
3576
- const readDensityScale = () => {
3577
- const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
3578
- densityScale = Number.isFinite(value) && value > 0 ? value : 1;
3579
- };
3580
- const virtualizer = useVirtualizer({
3581
- count: rows.length,
3582
- getScrollElement: () => viewport.current,
3583
- estimateSize: () => rowHeight * densityScale,
3584
- getItemKey: (index) => rows[index]?.id ?? index,
3585
- overscan: 8
3586
- });
3587
- const [, rerender] = useReducer((count) => count + 1, 0);
3588
- useEffect(() => {
3589
- if (!virtual) return;
3590
- readDensityScale();
3591
- const observer = new MutationObserver(rerender);
3592
- observer.observe(document.documentElement, {
3593
- attributes: true,
3594
- attributeFilter: ["data-density", "data-scene"]
3595
- });
3596
- return () => observer.disconnect();
3597
- }, [virtual]);
3598
- const virtualRows = virtualizer.getVirtualItems();
3599
- const totalSize = virtualizer.getTotalSize();
3600
- /** Column ids of the visible leaves, for pin-seam bookkeeping. */
3601
- const leafIds = table.getAllLeafColumns().map((c) => c.id);
3602
- const expandHostId = tree ? leafIds.find((id) => id !== SELECT_COL_ID) : void 0;
3603
- /** Track list for every grid in the table; explicit sizes pin to px,
3604
- * everything else flexes. */
3605
- const colsTemplate = table.getAllLeafColumns().map((column) => {
3606
- if (column.id === SELECT_COL_ID) return `${SELECT_COL_WIDTH}px`;
3607
- const def = props.columns.find((d) => d.id === column.id || "accessorKey" in d && String(d.accessorKey) === column.id);
3608
- return def?.size != null ? `${def.size}px` : def?.minSize != null ? `minmax(${def.minSize}px, 1fr)` : "1fr";
3609
- }).join(" ");
3610
- function pinAttrs(column) {
3611
- const pinned = column.getIsPinned();
3612
- const attrs = { "data-pinned": pinned || void 0 };
3613
- if (!pinned) return attrs;
3614
- const offset = pinned === "start" ? column.getStart("start") : column.getAfter("end");
3615
- const index = leafIds.indexOf(column.id);
3616
- const prev = index > 0 ? table.getColumn(leafIds[index - 1]) : void 0;
3617
- const next = index < leafIds.length - 1 ? table.getColumn(leafIds[index + 1]) : void 0;
3618
- attrs["data-last-pinned"] = pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0;
3619
- attrs["data-first-pinned"] = pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0;
3620
- attrs.style = { "--pin-offset": `${offset}px` };
3621
- return attrs;
3622
- }
3623
- const drag = useRef({
3624
- col: null,
3625
- row: null,
3626
- lastColDrop: null,
3627
- lastRowDrop: null
3628
- });
3629
- function clearColDrop() {
3630
- const el = drag.current.lastColDrop;
3631
- if (el) {
3632
- el.removeAttribute("data-drop-before-col");
3633
- el.removeAttribute("data-drop-after-col");
3634
- drag.current.lastColDrop = null;
3635
- }
3636
- }
3637
- function clearRowDrop() {
3638
- const el = drag.current.lastRowDrop;
3639
- if (el) {
3640
- el.removeAttribute("data-drop-before");
3641
- el.removeAttribute("data-drop-inside");
3642
- el.removeAttribute("data-drop-after");
3643
- el.style.removeProperty("--bs-drop-indent");
3644
- drag.current.lastRowDrop = null;
3645
- }
3646
- }
3647
- function onColDragStart(e) {
3648
- drag.current.col = e.currentTarget.dataset.id;
3649
- e.dataTransfer.effectAllowed = "move";
3650
- e.dataTransfer.setData("text/plain", drag.current.col);
3651
- e.currentTarget.setAttribute("data-dragging", "");
3652
- }
3653
- /** Header cells answer drops on either side of their midpoint; pinned
3654
- * columns and the drag source themselves never light up. */
3655
- function onColDragOver(column, e) {
3656
- if (!drag.current.col || drag.current.col === column.id || column.getIsPinned()) return;
3657
- e.preventDefault();
3658
- e.dataTransfer.dropEffect = "move";
3659
- const el = e.currentTarget;
3660
- if (drag.current.lastColDrop !== el) clearColDrop();
3661
- const box = el.getBoundingClientRect();
3662
- const before = e.clientX < box.left + box.width / 2;
3663
- mark(el, "data-drop-before-col", before);
3664
- mark(el, "data-drop-after-col", !before);
3665
- drag.current.lastColDrop = el;
3666
- }
3667
- function onColDragLeave(e) {
3668
- if (e.currentTarget === drag.current.lastColDrop) clearColDrop();
3669
- }
3670
- function onColDrop(column, e) {
3671
- e.preventDefault();
3672
- if (!drag.current.col || drag.current.col === column.id) return;
3673
- const box = e.currentTarget.getBoundingClientRect();
3674
- const before = e.clientX < box.left + box.width / 2;
3675
- const moved = drag.current.col;
3676
- const state = table.atoms.columnOrder.get();
3677
- const order = (state.length ? [...state] : table.getAllLeafColumns().map((c) => c.id)).filter((id) => id !== moved);
3678
- const at = order.indexOf(column.id);
3679
- order.splice(before ? at : at + 1, 0, moved);
3680
- const selectAt = order.indexOf(SELECT_COL_ID);
3681
- if (selectAt > 0) {
3682
- order.splice(selectAt, 1);
3683
- order.unshift(SELECT_COL_ID);
3684
- }
3685
- table.setColumnOrder(order);
3686
- props.onColumnReorder?.(order);
3687
- clearColDrop();
3688
- }
3689
- function onColDragEnd(e) {
3690
- drag.current.col = null;
3691
- e.currentTarget.removeAttribute("data-dragging");
3692
- clearColDrop();
3693
- }
3694
- /** Row dragging rests while any view (sorting, filtering, pagination
3695
- * past the first page) stands between the display order and the data
3696
- * order — a drop there would lie about what it reordered. */
3697
- const rowDraggable = reorderable && !mergeMode && table.atoms.sorting.get().length === 0 && !(filterable && (table.atoms.columnFilters.get().length || table.atoms.globalFilter.get())) && !(paginated && table.atoms.pagination.get().pageIndex !== 0);
3698
- function onRowDragStart(row, e) {
3699
- drag.current.row = String(row.id);
3700
- e.dataTransfer.effectAllowed = "move";
3701
- e.dataTransfer.setData("text/plain", drag.current.row);
3702
- e.currentTarget.setAttribute("data-dragging", "");
3703
- }
3704
- /** Where a tree drop lands: the outer bands of the target row read as
3705
- * sibling slots (40% each, so the insertion line answers the hand
3706
- * everywhere and indents to the reference row's own depth — cross a
3707
- * boundary and the level flips from the row above's to the row
3708
- * below's); the narrow middle band reads as "make child". A node
3709
- * never drops into its own subtree. */
3710
- function rowZone(row, e) {
3711
- const box = e.currentTarget.getBoundingClientRect();
3712
- const pos = (e.clientY - box.top) / box.height;
3713
- return pos < .4 ? "before" : pos > .6 ? "after" : "inside";
3714
- }
3715
- function onRowDragOver(row, e) {
3716
- if (!drag.current.row || drag.current.row === String(row.id)) return;
3717
- const el = e.currentTarget;
3718
- let zone;
3719
- if (tree) {
3720
- const hit = findNode(props.data, drag.current.row);
3721
- const dragged = hit?.list[hit.index];
3722
- if (!dragged || containsNode(dragged, String(row.id))) return;
3723
- zone = rowZone(row, e);
3724
- } else {
3725
- const box = el.getBoundingClientRect();
3726
- zone = e.clientY - box.top < box.height / 2 ? "before" : "after";
3727
- }
3728
- e.preventDefault();
3729
- e.dataTransfer.dropEffect = "move";
3730
- if (drag.current.lastRowDrop !== el) clearRowDrop();
3731
- mark(el, "data-drop-before", zone === "before");
3732
- mark(el, "data-drop-inside", zone === "inside");
3733
- mark(el, "data-drop-after", zone === "after");
3734
- el.style.setProperty("--bs-drop-indent", String(tree ? row.depth : 0));
3735
- drag.current.lastRowDrop = el;
3736
- }
3737
- function onRowDragLeave(e) {
3738
- if (e.currentTarget === drag.current.lastRowDrop) clearRowDrop();
3739
- }
3740
- function onRowDrop(row, e) {
3741
- e.preventDefault();
3742
- if (!drag.current.row || drag.current.row === String(row.id)) return;
3743
- const box = e.currentTarget.getBoundingClientRect();
3744
- const targetId = String(row.id);
3745
- const movedId = drag.current.row;
3746
- if (tree) {
3747
- const zone = rowZone(row, e);
3748
- const hit = findNode(props.data, movedId);
3749
- const dragged = hit?.list[hit.index];
3750
- if (!dragged || containsNode(dragged, targetId)) return;
3751
- let next = removeById(props.data, movedId);
3752
- if (zone === "inside") next = replaceById(next, targetId, (node) => ({
3753
- ...node,
3754
- subRows: [...node.subRows ?? [], dragged]
3755
- }));
3756
- else {
3757
- const slot = findNode(next, targetId);
3758
- if (!slot) return;
3759
- slot.list.splice(slot.index + (zone === "after" ? 1 : 0), 0, dragged);
3760
- }
3761
- props.onRowReorder?.(next);
3762
- } else {
3763
- const pos = (e.clientY - box.top) / box.height;
3764
- const data = props.data;
3765
- const from = data.findIndex((r) => String(r.id) === movedId);
3766
- const to = data.findIndex((r) => String(r.id) === targetId);
3767
- if (from < 0 || to < 0) return;
3768
- const next = [...data];
3769
- const [movedRow] = next.splice(from, 1);
3770
- const slot = to > from ? to - 1 : to;
3771
- next.splice(pos < .5 ? slot : slot + 1, 0, movedRow);
3772
- props.onRowReorder?.(next);
3773
- }
3774
- clearRowDrop();
3775
- }
3776
- function onRowDragEnd(e) {
3777
- drag.current.row = null;
3778
- e.currentTarget.removeAttribute("data-dragging");
3779
- clearRowDrop();
3780
- }
3781
- function renderCell(cell, row) {
3782
- const column = cell.column;
3783
- if (cell.getIsCovered()) return null;
3784
- const isExpandHost = column.id === expandHostId;
3785
- const pin = pinAttrs(column);
3786
- const style = { ...pin.style };
3787
- delete pin.style;
3788
- const rowSpan = cell.getRowSpan();
3789
- if (rowSpan > 1) style.gridRow = `span ${rowSpan}`;
3790
- const spanned = rowSpan > 1 ? { "data-spanned": "" } : {};
3791
- let content;
3792
- if (column.id === SELECT_COL_ID) content = /* @__PURE__ */ jsx(SelectBox, {
3793
- checked: row.getIsSelected(),
3794
- indeterminate: false,
3795
- onToggle: () => row.toggleSelected(!row.getIsSelected()),
3796
- label: "Select row"
3797
- });
3798
- else if (isExpandHost) content = /* @__PURE__ */ jsxs("div", {
3799
- "data-scope": "table",
3800
- "data-part": "cell-main",
3801
- style: { "--bs-table-depth": String(row.depth) },
3802
- children: [/* @__PURE__ */ jsx("button", {
3803
- type: "button",
3804
- "data-scope": "table",
3805
- "data-part": "expander",
3806
- "data-expanded": row.getIsExpanded() || void 0,
3807
- "data-leaf": !row.getCanExpand() || void 0,
3808
- "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
3809
- onClick: () => row.toggleExpanded(),
3810
- children: /* @__PURE__ */ jsx(ChevronGlyph, {})
3811
- }), /* @__PURE__ */ jsx(FlexRender, { cell })]
3812
- });
3813
- else content = /* @__PURE__ */ jsx(FlexRender, { cell });
3814
- return /* @__PURE__ */ jsx("div", {
3815
- role: "cell",
3816
- "data-scope": "table",
3817
- "data-part": "cell",
3818
- "data-numeric": column.columnDef.meta?.numeric ? "" : void 0,
3819
- ...spanned,
3820
- ...pin,
3821
- style,
3822
- children: content
3823
- }, column.id);
3824
- }
3825
- function renderHeaderCell(header) {
3826
- const column = header.column;
3827
- const sorted = column.getIsSorted();
3828
- const canSort = column.getCanSort();
3829
- const canFilter = filterable && column.getCanFilter();
3830
- const canDrag = !!reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
3831
- return /* @__PURE__ */ jsxs("div", {
3832
- role: "columnheader",
3833
- "data-scope": "table",
3834
- "data-part": "header-cell",
3835
- "data-sortable": canSort || void 0,
3836
- "data-sort": sorted || void 0,
3837
- "data-numeric": column.columnDef.meta?.numeric ? "" : void 0,
3838
- "data-draggable": canDrag || void 0,
3839
- "data-id": column.id,
3840
- draggable: canDrag || void 0,
3841
- "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
3842
- ...pinAttrs(column),
3843
- onClick: canSort ? () => column.toggleSorting() : void 0,
3844
- onDragStart: canDrag ? onColDragStart : void 0,
3845
- onDragOver: canDrag ? (e) => onColDragOver(column, e) : void 0,
3846
- onDragLeave: canDrag ? onColDragLeave : void 0,
3847
- onDrop: canDrag ? (e) => onColDrop(column, e) : void 0,
3848
- onDragEnd: canDrag ? onColDragEnd : void 0,
3849
- children: [header.isPlaceholder || header.column.columnDef.header === "" ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
3850
- type: "text",
3851
- "data-scope": "table",
3852
- "data-part": "header-filter",
3853
- "aria-label": `Filter ${column.id}`,
3854
- value: column.getFilterValue() ?? "",
3855
- placeholder: "Filter",
3856
- draggable: false,
3857
- onClick: (e) => e.stopPropagation(),
3858
- onDragStart: (e) => e.stopPropagation(),
3859
- onInput: (e) => column.setFilterValue(e.target.value)
3860
- }) : null]
3861
- }, column.id);
3862
- }
3863
- function renderRow(row, virtualIndex) {
3864
- const style = {};
3865
- if (virtual) {
3866
- const item = virtualRows[virtualIndex];
3867
- style.position = "absolute";
3868
- style.insetInlineStart = "0";
3869
- style.inlineSize = "100%";
3870
- style.transform = `translateY(${item.start}px)`;
3871
- style.blockSize = `${item.size}px`;
3872
- }
3873
- return /* @__PURE__ */ jsx("div", {
3874
- role: "row",
3875
- "data-scope": "table",
3876
- "data-part": "row",
3877
- "data-selected": row.getIsSelected() || void 0,
3878
- draggable: rowDraggable || void 0,
3879
- onDragStart: rowDraggable ? (e) => onRowDragStart(row, e) : void 0,
3880
- onDragOver: rowDraggable ? (e) => onRowDragOver(row, e) : void 0,
3881
- onDragLeave: rowDraggable ? onRowDragLeave : void 0,
3882
- onDrop: rowDraggable ? (e) => onRowDrop(row, e) : void 0,
3883
- onDragEnd: rowDraggable ? onRowDragEnd : void 0,
3884
- style,
3885
- children: row.getVisibleCells().map((cell) => renderCell(cell, row))
3886
- }, row.id);
3887
- }
3888
- const header = /* @__PURE__ */ jsx("div", {
3889
- role: "rowgroup",
3890
- "data-scope": "table",
3891
- "data-part": "header",
3892
- children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("div", {
3893
- role: "row",
3894
- "data-scope": "table",
3895
- "data-part": "row",
3896
- children: group.headers.map((header) => {
3897
- const column = header.column;
3898
- if (column.id === SELECT_COL_ID) {
3899
- const all = table.getIsAllRowsSelected();
3900
- return /* @__PURE__ */ jsx("div", {
3901
- role: "columnheader",
3902
- "data-scope": "table",
3903
- "data-part": "header-cell",
3904
- ...pinAttrs(column),
3905
- children: /* @__PURE__ */ jsx(SelectBox, {
3906
- checked: all,
3907
- indeterminate: table.getIsSomeRowsSelected() && !all,
3908
- onToggle: () => table.toggleAllRowsSelected(!all),
3909
- label: "Select all rows"
3910
- })
3911
- }, column.id);
3912
- }
3913
- return renderHeaderCell(header);
3914
- })
3915
- }, group.id))
3916
- });
3917
- const body = /* @__PURE__ */ jsxs("div", {
3918
- role: "rowgroup",
3919
- "data-scope": "table",
3920
- "data-part": "body",
3921
- "data-merge": mergeMode || void 0,
3922
- style: virtual ? {
3923
- position: "relative",
3924
- blockSize: `${totalSize}px`
3925
- } : void 0,
3926
- children: [virtual ? virtualRows.map((_, index) => renderRow(rows[index], index)) : rows.map((row) => renderRow(row, -1)), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
3927
- "data-scope": "table",
3928
- "data-part": "empty",
3929
- children: emptyText
3930
- }) : null]
3931
- });
3932
- const hasFooters = table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer));
3933
- const footer = props.stickyFooter && hasFooters ? /* @__PURE__ */ jsx("div", {
3934
- role: "rowgroup",
3935
- "data-scope": "table",
3936
- "data-part": "footer",
3937
- children: table.getFooterGroups().map((group) => /* @__PURE__ */ jsx("div", {
3938
- role: "row",
3939
- "data-scope": "table",
3940
- "data-part": "row",
3941
- children: group.headers.map((header) => /* @__PURE__ */ jsx("div", {
3942
- role: "columnheader",
3943
- "data-scope": "table",
3944
- "data-part": "footer-cell",
3945
- "data-numeric": header.column.columnDef.meta?.numeric ? "" : void 0,
3946
- ...pinAttrs(header.column),
3947
- children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { footer: header })
3948
- }, header.column.id))
3949
- }, group.id))
3950
- }) : null;
3951
- /** The bar only exists when the pagination feature is registered; its
3952
- * state reads stay inside this branch. */
3953
- const paginationBar = paginated ? (() => {
3954
- const pagination = table.atoms.pagination.get();
3955
- const rowCount = table.getRowCount();
3956
- const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
3957
- label: `${size} / page`,
3958
- value: String(size)
3959
- })) });
3960
- const pageSize = /* @__PURE__ */ jsxs(Select.Root, {
3961
- collection: sizeItems,
3962
- value: [String(pagination.pageSize)],
3963
- onValueChange: (details) => table.setPageSize(Number(details.value[0])),
3964
- positioning: { placement: "top-start" },
3965
- children: [/* @__PURE__ */ jsx(Select.Control, { children: /* @__PURE__ */ jsxs(Select.Trigger, {
3966
- "aria-label": "Rows per page",
3967
- children: [/* @__PURE__ */ jsx(Select.ValueText, {}), /* @__PURE__ */ jsx(Select.Indicator, { children: chevronDownGlyph() })]
3968
- }) }), /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
3969
- item,
3970
- children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: "✓" })]
3971
- }, item.value)) }) })]
3972
- });
3973
- const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
3974
- count: rowCount,
3975
- pageSize: pagination.pageSize,
3976
- page: pagination.pageIndex + 1,
3977
- onPageChange: (details) => table.setPageIndex(details.page - 1),
3978
- children: [
3979
- /* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
3980
- /* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
3981
- type: "page",
3982
- value: page.value,
3983
- children: String(page.value)
3984
- }, page.value)) }),
3985
- /* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
3986
- ]
3987
- });
3988
- return /* @__PURE__ */ jsxs("div", {
3989
- "data-scope": "table",
3990
- "data-part": "pagination",
3991
- children: [/* @__PURE__ */ jsxs("span", {
3992
- "data-scope": "table",
3993
- "data-part": "page-status",
3994
- children: [rowCount, " rows"]
3995
- }), /* @__PURE__ */ jsxs("div", {
3996
- "data-scope": "table",
3997
- "data-part": "page-nav",
3998
- children: [pageSize, pager]
3999
- })]
4000
- });
4001
- })() : null;
4002
- const toolbar = filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
4003
- "data-scope": "table",
4004
- "data-part": "toolbar",
4005
- children: /* @__PURE__ */ jsx("input", {
4006
- type: "search",
4007
- "data-scope": "table",
4008
- "data-part": "global-filter",
4009
- "aria-label": "Filter all columns",
4010
- placeholder: globalFilterPlaceholder,
4011
- value: table.atoms.globalFilter.get() ?? "",
4012
- onInput: (e) => table.setGlobalFilter(e.target.value)
4013
- })
4014
- }) : null;
4015
- return /* @__PURE__ */ jsxs("div", {
4016
- "data-scope": "table",
4017
- "data-part": "root",
4018
- "data-reorderable": reorderable || void 0,
4019
- style: {
4020
- "--bs-table-row-height": `calc(${rowHeight}px * var(--bs-density-scale, 1))`,
4021
- ...props.style
4022
- },
4023
- children: [
4024
- toolbar,
4025
- /* @__PURE__ */ jsx("div", {
4026
- "data-scope": "table",
4027
- "data-part": "viewport",
4028
- ref: viewport,
4029
- children: /* @__PURE__ */ jsxs("div", {
4030
- role: "table",
4031
- "data-scope": "table",
4032
- "data-part": "table",
4033
- style: { "--bs-table-cols": colsTemplate },
4034
- children: [
4035
- header,
4036
- body,
4037
- footer
4038
- ]
4039
- })
4040
- }),
4041
- paginationBar
4042
- ]
4043
- });
4044
- }
4045
- injectComponentStyle("table");
4046
- //#endregion
4047
- //#region src/components/textarea/index.tsx
4048
- function Textarea({ value, invalid = false, onValueChange, ...rest }) {
4049
- const field = useFieldContext();
4050
- const fieldProps = field?.getTextareaProps() ?? {};
4051
- return /* @__PURE__ */ jsx("textarea", {
4052
- ...fieldProps,
4053
- ...rest,
4054
- ...value !== void 0 ? { value } : {},
4055
- "data-scope": "textarea",
4056
- "data-part": "root",
4057
- "data-invalid": invalid || field?.invalid ? "" : void 0,
4058
- onChange: (event) => onValueChange?.(event.target.value)
4059
- });
4060
- }
4061
- injectComponentStyle("textarea");
4062
- //#endregion
4063
- //#region src/components/timeline/index.tsx
4064
- /** A line of moments: Root is the ordered thread, Item one moment on it,
4065
- * Marker the point where the thread passes, Content what the moment
4066
- * holds. The hairline between markers is drawn by the stylesheet. */
4067
- function part$1(name, tag) {
4068
- const Tag = tag;
4069
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
4070
- ...rest,
4071
- "data-scope": "timeline",
4072
- "data-part": name.toLowerCase(),
4073
- children
4074
- });
4075
- Component.displayName = "Timeline" + name;
4076
- return Component;
4077
- }
4078
- const Root = part$1("Root", "ol");
4079
- const Item = part$1("Item", "li");
4080
- const Marker = part$1("Marker", "span");
4081
- const Content = part$1("Content", "div");
4082
- const Timeline = Object.assign(Root, {
4083
- Root,
4084
- Item,
4085
- Marker,
4086
- Content
4087
- });
4088
- injectComponentStyle("timeline");
4089
- //#endregion
4090
- //#region src/components/timer/index.tsx
4091
- /** Ark's Timer, dressed in the paper-and-ink system: monospaced digits
4092
- * that never jitter, quiet action triggers on the control recipe. The API
4093
- * is Ark's own — Root, Area, Control, Item, Separator, ActionTrigger,
4094
- * Context. Unit labels are plain content, not a machine part. */
4095
- const Timer = Timer$1;
4096
- injectComponentStyle("timer");
4097
- //#endregion
4098
- //#region src/components/toast/index.tsx
4099
- /** Ark's Toast, dressed in the paper-and-ink system: each notice rides the
4100
- * popup vessel while a pigment accents the title by type, and the machine's
4101
- * translate variables carry the slide. The API is Ark's own — Toaster,
4102
- * Root, Title, Description, ActionTrigger, CloseTrigger, plus
4103
- * createToaster. */
4104
- const Toast = Toast$1;
4105
- const Toaster = Toaster$1;
4106
- injectComponentStyle("toast");
4107
- //#endregion
4108
- //#region src/components/toc/index.tsx
4109
- /** Ark's Toc, dressed in the paper-and-ink system: a quiet rail of links
4110
- * beside the scroll, one stroke of primary ink marking where the reader
4111
- * stands. The API is Ark's own — Root, Title, List, Item, Link, Indicator. */
4112
- const Toc = Toc$1;
4113
- injectComponentStyle("toc");
4114
- //#endregion
4115
- //#region src/components/toggle/index.tsx
4116
- /** Ark's Toggle, dressed in the paper-and-ink system: a standalone seal that
4117
- * settles into the flat ink fill while pressed on. The API is Ark's own —
4118
- * Root, Indicator. */
4119
- const Toggle = Toggle$1;
4120
- injectComponentStyle("toggle");
4121
- //#endregion
4122
- //#region src/components/typography/index.tsx
4123
- /** The typographic voices, named so prose can ask for one: display and
4124
- * heading ride the song-serif, the rest ride the hei. Nothing here is
4125
- * decorative — hierarchy is size, weight, and space. */
4126
- function part(name, tag) {
4127
- const Tag = tag;
4128
- const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
4129
- ...rest,
4130
- "data-scope": "typography",
4131
- "data-part": name.toLowerCase(),
4132
- children
4133
- });
4134
- Component.displayName = "Typography" + name;
4135
- return Component;
4136
- }
4137
- const Display = part("Display", "p");
4138
- const Heading = part("Heading", "p");
4139
- const Lead = part("Lead", "p");
4140
- const Body = part("Body", "p");
4141
- const Muted = part("Muted", "p");
4142
- const Label = part("Label", "p");
4143
- const Typography = Object.assign(Display, {
4144
- Display,
4145
- Heading,
4146
- Lead,
4147
- Body,
4148
- Muted,
4149
- Label
4150
- });
4151
- injectComponentStyle("typography");
4152
- //#endregion
4153
- //#region src/components/toggle-group/index.tsx
4154
- /** Ark's ToggleGroup, dressed in the paper-and-ink system: a hairline tray
4155
- * of quiet seals where the pressed item takes the flat ink fill. The API is
4156
- * Ark's own — Root, Item. */
4157
- const ToggleGroup = ToggleGroup$1;
4158
- injectComponentStyle("toggle-group");
4159
- //#endregion
4160
- //#region src/components/tooltip/index.tsx
4161
- /** Ark's Tooltip, dressed in the paper-and-ink system: the smallest
4162
- * vessel — a tight chip of ink that dissolves in over its anchor. The
4163
- * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
4164
- const Tooltip = Tooltip$1;
4165
- injectComponentStyle("tooltip");
4166
- //#endregion
4167
- //#region src/components/tour/index.tsx
4168
- /** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
4169
- * the spotlight alone keeps the focus halo, and the anchored card rides
4170
- * the shared popup vessel. The API is Ark's own — Root, Backdrop,
4171
- * Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
4172
- * ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
4173
- * useTour. */
4174
- const Tour = Tour$1;
4175
- injectComponentStyle("tour");
4176
- //#endregion
4177
- //#region src/components/transfer/index.tsx
4178
- const checkGlyph = /* @__PURE__ */ jsx("svg", {
4179
- viewBox: "0 0 24 24",
4180
- fill: "none",
4181
- stroke: "currentColor",
4182
- strokeWidth: 3,
4183
- strokeLinecap: "round",
4184
- strokeLinejoin: "round",
4185
- "aria-hidden": "true",
4186
- children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
4187
- });
4188
- function arrowGlyph(direction) {
4189
- return /* @__PURE__ */ jsx("svg", {
4190
- viewBox: "0 0 24 24",
4191
- fill: "none",
4192
- stroke: "currentColor",
4193
- strokeWidth: 1.75,
4194
- strokeLinecap: "round",
4195
- strokeLinejoin: "round",
4196
- "aria-hidden": "true",
4197
- children: /* @__PURE__ */ jsx("path", { d: direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6" })
4198
- });
4199
- }
4200
- /**
4201
- * Two ledgers and a crossing: items sit in the source column until the
4202
- * reader checks them and walks them across — and back, the same way.
4203
- * `value` is the target column's value list; everything else in `data`
4204
- * stays on the left. `searchable` adds a filter line to each panel.
4205
- */
4206
- function Transfer({ value = [], data, titles = ["Source", "Target"], searchable = false, disabled = false, onValueChange, ...rest }) {
4207
- const [checkedSource, setCheckedSource] = useState(() => /* @__PURE__ */ new Set());
4208
- const [checkedTarget, setCheckedTarget] = useState(() => /* @__PURE__ */ new Set());
4209
- const [sourceQuery, setSourceQuery] = useState("");
4210
- const [targetQuery, setTargetQuery] = useState("");
4211
- const target = new Set(value);
4212
- function panelItems(values, inTarget, query) {
4213
- return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && target.has(item.value) === inTarget);
4214
- }
4215
- function toggle(side, option) {
4216
- (side === "source" ? setCheckedSource : setCheckedTarget)((prev) => {
4217
- const next = new Set(prev);
4218
- if (next.has(option)) next.delete(option);
4219
- else next.add(option);
4220
- return next;
4221
- });
4222
- }
4223
- function move(toTarget) {
4224
- const moving = toTarget ? checkedSource : checkedTarget;
4225
- if (moving.size === 0) return;
4226
- const next = toTarget ? [...value, ...moving].filter((entry, index, all) => all.indexOf(entry) === index) : value.filter((entry) => !moving.has(entry));
4227
- if (toTarget) setCheckedSource(/* @__PURE__ */ new Set());
4228
- else setCheckedTarget(/* @__PURE__ */ new Set());
4229
- onValueChange?.(next);
4230
- }
4231
- function panel(side, title, query, onQuery, checked, items) {
4232
- return /* @__PURE__ */ jsxs("div", {
4233
- "data-scope": "transfer",
4234
- "data-part": "panel",
4235
- "data-side": side,
4236
- children: [
4237
- /* @__PURE__ */ jsxs("div", {
4238
- "data-scope": "transfer",
4239
- "data-part": "head",
4240
- children: [/* @__PURE__ */ jsx("span", {
4241
- "data-scope": "transfer",
4242
- "data-part": "title",
4243
- children: title
4244
- }), /* @__PURE__ */ jsx("span", {
4245
- "data-scope": "transfer",
4246
- "data-part": "count",
4247
- children: items.length
4248
- })]
4249
- }),
4250
- searchable ? /* @__PURE__ */ jsx("div", {
4251
- "data-scope": "transfer",
4252
- "data-part": "search",
4253
- children: /* @__PURE__ */ jsx(Input, {
4254
- size: "sm",
4255
- value: query,
4256
- onValueChange: onQuery,
4257
- placeholder: "Filter…",
4258
- "aria-label": `Filter ${title}`
4259
- })
4260
- }) : null,
4261
- /* @__PURE__ */ jsx("div", {
4262
- "data-scope": "transfer",
4263
- "data-part": "list",
4264
- children: items.length === 0 ? /* @__PURE__ */ jsx("p", {
4265
- "data-scope": "transfer",
4266
- "data-part": "empty",
4267
- children: "Nothing here"
4268
- }) : items.map((item) => {
4269
- const locked = disabled || item.disabled === true;
4270
- return /* @__PURE__ */ jsxs(Checkbox$1.Root, {
4271
- checked: checked.has(item.value),
4272
- disabled: locked,
4273
- onCheckedChange: () => toggle(side, item.value),
4274
- children: [
4275
- /* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph }) }),
4276
- /* @__PURE__ */ jsx(Checkbox$1.Label, {
4277
- "data-part": "label",
4278
- children: item.label
4279
- }),
4280
- /* @__PURE__ */ jsx(Checkbox$1.HiddenInput, {})
4281
- ]
4282
- }, item.value);
4283
- })
4284
- })
4285
- ]
4286
- });
4287
- }
4288
- const items = panelItems(data, false, sourceQuery);
4289
- const targetItems = panelItems(data, true, targetQuery);
4290
- return /* @__PURE__ */ jsxs("div", {
4291
- ...rest,
4292
- "data-scope": "transfer",
4293
- "data-part": "root",
4294
- children: [
4295
- panel("source", titles[0], sourceQuery, setSourceQuery, checkedSource, items),
4296
- /* @__PURE__ */ jsxs("div", {
4297
- "data-scope": "transfer",
4298
- "data-part": "operations",
4299
- children: [/* @__PURE__ */ jsx(Button, {
4300
- variant: "outline",
4301
- size: "sm",
4302
- square: true,
4303
- disabled: checkedSource.size === 0 || disabled,
4304
- "aria-label": "Move right",
4305
- onClick: () => move(true),
4306
- children: arrowGlyph("right")
4307
- }), /* @__PURE__ */ jsx(Button, {
4308
- variant: "outline",
4309
- size: "sm",
4310
- square: true,
4311
- disabled: checkedTarget.size === 0 || disabled,
4312
- "aria-label": "Move left",
4313
- onClick: () => move(false),
4314
- children: arrowGlyph("left")
4315
- })]
4316
- }),
4317
- panel("target", titles[1], targetQuery, setTargetQuery, checkedTarget, targetItems)
4318
- ]
4319
- });
4320
- }
4321
- injectComponentStyle("transfer");
4322
- injectComponentStyle("checkbox");
4323
- //#endregion
4324
- //#region src/components/tree-select/index.tsx
4325
- const chevron = /* @__PURE__ */ jsx("svg", {
4326
- viewBox: "0 0 24 24",
4327
- fill: "none",
4328
- stroke: "currentColor",
4329
- strokeWidth: 2,
4330
- strokeLinecap: "round",
4331
- strokeLinejoin: "round",
4332
- "aria-hidden": "true",
4333
- children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
4334
- });
4335
- const chevronDown = /* @__PURE__ */ jsx("span", {
4336
- "data-part": "chevron",
4337
- "aria-hidden": "true",
4338
- children: chevron
4339
- });
4340
- function TreeSelectRow({ node, indexPath }) {
4341
- return /* @__PURE__ */ jsx(TreeView$1.NodeProvider, {
4342
- node,
4343
- indexPath,
4344
- children: node.children ? /* @__PURE__ */ jsxs(TreeView$1.Branch, { children: [/* @__PURE__ */ jsxs(TreeView$1.BranchControl, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndicator, { children: chevron }), /* @__PURE__ */ jsx(TreeView$1.BranchText, { children: node.label })] }), /* @__PURE__ */ jsxs(TreeView$1.BranchContent, { children: [/* @__PURE__ */ jsx(TreeView$1.BranchIndentGuide, {}), node.children.map((child, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
4345
- node: child,
4346
- indexPath: [...indexPath, index]
4347
- }, child.value))] })] }) : /* @__PURE__ */ jsx(TreeView$1.Item, {
4348
- asChild: true,
4349
- children: /* @__PURE__ */ jsx("span", {
4350
- style: {
4351
- display: "flex",
4352
- inlineSize: "100%"
4353
- },
4354
- children: /* @__PURE__ */ jsx(TreeView$1.ItemText, { children: node.label })
4355
- })
4356
- })
4357
- });
4358
- }
4359
- function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, onValueChange, ...rest }) {
4360
- const [open, setOpen] = useState(false);
4361
- const [query, setQuery] = useState("");
4362
- const filterFns = useFilter({ sensitivity: "base" });
4363
- const collection = useMemo(() => createTreeCollection$1({
4364
- nodeToValue: (node) => node.value,
4365
- nodeToString: (node) => node.label,
4366
- rootNode: {
4367
- value: "ROOT",
4368
- label: "",
4369
- children: data
4370
- }
4371
- }), [data]);
4372
- const filtering = filterable && query.trim().length > 0;
4373
- /** The collection pruned to the matches — each hit keeping its
4374
- * ancestors, so a deep match still reads inside its hierarchy. */
4375
- const visibleCollection = useMemo(() => filtering ? collection.filter((node) => filterFns.contains(node.label, query.trim())) : collection, [
4376
- filtering,
4377
- collection,
4378
- filterFns,
4379
- query
4380
- ]);
4381
- const firstLevel = data.map((node) => node.value);
4382
- const expandedWhileFiltering = useMemo(() => {
4383
- if (!filtering) return void 0;
4384
- const values = [];
4385
- const walk = (nodes) => {
4386
- for (const node of nodes) if (node.children?.length) {
4387
- values.push(node.value);
4388
- walk(node.children);
4389
- }
4390
- };
4391
- walk(visibleCollection.rootNode.children ?? []);
4392
- return values;
4393
- }, [filtering, visibleCollection]);
4394
- let found;
4395
- const walk = (nodes) => {
4396
- for (const node of nodes ?? []) {
4397
- if (node.value === value) found = node.label;
4398
- walk(node.children);
4399
- }
4400
- };
4401
- walk(data);
4402
- const label = found;
4403
- function pick(details) {
4404
- const [selected] = details.selectedValue;
4405
- if (selected == null) return;
4406
- onValueChange?.(selected);
4407
- setOpen(false);
4408
- }
4409
- return /* @__PURE__ */ jsxs(Popover$1.Root, {
4410
- ...rest,
4411
- open,
4412
- onOpenChange: (details) => {
4413
- setOpen(details.open);
4414
- if (!details.open) setQuery("");
4415
- },
4416
- positioning: {
4417
- sameWidth: true,
4418
- placement: "bottom-start"
4419
- },
4420
- children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
4421
- asChild: true,
4422
- disabled,
4423
- children: /* @__PURE__ */ jsxs("button", {
4424
- type: "button",
4425
- "data-scope": "tree-select",
4426
- "data-part": "control",
4427
- "data-open": open ? "" : void 0,
4428
- "data-placeholder": label == null ? "" : void 0,
4429
- disabled,
4430
- children: [label ?? placeholder, chevronDown]
4431
- })
4432
- }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
4433
- "data-scope": "tree-select",
4434
- "data-part": "content",
4435
- children: [filterable ? /* @__PURE__ */ jsx("div", {
4436
- "data-scope": "tree-select",
4437
- "data-part": "search",
4438
- children: /* @__PURE__ */ jsx(Input, {
4439
- size: "sm",
4440
- value: query,
4441
- onValueChange: setQuery,
4442
- placeholder: "Filter…",
4443
- "aria-label": "Filter options"
4444
- })
4445
- }) : null, /* @__PURE__ */ jsx("div", {
4446
- "data-scope": "tree-select",
4447
- "data-part": "body",
4448
- children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
4449
- "data-scope": "tree-select",
4450
- "data-part": "empty",
4451
- children: "Nothing matches"
4452
- }) : /* @__PURE__ */ jsx(TreeView$1.Root, {
4453
- collection: visibleCollection,
4454
- selectionMode: "single",
4455
- selectedValue: value ? [value] : [],
4456
- ...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
4457
- onSelectionChange: pick,
4458
- children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
4459
- node,
4460
- indexPath: [index]
4461
- }, node.value)) })
4462
- })
4463
- })]
4464
- }) }) })]
4465
- });
4466
- }
4467
- injectComponentStyle("tree-select");
4468
- injectComponentStyle("tree-view");
4469
- //#endregion
4470
- //#region src/components/tree-view/index.tsx
4471
- /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
4472
- * selection is pure light on the paper, one hairline plumb line per depth,
4473
- * and branches that swing open on the spring. The API is Ark's own —
4474
- * Root, Label, Tree, NodeProvider, NodeContext, Branch, BranchControl,
4475
- * BranchTrigger, BranchIndicator, BranchText, BranchContent,
4476
- * BranchIndentGuide, Item, ItemText, ItemIndicator, NodeCheckbox,
4477
- * NodeRenameInput, plus createTreeCollection. */
4478
- const TreeView = TreeView$1;
4479
- injectComponentStyle("tree-view");
4480
- //#endregion
4481
- //#region src/components/watermark/index.tsx
4482
- /** Font-relative measures ride the root's own measure; absolute units
4483
- * pass through untouched — the canvas needs a number, the prop may
4484
- * speak in CSS. */
4485
- function toPx(size) {
4486
- const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
4487
- const value = Number.parseFloat(size) || 0;
4488
- if (size.includes("em")) return value * root;
4489
- return value;
4490
- }
4491
- /**
4492
- * The paper bears its seal beneath the content: a canvas draws the
4493
- * text once into a tile (rotated, faint, crisp at the screen's pixel
4494
- * density) and the marks layer repeats it over the children. The seal
4495
- * redraws itself when a prop turns — and it never takes a pointer.
4496
- */
4497
- function Watermark({ content, opacity = .06, rotate = -20, fontSize = "0.875rem", children, ...rest }) {
4498
- const [root, setRoot] = useState(null);
4499
- const [tile, setTile] = useState("");
4500
- useEffect(() => {
4501
- if (!root) return;
4502
- const canvas = document.createElement("canvas");
4503
- const paint = canvas.getContext("2d");
4504
- if (!paint) return;
4505
- const styles = getComputedStyle(root);
4506
- const fontSizePx = toPx(fontSize);
4507
- const font = `${styles.fontWeight} ${fontSizePx}px ${styles.fontFamily}`;
4508
- paint.font = font;
4509
- const textWidth = paint.measureText(content).width;
4510
- const margin = fontSizePx;
4511
- const boxWidth = Math.ceil(textWidth + margin * 2);
4512
- const boxHeight = Math.ceil(fontSizePx + margin * 2);
4513
- const radian = rotate * Math.PI / 180;
4514
- const cos = Math.cos(radian);
4515
- const sin = Math.sin(radian);
4516
- const width = Math.ceil(Math.abs(boxWidth * cos) + Math.abs(boxHeight * sin));
4517
- const height = Math.ceil(Math.abs(boxWidth * sin) + Math.abs(boxHeight * cos));
4518
- const dpr = window.devicePixelRatio || 1;
4519
- canvas.width = width * dpr;
4520
- canvas.height = height * dpr;
4521
- paint.scale(dpr, dpr);
4522
- paint.translate(width / 2, height / 2);
4523
- paint.rotate(radian);
4524
- paint.globalAlpha = opacity;
4525
- paint.font = font;
4526
- paint.textAlign = "center";
4527
- paint.textBaseline = "middle";
4528
- paint.fillStyle = styles.getPropertyValue("--bs-color-text-tertiary").trim() || styles.color;
4529
- paint.fillText(content, 0, 0);
4530
- setTile(`url(${canvas.toDataURL()})`);
4531
- }, [
4532
- root,
4533
- content,
4534
- opacity,
4535
- rotate,
4536
- fontSize
4537
- ]);
4538
- return /* @__PURE__ */ jsxs("div", {
4539
- ...rest,
4540
- ref: setRoot,
4541
- "data-scope": "watermark",
4542
- "data-part": "root",
4543
- children: [/* @__PURE__ */ jsx("div", {
4544
- "data-scope": "watermark",
4545
- "data-part": "content",
4546
- children
4547
- }), /* @__PURE__ */ jsx("div", {
4548
- "data-scope": "watermark",
4549
- "data-part": "marks",
4550
- "aria-hidden": "true",
4551
- style: { backgroundImage: tile }
4552
- })]
4553
- });
4554
- }
4555
- injectComponentStyle("watermark");
4556
- //#endregion
4557
- export { Accordion, Action, Action as AiAction, Affix, Ai, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, DescriptionsRoot, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_CONTEXT, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };
129
+ export { Accordion, Action, Action as AiAction, Affix, Ai, Attachment as AiAttachment, Attachment, Attachments as AiAttachments, Attachments, Message as AiMessage, Message, PromptInput as AiPromptInput, PromptInput, Reasoning as AiReasoning, Reasoning, Response as AiResponse, Response, Source as AiSource, Source, Sources as AiSources, Sources, Suggestion as AiSuggestion, Suggestion, Tool as AiTool, Tool, Alert, AngleSlider, AspectRatio, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, Banner, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, CascadeSelect, Checkbox, CheckboxGroup, Chip, ClientOnly, Clipboard, Collapsible, ColorPicker, Combobox, Command, Comment, ConfigProvider, Container, DataTable, DateInput, DatePicker, Descriptions, DescriptionsRoot, Dialog, DownloadTrigger, Drawer, DynamicInput, Editable, Ellipsis, Empty, FLOAT_BUTTON_CONTEXT, Field, Fieldset, FileUpload, FlexRender, FloatButton, FloatingPanel, FocusTrap, Form, FormField, Format, Frame, Grid, Highlight, HoverCard, Icon, Image, ImageCropper, ImageViewer, Input, InputGroup, JsonTreeView, Kbd, Layout, Link, List, Listbox, Marquee, Masonry, Mentions, MentionsVessel, Menu, Menubar, Meter, NavigationMenu, NumberInput, PageHeader, Pagination, PasswordInput, PinInput, Popconfirm, Popover, Presence, PresenceProvider, Progress, ProgressGroup, QrCode, RadioGroup, RatingGroup, ScrollArea, SegmentGroup, Select, Separator, SignaturePad, Skeleton, Slider, Spinner, SplitButton, Splitter, Stack, Stat, Steps, Swap, Switch, Tabs, TagsInput, Textarea, Timeline, Timer, Toast, Toaster, Toc, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TreeSelect, TreeView, Typography, Watermark, createColumnHelper, createFileTreeCollection, createGridCollection, createToaster, createTreeCollection, useAsyncList, useConfig, useDownload, useField, useForm, useListCollection, useListSelection, useMentions, usePresence, usePresenceContext, useTour };