@xemahq/ui-kernel 0.11.1 → 0.11.2

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 (234) hide show
  1. package/package.json +1 -2
  2. package/src/index.ts +0 -17
  3. package/src/lib/biome-host/agent-validation.ts +0 -239
  4. package/src/lib/biome-host/biome-builders.ts +0 -112
  5. package/src/lib/biome-host/biome-mode.ts +0 -6
  6. package/src/lib/biome-host/biome-navigation.ts +0 -37
  7. package/src/lib/biome-host/biome-registry.ts +0 -299
  8. package/src/lib/biome-host/biome-scope-hooks.ts +0 -41
  9. package/src/lib/biome-host/biome-scope.tsx +0 -52
  10. package/src/lib/biome-host/biome-scoped-query.ts +0 -134
  11. package/src/lib/biome-host/create-biome-orval-config.ts +0 -82
  12. package/src/lib/biome-host/define-web-biome.spec.ts +0 -221
  13. package/src/lib/biome-host/define-web-biome.ts +0 -222
  14. package/src/lib/biome-host/errors.ts +0 -220
  15. package/src/lib/biome-host/frontend-biome.ts +0 -256
  16. package/src/lib/biome-host/host-bridge.ts +0 -281
  17. package/src/lib/biome-host/host-sources.ts +0 -54
  18. package/src/lib/biome-host/i18n-hooks.ts +0 -51
  19. package/src/lib/biome-host/i18n-port.test.ts +0 -50
  20. package/src/lib/biome-host/i18n-port.ts +0 -96
  21. package/src/lib/biome-host/index.ts +0 -35
  22. package/src/lib/biome-host/realtime-hooks.ts +0 -75
  23. package/src/lib/biome-host/realtime-port.ts +0 -115
  24. package/src/lib/biome-host/session-contributions.ts +0 -296
  25. package/src/lib/biome-host/use-mutation-with-error-toast.ts +0 -90
  26. package/src/lib/biome-host/use-page-state.ts +0 -248
  27. package/src/lib/capabilities/capability-context.ts +0 -25
  28. package/src/lib/capabilities/capability-provider.tsx +0 -73
  29. package/src/lib/capabilities/index.ts +0 -17
  30. package/src/lib/capabilities/types.ts +0 -69
  31. package/src/lib/capabilities/use-capability.ts +0 -79
  32. package/src/lib/contribution-registry/contribution-registry.spec.ts +0 -141
  33. package/src/lib/contribution-registry/contribution-registry.ts +0 -204
  34. package/src/lib/contribution-registry/index.ts +0 -9
  35. package/src/lib/contribution-registry/renderable-registry.ts +0 -142
  36. package/src/lib/system-bus/capability-invoke.ts +0 -92
  37. package/src/lib/system-bus/deeplink.ts +0 -210
  38. package/src/lib/system-bus/enums.ts +0 -86
  39. package/src/lib/system-bus/host-ports.ts +0 -93
  40. package/src/lib/system-bus/index.ts +0 -16
  41. package/src/lib/system-bus/intent-registry.ts +0 -109
  42. package/src/lib/system-bus/intents.ts +0 -113
  43. package/src/lib/system-bus/palette.ts +0 -78
  44. package/src/lib/system-bus/system-bus-builder.ts +0 -159
  45. package/src/lib/system-bus/system-bus.ts +0 -37
  46. package/src/lib/system-bus/windows.ts +0 -51
  47. package/src/offline/id.ts +0 -16
  48. package/src/offline/index.ts +0 -54
  49. package/src/offline/mutation.ts +0 -75
  50. package/src/offline/offline-status-badge.tsx +0 -51
  51. package/src/offline/online-controller.ts +0 -105
  52. package/src/offline/outbox.test.ts +0 -172
  53. package/src/offline/outbox.ts +0 -348
  54. package/src/offline/react-hooks.ts +0 -40
  55. package/src/offline/react.tsx +0 -32
  56. package/src/offline/storage.ts +0 -112
  57. package/src/offline/types.ts +0 -77
  58. package/src/org-db/components/DbResultTable.tsx +0 -176
  59. package/src/org-db/index.ts +0 -1
  60. package/src/pdf/index.ts +0 -11
  61. package/src/registry/index.ts +0 -9
  62. package/src/registry/lib/agent-validation-host.ts +0 -36
  63. package/src/registry/lib/biome-slot.tsx +0 -50
  64. package/src/registry/lib/biomes-enabled-context.ts +0 -20
  65. package/src/registry/lib/extension-points.ts +0 -134
  66. package/src/registry/lib/primitives/SessionEventCard.tsx +0 -164
  67. package/src/registry/lib/primitives/SessionEventTimeline.tsx +0 -95
  68. package/src/registry/lib/primitives/SessionMutationBar.tsx +0 -76
  69. package/src/registry/lib/primitives/SessionTabbedDrawer.tsx +0 -165
  70. package/src/registry/lib/primitives/index.ts +0 -18
  71. package/src/registry/lib/session-context-builder.ts +0 -84
  72. package/src/registry/lib/session-context-provider.tsx +0 -33
  73. package/src/registry/lib/session-context.ts +0 -21
  74. package/src/registry/lib/session-selectors.ts +0 -272
  75. package/src/session/comments/CommentRail.tsx +0 -164
  76. package/src/session/index.ts +0 -3
  77. package/src/session/lib/cn.ts +0 -11
  78. package/src/session/shell/SessionWorkspaceShell.tsx +0 -147
  79. package/src/session-kit/approvals/ApprovalButton.tsx +0 -89
  80. package/src/session-kit/approvals/ApprovalCard.tsx +0 -341
  81. package/src/session-kit/approvals/ApprovalsCenter.tsx +0 -336
  82. package/src/session-kit/approvals/CapabilityApprovalStickyBar.tsx +0 -118
  83. package/src/session-kit/approvals/Obligation.tsx +0 -111
  84. package/src/session-kit/approvals/ScopedBody.tsx +0 -392
  85. package/src/session-kit/approvals/approval-icons.ts +0 -31
  86. package/src/session-kit/approvals/approval-model.ts +0 -204
  87. package/src/session-kit/approvals/index.ts +0 -22
  88. package/src/session-kit/approvals/obligation-display.ts +0 -100
  89. package/src/session-kit/approvals/risk-accent.ts +0 -47
  90. package/src/session-kit/approvals/scope-icons.ts +0 -19
  91. package/src/session-kit/combobox/Combobox.tsx +0 -358
  92. package/src/session-kit/combobox/use-click-outside.ts +0 -21
  93. package/src/session-kit/display/ContextHeader.tsx +0 -148
  94. package/src/session-kit/display/FileDiffCard.tsx +0 -140
  95. package/src/session-kit/display/MD.tsx +0 -162
  96. package/src/session-kit/display/MessageTurn.tsx +0 -157
  97. package/src/session-kit/display/ThinkingPanel.tsx +0 -81
  98. package/src/session-kit/display/TodoChecklist.tsx +0 -120
  99. package/src/session-kit/display/TokenMeter.tsx +0 -89
  100. package/src/session-kit/display/ToolStrip.tsx +0 -278
  101. package/src/session-kit/display/TypingDots.tsx +0 -24
  102. package/src/session-kit/index.ts +0 -44
  103. package/src/session-kit/lib/enums.ts +0 -66
  104. package/src/session-kit/lib/portal-accent.ts +0 -30
  105. package/src/session-kit/lib/status-dot.ts +0 -68
  106. package/src/session-kit/primitives/Avatar.tsx +0 -44
  107. package/src/session-kit/primitives/PortalGlyph.tsx +0 -51
  108. package/src/session-kit/primitives/RiskPill.tsx +0 -95
  109. package/src/session-kit/primitives/ScopeDot.tsx +0 -47
  110. package/src/session-kit/primitives/Segmented.tsx +0 -71
  111. package/src/ui/branding/app-branding-context.ts +0 -20
  112. package/src/ui/branding/app-branding-provider.tsx +0 -123
  113. package/src/ui/branding/sanitize.ts +0 -89
  114. package/src/ui/breakpoints.ts +0 -14
  115. package/src/ui/capture/document-preview.tsx +0 -166
  116. package/src/ui/capture/field-spec-to-zod.test.ts +0 -81
  117. package/src/ui/capture/field-spec-to-zod.ts +0 -174
  118. package/src/ui/capture/field-spec-validate.ts +0 -236
  119. package/src/ui/capture/field-spec.test.ts +0 -49
  120. package/src/ui/capture/field-spec.ts +0 -274
  121. package/src/ui/capture/index.ts +0 -51
  122. package/src/ui/capture/schema-field-input.tsx +0 -620
  123. package/src/ui/capture/schema-form.tsx +0 -149
  124. package/src/ui/capture/submit-values.test.ts +0 -70
  125. package/src/ui/capture/submit-values.ts +0 -63
  126. package/src/ui/capture/use-prefill.ts +0 -186
  127. package/src/ui/capture/use-schema-validation.ts +0 -145
  128. package/src/ui/capture/use-wizard.ts +0 -180
  129. package/src/ui/capture/value-format.ts +0 -32
  130. package/src/ui/capture/wizard.tsx +0 -105
  131. package/src/ui/charts/bar-chart.tsx +0 -139
  132. package/src/ui/charts/chart-frame.tsx +0 -125
  133. package/src/ui/charts/chart-types.ts +0 -52
  134. package/src/ui/charts/chart-utils.ts +0 -190
  135. package/src/ui/charts/charts.test.tsx +0 -204
  136. package/src/ui/charts/donut-chart.tsx +0 -129
  137. package/src/ui/charts/index.ts +0 -27
  138. package/src/ui/charts/line-chart.tsx +0 -202
  139. package/src/ui/charts/sparkline.tsx +0 -109
  140. package/src/ui/chrome/AsyncBoundary.tsx +0 -74
  141. package/src/ui/chrome/EmptyState.tsx +0 -257
  142. package/src/ui/chrome/ErrorCard.tsx +0 -63
  143. package/src/ui/chrome/LoadingState.tsx +0 -61
  144. package/src/ui/chrome/PageHeader.tsx +0 -137
  145. package/src/ui/chrome/RecordCardList.tsx +0 -98
  146. package/src/ui/chrome/StateCard.tsx +0 -150
  147. package/src/ui/chrome/confirm-delete-dialog.tsx +0 -59
  148. package/src/ui/chrome/page-shell.spec.tsx +0 -117
  149. package/src/ui/chrome/page-shell.tsx +0 -221
  150. package/src/ui/chrome/scope-badge.tsx +0 -40
  151. package/src/ui/chrome/status-badge.tsx +0 -79
  152. package/src/ui/cn.ts +0 -32
  153. package/src/ui/design-tokens.ts +0 -372
  154. package/src/ui/hooks/use-debounced-value.ts +0 -16
  155. package/src/ui/hooks/use-is-mobile.ts +0 -28
  156. package/src/ui/index.ts +0 -110
  157. package/src/ui/pdf/pdf-preview.tsx +0 -122
  158. package/src/ui/primitives/alert-dialog.tsx +0 -104
  159. package/src/ui/primitives/async-combobox.tsx +0 -182
  160. package/src/ui/primitives/badge-variants.ts +0 -21
  161. package/src/ui/primitives/badge.tsx +0 -25
  162. package/src/ui/primitives/button-variants.ts +0 -31
  163. package/src/ui/primitives/button.tsx +0 -29
  164. package/src/ui/primitives/card.tsx +0 -43
  165. package/src/ui/primitives/checkbox.tsx +0 -26
  166. package/src/ui/primitives/collapsible.tsx +0 -9
  167. package/src/ui/primitives/dialog.tsx +0 -103
  168. package/src/ui/primitives/dropdown-menu.tsx +0 -179
  169. package/src/ui/primitives/form-stepper.tsx +0 -94
  170. package/src/ui/primitives/form-stepper.types.ts +0 -15
  171. package/src/ui/primitives/input.tsx +0 -22
  172. package/src/ui/primitives/label.tsx +0 -17
  173. package/src/ui/primitives/overflow-tabs.tsx +0 -331
  174. package/src/ui/primitives/popover.tsx +0 -33
  175. package/src/ui/primitives/preview-device-frame.tsx +0 -213
  176. package/src/ui/primitives/radio-group.tsx +0 -36
  177. package/src/ui/primitives/resizable.tsx +0 -67
  178. package/src/ui/primitives/scroll-area.tsx +0 -38
  179. package/src/ui/primitives/select.tsx +0 -143
  180. package/src/ui/primitives/separator.tsx +0 -20
  181. package/src/ui/primitives/sheet.tsx +0 -107
  182. package/src/ui/primitives/skeleton.tsx +0 -99
  183. package/src/ui/primitives/switch.tsx +0 -27
  184. package/src/ui/primitives/table.tsx +0 -72
  185. package/src/ui/primitives/tabs.tsx +0 -53
  186. package/src/ui/primitives/tag-multi-select.tsx +0 -261
  187. package/src/ui/primitives/textarea.tsx +0 -21
  188. package/src/ui/primitives/tooltip.tsx +0 -30
  189. package/src/ui/primitives/url-preview-chrome.tsx +0 -103
  190. package/src/vista/GenericCatalogueSurface.tsx +0 -179
  191. package/src/vista/SurfaceFallbackCard.tsx +0 -109
  192. package/src/vista/VistaPanel.tsx +0 -163
  193. package/src/vista/form-payload.spec.ts +0 -139
  194. package/src/vista/html/CustomUiFrame.spec.tsx +0 -127
  195. package/src/vista/html/CustomUiFrame.tsx +0 -206
  196. package/src/vista/html/custom-ui-frame-bridge.spec.ts +0 -191
  197. package/src/vista/html/custom-ui-frame-bridge.ts +0 -98
  198. package/src/vista/html/custom-ui-frame-contract.ts +0 -88
  199. package/src/vista/html/custom-ui-intents.spec.ts +0 -135
  200. package/src/vista/html/custom-ui-intents.ts +0 -155
  201. package/src/vista/html/custom-ui-srcdoc.spec.ts +0 -151
  202. package/src/vista/html/custom-ui-srcdoc.ts +0 -193
  203. package/src/vista/html/index.ts +0 -13
  204. package/src/vista/index.ts +0 -52
  205. package/src/vista/surface-catalogue.spec.ts +0 -140
  206. package/src/vista/surface-catalogue.ts +0 -90
  207. package/src/vista/surface-icons.ts +0 -57
  208. package/src/vista/surface-registry.ts +0 -56
  209. package/src/vista/surfaces/ChartSurface.tsx +0 -34
  210. package/src/vista/surfaces/FilesSurface.tsx +0 -202
  211. package/src/vista/surfaces/FormSurface.tsx +0 -380
  212. package/src/vista/surfaces/HtmlSurface.tsx +0 -43
  213. package/src/vista/surfaces/TableSurface.tsx +0 -100
  214. package/src/vista/surfaces/UrlSurface.tsx +0 -40
  215. package/src/vista/surfaces/blob-surfaces.tsx +0 -139
  216. package/src/vista/surfaces/elicitation-transport.spec.ts +0 -369
  217. package/src/vista/surfaces/elicitation-transport.ts +0 -367
  218. package/src/vista/surfaces/file-surface-utils.ts +0 -69
  219. package/src/vista/surfaces/index.ts +0 -24
  220. package/src/vista/surfaces/register-surfaces.tsx +0 -139
  221. package/src/vista/surfaces/text-surfaces.tsx +0 -132
  222. package/src/vista/use-vista-tabs.ts +0 -196
  223. package/src/vista/vista-code-renderer-context.ts +0 -16
  224. package/src/vista/vista-code-renderer.tsx +0 -35
  225. package/src/vista/vista-file-context.ts +0 -14
  226. package/src/vista/vista-file-source.tsx +0 -141
  227. package/src/vista/vista-form-context.ts +0 -20
  228. package/src/vista/vista-form-host.tsx +0 -48
  229. package/src/vista/vista-model.ts +0 -137
  230. package/src/vista/vista-open-context.tsx +0 -27
  231. package/src/vista/vista-open-state.ts +0 -11
  232. package/src/vista/vista-payloads.ts +0 -635
  233. package/src/vista/vista-tabs-manifest.ts +0 -138
  234. package/src/vista/vista-tools.ts +0 -232
