@spatika/react 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (406) hide show
  1. package/README.md +72 -0
  2. package/dist/composites/ActionBar.d.ts +7 -0
  3. package/dist/composites/ActionBar.d.ts.map +1 -0
  4. package/dist/composites/ActionBar.js +5 -0
  5. package/dist/composites/AmountInput.d.ts +10 -0
  6. package/dist/composites/AmountInput.d.ts.map +1 -0
  7. package/dist/composites/AmountInput.js +7 -0
  8. package/dist/composites/AppHeader.d.ts +25 -0
  9. package/dist/composites/AppHeader.d.ts.map +1 -0
  10. package/dist/composites/AppHeader.js +13 -0
  11. package/dist/composites/AppSidebar.d.ts +30 -0
  12. package/dist/composites/AppSidebar.d.ts.map +1 -0
  13. package/dist/composites/AppSidebar.js +15 -0
  14. package/dist/composites/BottomSheet.d.ts +36 -0
  15. package/dist/composites/BottomSheet.d.ts.map +1 -0
  16. package/dist/composites/BottomSheet.js +37 -0
  17. package/dist/composites/Breadcrumb.d.ts +10 -0
  18. package/dist/composites/Breadcrumb.d.ts.map +1 -0
  19. package/dist/composites/Breadcrumb.js +10 -0
  20. package/dist/composites/Callout.d.ts +8 -0
  21. package/dist/composites/Callout.d.ts.map +1 -0
  22. package/dist/composites/Callout.js +5 -0
  23. package/dist/composites/Card.d.ts +31 -0
  24. package/dist/composites/Card.d.ts.map +1 -0
  25. package/dist/composites/Card.js +33 -0
  26. package/dist/composites/Chip.d.ts +13 -0
  27. package/dist/composites/Chip.d.ts.map +1 -0
  28. package/dist/composites/Chip.js +59 -0
  29. package/dist/composites/ChipGroup.d.ts +23 -0
  30. package/dist/composites/ChipGroup.d.ts.map +1 -0
  31. package/dist/composites/ChipGroup.js +27 -0
  32. package/dist/composites/CommandSearchField.d.ts +27 -0
  33. package/dist/composites/CommandSearchField.d.ts.map +1 -0
  34. package/dist/composites/CommandSearchField.js +17 -0
  35. package/dist/composites/CoverHero.d.ts +51 -0
  36. package/dist/composites/CoverHero.d.ts.map +1 -0
  37. package/dist/composites/CoverHero.js +71 -0
  38. package/dist/composites/CoverPattern.d.ts +12 -0
  39. package/dist/composites/CoverPattern.d.ts.map +1 -0
  40. package/dist/composites/CoverPattern.js +14 -0
  41. package/dist/composites/DataTableToolbar.d.ts +13 -0
  42. package/dist/composites/DataTableToolbar.d.ts.map +1 -0
  43. package/dist/composites/DataTableToolbar.js +7 -0
  44. package/dist/composites/DividerLabel.d.ts +5 -0
  45. package/dist/composites/DividerLabel.d.ts.map +1 -0
  46. package/dist/composites/DividerLabel.js +5 -0
  47. package/dist/composites/EmptyState.d.ts +16 -0
  48. package/dist/composites/EmptyState.d.ts.map +1 -0
  49. package/dist/composites/EmptyState.js +10 -0
  50. package/dist/composites/EntityCard.d.ts +31 -0
  51. package/dist/composites/EntityCard.d.ts.map +1 -0
  52. package/dist/composites/EntityCard.js +21 -0
  53. package/dist/composites/EntityMediaCard.d.ts +25 -0
  54. package/dist/composites/EntityMediaCard.d.ts.map +1 -0
  55. package/dist/composites/EntityMediaCard.js +17 -0
  56. package/dist/composites/FilterSheet.d.ts +34 -0
  57. package/dist/composites/FilterSheet.d.ts.map +1 -0
  58. package/dist/composites/FilterSheet.js +36 -0
  59. package/dist/composites/FloatingPageChrome.d.ts +90 -0
  60. package/dist/composites/FloatingPageChrome.d.ts.map +1 -0
  61. package/dist/composites/FloatingPageChrome.js +67 -0
  62. package/dist/composites/FormField.d.ts +15 -0
  63. package/dist/composites/FormField.d.ts.map +1 -0
  64. package/dist/composites/FormField.js +9 -0
  65. package/dist/composites/GlassCard.d.ts +13 -0
  66. package/dist/composites/GlassCard.d.ts.map +1 -0
  67. package/dist/composites/GlassCard.js +32 -0
  68. package/dist/composites/HeaderIconButton.d.ts +13 -0
  69. package/dist/composites/HeaderIconButton.d.ts.map +1 -0
  70. package/dist/composites/HeaderIconButton.js +12 -0
  71. package/dist/composites/ListRow.d.ts +9 -0
  72. package/dist/composites/ListRow.d.ts.map +1 -0
  73. package/dist/composites/ListRow.js +6 -0
  74. package/dist/composites/MediaEntryCard.d.ts +25 -0
  75. package/dist/composites/MediaEntryCard.d.ts.map +1 -0
  76. package/dist/composites/MediaEntryCard.js +10 -0
  77. package/dist/composites/MobileTabBar.d.ts +33 -0
  78. package/dist/composites/MobileTabBar.d.ts.map +1 -0
  79. package/dist/composites/MobileTabBar.js +19 -0
  80. package/dist/composites/NotificationBell.d.ts +28 -0
  81. package/dist/composites/NotificationBell.d.ts.map +1 -0
  82. package/dist/composites/NotificationBell.js +25 -0
  83. package/dist/composites/PageHeader.d.ts +11 -0
  84. package/dist/composites/PageHeader.d.ts.map +1 -0
  85. package/dist/composites/PageHeader.js +6 -0
  86. package/dist/composites/PageShell.d.ts +12 -0
  87. package/dist/composites/PageShell.d.ts.map +1 -0
  88. package/dist/composites/PageShell.js +8 -0
  89. package/dist/composites/PageStickyHeader.d.ts +33 -0
  90. package/dist/composites/PageStickyHeader.d.ts.map +1 -0
  91. package/dist/composites/PageStickyHeader.js +19 -0
  92. package/dist/composites/Pagination.d.ts +7 -0
  93. package/dist/composites/Pagination.d.ts.map +1 -0
  94. package/dist/composites/Pagination.js +6 -0
  95. package/dist/composites/PhotoViewer.d.ts +18 -0
  96. package/dist/composites/PhotoViewer.d.ts.map +1 -0
  97. package/dist/composites/PhotoViewer.js +37 -0
  98. package/dist/composites/PinPad.d.ts +29 -0
  99. package/dist/composites/PinPad.d.ts.map +1 -0
  100. package/dist/composites/PinPad.js +58 -0
  101. package/dist/composites/ProfileHero.d.ts +34 -0
  102. package/dist/composites/ProfileHero.d.ts.map +1 -0
  103. package/dist/composites/ProfileHero.js +21 -0
  104. package/dist/composites/QuickFilterRail.d.ts +25 -0
  105. package/dist/composites/QuickFilterRail.d.ts.map +1 -0
  106. package/dist/composites/QuickFilterRail.js +18 -0
  107. package/dist/composites/QuickSettings.d.ts +27 -0
  108. package/dist/composites/QuickSettings.d.ts.map +1 -0
  109. package/dist/composites/QuickSettings.js +18 -0
  110. package/dist/composites/RichTextEditor.d.ts +13 -0
  111. package/dist/composites/RichTextEditor.d.ts.map +1 -0
  112. package/dist/composites/RichTextEditor.js +23 -0
  113. package/dist/composites/SearchField.d.ts +8 -0
  114. package/dist/composites/SearchField.d.ts.map +1 -0
  115. package/dist/composites/SearchField.js +8 -0
  116. package/dist/composites/SectionPanel.d.ts +16 -0
  117. package/dist/composites/SectionPanel.d.ts.map +1 -0
  118. package/dist/composites/SectionPanel.js +8 -0
  119. package/dist/composites/SegmentedControl.d.ts +17 -0
  120. package/dist/composites/SegmentedControl.d.ts.map +1 -0
  121. package/dist/composites/SegmentedControl.js +11 -0
  122. package/dist/composites/StatCard.d.ts +11 -0
  123. package/dist/composites/StatCard.d.ts.map +1 -0
  124. package/dist/composites/StatCard.js +6 -0
  125. package/dist/composites/StatusDot.d.ts +11 -0
  126. package/dist/composites/StatusDot.d.ts.map +1 -0
  127. package/dist/composites/StatusDot.js +23 -0
  128. package/dist/composites/SurfaceCard.d.ts +12 -0
  129. package/dist/composites/SurfaceCard.d.ts.map +1 -0
  130. package/dist/composites/SurfaceCard.js +24 -0
  131. package/dist/composites/Timeline.d.ts +19 -0
  132. package/dist/composites/Timeline.d.ts.map +1 -0
  133. package/dist/composites/Timeline.js +12 -0
  134. package/dist/composites/Toast.d.ts +26 -0
  135. package/dist/composites/Toast.d.ts.map +1 -0
  136. package/dist/composites/Toast.js +49 -0
  137. package/dist/composites/Toolbar.d.ts +6 -0
  138. package/dist/composites/Toolbar.d.ts.map +1 -0
  139. package/dist/composites/Toolbar.js +5 -0
  140. package/dist/composites/ViewFiltersPanel.d.ts +21 -0
  141. package/dist/composites/ViewFiltersPanel.d.ts.map +1 -0
  142. package/dist/composites/ViewFiltersPanel.js +11 -0
  143. package/dist/index.d.ts +96 -0
  144. package/dist/index.d.ts.map +1 -0
  145. package/dist/index.js +95 -0
  146. package/dist/lib/animations.d.ts +62 -0
  147. package/dist/lib/animations.d.ts.map +1 -0
  148. package/dist/lib/animations.js +37 -0
  149. package/dist/lib/avatar-utils.d.ts +10 -0
  150. package/dist/lib/avatar-utils.d.ts.map +1 -0
  151. package/dist/lib/avatar-utils.js +49 -0
  152. package/dist/lib/chips.d.ts +10 -0
  153. package/dist/lib/chips.d.ts.map +1 -0
  154. package/dist/lib/chips.js +30 -0
  155. package/dist/lib/cn.d.ts +4 -0
  156. package/dist/lib/cn.d.ts.map +1 -0
  157. package/dist/lib/cn.js +6 -0
  158. package/dist/lib/compose-refs.d.ts +6 -0
  159. package/dist/lib/compose-refs.d.ts.map +1 -0
  160. package/dist/lib/compose-refs.js +17 -0
  161. package/dist/lib/cover-chrome.d.ts +9 -0
  162. package/dist/lib/cover-chrome.d.ts.map +1 -0
  163. package/dist/lib/cover-chrome.js +23 -0
  164. package/dist/lib/cover-pattern.d.ts +75 -0
  165. package/dist/lib/cover-pattern.d.ts.map +1 -0
  166. package/dist/lib/cover-pattern.js +135 -0
  167. package/dist/lib/overlay-stack.d.ts +23 -0
  168. package/dist/lib/overlay-stack.d.ts.map +1 -0
  169. package/dist/lib/overlay-stack.js +37 -0
  170. package/dist/lib/portal.d.ts +12 -0
  171. package/dist/lib/portal.d.ts.map +1 -0
  172. package/dist/lib/portal.js +12 -0
  173. package/dist/lib/slot.d.ts +12 -0
  174. package/dist/lib/slot.d.ts.map +1 -0
  175. package/dist/lib/slot.js +55 -0
  176. package/dist/lib/surfaces.d.ts +14 -0
  177. package/dist/lib/surfaces.d.ts.map +1 -0
  178. package/dist/lib/surfaces.js +18 -0
  179. package/dist/lib/themes.d.ts +16 -0
  180. package/dist/lib/themes.d.ts.map +1 -0
  181. package/dist/lib/themes.js +53 -0
  182. package/dist/lib/typography.d.ts +17 -0
  183. package/dist/lib/typography.d.ts.map +1 -0
  184. package/dist/lib/typography.js +16 -0
  185. package/dist/lib/use-controllable-state.d.ts +12 -0
  186. package/dist/lib/use-controllable-state.d.ts.map +1 -0
  187. package/dist/lib/use-controllable-state.js +20 -0
  188. package/dist/lib/use-cover-chrome-bleed.d.ts +9 -0
  189. package/dist/lib/use-cover-chrome-bleed.d.ts.map +1 -0
  190. package/dist/lib/use-cover-chrome-bleed.js +28 -0
  191. package/dist/lib/use-dismissable.d.ts +13 -0
  192. package/dist/lib/use-dismissable.d.ts.map +1 -0
  193. package/dist/lib/use-dismissable.js +33 -0
  194. package/dist/lib/use-floating-position.d.ts +27 -0
  195. package/dist/lib/use-floating-position.d.ts.map +1 -0
  196. package/dist/lib/use-floating-position.js +115 -0
  197. package/dist/lib/use-focus-trap.d.ts +7 -0
  198. package/dist/lib/use-focus-trap.d.ts.map +1 -0
  199. package/dist/lib/use-focus-trap.js +61 -0
  200. package/dist/lib/use-media-query.d.ts +5 -0
  201. package/dist/lib/use-media-query.d.ts.map +1 -0
  202. package/dist/lib/use-media-query.js +19 -0
  203. package/dist/primitives/Accordion.d.ts +24 -0
  204. package/dist/primitives/Accordion.d.ts.map +1 -0
  205. package/dist/primitives/Accordion.js +37 -0
  206. package/dist/primitives/Alert.d.ts +10 -0
  207. package/dist/primitives/Alert.d.ts.map +1 -0
  208. package/dist/primitives/Alert.js +25 -0
  209. package/dist/primitives/AlertDialog.d.ts +33 -0
  210. package/dist/primitives/AlertDialog.d.ts.map +1 -0
  211. package/dist/primitives/AlertDialog.js +96 -0
  212. package/dist/primitives/Avatar.d.ts +15 -0
  213. package/dist/primitives/Avatar.d.ts.map +1 -0
  214. package/dist/primitives/Avatar.js +52 -0
  215. package/dist/primitives/Badge.d.ts +12 -0
  216. package/dist/primitives/Badge.d.ts.map +1 -0
  217. package/dist/primitives/Badge.js +27 -0
  218. package/dist/primitives/Button.d.ts +14 -0
  219. package/dist/primitives/Button.d.ts.map +1 -0
  220. package/dist/primitives/Button.js +37 -0
  221. package/dist/primitives/Checkbox.d.ts +9 -0
  222. package/dist/primitives/Checkbox.d.ts.map +1 -0
  223. package/dist/primitives/Checkbox.js +22 -0
  224. package/dist/primitives/Command.d.ts +17 -0
  225. package/dist/primitives/Command.d.ts.map +1 -0
  226. package/dist/primitives/Command.js +33 -0
  227. package/dist/primitives/Dialog.d.ts +34 -0
  228. package/dist/primitives/Dialog.d.ts.map +1 -0
  229. package/dist/primitives/Dialog.js +96 -0
  230. package/dist/primitives/DropdownMenu.d.ts +65 -0
  231. package/dist/primitives/DropdownMenu.d.ts.map +1 -0
  232. package/dist/primitives/DropdownMenu.js +196 -0
  233. package/dist/primitives/Input.d.ts +4 -0
  234. package/dist/primitives/Input.d.ts.map +1 -0
  235. package/dist/primitives/Input.js +6 -0
  236. package/dist/primitives/Kbd.d.ts +4 -0
  237. package/dist/primitives/Kbd.d.ts.map +1 -0
  238. package/dist/primitives/Kbd.js +6 -0
  239. package/dist/primitives/Label.d.ts +4 -0
  240. package/dist/primitives/Label.d.ts.map +1 -0
  241. package/dist/primitives/Label.js +6 -0
  242. package/dist/primitives/NativeSelect.d.ts +7 -0
  243. package/dist/primitives/NativeSelect.d.ts.map +1 -0
  244. package/dist/primitives/NativeSelect.js +10 -0
  245. package/dist/primitives/Popover.d.ts +29 -0
  246. package/dist/primitives/Popover.d.ts.map +1 -0
  247. package/dist/primitives/Popover.js +95 -0
  248. package/dist/primitives/Progress.d.ts +8 -0
  249. package/dist/primitives/Progress.d.ts.map +1 -0
  250. package/dist/primitives/Progress.js +7 -0
  251. package/dist/primitives/RadioGroup.d.ts +13 -0
  252. package/dist/primitives/RadioGroup.d.ts.map +1 -0
  253. package/dist/primitives/RadioGroup.js +33 -0
  254. package/dist/primitives/Select.d.ts +33 -0
  255. package/dist/primitives/Select.d.ts.map +1 -0
  256. package/dist/primitives/Select.js +178 -0
  257. package/dist/primitives/Separator.d.ts +7 -0
  258. package/dist/primitives/Separator.d.ts.map +1 -0
  259. package/dist/primitives/Separator.js +6 -0
  260. package/dist/primitives/Sheet.d.ts +28 -0
  261. package/dist/primitives/Sheet.d.ts.map +1 -0
  262. package/dist/primitives/Sheet.js +96 -0
  263. package/dist/primitives/Skeleton.d.ts +4 -0
  264. package/dist/primitives/Skeleton.d.ts.map +1 -0
  265. package/dist/primitives/Skeleton.js +6 -0
  266. package/dist/primitives/Slider.d.ts +12 -0
  267. package/dist/primitives/Slider.d.ts.map +1 -0
  268. package/dist/primitives/Slider.js +23 -0
  269. package/dist/primitives/Spinner.d.ts +6 -0
  270. package/dist/primitives/Spinner.d.ts.map +1 -0
  271. package/dist/primitives/Spinner.js +7 -0
  272. package/dist/primitives/StarRating.d.ts +10 -0
  273. package/dist/primitives/StarRating.d.ts.map +1 -0
  274. package/dist/primitives/StarRating.js +11 -0
  275. package/dist/primitives/Switch.d.ts +8 -0
  276. package/dist/primitives/Switch.d.ts.map +1 -0
  277. package/dist/primitives/Switch.js +20 -0
  278. package/dist/primitives/Table.d.ts +13 -0
  279. package/dist/primitives/Table.d.ts.map +1 -0
  280. package/dist/primitives/Table.js +20 -0
  281. package/dist/primitives/Tabs.d.ts +17 -0
  282. package/dist/primitives/Tabs.d.ts.map +1 -0
  283. package/dist/primitives/Tabs.js +30 -0
  284. package/dist/primitives/Textarea.d.ts +4 -0
  285. package/dist/primitives/Textarea.d.ts.map +1 -0
  286. package/dist/primitives/Textarea.js +6 -0
  287. package/dist/primitives/Tooltip.d.ts +31 -0
  288. package/dist/primitives/Tooltip.d.ts.map +1 -0
  289. package/dist/primitives/Tooltip.js +94 -0
  290. package/dist/theme/OriginThemeProvider.d.ts +31 -0
  291. package/dist/theme/OriginThemeProvider.d.ts.map +1 -0
  292. package/dist/theme/OriginThemeProvider.js +37 -0
  293. package/dist/theme/SpatikaThemeProvider.d.ts +36 -0
  294. package/dist/theme/SpatikaThemeProvider.d.ts.map +1 -0
  295. package/dist/theme/SpatikaThemeProvider.js +38 -0
  296. package/package.json +58 -0
  297. package/src/composites/ActionBar.tsx +25 -0
  298. package/src/composites/AmountInput.tsx +40 -0
  299. package/src/composites/AppHeader.tsx +88 -0
  300. package/src/composites/AppSidebar.tsx +120 -0
  301. package/src/composites/BottomSheet.tsx +179 -0
  302. package/src/composites/Breadcrumb.tsx +42 -0
  303. package/src/composites/Callout.tsx +22 -0
  304. package/src/composites/Card.tsx +119 -0
  305. package/src/composites/Chip.tsx +87 -0
  306. package/src/composites/ChipGroup.component.test.tsx +31 -0
  307. package/src/composites/ChipGroup.test.ts +16 -0
  308. package/src/composites/ChipGroup.tsx +86 -0
  309. package/src/composites/CommandSearchField.tsx +124 -0
  310. package/src/composites/CoverHero.tsx +359 -0
  311. package/src/composites/CoverPattern.tsx +90 -0
  312. package/src/composites/DataTableToolbar.tsx +48 -0
  313. package/src/composites/DividerLabel.tsx +22 -0
  314. package/src/composites/EmptyState.tsx +55 -0
  315. package/src/composites/EntityCard.tsx +100 -0
  316. package/src/composites/EntityMediaCard.tsx +118 -0
  317. package/src/composites/FilterSheet.tsx +178 -0
  318. package/src/composites/FloatingPageChrome.tsx +294 -0
  319. package/src/composites/FormField.tsx +44 -0
  320. package/src/composites/GlassCard.tsx +47 -0
  321. package/src/composites/HeaderIconButton.tsx +49 -0
  322. package/src/composites/ListRow.tsx +29 -0
  323. package/src/composites/MediaEntryCard.tsx +95 -0
  324. package/src/composites/MobileTabBar.tsx +130 -0
  325. package/src/composites/NotificationBell.tsx +164 -0
  326. package/src/composites/PageHeader.tsx +27 -0
  327. package/src/composites/PageShell.tsx +20 -0
  328. package/src/composites/PageStickyHeader.tsx +157 -0
  329. package/src/composites/Pagination.tsx +41 -0
  330. package/src/composites/PhotoViewer.tsx +142 -0
  331. package/src/composites/PinPad.tsx +163 -0
  332. package/src/composites/ProfileHero.tsx +163 -0
  333. package/src/composites/QuickFilterRail.tsx +92 -0
  334. package/src/composites/QuickSettings.tsx +120 -0
  335. package/src/composites/RichTextEditor.tsx +103 -0
  336. package/src/composites/SearchField.tsx +38 -0
  337. package/src/composites/SectionPanel.tsx +59 -0
  338. package/src/composites/SegmentedControl.tsx +62 -0
  339. package/src/composites/StatCard.tsx +26 -0
  340. package/src/composites/StatusDot.tsx +40 -0
  341. package/src/composites/SurfaceCard.tsx +44 -0
  342. package/src/composites/Timeline.tsx +70 -0
  343. package/src/composites/Toast.tsx +135 -0
  344. package/src/composites/Toolbar.tsx +19 -0
  345. package/src/composites/ViewFiltersPanel.tsx +82 -0
  346. package/src/composites/chrome.test.tsx +170 -0
  347. package/src/composites/smoke.test.tsx +49 -0
  348. package/src/index.ts +355 -0
  349. package/src/lib/animations.ts +47 -0
  350. package/src/lib/avatar-utils.ts +52 -0
  351. package/src/lib/chips.ts +58 -0
  352. package/src/lib/cn.test.ts +16 -0
  353. package/src/lib/cn.ts +7 -0
  354. package/src/lib/compose-refs.ts +21 -0
  355. package/src/lib/cover-chrome.ts +31 -0
  356. package/src/lib/cover-pattern.ts +242 -0
  357. package/src/lib/overlay-stack.ts +44 -0
  358. package/src/lib/portal.tsx +21 -0
  359. package/src/lib/slot.tsx +69 -0
  360. package/src/lib/surfaces.ts +57 -0
  361. package/src/lib/themes.test.ts +73 -0
  362. package/src/lib/themes.ts +59 -0
  363. package/src/lib/tokens.test.ts +52 -0
  364. package/src/lib/typography.ts +27 -0
  365. package/src/lib/use-controllable-state.ts +38 -0
  366. package/src/lib/use-cover-chrome-bleed.ts +33 -0
  367. package/src/lib/use-dismissable.ts +49 -0
  368. package/src/lib/use-floating-position.ts +168 -0
  369. package/src/lib/use-focus-trap.ts +73 -0
  370. package/src/lib/use-media-query.ts +22 -0
  371. package/src/primitives/Accordion.tsx +114 -0
  372. package/src/primitives/Alert.tsx +57 -0
  373. package/src/primitives/AlertDialog.tsx +270 -0
  374. package/src/primitives/Avatar.tsx +140 -0
  375. package/src/primitives/Badge.test.tsx +15 -0
  376. package/src/primitives/Badge.tsx +43 -0
  377. package/src/primitives/Button.test.tsx +37 -0
  378. package/src/primitives/Button.tsx +58 -0
  379. package/src/primitives/Checkbox.tsx +75 -0
  380. package/src/primitives/Command.tsx +175 -0
  381. package/src/primitives/Dialog.tsx +241 -0
  382. package/src/primitives/DropdownMenu.tsx +552 -0
  383. package/src/primitives/Input.test.tsx +22 -0
  384. package/src/primitives/Input.tsx +22 -0
  385. package/src/primitives/Kbd.tsx +17 -0
  386. package/src/primitives/Label.tsx +20 -0
  387. package/src/primitives/NativeSelect.tsx +22 -0
  388. package/src/primitives/Popover.tsx +209 -0
  389. package/src/primitives/Progress.tsx +31 -0
  390. package/src/primitives/RadioGroup.tsx +116 -0
  391. package/src/primitives/Select.tsx +409 -0
  392. package/src/primitives/Separator.tsx +30 -0
  393. package/src/primitives/Sheet.tsx +265 -0
  394. package/src/primitives/Skeleton.tsx +16 -0
  395. package/src/primitives/Slider.tsx +97 -0
  396. package/src/primitives/Spinner.tsx +21 -0
  397. package/src/primitives/StarRating.tsx +53 -0
  398. package/src/primitives/Switch.tsx +68 -0
  399. package/src/primitives/Table.tsx +134 -0
  400. package/src/primitives/Tabs.tsx +97 -0
  401. package/src/primitives/Textarea.tsx +20 -0
  402. package/src/primitives/Tooltip.tsx +193 -0
  403. package/src/primitives/smoke.test.tsx +34 -0
  404. package/src/test/setup.ts +1 -0
  405. package/src/theme/SpatikaThemeProvider.test.tsx +82 -0
  406. package/src/theme/SpatikaThemeProvider.tsx +112 -0