@@ -1,104 +0,0 @@
1
- import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
2
- import * as React from "react";
3
-
4
- import { buttonVariants } from './button-variants';
5
- import { cn } from '../cn';
6
-
7
- const AlertDialog = AlertDialogPrimitive.Root;
8
-
9
- const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
10
-
11
- const AlertDialogPortal = AlertDialogPrimitive.Portal;
12
-
13
- const AlertDialogOverlay = React.forwardRef<
14
- React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16
- >(({ className, ...props }, ref) => (
17
- <AlertDialogPrimitive.Overlay
18
- className={cn(
19
- "modal-scrim fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
20
- className,
21
- )}
22
- {...props}
23
- ref={ref}
24
- />
25
- ));
26
- AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
27
-
28
- const AlertDialogContent = React.forwardRef<
29
- React.ElementRef<typeof AlertDialogPrimitive.Content>,
30
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31
- >(({ className, ...props }, ref) => (
32
- <AlertDialogPortal>
33
- <AlertDialogOverlay />
34
- <AlertDialogPrimitive.Content
35
- ref={ref}
36
- className={cn(
37
- "modal-surface fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
38
- className,
39
- )}
40
- {...props}
41
- />
42
- </AlertDialogPortal>
43
- ));
44
- AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
45
-
46
- const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
47
- <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
48
- );
49
- AlertDialogHeader.displayName = "AlertDialogHeader";
50
-
51
- const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
52
- <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
53
- );
54
- AlertDialogFooter.displayName = "AlertDialogFooter";
55
-
56
- const AlertDialogTitle = React.forwardRef<
57
- React.ElementRef<typeof AlertDialogPrimitive.Title>,
58
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
59
- >(({ className, ...props }, ref) => (
60
- <AlertDialogPrimitive.Title ref={ref} className={cn("text-subtitle font-semibold", className)} {...props} />
61
- ));
62
- AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
63
-
64
- const AlertDialogDescription = React.forwardRef<
65
- React.ElementRef<typeof AlertDialogPrimitive.Description>,
66
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
67
- >(({ className, ...props }, ref) => (
68
- <AlertDialogPrimitive.Description ref={ref} className={cn("text-body-1 text-ink-3", className)} {...props} />
69
- ));
70
- AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
71
-
72
- const AlertDialogAction = React.forwardRef<
73
- React.ElementRef<typeof AlertDialogPrimitive.Action>,
74
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
75
- >(({ className, ...props }, ref) => (
76
- <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
77
- ));
78
- AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
79
-
80
- const AlertDialogCancel = React.forwardRef<
81
- React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
82
- React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
83
- >(({ className, ...props }, ref) => (
84
- <AlertDialogPrimitive.Cancel
85
- ref={ref}
86
- className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
87
- {...props}
88
- />
89
- ));
90
- AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
91
-
92
- export {
93
- AlertDialog,
94
- AlertDialogPortal,
95
- AlertDialogOverlay,
96
- AlertDialogTrigger,
97
- AlertDialogContent,
98
- AlertDialogHeader,
99
- AlertDialogFooter,
100
- AlertDialogTitle,
101
- AlertDialogDescription,
102
- AlertDialogAction,
103
- AlertDialogCancel,
104
- };
@@ -1,182 +0,0 @@
1
- import { useQuery } from '@tanstack/react-query';
2
- import { ChevronsUpDown, Loader2, Search } from 'lucide-react';
3
- import { useEffect, useRef, useState, type ReactNode } from 'react';
4
-
5
- import { cn } from '../cn';
6
- import { Button } from './button';
7
- import { Input } from './input';
8
- import { Popover, PopoverContent, PopoverTrigger } from './popover';
9
- import { useDebouncedValue } from '../hooks/use-debounced-value';
10
-
11
- export interface AsyncComboboxProps<T> {
12
- /** Unique key prefix for query caching to avoid collisions between combobox instances. */
13
- queryKeyPrefix?: string;
14
- /** Currently selected item (null = nothing selected). */
15
- value: T | null;
16
- /** Text shown on the trigger when an item is selected. */
17
- displayValue?: string;
18
- /** Trigger button placeholder when nothing is selected. */
19
- placeholder?: string;
20
- /** Placeholder inside the search input. */
21
- searchPlaceholder?: string;
22
- /** Message shown when the search returns no results. */
23
- emptyMessage?: string;
24
- /** Async (or sync) function that returns items matching the query. */
25
- onSearch: (query: string) => Promise<readonly T[]> | readonly T[];
26
- /**
27
- * Minimum characters before the search query is sent. Default is 0 — the
28
- * picker fetches the full list as soon as it opens so users can browse
29
- * without typing. Override to a higher number only when the underlying
30
- * loader cannot handle an empty query (very large unbounded sets).
31
- */
32
- minSearchLength?: number;
33
- /** Debounce delay in ms (default 300). */
34
- debounceMs?: number;
35
- /** Render a single result row. */
36
- renderItem: (item: T) => ReactNode;
37
- /** Unique key for each item. */
38
- getItemKey: (item: T) => string;
39
- /** Called when the user selects an item. */
40
- onSelect: (item: T) => void;
41
- /** Disable the combobox. */
42
- disabled?: boolean;
43
- /** Extra className for the trigger button. */
44
- triggerClassName?: string;
45
- }
46
-
47
- /**
48
- * Debounced async picker: a popover trigger + search input backed by a
49
- * react-query'd loader. Host-framework-agnostic — the caller supplies the
50
- * loader (`onSearch`) and row renderer, so it works against any data source.
51
- *
52
- * Requires `@tanstack/react-query` (an optional peer of the kernel) to be
53
- * installed and a `QueryClientProvider` mounted above.
54
- */
55
- export function AsyncCombobox<T>({
56
- queryKeyPrefix = 'default',
57
- value,
58
- displayValue,
59
- placeholder = 'Select…',
60
- searchPlaceholder = 'Search…',
61
- emptyMessage = 'No results found',
62
- onSearch,
63
- minSearchLength = 0,
64
- debounceMs = 300,
65
- renderItem,
66
- getItemKey,
67
- onSelect,
68
- disabled,
69
- triggerClassName,
70
- }: Readonly<AsyncComboboxProps<T>>) {
71
- const [open, setOpen] = useState(false);
72
- const [search, setSearch] = useState('');
73
- const inputRef = useRef<HTMLInputElement>(null);
74
-
75
- const debouncedSearch = useDebouncedValue(search, debounceMs);
76
-
77
- const searchEnabled = open && debouncedSearch.length >= minSearchLength;
78
-
79
- const { data: results = [], isLoading } = useQuery({
80
- queryKey: ['async-combobox', queryKeyPrefix, debouncedSearch],
81
- queryFn: () => onSearch(debouncedSearch),
82
- enabled: searchEnabled,
83
- staleTime: 30_000,
84
- });
85
-
86
- // Auto-focus the search input when the popover opens; clear search on close.
87
- useEffect(() => {
88
- if (open) {
89
- const timer = setTimeout(() => inputRef.current?.focus(), 50);
90
- return () => clearTimeout(timer);
91
- }
92
- setSearch('');
93
- return undefined;
94
- }, [open]);
95
-
96
- const handleSelect = (item: T) => {
97
- onSelect(item);
98
- setOpen(false);
99
- };
100
-
101
- const showTypeToSearchHint =
102
- !isLoading &&
103
- minSearchLength > 0 &&
104
- debouncedSearch.length < minSearchLength;
105
- const showEmptyMessage = !isLoading && searchEnabled && results.length === 0;
106
-
107
- return (
108
- <Popover open={open} onOpenChange={setOpen}>
109
- <PopoverTrigger asChild>
110
- <Button
111
- variant="outline"
112
- role="combobox"
113
- aria-expanded={open}
114
- disabled={disabled}
115
- className={cn(
116
- 'w-full justify-between font-normal',
117
- !value && 'text-ink-3',
118
- triggerClassName,
119
- )}
120
- >
121
- <span className="truncate">
122
- {value ? (displayValue ?? placeholder) : placeholder}
123
- </span>
124
- <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
125
- </Button>
126
- </PopoverTrigger>
127
- <PopoverContent
128
- className="w-[--radix-popover-trigger-width] min-w-[18rem] p-0"
129
- align="start"
130
- onOpenAutoFocus={(e) => e.preventDefault()}
131
- >
132
- {/* Search input */}
133
- <div className="relative border-b">
134
- <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-3" />
135
- <Input
136
- ref={inputRef}
137
- value={search}
138
- onChange={(e) => setSearch(e.target.value)}
139
- placeholder={searchPlaceholder}
140
- className="h-9 text-body-1 pl-8 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
141
- />
142
- </div>
143
-
144
- {/* Results — native scroll, not Radix ScrollArea (which collapses
145
- to content height when the parent uses max-h instead of h). */}
146
- <div className="max-h-80 overflow-y-auto overscroll-contain">
147
- <div className="p-1">
148
- {isLoading && (
149
- <div className="flex items-center justify-center py-4">
150
- <Loader2 className="h-4 w-4 animate-spin text-ink-3" />
151
- </div>
152
- )}
153
-
154
- {showTypeToSearchHint && (
155
- <p className="text-body-1 text-ink-3 text-center py-4">
156
- Type {minSearchLength}+ characters to search
157
- </p>
158
- )}
159
-
160
- {showEmptyMessage && (
161
- <p className="text-body-1 text-ink-3 text-center py-4">
162
- {emptyMessage}
163
- </p>
164
- )}
165
-
166
- {!isLoading &&
167
- results.map((item) => (
168
- <button
169
- key={getItemKey(item)}
170
- type="button"
171
- className="w-full text-left text-body-1 px-2 py-1.5 rounded hover:bg-paper-elev transition-colors flex items-center gap-2"
172
- onClick={() => handleSelect(item)}
173
- >
174
- {renderItem(item)}
175
- </button>
176
- ))}
177
- </div>
178
- </div>
179
- </PopoverContent>
180
- </Popover>
181
- );
182
- }
@@ -1,21 +0,0 @@
1
- import { cva } from 'class-variance-authority';
2
-
3
- export const badgeVariants = cva(
4
- 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-body-1 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
5
- {
6
- variants: {
7
- variant: {
8
- default:
9
- 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
10
- secondary:
11
- 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
12
- destructive:
13
- 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
14
- outline: 'border-rule bg-paper text-ink',
15
- },
16
- },
17
- defaultVariants: {
18
- variant: 'default',
19
- },
20
- },
21
- );
@@ -1,25 +0,0 @@
1
- import * as React from 'react';
2
-
3
- import { cn } from '../cn';
4
- import { badgeVariants } from './badge-variants';
5
-
6
- import type { VariantProps } from 'class-variance-authority';
7
-
8
- export interface BadgeProps
9
- extends React.HTMLAttributes<HTMLSpanElement>,
10
- VariantProps<typeof badgeVariants> {}
11
-
12
- const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
13
- ({ className, variant, ...props }, ref) => {
14
- return (
15
- <span
16
- ref={ref}
17
- className={cn(badgeVariants({ variant }), className)}
18
- {...props}
19
- />
20
- );
21
- },
22
- );
23
- Badge.displayName = 'Badge';
24
-
25
- export { Badge };
@@ -1,31 +0,0 @@
1
- import { cva } from 'class-variance-authority';
2
-
3
- export const buttonVariants = cva(
4
- 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-1 font-medium ring-offset-background transition-[background-color,color,border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
5
- {
6
- variants: {
7
- variant: {
8
- default:
9
- 'bg-primary text-primary-foreground hover:bg-primary/90',
10
- destructive:
11
- 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
12
- outline:
13
- 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
14
- secondary:
15
- 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
16
- ghost: 'text-ink-2 hover:bg-paper-elev hover:text-ink',
17
- link: 'text-primary underline-offset-4 hover:underline',
18
- },
19
- size: {
20
- default: 'h-10 px-4 py-2',
21
- sm: 'h-9 rounded-md px-3',
22
- lg: 'h-11 rounded-md px-8',
23
- icon: 'h-10 w-10',
24
- },
25
- },
26
- defaultVariants: {
27
- variant: 'default',
28
- size: 'default',
29
- },
30
- },
31
- );
@@ -1,29 +0,0 @@
1
- import { Slot } from '@radix-ui/react-slot';
2
- import * as React from 'react';
3
-
4
- import { cn } from '../cn';
5
- import { buttonVariants } from './button-variants';
6
-
7
- import type { VariantProps } from 'class-variance-authority';
8
-
9
- export interface ButtonProps
10
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
11
- VariantProps<typeof buttonVariants> {
12
- asChild?: boolean;
13
- }
14
-
15
- const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
16
- ({ className, variant, size, asChild = false, ...props }, ref) => {
17
- const Comp = asChild ? Slot : 'button';
18
- return (
19
- <Comp
20
- className={cn(buttonVariants({ variant, size, className }))}
21
- ref={ref}
22
- {...props}
23
- />
24
- );
25
- },
26
- );
27
- Button.displayName = 'Button';
28
-
29
- export { Button };
@@ -1,43 +0,0 @@
1
- import * as React from "react";
2
-
3
- import { cn } from '../cn';
4
-
5
- const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
6
- <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
7
- ));
8
- Card.displayName = "Card";
9
-
10
- const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
11
- ({ className, ...props }, ref) => (
12
- <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
13
- ),
14
- );
15
- CardHeader.displayName = "CardHeader";
16
-
17
- const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
18
- ({ className, children, ...props }, ref) => (
19
- <h3 ref={ref} className={cn("text-display font-semibold leading-none tracking-tight", className)} {...props}>{children}</h3>
20
- ),
21
- );
22
- CardTitle.displayName = "CardTitle";
23
-
24
- const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
25
- ({ className, ...props }, ref) => (
26
- <p ref={ref} className={cn("text-body-1 text-ink-3", className)} {...props} />
27
- ),
28
- );
29
- CardDescription.displayName = "CardDescription";
30
-
31
- const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
32
- ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
33
- );
34
- CardContent.displayName = "CardContent";
35
-
36
- const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
37
- ({ className, ...props }, ref) => (
38
- <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
39
- ),
40
- );
41
- CardFooter.displayName = "CardFooter";
42
-
43
- export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
@@ -1,26 +0,0 @@
1
- import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
2
- import { Check } from "lucide-react";
3
- import * as React from "react";
4
-
5
- import { cn } from '../cn';
6
-
7
- const Checkbox = React.forwardRef<
8
- React.ElementRef<typeof CheckboxPrimitive.Root>,
9
- React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10
- >(({ className, ...props }, ref) => (
11
- <CheckboxPrimitive.Root
12
- ref={ref}
13
- className={cn(
14
- "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15
- className,
16
- )}
17
- {...props}
18
- >
19
- <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
20
- <Check className="h-4 w-4" />
21
- </CheckboxPrimitive.Indicator>
22
- </CheckboxPrimitive.Root>
23
- ));
24
- Checkbox.displayName = CheckboxPrimitive.Root.displayName;
25
-
26
- export { Checkbox };
@@ -1,9 +0,0 @@
1
- import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
2
-
3
- const Collapsible = CollapsiblePrimitive.Root;
4
-
5
- const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
6
-
7
- const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
8
-
9
- export { Collapsible, CollapsibleTrigger, CollapsibleContent };
@@ -1,103 +0,0 @@
1
- import * as DialogPrimitive from "@radix-ui/react-dialog";
2
- import { X } from "lucide-react";
3
- import * as React from "react";
4
-
5
- import { cn } from '../cn';
6
-
7
- const Dialog = DialogPrimitive.Root;
8
-
9
- const DialogTrigger = DialogPrimitive.Trigger;
10
-
11
- const DialogPortal = DialogPrimitive.Portal;
12
-
13
- const DialogClose = DialogPrimitive.Close;
14
-
15
- const DialogOverlay = React.forwardRef<
16
- React.ElementRef<typeof DialogPrimitive.Overlay>,
17
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
18
- >(({ className, ...props }, ref) => (
19
- <DialogPrimitive.Overlay
20
- ref={ref}
21
- className={cn(
22
- "modal-scrim fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
23
- className,
24
- )}
25
- {...props}
26
- />
27
- ));
28
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
29
-
30
- const DialogContent = React.forwardRef<
31
- React.ElementRef<typeof DialogPrimitive.Content>,
32
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { 'data-hide-close'?: boolean }
33
- >(({ className, children, 'data-hide-close': hideClose, 'aria-describedby': ariaDescribedBy, ...props }, ref) => (
34
- <DialogPortal>
35
- <DialogOverlay />
36
- <DialogPrimitive.Content
37
- ref={ref}
38
- // Pulling `aria-describedby` out of props and re-passing it (even
39
- // when undefined) silences Radix's "Missing Description or
40
- // aria-describedby={undefined}" warning for dialogs that
41
- // intentionally have no description. Dialogs that DO include a
42
- // <DialogDescription> still set this through the spread.
43
- aria-describedby={ariaDescribedBy}
44
- className={cn(
45
- "modal-surface fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg max-h-[calc(100dvh-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
46
- className,
47
- )}
48
- {...props}
49
- >
50
- {children}
51
- {!hideClose && (
52
- <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm text-ink-3 ring-offset-background transition-colors hover:text-ink focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
53
- <X className="h-4 w-4" />
54
- <span className="sr-only">Close</span>
55
- </DialogPrimitive.Close>
56
- )}
57
- </DialogPrimitive.Content>
58
- </DialogPortal>
59
- ));
60
- DialogContent.displayName = DialogPrimitive.Content.displayName;
61
-
62
- const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
63
- <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
64
- );
65
- DialogHeader.displayName = "DialogHeader";
66
-
67
- const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
68
- <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
69
- );
70
- DialogFooter.displayName = "DialogFooter";
71
-
72
- const DialogTitle = React.forwardRef<
73
- React.ElementRef<typeof DialogPrimitive.Title>,
74
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
75
- >(({ className, ...props }, ref) => (
76
- <DialogPrimitive.Title
77
- ref={ref}
78
- className={cn("text-subtitle font-semibold leading-none tracking-tight", className)}
79
- {...props}
80
- />
81
- ));
82
- DialogTitle.displayName = DialogPrimitive.Title.displayName;
83
-
84
- const DialogDescription = React.forwardRef<
85
- React.ElementRef<typeof DialogPrimitive.Description>,
86
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
87
- >(({ className, ...props }, ref) => (
88
- <DialogPrimitive.Description ref={ref} className={cn("text-body-1 text-ink-3", className)} {...props} />
89
- ));
90
- DialogDescription.displayName = DialogPrimitive.Description.displayName;
91
-
92
- export {
93
- Dialog,
94
- DialogPortal,
95
- DialogOverlay,
96
- DialogClose,
97
- DialogTrigger,
98
- DialogContent,
99
- DialogHeader,
100
- DialogFooter,
101
- DialogTitle,
102
- DialogDescription,
103
- };