package/README.md ADDED
@@ -0,0 +1,72 @@
1
+ # @spatika/react
2
+
3
+ React primitives and composites for Spatika — glass surfaces, four themes, and shared tokens.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @spatika/react @spatika/tokens
9
+ ```
10
+
11
+ Peer dependencies: `react` and `react-dom` (^18 or ^19).
12
+
13
+ ## Quick start
14
+
15
+ ```tsx
16
+ import "@spatika/tokens/styles.css";
17
+ import { AppHeader, AppSidebar, Button, Card } from "@spatika/react";
18
+
19
+ export function App() {
20
+ return (
21
+ <>
22
+ <AppHeader title="Acme" />
23
+ <Button>Continue</Button>
24
+ </>
25
+ );
26
+ }
27
+ ```
28
+
29
+ ## Themes
30
+
31
+ Set a theme class on `<html>`: default Mukta, `neelam`, `usha`, or `sandhya`.
32
+
33
+ ```tsx
34
+ import { applyTheme, SpatikaThemeProvider } from "@spatika/react";
35
+
36
+ applyTheme("neelam");
37
+
38
+ // or wrap the app
39
+ <SpatikaThemeProvider defaultTheme="neelam">
40
+ <App />
41
+ </SpatikaThemeProvider>
42
+ ```
43
+
44
+ Button sizes include `touch` / `icon-touch` (≥44px) for mobile-first chrome.
45
+
46
+ ## What's included
47
+
48
+ - **Primitives** — Button, Input, Select, Tabs, Table, Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Command, Tooltip, and more
49
+ - **Composites** — AppHeader, AppSidebar, Card, EntityCard, FloatingPageChrome, CoverHero, FilterSheet, MobileTabBar, CommandSearchField, NotificationBell, Timeline, AmountInput, SegmentedControl, Toaster, media cards, PIN/lock chrome
50
+
51
+ ## Tailwind tip
52
+
53
+ Prefer `@spatika/tokens/styles.css`. If you compile Tailwind in your app and only import token partials, also scan kit sources:
54
+
55
+ ```css
56
+ @import "tailwindcss";
57
+ @source "../node_modules/@spatika/react/src/**/*.{ts,tsx}";
58
+ ```
59
+
60
+ ## Docs
61
+
62
+ Run the Spatika documentation site from the monorepo root:
63
+
64
+ ```bash
65
+ npm run dev
66
+ ```
67
+
68
+ Or browse packages on npm: [spatika scope](https://www.npmjs.com/org/spatika)
69
+
70
+ ## License
71
+
72
+ MIT
package/dist/composites/ActionBar.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { ReactNode } from "react";
2
+ export declare function ActionBar({ children, className, sticky, }: {
3
+ children: ReactNode;
4
+ className?: string;
5
+ sticky?: boolean;
6
+ }): import("react").JSX.Element;
7
+ //# sourceMappingURL=ActionBar.d.ts.map
package/dist/composites/ActionBar.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/composites/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,MAAc,GACf,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,+BAaA"}
package/dist/composites/ActionBar.js ADDED
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "../lib/cn";
3
+ export function ActionBar({ children, className, sticky = false, }) {
4
+ return (_jsx("div", { "data-slot": "action-bar", className: cn("glass-header flex flex-wrap items-center justify-end gap-2 border-t border-border/40 px-4 py-3", sticky && "sticky bottom-0 z-20", className), children: children }));
5
+ }
package/dist/composites/AmountInput.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { ComponentProps } from "react";
2
+ export type AmountInputProps = Omit<ComponentProps<"input">, "type" | "value" | "onChange"> & {
3
+ value: string;
4
+ onChange: (value: string) => void;
5
+ currency?: string;
6
+ containerClassName?: string;
7
+ };
8
+ /** Currency-prefixed amount field for finance forms. */
9
+ export declare function AmountInput({ value, onChange, currency, className, containerClassName, ...props }: AmountInputProps): import("react").JSX.Element;
10
+ //# sourceMappingURL=AmountInput.d.ts.map
package/dist/composites/AmountInput.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../src/composites/AmountInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5F,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wDAAwD;AACxD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAoBlB"}
package/dist/composites/AmountInput.js ADDED
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cn } from "../lib/cn";
3
+ import { Input } from "../primitives/Input";
4
+ /** Currency-prefixed amount field for finance forms. */
5
+ export function AmountInput({ value, onChange, currency = "INR", className, containerClassName, ...props }) {
6
+ return (_jsxs("div", { "data-slot": "amount-input", className: cn("relative w-full", containerClassName), children: [_jsx("span", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-xs font-black uppercase tracking-wider text-muted-foreground", children: currency }), _jsx(Input, { type: "text", inputMode: "decimal", autoComplete: "off", value: value, onChange: (e) => onChange(e.target.value.replace(/[^0-9.,-]/g, "")), className: cn("h-11 py-0 pl-14 font-bold tabular-nums leading-none", className), ...props })] }));
7
+ }
package/dist/composites/AppHeader.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import type { ReactNode } from "react";
2
+ import { appChromeActionClusterClass } from "./FloatingPageChrome";
3
+ export type AppHeaderProps = {
4
+ brand?: ReactNode;
5
+ title?: string;
6
+ /** Center / search slot */
7
+ children?: ReactNode;
8
+ /** Right-side actions */
9
+ actions?: ReactNode;
10
+ onMenuClick?: () => void;
11
+ showMenuButton?: boolean;
12
+ className?: string;
13
+ sticky?: boolean;
14
+ /**
15
+ * `sticky` — in-flow glass bar.
16
+ * `chrome` — fixed safe-area app chrome (journalD RootLayout).
17
+ */
18
+ variant?: "sticky" | "chrome";
19
+ };
20
+ /**
21
+ * Top application chrome — glass header with brand, optional hamburger, actions.
22
+ */
23
+ export declare function AppHeader({ brand, title, children, actions, onMenuClick, showMenuButton, className, sticky, variant, }: AppHeaderProps): import("react").JSX.Element;
24
+ export { appChromeActionClusterClass };
25
+ //# sourceMappingURL=AppHeader.d.ts.map
package/dist/composites/AppHeader.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/composites/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAEnE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,cAAsB,EACtB,SAAS,EACT,MAAa,EACb,OAAkB,GACnB,EAAE,cAAc,+BAgDhB;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}
package/dist/composites/AppHeader.js ADDED
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Menu } from "lucide-react";
3
+ import { cn } from "../lib/cn";
4
+ import { Button } from "../primitives/Button";
5
+ import { appChromeActionClusterClass } from "./FloatingPageChrome";
6
+ /**
7
+ * Top application chrome — glass header with brand, optional hamburger, actions.
8
+ */
9
+ export function AppHeader({ brand, title, children, actions, onMenuClick, showMenuButton = false, className, sticky = true, variant = "sticky", }) {
10
+ const isChrome = variant === "chrome";
11
+ return (_jsxs("header", { "data-slot": "app-header", className: cn("glass-header z-40 border-b border-border/50", isChrome ? "app-chrome-header" : sticky && "sticky top-0", className), children: [_jsxs("div", { className: cn("flex items-center gap-3 px-3 sm:px-4", isChrome ? "h-full" : "h-full min-h-14"), children: [showMenuButton ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Open menu", onClick: onMenuClick, className: "lg:hidden", children: _jsx(Menu, { className: "size-5" }) })) : null, _jsxs("div", { className: "flex min-w-0 items-center gap-2", "data-app-wordmark": true, children: [brand, title ? (_jsx("span", { className: "truncate text-sm font-black tracking-tight sm:text-base", children: title })) : null] }), _jsx("div", { className: "mx-auto hidden min-w-0 flex-1 justify-center md:flex", "data-global-search-shell": true, children: children }), _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2", "data-app-chrome-actions": true, children: actions })] }), children ? (_jsx("div", { className: "border-t border-border/30 px-3 py-2 md:hidden", "data-global-search-shell": true, children: children })) : null] }));
12
+ }
13
+ export { appChromeActionClusterClass };
package/dist/composites/AppSidebar.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import type { LucideIcon } from "lucide-react";
2
+ import type { ReactNode } from "react";
3
+ export type SidebarNavItem = {
4
+ id: string;
5
+ label: string;
6
+ icon?: LucideIcon;
7
+ href?: string;
8
+ active?: boolean;
9
+ onClick?: () => void;
10
+ badge?: ReactNode;
11
+ };
12
+ export type SidebarNavSection = {
13
+ id: string;
14
+ title?: string;
15
+ items: SidebarNavItem[];
16
+ };
17
+ export type AppSidebarProps = {
18
+ brand?: ReactNode;
19
+ sections: SidebarNavSection[];
20
+ footer?: ReactNode;
21
+ className?: string;
22
+ /** Collapsed rail mode */
23
+ collapsed?: boolean;
24
+ widthClassName?: string;
25
+ };
26
+ /**
27
+ * Desktop navigation sidebar — glass panel with sectioned nav links.
28
+ */
29
+ export declare function AppSidebar({ brand, sections, footer, className, collapsed, widthClassName, }: AppSidebarProps): import("react").JSX.Element;
30
+ //# sourceMappingURL=AppSidebar.d.ts.map
package/dist/composites/AppSidebar.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../src/composites/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAiB,EACjB,cAA4B,GAC7B,EAAE,eAAe,+BA+EjB"}
package/dist/composites/AppSidebar.js ADDED
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cn } from "../lib/cn";
3
+ /**
4
+ * Desktop navigation sidebar — glass panel with sectioned nav links.
5
+ */
6
+ export function AppSidebar({ brand, sections, footer, className, collapsed = false, widthClassName = "w-[280px]", }) {
7
+ return (_jsxs("aside", { "data-slot": "app-sidebar", "data-collapsed": collapsed ? "true" : "false", className: cn("glass-panel flex h-full flex-col border-r border-border/40", collapsed ? "w-[72px]" : widthClassName, className), children: [brand ? (_jsx("div", { className: cn("shrink-0 border-b border-border/40 px-4 py-4", collapsed && "px-2"), children: brand })) : null, _jsx("nav", { className: "flex-1 space-y-5 overflow-y-auto px-2 py-4", children: sections.map((section) => (_jsxs("div", { children: [section.title && !collapsed ? (_jsx("p", { className: "mb-2 px-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground/70", children: section.title })) : null, _jsx("ul", { className: "space-y-1", children: section.items.map((item) => {
8
+ const Icon = item.icon;
9
+ const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "size-4 shrink-0" }) : null, !collapsed ? _jsx("span", { className: "truncate", children: item.label }) : null, !collapsed && item.badge ? (_jsx("span", { className: "ml-auto", children: item.badge })) : null] }));
10
+ const classNameItem = cn("flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-bold transition-colors", collapsed && "justify-center px-2", item.active
11
+ ? "bg-primary/15 text-primary"
12
+ : "text-muted-foreground hover:bg-muted/50 hover:text-foreground");
13
+ return (_jsx("li", { children: item.href ? (_jsx("a", { href: item.href, "aria-current": item.active ? "page" : undefined, className: classNameItem, onClick: item.onClick, title: collapsed ? item.label : undefined, children: content })) : (_jsx("button", { type: "button", className: classNameItem, onClick: item.onClick, title: collapsed ? item.label : undefined, children: content })) }, item.id));
14
+ }) })] }, section.id))) }), footer ? (_jsx("div", { className: cn("shrink-0 border-t border-border/40 p-3", collapsed && "px-2"), children: footer })) : null] }));
15
+ }
package/dist/composites/BottomSheet.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ import * as React from "react";
2
+ import { Drawer as DrawerPrimitive } from "vaul";
3
+ /**
4
+ * Vaul drawer root.
5
+ * Disable background scaling + input repositioning by default — both break
6
+ * touch hit-testing on iOS Safari / PWAs after the page has been scrolled.
7
+ */
8
+ declare const Drawer: {
9
+ ({ shouldScaleBackground, repositionInputs, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
10
+ displayName: string;
11
+ };
12
+ declare const DrawerTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
13
+ declare const DrawerPortal: {
14
+ ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
15
+ displayName: string;
16
+ };
17
+ declare const DrawerClose: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
18
+ declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
19
+ declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
20
+ declare const DrawerHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
21
+ declare const DrawerFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
22
+ declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
23
+ declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
24
+ export type BottomSheetProps = {
25
+ open: boolean;
26
+ onOpenChange: (open: boolean) => void;
27
+ children: React.ReactNode;
28
+ className?: string;
29
+ };
30
+ /**
31
+ * Glass bottom sheet (Vaul) — mobile filters, overflow menus, sheet panels.
32
+ * Customize surface via className; defaults match app chrome glass-panel look.
33
+ */
34
+ export declare function BottomSheet({ open, onOpenChange, children, className }: BottomSheetProps): React.JSX.Element;
35
+ export { Drawer, DrawerTrigger, DrawerClose, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
36
+ //# sourceMappingURL=BottomSheet.d.ts.map
package/dist/composites/BottomSheet.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/composites/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAGjD;;;;GAIG;AACH,QAAA,MAAM,MAAM;4DAIT,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;;CAOnD,CAAC;AAGF,QAAA,MAAM,aAAa,qLAKjB,CAAC;AAGH,QAAA,MAAM,YAAY;mBAEf,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC;;CAErD,CAAC;AAGF,QAAA,MAAM,WAAW,mLAKf,CAAC;AAGH,QAAA,MAAM,aAAa,kOAcjB,CAAC;AAGH,QAAA,MAAM,aAAa,kOAwBjB,CAAC;AAGH,QAAA,MAAM,YAAY,mKASjB,CAAC;AAGF,QAAA,MAAM,YAAY,mKASjB,CAAC;AAGF,QAAA,MAAM,WAAW,qLAUf,CAAC;AAGH,QAAA,MAAM,iBAAiB,+LAUrB,CAAC;AAGH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,qBAcxF;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
package/dist/composites/BottomSheet.js ADDED
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { Drawer as DrawerPrimitive } from "vaul";
4
+ import { cn } from "../lib/cn";
5
+ /**
6
+ * Vaul drawer root.
7
+ * Disable background scaling + input repositioning by default — both break
8
+ * touch hit-testing on iOS Safari / PWAs after the page has been scrolled.
9
+ */
10
+ const Drawer = ({ shouldScaleBackground = false, repositionInputs = false, ...props }) => (_jsx(DrawerPrimitive.Root, { "data-slot": "drawer", shouldScaleBackground: shouldScaleBackground, repositionInputs: repositionInputs, ...props }));
11
+ Drawer.displayName = "Drawer";
12
+ const DrawerTrigger = React.forwardRef(({ ...props }, ref) => (_jsx(DrawerPrimitive.Trigger, { ref: ref, "data-slot": "drawer-trigger", ...props })));
13
+ DrawerTrigger.displayName = "DrawerTrigger";
14
+ const DrawerPortal = ({ ...props }) => (_jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props }));
15
+ DrawerPortal.displayName = "DrawerPortal";
16
+ const DrawerClose = React.forwardRef(({ ...props }, ref) => (_jsx(DrawerPrimitive.Close, { ref: ref, "data-slot": "drawer-close", ...props })));
17
+ DrawerClose.displayName = "DrawerClose";
18
+ const DrawerOverlay = React.forwardRef(({ className, style, ...props }, ref) => (_jsx(DrawerPrimitive.Overlay, { ref: ref, "data-slot": "drawer-overlay", ...props, className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[9998] bg-black/50", className), style: style })));
19
+ DrawerOverlay.displayName = "DrawerOverlay";
20
+ const DrawerContent = React.forwardRef(({ className, children, style, ...props }, ref) => (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { ref: ref, "data-slot": "drawer-content", ...props, className: cn("group/drawer-content bg-background fixed z-[9999] flex h-auto flex-col outline-none", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className), style: { touchAction: "manipulation", ...style }, children: [_jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] })));
21
+ DrawerContent.displayName = "DrawerContent";
22
+ const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "drawer-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props })));
23
+ DrawerHeader.displayName = "DrawerHeader";
24
+ const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props })));
25
+ DrawerFooter.displayName = "DrawerFooter";
26
+ const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DrawerPrimitive.Title, { ref: ref, "data-slot": "drawer-title", className: cn("text-foreground font-semibold", className), ...props })));
27
+ DrawerTitle.displayName = "DrawerTitle";
28
+ const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DrawerPrimitive.Description, { ref: ref, "data-slot": "drawer-description", className: cn("text-muted-foreground text-sm", className), ...props })));
29
+ DrawerDescription.displayName = "DrawerDescription";
30
+ /**
31
+ * Glass bottom sheet (Vaul) — mobile filters, overflow menus, sheet panels.
32
+ * Customize surface via className; defaults match app chrome glass-panel look.
33
+ */
34
+ export function BottomSheet({ open, onOpenChange, children, className }) {
35
+ return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, children: _jsx(DrawerContent, { "data-slot": "bottom-sheet", className: cn("glass-panel border-border/60 bg-background/90 backdrop-blur-xl", className), children: children }) }));
36
+ }
37
+ export { Drawer, DrawerTrigger, DrawerClose, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
package/dist/composites/Breadcrumb.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export type BreadcrumbItem = {
2
+ label: string;
3
+ href?: string;
4
+ onClick?: () => void;
5
+ };
6
+ export declare function Breadcrumb({ items, className, }: {
7
+ items: BreadcrumbItem[];
8
+ className?: string;
9
+ }): import("react").JSX.Element;
10
+ //# sourceMappingURL=Breadcrumb.d.ts.map
package/dist/composites/Breadcrumb.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/composites/Breadcrumb.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyBA"}
package/dist/composites/Breadcrumb.js ADDED
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ChevronRight } from "lucide-react";
3
+ import { cn } from "../lib/cn";
4
+ export function Breadcrumb({ items, className, }) {
5
+ return (_jsx("nav", { "data-slot": "breadcrumb", "aria-label": "Breadcrumb", className: cn("flex flex-wrap items-center gap-1 text-sm", className), children: items.map((item, index) => {
6
+ const last = index === items.length - 1;
7
+ const content = last ? (_jsx("span", { className: "font-bold text-foreground", children: item.label })) : item.onClick ? (_jsx("button", { type: "button", className: "font-medium text-muted-foreground hover:text-primary", onClick: item.onClick, children: item.label })) : (_jsx("a", { href: item.href, className: "font-medium text-muted-foreground hover:text-primary", children: item.label }));
8
+ return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [index > 0 ? _jsx(ChevronRight, { className: "size-3.5 text-muted-foreground/50" }) : null, content] }, `${item.label}-${index}`));
9
+ }) }));
10
+ }
package/dist/composites/Callout.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { ReactNode } from "react";
2
+ export declare function Callout({ title, children, variant, className, }: {
3
+ title?: string;
4
+ children: ReactNode;
5
+ variant?: "default" | "info" | "warm" | "highlight" | "danger";
6
+ className?: string;
7
+ }): import("react").JSX.Element;
8
+ //# sourceMappingURL=Callout.d.ts.map
package/dist/composites/Callout.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../src/composites/Callout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,OAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}
package/dist/composites/Callout.js ADDED
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Alert, AlertDescription, AlertTitle } from "../primitives/Alert";
3
+ export function Callout({ title, children, variant = "info", className, }) {
4
+ return (_jsxs(Alert, { "data-slot": "callout", variant: variant, className: className, children: [title ? _jsx(AlertTitle, { children: title }) : null, _jsx(AlertDescription, { children: children })] }));
5
+ }
package/dist/composites/Card.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ import type { ReactNode } from "react";
2
+ export type CardProps = {
3
+ children: ReactNode;
4
+ className?: string;
5
+ /** Glass elevation level */
6
+ variant?: "default" | "panel" | "subtle" | "elevated";
7
+ padding?: "none" | "sm" | "md" | "lg";
8
+ };
9
+ /** Structured content card with optional header/footer slots via subcomponents. */
10
+ export declare function Card({ children, className, variant, padding, }: CardProps): import("react").JSX.Element;
11
+ export declare function CardHeader({ className, children, }: {
12
+ className?: string;
13
+ children: ReactNode;
14
+ }): import("react").JSX.Element;
15
+ export declare function CardTitle({ className, children, }: {
16
+ className?: string;
17
+ children: ReactNode;
18
+ }): import("react").JSX.Element;
19
+ export declare function CardDescription({ className, children, }: {
20
+ className?: string;
21
+ children: ReactNode;
22
+ }): import("react").JSX.Element;
23
+ export declare function CardContent({ className, children, }: {
24
+ className?: string;
25
+ children: ReactNode;
26
+ }): import("react").JSX.Element;
27
+ export declare function CardFooter({ className, children, }: {
28
+ className?: string;
29
+ children: ReactNode;
30
+ }): import("react").JSX.Element;
31
+ //# sourceMappingURL=Card.d.ts.map
package/dist/composites/Card.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/composites/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC,CAAC;AAgBF,mFAAmF;AACnF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAiB,EACjB,OAAc,GACf,EAAE,SAAS,+BAcX;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BASA"}
package/dist/composites/Card.js ADDED
@@ -0,0 +1,33 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "../lib/cn";
3
+ const variantClass = {
4
+ default: "glass",
5
+ panel: "glass-panel",
6
+ subtle: "glass-subtle",
7
+ elevated: "app-card-elevated",
8
+ };
9
+ const paddingClass = {
10
+ none: "p-0",
11
+ sm: "p-3",
12
+ md: "p-4 sm:p-5",
13
+ lg: "p-5 sm:p-6",
14
+ };
15
+ /** Structured content card with optional header/footer slots via subcomponents. */
16
+ export function Card({ children, className, variant = "panel", padding = "md", }) {
17
+ return (_jsx("div", { "data-slot": "card", className: cn("relative overflow-hidden rounded-[var(--radius-card)]", variantClass[variant], paddingClass[padding], className), children: children }));
18
+ }
19
+ export function CardHeader({ className, children, }) {
20
+ return (_jsx("div", { "data-slot": "card-header", className: cn("mb-3 flex items-start justify-between gap-3", className), children: children }));
21
+ }
22
+ export function CardTitle({ className, children, }) {
23
+ return (_jsx("h3", { "data-slot": "card-title", className: cn("text-base font-black tracking-tight", className), children: children }));
24
+ }
25
+ export function CardDescription({ className, children, }) {
26
+ return (_jsx("p", { "data-slot": "card-description", className: cn("mt-0.5 text-sm text-muted-foreground", className), children: children }));
27
+ }
28
+ export function CardContent({ className, children, }) {
29
+ return (_jsx("div", { "data-slot": "card-content", className: cn(className), children: children }));
30
+ }
31
+ export function CardFooter({ className, children, }) {
32
+ return (_jsx("div", { "data-slot": "card-footer", className: cn("mt-4 flex flex-wrap items-center justify-end gap-2 border-t border-border/40 pt-3", className), children: children }));
33
+ }
package/dist/composites/Chip.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ declare const chipVariants: (props?: ({
4
+ variant?: "layout" | "filter" | "preference" | null | undefined;
5
+ active?: boolean | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ export type ChipProps = React.ComponentProps<"button"> & VariantProps<typeof chipVariants>;
8
+ /**
9
+ * Unified chip control for filters, preferences, and layout toggles.
10
+ */
11
+ declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
12
+ export { Chip, chipVariants };
13
+ //# sourceMappingURL=Chip.d.ts.map
package/dist/composites/Chip.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/composites/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,YAAY;;;8EA0DjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACpD,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAEpC;;GAEG;AACH,QAAA,MAAM,IAAI,kGAaT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC"}
package/dist/composites/Chip.js ADDED
@@ -0,0 +1,59 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cva } from "class-variance-authority";
4
+ import { cn } from "../lib/cn";
5
+ const chipVariants = cva("inline-flex items-center justify-center gap-1.5 touch-manipulation select-none outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", {
6
+ variants: {
7
+ variant: {
8
+ filter: "min-h-7 max-w-full rounded-full border px-2 py-0.5 text-left text-[10px] font-bold leading-snug shadow-sm transition-colors active:scale-[0.98] sm:min-h-8 sm:px-2.5 sm:py-1 sm:text-xs",
9
+ preference: "rounded-xl border px-3 py-2 text-[10px] font-black uppercase tracking-widest shadow-sm transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95",
10
+ layout: "min-h-11 rounded-xl border px-3 text-sm font-bold shadow-sm transition-colors active:scale-[0.98]",
11
+ },
12
+ active: {
13
+ true: "",
14
+ false: "",
15
+ },
16
+ },
17
+ compoundVariants: [
18
+ {
19
+ variant: "filter",
20
+ active: true,
21
+ className: "border-primary/50 bg-primary/15 text-primary",
22
+ },
23
+ {
24
+ variant: "filter",
25
+ active: false,
26
+ className: "border-border/60 bg-background/80 text-foreground hover:bg-muted/40",
27
+ },
28
+ {
29
+ variant: "preference",
30
+ active: true,
31
+ className: "scale-[1.02] border-primary bg-primary text-primary-foreground shadow-primary/20",
32
+ },
33
+ {
34
+ variant: "preference",
35
+ active: false,
36
+ className: "border-border/50 bg-background/40 text-muted-foreground hover:border-primary/30 hover:text-primary",
37
+ },
38
+ {
39
+ variant: "layout",
40
+ active: true,
41
+ className: "border-primary/50 bg-primary/15 text-primary",
42
+ },
43
+ {
44
+ variant: "layout",
45
+ active: false,
46
+ className: "border-border/60 bg-background/80 text-foreground hover:bg-muted/40",
47
+ },
48
+ ],
49
+ defaultVariants: {
50
+ variant: "filter",
51
+ active: false,
52
+ },
53
+ });
54
+ /**
55
+ * Unified chip control for filters, preferences, and layout toggles.
56
+ */
57
+ const Chip = React.forwardRef(({ className, variant, active, type = "button", ...props }, ref) => (_jsx("button", { ref: ref, type: type, "data-slot": "chip", "data-variant": variant ?? "filter", "data-active": active ? "true" : "false", "aria-pressed": Boolean(active), className: cn(chipVariants({ variant, active }), className), ...props })));
58
+ Chip.displayName = "Chip";
59
+ export { Chip, chipVariants };
package/dist/composites/ChipGroup.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ export type ChipOption = {
2
+ value: string;
3
+ label: string;
4
+ };
5
+ export type ChipGroupProps = {
6
+ title?: string;
7
+ options: ChipOption[];
8
+ selected: string[] | undefined;
9
+ onToggle: (value: string) => void;
10
+ /** filter = soft pills, preference = uppercase admin chips */
11
+ variant?: "filter" | "preference";
12
+ className?: string;
13
+ showCount?: boolean;
14
+ };
15
+ /** Case-insensitive membership check. */
16
+ export declare function isOptionSelected(list: string[] | undefined, value: string): boolean;
17
+ /** Toggle a value in a list (case-insensitive). */
18
+ export declare function toggleOptionValue<T extends string>(list: T[] | undefined, value: T): T[];
19
+ /**
20
+ * Titled multi-select chip row used in admin preferences and filter panels.
21
+ */
22
+ export declare function ChipGroup({ title, options, selected, onToggle, variant, className, showCount, }: ChipGroupProps): import("react").JSX.Element;
23
+ //# sourceMappingURL=ChipGroup.d.ts.map
package/dist/composites/ChipGroup.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../src/composites/ChipGroup.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,yCAAyC;AACzC,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAInF;AAED,mDAAmD;AACnD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,CASxF;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAsB,EACtB,SAAS,EACT,SAAgB,GACjB,EAAE,cAAc,+BAmChB"}
package/dist/composites/ChipGroup.js ADDED
@@ -0,0 +1,27 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { cn } from "../lib/cn";
3
+ import { typographyEyebrow } from "../lib/typography";
4
+ import { Chip } from "./Chip";
5
+ /** Case-insensitive membership check. */
6
+ export function isOptionSelected(list, value) {
7
+ return (list || []).some((entry) => String(entry).toUpperCase() === String(value).toUpperCase());
8
+ }
9
+ /** Toggle a value in a list (case-insensitive). */
10
+ export function toggleOptionValue(list, value) {
11
+ const current = list || [];
12
+ const index = current.findIndex((entry) => String(entry).toUpperCase() === String(value).toUpperCase());
13
+ if (index >= 0) {
14
+ return current.filter((_, i) => i !== index);
15
+ }
16
+ return [...current, value];
17
+ }
18
+ /**
19
+ * Titled multi-select chip row used in admin preferences and filter panels.
20
+ */
21
+ export function ChipGroup({ title, options, selected, onToggle, variant = "preference", className, showCount = true, }) {
22
+ const selectedCount = options.filter((opt) => isOptionSelected(selected, opt.value)).length;
23
+ return (_jsxs("div", { "data-slot": "chip-group", className: cn("space-y-3", className), children: [title ? (_jsxs("div", { className: "flex items-center justify-between gap-2 px-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70" }), _jsx("p", { className: typographyEyebrow, children: title })] }), showCount && selectedCount > 0 ? (_jsx("span", { className: "rounded-md border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[9px] font-black uppercase tracking-wider text-primary", children: selectedCount })) : null] })) : null, _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
24
+ const active = isOptionSelected(selected, opt.value);
25
+ return (_jsx(Chip, { variant: variant, active: active, onClick: () => onToggle(opt.value), children: opt.label }, opt.value));
26
+ }) })] }));
27
+ }
package/dist/composites/CommandSearchField.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import type { ReactNode } from "react";
2
+ export type CommandSearchResult = {
3
+ id: string;
4
+ title: string;
5
+ subtitle?: string;
6
+ icon?: ReactNode;
7
+ typeLabel?: string;
8
+ onSelect?: () => void;
9
+ };
10
+ export type CommandSearchFieldProps = {
11
+ value: string;
12
+ onChange: (value: string) => void;
13
+ onSubmit?: () => void;
14
+ placeholder?: string;
15
+ shortcutHint?: string;
16
+ results?: CommandSearchResult[];
17
+ recent?: CommandSearchResult[];
18
+ loading?: boolean;
19
+ className?: string;
20
+ /** Called when clear is pressed */
21
+ onClear?: () => void;
22
+ };
23
+ /**
24
+ * Frosted command / global search field with optional result dropdown.
25
+ */
26
+ export declare function CommandSearchField({ value, onChange, onSubmit, placeholder, shortcutHint, results, recent, loading, className, onClear, }: CommandSearchFieldProps): import("react").JSX.Element;
27
+ //# sourceMappingURL=CommandSearchField.d.ts.map
package/dist/composites/CommandSearchField.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CommandSearchField.d.ts","sourceRoot":"","sources":["../../src/composites/CommandSearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,YAAmB,EACnB,OAAO,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,GACR,EAAE,uBAAuB,+BAkFzB"}
package/dist/composites/CommandSearchField.js ADDED
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Search, X } from "lucide-react";
3
+ import { cn } from "../lib/cn";
4
+ /**
5
+ * Frosted command / global search field with optional result dropdown.
6
+ */
7
+ export function CommandSearchField({ value, onChange, onSubmit, placeholder = "Search…", shortcutHint = "⌘K", results, recent, loading, className, onClear, }) {
8
+ const focusedList = (results && results.length > 0 ? results : recent) ?? [];
9
+ const showDropdown = value.length > 0 ? Boolean(results) : Boolean(recent?.length);
10
+ return (_jsxs("div", { "data-slot": "command-search-field", className: cn("relative w-full", className), children: [_jsxs("div", { className: cn("group relative flex items-center rounded-2xl border border-border/20 bg-muted/10 backdrop-blur-xl transition-all", "focus-within:border-primary/30 focus-within:bg-white/10 focus-within:shadow-[0_12px_40px_-12px_rgba(99,102,241,0.3)] focus-within:ring-4 focus-within:ring-primary/5"), children: [_jsx("span", { className: "pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center text-muted-foreground transition-colors group-focus-within:rounded-lg group-focus-within:bg-primary group-focus-within:p-1.5 group-focus-within:text-primary-foreground", children: _jsx(Search, { className: "h-4 w-4 shrink-0", "aria-hidden": true }) }), _jsx("input", { value: value, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
11
+ if (e.key === "Enter")
12
+ onSubmit?.();
13
+ }, placeholder: placeholder, className: "w-full bg-transparent py-3 pl-12 pr-12 text-sm font-black outline-none placeholder:font-medium placeholder:text-muted-foreground/30" }), value ? (_jsx("button", { type: "button", "aria-label": "Clear", className: "absolute right-3 text-muted-foreground hover:text-foreground", onClick: () => {
14
+ onChange("");
15
+ onClear?.();
16
+ }, children: _jsx(X, { className: "size-4" }) })) : shortcutHint ? (_jsx("kbd", { className: "pointer-events-none absolute right-3 hidden rounded border border-border/50 bg-muted/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground sm:inline", children: shortcutHint })) : null] }), showDropdown ? (_jsx("div", { className: "absolute inset-x-0 top-full z-50 mt-2 overflow-hidden rounded-[2rem] border border-border/60 bg-background shadow-[0_28px_64px_-20px_rgba(15,23,42,0.45)] dark:border-white/10 dark:bg-card dark:shadow-[0_28px_64px_-20px_rgba(0,0,0,0.65)]", children: _jsx("div", { className: "max-h-72 overflow-y-auto p-2", children: loading ? (_jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "Searching\u2026" })) : focusedList.length === 0 ? (_jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No results" })) : (focusedList.map((item) => (_jsxs("button", { type: "button", className: "flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-muted/30", onClick: item.onSelect, children: [_jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: item.icon ?? _jsx(Search, { className: "size-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-bold", children: item.title }), item.subtitle ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.subtitle })) : null] }), item.typeLabel ? (_jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-muted-foreground/70", children: item.typeLabel })) : null] }, item.id)))) }) })) : null] }));
17
+ }