@sequenceholdings/atlas-ui 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.d.ts +157 -0
- package/dist/charts.mjs +35 -23
- package/dist/index.d.ts +3961 -0
- package/dist/index.mjs +36736 -10455
- package/dist/{utils-Dhlckutd.js → utils-BZS7Y02J.js} +1 -3
- package/package.json +15 -7
- package/dist/charts.mjs.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/dist/utils-Dhlckutd.js.map +0 -1
- package/src/charts.ts +0 -17
- package/src/index.ts +0 -216
- package/src/process-env.d.ts +0 -8
- package/src/tokens.css +0 -220
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,3961 @@
|
|
|
1
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
2
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
+
import { ClassProp } from 'class-variance-authority/types';
|
|
4
|
+
import { ClassValue } from 'clsx';
|
|
5
|
+
import { ColumnDef } from '@tanstack/react-table';
|
|
6
|
+
import { ColumnFiltersState } from '@tanstack/react-table';
|
|
7
|
+
import { Command as Command_2 } from 'cmdk';
|
|
8
|
+
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
9
|
+
import { DayPicker } from 'react-day-picker';
|
|
10
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
11
|
+
import { Dispatch } from 'react';
|
|
12
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
13
|
+
import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
|
|
14
|
+
import { InputProps as InputProps_2 } from 'src';
|
|
15
|
+
import { JSX } from 'react/jsx-runtime';
|
|
16
|
+
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
17
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
18
|
+
import { QueryKey } from '@tanstack/react-query';
|
|
19
|
+
import * as React_2 from 'react';
|
|
20
|
+
import { ReactNode } from 'react';
|
|
21
|
+
import { Row } from '@tanstack/react-table';
|
|
22
|
+
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
23
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
24
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
25
|
+
import { SetStateAction } from 'react';
|
|
26
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
27
|
+
import { SortingState } from '@tanstack/react-table';
|
|
28
|
+
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
29
|
+
import { Table as Table_2 } from '@tanstack/react-table';
|
|
30
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
31
|
+
import { toast } from 'sonner';
|
|
32
|
+
import { ToasterProps } from 'sonner';
|
|
33
|
+
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
34
|
+
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
35
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
36
|
+
import { UseMutationResult } from '@tanstack/react-query';
|
|
37
|
+
import { VariantProps } from 'class-variance-authority';
|
|
38
|
+
|
|
39
|
+
export declare function AckBadges({ ack1, ack2, currentUserId, requiredAcks, onAck, onUnack, disabled, disabledReason, className, }: AckBadgesProps): JSX.Element;
|
|
40
|
+
|
|
41
|
+
export declare interface AckBadgesProps {
|
|
42
|
+
ack1?: AckUser;
|
|
43
|
+
ack2?: AckUser;
|
|
44
|
+
currentUserId: string;
|
|
45
|
+
requiredAcks: 1 | 2;
|
|
46
|
+
onAck?: () => void;
|
|
47
|
+
onUnack?: () => void;
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
disabledReason?: string;
|
|
50
|
+
className?: string;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export declare interface AckUser {
|
|
54
|
+
userId: string;
|
|
55
|
+
displayName: string;
|
|
56
|
+
at: string;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export declare const AGENT_TINTS: {
|
|
60
|
+
readonly teal: {
|
|
61
|
+
readonly bg: "bg-teal-50";
|
|
62
|
+
readonly fg: "text-teal-700";
|
|
63
|
+
};
|
|
64
|
+
readonly violet: {
|
|
65
|
+
readonly bg: "bg-violet-50";
|
|
66
|
+
readonly fg: "text-violet-700";
|
|
67
|
+
};
|
|
68
|
+
readonly amber: {
|
|
69
|
+
readonly bg: "bg-amber-50";
|
|
70
|
+
readonly fg: "text-amber-700";
|
|
71
|
+
};
|
|
72
|
+
readonly rose: {
|
|
73
|
+
readonly bg: "bg-rose-50";
|
|
74
|
+
readonly fg: "text-rose-700";
|
|
75
|
+
};
|
|
76
|
+
readonly sky: {
|
|
77
|
+
readonly bg: "bg-sky-50";
|
|
78
|
+
readonly fg: "text-sky-700";
|
|
79
|
+
};
|
|
80
|
+
readonly emerald: {
|
|
81
|
+
readonly bg: "bg-emerald-50";
|
|
82
|
+
readonly fg: "text-emerald-700";
|
|
83
|
+
};
|
|
84
|
+
readonly orange: {
|
|
85
|
+
readonly bg: "bg-orange-50";
|
|
86
|
+
readonly fg: "text-orange-700";
|
|
87
|
+
};
|
|
88
|
+
readonly indigo: {
|
|
89
|
+
readonly bg: "bg-indigo-50";
|
|
90
|
+
readonly fg: "text-indigo-700";
|
|
91
|
+
};
|
|
92
|
+
readonly graphite: {
|
|
93
|
+
readonly bg: "bg-black-6";
|
|
94
|
+
readonly fg: "text-black-80";
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
export declare type AgentTint = keyof typeof AGENT_TINTS;
|
|
99
|
+
|
|
100
|
+
export declare const AlertDialog: React_2.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
101
|
+
|
|
102
|
+
export declare const AlertDialogAction: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
103
|
+
|
|
104
|
+
export declare const AlertDialogCancel: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
105
|
+
|
|
106
|
+
export declare const AlertDialogContent: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
107
|
+
|
|
108
|
+
export declare const AlertDialogDescription: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
|
|
109
|
+
|
|
110
|
+
export declare const AlertDialogFooter: {
|
|
111
|
+
({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
112
|
+
displayName: string;
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
export declare const AlertDialogHeader: {
|
|
116
|
+
({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
117
|
+
displayName: string;
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export declare const AlertDialogOverlay: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
121
|
+
|
|
122
|
+
export declare function AlertDialogPortal({ container, ...props }: React_2.ComponentProps<typeof AlertDialogPrimitive.Portal>): JSX.Element;
|
|
123
|
+
|
|
124
|
+
export declare const AlertDialogTitle: React_2.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
|
|
125
|
+
|
|
126
|
+
export declare const AlertDialogTrigger: React_2.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Lifecycle status for an Atlas app.
|
|
130
|
+
*
|
|
131
|
+
* GA is intentionally NOT a member of this union. GA = no badge, signaled by
|
|
132
|
+
* `App.status` being absent. Adding `'ga'` would suggest you could set it
|
|
133
|
+
* explicitly, but no renderer draws anything for GA — the truthy check on
|
|
134
|
+
* `status` is the "show a badge" gate in `<AppStatusBadge>`, the sidebar, the
|
|
135
|
+
* TitleBar, and the Add Apps dialog. Keep GA implicit; only call out alpha /
|
|
136
|
+
* beta. To promote an app from beta → GA, remove the `status` field from its
|
|
137
|
+
* entry (see the `set-product-status` skill).
|
|
138
|
+
*/
|
|
139
|
+
declare type AppStatus = 'alpha' | 'beta';
|
|
140
|
+
|
|
141
|
+
export declare function AppStatusBadge({ status, className }: AppStatusBadgeProps): JSX.Element;
|
|
142
|
+
|
|
143
|
+
declare interface AppStatusBadgeProps {
|
|
144
|
+
status: AppStatus;
|
|
145
|
+
className?: string;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Button that reflects the lifecycle of an async mutation:
|
|
150
|
+
* idle → pending (spinner) → success/error (auto-resets).
|
|
151
|
+
*
|
|
152
|
+
* Designed to pair with TanStack Query's `useMutation` return values.
|
|
153
|
+
*/
|
|
154
|
+
export declare function AsyncActionButton({ onClick, isPending, isSuccess, isError, error, icon, label, pendingLabel, successLabel, successTimeout, errorTimeout, className, }: AsyncActionButtonProps): JSX.Element;
|
|
155
|
+
|
|
156
|
+
export declare interface AsyncActionButtonProps {
|
|
157
|
+
onClick: () => void;
|
|
158
|
+
isPending: boolean;
|
|
159
|
+
isSuccess: boolean;
|
|
160
|
+
isError: boolean;
|
|
161
|
+
error?: Error | null;
|
|
162
|
+
icon: React.ReactNode;
|
|
163
|
+
label: string;
|
|
164
|
+
pendingLabel: string;
|
|
165
|
+
/** Label shown on success. Defaults to "Triggered". */
|
|
166
|
+
successLabel?: string;
|
|
167
|
+
/** How long to show the success state before resetting (ms). */
|
|
168
|
+
successTimeout?: number;
|
|
169
|
+
/** How long to show the error state before resetting (ms). */
|
|
170
|
+
errorTimeout?: number;
|
|
171
|
+
className?: string;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
export declare function AvatarTextCell({ icon, initials, title, subtitle, tag, tint, rightSlot, className, }: AvatarTextCellProps): JSX.Element;
|
|
175
|
+
|
|
176
|
+
declare interface AvatarTextCellProps {
|
|
177
|
+
/** Icon rendered inside the tinted square. */
|
|
178
|
+
icon?: React_2.ReactNode;
|
|
179
|
+
/** Fallback initials when no icon is supplied. */
|
|
180
|
+
initials?: string;
|
|
181
|
+
title: React_2.ReactNode;
|
|
182
|
+
subtitle?: React_2.ReactNode;
|
|
183
|
+
/** Small mono tag rendered inline to the right of the title (e.g. "Sonnet 4.5"). */
|
|
184
|
+
tag?: React_2.ReactNode;
|
|
185
|
+
tint?: AgentTint;
|
|
186
|
+
/** Override inline action rendered on hover at the right of the title row. */
|
|
187
|
+
rightSlot?: React_2.ReactNode;
|
|
188
|
+
className?: string;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
|
|
192
|
+
|
|
193
|
+
declare interface BadgeProps extends React_2.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
export declare const badgeVariants: (props?: ({
|
|
197
|
+
variant?: "success" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "alpha" | "beta" | null | undefined;
|
|
198
|
+
} & ClassProp) | undefined) => string;
|
|
199
|
+
|
|
200
|
+
export declare function Breadcrumb({ ...props }: React_2.ComponentProps<"nav">): JSX.Element;
|
|
201
|
+
|
|
202
|
+
export declare function BreadcrumbEllipsis({ className, ...props }: React_2.ComponentProps<"span">): JSX.Element;
|
|
203
|
+
|
|
204
|
+
export declare function BreadcrumbItem({ className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
|
|
205
|
+
|
|
206
|
+
export declare function BreadcrumbLink({ asChild, className, ...props }: React_2.ComponentProps<"a"> & {
|
|
207
|
+
asChild?: boolean;
|
|
208
|
+
}): JSX.Element;
|
|
209
|
+
|
|
210
|
+
export declare function BreadcrumbList({ className, ...props }: React_2.ComponentProps<"ol">): JSX.Element;
|
|
211
|
+
|
|
212
|
+
export declare function BreadcrumbPage({ className, ...props }: React_2.ComponentProps<"span">): JSX.Element;
|
|
213
|
+
|
|
214
|
+
export declare function BreadcrumbSeparator({ children, className, ...props }: React_2.ComponentProps<"li">): JSX.Element;
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Generate heat-colored columns for time-period keys (dates, weeks, months).
|
|
218
|
+
* Each column auto-computes min/max from visible rows for relative coloring.
|
|
219
|
+
*/
|
|
220
|
+
export declare function buildPeriodColumns<T extends Record<string, any>>({ periods, accessor, formatLabel, formatValue, }: {
|
|
221
|
+
periods: string[];
|
|
222
|
+
accessor: (row: T) => Record<string, number>;
|
|
223
|
+
formatLabel: (period: string) => string;
|
|
224
|
+
/** Custom value formatter. Defaults to whole-dollar currency. */
|
|
225
|
+
formatValue?: (value: number) => string;
|
|
226
|
+
}): ColumnDef<T>[];
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* A "Total" column with a value + horizontal progress bar.
|
|
230
|
+
*/
|
|
231
|
+
export declare function buildTotalColumn<T>({ accessor, maxValue, formatValue, barColor, }: {
|
|
232
|
+
accessor: (row: T) => number;
|
|
233
|
+
maxValue: number;
|
|
234
|
+
formatValue?: (value: number) => string;
|
|
235
|
+
barColor?: string;
|
|
236
|
+
}): ColumnDef<T>;
|
|
237
|
+
|
|
238
|
+
export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
239
|
+
|
|
240
|
+
export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
241
|
+
asChild?: boolean;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
export declare const buttonVariants: (props?: ({
|
|
245
|
+
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
246
|
+
size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
247
|
+
} & ClassProp) | undefined) => string;
|
|
248
|
+
|
|
249
|
+
export declare function Calendar({ className, classNames, showOutsideDays, ...props }: React_2.ComponentProps<typeof DayPicker>): JSX.Element;
|
|
250
|
+
|
|
251
|
+
/**
|
|
252
|
+
* Card — the foundational surface for grouped content (dashboards,
|
|
253
|
+
* metrics, forms, lists, detail pages).
|
|
254
|
+
*
|
|
255
|
+
* Visual contract:
|
|
256
|
+
* - Background: `bg-card`, which maps to the `--card` design token.
|
|
257
|
+
* `--card` is pure white (`oklch(1 0 0)`) in every Atlas app theme
|
|
258
|
+
* — verified in `atlas/src/index.css`. Dark mode resolves to the
|
|
259
|
+
* warm-dark surface token. Do NOT hardcode `bg-white` / `#fff`:
|
|
260
|
+
* the theme system needs the variable to switch modes reliably.
|
|
261
|
+
* - Text: `text-card-foreground` — paired with `--card` so reversed
|
|
262
|
+
* themes flip body color correctly.
|
|
263
|
+
* - Separation: a 1px `border` (maps to `--border`), NOT a drop
|
|
264
|
+
* shadow. Matches the flat aesthetic used by ProDataTable,
|
|
265
|
+
* DashboardShell, Input, Select, Textarea, Switch, and Button.
|
|
266
|
+
* Drop shadows on cards quickly compound against each other in
|
|
267
|
+
* dense dashboards (card-inside-card, kpi-tile-inside-card, etc.)
|
|
268
|
+
* and visually muddy the hierarchy.
|
|
269
|
+
* - Radius: `rounded-xl` via the design system — 12px at default
|
|
270
|
+
* scale; per-app themes can tighten/loosen via `--radius`.
|
|
271
|
+
*
|
|
272
|
+
* When a card genuinely needs elevation (modal/popover-adjacent lifts,
|
|
273
|
+
* drag affordances), opt in explicitly with `shadow-sm` / `shadow-md`
|
|
274
|
+
* at the call site rather than baking it into the base.
|
|
275
|
+
*/
|
|
276
|
+
export declare const Card: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
277
|
+
|
|
278
|
+
export declare const CardContent: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
279
|
+
|
|
280
|
+
export declare const CardDescription: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
281
|
+
|
|
282
|
+
export declare const CardHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
283
|
+
|
|
284
|
+
export declare const CardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
|
|
285
|
+
|
|
286
|
+
declare interface CellCoord {
|
|
287
|
+
rowId: string;
|
|
288
|
+
columnId: string;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/**
|
|
292
|
+
* Checkbox — matches shadcn's canonical 16×16 design:
|
|
293
|
+
*
|
|
294
|
+
* - `size-4` (16px)
|
|
295
|
+
* - `rounded-xs` (4px, `--radius-xs`) — a square with softened corners,
|
|
296
|
+
* NOT a circle. Atlas's scale shifted `--radius-sm` up to 8px, which
|
|
297
|
+
* would render a 16px checkbox as a 50% pill. `--radius-xs` closes
|
|
298
|
+
* the gap at the tight end specifically for cases like this.
|
|
299
|
+
* - Neutral `border-input` when unchecked; flips to `border-primary`
|
|
300
|
+
* when checked/indeterminate so the outline blends with the fill.
|
|
301
|
+
* - No drop shadow — consistent with the rest of Atlas's form
|
|
302
|
+
* primitives (Input, Select, Button).
|
|
303
|
+
* - Distinct icon for indeterminate state (horizontal minus) so a
|
|
304
|
+
* bulk-select header reads as "some selected" without showing a
|
|
305
|
+
* check mark. Switching is driven by Radix's `data-state` attribute
|
|
306
|
+
* via Tailwind `group-data-*` modifiers — no extra state wiring.
|
|
307
|
+
*
|
|
308
|
+
* Composition safety: the Check + Minus icons each carry an explicit
|
|
309
|
+
* `text-current` class even though the Indicator parent already sets
|
|
310
|
+
* `text-current`. This is NOT redundant — it's the safeguard against
|
|
311
|
+
* descendant-svg dyeing rules like cmdk's
|
|
312
|
+
* `[&_svg:not([class*='text-'])]:text-muted-foreground` on CommandItem.
|
|
313
|
+
* The icons need their OWN `text-*` class on the svg element so the
|
|
314
|
+
* `:not([class*='text-'])` filter doesn't match them. See DESIGN.md
|
|
315
|
+
* "Composition safety" and `controls:compositions` in the Design System.
|
|
316
|
+
*/
|
|
317
|
+
export declare const Checkbox: React_2.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
318
|
+
|
|
319
|
+
/**
|
|
320
|
+
* A crisp multi-select rendered as toggleable option cards — a nicer stand-in
|
|
321
|
+
* for a grid of native checkboxes. Reusable for any small set of multi-choice
|
|
322
|
+
* options (review areas, tags, scopes, …).
|
|
323
|
+
*/
|
|
324
|
+
export declare function CheckboxGroup<T extends string>({ options, value, onChange, columns, className, }: CheckboxGroupProps<T>): JSX.Element;
|
|
325
|
+
|
|
326
|
+
export declare interface CheckboxGroupProps<T extends string> {
|
|
327
|
+
options: CheckboxOption<T>[];
|
|
328
|
+
value: T[];
|
|
329
|
+
onChange: (next: T[]) => void;
|
|
330
|
+
columns?: 1 | 2 | 3;
|
|
331
|
+
className?: string;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
export declare interface CheckboxOption<T extends string> {
|
|
335
|
+
value: T;
|
|
336
|
+
label: string;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
declare const CHIP_TONES: {
|
|
340
|
+
readonly default: "border-black-10 bg-black-2 text-black-70";
|
|
341
|
+
readonly danger: "border-red-200 bg-red-50 text-red-700";
|
|
342
|
+
readonly warning: "border-amber-200 bg-amber-50 text-amber-700";
|
|
343
|
+
readonly success: "border-emerald-200 bg-emerald-50 text-emerald-700";
|
|
344
|
+
};
|
|
345
|
+
|
|
346
|
+
export declare const ChoiceCard: React_2.ForwardRefExoticComponent<ChoiceCardProps & React_2.RefAttributes<HTMLLabelElement>>;
|
|
347
|
+
|
|
348
|
+
/**
|
|
349
|
+
* ChoiceCardGroup — the canonical wrapper for a stack of `ChoiceCard`s.
|
|
350
|
+
*
|
|
351
|
+
* Differences from `FieldGroup`:
|
|
352
|
+
* - Gap is `gap-2` (8px), not `gap-7` (28px). ChoiceCards are visually
|
|
353
|
+
* dense already (border + padding + hover); a tight gap reads as a
|
|
354
|
+
* single group rather than a loose collection of unrelated rows.
|
|
355
|
+
* - Optional `searchable` — adds a search input that filters children
|
|
356
|
+
* by their `searchTerms` prop (with text fallbacks). Useful when the
|
|
357
|
+
* underlying list is long (tool palettes, integrations, etc.).
|
|
358
|
+
*
|
|
359
|
+
* Children are expected to be `<ChoiceCard>` elements. Non-ChoiceCard
|
|
360
|
+
* children pass through unchanged and aren't affected by the filter —
|
|
361
|
+
* so you can intermix dividers, section headers, or `<FieldSeparator>`
|
|
362
|
+
* without them being stripped when the user types.
|
|
363
|
+
*/
|
|
364
|
+
export declare const ChoiceCardGroup: React_2.ForwardRefExoticComponent<ChoiceCardGroupProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
365
|
+
|
|
366
|
+
export declare interface ChoiceCardGroupProps extends React_2.HTMLAttributes<HTMLDivElement> {
|
|
367
|
+
/**
|
|
368
|
+
* When true, renders a search input above the list that filters visible
|
|
369
|
+
* cards by matching the query against each card's `searchTerms` prop
|
|
370
|
+
* (or a fallback derived from the card's `title` / `description`).
|
|
371
|
+
* Intended for long lists — tool pickers, skill palettes, integration
|
|
372
|
+
* catalogs — where users need to narrow down quickly.
|
|
373
|
+
*/
|
|
374
|
+
searchable?: boolean;
|
|
375
|
+
/** Placeholder shown in the search input. Defaults to `'Search'`. */
|
|
376
|
+
searchPlaceholder?: string;
|
|
377
|
+
/**
|
|
378
|
+
* Rendered when the search query matches zero cards. Defaults to a
|
|
379
|
+
* muted "No matches" row. Pass a richer ReactNode (illustration, CTA,
|
|
380
|
+
* etc.) when context warrants it.
|
|
381
|
+
*/
|
|
382
|
+
emptyState?: React_2.ReactNode;
|
|
383
|
+
children?: React_2.ReactNode;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* ChoiceCard — card-style selection row built on shadcn's `Field` family.
|
|
388
|
+
*
|
|
389
|
+
* Composes `FieldLabel` (which makes the whole card clickable as a native
|
|
390
|
+
* label) + `Field` (horizontal) + `FieldContent` (holding `FieldTitle` +
|
|
391
|
+
* `FieldDescription`) + `Switch`. This is the canonical "Switch Choice
|
|
392
|
+
* Card" pattern from shadcn — wrapping it here saves consumers from
|
|
393
|
+
* hand-assembling the five Field primitives every time and ensures the
|
|
394
|
+
* shared selected-tint behavior (`has-data-[state=checked]:bg-primary/5`)
|
|
395
|
+
* kicks in consistently.
|
|
396
|
+
*
|
|
397
|
+
* Composition:
|
|
398
|
+
* ```tsx
|
|
399
|
+
* import { ChoiceCard, ChoiceCardGroup } from '@sequenceholdings/atlas-ui'
|
|
400
|
+
*
|
|
401
|
+
* <ChoiceCardGroup>
|
|
402
|
+
* <ChoiceCard
|
|
403
|
+
* title="Web search"
|
|
404
|
+
* description="General web lookup via platform search provider"
|
|
405
|
+
* checked={enabled}
|
|
406
|
+
* onCheckedChange={setEnabled}
|
|
407
|
+
* />
|
|
408
|
+
* </ChoiceCardGroup>
|
|
409
|
+
* ```
|
|
410
|
+
*
|
|
411
|
+
* `ChoiceCardGroup` is the recommended wrapper — it renders choice cards
|
|
412
|
+
* at a tighter 8px gap (vs `FieldGroup`'s 28px) and supports an optional
|
|
413
|
+
* search input for long lists. `FieldGroup` remains available for mixed
|
|
414
|
+
* Field layouts where the looser spacing is intentional.
|
|
415
|
+
*
|
|
416
|
+
* When you need extra content below the description (e.g. a secondary
|
|
417
|
+
* checkbox, a config chip, a status indicator), pass it via `children` —
|
|
418
|
+
* it renders inside `FieldContent` after the description.
|
|
419
|
+
*
|
|
420
|
+
* When you need a different trailing control (Checkbox, Radio, icon
|
|
421
|
+
* button), pass it via `control`; otherwise the default `Switch` is used.
|
|
422
|
+
* Controls receive their own `onClick` handlers and don't need propagation
|
|
423
|
+
* handling — the label wiring covers row clicks.
|
|
424
|
+
*/
|
|
425
|
+
declare interface ChoiceCardProps {
|
|
426
|
+
/**
|
|
427
|
+
* Leading icon slot — renders as a tinted 32px square tile on the left
|
|
428
|
+
* of the card. Accepts a lucide/tabler icon; the tile styling and sizing
|
|
429
|
+
* are handled here so callers just pass the glyph.
|
|
430
|
+
*/
|
|
431
|
+
icon?: React_2.ReactNode;
|
|
432
|
+
/**
|
|
433
|
+
* Primary label — renders inside `FieldTitle`. Accepts a ReactNode so
|
|
434
|
+
* inline badges / tags can sit next to the title.
|
|
435
|
+
*/
|
|
436
|
+
title: React_2.ReactNode;
|
|
437
|
+
/** Secondary text — renders inside `FieldDescription`. */
|
|
438
|
+
description?: React_2.ReactNode;
|
|
439
|
+
/**
|
|
440
|
+
* Default trailing control is a `Switch`. Pass a custom control here
|
|
441
|
+
* to use something else (Checkbox, Radio, icon button). The custom
|
|
442
|
+
* control is responsible for its own state — `checked` /
|
|
443
|
+
* `onCheckedChange` are ignored when `control` is set.
|
|
444
|
+
*/
|
|
445
|
+
control?: React_2.ReactNode;
|
|
446
|
+
/** Forwarded to the default `Switch`. */
|
|
447
|
+
checked?: boolean;
|
|
448
|
+
/** Forwarded to the default `Switch`. */
|
|
449
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
450
|
+
/** Forwarded to the default `Switch` — also surfaces Field's disabled styling. */
|
|
451
|
+
disabled?: boolean;
|
|
452
|
+
/**
|
|
453
|
+
* Optional id. When omitted, one is generated so the FieldLabel's
|
|
454
|
+
* `htmlFor` binds to the Switch automatically. Override only when the
|
|
455
|
+
* consumer needs to reference the control id externally.
|
|
456
|
+
*/
|
|
457
|
+
id?: string;
|
|
458
|
+
/**
|
|
459
|
+
* Canonical searchable text used by `ChoiceCardGroup` when `searchable`
|
|
460
|
+
* is enabled. Lets callers control exactly what a query matches against
|
|
461
|
+
* — important when `title` / `description` are ReactNodes (badges,
|
|
462
|
+
* icons, fragments) that can't be reliably stringified.
|
|
463
|
+
*
|
|
464
|
+
* When omitted, the group falls back to stringifying whatever string
|
|
465
|
+
* content it can extract from `title` and `description`; works fine for
|
|
466
|
+
* plain-text cards, unreliable for rich ones. Provide it explicitly
|
|
467
|
+
* for any list where search matters.
|
|
468
|
+
*/
|
|
469
|
+
searchTerms?: string;
|
|
470
|
+
/** Additional content rendered inside FieldContent after the description. */
|
|
471
|
+
children?: React_2.ReactNode;
|
|
472
|
+
className?: string;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
export declare function cn(...inputs: ClassValue[]): string;
|
|
476
|
+
|
|
477
|
+
export declare const CodeBadge: React_2.ForwardRefExoticComponent<CodeBadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
|
|
478
|
+
|
|
479
|
+
declare interface CodeBadgeProps extends React_2.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof codeBadgeVariants> {
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
/**
|
|
483
|
+
* CodeBadge — small inline monospace pill for literal strings.
|
|
484
|
+
*
|
|
485
|
+
* Use for identifiers that read as "code" rather than prose: model IDs
|
|
486
|
+
* (`gemini-3.1-flash-lite-preview`), version labels (`v14`), commit hashes,
|
|
487
|
+
* cron expressions, IDs, etc. Sits naturally next to titles, inside table
|
|
488
|
+
* cells, or in top-bar identity rows.
|
|
489
|
+
*
|
|
490
|
+
* When to reach for this vs. `Badge`:
|
|
491
|
+
* - `Badge` — semantic status/tone (success, destructive, outline)
|
|
492
|
+
* - `CodeBadge` — typographic tag (monospace, muted bg, neutral)
|
|
493
|
+
*
|
|
494
|
+
* Sizes:
|
|
495
|
+
* - `sm` (default) — inline next to a title (e.g. AvatarTextCell tag)
|
|
496
|
+
* - `md` — inside table cells where it reads as primary content
|
|
497
|
+
*/
|
|
498
|
+
export declare const codeBadgeVariants: (props?: ({
|
|
499
|
+
size?: "sm" | "md" | null | undefined;
|
|
500
|
+
} & ClassProp) | undefined) => string;
|
|
501
|
+
|
|
502
|
+
/**
|
|
503
|
+
* Table-cell wrapper around `CodeBadge` for columns that render literal
|
|
504
|
+
* strings (version labels, cron expressions, IDs). Kept as a separate export
|
|
505
|
+
* so column definitions can stay value-oriented (`<CodePillCell value={v} />`)
|
|
506
|
+
* rather than wrapping children — but the visual treatment now lives in
|
|
507
|
+
* the shared `CodeBadge` primitive.
|
|
508
|
+
*/
|
|
509
|
+
export declare function CodePillCell({ value, className, }: {
|
|
510
|
+
value: React_2.ReactNode;
|
|
511
|
+
className?: string;
|
|
512
|
+
}): JSX.Element;
|
|
513
|
+
|
|
514
|
+
export { ColumnDef }
|
|
515
|
+
|
|
516
|
+
export declare function Command({ className, ...props }: React_2.ComponentProps<typeof Command_2>): JSX.Element;
|
|
517
|
+
|
|
518
|
+
export declare function CommandDialog({ title, description, children, className, ...props }: React_2.ComponentProps<typeof Dialog> & {
|
|
519
|
+
title?: string;
|
|
520
|
+
description?: string;
|
|
521
|
+
className?: string;
|
|
522
|
+
}): JSX.Element;
|
|
523
|
+
|
|
524
|
+
export declare function CommandEmpty({ ...props }: React_2.ComponentProps<typeof Command_2.Empty>): JSX.Element;
|
|
525
|
+
|
|
526
|
+
export declare function CommandGroup({ className, ...props }: React_2.ComponentProps<typeof Command_2.Group>): JSX.Element;
|
|
527
|
+
|
|
528
|
+
export declare function CommandInput({ className, showSearchIcon, ...props }: React_2.ComponentProps<typeof Command_2.Input> & {
|
|
529
|
+
showSearchIcon?: boolean;
|
|
530
|
+
}): JSX.Element;
|
|
531
|
+
|
|
532
|
+
export declare function CommandItem({ className, ...props }: React_2.ComponentProps<typeof Command_2.Item>): JSX.Element;
|
|
533
|
+
|
|
534
|
+
export declare function CommandList({ className, ...props }: React_2.ComponentProps<typeof Command_2.List>): JSX.Element;
|
|
535
|
+
|
|
536
|
+
export declare function CommandSeparator({ className, ...props }: React_2.ComponentProps<typeof Command_2.Separator>): JSX.Element;
|
|
537
|
+
|
|
538
|
+
export declare function CommandShortcut({ className, ...props }: React_2.ComponentProps<'span'>): JSX.Element;
|
|
539
|
+
|
|
540
|
+
/**
|
|
541
|
+
* In-app confirmation dialog — a thin convenience over the AlertDialog
|
|
542
|
+
* primitives for the common confirm-before-action flow (deletes, destructive
|
|
543
|
+
* edits).
|
|
544
|
+
*
|
|
545
|
+
* Prefer this over `window.confirm`: in a sandboxed Artifact Studio iframe the
|
|
546
|
+
* native dialog is blocked (no `allow-modals`) and silently returns false, so a
|
|
547
|
+
* "delete" button wired to `confirm()` appears to do nothing.
|
|
548
|
+
*/
|
|
549
|
+
export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm, }: ConfirmDialogProps): JSX.Element;
|
|
550
|
+
|
|
551
|
+
export declare interface ConfirmDialogProps {
|
|
552
|
+
open: boolean;
|
|
553
|
+
onOpenChange: (open: boolean) => void;
|
|
554
|
+
title: string;
|
|
555
|
+
description?: ReactNode;
|
|
556
|
+
confirmLabel?: string;
|
|
557
|
+
cancelLabel?: string;
|
|
558
|
+
/** Render the confirm action with destructive styling (red). */
|
|
559
|
+
destructive?: boolean;
|
|
560
|
+
onConfirm: () => void;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
/**
|
|
564
|
+
* Full content-area loading indicator. Use when an entire tab or page section
|
|
565
|
+
* is waiting for data. Renders a centered large spinner with a consistent
|
|
566
|
+
* fade-in animation so loading → content transitions feel smooth.
|
|
567
|
+
*/
|
|
568
|
+
export declare function ContentLoadingState({ className }: ContentLoadingStateProps): JSX.Element;
|
|
569
|
+
|
|
570
|
+
export declare interface ContentLoadingStateProps {
|
|
571
|
+
className?: string;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
export declare const ContextMenu: React_2.FC<ContextMenuPrimitive.ContextMenuProps>;
|
|
575
|
+
|
|
576
|
+
export declare const ContextMenuCheckboxItem: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
577
|
+
|
|
578
|
+
export declare const ContextMenuContent: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
579
|
+
|
|
580
|
+
export declare const ContextMenuGroup: React_2.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
581
|
+
|
|
582
|
+
export declare const ContextMenuItem: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
583
|
+
inset?: boolean;
|
|
584
|
+
variant?: "default" | "destructive";
|
|
585
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
586
|
+
|
|
587
|
+
export declare const ContextMenuLabel: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
588
|
+
inset?: boolean;
|
|
589
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
590
|
+
|
|
591
|
+
export declare const ContextMenuPortal: React_2.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
|
|
592
|
+
|
|
593
|
+
export declare const ContextMenuRadioGroup: React_2.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
594
|
+
|
|
595
|
+
export declare const ContextMenuRadioItem: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
596
|
+
|
|
597
|
+
export declare const ContextMenuSeparator: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
598
|
+
|
|
599
|
+
export declare const ContextMenuShortcut: {
|
|
600
|
+
({ className, ...props }: React_2.HTMLAttributes<HTMLSpanElement>): JSX.Element;
|
|
601
|
+
displayName: string;
|
|
602
|
+
};
|
|
603
|
+
|
|
604
|
+
export declare const ContextMenuSub: React_2.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
|
605
|
+
|
|
606
|
+
export declare const ContextMenuSubContent: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
607
|
+
|
|
608
|
+
export declare const ContextMenuSubTrigger: React_2.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
609
|
+
inset?: boolean;
|
|
610
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
611
|
+
|
|
612
|
+
export declare const ContextMenuTrigger: React_2.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React_2.RefAttributes<HTMLSpanElement>>;
|
|
613
|
+
|
|
614
|
+
export declare function DashboardShell({ title, range, actions, children, className, bodyClassName, }: DashboardShellProps): JSX.Element;
|
|
615
|
+
|
|
616
|
+
/**
|
|
617
|
+
* DashboardShell — canonical frame for dashboard / list pages.
|
|
618
|
+
*
|
|
619
|
+
* Provides the compact 12-row top bar (title · range slot · actions slot) and
|
|
620
|
+
* a scrolling body with consistent horizontal/vertical rhythm. Pages compose
|
|
621
|
+
* their content (KPI strip, chart cards, tables) as direct children — each
|
|
622
|
+
* child gets `gap-5` vertical spacing automatically.
|
|
623
|
+
*
|
|
624
|
+
* Scrolling ownership: the body is the *only* vertical scroll container for
|
|
625
|
+
* the page. Do NOT wrap `<DashboardShell>` in another `overflow-y-auto` div.
|
|
626
|
+
* Height flows from the platform app shell (`atlas-shell-routes` → app
|
|
627
|
+
* wrapper → `h-full`).
|
|
628
|
+
*
|
|
629
|
+
* Composition:
|
|
630
|
+
* ```tsx
|
|
631
|
+
* <DashboardShell
|
|
632
|
+
* title="Agents"
|
|
633
|
+
* range={<SegmentedControl value="24h" onChange={…} options={…} />}
|
|
634
|
+
* actions={<>
|
|
635
|
+
* <Button variant="outline" size="sm">Import</Button>
|
|
636
|
+
* <Button size="sm">New agent</Button>
|
|
637
|
+
* </>}
|
|
638
|
+
* >
|
|
639
|
+
* <KpiTileGrid columns={4}>…</KpiTileGrid>
|
|
640
|
+
* <ChartCard />
|
|
641
|
+
* <ProDataTable … />
|
|
642
|
+
* </DashboardShell>
|
|
643
|
+
* ```
|
|
644
|
+
*
|
|
645
|
+
* Rules:
|
|
646
|
+
* - Don't render a page subtitle (e.g. "N total") under the title — those
|
|
647
|
+
* belong in section headers or on the table itself.
|
|
648
|
+
* - Don't nest a `<DashboardShell>` inside another scroll container.
|
|
649
|
+
* - Title renders at 16px (`--font-size-md` / `text-base`).
|
|
650
|
+
*/
|
|
651
|
+
declare interface DashboardShellProps {
|
|
652
|
+
/** Page title — 16px, semibold. Usually a short noun ("Agents", "Schedules"). */
|
|
653
|
+
title: ReactNode;
|
|
654
|
+
/** Small controls rendered left of the actions (e.g. 24h/7d/30d toggle). */
|
|
655
|
+
range?: ReactNode;
|
|
656
|
+
/** Right-aligned action buttons (Import, New item, etc.). */
|
|
657
|
+
actions?: ReactNode;
|
|
658
|
+
children: ReactNode;
|
|
659
|
+
className?: string;
|
|
660
|
+
/** Extra className on the scrolling body. Use for custom gap/padding overrides. */
|
|
661
|
+
bodyClassName?: string;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
export declare function DataReviewTable<T extends {
|
|
665
|
+
id: string;
|
|
666
|
+
_version?: number;
|
|
667
|
+
}>({ columns, data, selectedRows: controlledSelected, onSelectionChange, defaultSort, emptyMessage, className, maxHeight, highlightedRowIds, enableSorting, selectionDisabled, enableCellSelection, selectedCells: controlledCells, onCellSelectionChange, }: DataReviewTableProps<T>): JSX.Element;
|
|
668
|
+
|
|
669
|
+
export declare interface DataReviewTableProps<T extends {
|
|
670
|
+
id: string;
|
|
671
|
+
_version?: number;
|
|
672
|
+
}> {
|
|
673
|
+
columns: ColumnDef<T, unknown>[];
|
|
674
|
+
data: T[];
|
|
675
|
+
/**
|
|
676
|
+
* Controlled selection. When provided, the table reflects this value and
|
|
677
|
+
* fires `onSelectionChange` on user interaction without mutating internal
|
|
678
|
+
* state. When omitted, the table manages selection itself (uncontrolled
|
|
679
|
+
* mode) — useful when the caller only needs the callback or no callback
|
|
680
|
+
* at all. Mixing controlled/uncontrolled across renders is undefined
|
|
681
|
+
* behavior (standard React convention).
|
|
682
|
+
*/
|
|
683
|
+
selectedRows?: string[];
|
|
684
|
+
onSelectionChange?: (rowIds: string[]) => void;
|
|
685
|
+
defaultSort?: SortingState;
|
|
686
|
+
emptyMessage?: string;
|
|
687
|
+
className?: string;
|
|
688
|
+
/**
|
|
689
|
+
* Height cap on the internal scroll container. Required for the virtualized
|
|
690
|
+
* path (rows >= VIRTUALIZATION_THRESHOLD) — without a bounded scroll
|
|
691
|
+
* element, `useVirtualizer` only sees the initial viewport and rows below
|
|
692
|
+
* the fold stay unreachable. Accepts any CSS length (`'70vh'`, `'600px'`,
|
|
693
|
+
* `'calc(100vh - 12rem)'`) or a pixel `number`. Default is `'70vh'`.
|
|
694
|
+
*/
|
|
695
|
+
maxHeight?: string | number;
|
|
696
|
+
/**
|
|
697
|
+
* Row IDs to highlight with a transient amber background — typically used
|
|
698
|
+
* to flash rows that conflicted during a batch mutation so the user can
|
|
699
|
+
* see which rows changed underneath them. The caller owns the lifecycle
|
|
700
|
+
* (populate on conflict, clear on timer).
|
|
701
|
+
*/
|
|
702
|
+
highlightedRowIds?: Set<string>;
|
|
703
|
+
/**
|
|
704
|
+
* When false, column headers do not respond to clicks and rows are
|
|
705
|
+
* rendered in `data` order. Use this when sorting is implemented server-
|
|
706
|
+
* side or when sorting a paginated subset would produce cross-page
|
|
707
|
+
* inconsistencies. Default `true` preserves the previous client-side
|
|
708
|
+
* sort behavior.
|
|
709
|
+
*/
|
|
710
|
+
enableSorting?: boolean;
|
|
711
|
+
/**
|
|
712
|
+
* When true, the leading checkbox column is removed entirely AND any
|
|
713
|
+
* internal/uncontrolled selection state is dropped. Use this for
|
|
714
|
+
* read-only views (e.g. a LOCKED migration table) where ack actions
|
|
715
|
+
* are forbidden — without this prop the table would silently keep its
|
|
716
|
+
* own selection in uncontrolled mode even when the parent thinks
|
|
717
|
+
* selection is disabled, surfacing a checkbox column the user can
|
|
718
|
+
* tick but never act on.
|
|
719
|
+
*/
|
|
720
|
+
selectionDisabled?: boolean;
|
|
721
|
+
/**
|
|
722
|
+
* When true, switches the table into Excel-grade cell selection mode.
|
|
723
|
+
* The leading checkbox column is NOT rendered and row-selection plumbing
|
|
724
|
+
* is disabled; users interact with individual cells instead. Supports
|
|
725
|
+
* click, shift-click (rectangular range), cmd/ctrl-click (additive),
|
|
726
|
+
* mouse drag, Escape to clear, and Cmd/Ctrl+A to select all visible
|
|
727
|
+
* cells. The caller can observe or drive selection via
|
|
728
|
+
* `selectedCells` / `onCellSelectionChange`.
|
|
729
|
+
*/
|
|
730
|
+
enableCellSelection?: boolean;
|
|
731
|
+
/**
|
|
732
|
+
* Controlled cell selection. When provided, the table reflects this
|
|
733
|
+
* value and fires `onCellSelectionChange` on user interaction without
|
|
734
|
+
* mutating internal state. Only applies when `enableCellSelection` is
|
|
735
|
+
* true.
|
|
736
|
+
*/
|
|
737
|
+
selectedCells?: CellCoord[];
|
|
738
|
+
onCellSelectionChange?: (cells: CellCoord[]) => void;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
export declare function DataTable<T>({ columns, data, pageSize, defaultSort, emptyMessage, onRowClick, rowClassName, className, }: DataTableProps<T>): JSX.Element;
|
|
742
|
+
|
|
743
|
+
declare interface DataTableProps<T> {
|
|
744
|
+
columns: ColumnDef<T, unknown>[];
|
|
745
|
+
data: T[];
|
|
746
|
+
pageSize?: number;
|
|
747
|
+
defaultSort?: SortingState;
|
|
748
|
+
emptyMessage?: string;
|
|
749
|
+
onRowClick?: (row: T) => void;
|
|
750
|
+
rowClassName?: (row: Row<T>) => string | undefined;
|
|
751
|
+
className?: string;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
/**
|
|
755
|
+
* Date picker working in `Date | null` (or `DateRange | null` in `mode="range"`).
|
|
756
|
+
* Radix popover + react-day-picker calendar + free-text parsing + presets.
|
|
757
|
+
*
|
|
758
|
+
* Most fields persist a date-only `YYYY-MM-DD` string — for those, reach for
|
|
759
|
+
* {@link IsoDateField} (single) or `DateRangePill` (start–end range) instead,
|
|
760
|
+
* which own the string ↔ Date bridge (local-midnight parse, invalid-date
|
|
761
|
+
* rejection) so you don't re-implement it. Use `DateField` directly only when
|
|
762
|
+
* the value is genuinely a `Date`/`DateRange`: an in-memory filter, a
|
|
763
|
+
* non-date-only serialization (e.g. a full timestamp), or a custom trigger.
|
|
764
|
+
*
|
|
765
|
+
* @see IsoDateField — single date-only string fields (the common case)
|
|
766
|
+
* @see DateRangePill — start–end ranges persisted as strings
|
|
767
|
+
*/
|
|
768
|
+
export declare function DateField(props: DateFieldProps): React_2.ReactElement;
|
|
769
|
+
|
|
770
|
+
declare interface DateFieldCommonProps {
|
|
771
|
+
/** Optional id for the trigger control (enables `<label htmlFor>` association). */
|
|
772
|
+
id?: string;
|
|
773
|
+
/** Placeholder for the trigger when no value is set. */
|
|
774
|
+
placeholder?: string;
|
|
775
|
+
/** Disable both input and calendar. */
|
|
776
|
+
disabled?: boolean;
|
|
777
|
+
/** Latest date the user can pick / parse. Inclusive. */
|
|
778
|
+
max?: Date;
|
|
779
|
+
/** Earliest date the user can pick / parse. Inclusive. */
|
|
780
|
+
min?: Date;
|
|
781
|
+
/**
|
|
782
|
+
* Override "today" — both for relative phrase parsing AND for
|
|
783
|
+
* the default visible month on the calendar. Tests pass this to
|
|
784
|
+
* pin output; UI callers usually leave it undefined.
|
|
785
|
+
*/
|
|
786
|
+
referenceDate?: Date;
|
|
787
|
+
/** Popover alignment relative to the trigger. */
|
|
788
|
+
align?: 'start' | 'center' | 'end';
|
|
789
|
+
/**
|
|
790
|
+
* Override the default preset list. Pass `[]` to hide presets
|
|
791
|
+
* entirely (yields a leaner popover for tight surfaces).
|
|
792
|
+
*/
|
|
793
|
+
presets?: readonly DateFieldPreset[];
|
|
794
|
+
/** Extra classes applied to the trigger wrapper div. */
|
|
795
|
+
containerClassName?: string;
|
|
796
|
+
/** Extra classes applied to the trigger button. */
|
|
797
|
+
className?: string;
|
|
798
|
+
/** ARIA label for the trigger button. */
|
|
799
|
+
ariaLabel?: string;
|
|
800
|
+
/**
|
|
801
|
+
* When set, applies `aria-invalid` to the trigger button so validation
|
|
802
|
+
* helpers (e.g. scroll-to-first-error) can locate and focus this control.
|
|
803
|
+
*/
|
|
804
|
+
'aria-invalid'?: boolean;
|
|
805
|
+
/** Render a clear (X) affordance inside the trigger when a value is set. */
|
|
806
|
+
clearable?: boolean;
|
|
807
|
+
/**
|
|
808
|
+
* Year-resolution direction for bare month / month-day text input
|
|
809
|
+
* (e.g. `"Jun 8"` with no year). Defaults to `'past'` — matches
|
|
810
|
+
* retrospective filter usage. Pass `'future'` on forward-planning
|
|
811
|
+
* surfaces (due dates, scheduling) so `"Jun 8"` in May reads as the
|
|
812
|
+
* upcoming June 8 instead of last year's.
|
|
813
|
+
*/
|
|
814
|
+
yearBias?: YearBias;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
/**
|
|
818
|
+
* A relative preset. The `value` is computed lazily against a
|
|
819
|
+
* reference date so the same preset table works in any mode and
|
|
820
|
+
* with any "now" — including the test/fixture case where callers
|
|
821
|
+
* pass `referenceDate` to make rendering deterministic.
|
|
822
|
+
*/
|
|
823
|
+
export declare interface DateFieldPreset {
|
|
824
|
+
label: string;
|
|
825
|
+
/**
|
|
826
|
+
* Resolve the preset against a reference date. Return either:
|
|
827
|
+
* - a `Date` (the preset picks a single day),
|
|
828
|
+
* - a `DateRange` (the preset picks a span),
|
|
829
|
+
* - `null` to skip rendering (rare; lets callers gate presets
|
|
830
|
+
* conditionally without removing them from the array).
|
|
831
|
+
*
|
|
832
|
+
* `DateField` automatically adapts: a preset that yields a range
|
|
833
|
+
* but is clicked in single mode falls back to the range's `from`
|
|
834
|
+
* day, and a preset that yields a single date in range mode is
|
|
835
|
+
* treated as `from === to`.
|
|
836
|
+
*/
|
|
837
|
+
resolve: (now: Date) => Date | DateRange | null;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
export declare type DateFieldProps = DateFieldSingleProps | DateFieldRangeProps;
|
|
841
|
+
|
|
842
|
+
declare interface DateFieldRangeProps extends DateFieldCommonProps {
|
|
843
|
+
mode: 'range';
|
|
844
|
+
value: DateRange | null;
|
|
845
|
+
onChange: (next: DateRange | null) => void;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
declare interface DateFieldSingleProps extends DateFieldCommonProps {
|
|
849
|
+
mode?: 'single';
|
|
850
|
+
value: Date | null;
|
|
851
|
+
onChange: (next: Date | null) => void;
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
export declare function DatePicker({ value, onChange, placeholder, className }: DatePickerProps): JSX.Element;
|
|
855
|
+
|
|
856
|
+
declare interface DatePickerProps {
|
|
857
|
+
value: string | null;
|
|
858
|
+
onChange: (date: string | null) => void;
|
|
859
|
+
placeholder?: string;
|
|
860
|
+
className?: string;
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
export declare interface DateRange {
|
|
864
|
+
from: Date;
|
|
865
|
+
to: Date;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
/** Checkbox "checked" target: clicking an unchecked row sets this. */
|
|
869
|
+
export declare const DEFAULT_COMPLETE_STATUS = "done";
|
|
870
|
+
|
|
871
|
+
/** Checkbox "unchecked" target: clicking a checked row resets to this. */
|
|
872
|
+
export declare const DEFAULT_INCOMPLETE_STATUS = "todo";
|
|
873
|
+
|
|
874
|
+
/** Default range presets — the canonical "filter by time" set. */
|
|
875
|
+
export declare const DEFAULT_RANGE_PRESETS: readonly DateFieldPreset[];
|
|
876
|
+
|
|
877
|
+
/** Statuses treated as resolved: title struck-through + due-date urgency suppressed. */
|
|
878
|
+
export declare const DEFAULT_RESOLVED_STATUSES: readonly string[];
|
|
879
|
+
|
|
880
|
+
/** Default single-date presets. */
|
|
881
|
+
export declare const DEFAULT_SINGLE_PRESETS: readonly DateFieldPreset[];
|
|
882
|
+
|
|
883
|
+
/** Hover "Start" button target, shown when a row sits at the incomplete status. */
|
|
884
|
+
export declare const DEFAULT_START_STATUS = "in_progress";
|
|
885
|
+
|
|
886
|
+
export declare const DEFAULT_STATUS_BOARD_ORDER: readonly string[];
|
|
887
|
+
|
|
888
|
+
export declare const DEFAULT_STATUS_OPTIONS: TaskStatusOption[];
|
|
889
|
+
|
|
890
|
+
/** The status values the built-in default vocabulary uses. */
|
|
891
|
+
export declare type DefaultTaskStatus = 'todo' | 'in_progress' | 'blocked' | 'done' | 'cancelled';
|
|
892
|
+
|
|
893
|
+
/**
|
|
894
|
+
* Dialog — modal dialog built on Radix's Dialog primitive.
|
|
895
|
+
*
|
|
896
|
+
* Composition (header + body + footer):
|
|
897
|
+
*
|
|
898
|
+
* <Dialog>
|
|
899
|
+
* <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
|
|
900
|
+
* <DialogContent>
|
|
901
|
+
* <DialogHeader>
|
|
902
|
+
* <DialogTitle>Title</DialogTitle>
|
|
903
|
+
* <DialogDescription>Optional helper copy.</DialogDescription>
|
|
904
|
+
* </DialogHeader>
|
|
905
|
+
* <DialogBody>
|
|
906
|
+
* {form fields / long content}
|
|
907
|
+
* </DialogBody>
|
|
908
|
+
* <DialogFooter>
|
|
909
|
+
* <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
|
|
910
|
+
* <Button>Save</Button>
|
|
911
|
+
* </DialogFooter>
|
|
912
|
+
* </DialogContent>
|
|
913
|
+
* </Dialog>
|
|
914
|
+
*
|
|
915
|
+
* Layout contract:
|
|
916
|
+
* - `DialogContent` is a flex column with `overflow-hidden` — the
|
|
917
|
+
* rounded corners clip the header/body/footer surfaces so they
|
|
918
|
+
* meet the corners cleanly.
|
|
919
|
+
* - `DialogHeader` is `shrink-0` on the shared white (`bg-card`)
|
|
920
|
+
* surface with a 1px `border-b`. The border acts as the scroll
|
|
921
|
+
* horizon — content in `DialogBody` slides under that line when
|
|
922
|
+
* scrolled. No tint on the header: the dialog reads as one clean
|
|
923
|
+
* white card with subtle dividers rather than stratified bands.
|
|
924
|
+
* - `DialogBody` is `flex-1 min-h-0 overflow-y-auto` with its own
|
|
925
|
+
* padding, same white surface as the header. Single scroll region
|
|
926
|
+
* — content scrolls independently of the sticky header/footer.
|
|
927
|
+
* - `DialogFooter` mirrors the header: white surface + 1px
|
|
928
|
+
* `border-t` so the action row reads as a capped footer that
|
|
929
|
+
* doesn't scroll with content.
|
|
930
|
+
* - All three zones share `px-6 py-4` padding so the vertical
|
|
931
|
+
* rhythm stays uniform; the borders are the only visual
|
|
932
|
+
* differentiator.
|
|
933
|
+
*
|
|
934
|
+
* Atlas-specific behaviors:
|
|
935
|
+
* - Portal mounts into the shared Atlas portal container
|
|
936
|
+
* (`usePortalContainer()`), so dialogs trap focus + stacking
|
|
937
|
+
* correctly inside MFEs (chat-admin, inbox, agents) that isolate
|
|
938
|
+
* their own DOM scope.
|
|
939
|
+
* - Fallback portal root is appended under `document.body` (NOT
|
|
940
|
+
* `documentElement`) — a portal on `<html>` breaks Radix's
|
|
941
|
+
* `aria-hidden` bookkeeping for nested layers.
|
|
942
|
+
* - Title renders at `text-base` (16px) semibold — NOT `text-lg`
|
|
943
|
+
* (which in Atlas's token scale is 26px / hero size).
|
|
944
|
+
* - Overlay is `bg-foreground/50` with a light backdrop blur.
|
|
945
|
+
* - Content rounds to `rounded-md` (10px, `--radius-md`).
|
|
946
|
+
*/
|
|
947
|
+
export declare const Dialog: React_2.FC<DialogPrimitive.DialogProps>;
|
|
948
|
+
|
|
949
|
+
/**
|
|
950
|
+
* DialogBody — the scrollable body region between DialogHeader and
|
|
951
|
+
* DialogFooter. New in this revision.
|
|
952
|
+
*
|
|
953
|
+
* Use this for any dialog with form fields, long content, or anything
|
|
954
|
+
* that might exceed the viewport. For very short dialogs where the
|
|
955
|
+
* scroll affordance is overkill, consumers can still render their own
|
|
956
|
+
* `<div>` between header and footer; this component just encodes the
|
|
957
|
+
* standard pattern (flex-1 + min-h-0 + overflow-y-auto + default
|
|
958
|
+
* padding) so callers don't have to remember the details.
|
|
959
|
+
*/
|
|
960
|
+
export declare function DialogBody({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
961
|
+
|
|
962
|
+
export declare namespace DialogBody {
|
|
963
|
+
var displayName: string;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
export declare const DialogClose: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
967
|
+
|
|
968
|
+
export declare const DialogContent: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
969
|
+
/**
|
|
970
|
+
* Render the corner close affordance. Default `true`. Set `false` to
|
|
971
|
+
* suppress it during a blocking in-dialog action (e.g. an upload in
|
|
972
|
+
* flight) so the user can't dismiss mid-operation. Pair with a
|
|
973
|
+
* controlled `open` + an `onOpenChange` guard for full lockout.
|
|
974
|
+
*/
|
|
975
|
+
showCloseButton?: boolean;
|
|
976
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
977
|
+
|
|
978
|
+
export declare const DialogDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
|
|
979
|
+
|
|
980
|
+
export declare function DialogFooter({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
981
|
+
|
|
982
|
+
export declare namespace DialogFooter {
|
|
983
|
+
var displayName: string;
|
|
984
|
+
}
|
|
985
|
+
|
|
986
|
+
export declare function DialogHeader({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
987
|
+
|
|
988
|
+
export declare namespace DialogHeader {
|
|
989
|
+
var displayName: string;
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
export declare const DialogOverlay: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
993
|
+
|
|
994
|
+
export declare function DialogPortal({ container, ...props }: React_2.ComponentProps<typeof DialogPrimitive.Portal>): JSX.Element;
|
|
995
|
+
|
|
996
|
+
export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
|
|
997
|
+
|
|
998
|
+
export declare const DialogTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
999
|
+
|
|
1000
|
+
export declare function DiffCell({ before, after, editable, onChange, className, }: DiffCellProps): JSX.Element;
|
|
1001
|
+
|
|
1002
|
+
export declare interface DiffCellProps {
|
|
1003
|
+
before: string | number | null;
|
|
1004
|
+
after: string | number | null;
|
|
1005
|
+
editable?: boolean;
|
|
1006
|
+
onChange?: (newValue: string) => void;
|
|
1007
|
+
className?: string;
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
export declare function DotLabel({ color, children, bold, className }: DotLabelProps): JSX.Element;
|
|
1011
|
+
|
|
1012
|
+
declare interface DotLabelProps {
|
|
1013
|
+
color: string;
|
|
1014
|
+
children: string;
|
|
1015
|
+
bold?: boolean;
|
|
1016
|
+
className?: string;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
export declare const DropdownMenu: React_2.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
1020
|
+
|
|
1021
|
+
export declare const DropdownMenuCheckboxItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
1022
|
+
|
|
1023
|
+
export declare const DropdownMenuContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
1024
|
+
|
|
1025
|
+
export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1026
|
+
|
|
1027
|
+
export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1028
|
+
inset?: boolean;
|
|
1029
|
+
variant?: "default" | "destructive";
|
|
1030
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
1031
|
+
|
|
1032
|
+
export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1033
|
+
inset?: boolean;
|
|
1034
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
1035
|
+
|
|
1036
|
+
export declare const DropdownMenuPortal: React_2.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
1037
|
+
|
|
1038
|
+
export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1039
|
+
|
|
1040
|
+
export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
1041
|
+
|
|
1042
|
+
export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
1043
|
+
|
|
1044
|
+
export declare const DropdownMenuShortcut: {
|
|
1045
|
+
({ className, ...props }: React_2.HTMLAttributes<HTMLSpanElement>): JSX.Element;
|
|
1046
|
+
displayName: string;
|
|
1047
|
+
};
|
|
1048
|
+
|
|
1049
|
+
/**
|
|
1050
|
+
* Nested submenu. **House convention:** when a `…` overflow menu offers a
|
|
1051
|
+
* *choice among values* (role / permission / status / assignee), put the
|
|
1052
|
+
* options in a `DropdownMenuSub` whose trigger is the field name — e.g.
|
|
1053
|
+
* `Role ›` opens `Viewer ✓ / Admin` — instead of a flat label followed by the
|
|
1054
|
+
* options inline. Keep standalone/destructive actions (`Remove access`) at the
|
|
1055
|
+
* top level, and mark the current value with a right-aligned `Check`. This
|
|
1056
|
+
* keeps the top menu short and scales as options grow.
|
|
1057
|
+
*
|
|
1058
|
+
* Reference: `PrincipalRow` / `GroupMembersDetail` role menus. See also
|
|
1059
|
+
* `.cursor/rules/design-system.md` ("Overflow menus: nest the option list").
|
|
1060
|
+
*/
|
|
1061
|
+
export declare const DropdownMenuSub: React_2.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
1062
|
+
|
|
1063
|
+
export declare const DropdownMenuSubContent: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
1064
|
+
|
|
1065
|
+
export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1066
|
+
inset?: boolean;
|
|
1067
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
1068
|
+
|
|
1069
|
+
export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
1070
|
+
|
|
1071
|
+
export declare function EditorPageHeader({ title, description, actions, className }: EditorPageHeaderProps): JSX.Element;
|
|
1072
|
+
|
|
1073
|
+
/**
|
|
1074
|
+
* EditorPageHeader — section title + description block used at the top of
|
|
1075
|
+
* each editor pane (Prompt, Tools, Input Schema, etc.).
|
|
1076
|
+
*
|
|
1077
|
+
* Replaces the older `<Panel>` Card-wrap pattern with a flat layout that
|
|
1078
|
+
* matches the new editor design. Title is 18px (one step up from the
|
|
1079
|
+
* dashboard's 16px page header), description is 13px secondary text.
|
|
1080
|
+
*
|
|
1081
|
+
* Pair with `EditorSection` for vertically-stacked content blocks under the
|
|
1082
|
+
* header — gives consistent spacing and an optional sub-section divider.
|
|
1083
|
+
*
|
|
1084
|
+
* Usage:
|
|
1085
|
+
* <EditorPagePane>
|
|
1086
|
+
* <EditorPageHeader
|
|
1087
|
+
* title="Prompt"
|
|
1088
|
+
* description="The system prompt sent to the model on every run …"
|
|
1089
|
+
* />
|
|
1090
|
+
* <EditorSection>…</EditorSection>
|
|
1091
|
+
* <EditorSection title="Model parameters">…</EditorSection>
|
|
1092
|
+
* </EditorPagePane>
|
|
1093
|
+
*/
|
|
1094
|
+
declare interface EditorPageHeaderProps {
|
|
1095
|
+
title: React_2.ReactNode;
|
|
1096
|
+
description?: React_2.ReactNode;
|
|
1097
|
+
/** Right-aligned action(s) on the same row as the title. */
|
|
1098
|
+
actions?: React_2.ReactNode;
|
|
1099
|
+
className?: string;
|
|
1100
|
+
}
|
|
1101
|
+
|
|
1102
|
+
export declare const EditorPagePane: React_2.ForwardRefExoticComponent<EditorPagePaneProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1103
|
+
|
|
1104
|
+
declare interface EditorPagePaneProps extends React_2.HTMLAttributes<HTMLDivElement> {
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
export declare const EditorSection: React_2.ForwardRefExoticComponent<EditorSectionProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1108
|
+
|
|
1109
|
+
declare interface EditorSectionProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1110
|
+
/** Subtle section heading rendered above the content (smaller than EditorPageHeader). */
|
|
1111
|
+
title?: React_2.ReactNode;
|
|
1112
|
+
description?: React_2.ReactNode;
|
|
1113
|
+
/** Right-aligned action(s) on the heading row. */
|
|
1114
|
+
actions?: React_2.ReactNode;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
export declare const EditorSideNav: React_2.ForwardRefExoticComponent<EditorSideNavProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1118
|
+
|
|
1119
|
+
export declare function EditorSideNavGroup({ label, headerTrailing, className, children, }: EditorSideNavGroupProps): JSX.Element;
|
|
1120
|
+
|
|
1121
|
+
declare interface EditorSideNavGroupProps {
|
|
1122
|
+
label?: React_2.ReactNode;
|
|
1123
|
+
headerTrailing?: React_2.ReactNode;
|
|
1124
|
+
className?: string;
|
|
1125
|
+
children?: React_2.ReactNode;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
export declare const EditorSideNavItem: React_2.ForwardRefExoticComponent<EditorSideNavItemProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
1129
|
+
|
|
1130
|
+
declare interface EditorSideNavItemProps extends React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
|
|
1131
|
+
/** Optional small right-aligned count or tag. */
|
|
1132
|
+
trailing?: React_2.ReactNode;
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
/**
|
|
1136
|
+
* EditorSideNav — vertical, grouped tab list for entity editors.
|
|
1137
|
+
*
|
|
1138
|
+
* Designed to drop in as the `<TabsList>` for a Radix `<Tabs orientation="vertical">`
|
|
1139
|
+
* tree, so it works with the existing `<TabsContent value="…">` pattern with
|
|
1140
|
+
* zero state plumbing. Visual goals:
|
|
1141
|
+
* - 220px wide rail with subtle right border
|
|
1142
|
+
* - Section headers (`EditorSideNavGroup`) use uppercase 11px tracking — same
|
|
1143
|
+
* density as the V2 dashboards' KPI labels
|
|
1144
|
+
* - Items are 28–30px tall with a soft fill on the active row
|
|
1145
|
+
*
|
|
1146
|
+
* Optional `header` / `footer` slots render INSIDE the rail's chrome but
|
|
1147
|
+
* OUTSIDE the Radix tablist, so non-tab controls (brand row, freshness
|
|
1148
|
+
* indicator, scope toggles) don't pollute the tablist's keyboard
|
|
1149
|
+
* semantics or screen-reader announcements. Without these slots, mixing
|
|
1150
|
+
* a `<button>` into the EditorSideNav children would put an interactive
|
|
1151
|
+
* non-tab control inside `role=tablist`, breaking arrow-key navigation.
|
|
1152
|
+
*
|
|
1153
|
+
* Usage:
|
|
1154
|
+
* <Tabs orientation="vertical" defaultValue="overview" className="flex …">
|
|
1155
|
+
* <EditorSideNav
|
|
1156
|
+
* header={<BrandRow />}
|
|
1157
|
+
* footer={<LiveBadge />}
|
|
1158
|
+
* >
|
|
1159
|
+
* <EditorSideNavGroup label="General">
|
|
1160
|
+
* <EditorSideNavItem value="overview">Overview</EditorSideNavItem>
|
|
1161
|
+
* <EditorSideNavItem value="prompt">Prompt</EditorSideNavItem>
|
|
1162
|
+
* </EditorSideNavGroup>
|
|
1163
|
+
* …
|
|
1164
|
+
* </EditorSideNav>
|
|
1165
|
+
* <div>
|
|
1166
|
+
* <TabsContent value="overview">…</TabsContent>
|
|
1167
|
+
* </div>
|
|
1168
|
+
* </Tabs>
|
|
1169
|
+
*/
|
|
1170
|
+
declare interface EditorSideNavProps extends React_2.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
|
|
1171
|
+
/** Width override in px. Defaults to 220. */
|
|
1172
|
+
width?: number;
|
|
1173
|
+
/**
|
|
1174
|
+
* Content rendered above the tablist — brand row, identity, etc.
|
|
1175
|
+
* Lives outside the Radix tablist so it doesn't appear in keyboard /
|
|
1176
|
+
* screen-reader navigation as a tab. Receives the same horizontal
|
|
1177
|
+
* padding as the rail.
|
|
1178
|
+
*/
|
|
1179
|
+
header?: React_2.ReactNode;
|
|
1180
|
+
/**
|
|
1181
|
+
* Content rendered below the tablist and pinned to the bottom of
|
|
1182
|
+
* the rail (via `mt-auto`). Use for global controls and indicators
|
|
1183
|
+
* (scope toggles, data-freshness badges) — anything that's
|
|
1184
|
+
* interactive but not a tab. Lives outside the Radix tablist for
|
|
1185
|
+
* the same accessibility reason as `header`.
|
|
1186
|
+
*/
|
|
1187
|
+
footer?: React_2.ReactNode;
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
export declare const EditorTopBar: React_2.ForwardRefExoticComponent<EditorTopBarProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1191
|
+
|
|
1192
|
+
/** Right-aligned action group. Adds spacing + flex-end positioning. */
|
|
1193
|
+
export declare function EditorTopBarActions({ className, children, }: {
|
|
1194
|
+
className?: string;
|
|
1195
|
+
children?: React_2.ReactNode;
|
|
1196
|
+
}): JSX.Element;
|
|
1197
|
+
|
|
1198
|
+
export declare function EditorTopBarBackButton({ onClick, title }: {
|
|
1199
|
+
onClick: () => void;
|
|
1200
|
+
title?: string;
|
|
1201
|
+
}): JSX.Element;
|
|
1202
|
+
|
|
1203
|
+
export declare function EditorTopBarIdentity({ icon, iconBg, iconColor, name, tag, badge, meta, className, }: EditorTopBarIdentityProps): JSX.Element;
|
|
1204
|
+
|
|
1205
|
+
declare interface EditorTopBarIdentityProps {
|
|
1206
|
+
/** Tinted square icon/avatar (28px) — pass an icon or initials. */
|
|
1207
|
+
icon?: React_2.ReactNode;
|
|
1208
|
+
/** Background color for the icon tile. */
|
|
1209
|
+
iconBg?: string;
|
|
1210
|
+
/** Foreground color for the icon glyph/initials. */
|
|
1211
|
+
iconColor?: string;
|
|
1212
|
+
/** Primary name. */
|
|
1213
|
+
name: React_2.ReactNode;
|
|
1214
|
+
/** Optional inline mono tag rendered next to the name (e.g. "Sonnet 4.5"). */
|
|
1215
|
+
tag?: React_2.ReactNode;
|
|
1216
|
+
/** Optional status badge rendered to the right of the tag. */
|
|
1217
|
+
badge?: React_2.ReactNode;
|
|
1218
|
+
/** Subtle meta line under the name (e.g. "Draft · edited 4m ago by …"). */
|
|
1219
|
+
meta?: React_2.ReactNode;
|
|
1220
|
+
className?: string;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
/**
|
|
1224
|
+
* EditorTopBar — minimal page header for entity editors (Agent, Workflow,
|
|
1225
|
+
* Skill, etc.). Pairs with `EditorSideNav` + `EditorPageHeader` to form the
|
|
1226
|
+
* standard editor chrome.
|
|
1227
|
+
*
|
|
1228
|
+
* Composition (left → right):
|
|
1229
|
+
* <EditorTopBar onBack={...}> ← back button slot
|
|
1230
|
+
* <EditorTopBarIdentity icon={...} name="…" tag="…" /> ← identity block
|
|
1231
|
+
* <EditorTopBarActions> ← right side
|
|
1232
|
+
* ...buttons...
|
|
1233
|
+
* </EditorTopBarActions>
|
|
1234
|
+
* </EditorTopBar>
|
|
1235
|
+
*
|
|
1236
|
+
* Density matches the V2 dashboard top bars (52px tall) so editors and
|
|
1237
|
+
* dashboards share a consistent shell row.
|
|
1238
|
+
*/
|
|
1239
|
+
declare interface EditorTopBarProps extends React_2.HTMLAttributes<HTMLDivElement> {
|
|
1240
|
+
onBack?: () => void;
|
|
1241
|
+
/** Override the back button entirely (e.g. wrap in a Link). */
|
|
1242
|
+
backSlot?: React_2.ReactNode;
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
/**
|
|
1246
|
+
* Convenience status pill for "Draft / Deployed / Archived" etc. — uses the
|
|
1247
|
+
* same dot+label aesthetic as `StatusDotBadge` but smaller for inline use
|
|
1248
|
+
* inside the top bar identity block.
|
|
1249
|
+
*/
|
|
1250
|
+
export declare function EditorTopBarStatusBadge({ tone, label, }: {
|
|
1251
|
+
tone?: 'success' | 'neutral' | 'warn' | 'info';
|
|
1252
|
+
label: React_2.ReactNode;
|
|
1253
|
+
}): JSX.Element;
|
|
1254
|
+
|
|
1255
|
+
/**
|
|
1256
|
+
* Consistent empty-state placeholder for tables and content areas.
|
|
1257
|
+
*/
|
|
1258
|
+
export declare function EmptyState({ icon, message, detail, className }: EmptyStateProps): JSX.Element;
|
|
1259
|
+
|
|
1260
|
+
export declare interface EmptyStateProps {
|
|
1261
|
+
icon?: React.ReactNode;
|
|
1262
|
+
message: string;
|
|
1263
|
+
detail?: string;
|
|
1264
|
+
className?: string;
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
export declare function ErrorState({ message, className }: ErrorStateProps): JSX.Element;
|
|
1268
|
+
|
|
1269
|
+
declare interface ErrorStateProps {
|
|
1270
|
+
message: string;
|
|
1271
|
+
className?: string;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
/**
|
|
1275
|
+
* The row-match test behind both facet predicates (multi + single), factored
|
|
1276
|
+
* out as a pure function so the filtering behavior is unit-testable without
|
|
1277
|
+
* driving the cmdk menu. A row is kept when:
|
|
1278
|
+
* - no filter is set (`undefined`/`''`/empty array), or
|
|
1279
|
+
* - `filterValue` is an array (multi) and the cell value is in it, or
|
|
1280
|
+
* - `filterValue` is a string (single) and the cell value equals it.
|
|
1281
|
+
* The cell value is compared via {@link facetValueToString}, so numbers,
|
|
1282
|
+
* booleans, and dates match the option `value` strings the facet offers.
|
|
1283
|
+
*/
|
|
1284
|
+
export declare function facetFilterMatches(cellValue: unknown, filterValue: string | string[] | undefined): boolean;
|
|
1285
|
+
|
|
1286
|
+
export declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): JSX.Element;
|
|
1287
|
+
|
|
1288
|
+
/** The display text for a field's auto-rendered chip. */
|
|
1289
|
+
export declare function fieldChipText(field: TaskFieldDef): string;
|
|
1290
|
+
|
|
1291
|
+
export declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
|
|
1292
|
+
|
|
1293
|
+
export declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): JSX.Element;
|
|
1294
|
+
|
|
1295
|
+
/** The current single-select value for a field's inline editor. */
|
|
1296
|
+
export declare function fieldEditorValue(field: TaskFieldDef): string | null;
|
|
1297
|
+
|
|
1298
|
+
export declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
|
|
1299
|
+
errors?: Array<{
|
|
1300
|
+
message?: string;
|
|
1301
|
+
} | undefined>;
|
|
1302
|
+
}): JSX.Element | null;
|
|
1303
|
+
|
|
1304
|
+
export declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
|
|
1305
|
+
|
|
1306
|
+
export declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): JSX.Element;
|
|
1307
|
+
|
|
1308
|
+
export declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
1309
|
+
variant?: "legend" | "label";
|
|
1310
|
+
}): JSX.Element;
|
|
1311
|
+
|
|
1312
|
+
export declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
|
|
1313
|
+
children?: React.ReactNode;
|
|
1314
|
+
}): JSX.Element;
|
|
1315
|
+
|
|
1316
|
+
export declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): JSX.Element;
|
|
1317
|
+
|
|
1318
|
+
export declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
|
|
1319
|
+
|
|
1320
|
+
declare const fieldVariants: (props?: ({
|
|
1321
|
+
orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
|
|
1322
|
+
} & ClassProp) | undefined) => string;
|
|
1323
|
+
|
|
1324
|
+
export declare const FileDropzone: React_2.ForwardRefExoticComponent<FileDropzoneProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1325
|
+
|
|
1326
|
+
/**
|
|
1327
|
+
* Companion component — renders the current file selection as a list
|
|
1328
|
+
* with per-item remove buttons. Separate from `FileDropzone` on
|
|
1329
|
+
* purpose: some layouts want the list above the dropzone, some below,
|
|
1330
|
+
* some inside a dialog. The dropzone emits the file array; callers
|
|
1331
|
+
* render however they want.
|
|
1332
|
+
*/
|
|
1333
|
+
export declare const FileDropzoneList: React_2.ForwardRefExoticComponent<FileDropzoneListProps & React_2.RefAttributes<HTMLUListElement>>;
|
|
1334
|
+
|
|
1335
|
+
export declare interface FileDropzoneListProps extends React_2.HTMLAttributes<HTMLUListElement> {
|
|
1336
|
+
files: File[];
|
|
1337
|
+
onRemove?: (file: File) => void;
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1340
|
+
export declare interface FileDropzoneProps {
|
|
1341
|
+
/**
|
|
1342
|
+
* Controlled list of files. Omit for uncontrolled — the dropzone
|
|
1343
|
+
* holds its own internal list and emits adds/removes via callbacks.
|
|
1344
|
+
*/
|
|
1345
|
+
value?: File[];
|
|
1346
|
+
/** Controlled counterpart — fires with the full updated list. */
|
|
1347
|
+
onValueChange?: (files: File[]) => void;
|
|
1348
|
+
/**
|
|
1349
|
+
* Fires with files that passed validation and were added to the set.
|
|
1350
|
+
* Useful when you want to start an upload immediately rather than
|
|
1351
|
+
* wait for an explicit "Submit" action.
|
|
1352
|
+
*/
|
|
1353
|
+
onFilesAdded?: (files: File[]) => void;
|
|
1354
|
+
/**
|
|
1355
|
+
* Fires with files that were dropped/selected but rejected. Report
|
|
1356
|
+
* these to the user — typically via a toast or inline error.
|
|
1357
|
+
*/
|
|
1358
|
+
onReject?: (rejections: FileRejection[]) => void;
|
|
1359
|
+
/**
|
|
1360
|
+
* MIME types or extensions accepted by the file picker. Passed
|
|
1361
|
+
* verbatim to the native `<input>` `accept` attribute. Use the
|
|
1362
|
+
* native format: `"image/*,application/pdf,.jsonl"`.
|
|
1363
|
+
*/
|
|
1364
|
+
accept?: string;
|
|
1365
|
+
/** Max files in the total set. Defaults to `Infinity`. */
|
|
1366
|
+
maxFiles?: number;
|
|
1367
|
+
/** Max size per file in bytes. Defaults to `Infinity`. */
|
|
1368
|
+
maxSize?: number;
|
|
1369
|
+
/** Allow multiple selections. Default `true`. */
|
|
1370
|
+
multiple?: boolean;
|
|
1371
|
+
/** Disable interaction + dim the surface. */
|
|
1372
|
+
disabled?: boolean;
|
|
1373
|
+
/**
|
|
1374
|
+
* Error state — destructive border + `aria-invalid`. Mirrors
|
|
1375
|
+
* Input / Select / Textarea so form primitives share a surface.
|
|
1376
|
+
*/
|
|
1377
|
+
error?: boolean | string;
|
|
1378
|
+
/**
|
|
1379
|
+
* Override the default empty-state UI. When omitted, a centered
|
|
1380
|
+
* upload icon + "Drop files here or click to browse" label renders
|
|
1381
|
+
* using the `accept` / `maxSize` props as the hint line.
|
|
1382
|
+
*/
|
|
1383
|
+
children?: React_2.ReactNode;
|
|
1384
|
+
className?: string;
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1387
|
+
/**
|
|
1388
|
+
* FileDropzone — drag-and-drop file upload surface.
|
|
1389
|
+
*
|
|
1390
|
+
* Shadcn doesn't ship a first-class file-upload primitive in the core
|
|
1391
|
+
* registry, so this is Atlas's canonical version — built in the same
|
|
1392
|
+
* house style: `cn()`, `forwardRef`, design-token palette, composable
|
|
1393
|
+
* via children, and zero external dependencies (no `react-dropzone`).
|
|
1394
|
+
*
|
|
1395
|
+
* Core behaviors:
|
|
1396
|
+
* - Drag-and-drop OR click-to-browse OR keyboard (Enter/Space)
|
|
1397
|
+
* - Paste support (Ctrl/Cmd+V while focused)
|
|
1398
|
+
* - Validation: `accept` (mime / extension), `maxFiles`, `maxSize`
|
|
1399
|
+
* - Rejection reporting via `onReject({ file, reason })`
|
|
1400
|
+
* - Controlled (`value` + `onValueChange`) or uncontrolled
|
|
1401
|
+
* - Matches Input/Select/Textarea on radius (8px), border color
|
|
1402
|
+
* (`border-input` dashed), and focus ring (1px). Surface is
|
|
1403
|
+
* `bg-muted` — a subtle tinted fill that differentiates the drop
|
|
1404
|
+
* target from the white page backdrop. Hover / drag states
|
|
1405
|
+
* darken via `bg-accent/40` and `bg-accent/60` respectively.
|
|
1406
|
+
*
|
|
1407
|
+
* Usage — simplest form (uncontrolled):
|
|
1408
|
+
* ```tsx
|
|
1409
|
+
* <FileDropzone accept="image/*" maxSize={5 * 1024 * 1024} onFilesAdded={upload} />
|
|
1410
|
+
* ```
|
|
1411
|
+
*
|
|
1412
|
+
* Controlled with file list:
|
|
1413
|
+
* ```tsx
|
|
1414
|
+
* const [files, setFiles] = useState<File[]>([])
|
|
1415
|
+
* <FileDropzone value={files} onValueChange={setFiles} multiple />
|
|
1416
|
+
* <FileDropzoneList files={files} onRemove={(f) => setFiles(prev => prev.filter(x => x !== f))} />
|
|
1417
|
+
* ```
|
|
1418
|
+
*/
|
|
1419
|
+
export declare interface FileRejection {
|
|
1420
|
+
file: File;
|
|
1421
|
+
/**
|
|
1422
|
+
* Reason the file was rejected. Discrete codes so consumers can
|
|
1423
|
+
* localize or branch on them rather than parsing strings.
|
|
1424
|
+
*/
|
|
1425
|
+
reason: 'invalid-type' | 'too-large' | 'too-many' | 'empty';
|
|
1426
|
+
message: string;
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
export declare interface FilterOption<T extends string> {
|
|
1430
|
+
value: T;
|
|
1431
|
+
label: string;
|
|
1432
|
+
/** Optional visual (colored badge, dot) shown beside the label. */
|
|
1433
|
+
swatch?: ReactNode;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
export declare function FilterPill({ label, options, selected, onChange }: FilterPillProps): JSX.Element | null;
|
|
1437
|
+
|
|
1438
|
+
/**
|
|
1439
|
+
* @deprecated Do not use in new code, and migrate existing usages off it.
|
|
1440
|
+
* `FilterPill` is being retired from the design system: filtering must go
|
|
1441
|
+
* through the canonical support — `ProDataTable`'s native filter funnel
|
|
1442
|
+
* (`meta.filter` → `FilterMenu`), which owns state, ordering (search always
|
|
1443
|
+
* before filter), and DS-composed controls. This standalone pill is removed
|
|
1444
|
+
* from the design-system gallery; it is still exported from
|
|
1445
|
+
* `@sequenceholdings/atlas-ui` (deprecated) purely so existing consumers keep
|
|
1446
|
+
* compiling — kept only until the remaining app consumers (chat / crm /
|
|
1447
|
+
* permissions / groups / jarvis / billing) are migrated to the funnel, after
|
|
1448
|
+
* which the exports and this file go away (DES-126).
|
|
1449
|
+
*
|
|
1450
|
+
* FilterPill — a compact multi-select filter anchored to a table toolbar.
|
|
1451
|
+
*
|
|
1452
|
+
* Visual contract mirrors `SelectTrigger` so a toolbar of FilterPills +
|
|
1453
|
+
* SearchInput + Select reads as one coherent row of controls, not a
|
|
1454
|
+
* grab-bag of visual treatments:
|
|
1455
|
+
*
|
|
1456
|
+
* - Height: h-9 (36px)
|
|
1457
|
+
* - Radius: rounded-sm (8px, `--radius-sm`)
|
|
1458
|
+
* - Border/bg: `border bg-background` — `--input` color, white
|
|
1459
|
+
* surface — same palette as Select/Input
|
|
1460
|
+
* - Padding: px-3 py-1
|
|
1461
|
+
* - Text: text-base md:text-sm (14px on desktop)
|
|
1462
|
+
* - Focus ring: focus:ring-1 focus:ring-ring (keyboard-visible)
|
|
1463
|
+
*
|
|
1464
|
+
* Rationale for NOT using `rounded-full` + primary fill (the old shape):
|
|
1465
|
+
* 1. Visual noise. When a toolbar mixes a SearchInput (8px radius),
|
|
1466
|
+
* two FilterPills (full radius), and a Select (8px radius), the
|
|
1467
|
+
* eye has to re-parse each control. A consistent radius reads as
|
|
1468
|
+
* one group.
|
|
1469
|
+
* 2. Active state hierarchy. A solid primary-colored pill made the
|
|
1470
|
+
* active filter feel like a CTA. Filters are not CTAs — the
|
|
1471
|
+
* primary action on a dashboard is "run query" / "save", not
|
|
1472
|
+
* "I've narrowed my view". A subtle count chip communicates
|
|
1473
|
+
* activity without competing with real buttons.
|
|
1474
|
+
*
|
|
1475
|
+
* Active state now uses a tiny pill-shaped count badge next to the
|
|
1476
|
+
* label. The trigger itself stays in the Select-aligned neutral look.
|
|
1477
|
+
*/
|
|
1478
|
+
declare interface FilterPillProps {
|
|
1479
|
+
label: string;
|
|
1480
|
+
options: string[];
|
|
1481
|
+
selected: string[];
|
|
1482
|
+
onChange: (values: string[]) => void;
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1485
|
+
/**
|
|
1486
|
+
* A compact multi-select filter for a table/list toolbar: a trigger with a count
|
|
1487
|
+
* chip when active, and a popover of swatch + label rows with a check on the
|
|
1488
|
+
* selected ones. Reusable for any short enum filter (status, health, type, …).
|
|
1489
|
+
*
|
|
1490
|
+
* "Active" means the filter actually narrows the set — neither all nor none
|
|
1491
|
+
* selected — so an all-selected filter reads as a neutral control, not an
|
|
1492
|
+
* applied one.
|
|
1493
|
+
*/
|
|
1494
|
+
export declare function FilterSelect<T extends string>({ label, options, selected, onChange, }: FilterSelectProps<T>): JSX.Element;
|
|
1495
|
+
|
|
1496
|
+
export declare interface FilterSelectProps<T extends string> {
|
|
1497
|
+
label: string;
|
|
1498
|
+
options: FilterOption<T>[];
|
|
1499
|
+
selected: T[];
|
|
1500
|
+
onChange: (next: T[]) => void;
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
/**
|
|
1504
|
+
* Format a byte count to a human-readable string. Matches the
|
|
1505
|
+
* conventions users expect in file dialogs: 1024-base, one decimal
|
|
1506
|
+
* place once past KB.
|
|
1507
|
+
*/
|
|
1508
|
+
export declare function formatBytes(bytes: number): string;
|
|
1509
|
+
|
|
1510
|
+
export declare function formatCompact(value: number): string;
|
|
1511
|
+
|
|
1512
|
+
export declare function formatCurrency(value: number): string;
|
|
1513
|
+
|
|
1514
|
+
export declare function formatCurrencyPrecise(value: number): string;
|
|
1515
|
+
|
|
1516
|
+
export declare function formatDurationMs(ms: number): string;
|
|
1517
|
+
|
|
1518
|
+
export declare function formatNumber(value: number): string;
|
|
1519
|
+
|
|
1520
|
+
export declare function formatPercent(value: number): string;
|
|
1521
|
+
|
|
1522
|
+
export declare function formatTimestamp(date: string | Date): string;
|
|
1523
|
+
|
|
1524
|
+
/**
|
|
1525
|
+
* A reusable create/edit dialog shell: title (+ optional description), a
|
|
1526
|
+
* scrollable body for the fields, an inline error, and a Cancel / submit footer
|
|
1527
|
+
* with a saving state. Owns all the dialog chrome so each form only supplies its
|
|
1528
|
+
* fields and an `onSubmit`.
|
|
1529
|
+
*/
|
|
1530
|
+
export declare function FormDialog({ open, onOpenChange, title, description, submitLabel, submittingLabel, onSubmit, submitting, canSubmit, error, widthClassName, children, }: FormDialogProps): JSX.Element;
|
|
1531
|
+
|
|
1532
|
+
export declare interface FormDialogProps {
|
|
1533
|
+
open: boolean;
|
|
1534
|
+
onOpenChange: (open: boolean) => void;
|
|
1535
|
+
title: string;
|
|
1536
|
+
description?: ReactNode;
|
|
1537
|
+
submitLabel: string;
|
|
1538
|
+
submittingLabel?: string;
|
|
1539
|
+
onSubmit: () => void;
|
|
1540
|
+
submitting?: boolean;
|
|
1541
|
+
/** Disable the submit button (e.g. required fields not yet filled). */
|
|
1542
|
+
canSubmit?: boolean;
|
|
1543
|
+
/** Inline error rendered above the footer. */
|
|
1544
|
+
error?: string | null;
|
|
1545
|
+
/** Tailwind max-width class for the dialog (default `max-w-2xl`). */
|
|
1546
|
+
widthClassName?: string;
|
|
1547
|
+
children: ReactNode;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
/**
|
|
1551
|
+
* Compound form-field wrapper — the label + control + error/description
|
|
1552
|
+
* triple, wired up correctly.
|
|
1553
|
+
*
|
|
1554
|
+
* ```tsx
|
|
1555
|
+
* <FormField label="Customer name" required error={errors.name}>
|
|
1556
|
+
* <Input value={name} onChange={e => setName(e.target.value)} />
|
|
1557
|
+
* </FormField>
|
|
1558
|
+
* ```
|
|
1559
|
+
*
|
|
1560
|
+
* Handles three things consumers otherwise have to do by hand:
|
|
1561
|
+
*
|
|
1562
|
+
* 1. `id` + `htmlFor` wiring — auto-generated via `useId()` when
|
|
1563
|
+
* omitted, so the label clicks focus the control.
|
|
1564
|
+
* 2. `aria-describedby` — points the control at the description
|
|
1565
|
+
* and/or error message element(s) for assistive tech.
|
|
1566
|
+
* 3. Error-state propagation — passes `error={!!error}` down to the
|
|
1567
|
+
* child control so its border/ring flip to destructive tokens
|
|
1568
|
+
* without the caller having to duplicate the flag.
|
|
1569
|
+
*
|
|
1570
|
+
* For manual composition (Label + Input as siblings), everything the
|
|
1571
|
+
* FormField does is still reachable as individual primitives. Use FormField
|
|
1572
|
+
* when you want the 90% case in one line.
|
|
1573
|
+
*/
|
|
1574
|
+
export declare function FormField({ label, required, error, description, id: providedId, children, className, }: FormFieldProps): JSX.Element;
|
|
1575
|
+
|
|
1576
|
+
export declare interface FormFieldProps {
|
|
1577
|
+
/**
|
|
1578
|
+
* Label text rendered above the control. Pass a string for the common
|
|
1579
|
+
* case; pass a ReactNode for custom content (e.g. a Label with an
|
|
1580
|
+
* adjacent HelpTooltip icon). When omitted, the field renders its
|
|
1581
|
+
* control only — useful for nesting a raw control inside a layout
|
|
1582
|
+
* without forcing a label.
|
|
1583
|
+
*/
|
|
1584
|
+
label?: React_2.ReactNode;
|
|
1585
|
+
/**
|
|
1586
|
+
* When true, appends a red `*` marker to the label. No-op without `label`.
|
|
1587
|
+
*/
|
|
1588
|
+
required?: boolean;
|
|
1589
|
+
/**
|
|
1590
|
+
* Error message. When non-empty, the control inside is styled with its
|
|
1591
|
+
* error state and this message renders below in destructive color.
|
|
1592
|
+
* Mutually exclusive with `description` (error wins when both are set).
|
|
1593
|
+
*/
|
|
1594
|
+
error?: string;
|
|
1595
|
+
/**
|
|
1596
|
+
* Helper text rendered below the control in muted color (field hint,
|
|
1597
|
+
* input format, etc). Hidden when `error` is set — the error message
|
|
1598
|
+
* takes the same slot.
|
|
1599
|
+
*/
|
|
1600
|
+
description?: React_2.ReactNode;
|
|
1601
|
+
/**
|
|
1602
|
+
* DOM id for the control. If omitted, `useId()` generates one so
|
|
1603
|
+
* `<label htmlFor>` and `aria-describedby` wire up automatically.
|
|
1604
|
+
*/
|
|
1605
|
+
id?: string;
|
|
1606
|
+
/**
|
|
1607
|
+
* The form control. `FormField` clones this child to inject `id`,
|
|
1608
|
+
* `aria-describedby`, and — when `error` is set — the child's
|
|
1609
|
+
* `error` prop. Must be a single element (Input / Textarea / Select
|
|
1610
|
+
* trigger / etc).
|
|
1611
|
+
*/
|
|
1612
|
+
children: React_2.ReactElement;
|
|
1613
|
+
className?: string;
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
export declare function GenericAvatar({ size, className }: GenericAvatarProps): JSX.Element;
|
|
1617
|
+
|
|
1618
|
+
export declare interface GenericAvatarProps {
|
|
1619
|
+
/** Size in px. Defaults to 20. */
|
|
1620
|
+
size?: number;
|
|
1621
|
+
className?: string;
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
/**
|
|
1625
|
+
* Maps a numeric value within [min, max] to a warm green→amber background.
|
|
1626
|
+
* Returns `undefined` for zero / degenerate ranges so the caller can skip styling.
|
|
1627
|
+
*/
|
|
1628
|
+
export declare function heatColor(value: number, min: number, max: number): string | undefined;
|
|
1629
|
+
|
|
1630
|
+
/**
|
|
1631
|
+
* Sortable, paginated table with heat-colored numeric cells.
|
|
1632
|
+
*
|
|
1633
|
+
* Pair with `buildPeriodColumns` and `buildTotalColumn` for time-series
|
|
1634
|
+
* data, or supply your own `ColumnDef` array for any tabular layout.
|
|
1635
|
+
*/
|
|
1636
|
+
export declare function HeatmapTable<T>({ data, columns, pageSize, defaultSort, onRowClick, entityLabel, className, }: HeatmapTableProps<T>): JSX.Element;
|
|
1637
|
+
|
|
1638
|
+
export declare interface HeatmapTableProps<T> {
|
|
1639
|
+
data: T[];
|
|
1640
|
+
columns: ColumnDef<T>[];
|
|
1641
|
+
pageSize?: number;
|
|
1642
|
+
defaultSort?: SortingState;
|
|
1643
|
+
onRowClick?: (row: T) => void;
|
|
1644
|
+
/** Label used in pagination ("1–10 of 42 {entityLabel}") and empty state. */
|
|
1645
|
+
entityLabel?: string;
|
|
1646
|
+
className?: string;
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
export declare const HoverCard: React_2.FC<HoverCardPrimitive.HoverCardProps>;
|
|
1650
|
+
|
|
1651
|
+
export declare const HoverCardContent: React_2.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
1652
|
+
|
|
1653
|
+
export declare const HoverCardTrigger: React_2.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React_2.RefAttributes<HTMLAnchorElement>>;
|
|
1654
|
+
|
|
1655
|
+
/**
|
|
1656
|
+
* Click-to-edit date cell. Shows a custom (or default) display until clicked,
|
|
1657
|
+
* then a native date input that commits on change/blur. The closed display is a
|
|
1658
|
+
* render prop so callers can style it (e.g. a due-date heat pill).
|
|
1659
|
+
*/
|
|
1660
|
+
export declare function InlineDateCell({ value, onCommit, renderDisplay, placeholder, title, className, }: InlineDateCellProps): JSX.Element;
|
|
1661
|
+
|
|
1662
|
+
export declare interface InlineDateCellProps {
|
|
1663
|
+
/** ISO date string (YYYY-MM-DD) or null. */
|
|
1664
|
+
value: string | null;
|
|
1665
|
+
onCommit: (value: string | null) => void | Promise<void>;
|
|
1666
|
+
/** Closed-state display for the value; defaults to the raw date or a dash. */
|
|
1667
|
+
renderDisplay?: (value: string | null) => ReactNode;
|
|
1668
|
+
placeholder?: string;
|
|
1669
|
+
title?: string;
|
|
1670
|
+
className?: string;
|
|
1671
|
+
}
|
|
1672
|
+
|
|
1673
|
+
/**
|
|
1674
|
+
* Click-to-edit text cell. Reads as plain text until clicked, then becomes a
|
|
1675
|
+
* borderless auto-growing textarea that commits on blur / Enter (⌘/Ctrl+Enter
|
|
1676
|
+
* for multiline) and cancels on Escape. Empty commits to null; `required`
|
|
1677
|
+
* fields revert instead. Domain-agnostic — pairs with any table cell.
|
|
1678
|
+
*/
|
|
1679
|
+
export declare function InlineTextCell({ value, onCommit, placeholder, multiline, required, className, displayClassName, }: InlineTextCellProps): JSX.Element;
|
|
1680
|
+
|
|
1681
|
+
export declare interface InlineTextCellProps {
|
|
1682
|
+
value: string | null;
|
|
1683
|
+
onCommit: (value: string | null) => void | Promise<void>;
|
|
1684
|
+
placeholder?: string;
|
|
1685
|
+
multiline?: boolean;
|
|
1686
|
+
required?: boolean;
|
|
1687
|
+
/** Extra classes for the editing textarea. */
|
|
1688
|
+
className?: string;
|
|
1689
|
+
/** Extra classes for the read-only display button. */
|
|
1690
|
+
displayClassName?: string;
|
|
1691
|
+
}
|
|
1692
|
+
|
|
1693
|
+
export declare const Input: React_2.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React_2.RefAttributes<HTMLInputElement>>;
|
|
1694
|
+
|
|
1695
|
+
declare interface InputOwnProps {
|
|
1696
|
+
/**
|
|
1697
|
+
* When truthy, the input renders in its error state — destructive
|
|
1698
|
+
* border, destructive focus ring, and `aria-invalid="true"` for
|
|
1699
|
+
* assistive tech.
|
|
1700
|
+
*
|
|
1701
|
+
* Accepts `boolean` (to toggle styling) or `string` (for convenience
|
|
1702
|
+
* — any non-empty string is truthy). The error *message* itself is
|
|
1703
|
+
* rendered by the caller (or automatically by `<Field error="...">`);
|
|
1704
|
+
* this prop only controls the input's own visual state.
|
|
1705
|
+
*/
|
|
1706
|
+
error?: boolean | string;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
export declare type InputProps = React_2.ComponentProps<"input"> & InputOwnProps;
|
|
1710
|
+
|
|
1711
|
+
/**
|
|
1712
|
+
* Whether a declarative field is inline-editable: it carries an editor
|
|
1713
|
+
* (`options` + `onChange`), hasn't opted out (`readOnly`), and isn't using
|
|
1714
|
+
* the bespoke static `render` escape hatch.
|
|
1715
|
+
*/
|
|
1716
|
+
export declare function isFieldEditable(field: TaskFieldDef): boolean;
|
|
1717
|
+
|
|
1718
|
+
export declare function KpiTile({ label, labelAdornment, onLabelClick, value, delta, deltaTone, footer, tone, valueAdornment, pinValue, className, onClick, }: KpiTileProps): JSX.Element;
|
|
1719
|
+
|
|
1720
|
+
/**
|
|
1721
|
+
* KpiTileGrid — opinionated 1-D grid of KPI tiles. Responsive: wraps at small
|
|
1722
|
+
* widths, up to `columns` at wide widths.
|
|
1723
|
+
*/
|
|
1724
|
+
export declare function KpiTileGrid({ columns, className, children, }: {
|
|
1725
|
+
columns?: 2 | 3 | 4 | 5;
|
|
1726
|
+
className?: string;
|
|
1727
|
+
children: React_2.ReactNode;
|
|
1728
|
+
}): JSX.Element;
|
|
1729
|
+
|
|
1730
|
+
declare interface KpiTileProps {
|
|
1731
|
+
label: string;
|
|
1732
|
+
/** Inline adornment rendered immediately after the label (e.g. info icon). */
|
|
1733
|
+
labelAdornment?: React_2.ReactNode;
|
|
1734
|
+
/**
|
|
1735
|
+
* When set, the label text becomes a button that fires this handler.
|
|
1736
|
+
* Adornments stay separate (their own buttons handle their own clicks),
|
|
1737
|
+
* so consumers can keep info / remove / log affordances next to a
|
|
1738
|
+
* clickable title without overlapping hit-targets.
|
|
1739
|
+
*/
|
|
1740
|
+
onLabelClick?: () => void;
|
|
1741
|
+
value: React_2.ReactNode;
|
|
1742
|
+
/** Delta chip rendered next to the value (e.g. "+12%"). */
|
|
1743
|
+
delta?: React_2.ReactNode;
|
|
1744
|
+
/** Green for positive, red for negative; neutral when omitted. */
|
|
1745
|
+
deltaTone?: 'positive' | 'negative' | 'neutral';
|
|
1746
|
+
/** Optional small line of text below the value (captions, context). */
|
|
1747
|
+
footer?: React_2.ReactNode;
|
|
1748
|
+
/** When 'warn', the tile picks up an amber tint to flag attention. */
|
|
1749
|
+
tone?: KpiTone;
|
|
1750
|
+
/** Inline adornment rendered next to the value (e.g. live dot). */
|
|
1751
|
+
valueAdornment?: React_2.ReactNode;
|
|
1752
|
+
/**
|
|
1753
|
+
* Pin the value+footer block to the bottom of the tile instead of
|
|
1754
|
+
* letting the value float right below the label. Use for tiles where
|
|
1755
|
+
* the value should stay anchored to chart/progress content
|
|
1756
|
+
* regardless of how tall the label gets (e.g. a label that wraps to
|
|
1757
|
+
* two lines). Also drops the default `truncate` on the footer wrapper
|
|
1758
|
+
* since pinned-value consumers typically pass a multi-element footer
|
|
1759
|
+
* (progress bar + chip) where truncation would clip the layout.
|
|
1760
|
+
*/
|
|
1761
|
+
pinValue?: boolean;
|
|
1762
|
+
className?: string;
|
|
1763
|
+
onClick?: () => void;
|
|
1764
|
+
}
|
|
1765
|
+
|
|
1766
|
+
/**
|
|
1767
|
+
* KpiTile — compact metric card for the top of dashboards.
|
|
1768
|
+
*
|
|
1769
|
+
* Differs from `MetricCard` in two deliberate ways:
|
|
1770
|
+
* - supports a colored "warn" state (tinted background/border) for KPIs that
|
|
1771
|
+
* themselves carry an attention signal (e.g. "Needs attention: 1")
|
|
1772
|
+
* - exposes `delta`, `deltaTone`, and `footer` slots so the monitoring-style
|
|
1773
|
+
* copy ("+0.4pp vs prev 24h", "5 agents live") renders consistently
|
|
1774
|
+
*
|
|
1775
|
+
* When you only need a static label + value + subtitle, prefer MetricCard.
|
|
1776
|
+
*/
|
|
1777
|
+
declare type KpiTone = 'neutral' | 'warn' | 'info';
|
|
1778
|
+
|
|
1779
|
+
export declare const Label: React_2.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React_2.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ClassProp | undefined) => string> & LabelOwnProps & React_2.RefAttributes<HTMLLabelElement>>;
|
|
1780
|
+
|
|
1781
|
+
export declare function LabeledSelect({ label, icon, value, options, onChange, ariaLabel, prefixHiddenValues, className, }: LabeledSelectProps): JSX.Element;
|
|
1782
|
+
|
|
1783
|
+
export declare interface LabeledSelectOption {
|
|
1784
|
+
value: string;
|
|
1785
|
+
label: string;
|
|
1786
|
+
}
|
|
1787
|
+
|
|
1788
|
+
export declare interface LabeledSelectProps {
|
|
1789
|
+
/** Muted prefix shown before the value, e.g. `"Group by"` / `"Sorted by"`. */
|
|
1790
|
+
label: string;
|
|
1791
|
+
/** Leading glyph (kept small + muted by the pill). */
|
|
1792
|
+
icon?: React_2.ReactNode;
|
|
1793
|
+
value: string;
|
|
1794
|
+
options: LabeledSelectOption[];
|
|
1795
|
+
onChange: (value: string) => void;
|
|
1796
|
+
/** Accessible name for the trigger. Defaults to `label`. */
|
|
1797
|
+
ariaLabel?: string;
|
|
1798
|
+
/**
|
|
1799
|
+
* Values for which the muted prefix is hidden — the pill shows just the
|
|
1800
|
+
* value. Use for "off"/"none" states where the prefix reads awkwardly
|
|
1801
|
+
* (e.g. `'none'` → "No grouping", not "Group by No grouping").
|
|
1802
|
+
*/
|
|
1803
|
+
prefixHiddenValues?: readonly string[];
|
|
1804
|
+
className?: string;
|
|
1805
|
+
}
|
|
1806
|
+
|
|
1807
|
+
declare interface LabelOwnProps {
|
|
1808
|
+
/**
|
|
1809
|
+
* When true, appends a red `*` marker after the label text. Prefer this
|
|
1810
|
+
* over rendering `<RequiredMarker />` manually — keeps the marker
|
|
1811
|
+
* positioning consistent and makes required-ness a declarative prop
|
|
1812
|
+
* at the call site. Also consumed by `<FormField required>` which
|
|
1813
|
+
* forwards it through to the label automatically.
|
|
1814
|
+
*/
|
|
1815
|
+
required?: boolean;
|
|
1816
|
+
}
|
|
1817
|
+
|
|
1818
|
+
export declare function LineSparklineCell({ values, width, height, scaleMax, color, label, className, }: LineSparklineCellProps): JSX.Element;
|
|
1819
|
+
|
|
1820
|
+
declare interface LineSparklineCellProps {
|
|
1821
|
+
values: number[];
|
|
1822
|
+
width?: number;
|
|
1823
|
+
height?: number;
|
|
1824
|
+
/** Y-axis max — defaults to 100 for percent metrics. */
|
|
1825
|
+
scaleMax?: number;
|
|
1826
|
+
color?: string;
|
|
1827
|
+
label?: React_2.ReactNode;
|
|
1828
|
+
className?: string;
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
/**
|
|
1832
|
+
* Recharts area chart for a metric's record series — the shared primitive behind
|
|
1833
|
+
* the metric sparkline (cards) and the metric detail view. Mirrors the Jarvis
|
|
1834
|
+
* metric-card chart (gradient area, monotone line) so metric viz reads the same
|
|
1835
|
+
* everywhere. Lives in atlas-ui so standalone artifacts can reuse it without
|
|
1836
|
+
* pulling chart.js.
|
|
1837
|
+
*/
|
|
1838
|
+
export declare function MetricAreaChart({ points, color, height, variant, valueFormatter, dateFormatter, className, }: MetricAreaChartProps): JSX.Element;
|
|
1839
|
+
|
|
1840
|
+
export declare interface MetricAreaChartPoint {
|
|
1841
|
+
t: string;
|
|
1842
|
+
v: number;
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
export declare interface MetricAreaChartProps {
|
|
1846
|
+
points: MetricAreaChartPoint[];
|
|
1847
|
+
/** Stroke / fill color for the area. Defaults to emerald. */
|
|
1848
|
+
color?: string;
|
|
1849
|
+
height?: number;
|
|
1850
|
+
/** `spark` = compact, axis-less (cards); `full` = axes + grid + tooltip. */
|
|
1851
|
+
variant?: 'spark' | 'full';
|
|
1852
|
+
valueFormatter?: (value: number) => string;
|
|
1853
|
+
dateFormatter?: (iso: string) => string;
|
|
1854
|
+
className?: string;
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
export declare function MetricCard({ label, value, subtitle, compact, className, onClick, children }: MetricCardProps): JSX.Element;
|
|
1858
|
+
|
|
1859
|
+
declare interface MetricCardProps {
|
|
1860
|
+
label: string;
|
|
1861
|
+
value: ReactNode;
|
|
1862
|
+
subtitle?: ReactNode;
|
|
1863
|
+
compact?: boolean;
|
|
1864
|
+
className?: string;
|
|
1865
|
+
onClick?: () => void;
|
|
1866
|
+
children?: ReactNode;
|
|
1867
|
+
}
|
|
1868
|
+
|
|
1869
|
+
export declare function MetricGrid({ columns, children, className }: MetricGridProps): JSX.Element;
|
|
1870
|
+
|
|
1871
|
+
declare interface MetricGridProps {
|
|
1872
|
+
columns?: 2 | 3 | 4 | 5;
|
|
1873
|
+
children: ReactNode;
|
|
1874
|
+
className?: string;
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
export declare function MultiSelect({ label, countLabel, options, selected, onChange, searchPlaceholder, emptyMessage, maxStackedIcons, hideWhenEmpty, className, }: MultiSelectProps): JSX.Element | null;
|
|
1878
|
+
|
|
1879
|
+
/**
|
|
1880
|
+
* Fields shared by `MultiSelect` (trigger + popover) and the standalone
|
|
1881
|
+
* `MultiSelectList` body: the options and how selection is read/written.
|
|
1882
|
+
* Trigger-only and list-only props live on the respective interfaces.
|
|
1883
|
+
*/
|
|
1884
|
+
declare interface MultiSelectCoreProps {
|
|
1885
|
+
options: MultiSelectOption[];
|
|
1886
|
+
selected: string[];
|
|
1887
|
+
onChange: (values: string[]) => void;
|
|
1888
|
+
/** Placeholder for the inline search input. */
|
|
1889
|
+
searchPlaceholder?: string;
|
|
1890
|
+
/** Empty-state message when the search matches nothing. */
|
|
1891
|
+
emptyMessage?: string;
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
/**
|
|
1895
|
+
* MultiSelectList — the searchable, checkbox-list body of `MultiSelect`,
|
|
1896
|
+
* extracted so it can be embedded outside the default Popover trigger.
|
|
1897
|
+
* `MultiSelect` renders it inside its own PopoverContent; other callers
|
|
1898
|
+
* (e.g. a Linear-style filter built on a Radix DropdownMenu submenu) can
|
|
1899
|
+
* drop it into any floating container and get the same rows, search,
|
|
1900
|
+
* pinned grouping, and icon-column behavior.
|
|
1901
|
+
*/
|
|
1902
|
+
export declare function MultiSelectList({ options, selected, onChange, searchPlaceholder, emptyMessage, query, onQueryChange, className, searchable, }: MultiSelectListProps): JSX.Element;
|
|
1903
|
+
|
|
1904
|
+
declare interface MultiSelectListProps extends MultiSelectCoreProps {
|
|
1905
|
+
/** Controlled search query. Omit to let the list manage its own. */
|
|
1906
|
+
query?: string;
|
|
1907
|
+
onQueryChange?: (query: string) => void;
|
|
1908
|
+
className?: string;
|
|
1909
|
+
/** Show the search input. Default true (see `SelectListShellProps`). */
|
|
1910
|
+
searchable?: boolean;
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
/**
|
|
1914
|
+
* MultiSelect — a filter-bar facet with a searchable multi-select
|
|
1915
|
+
* dropdown. Modeled after Linear's filter pills: stacked icons in the
|
|
1916
|
+
* trigger when active, inline X to clear, searchable cmdk list with
|
|
1917
|
+
* optional pinned (virtual) rows like "No assignee".
|
|
1918
|
+
*
|
|
1919
|
+
* Composition:
|
|
1920
|
+
* - Popover (Radix) for the floating container.
|
|
1921
|
+
* - Command (cmdk) for the searchable list and keyboard nav.
|
|
1922
|
+
* - Checkbox (Radix) for per-row selection state.
|
|
1923
|
+
*
|
|
1924
|
+
* Visual contract for the trigger mirrors `SelectTrigger` (h-9, rounded-sm,
|
|
1925
|
+
* border + bg-background) so a toolbar of MultiSelect + Input + Select reads
|
|
1926
|
+
* as one coherent control row. Active state stacks up to `maxStackedIcons`
|
|
1927
|
+
* selected-row icons (with a generic silhouette for icon-less rows) and
|
|
1928
|
+
* shows "{count} {countLabel}" alongside.
|
|
1929
|
+
*
|
|
1930
|
+
* Composition safety: the active trigger keeps `border-input` (NOT
|
|
1931
|
+
* `border-foreground`). `--foreground` is near-black, so swapping to
|
|
1932
|
+
* it on selection produced a heavy black outline that competed with
|
|
1933
|
+
* real CTAs. Active state is conveyed by the stacked icons + bold
|
|
1934
|
+
* count + X, not by the chrome. See DESIGN.md "Composition safety".
|
|
1935
|
+
*/
|
|
1936
|
+
export declare interface MultiSelectOption {
|
|
1937
|
+
/** Stable identifier — what shows up in `selected` and `onChange`. */
|
|
1938
|
+
value: string;
|
|
1939
|
+
/** Display text for the row and the cmdk search index. */
|
|
1940
|
+
label: string;
|
|
1941
|
+
/**
|
|
1942
|
+
* Optional secondary line beneath the label (e.g. an email under a name).
|
|
1943
|
+
* Disambiguates rows that share a label — two people with the same name.
|
|
1944
|
+
* Truncates like the label. Pure presentational — not searched (add the
|
|
1945
|
+
* same text to `keywords` to also match on it).
|
|
1946
|
+
*/
|
|
1947
|
+
sublabel?: ReactNode;
|
|
1948
|
+
/**
|
|
1949
|
+
* Optional leading visual (e.g. avatar). Renders before the label in
|
|
1950
|
+
* the row, and stacks in the trigger when this option is selected.
|
|
1951
|
+
* Size yourself to ~20px square so the row vertical rhythm holds.
|
|
1952
|
+
*/
|
|
1953
|
+
icon?: ReactNode;
|
|
1954
|
+
/**
|
|
1955
|
+
* Optional right-aligned secondary text (e.g. "8 issues"). Pure
|
|
1956
|
+
* presentational — not searched.
|
|
1957
|
+
*/
|
|
1958
|
+
meta?: ReactNode;
|
|
1959
|
+
/**
|
|
1960
|
+
* Pin this option above a separator at the top of the list (e.g.
|
|
1961
|
+
* "No assignee", "Current user"). Pinned options render in their
|
|
1962
|
+
* caller-provided order regardless of search ranking.
|
|
1963
|
+
*/
|
|
1964
|
+
pinned?: boolean;
|
|
1965
|
+
/**
|
|
1966
|
+
* Extra strings to include in the search index alongside `label`.
|
|
1967
|
+
* Useful when the visible label is a name but you also want to
|
|
1968
|
+
* match an email or alias.
|
|
1969
|
+
*/
|
|
1970
|
+
keywords?: string[];
|
|
1971
|
+
}
|
|
1972
|
+
|
|
1973
|
+
declare interface MultiSelectProps extends MultiSelectCoreProps {
|
|
1974
|
+
/** Inactive trigger label (e.g. "People", "Assignee"). */
|
|
1975
|
+
label: string;
|
|
1976
|
+
/**
|
|
1977
|
+
* Plural noun shown after the count in the active trigger
|
|
1978
|
+
* ("3 {countLabel}"). Defaults to `label.toLowerCase()`.
|
|
1979
|
+
*/
|
|
1980
|
+
countLabel?: string;
|
|
1981
|
+
/**
|
|
1982
|
+
* Max number of selected-row icons to stack in the trigger. Beyond
|
|
1983
|
+
* this, additional selected rows roll up into the count. Defaults
|
|
1984
|
+
* to 3 (matches Linear's behavior).
|
|
1985
|
+
*/
|
|
1986
|
+
maxStackedIcons?: number;
|
|
1987
|
+
/**
|
|
1988
|
+
* Hide the trigger entirely when `options` is empty. Defaults to
|
|
1989
|
+
* true — empty filter chips clutter a toolbar. Pass `false` when
|
|
1990
|
+
* the chip should be visible (e.g. as an affordance for a list
|
|
1991
|
+
* that hasn't loaded yet).
|
|
1992
|
+
*/
|
|
1993
|
+
hideWhenEmpty?: boolean;
|
|
1994
|
+
className?: string;
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
/**
|
|
1998
|
+
* Snapshot of every matching cache entry, captured in `onMutate` for rollback.
|
|
1999
|
+
*/
|
|
2000
|
+
export declare interface OptimisticListContext<TCache> {
|
|
2001
|
+
previous: [QueryKey, TCache | undefined][];
|
|
2002
|
+
optimisticMutationId?: number;
|
|
2003
|
+
queryKeyHash?: string;
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
/**
|
|
2007
|
+
* Snapshot captured in `onMutate`, used to roll the cache back on error.
|
|
2008
|
+
*/
|
|
2009
|
+
export declare interface OptimisticResourceContext<TData> {
|
|
2010
|
+
previous: TData | undefined;
|
|
2011
|
+
optimisticMutationId?: number;
|
|
2012
|
+
queryKeyHash?: string;
|
|
2013
|
+
}
|
|
2014
|
+
|
|
2015
|
+
/**
|
|
2016
|
+
* A small, reusable inline picker: the current value renders as a clickable
|
|
2017
|
+
* badge/dot that opens a popover of the actual options (each shown with its own
|
|
2018
|
+
* swatch + a check on the active one). A nicer, on-brand replacement for a
|
|
2019
|
+
* native <select> for short, visual enum fields like status and health.
|
|
2020
|
+
*/
|
|
2021
|
+
export declare function OptionPicker<T extends string>({ value, options, onChange, children, ariaLabel, align, triggerClassName, contentClassName, }: OptionPickerProps<T>): JSX.Element;
|
|
2022
|
+
|
|
2023
|
+
export declare interface OptionPickerProps<T extends string> {
|
|
2024
|
+
value: T;
|
|
2025
|
+
options: PickerOption<T>[];
|
|
2026
|
+
onChange: (value: T) => void;
|
|
2027
|
+
/** Closed-state trigger content (the badge / dot shown in the row). */
|
|
2028
|
+
children: ReactNode;
|
|
2029
|
+
ariaLabel?: string;
|
|
2030
|
+
align?: 'start' | 'center' | 'end';
|
|
2031
|
+
/** Extra classes for the trigger button (e.g. padding around a small dot). */
|
|
2032
|
+
triggerClassName?: string;
|
|
2033
|
+
contentClassName?: string;
|
|
2034
|
+
}
|
|
2035
|
+
|
|
2036
|
+
export declare function PageSkeleton({ variant, className }: PageSkeletonProps): JSX.Element;
|
|
2037
|
+
|
|
2038
|
+
export declare interface PageSkeletonProps {
|
|
2039
|
+
variant?: PageSkeletonVariant;
|
|
2040
|
+
className?: string;
|
|
2041
|
+
}
|
|
2042
|
+
|
|
2043
|
+
export declare type PageSkeletonVariant = 'default' | 'list' | 'detail' | 'dashboard';
|
|
2044
|
+
|
|
2045
|
+
export declare function pctChange(current: number, previous: number): number | null;
|
|
2046
|
+
|
|
2047
|
+
export declare function PercentCell({ value, dangerBelow, className, }: {
|
|
2048
|
+
value: number | null | undefined;
|
|
2049
|
+
dangerBelow?: number;
|
|
2050
|
+
className?: string;
|
|
2051
|
+
}): JSX.Element;
|
|
2052
|
+
|
|
2053
|
+
export declare interface PickerOption<T extends string> {
|
|
2054
|
+
value: T;
|
|
2055
|
+
/** Optional text label; omit when the swatch already reads as the option. */
|
|
2056
|
+
label?: string;
|
|
2057
|
+
/** The option's visual — a colored badge, dot, etc. */
|
|
2058
|
+
swatch: ReactNode;
|
|
2059
|
+
}
|
|
2060
|
+
|
|
2061
|
+
export declare const Popover: React_2.FC<PopoverPrimitive.PopoverProps>;
|
|
2062
|
+
|
|
2063
|
+
export declare const PopoverAnchor: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
2064
|
+
|
|
2065
|
+
export declare const PopoverContent: React_2.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2066
|
+
|
|
2067
|
+
export declare const PopoverTrigger: React_2.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
2068
|
+
|
|
2069
|
+
export declare const PortalContainerContext: React_2.Context<PortalContainerContextValue>;
|
|
2070
|
+
|
|
2071
|
+
declare interface PortalContainerContextValue {
|
|
2072
|
+
container: HTMLElement | null;
|
|
2073
|
+
appClassName?: string;
|
|
2074
|
+
}
|
|
2075
|
+
|
|
2076
|
+
export declare function PortalContainerProvider({ children, appClassName, }: {
|
|
2077
|
+
children: React_2.ReactNode;
|
|
2078
|
+
appClassName?: string;
|
|
2079
|
+
}): JSX.Element;
|
|
2080
|
+
|
|
2081
|
+
export declare type ProColumnDef<T> = ColumnDef<T, unknown> & {
|
|
2082
|
+
meta?: ProColumnMeta;
|
|
2083
|
+
};
|
|
2084
|
+
|
|
2085
|
+
/**
|
|
2086
|
+
* ProDataTable — opinionated extension of the shadcn table for dashboard-style
|
|
2087
|
+
* lists. Layered on top of `DataTable` so apps can opt into richer chrome:
|
|
2088
|
+
* - toolbar slot (search + filters + extras) above the header row
|
|
2089
|
+
* - uppercase, compact header cells with sort arrows (stateful)
|
|
2090
|
+
* - sticky-left columns for "name" identity (horizontal-scroll safe)
|
|
2091
|
+
* - selected/hover row styling + right-aligned numeric cells
|
|
2092
|
+
* - composable cell primitives exported from this module
|
|
2093
|
+
* (AvatarTextCell, SparklineCell, StatusDotBadge, ScoreBarCell, etc.)
|
|
2094
|
+
*
|
|
2095
|
+
* Consumers describe columns with TanStack's `ColumnDef<T>`. The `meta` field
|
|
2096
|
+
* on each column is extended with optional presentational hints that live
|
|
2097
|
+
* with the column definition (alignment, sticky, width, header tooltip).
|
|
2098
|
+
*/
|
|
2099
|
+
/**
|
|
2100
|
+
* Column meta extension. Narrow, opt-in; backwards compatible with ColumnDef.
|
|
2101
|
+
*
|
|
2102
|
+
* Sizing model (rebuilt):
|
|
2103
|
+
* - `minWidth` — hard lower bound. The cell never renders narrower than
|
|
2104
|
+
* this, even when the table is squeezed. This is what
|
|
2105
|
+
* triggers horizontal scroll when the sum of minimums
|
|
2106
|
+
* exceeds the container. Defaults to `width` when only
|
|
2107
|
+
* `width` is supplied, else `DEFAULT_MIN_WIDTH`.
|
|
2108
|
+
* - `width` — preferred/fixed width in px. Use for compact utility
|
|
2109
|
+
* columns (status pills, action menus, numeric cells).
|
|
2110
|
+
* A column with `width` but no `grow` stays locked to
|
|
2111
|
+
* `width` when the container is wide.
|
|
2112
|
+
* - `grow` — when true, the column claims remaining horizontal space.
|
|
2113
|
+
* Use for identity columns (name + subtitle) so they
|
|
2114
|
+
* flex with the viewport. Multiple `grow` columns share
|
|
2115
|
+
* remaining space proportionally.
|
|
2116
|
+
*
|
|
2117
|
+
* The table itself uses `table-layout: auto` + a computed `min-width` that
|
|
2118
|
+
* equals the sum of per-column `minWidth`s plus container padding — so when
|
|
2119
|
+
* the viewport shrinks past that threshold, horizontal scroll kicks in and
|
|
2120
|
+
* every column stays at its own minimum instead of collapsing below it.
|
|
2121
|
+
*/
|
|
2122
|
+
/**
|
|
2123
|
+
* Native per-column filter config. Attach to a column's `meta.filter` to opt
|
|
2124
|
+
* that column into the toolbar filter menu (a single funnel button that lists
|
|
2125
|
+
* every filterable column as a nested facet — the standard Atlas `FilterMenu`).
|
|
2126
|
+
*
|
|
2127
|
+
* The table owns the filtering: it wires the facet to TanStack's column-filter
|
|
2128
|
+
* state and drops rows whose cell value doesn't match. This is a client-side
|
|
2129
|
+
* feature — it's ignored under `manualPagination` (the parent already paged the
|
|
2130
|
+
* rows server-side, so it owns filtering too).
|
|
2131
|
+
*
|
|
2132
|
+
* - `type: 'multi'` — checklist; a row matches if its value is in the set.
|
|
2133
|
+
* - `type: 'single'` — pick one value; a row matches if it equals the pick.
|
|
2134
|
+
*
|
|
2135
|
+
* `options` is optional: when omitted the table derives the distinct values of
|
|
2136
|
+
* the column from `data` (value used verbatim as the label). Supply `options`
|
|
2137
|
+
* to control the option set, ordering, or human labels (e.g. map a status code
|
|
2138
|
+
* to a readable name). Matching always compares against the column's own cell
|
|
2139
|
+
* value coerced to a string, so option `value`s must equal that string form.
|
|
2140
|
+
*/
|
|
2141
|
+
export declare type ProColumnFilter = {
|
|
2142
|
+
type: 'multi';
|
|
2143
|
+
/** Facet label in the menu. Defaults to the column's string header. */
|
|
2144
|
+
label?: string;
|
|
2145
|
+
/** Explicit options. Omit to auto-derive distinct values from `data`. */
|
|
2146
|
+
options?: MultiSelectOption[];
|
|
2147
|
+
/** Search-input placeholder inside the facet submenu. Defaults to the label. */
|
|
2148
|
+
searchPlaceholder?: string;
|
|
2149
|
+
} | {
|
|
2150
|
+
type: 'single';
|
|
2151
|
+
label?: string;
|
|
2152
|
+
options?: MultiSelectOption[];
|
|
2153
|
+
searchPlaceholder?: string;
|
|
2154
|
+
/**
|
|
2155
|
+
* Value that counts as "no filter" (e.g. an `'all'` default). When the
|
|
2156
|
+
* pick equals this, the facet is inactive and "Clear all" resets to it.
|
|
2157
|
+
*/
|
|
2158
|
+
defaultValue?: string;
|
|
2159
|
+
};
|
|
2160
|
+
|
|
2161
|
+
/**
|
|
2162
|
+
* Discriminated union on `sticky`. The variants enforce at compile time that
|
|
2163
|
+
* `{ sticky: true, grow: true }` can't be declared — callers get a TS error
|
|
2164
|
+
* instead of silent layout corruption.
|
|
2165
|
+
*/
|
|
2166
|
+
export declare type ProColumnMeta = ProColumnMetaSticky | ProColumnMetaNonSticky;
|
|
2167
|
+
|
|
2168
|
+
/**
|
|
2169
|
+
* Fields shared by every column regardless of sticky / grow.
|
|
2170
|
+
*
|
|
2171
|
+
* `sticky` and `grow` are intentionally omitted here — they're added by the
|
|
2172
|
+
* two `ProColumnMeta` variants below to form a discriminated union that makes
|
|
2173
|
+
* `{ sticky: true, grow: true }` unrepresentable.
|
|
2174
|
+
*/
|
|
2175
|
+
declare interface ProColumnMetaBase {
|
|
2176
|
+
align?: 'left' | 'right' | 'center';
|
|
2177
|
+
/** Preferred pixel width. Locks the column unless `grow` is also set. */
|
|
2178
|
+
width?: number;
|
|
2179
|
+
/** Lower bound — column never renders narrower than this. */
|
|
2180
|
+
minWidth?: number;
|
|
2181
|
+
/** Header cell monospace / text hint. Body follows column cell content. */
|
|
2182
|
+
headerMono?: boolean;
|
|
2183
|
+
/** Extra className applied to the <th>. */
|
|
2184
|
+
headerClassName?: string;
|
|
2185
|
+
/** Extra className applied to every <td>. */
|
|
2186
|
+
cellClassName?: string;
|
|
2187
|
+
/** Hide default sort indicator even when column is sortable. */
|
|
2188
|
+
hideSortIndicator?: boolean;
|
|
2189
|
+
/**
|
|
2190
|
+
* Opt this specific column out of user resizing when the table is rendered
|
|
2191
|
+
* with `resizableColumns`. Defaults to resizable. Set `false` for columns
|
|
2192
|
+
* whose width is intentionally fixed (action / overflow-menu columns, tight
|
|
2193
|
+
* numeric cells) so they don't sprout a drag handle.
|
|
2194
|
+
*/
|
|
2195
|
+
enableResizing?: boolean;
|
|
2196
|
+
/**
|
|
2197
|
+
* Mark a column whose cells carry their own control (checkbox, status
|
|
2198
|
+
* toggle, delete button). Clicks anywhere in the cell — including the
|
|
2199
|
+
* padding around the control — stop at the cell instead of bubbling to
|
|
2200
|
+
* the row's `onRowClick`, so a near-miss on the control can't navigate
|
|
2201
|
+
* away. The control itself no longer needs its own `stopPropagation`.
|
|
2202
|
+
*/
|
|
2203
|
+
interactive?: boolean;
|
|
2204
|
+
/**
|
|
2205
|
+
* Opt this column into the toolbar filter menu. See {@link ProColumnFilter}.
|
|
2206
|
+
* Client-side only — ignored under `manualPagination`.
|
|
2207
|
+
*/
|
|
2208
|
+
filter?: ProColumnFilter;
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
/**
|
|
2212
|
+
* Column meta for a non-sticky column. `grow: true` opts the column into
|
|
2213
|
+
* absorbing remaining horizontal space (identity / title columns typically
|
|
2214
|
+
* want this; utility columns do not).
|
|
2215
|
+
*/
|
|
2216
|
+
declare interface ProColumnMetaNonSticky extends ProColumnMetaBase {
|
|
2217
|
+
sticky?: false;
|
|
2218
|
+
/** When true, column flexes to fill remaining horizontal space. */
|
|
2219
|
+
grow?: boolean;
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2222
|
+
/**
|
|
2223
|
+
* Column meta for a sticky (pinned) column.
|
|
2224
|
+
*
|
|
2225
|
+
* Sticky columns pin to EITHER the left or right edge of the scroll
|
|
2226
|
+
* region. Both sides support a contiguous block — for left, the block
|
|
2227
|
+
* starts at the leftmost column; for right, at the rightmost. The first
|
|
2228
|
+
* non-sticky column ends the chain on each side (dev-mode warning if a
|
|
2229
|
+
* sticky declaration follows the break).
|
|
2230
|
+
*
|
|
2231
|
+
* API:
|
|
2232
|
+
* - `sticky: true` → equivalent to `sticky: 'left'` (backward compat)
|
|
2233
|
+
* - `sticky: 'left'` → pin to the left edge. Common for identity
|
|
2234
|
+
* columns (name, row ID).
|
|
2235
|
+
* - `sticky: 'right'`→ pin to the right edge. Common for action
|
|
2236
|
+
* columns (overflow menu, status).
|
|
2237
|
+
*
|
|
2238
|
+
* The innermost pinned cell on each side (rightmost of the left block,
|
|
2239
|
+
* leftmost of the right block) gets an edge shadow when the scrollable
|
|
2240
|
+
* content has room to move away from that side — i.e., left-edge shadow
|
|
2241
|
+
* appears after the user scrolls right past the start, right-edge shadow
|
|
2242
|
+
* appears until the user scrolls to the end. The shadow indicates that
|
|
2243
|
+
* content is currently being occluded BY the pinned cell.
|
|
2244
|
+
*
|
|
2245
|
+
* `grow` is disallowed on sticky columns — a grown sticky column renders at
|
|
2246
|
+
* `width: 100%` which both breaks the cumulative offset math used to pin
|
|
2247
|
+
* subsequent sticky columns and makes the pinned region balloon to fill
|
|
2248
|
+
* the viewport. Set an explicit `width` (and optional `minWidth`) instead.
|
|
2249
|
+
*/
|
|
2250
|
+
declare interface ProColumnMetaSticky extends ProColumnMetaBase {
|
|
2251
|
+
sticky: true | 'left' | 'right';
|
|
2252
|
+
/**
|
|
2253
|
+
* @deprecated `grow` is not allowed on sticky columns. Use `width` +
|
|
2254
|
+
* `minWidth` to give the sticky column a deterministic size.
|
|
2255
|
+
*/
|
|
2256
|
+
grow?: never;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
export declare function ProDataTable<T>({ columns, data, searchable, filters, toolbar, actions, footer, pageSize, disablePagination, resizableColumns, columnSizingStorageKey, defaultSort, manualPagination, rowCount, pageIndex, onPageChange, manualSorting, sorting: controlledSorting, onSortingChange, manualFiltering, columnFilters: controlledColumnFilters, onColumnFiltersChange, loading, emptyMessage, onRowClick, rowHref, rowClassName, minWidth, height, bordered, variant, ariaLabel, className, }: ProDataTableProps<T>): JSX.Element;
|
|
2260
|
+
|
|
2261
|
+
/**
|
|
2262
|
+
* Native segmented filter for the toolbar (e.g. All / Groups / People). The
|
|
2263
|
+
* table renders the pills; the caller owns the active value and the actual
|
|
2264
|
+
* filtering of `data` (filters are frequently heterogeneous, so the predicate
|
|
2265
|
+
* stays with the caller rather than being baked in).
|
|
2266
|
+
*/
|
|
2267
|
+
declare interface ProDataTableFilters {
|
|
2268
|
+
value: string;
|
|
2269
|
+
onChange: (value: string) => void;
|
|
2270
|
+
options: ReadonlyArray<{
|
|
2271
|
+
id: string;
|
|
2272
|
+
label: string;
|
|
2273
|
+
}>;
|
|
2274
|
+
ariaLabel?: string;
|
|
2275
|
+
}
|
|
2276
|
+
|
|
2277
|
+
export declare function ProDataTablePagination<T>({ table, className, totalLabel, total: totalOverride }: ProDataTablePaginationProps<T>): JSX.Element;
|
|
2278
|
+
|
|
2279
|
+
declare interface ProDataTablePaginationProps<T> {
|
|
2280
|
+
table: Table_2<T>;
|
|
2281
|
+
className?: string;
|
|
2282
|
+
totalLabel?: (args: {
|
|
2283
|
+
from: number;
|
|
2284
|
+
to: number;
|
|
2285
|
+
total: number;
|
|
2286
|
+
}) => React_2.ReactNode;
|
|
2287
|
+
/**
|
|
2288
|
+
* True total across all pages. Required for manual (server) pagination, where
|
|
2289
|
+
* the client row model only holds the current page — omit for client-side
|
|
2290
|
+
* pagination, which derives the total from the filtered row model.
|
|
2291
|
+
*/
|
|
2292
|
+
total?: number;
|
|
2293
|
+
}
|
|
2294
|
+
|
|
2295
|
+
declare interface ProDataTableProps<T> {
|
|
2296
|
+
columns: ProColumnDef<T>[];
|
|
2297
|
+
data: T[];
|
|
2298
|
+
/**
|
|
2299
|
+
* Enable a client-side search input in the table header. Filters rows by
|
|
2300
|
+
* concatenating every cell's accessor value (default) or via a custom
|
|
2301
|
+
* accessor. Pass `true` for defaults, or an object to override.
|
|
2302
|
+
*/
|
|
2303
|
+
searchable?: boolean | ProDataTableSearchable<T>;
|
|
2304
|
+
/** Native segmented filter pills rendered in the toolbar. */
|
|
2305
|
+
filters?: ProDataTableFilters;
|
|
2306
|
+
/** Custom filter controls rendered next to the search input. */
|
|
2307
|
+
toolbar?: React_2.ReactNode;
|
|
2308
|
+
/**
|
|
2309
|
+
* Action buttons pinned to the right edge of the toolbar (e.g. "New", an
|
|
2310
|
+
* export button, an overflow menu). Kept in a dedicated right-aligned slot —
|
|
2311
|
+
* separate from `toolbar` (left-aligned custom controls) — so primary
|
|
2312
|
+
* actions read as distinct from the search/filter chrome. Rendering any
|
|
2313
|
+
* toolbar content (search, filters, `toolbar`, or `actions`) shows the bar.
|
|
2314
|
+
*/
|
|
2315
|
+
actions?: React_2.ReactNode;
|
|
2316
|
+
/** Footer rendered below the table (e.g. custom summary row). */
|
|
2317
|
+
footer?: React_2.ReactNode;
|
|
2318
|
+
pageSize?: number;
|
|
2319
|
+
/** Disable pagination entirely (small, known datasets). */
|
|
2320
|
+
disablePagination?: boolean;
|
|
2321
|
+
/**
|
|
2322
|
+
* Let the user drag column borders to resize them. A grab handle appears on
|
|
2323
|
+
* the right edge of every header cell (except columns with
|
|
2324
|
+
* `meta.enableResizing: false`), drag to resize live, double-click a handle
|
|
2325
|
+
* to reset that column to its default width. Only applies to the `table`
|
|
2326
|
+
* variant (the `list` variant has no header to grab).
|
|
2327
|
+
*
|
|
2328
|
+
* Under resize mode, non-grow columns render at deterministic px widths.
|
|
2329
|
+
* A `grow` column keeps its flex behavior (absorbing surplus container
|
|
2330
|
+
* width) until the user drags it — at which point it becomes a
|
|
2331
|
+
* deterministic px width like the rest; double-click reset restores the
|
|
2332
|
+
* flex behavior. Keeping one grow column is what stops `table-layout:
|
|
2333
|
+
* fixed` from distributing surplus across every column (which would
|
|
2334
|
+
* desync sticky-offset math and inflate tight utility columns).
|
|
2335
|
+
*/
|
|
2336
|
+
resizableColumns?: boolean;
|
|
2337
|
+
/**
|
|
2338
|
+
* When set alongside `resizableColumns`, per-column widths persist to
|
|
2339
|
+
* `localStorage` under this key so a user's sizing survives reloads and
|
|
2340
|
+
* re-mounts. Omit for session-only (in-memory) resizing. Failures to read
|
|
2341
|
+
* or write storage are swallowed — resizing still works, it just won't
|
|
2342
|
+
* persist.
|
|
2343
|
+
*/
|
|
2344
|
+
columnSizingStorageKey?: string;
|
|
2345
|
+
defaultSort?: SortingState;
|
|
2346
|
+
/**
|
|
2347
|
+
* Server-side (manual) pagination. When set, the table renders `data` as-is
|
|
2348
|
+
* (already one server page) instead of slicing client-side, and reports
|
|
2349
|
+
* position/total from `rowCount` + the controlled `pageIndex`. The pager's
|
|
2350
|
+
* prev/next call `onPageChange` with the new zero-based page index; the parent
|
|
2351
|
+
* refetches. Omit for the default client-side pagination — existing callers
|
|
2352
|
+
* are unaffected.
|
|
2353
|
+
*/
|
|
2354
|
+
manualPagination?: boolean;
|
|
2355
|
+
/** Total row count across all server pages (manual pagination only). */
|
|
2356
|
+
rowCount?: number;
|
|
2357
|
+
/** Controlled zero-based page index (manual pagination only). */
|
|
2358
|
+
pageIndex?: number;
|
|
2359
|
+
/** Called with the new zero-based page index when the pager advances (manual pagination only). */
|
|
2360
|
+
onPageChange?: (pageIndex: number) => void;
|
|
2361
|
+
/**
|
|
2362
|
+
* Server-side (manual) sorting. When set, header clicks call `onSortingChange`
|
|
2363
|
+
* instead of reordering client rows — the parent maps the sort to its query
|
|
2364
|
+
* and refetches. Pair with `sorting` (controlled state). Columns that have no
|
|
2365
|
+
* server-sortable backing should set `enableSorting: false`.
|
|
2366
|
+
*/
|
|
2367
|
+
manualSorting?: boolean;
|
|
2368
|
+
/** Controlled sort state (manual sorting only). */
|
|
2369
|
+
sorting?: SortingState;
|
|
2370
|
+
/** Called with the next sort state on a header click (manual sorting only). */
|
|
2371
|
+
onSortingChange?: (sorting: SortingState) => void;
|
|
2372
|
+
/**
|
|
2373
|
+
* Server-side (manual) column filtering. When set, the toolbar filter funnel
|
|
2374
|
+
* renders even under `manualPagination`, but the table does NOT drop rows
|
|
2375
|
+
* itself — it reflects the controlled `columnFilters` in the facets/pills and
|
|
2376
|
+
* emits `onColumnFiltersChange` so the parent maps them to its query and
|
|
2377
|
+
* refetches. Filterable columns MUST supply explicit `meta.filter.options`
|
|
2378
|
+
* (distinct values can't be auto-derived from a single server page). Pair
|
|
2379
|
+
* with `columnFilters`; the parent should reset `pageIndex` to 0 on change.
|
|
2380
|
+
*/
|
|
2381
|
+
manualFiltering?: boolean;
|
|
2382
|
+
/** Controlled column-filter state (manual filtering only). */
|
|
2383
|
+
columnFilters?: ColumnFiltersState;
|
|
2384
|
+
/** Called with the next column-filter state when a facet changes (manual filtering only). */
|
|
2385
|
+
onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
|
|
2386
|
+
/**
|
|
2387
|
+
* Dim the table body and show a centered spinner — for server-driven tables
|
|
2388
|
+
* during a refetch (search/filter/sort/page change), so the grid doesn't
|
|
2389
|
+
* flash empty or stale between requests.
|
|
2390
|
+
*/
|
|
2391
|
+
loading?: boolean;
|
|
2392
|
+
emptyMessage?: React_2.ReactNode;
|
|
2393
|
+
onRowClick?: (row: T) => void;
|
|
2394
|
+
/**
|
|
2395
|
+
* Per-row destination URL. When provided alongside `onRowClick`, plain
|
|
2396
|
+
* clicks still call `onRowClick` (SPA navigate), but Cmd/Ctrl-click,
|
|
2397
|
+
* middle-click, and Shift-click open the URL in a new tab/window — same
|
|
2398
|
+
* semantics as a real `<a>` element. Without this prop, modifier-clicks
|
|
2399
|
+
* fall through to the plain handler and the user can't multi-open rows.
|
|
2400
|
+
*/
|
|
2401
|
+
rowHref?: (row: T) => string | undefined;
|
|
2402
|
+
rowClassName?: (row: Row<T>) => string | undefined;
|
|
2403
|
+
/**
|
|
2404
|
+
* Override the computed table min-width. By default, the component adds up
|
|
2405
|
+
* each column's `minWidth` + horizontal padding to derive the threshold
|
|
2406
|
+
* where horizontal scroll should kick in. Set this only if you need to
|
|
2407
|
+
* force a larger minimum (e.g. to reserve room for a floating column).
|
|
2408
|
+
*/
|
|
2409
|
+
minWidth?: number;
|
|
2410
|
+
/**
|
|
2411
|
+
* Explicit height for the table card. Overrides the default fill-parent
|
|
2412
|
+
* behavior. Accepts any CSS length (`'600px'`, `'70vh'`,
|
|
2413
|
+
* `'calc(100vh - 12rem)'`) or a pixel `number`.
|
|
2414
|
+
*
|
|
2415
|
+
* By default the card grows to fill its parent's available height via
|
|
2416
|
+
* `flex-1` (for flex-column parents like DashboardShell body) and
|
|
2417
|
+
* `h-full` (for fixed-height parents). The toolbar stays pinned at
|
|
2418
|
+
* the top of the card, the body scrolls internally, and the header
|
|
2419
|
+
* sticks to the top of the scroll region.
|
|
2420
|
+
*/
|
|
2421
|
+
height?: string | number;
|
|
2422
|
+
/** Wrap the whole thing in a rounded card. Defaults to true. */
|
|
2423
|
+
bordered?: boolean;
|
|
2424
|
+
/**
|
|
2425
|
+
* `table` (default) renders column headers (sortable). `list` hides the
|
|
2426
|
+
* header row for a clean borderless list — rows still carry the `black-6`
|
|
2427
|
+
* inset dividers. Use for identity lists (people / groups) where column
|
|
2428
|
+
* labels are noise. Sorting via header click isn't available in `list`;
|
|
2429
|
+
* pass `defaultSort` for a fixed order.
|
|
2430
|
+
*/
|
|
2431
|
+
variant?: 'table' | 'list';
|
|
2432
|
+
/** Shown when the table is selected in a multi-table shell (optional). */
|
|
2433
|
+
ariaLabel?: string;
|
|
2434
|
+
className?: string;
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2437
|
+
/**
|
|
2438
|
+
* Built-in search config for ProDataTable. The table owns the input and
|
|
2439
|
+
* filters rows client-side via TanStack's globalFilter. Pass `true` for a
|
|
2440
|
+
* default search bar, or an object to customize placeholder / matcher.
|
|
2441
|
+
*/
|
|
2442
|
+
declare interface ProDataTableSearchable<T> {
|
|
2443
|
+
placeholder?: string;
|
|
2444
|
+
/**
|
|
2445
|
+
* Optional extractor used when the default includes-string matcher isn't
|
|
2446
|
+
* enough (e.g. fuzzy search, concatenating several fields). Return the
|
|
2447
|
+
* searchable text representation for a row. Client-side search only.
|
|
2448
|
+
*/
|
|
2449
|
+
accessor?: (row: T) => string;
|
|
2450
|
+
/** Width of the input in px. Defaults to 240. */
|
|
2451
|
+
width?: number;
|
|
2452
|
+
/**
|
|
2453
|
+
* Controlled (server-side) search. When `onChange` is provided the table
|
|
2454
|
+
* stops filtering client-side and hands the debounced query to the parent,
|
|
2455
|
+
* which refetches — pair with `manualPagination`. `value` is the current
|
|
2456
|
+
* query (keeps the input in sync if the parent resets it). Omit both for the
|
|
2457
|
+
* default client-side filter over the loaded `data`.
|
|
2458
|
+
*/
|
|
2459
|
+
value?: string;
|
|
2460
|
+
onChange?: (value: string) => void;
|
|
2461
|
+
/** Debounce before a controlled `onChange` fires, in ms. Default 300. */
|
|
2462
|
+
debounceMs?: number;
|
|
2463
|
+
}
|
|
2464
|
+
|
|
2465
|
+
export declare function ProDataTableToolbar({ className, children, }: {
|
|
2466
|
+
className?: string;
|
|
2467
|
+
children?: React_2.ReactNode;
|
|
2468
|
+
}): JSX.Element;
|
|
2469
|
+
|
|
2470
|
+
export declare function ProgressBar({ value, max, color, className }: ProgressBarProps): JSX.Element;
|
|
2471
|
+
|
|
2472
|
+
export declare function ProgressBarCell({ value, total, label, tone, className, }: ProgressBarCellProps): JSX.Element;
|
|
2473
|
+
|
|
2474
|
+
declare interface ProgressBarCellProps {
|
|
2475
|
+
value: number;
|
|
2476
|
+
total: number;
|
|
2477
|
+
label?: React_2.ReactNode;
|
|
2478
|
+
/** Tone applied to the fill bar. Defaults to neutral ink. */
|
|
2479
|
+
tone?: 'neutral' | 'running' | 'success' | 'danger';
|
|
2480
|
+
className?: string;
|
|
2481
|
+
}
|
|
2482
|
+
|
|
2483
|
+
declare interface ProgressBarProps {
|
|
2484
|
+
value: number;
|
|
2485
|
+
max?: number;
|
|
2486
|
+
color?: string;
|
|
2487
|
+
className?: string;
|
|
2488
|
+
}
|
|
2489
|
+
|
|
2490
|
+
export declare function ProgressCard({ title, description, total, counts, assignees, footer, onClick, locked, className, }: ProgressCardProps): JSX.Element;
|
|
2491
|
+
|
|
2492
|
+
export declare interface ProgressCardAssignee {
|
|
2493
|
+
id: string;
|
|
2494
|
+
displayName: string;
|
|
2495
|
+
avatarUrl?: string;
|
|
2496
|
+
}
|
|
2497
|
+
|
|
2498
|
+
export declare interface ProgressCardCounts {
|
|
2499
|
+
todo: number;
|
|
2500
|
+
pending: number;
|
|
2501
|
+
done: number;
|
|
2502
|
+
}
|
|
2503
|
+
|
|
2504
|
+
export declare interface ProgressCardProps {
|
|
2505
|
+
title: string;
|
|
2506
|
+
description?: string;
|
|
2507
|
+
total: number;
|
|
2508
|
+
counts: ProgressCardCounts;
|
|
2509
|
+
assignees?: ProgressCardAssignee[];
|
|
2510
|
+
footer?: React_2.ReactNode;
|
|
2511
|
+
onClick?: () => void;
|
|
2512
|
+
locked?: boolean;
|
|
2513
|
+
className?: string;
|
|
2514
|
+
}
|
|
2515
|
+
|
|
2516
|
+
/**
|
|
2517
|
+
* A quiet live/refresh indicator: a small green dot (muted when paused) that
|
|
2518
|
+
* pulses subtly while a refresh is in flight, doubling as a manual-refresh
|
|
2519
|
+
* button. Deliberately text-free — the freshness detail lives in the tooltip so
|
|
2520
|
+
* the UI doesn't churn a ticking label.
|
|
2521
|
+
*/
|
|
2522
|
+
export declare function RefreshIndicator({ onRefresh, isFetching, isPaused, updatedAt, className, }: RefreshIndicatorProps): JSX.Element;
|
|
2523
|
+
|
|
2524
|
+
export declare interface RefreshIndicatorProps {
|
|
2525
|
+
/** Manually trigger a refresh. */
|
|
2526
|
+
onRefresh: () => void;
|
|
2527
|
+
/** A background refresh is in flight — shows a subtle pulse. */
|
|
2528
|
+
isFetching?: boolean;
|
|
2529
|
+
/** Auto-refresh is paused (e.g. while editing) — shows a muted dot. */
|
|
2530
|
+
isPaused?: boolean;
|
|
2531
|
+
/** Last successful refresh time (ms epoch) — surfaced in the tooltip only. */
|
|
2532
|
+
updatedAt?: number;
|
|
2533
|
+
className?: string;
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
export declare function RelativeTimeCell({ primary, secondary, className, }: {
|
|
2537
|
+
primary: React_2.ReactNode;
|
|
2538
|
+
secondary?: React_2.ReactNode;
|
|
2539
|
+
className?: string;
|
|
2540
|
+
}): JSX.Element;
|
|
2541
|
+
|
|
2542
|
+
export declare function RequiredMarker({ className }: {
|
|
2543
|
+
className?: string;
|
|
2544
|
+
}): JSX.Element;
|
|
2545
|
+
|
|
2546
|
+
export declare function ResultsBarCell({ passed, warn, failed, className }: ResultsBarCellProps): JSX.Element;
|
|
2547
|
+
|
|
2548
|
+
declare interface ResultsBarCellProps {
|
|
2549
|
+
passed: number;
|
|
2550
|
+
warn?: number;
|
|
2551
|
+
failed?: number;
|
|
2552
|
+
className?: string;
|
|
2553
|
+
}
|
|
2554
|
+
|
|
2555
|
+
export declare function RouteLoading({ className }: RouteLoadingProps): JSX.Element;
|
|
2556
|
+
|
|
2557
|
+
export declare interface RouteLoadingProps {
|
|
2558
|
+
className?: string;
|
|
2559
|
+
}
|
|
2560
|
+
|
|
2561
|
+
export { Row }
|
|
2562
|
+
|
|
2563
|
+
export declare function scoreBand(value: number): 'green' | 'amber' | 'red';
|
|
2564
|
+
|
|
2565
|
+
export declare function ScoreBarCell({ value, className, }: {
|
|
2566
|
+
value: number | null | undefined;
|
|
2567
|
+
className?: string;
|
|
2568
|
+
}): JSX.Element;
|
|
2569
|
+
|
|
2570
|
+
export declare const ScrollArea: React_2.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2571
|
+
|
|
2572
|
+
export declare const ScrollBar: React_2.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2573
|
+
|
|
2574
|
+
/**
|
|
2575
|
+
* Shared search input with a left-aligned magnifying glass icon and an
|
|
2576
|
+
* optional right-aligned clear (×) button. Both icons come from
|
|
2577
|
+
* `lucide-react` — Atlas's primary icon library — and are sized to 14px
|
|
2578
|
+
* to match the h-9 input's optical balance.
|
|
2579
|
+
*
|
|
2580
|
+
* Works in both controlled and uncontrolled modes. In controlled mode,
|
|
2581
|
+
* clicking the clear button synthesizes an `onChange` event with an
|
|
2582
|
+
* empty value using the native setter so React's state pipeline picks
|
|
2583
|
+
* it up correctly. In uncontrolled mode, it clears the input directly.
|
|
2584
|
+
*
|
|
2585
|
+
* The native WebKit/Chromium `::-webkit-search-cancel-button` is
|
|
2586
|
+
* suppressed so consumers see one consistent clear affordance across
|
|
2587
|
+
* browsers, not two stacked ones.
|
|
2588
|
+
*/
|
|
2589
|
+
export declare const SearchInput: React_2.ForwardRefExoticComponent<SearchInputOwnProps & Omit<Omit<Omit<InputProps_2, "ref"> & React_2.RefAttributes<HTMLInputElement>, "ref">, "type"> & React_2.RefAttributes<HTMLInputElement>>;
|
|
2590
|
+
|
|
2591
|
+
declare type SearchInputOwnProps = {
|
|
2592
|
+
/**
|
|
2593
|
+
* Size of the magnifying glass icon in px. Defaults to 14 — matches
|
|
2594
|
+
* the h-9 input height's optical balance.
|
|
2595
|
+
*/
|
|
2596
|
+
iconSize?: number;
|
|
2597
|
+
/**
|
|
2598
|
+
* Tailwind classes for the outer relative wrapper (e.g., width / layout).
|
|
2599
|
+
* Use `className` for the actual `<input>` styling.
|
|
2600
|
+
*/
|
|
2601
|
+
containerClassName?: string;
|
|
2602
|
+
/**
|
|
2603
|
+
* Optional override for the icon tailwind classes. By default the icon
|
|
2604
|
+
* sits on the LEFT side of the input with enough padding that the first
|
|
2605
|
+
* character of user text never collides with the icon.
|
|
2606
|
+
*/
|
|
2607
|
+
iconClassName?: string;
|
|
2608
|
+
/**
|
|
2609
|
+
* Hide the built-in clear (×) button. Defaults to `false`. The clear
|
|
2610
|
+
* button appears when the input has a value and replaces the browser's
|
|
2611
|
+
* inconsistent native `<input type="search">` × with a properly-sized
|
|
2612
|
+
* Lucide X icon that matches the rest of the design system.
|
|
2613
|
+
*/
|
|
2614
|
+
hideClearButton?: boolean;
|
|
2615
|
+
};
|
|
2616
|
+
|
|
2617
|
+
export declare type SearchInputProps = SearchInputOwnProps & Omit<React_2.ComponentPropsWithoutRef<typeof Input>, 'type'>;
|
|
2618
|
+
|
|
2619
|
+
export declare function SectionHeader({ title, icon, children, className }: SectionHeaderProps): JSX.Element;
|
|
2620
|
+
|
|
2621
|
+
declare interface SectionHeaderProps {
|
|
2622
|
+
title: string;
|
|
2623
|
+
icon?: ReactNode;
|
|
2624
|
+
children?: ReactNode;
|
|
2625
|
+
className?: string;
|
|
2626
|
+
}
|
|
2627
|
+
|
|
2628
|
+
/**
|
|
2629
|
+
* Inline section loading indicator. Use inside cards, chart areas, sidebar
|
|
2630
|
+
* panels, or any bounded region that loads independently of the page chrome.
|
|
2631
|
+
*/
|
|
2632
|
+
export declare function SectionLoadingState({ className, size, label }: SectionLoadingStateProps): JSX.Element;
|
|
2633
|
+
|
|
2634
|
+
export declare interface SectionLoadingStateProps {
|
|
2635
|
+
className?: string;
|
|
2636
|
+
size?: 'sm' | 'default';
|
|
2637
|
+
label?: string;
|
|
2638
|
+
}
|
|
2639
|
+
|
|
2640
|
+
export declare function SegmentedControl<T extends string>({ options, value, onChange, className, }: SegmentedControlProps<T>): JSX.Element;
|
|
2641
|
+
|
|
2642
|
+
declare interface SegmentedControlOption<T extends string> {
|
|
2643
|
+
value: T;
|
|
2644
|
+
label: string;
|
|
2645
|
+
icon?: ReactNode;
|
|
2646
|
+
}
|
|
2647
|
+
|
|
2648
|
+
declare interface SegmentedControlProps<T extends string> {
|
|
2649
|
+
options: SegmentedControlOption<T>[];
|
|
2650
|
+
value: T;
|
|
2651
|
+
onChange: (value: T) => void;
|
|
2652
|
+
className?: string;
|
|
2653
|
+
}
|
|
2654
|
+
|
|
2655
|
+
export declare const Select: React_2.FC<SelectPrimitive.SelectProps>;
|
|
2656
|
+
|
|
2657
|
+
export declare const SelectContent: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2658
|
+
|
|
2659
|
+
export declare const SelectGroup: React_2.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
2660
|
+
|
|
2661
|
+
export declare const SelectItem: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2662
|
+
|
|
2663
|
+
export declare const SelectLabel: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2664
|
+
|
|
2665
|
+
export declare const SelectScrollDownButton: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2666
|
+
|
|
2667
|
+
export declare const SelectScrollUpButton: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2668
|
+
|
|
2669
|
+
export declare const SelectSeparator: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2670
|
+
|
|
2671
|
+
export declare const SelectTrigger: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & SelectTriggerOwnProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
2672
|
+
|
|
2673
|
+
declare interface SelectTriggerOwnProps {
|
|
2674
|
+
/**
|
|
2675
|
+
* Error state — destructive border, destructive focus ring, and
|
|
2676
|
+
* `aria-invalid="true"`. Mirrors `Input` / `Textarea` so the three
|
|
2677
|
+
* form primitives share the same API surface.
|
|
2678
|
+
*/
|
|
2679
|
+
error?: boolean | string;
|
|
2680
|
+
}
|
|
2681
|
+
|
|
2682
|
+
export declare const SelectValue: React_2.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React_2.RefAttributes<HTMLSpanElement>>;
|
|
2683
|
+
|
|
2684
|
+
export declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2685
|
+
|
|
2686
|
+
export declare const Sheet: React_2.FC<DialogPrimitive.DialogProps>;
|
|
2687
|
+
|
|
2688
|
+
export declare const SheetClose: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
2689
|
+
|
|
2690
|
+
export declare const SheetContent: React_2.ForwardRefExoticComponent<SheetContentProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
2691
|
+
|
|
2692
|
+
declare interface SheetContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
|
|
2693
|
+
hideCloseButton?: boolean;
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
export declare const SheetDescription: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
|
|
2697
|
+
|
|
2698
|
+
export declare const SheetFooter: {
|
|
2699
|
+
({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
2700
|
+
displayName: string;
|
|
2701
|
+
};
|
|
2702
|
+
|
|
2703
|
+
export declare const SheetHeader: {
|
|
2704
|
+
({ className, ...props }: React_2.HTMLAttributes<HTMLDivElement>): JSX.Element;
|
|
2705
|
+
displayName: string;
|
|
2706
|
+
};
|
|
2707
|
+
|
|
2708
|
+
export declare const SheetOverlay: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
2709
|
+
|
|
2710
|
+
export declare function SheetPortal({ container, ...props }: React_2.ComponentProps<typeof DialogPrimitive.Portal>): JSX.Element;
|
|
2711
|
+
|
|
2712
|
+
export declare const SheetTitle: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
|
|
2713
|
+
|
|
2714
|
+
export declare const SheetTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
2715
|
+
|
|
2716
|
+
declare const sheetVariants: (props?: ({
|
|
2717
|
+
side?: "left" | "right" | "bottom" | "top" | null | undefined;
|
|
2718
|
+
} & ClassProp) | undefined) => string;
|
|
2719
|
+
|
|
2720
|
+
/**
|
|
2721
|
+
* Whether a field should render as an inline chip on the row, given its
|
|
2722
|
+
* `show` config and whether it currently holds a value. The right-click menu
|
|
2723
|
+
* is unaffected by this — it always lists every field.
|
|
2724
|
+
*/
|
|
2725
|
+
export declare function showFieldInline({ show, hasValue, }: {
|
|
2726
|
+
show?: TaskFieldShow;
|
|
2727
|
+
hasValue: boolean;
|
|
2728
|
+
}): boolean;
|
|
2729
|
+
|
|
2730
|
+
/**
|
|
2731
|
+
* SidebarNav — shared primitives for app-sidebar navigation.
|
|
2732
|
+
*
|
|
2733
|
+
* Two levels:
|
|
2734
|
+
* - `SidebarNavItem` — the top-level row with icon + label (app entry)
|
|
2735
|
+
* - `SidebarNavSubList` — the indented, rail-connected secondary nav
|
|
2736
|
+
* rendered directly beneath a parent SidebarNavItem
|
|
2737
|
+
*
|
|
2738
|
+
* The pattern mirrors what Atlas's shell sidebar has been rendering
|
|
2739
|
+
* inline for a long time, but extracted here so every consumer
|
|
2740
|
+
* (Atlas, embedded MFEs, the design system gallery) gets the same
|
|
2741
|
+
* visual treatment and spacing rules for free.
|
|
2742
|
+
*
|
|
2743
|
+
* Spacing contract
|
|
2744
|
+
* ----------------
|
|
2745
|
+
* Parent item label x-position = `itemPaddingX + iconSize + iconGap`.
|
|
2746
|
+
* The sub-list is designed so its labels land at the SAME x-position
|
|
2747
|
+
* by default — with defaults of `itemPaddingX=8`, `iconSize=24`,
|
|
2748
|
+
* `iconGap=12` the sub-list labels indent by 44px. A rail sits at the
|
|
2749
|
+
* horizontal center of the parent icon (x = 8 + 24/2 = 20).
|
|
2750
|
+
*
|
|
2751
|
+
* If a consumer uses a different parent item geometry, pass
|
|
2752
|
+
* `labelIndent` / `railIndent` to match.
|
|
2753
|
+
*/
|
|
2754
|
+
export declare interface SidebarNavSubItem {
|
|
2755
|
+
id: string;
|
|
2756
|
+
label: string;
|
|
2757
|
+
/** Link href. Omit when using `onSelect` with a custom navigator. */
|
|
2758
|
+
href?: string;
|
|
2759
|
+
/** True for the currently-selected item — gets weight + color emphasis. */
|
|
2760
|
+
active?: boolean;
|
|
2761
|
+
/** Optional tail counter (e.g., "12"). Rendered right-aligned. */
|
|
2762
|
+
count?: number | string;
|
|
2763
|
+
/** Optional uppercase chip (e.g., "NEW", "BETA"). Rendered right-aligned. */
|
|
2764
|
+
tag?: string;
|
|
2765
|
+
/**
|
|
2766
|
+
* Render as visible but non-interactive. Use for placeholder items that
|
|
2767
|
+
* will become clickable later (feature gating, coming-soon, etc.).
|
|
2768
|
+
*/
|
|
2769
|
+
parked?: boolean;
|
|
2770
|
+
}
|
|
2771
|
+
|
|
2772
|
+
/**
|
|
2773
|
+
* Indented secondary navigation with a vertical connector rail. Renders
|
|
2774
|
+
* nothing when `items` is empty.
|
|
2775
|
+
*/
|
|
2776
|
+
export declare function SidebarNavSubList({ items, onSelect, labelIndent, railIndent, className, ariaLabel, }: SidebarNavSubListProps): JSX.Element | null;
|
|
2777
|
+
|
|
2778
|
+
export declare interface SidebarNavSubListProps {
|
|
2779
|
+
items: SidebarNavSubItem[];
|
|
2780
|
+
/**
|
|
2781
|
+
* Called when the user activates an item (click, keyboard enter).
|
|
2782
|
+
* Use this to route with your SPA router; if omitted, the `<a href>`
|
|
2783
|
+
* does a full navigation. Parked items never fire this.
|
|
2784
|
+
*/
|
|
2785
|
+
onSelect?: (item: SidebarNavSubItem, event: React_2.MouseEvent<HTMLAnchorElement>) => void;
|
|
2786
|
+
/**
|
|
2787
|
+
* Horizontal distance (px) from the list's left edge at which item
|
|
2788
|
+
* labels begin. Should equal the parent item's label x-position so
|
|
2789
|
+
* the two stacks visually line up. Default 44.
|
|
2790
|
+
*/
|
|
2791
|
+
labelIndent?: number;
|
|
2792
|
+
/**
|
|
2793
|
+
* X-position (px) of the vertical connector rail. Usually the center
|
|
2794
|
+
* of the parent item's icon. Default 20.
|
|
2795
|
+
*/
|
|
2796
|
+
railIndent?: number;
|
|
2797
|
+
className?: string;
|
|
2798
|
+
/** Accessible name for the list (e.g., "Agent Builder pages"). */
|
|
2799
|
+
ariaLabel?: string;
|
|
2800
|
+
}
|
|
2801
|
+
|
|
2802
|
+
/**
|
|
2803
|
+
* SingleSelectList — the single-select sibling of `MultiSelectList`. Same
|
|
2804
|
+
* searchable cmdk body, pinned grouping, and icon column, but rows carry a
|
|
2805
|
+
* leading checkmark (not a checkbox) and selecting one replaces the value.
|
|
2806
|
+
* Use this for single-choice facets in a shared `FilterMenu` so they read as
|
|
2807
|
+
* a proper select list rather than a radio-dot menu.
|
|
2808
|
+
*/
|
|
2809
|
+
export declare function SingleSelectList({ options, value, onChange, searchPlaceholder, emptyMessage, clearable, hideSelectedIndicator, selectedIndicatorSide, query, onQueryChange, className, searchable, }: SingleSelectListProps): JSX.Element;
|
|
2810
|
+
|
|
2811
|
+
declare interface SingleSelectListProps {
|
|
2812
|
+
options: MultiSelectOption[];
|
|
2813
|
+
/** Currently selected value, or null when nothing is chosen. */
|
|
2814
|
+
value: string | null;
|
|
2815
|
+
onChange: (value: string | null) => void;
|
|
2816
|
+
searchPlaceholder?: string;
|
|
2817
|
+
emptyMessage?: string;
|
|
2818
|
+
/** Clicking the already-selected row clears it back to null. Default true. */
|
|
2819
|
+
clearable?: boolean;
|
|
2820
|
+
/**
|
|
2821
|
+
* Drop the leading checkmark column. Use for action-style pickers that never
|
|
2822
|
+
* persist a selection (e.g. a reassign list), where the always-empty check
|
|
2823
|
+
* gutter just reads as dead left padding. Default false (checkmark shown).
|
|
2824
|
+
*/
|
|
2825
|
+
hideSelectedIndicator?: boolean;
|
|
2826
|
+
/**
|
|
2827
|
+
* Which side of the row the selected checkmark sits on. Default 'left' (the
|
|
2828
|
+
* leading-checkmark select pattern). Use 'right' for menu-style lists where
|
|
2829
|
+
* the label should read flush-left and the tick trails it.
|
|
2830
|
+
*/
|
|
2831
|
+
selectedIndicatorSide?: 'left' | 'right';
|
|
2832
|
+
/** Controlled search query. Omit to let the list manage its own. */
|
|
2833
|
+
query?: string;
|
|
2834
|
+
onQueryChange?: (query: string) => void;
|
|
2835
|
+
className?: string;
|
|
2836
|
+
/** Show the search input. Default true (see `SelectListShellProps`). */
|
|
2837
|
+
searchable?: boolean;
|
|
2838
|
+
}
|
|
2839
|
+
|
|
2840
|
+
export declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): JSX.Element;
|
|
2841
|
+
|
|
2842
|
+
export declare function SkeletonBlock({ className, style }: {
|
|
2843
|
+
className?: string;
|
|
2844
|
+
style?: React.CSSProperties;
|
|
2845
|
+
}): JSX.Element;
|
|
2846
|
+
|
|
2847
|
+
export declare const Slider: React_2.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
|
|
2848
|
+
|
|
2849
|
+
export declare function SortableHeader({ column, children }: {
|
|
2850
|
+
column: any;
|
|
2851
|
+
children: React.ReactNode;
|
|
2852
|
+
}): JSX.Element;
|
|
2853
|
+
|
|
2854
|
+
export { SortingState }
|
|
2855
|
+
|
|
2856
|
+
export declare function SparklineCell({ values, highlightTail, label, width, height, scaleMax, className, }: SparklineCellProps): JSX.Element;
|
|
2857
|
+
|
|
2858
|
+
declare interface SparklineCellProps {
|
|
2859
|
+
values: number[];
|
|
2860
|
+
/** Highlight a trailing portion in rose (e.g. failures near end). */
|
|
2861
|
+
highlightTail?: number;
|
|
2862
|
+
label?: React_2.ReactNode;
|
|
2863
|
+
/** Fixed pixel width of the sparkline area. */
|
|
2864
|
+
width?: number;
|
|
2865
|
+
height?: number;
|
|
2866
|
+
/** When set, bar heights use this fixed max instead of scaling to the series peak. */
|
|
2867
|
+
scaleMax?: number;
|
|
2868
|
+
className?: string;
|
|
2869
|
+
}
|
|
2870
|
+
|
|
2871
|
+
export declare function Spinner({ size, className, ...props }: VariantProps<typeof spinnerVariants> & React.ComponentProps<'div'>): JSX.Element;
|
|
2872
|
+
|
|
2873
|
+
export declare const spinnerVariants: (props?: ({
|
|
2874
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
2875
|
+
} & ClassProp) | undefined) => string;
|
|
2876
|
+
|
|
2877
|
+
export declare const STATUS_TONES: {
|
|
2878
|
+
readonly healthy: {
|
|
2879
|
+
readonly bg: "bg-emerald-50";
|
|
2880
|
+
readonly fg: "text-emerald-700";
|
|
2881
|
+
readonly dot: "bg-emerald-500";
|
|
2882
|
+
};
|
|
2883
|
+
readonly active: {
|
|
2884
|
+
readonly bg: "bg-emerald-50";
|
|
2885
|
+
readonly fg: "text-emerald-700";
|
|
2886
|
+
readonly dot: "bg-emerald-500";
|
|
2887
|
+
};
|
|
2888
|
+
readonly completed: {
|
|
2889
|
+
readonly bg: "bg-emerald-50";
|
|
2890
|
+
readonly fg: "text-emerald-700";
|
|
2891
|
+
readonly dot: "bg-emerald-500";
|
|
2892
|
+
};
|
|
2893
|
+
readonly success: {
|
|
2894
|
+
readonly bg: "bg-emerald-50";
|
|
2895
|
+
readonly fg: "text-emerald-700";
|
|
2896
|
+
readonly dot: "bg-emerald-500";
|
|
2897
|
+
};
|
|
2898
|
+
readonly running: {
|
|
2899
|
+
readonly bg: "bg-sky-50";
|
|
2900
|
+
readonly fg: "text-sky-700";
|
|
2901
|
+
readonly dot: "bg-sky-500";
|
|
2902
|
+
};
|
|
2903
|
+
readonly info: {
|
|
2904
|
+
readonly bg: "bg-sky-50";
|
|
2905
|
+
readonly fg: "text-sky-700";
|
|
2906
|
+
readonly dot: "bg-sky-500";
|
|
2907
|
+
};
|
|
2908
|
+
readonly queued: {
|
|
2909
|
+
readonly bg: "bg-sky-50";
|
|
2910
|
+
readonly fg: "text-sky-700";
|
|
2911
|
+
readonly dot: "bg-sky-500";
|
|
2912
|
+
};
|
|
2913
|
+
readonly drift: {
|
|
2914
|
+
readonly bg: "bg-amber-50";
|
|
2915
|
+
readonly fg: "text-amber-700";
|
|
2916
|
+
readonly dot: "bg-amber-500";
|
|
2917
|
+
};
|
|
2918
|
+
readonly warn: {
|
|
2919
|
+
readonly bg: "bg-amber-50";
|
|
2920
|
+
readonly fg: "text-amber-700";
|
|
2921
|
+
readonly dot: "bg-amber-500";
|
|
2922
|
+
};
|
|
2923
|
+
readonly failing: {
|
|
2924
|
+
readonly bg: "bg-rose-50";
|
|
2925
|
+
readonly fg: "text-rose-700";
|
|
2926
|
+
readonly dot: "bg-rose-500";
|
|
2927
|
+
};
|
|
2928
|
+
readonly failed: {
|
|
2929
|
+
readonly bg: "bg-rose-50";
|
|
2930
|
+
readonly fg: "text-rose-700";
|
|
2931
|
+
readonly dot: "bg-rose-500";
|
|
2932
|
+
};
|
|
2933
|
+
readonly error: {
|
|
2934
|
+
readonly bg: "bg-rose-50";
|
|
2935
|
+
readonly fg: "text-rose-700";
|
|
2936
|
+
readonly dot: "bg-rose-500";
|
|
2937
|
+
};
|
|
2938
|
+
readonly paused: {
|
|
2939
|
+
readonly bg: "bg-black-6";
|
|
2940
|
+
readonly fg: "text-black-60";
|
|
2941
|
+
readonly dot: "bg-black-30";
|
|
2942
|
+
};
|
|
2943
|
+
readonly neutral: {
|
|
2944
|
+
readonly bg: "bg-black-6";
|
|
2945
|
+
readonly fg: "text-black-60";
|
|
2946
|
+
readonly dot: "bg-black-30";
|
|
2947
|
+
};
|
|
2948
|
+
};
|
|
2949
|
+
|
|
2950
|
+
/** Sort rank within a board order (unknown statuses sort last). */
|
|
2951
|
+
export declare function statusBoardRankIn(order: readonly string[], status: string): number;
|
|
2952
|
+
|
|
2953
|
+
export declare function StatusDotBadge({ tone, label, pulse, className, }: {
|
|
2954
|
+
tone: StatusTone;
|
|
2955
|
+
label: React_2.ReactNode;
|
|
2956
|
+
pulse?: boolean;
|
|
2957
|
+
className?: string;
|
|
2958
|
+
}): JSX.Element;
|
|
2959
|
+
|
|
2960
|
+
/** Resolve a status's display meta within a vocabulary, with a neutral fallback. */
|
|
2961
|
+
export declare function statusMetaOf(options: TaskStatusOption[], value: string): TaskStatusOption;
|
|
2962
|
+
|
|
2963
|
+
/** Render a status vocabulary as `SingleSelectList` options (glyph + label). */
|
|
2964
|
+
export declare function statusSelectOptions(options: TaskStatusOption[]): MultiSelectOption[];
|
|
2965
|
+
|
|
2966
|
+
export declare type StatusTone = keyof typeof STATUS_TONES;
|
|
2967
|
+
|
|
2968
|
+
/**
|
|
2969
|
+
* Switch — slider-style on/off toggle.
|
|
2970
|
+
*
|
|
2971
|
+
* No drop shadows — neither on the track nor the thumb — consistent
|
|
2972
|
+
* with the rest of Atlas's form primitives (Input, Select, Textarea,
|
|
2973
|
+
* Button, Checkbox). Affordance comes from the bg-color transition
|
|
2974
|
+
* (`bg-input` → `bg-primary`) and the thumb's translate + opaque
|
|
2975
|
+
* contrast against the track.
|
|
2976
|
+
*/
|
|
2977
|
+
export declare const Switch: React_2.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
2978
|
+
|
|
2979
|
+
export declare const Table: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableElement> & React_2.RefAttributes<HTMLTableElement>>;
|
|
2980
|
+
|
|
2981
|
+
export declare const TableBody: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
|
|
2982
|
+
|
|
2983
|
+
export declare const TableCaption: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableCaptionElement> & React_2.RefAttributes<HTMLTableCaptionElement>>;
|
|
2984
|
+
|
|
2985
|
+
export declare const TableCell: React_2.ForwardRefExoticComponent<React_2.TdHTMLAttributes<HTMLTableCellElement> & React_2.RefAttributes<HTMLTableCellElement>>;
|
|
2986
|
+
|
|
2987
|
+
export declare const TableFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
|
|
2988
|
+
|
|
2989
|
+
export declare const TableHead: React_2.ForwardRefExoticComponent<React_2.ThHTMLAttributes<HTMLTableCellElement> & React_2.RefAttributes<HTMLTableCellElement>>;
|
|
2990
|
+
|
|
2991
|
+
export declare const TableHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
|
|
2992
|
+
|
|
2993
|
+
export declare const TableRow: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableRowElement> & React_2.RefAttributes<HTMLTableRowElement>>;
|
|
2994
|
+
|
|
2995
|
+
export declare function TabPage({ children, maxWidth, className }: TabPageProps): JSX.Element;
|
|
2996
|
+
|
|
2997
|
+
declare interface TabPageProps {
|
|
2998
|
+
children: ReactNode;
|
|
2999
|
+
maxWidth?: 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | '7xl' | 'full';
|
|
3000
|
+
className?: string;
|
|
3001
|
+
}
|
|
3002
|
+
|
|
3003
|
+
export declare const Tabs: React_2.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
3004
|
+
|
|
3005
|
+
export declare const TabsContent: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
|
|
3006
|
+
|
|
3007
|
+
export declare const TabsList: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
3008
|
+
variant?: "default" | "line" | "sidebar" | null | undefined;
|
|
3009
|
+
} & ClassProp) | undefined) => string> & React_2.RefAttributes<HTMLDivElement>>;
|
|
3010
|
+
|
|
3011
|
+
export declare const TabsTrigger: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
3012
|
+
|
|
3013
|
+
/** Assignee field config — visibility/edit plus the options the inline picker offers. */
|
|
3014
|
+
export declare interface TaskAssigneeConfig extends TaskFieldConfig {
|
|
3015
|
+
options?: TaskAssigneeOption[];
|
|
3016
|
+
}
|
|
3017
|
+
|
|
3018
|
+
/** One selectable assignee in the single-select picker. */
|
|
3019
|
+
export declare interface TaskAssigneeOption {
|
|
3020
|
+
/** Identity persisted on the task (`ownerEmail`). */
|
|
3021
|
+
email: string;
|
|
3022
|
+
/** Display name; falls back to the email stem. */
|
|
3023
|
+
name?: string;
|
|
3024
|
+
/** Two-letter avatar initials; derived from email when omitted. */
|
|
3025
|
+
initials?: string;
|
|
3026
|
+
}
|
|
3027
|
+
|
|
3028
|
+
export declare function TaskCreateDialog({ open, onOpenChange, initialValues, assigneeOptions, statusOptions, defaultStatus, showDescription, createFields, initialFieldValues, onCreate, }: TaskCreateDialogProps): JSX.Element;
|
|
3029
|
+
|
|
3030
|
+
export declare interface TaskCreateDialogProps {
|
|
3031
|
+
open: boolean;
|
|
3032
|
+
onOpenChange: (open: boolean) => void;
|
|
3033
|
+
/** Seeds the form when the dialog opens (status / owner / due from a group). */
|
|
3034
|
+
initialValues?: Partial<TaskRowData>;
|
|
3035
|
+
/** People offered by the assignee picker. Omit to hide the assignee field. */
|
|
3036
|
+
assigneeOptions?: TaskAssigneeOption[];
|
|
3037
|
+
/** Status vocabulary for the status picker. Defaults to the built-in set. */
|
|
3038
|
+
statusOptions?: TaskStatusOption[];
|
|
3039
|
+
/** Status a fresh draft seeds with (the incomplete status). Default `'todo'`. */
|
|
3040
|
+
defaultStatus?: string;
|
|
3041
|
+
/**
|
|
3042
|
+
* Show the long-form description field. Default `true`. Set `false` for task
|
|
3043
|
+
* surfaces with no description concept (or that never display one), so the
|
|
3044
|
+
* create flow doesn't collect a field the list can't show.
|
|
3045
|
+
*/
|
|
3046
|
+
showDescription?: boolean;
|
|
3047
|
+
/** Extra single-select fields (e.g. Category). */
|
|
3048
|
+
createFields?: TaskCreateField[];
|
|
3049
|
+
/** Seeds for the extra fields, keyed by field id (matched by value or label). */
|
|
3050
|
+
initialFieldValues?: TaskCreateFieldValues;
|
|
3051
|
+
/** Builds + commits the new task. */
|
|
3052
|
+
onCreate: (draft: TaskRowData, fieldValues: TaskCreateFieldValues) => void;
|
|
3053
|
+
}
|
|
3054
|
+
|
|
3055
|
+
/** A consumer-defined extra single-select on the create dialog (e.g. Category). */
|
|
3056
|
+
export declare interface TaskCreateField {
|
|
3057
|
+
id: string;
|
|
3058
|
+
label: string;
|
|
3059
|
+
options: MultiSelectOption[];
|
|
3060
|
+
/** Block the create action until this field has a value. */
|
|
3061
|
+
required?: boolean;
|
|
3062
|
+
}
|
|
3063
|
+
|
|
3064
|
+
/** Values chosen for the extra `createFields`, keyed by field id. */
|
|
3065
|
+
export declare type TaskCreateFieldValues = Record<string, string | null>;
|
|
3066
|
+
|
|
3067
|
+
/**
|
|
3068
|
+
* The single, uniform chip every inline task field renders through. Squared-
|
|
3069
|
+
* rounded and the same height as the design system's `Badge`, with a
|
|
3070
|
+
* consistent empty-state. Use `asStatic` for display-only (edit: 'menu')
|
|
3071
|
+
* fields and the interactive `<button>` form for inline editors.
|
|
3072
|
+
*/
|
|
3073
|
+
export declare const TaskFieldChip: React_2.ForwardRefExoticComponent<Omit<TaskFieldChipProps, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
3074
|
+
|
|
3075
|
+
export declare interface TaskFieldChipProps extends React_2.ComponentProps<'button'> {
|
|
3076
|
+
/** Leading icon (kept small + muted by the chip). */
|
|
3077
|
+
icon?: React_2.ReactNode;
|
|
3078
|
+
/** Empty-state styling — dashed, muted — for an `always`-shown unset field. */
|
|
3079
|
+
empty?: boolean;
|
|
3080
|
+
/** Tonal treatment for value-carrying chips (e.g. overdue due date). */
|
|
3081
|
+
tone?: TaskFieldChipTone;
|
|
3082
|
+
/** Renders as a static span (no button affordance) for display-only fields. */
|
|
3083
|
+
asStatic?: boolean;
|
|
3084
|
+
}
|
|
3085
|
+
|
|
3086
|
+
export declare type TaskFieldChipTone = keyof typeof CHIP_TONES;
|
|
3087
|
+
|
|
3088
|
+
/** Per-field display + edit configuration. */
|
|
3089
|
+
export declare interface TaskFieldConfig {
|
|
3090
|
+
/** When the field shows inline. Defaults to `'whenSet'`. */
|
|
3091
|
+
show?: TaskFieldShow;
|
|
3092
|
+
/** How the field is edited. Defaults to `'inline'`. */
|
|
3093
|
+
edit?: TaskFieldEdit;
|
|
3094
|
+
}
|
|
3095
|
+
|
|
3096
|
+
/**
|
|
3097
|
+
* A declarative custom field rendered on the row's second line. Built-in
|
|
3098
|
+
* fields (due / assignee / tags) have named props on `TaskRow`; this is the
|
|
3099
|
+
* escape hatch for everything else (workstream, goal, experiment, priority,
|
|
3100
|
+
* project, estimate, …). Compose the value with the opinionated chip
|
|
3101
|
+
* components exported from this module so custom fields match the built-ins.
|
|
3102
|
+
*
|
|
3103
|
+
* ## Editable by default
|
|
3104
|
+
*
|
|
3105
|
+
* A shown field is INLINE-EDITABLE by default — exactly like the assignee:
|
|
3106
|
+
* declare `options` + `onChange` and TaskRow renders an interactive chip that
|
|
3107
|
+
* opens the shared `SingleSelectList` picker anchored to the chip. A field is
|
|
3108
|
+
* display-only ONLY when it explicitly opts out (`readOnly: true`) or supplies
|
|
3109
|
+
* no editor (`options`/`onChange`), or when it provides a bespoke `render`
|
|
3110
|
+
* (the static escape hatch). This keeps "shown ⇒ editable unless explicitly
|
|
3111
|
+
* read-only" true across every field, not just the named ones.
|
|
3112
|
+
*/
|
|
3113
|
+
export declare interface TaskFieldDef {
|
|
3114
|
+
/** Stable key (React key + menu identity). */
|
|
3115
|
+
id: string;
|
|
3116
|
+
/** Human label — the right-click menu entry and the editor's search hint. */
|
|
3117
|
+
label: string;
|
|
3118
|
+
show?: TaskFieldShow;
|
|
3119
|
+
edit?: TaskFieldEdit;
|
|
3120
|
+
/** Does the field currently hold a value? Drives `show: 'whenSet'`. */
|
|
3121
|
+
hasValue: boolean;
|
|
3122
|
+
/**
|
|
3123
|
+
* Bespoke inline chip content (the static escape hatch). Optional — when
|
|
3124
|
+
* omitted, TaskRow renders a uniform `TaskFieldChip` from `icon` + `text`
|
|
3125
|
+
* (interactive when `options`/`onChange` are present and not `readOnly`,
|
|
3126
|
+
* static otherwise). Providing `render` always yields a static chip; use it
|
|
3127
|
+
* only when the opinionated chip can't express the content.
|
|
3128
|
+
*/
|
|
3129
|
+
render?: () => React_2.ReactNode;
|
|
3130
|
+
/**
|
|
3131
|
+
* A value standing in for `render`'s output for memo comparison. When a row
|
|
3132
|
+
* is memoized, the bespoke `render` output is opaque to the equality check —
|
|
3133
|
+
* so a render-backed field is treated as changed unless it supplies a
|
|
3134
|
+
* `renderKey` that matches the previous one (set it to whatever the render
|
|
3135
|
+
* reads, e.g. the priority string). Without a `renderKey`, a render-backed
|
|
3136
|
+
* field always re-renders (correct but unmemoized).
|
|
3137
|
+
*/
|
|
3138
|
+
renderKey?: string;
|
|
3139
|
+
/** Leading glyph for the auto-rendered chip. */
|
|
3140
|
+
icon?: React_2.ReactNode;
|
|
3141
|
+
/** Tonal treatment for the auto-rendered chip. Defaults to `'default'`. */
|
|
3142
|
+
tone?: TaskFieldChipTone;
|
|
3143
|
+
/** Display text for the auto-rendered chip. Falls back to a string `value`. */
|
|
3144
|
+
text?: string;
|
|
3145
|
+
/**
|
|
3146
|
+
* Choices for the inline single-select editor. With `onChange` (and without
|
|
3147
|
+
* `readOnly`/`render`) this makes the field editable — the chip becomes a
|
|
3148
|
+
* button that opens the shared picker, same as the assignee.
|
|
3149
|
+
*/
|
|
3150
|
+
options?: MultiSelectOption[];
|
|
3151
|
+
/** Inline-editor write handler. `null` = the value was cleared/unset. */
|
|
3152
|
+
onChange?: (value: string | null) => void;
|
|
3153
|
+
/**
|
|
3154
|
+
* The editor's currently-selected option value, when it differs from the
|
|
3155
|
+
* displayed `value` — e.g. the chip shows an experiment's *label* but the
|
|
3156
|
+
* options are keyed by its *id*. Falls back to `value` when omitted.
|
|
3157
|
+
*/
|
|
3158
|
+
editorValue?: string | null;
|
|
3159
|
+
/** Explicitly make the field display-only, even if it carries an editor. */
|
|
3160
|
+
readOnly?: boolean;
|
|
3161
|
+
/** Placeholder for the inline editor's search box. Defaults to `label`. */
|
|
3162
|
+
editorPlaceholder?: string;
|
|
3163
|
+
/**
|
|
3164
|
+
* Whether clicking the selected option clears it (`onChange(null)`).
|
|
3165
|
+
* Defaults to `true`. Set `false` for fields the backend won't let you
|
|
3166
|
+
* unset (e.g. a required enum).
|
|
3167
|
+
*/
|
|
3168
|
+
editorClearable?: boolean;
|
|
3169
|
+
/** Invoked when the field is chosen from the right-click menu (advanced). */
|
|
3170
|
+
onEditFromMenu?: () => void;
|
|
3171
|
+
/**
|
|
3172
|
+
* Raw value(s) used for filtering. When present (and `filterable` isn't
|
|
3173
|
+
* `false`), the list's `filterable` automatically derives a filter facet
|
|
3174
|
+
* from this field — keyed by `id`, labeled by `label`, with options
|
|
3175
|
+
* collected from the distinct values across the tasks. So declaring a
|
|
3176
|
+
* field is enough to make it both a chip and a facet.
|
|
3177
|
+
*/
|
|
3178
|
+
value?: string | string[];
|
|
3179
|
+
/** Opt this field out of becoming a filter facet even when it has a value. */
|
|
3180
|
+
filterable?: boolean;
|
|
3181
|
+
}
|
|
3182
|
+
|
|
3183
|
+
/** How a field is edited: an inline editor, or only via the right-click menu. */
|
|
3184
|
+
export declare type TaskFieldEdit = 'inline' | 'menu';
|
|
3185
|
+
|
|
3186
|
+
/** When a field appears as an inline chip on the row. */
|
|
3187
|
+
export declare type TaskFieldShow = 'always' | 'whenSet' | 'never';
|
|
3188
|
+
|
|
3189
|
+
export declare function TaskList<T extends TaskListItem>({ tasks, editable, statusOnly, hideOwner, getRowKey, onChange, createTask, onTaskUpdate, onTaskDelete, onTaskCreate, emptyMessage, searchable, filterable, currentUserEmail, onVisibleTasksChange, groupable, defaultGroupBy, groupStorageKey, due, assignee, tags, fields, createFields, statusOptions, statusBoardOrder, completeStatus, incompleteStatus, startStatus, resolvedStatuses, showDescription, className, }: TaskListProps<T>): JSX.Element;
|
|
3190
|
+
|
|
3191
|
+
/** Minimal item shape — the `TaskRow` presentation fields plus whatever the consumer carries. */
|
|
3192
|
+
export declare type TaskListItem = TaskRowData & {
|
|
3193
|
+
id?: string;
|
|
3194
|
+
};
|
|
3195
|
+
|
|
3196
|
+
export declare interface TaskListProps<T extends TaskListItem> {
|
|
3197
|
+
tasks: T[];
|
|
3198
|
+
/**
|
|
3199
|
+
* Read-only when false: no inline editing, no draft row, no delete. Pair
|
|
3200
|
+
* with omitting `onChange` for a pure display list.
|
|
3201
|
+
*/
|
|
3202
|
+
editable?: boolean;
|
|
3203
|
+
/**
|
|
3204
|
+
* Lock everything except the status circle (rollup surfaces). Title is
|
|
3205
|
+
* static, due pill hidden, no draft row, no delete. `editable` must still
|
|
3206
|
+
* be true for the status control to open.
|
|
3207
|
+
*/
|
|
3208
|
+
statusOnly?: boolean;
|
|
3209
|
+
/** Suppress the owner avatar on every row (single-owner surfaces). */
|
|
3210
|
+
hideOwner?: boolean;
|
|
3211
|
+
/** Stable React key per row. Defaults to the array index. */
|
|
3212
|
+
getRowKey?: (task: T, index: number) => string;
|
|
3213
|
+
/**
|
|
3214
|
+
* Fires with the full next list on any create / edit / delete. Use this
|
|
3215
|
+
* for in-memory lists the parent holds in state. For cache-backed lists
|
|
3216
|
+
* (React Query, per-row server mutations) prefer the granular
|
|
3217
|
+
* `onTask*` callbacks below — they fire per row and don't require the
|
|
3218
|
+
* parent to own the whole array.
|
|
3219
|
+
*/
|
|
3220
|
+
onChange?: (tasks: T[]) => void;
|
|
3221
|
+
/**
|
|
3222
|
+
* Build a full task from a committed draft row. Used with `onChange` to
|
|
3223
|
+
* surface the draft "add a task" slot. The consumer stamps id / owner
|
|
3224
|
+
* defaults / timestamps here. Ignored when `onTaskCreate` is provided.
|
|
3225
|
+
*/
|
|
3226
|
+
createTask?: (draft: TaskRowData) => T;
|
|
3227
|
+
/** Granular: a single row's fields changed (status / title / due / …). */
|
|
3228
|
+
onTaskUpdate?: (task: T, patch: Partial<TaskRowData>) => void;
|
|
3229
|
+
/** Granular: a single row was deleted. */
|
|
3230
|
+
onTaskDelete?: (task: T) => void;
|
|
3231
|
+
/**
|
|
3232
|
+
* Granular: a new task was created via the create dialog. Enables the
|
|
3233
|
+
* per-group "Add task" affordance. `fieldValues` carries the chosen values
|
|
3234
|
+
* for any `createFields` (e.g. category), seeded from the originating group.
|
|
3235
|
+
*/
|
|
3236
|
+
onTaskCreate?: (draft: TaskRowData, fieldValues?: TaskCreateFieldValues) => void;
|
|
3237
|
+
/** Shown when the list is empty and read-only. */
|
|
3238
|
+
emptyMessage?: React_2.ReactNode;
|
|
3239
|
+
/**
|
|
3240
|
+
* Built-in search input above the list. `true` for defaults (matches
|
|
3241
|
+
* title + tags + owner), or an object to customize placeholder / matcher.
|
|
3242
|
+
*/
|
|
3243
|
+
searchable?: TaskListSearchable<T>;
|
|
3244
|
+
/**
|
|
3245
|
+
* Built-in faceted filter (shared `FilterMenu`). When on, EVERY available
|
|
3246
|
+
* facet becomes filterable: Status, Assignee (when `assignee.options` is
|
|
3247
|
+
* set), Tags (from the data), AND every custom `fields` entry that carries
|
|
3248
|
+
* a `value`. No need to re-declare facets — declaring a field is enough.
|
|
3249
|
+
*/
|
|
3250
|
+
filterable?: boolean;
|
|
3251
|
+
/**
|
|
3252
|
+
* The signed-in user's email. When set, the toolbar shows a "My Tasks"
|
|
3253
|
+
* quick-filter toggle that narrows the list to tasks owned by this user.
|
|
3254
|
+
*/
|
|
3255
|
+
currentUserEmail?: string;
|
|
3256
|
+
/**
|
|
3257
|
+
* Fires with the post-search / post-filter / post-"My Tasks" visible set
|
|
3258
|
+
* whenever it changes. The list owns those controls internally, so a
|
|
3259
|
+
* consumer that needs the live visible scope (e.g. publishing a Jarvis
|
|
3260
|
+
* chat-view snapshot) can't derive it from `tasks` — this surfaces it.
|
|
3261
|
+
*/
|
|
3262
|
+
onVisibleTasksChange?: (visible: T[]) => void;
|
|
3263
|
+
/**
|
|
3264
|
+
* Offer Linear-style grouping: a toolbar control to group rows under
|
|
3265
|
+
* collapsible headers by any available field. On by default (the control
|
|
3266
|
+
* shows), but grouping itself starts OFF — see `defaultGroupBy`. `false`
|
|
3267
|
+
* hides the control entirely. Auto-disabled in `statusOnly` mode.
|
|
3268
|
+
*/
|
|
3269
|
+
groupable?: boolean;
|
|
3270
|
+
/**
|
|
3271
|
+
* Initial grouping dimension key. Defaults to `'none'` (flat list, still
|
|
3272
|
+
* board-sorted) — grouping is opt-in. Pass `'status'` (etc.) for a surface
|
|
3273
|
+
* that should start grouped.
|
|
3274
|
+
*/
|
|
3275
|
+
defaultGroupBy?: string;
|
|
3276
|
+
/**
|
|
3277
|
+
* Persist collapsed groups (and the chosen grouping dimension) across
|
|
3278
|
+
* reloads under this localStorage key — Linear-style sticky groups. Omit for
|
|
3279
|
+
* ephemeral, per-mount state.
|
|
3280
|
+
*/
|
|
3281
|
+
groupStorageKey?: string;
|
|
3282
|
+
/** Due-date field config, forwarded to every row. See `TaskRow`. */
|
|
3283
|
+
due?: TaskFieldConfig;
|
|
3284
|
+
/** Assignee field config + options, forwarded to every row. See `TaskRow`. */
|
|
3285
|
+
assignee?: TaskAssigneeConfig;
|
|
3286
|
+
/** Tags field config, forwarded to every row. See `TaskRow`. */
|
|
3287
|
+
tags?: TaskFieldConfig;
|
|
3288
|
+
/** Per-row custom fields builder — called for each task to build its chips. */
|
|
3289
|
+
fields?: (task: T) => TaskFieldDef[];
|
|
3290
|
+
/**
|
|
3291
|
+
* Status vocabulary + interaction mapping, forwarded to every row and used
|
|
3292
|
+
* for the status group/filter dimension and the board sort. All default to
|
|
3293
|
+
* the built-in set, so a surface with the standard statuses passes nothing.
|
|
3294
|
+
* Pass stable references (module consts / memoized) — rows compare them by
|
|
3295
|
+
* identity.
|
|
3296
|
+
*/
|
|
3297
|
+
statusOptions?: TaskStatusOption[];
|
|
3298
|
+
/** Status sort/group order (board: active first). Defaults to the built-in board order. */
|
|
3299
|
+
statusBoardOrder?: readonly string[];
|
|
3300
|
+
/** Checkbox "checked" / "unchecked" targets. Default `'done'` / `'todo'`. */
|
|
3301
|
+
completeStatus?: string;
|
|
3302
|
+
incompleteStatus?: string;
|
|
3303
|
+
/** Hover "Start" button target (shown at the incomplete status). Default `'in_progress'`; `null` hides it. */
|
|
3304
|
+
startStatus?: string | null;
|
|
3305
|
+
/** Statuses treated as resolved (struck-through + no due urgency). Default `['done','cancelled']`. */
|
|
3306
|
+
resolvedStatuses?: readonly string[];
|
|
3307
|
+
/**
|
|
3308
|
+
* Show the long-form description field in the create dialog. Default `true`.
|
|
3309
|
+
* Set `false` for surfaces with no description concept (or that never display
|
|
3310
|
+
* one) so the create flow doesn't collect a field the list can't show.
|
|
3311
|
+
*/
|
|
3312
|
+
showDescription?: boolean;
|
|
3313
|
+
/**
|
|
3314
|
+
* Extra single-select fields shown in the create dialog (e.g. Category).
|
|
3315
|
+
* A required field gates "Create". When the list is grouped by a dimension
|
|
3316
|
+
* whose key matches a field id, that field is pre-seeded from the group.
|
|
3317
|
+
*/
|
|
3318
|
+
createFields?: TaskCreateField[];
|
|
3319
|
+
className?: string;
|
|
3320
|
+
}
|
|
3321
|
+
|
|
3322
|
+
/** Built-in search config. `true` = default search over title + tags + owner. */
|
|
3323
|
+
export declare type TaskListSearchable<T> = boolean | {
|
|
3324
|
+
placeholder?: string;
|
|
3325
|
+
/** Custom searchable text for a task. Defaults to title + tags + owner. */
|
|
3326
|
+
accessor?: (task: T) => string;
|
|
3327
|
+
};
|
|
3328
|
+
|
|
3329
|
+
export declare const TaskRow: React_2.NamedExoticComponent<TaskRowProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
3330
|
+
|
|
3331
|
+
export declare interface TaskRowData {
|
|
3332
|
+
title: string;
|
|
3333
|
+
status: TaskRowStatus;
|
|
3334
|
+
/** Long-form body. Not rendered on the row — carried for the create dialog. */
|
|
3335
|
+
description?: string | null;
|
|
3336
|
+
/** ISO YYYY-MM-DD. Null / undefined for tasks with no due date. */
|
|
3337
|
+
dueDate?: string | null;
|
|
3338
|
+
/** Used to color + initial the owner avatar. Null for unassigned. */
|
|
3339
|
+
ownerEmail?: string | null;
|
|
3340
|
+
ownerInitials?: string | null;
|
|
3341
|
+
/** Freeform labels rendered as chips on the row's second line. */
|
|
3342
|
+
tags?: string[];
|
|
3343
|
+
}
|
|
3344
|
+
|
|
3345
|
+
export declare interface TaskRowProps {
|
|
3346
|
+
/**
|
|
3347
|
+
* Current row data. Pass `null` for a placeholder/draft row — the
|
|
3348
|
+
* row renders idle styling + placeholder copy until the user
|
|
3349
|
+
* starts typing.
|
|
3350
|
+
*/
|
|
3351
|
+
task: TaskRowData | null;
|
|
3352
|
+
/**
|
|
3353
|
+
* Read-only when false. Status / title / due / owner / linear /
|
|
3354
|
+
* delete affordances are all suppressed. Useful for preview
|
|
3355
|
+
* surfaces (popovers, drawers).
|
|
3356
|
+
*/
|
|
3357
|
+
editable?: boolean;
|
|
3358
|
+
/**
|
|
3359
|
+
* Default placeholder for the title input. Defaults to a generic
|
|
3360
|
+
* prompt; surfaces with stronger context (e.g. "this week's goal")
|
|
3361
|
+
* should pass something more specific.
|
|
3362
|
+
*/
|
|
3363
|
+
placeholder?: string;
|
|
3364
|
+
/**
|
|
3365
|
+
* Fires on every field change (status, due, etc.) for committed
|
|
3366
|
+
* rows. NOT called for draft rows — the draft fires `onCommit`
|
|
3367
|
+
* once the user types a title. Receives a partial patch; merge
|
|
3368
|
+
* with the existing row at the call site.
|
|
3369
|
+
*/
|
|
3370
|
+
onChange?: (patch: Partial<TaskRowData>) => void;
|
|
3371
|
+
/**
|
|
3372
|
+
* Called when a draft row commits (user types a non-empty title
|
|
3373
|
+
* and blurs / hits Enter). The parent typically appends the new
|
|
3374
|
+
* task to its list and renders a fresh draft TaskRow at the end.
|
|
3375
|
+
*/
|
|
3376
|
+
onCommit?: (next: TaskRowData) => void;
|
|
3377
|
+
/**
|
|
3378
|
+
* Delete handler. When omitted, both the right-click context menu
|
|
3379
|
+
* item and any visible delete affordance are suppressed.
|
|
3380
|
+
*/
|
|
3381
|
+
onDelete?: () => void;
|
|
3382
|
+
/**
|
|
3383
|
+
* Suppress the owner avatar regardless of `ownerEmail`. Used by
|
|
3384
|
+
* surfaces where every row is already implicitly scoped to the
|
|
3385
|
+
* caller (MyWeek's per-card task list — every card and task on it
|
|
3386
|
+
* belongs to the signed-in user, so repeating the same JJ pip on
|
|
3387
|
+
* every row is pure chrome). The avatar still renders by default;
|
|
3388
|
+
* surfaces with mixed-owner task lists (Tasks tab, HypothesisDetail)
|
|
3389
|
+
* leave this off.
|
|
3390
|
+
*/
|
|
3391
|
+
hideOwner?: boolean;
|
|
3392
|
+
/**
|
|
3393
|
+
* Lock everything except the status circle. The title renders as
|
|
3394
|
+
* static text (not an input), the due-date pill is hidden, the
|
|
3395
|
+
* right-click delete is suppressed. Used by rollup surfaces (e.g.
|
|
3396
|
+
* AllMembersTab) where viewers can move work forward but can't
|
|
3397
|
+
* authoring-edit someone else's task from there. `editable` must
|
|
3398
|
+
* still be true for the status dropdown to open.
|
|
3399
|
+
*/
|
|
3400
|
+
statusOnly?: boolean;
|
|
3401
|
+
/**
|
|
3402
|
+
* Due-date field config. Defaults to `{ show: 'whenSet', edit: 'inline' }`.
|
|
3403
|
+
* Set `{ show: 'whenSet', edit: 'menu' }` for the "only via right-click,
|
|
3404
|
+
* only shown once set" pattern. See the UX contract in `task-field.tsx`.
|
|
3405
|
+
*/
|
|
3406
|
+
due?: TaskFieldConfig;
|
|
3407
|
+
/**
|
|
3408
|
+
* Assignee field config + the options the inline single-select offers.
|
|
3409
|
+
* Defaults to `{ show: 'whenSet', edit: 'inline' }`. With `show: 'always'`
|
|
3410
|
+
* an unassigned task shows an empty-state avatar that opens the picker.
|
|
3411
|
+
* Changing the assignee fires `onChange({ ownerEmail })`.
|
|
3412
|
+
*/
|
|
3413
|
+
assignee?: TaskAssigneeConfig;
|
|
3414
|
+
/**
|
|
3415
|
+
* Tags field config (display-only chips on the second line). Defaults to
|
|
3416
|
+
* `{ show: 'whenSet' }`.
|
|
3417
|
+
*/
|
|
3418
|
+
tags?: TaskFieldConfig;
|
|
3419
|
+
/**
|
|
3420
|
+
* Declarative custom fields rendered on the second line (priority,
|
|
3421
|
+
* project, estimate, …). Each composes the shared `TaskFieldChip`, so it
|
|
3422
|
+
* matches the built-in fields. Every field also appears in the right-click
|
|
3423
|
+
* menu via `onEditFromMenu`.
|
|
3424
|
+
*/
|
|
3425
|
+
fields?: TaskFieldDef[];
|
|
3426
|
+
/**
|
|
3427
|
+
* Status vocabulary — the value/label/icon/tone for every status this row
|
|
3428
|
+
* can show. Defaults to the built-in set (`DEFAULT_STATUS_OPTIONS`). Pass a
|
|
3429
|
+
* stable reference (module const or memoized) — it's compared by identity.
|
|
3430
|
+
*/
|
|
3431
|
+
statusOptions?: TaskStatusOption[];
|
|
3432
|
+
/**
|
|
3433
|
+
* Checkbox interaction: clicking the leading circle on a non-complete row
|
|
3434
|
+
* sets `completeStatus`; clicking a complete row resets to `incompleteStatus`.
|
|
3435
|
+
* Default `'done'` / `'todo'`.
|
|
3436
|
+
*/
|
|
3437
|
+
completeStatus?: string;
|
|
3438
|
+
incompleteStatus?: string;
|
|
3439
|
+
/**
|
|
3440
|
+
* The status the hover "Start" button transitions to — shown only when the
|
|
3441
|
+
* row sits at `incompleteStatus`. Default `'in_progress'`; pass `null` to
|
|
3442
|
+
* hide the Start affordance entirely.
|
|
3443
|
+
*/
|
|
3444
|
+
startStatus?: string | null;
|
|
3445
|
+
/**
|
|
3446
|
+
* Statuses treated as resolved: the title renders struck-through and due-date
|
|
3447
|
+
* urgency is suppressed. Defaults to `['done', 'cancelled']`. Pass a stable
|
|
3448
|
+
* reference — compared by identity.
|
|
3449
|
+
*/
|
|
3450
|
+
resolvedStatuses?: readonly string[];
|
|
3451
|
+
className?: string;
|
|
3452
|
+
}
|
|
3453
|
+
|
|
3454
|
+
export declare type TaskRowStatus = string;
|
|
3455
|
+
|
|
3456
|
+
export declare function TaskStatusIndicator({ status, editable, onChange, size, className, statusOptions, }: TaskStatusIndicatorProps): JSX.Element;
|
|
3457
|
+
|
|
3458
|
+
export declare interface TaskStatusIndicatorProps {
|
|
3459
|
+
status: TaskRowStatus;
|
|
3460
|
+
/** When false, renders only the colored icon — no click target. */
|
|
3461
|
+
editable?: boolean;
|
|
3462
|
+
onChange?: (next: TaskRowStatus) => void;
|
|
3463
|
+
/** Icon size in px. Defaults to 16. */
|
|
3464
|
+
size?: number;
|
|
3465
|
+
className?: string;
|
|
3466
|
+
/** Status vocabulary. Defaults to the built-in set. */
|
|
3467
|
+
statusOptions?: TaskStatusOption[];
|
|
3468
|
+
}
|
|
3469
|
+
|
|
3470
|
+
/** One status in a task vocabulary: its value, label, glyph, and icon tone. */
|
|
3471
|
+
export declare interface TaskStatusOption {
|
|
3472
|
+
value: string;
|
|
3473
|
+
label: string;
|
|
3474
|
+
/** Glyph for the status circle + picker row. */
|
|
3475
|
+
icon: React_2.ComponentType<{
|
|
3476
|
+
size?: number;
|
|
3477
|
+
className?: string;
|
|
3478
|
+
}>;
|
|
3479
|
+
/** Tailwind text-color class for the glyph, e.g. `'text-blue-600'`. */
|
|
3480
|
+
tone: string;
|
|
3481
|
+
}
|
|
3482
|
+
|
|
3483
|
+
export declare const Textarea: React_2.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React_2.RefAttributes<HTMLTextAreaElement>>;
|
|
3484
|
+
|
|
3485
|
+
declare interface TextareaOwnProps {
|
|
3486
|
+
/**
|
|
3487
|
+
* Error state — destructive border, destructive focus ring, and
|
|
3488
|
+
* `aria-invalid="true"`. Mirrors `Input`'s `error` prop so the three
|
|
3489
|
+
* form primitives share the same API surface.
|
|
3490
|
+
*/
|
|
3491
|
+
error?: boolean | string;
|
|
3492
|
+
}
|
|
3493
|
+
|
|
3494
|
+
export declare type TextareaProps = React_2.ComponentProps<"textarea"> & TextareaOwnProps;
|
|
3495
|
+
|
|
3496
|
+
export declare function tintForString(seed: string): AgentTint;
|
|
3497
|
+
|
|
3498
|
+
export { toast }
|
|
3499
|
+
|
|
3500
|
+
/**
|
|
3501
|
+
* Toaster — the Atlas-themed Sonner renderer. Canonical toast system
|
|
3502
|
+
* for the design system, matching the current shadcn recommendation
|
|
3503
|
+
* (https://ui.shadcn.com/docs/components/sonner — the Radix-based
|
|
3504
|
+
* Toast was deprecated in v5 in favor of Sonner).
|
|
3505
|
+
*
|
|
3506
|
+
* Mount once at the app shell — Atlas already does this in
|
|
3507
|
+
* `atlas/src/platform/app/AppLayout.tsx`. Callers never render
|
|
3508
|
+
* `<Toaster />` themselves; they just call `toast(...)` from
|
|
3509
|
+
* 'sonner' and messages appear in the shared stack.
|
|
3510
|
+
*
|
|
3511
|
+
* Why a wrapper instead of using Sonner's `<Toaster>` directly:
|
|
3512
|
+
* 1. Bakes in Atlas's positioning / visibility / sizing defaults
|
|
3513
|
+
* (top-right, 380px wide, 8-deep stack) so every mount looks
|
|
3514
|
+
* the same without re-specifying options at the call site.
|
|
3515
|
+
* 2. Binds Sonner's internal classes to Atlas design tokens via
|
|
3516
|
+
* `toastOptions.classNames` — `bg-card`, `border-border`,
|
|
3517
|
+
* `shadow-lg`, `rounded-md`, and the `--destructive` /
|
|
3518
|
+
* `--primary` / `--muted` pairs. Matches Dialog / Popover /
|
|
3519
|
+
* DropdownMenu so all floating UI reads as one visual family.
|
|
3520
|
+
* 3. Uses `richColors` for the semantic variants
|
|
3521
|
+
* (`toast.success` / `.error` / `.warning` / `.info`), so
|
|
3522
|
+
* consumers get Atlas's destructive red on errors without
|
|
3523
|
+
* per-call styling.
|
|
3524
|
+
*
|
|
3525
|
+
* Usage:
|
|
3526
|
+
* import { toast } from 'sonner'
|
|
3527
|
+
*
|
|
3528
|
+
* toast('Saved')
|
|
3529
|
+
* toast.success('Published')
|
|
3530
|
+
* toast.error('Upload failed', { description: err.message })
|
|
3531
|
+
* toast.promise(saveDraft(), {
|
|
3532
|
+
* loading: 'Saving…',
|
|
3533
|
+
* success: 'Saved',
|
|
3534
|
+
* error: (err) => `Failed: ${err.message}`,
|
|
3535
|
+
* })
|
|
3536
|
+
* toast('Deleted', {
|
|
3537
|
+
* description: '3 items moved to trash.',
|
|
3538
|
+
* action: { label: 'Undo', onClick: () => restore() },
|
|
3539
|
+
* })
|
|
3540
|
+
*/
|
|
3541
|
+
export declare function Toaster({ ...props }: ToasterProps): JSX.Element;
|
|
3542
|
+
|
|
3543
|
+
export declare const Toggle: React_2.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
3544
|
+
variant?: "default" | "outline" | null | undefined;
|
|
3545
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
3546
|
+
} & ClassProp) | undefined) => string> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
3547
|
+
|
|
3548
|
+
export declare const ToggleGroup: React_2.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React_2.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React_2.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
|
|
3549
|
+
variant?: "default" | "outline" | null | undefined;
|
|
3550
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
3551
|
+
} & ClassProp) | undefined) => string>) & React_2.RefAttributes<HTMLDivElement>>;
|
|
3552
|
+
|
|
3553
|
+
export declare const ToggleGroupItem: React_2.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
3554
|
+
variant?: "default" | "outline" | null | undefined;
|
|
3555
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
3556
|
+
} & ClassProp) | undefined) => string> & React_2.RefAttributes<HTMLButtonElement>>;
|
|
3557
|
+
|
|
3558
|
+
/**
|
|
3559
|
+
* Toggle — pressable two-state button primitive (shadcn/ui).
|
|
3560
|
+
*
|
|
3561
|
+
* Use for formatting-style toolbars (bold/italic), view-mode switches, or any
|
|
3562
|
+
* button that represents an on/off state without a label. For slider-style
|
|
3563
|
+
* on/off switches in forms, use `Switch` instead. For mutually-exclusive
|
|
3564
|
+
* groups of toggles (segmented picker), use `ToggleGroup`.
|
|
3565
|
+
*/
|
|
3566
|
+
export declare const toggleVariants: (props?: ({
|
|
3567
|
+
variant?: "default" | "outline" | null | undefined;
|
|
3568
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
3569
|
+
} & ClassProp) | undefined) => string;
|
|
3570
|
+
|
|
3571
|
+
export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
|
|
3572
|
+
|
|
3573
|
+
/**
|
|
3574
|
+
* Raw access to Radix's `Arrow` primitive for the rare case where a
|
|
3575
|
+
* consumer wants to render a custom-styled arrow separately from the
|
|
3576
|
+
* default one baked into `TooltipContent`. Most callers should NOT
|
|
3577
|
+
* need this — reach for it only when building a specialized tooltip
|
|
3578
|
+
* variant inside a subsystem (e.g. an inline annotation overlay).
|
|
3579
|
+
*/
|
|
3580
|
+
export declare const TooltipArrow: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React_2.RefAttributes<SVGSVGElement>>;
|
|
3581
|
+
|
|
3582
|
+
export declare const TooltipContent: React_2.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
3583
|
+
/**
|
|
3584
|
+
* Per-instance portal container override. Radix Popper uses
|
|
3585
|
+
* `position: fixed` for the tooltip body, which is normally
|
|
3586
|
+
* anchored to the viewport — but per CSS spec, **any** ancestor
|
|
3587
|
+
* with `transform`, `filter`, `perspective`, `will-change`, or
|
|
3588
|
+
* `contain` creates a new containing block and re-anchors fixed
|
|
3589
|
+
* descendants to itself. Surfaces that mount inside such an
|
|
3590
|
+
* ancestor (e.g. a React Flow node body) get tooltips placed at
|
|
3591
|
+
* the wrong viewport position even though Floating UI's math is
|
|
3592
|
+
* correct.
|
|
3593
|
+
*
|
|
3594
|
+
* The shared `PortalContainerProvider` can pick up such a
|
|
3595
|
+
* containing block when the app's outer chrome is transformed.
|
|
3596
|
+
* Pass `container={null}` on triggers inside transformed wrappers
|
|
3597
|
+
* to force the portal back to `document.body`, where no
|
|
3598
|
+
* transformed ancestor can re-anchor `position: fixed`.
|
|
3599
|
+
*
|
|
3600
|
+
* Leave undefined to inherit `usePortalContainer()` (default).
|
|
3601
|
+
*/
|
|
3602
|
+
container?: HTMLElement | null;
|
|
3603
|
+
} & React_2.RefAttributes<HTMLDivElement>>;
|
|
3604
|
+
|
|
3605
|
+
/**
|
|
3606
|
+
* Tooltip — contextual helper text anchored to a trigger.
|
|
3607
|
+
*
|
|
3608
|
+
* Wraps Radix's Tooltip primitives with Atlas defaults. The component
|
|
3609
|
+
* family tracks shadcn's canonical v5 pattern:
|
|
3610
|
+
*
|
|
3611
|
+
* - `TooltipProvider` is mounted once at the app shell
|
|
3612
|
+
* (`atlas/src/platform/app/AppLayout.tsx`) with
|
|
3613
|
+
* `delayDuration={200}` — consumers don't need to provide their own.
|
|
3614
|
+
* - `TooltipContent` renders into the shared portal container
|
|
3615
|
+
* (`usePortalContainer()`) so tooltips escape `overflow: hidden`
|
|
3616
|
+
* ancestors (tables, scroll regions, dialogs) and still align to
|
|
3617
|
+
* the trigger correctly.
|
|
3618
|
+
* - `TooltipArrow` is baked into `TooltipContent` — the caret
|
|
3619
|
+
* pointing at the trigger is an expected affordance, not an opt-in
|
|
3620
|
+
* one.
|
|
3621
|
+
* - Colors use `bg-foreground` / `text-background` (neutral dark
|
|
3622
|
+
* tooltip on light surfaces). Intentionally NOT `bg-primary` —
|
|
3623
|
+
* tooltips are informational, not branded; using the primary
|
|
3624
|
+
* color made them read as popovers or links in themed apps.
|
|
3625
|
+
*
|
|
3626
|
+
* Usage:
|
|
3627
|
+
* ```tsx
|
|
3628
|
+
* <Tooltip>
|
|
3629
|
+
* <TooltipTrigger asChild>
|
|
3630
|
+
* <Button variant="ghost" size="icon">
|
|
3631
|
+
* <Info />
|
|
3632
|
+
* </Button>
|
|
3633
|
+
* </TooltipTrigger>
|
|
3634
|
+
* <TooltipContent>Helpful description</TooltipContent>
|
|
3635
|
+
* </Tooltip>
|
|
3636
|
+
* ```
|
|
3637
|
+
*
|
|
3638
|
+
* For triggers that are a single non-interactive element (text span,
|
|
3639
|
+
* icon), wrap with `asChild` so the trigger inherits the child's DOM
|
|
3640
|
+
* rather than adding an extra button wrapper.
|
|
3641
|
+
*/
|
|
3642
|
+
export declare const TooltipProvider: React_2.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
3643
|
+
|
|
3644
|
+
export declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
|
|
3645
|
+
|
|
3646
|
+
export declare function TrendBadge({ value, invertColors }: TrendBadgeProps): JSX.Element;
|
|
3647
|
+
|
|
3648
|
+
declare interface TrendBadgeProps {
|
|
3649
|
+
value: number | null;
|
|
3650
|
+
/** When true, "up" is green (revenue). Default false: "up" is red (cost). */
|
|
3651
|
+
invertColors?: boolean;
|
|
3652
|
+
}
|
|
3653
|
+
|
|
3654
|
+
export declare function useAppClassName(): string | undefined;
|
|
3655
|
+
|
|
3656
|
+
/**
|
|
3657
|
+
* Owns the "don't clobber the in-progress edit" draft pattern.
|
|
3658
|
+
*
|
|
3659
|
+
* A click-to-edit control mirrors a server/parent `value` into local state, but
|
|
3660
|
+
* a background refresh or parent re-render that arrives MID-EDIT must not
|
|
3661
|
+
* overwrite what the user is typing. This hook resyncs the draft from `value`
|
|
3662
|
+
* only while `editing` is false; while editing, the draft is left alone.
|
|
3663
|
+
*
|
|
3664
|
+
* `value` must be the STABLE source (typically the prop/cache object), not a
|
|
3665
|
+
* value recomputed every render — the resync watches `value` by identity. Use
|
|
3666
|
+
* `toDraft` to derive the draft shape from a stable source (e.g. project a
|
|
3667
|
+
* workstream object to one side's owner rows); the mapper is read from a ref so
|
|
3668
|
+
* passing an inline closure doesn't trigger spurious resyncs.
|
|
3669
|
+
*
|
|
3670
|
+
* Extracted from `inline-text-cell.tsx`; the shared layer for every inline
|
|
3671
|
+
* editor (text cells, owner pickers, date cells, …).
|
|
3672
|
+
*/
|
|
3673
|
+
export declare function useEditableDraft<TValue, TDraft = TValue>(params: {
|
|
3674
|
+
value: TValue;
|
|
3675
|
+
editing: boolean;
|
|
3676
|
+
/** Project the source value into the draft shape. Omit for an identity draft. */
|
|
3677
|
+
toDraft?: (value: TValue) => TDraft;
|
|
3678
|
+
}): UseEditableDraftResult<TDraft>;
|
|
3679
|
+
|
|
3680
|
+
export declare interface UseEditableDraftResult<TDraft> {
|
|
3681
|
+
/** The editable draft value. */
|
|
3682
|
+
draft: TDraft;
|
|
3683
|
+
/** Update the draft locally (e.g. on input change). */
|
|
3684
|
+
setDraft: Dispatch<SetStateAction<TDraft>>;
|
|
3685
|
+
/** Force the draft back to the current source value (e.g. on Escape / cancel). */
|
|
3686
|
+
reset: () => void;
|
|
3687
|
+
}
|
|
3688
|
+
|
|
3689
|
+
/**
|
|
3690
|
+
* Optimistic mutation over a family of React Query list caches matched by a
|
|
3691
|
+
* partial key. Same lifecycle as `useOptimisticResource` (cancel + snapshot +
|
|
3692
|
+
* patch in `onMutate`, rollback in `onError`, reconcile-not-invalidate on
|
|
3693
|
+
* success), but it patches every matching cache so filtered/paginated views of
|
|
3694
|
+
* the same list stay consistent. Framework-generic: the caller's
|
|
3695
|
+
* `applyOptimistic`/`reconcile` own all knowledge of the cache shape.
|
|
3696
|
+
*/
|
|
3697
|
+
export declare function useOptimisticList<TCache, TVariables, TResult = unknown>(params: UseOptimisticListParams<TCache, TVariables, TResult>): UseMutationResult<TResult, unknown, TVariables, OptimisticListContext<TCache>>;
|
|
3698
|
+
|
|
3699
|
+
export declare interface UseOptimisticListParams<TCache, TVariables, TResult> {
|
|
3700
|
+
/**
|
|
3701
|
+
* Partial query key. EVERY cache whose key starts with this is patched
|
|
3702
|
+
* (React Query's `getQueriesData` / `setQueriesData` semantics) — e.g. a
|
|
3703
|
+
* paginated/filtered list keyed `['workstreams', week, search]` is patched
|
|
3704
|
+
* across all its variants with one mutation.
|
|
3705
|
+
*/
|
|
3706
|
+
queryKey: QueryKey;
|
|
3707
|
+
/** The async write. Its resolved value is the `result` passed to reconcile. */
|
|
3708
|
+
mutationFn: (variables: TVariables) => Promise<TResult>;
|
|
3709
|
+
/**
|
|
3710
|
+
* Patch one matching cache value, applied synchronously in `onMutate`.
|
|
3711
|
+
* Called once per matching entry. Return the cache unchanged to skip it.
|
|
3712
|
+
*/
|
|
3713
|
+
applyOptimistic: (args: {
|
|
3714
|
+
cache: TCache;
|
|
3715
|
+
variables: TVariables;
|
|
3716
|
+
}) => TCache;
|
|
3717
|
+
/**
|
|
3718
|
+
* Reconcile each matching cache with the server result on success, WITHOUT a
|
|
3719
|
+
* refetch. Omit to trust the optimistic patch — the no-flash-back default.
|
|
3720
|
+
*/
|
|
3721
|
+
reconcile?: (args: {
|
|
3722
|
+
cache: TCache;
|
|
3723
|
+
result: TResult;
|
|
3724
|
+
variables: TVariables;
|
|
3725
|
+
}) => TCache;
|
|
3726
|
+
/**
|
|
3727
|
+
* Invalidate the PATCHED key on settle. Defaults to `false`: re-running the
|
|
3728
|
+
* list query lets a stale in-flight response overwrite the patch for a frame
|
|
3729
|
+
* (flash-back). Only enable when you cannot reconcile from the server result.
|
|
3730
|
+
*/
|
|
3731
|
+
invalidateOnSettle?: boolean;
|
|
3732
|
+
/**
|
|
3733
|
+
* Sibling query keys to invalidate on success. Must NOT include `queryKey` —
|
|
3734
|
+
* only caches you did not optimistically patch (e.g. an aggregate the list
|
|
3735
|
+
* feeds). Refetching those is safe and keeps them fresh.
|
|
3736
|
+
*/
|
|
3737
|
+
invalidateKeysOnSuccess?: QueryKey[];
|
|
3738
|
+
onError?: (args: {
|
|
3739
|
+
error: unknown;
|
|
3740
|
+
variables: TVariables;
|
|
3741
|
+
}) => void;
|
|
3742
|
+
onSuccess?: (args: {
|
|
3743
|
+
result: TResult;
|
|
3744
|
+
variables: TVariables;
|
|
3745
|
+
}) => void;
|
|
3746
|
+
onSettled?: (args: {
|
|
3747
|
+
variables: TVariables;
|
|
3748
|
+
}) => void;
|
|
3749
|
+
}
|
|
3750
|
+
|
|
3751
|
+
/**
|
|
3752
|
+
* Optimistic mutation over a single React Query cache entry.
|
|
3753
|
+
*
|
|
3754
|
+
* Encapsulates the full lifecycle the Jarvis playbook prescribes:
|
|
3755
|
+
* `onMutate` cancels in-flight queries, snapshots the entry, and applies an
|
|
3756
|
+
* optimistic patch; `onError` rolls back to the snapshot; `onSuccess`
|
|
3757
|
+
* reconciles from the server result (or trusts the patch); and settle does NOT
|
|
3758
|
+
* blindly invalidate the patched key. Framework-generic — it knows nothing
|
|
3759
|
+
* about the resource shape beyond what the caller's callbacks describe.
|
|
3760
|
+
*
|
|
3761
|
+
* For multiple matching caches each holding a list, use `useOptimisticList`.
|
|
3762
|
+
*/
|
|
3763
|
+
export declare function useOptimisticResource<TData, TVariables, TResult = unknown>(params: UseOptimisticResourceParams<TData, TVariables, TResult>): UseMutationResult<TResult, unknown, TVariables, OptimisticResourceContext<TData>>;
|
|
3764
|
+
|
|
3765
|
+
export declare interface UseOptimisticResourceParams<TData, TVariables, TResult> {
|
|
3766
|
+
/** Exact query key of the cache entry holding the resource. */
|
|
3767
|
+
queryKey: QueryKey;
|
|
3768
|
+
/** The async write. Its resolved value is the `result` passed to reconcile. */
|
|
3769
|
+
mutationFn: (variables: TVariables) => Promise<TResult>;
|
|
3770
|
+
/**
|
|
3771
|
+
* Produce the optimistically-patched cache value, applied synchronously in
|
|
3772
|
+
* `onMutate`. Receives the pre-mutation value (or `undefined` when the cache
|
|
3773
|
+
* is empty). Return `previous` unchanged to skip the patch.
|
|
3774
|
+
*/
|
|
3775
|
+
applyOptimistic: (args: {
|
|
3776
|
+
previous: TData | undefined;
|
|
3777
|
+
variables: TVariables;
|
|
3778
|
+
}) => TData | undefined;
|
|
3779
|
+
/**
|
|
3780
|
+
* Reconcile the cache with the authoritative server result on success,
|
|
3781
|
+
* WITHOUT a refetch. Omit to trust the optimistic patch — the no-flash-back
|
|
3782
|
+
* default. Prefer this over `invalidateOnSettle` whenever the server result
|
|
3783
|
+
* carries the canonical shape (it sets the cache directly, so there is no
|
|
3784
|
+
* stale-poll window the way an invalidate-driven refetch has).
|
|
3785
|
+
*/
|
|
3786
|
+
reconcile?: (args: {
|
|
3787
|
+
previous: TData | undefined;
|
|
3788
|
+
result: TResult;
|
|
3789
|
+
variables: TVariables;
|
|
3790
|
+
}) => TData | undefined;
|
|
3791
|
+
/**
|
|
3792
|
+
* Invalidate the PATCHED key on settle. Defaults to `false`: invalidating a
|
|
3793
|
+
* key you just optimistically patched re-runs its query and lets a stale
|
|
3794
|
+
* in-flight response overwrite the patch for a frame — the flash-back the
|
|
3795
|
+
* Jarvis frontend-mutations playbook warns against. Only enable when you
|
|
3796
|
+
* cannot reconcile from the server result.
|
|
3797
|
+
*/
|
|
3798
|
+
invalidateOnSettle?: boolean;
|
|
3799
|
+
/**
|
|
3800
|
+
* Sibling query keys to invalidate on success. These must NOT include
|
|
3801
|
+
* `queryKey` — only caches you did not optimistically patch (e.g. a list the
|
|
3802
|
+
* detail view doesn't render). Refetching those is safe and keeps them fresh.
|
|
3803
|
+
*/
|
|
3804
|
+
invalidateKeysOnSuccess?: QueryKey[];
|
|
3805
|
+
onError?: (args: {
|
|
3806
|
+
error: unknown;
|
|
3807
|
+
variables: TVariables;
|
|
3808
|
+
previous: TData | undefined;
|
|
3809
|
+
}) => void;
|
|
3810
|
+
onSuccess?: (args: {
|
|
3811
|
+
result: TResult;
|
|
3812
|
+
variables: TVariables;
|
|
3813
|
+
}) => void;
|
|
3814
|
+
onSettled?: (args: {
|
|
3815
|
+
variables: TVariables;
|
|
3816
|
+
}) => void;
|
|
3817
|
+
}
|
|
3818
|
+
|
|
3819
|
+
/**
|
|
3820
|
+
* A drop-in replacement for `Tabs`' uncontrolled `defaultValue` that survives a
|
|
3821
|
+
* reload — built for Artifact Studio artifacts.
|
|
3822
|
+
*
|
|
3823
|
+
* Artifacts run inside an iframe the preview page re-keys (by deployment id) on
|
|
3824
|
+
* every `seq-studio artifact dev` rebuild, so each rebuild fully *remounts* the
|
|
3825
|
+
* iframe to a fresh `src`: a brand-new browsing context that wipes React state,
|
|
3826
|
+
* the HashRouter route, and the active tab. We use `localStorage` (not
|
|
3827
|
+
* `sessionStorage`) deliberately: a remounted iframe is a new browsing context,
|
|
3828
|
+
* so sessionStorage survival across the remount is browser/spec-dependent, while
|
|
3829
|
+
* localStorage is origin/partition-scoped and persists regardless. It also keeps
|
|
3830
|
+
* the tab across a normal page refresh.
|
|
3831
|
+
*
|
|
3832
|
+
* Feed the returned tuple straight into a Radix `Tabs`:
|
|
3833
|
+
*
|
|
3834
|
+
* ```tsx
|
|
3835
|
+
* const [tab, setTab] = usePersistentTabValue({
|
|
3836
|
+
* storageKey: 'my-artifact:detail-tab',
|
|
3837
|
+
* defaultValue: 'overview',
|
|
3838
|
+
* })
|
|
3839
|
+
* <Tabs value={tab} onValueChange={setTab}>…</Tabs>
|
|
3840
|
+
* ```
|
|
3841
|
+
*
|
|
3842
|
+
* `storageKey` must be a stable, app-unique string. Compose in an entity id
|
|
3843
|
+
* (e.g. `my-artifact:workstream:${id}:tab`) if each entity should remember its
|
|
3844
|
+
* own tab.
|
|
3845
|
+
*/
|
|
3846
|
+
export declare function usePersistentTabValue({ storageKey, defaultValue, }: {
|
|
3847
|
+
storageKey: string;
|
|
3848
|
+
defaultValue: string;
|
|
3849
|
+
}): readonly [string, (value: string) => void];
|
|
3850
|
+
|
|
3851
|
+
export declare function usePortalContainer(): HTMLElement | null;
|
|
3852
|
+
|
|
3853
|
+
export declare function UserAvatar({ name, avatarUrl, colorKey, initials: explicitInitials, size, fallback, className, }: UserAvatarProps): JSX.Element;
|
|
3854
|
+
|
|
3855
|
+
export declare interface UserAvatarProps {
|
|
3856
|
+
name: string;
|
|
3857
|
+
/** Profile image URL. Falls back to initials or the neutral icon. */
|
|
3858
|
+
avatarUrl?: string | null;
|
|
3859
|
+
/** Stable identifier for deterministic color (e.g. email). Falls back to name. */
|
|
3860
|
+
colorKey?: string;
|
|
3861
|
+
/**
|
|
3862
|
+
* Optional explicit initials (e.g. "AR", "ML"). Use when the displayed
|
|
3863
|
+
* `name` is a single token but you want a two-letter avatar — common in
|
|
3864
|
+
* Jarvis where `emailToName()` returns just the first name from the
|
|
3865
|
+
* TEAM roster. Falls back to deriving from `name` when omitted, which
|
|
3866
|
+
* yields a single letter for one-word names.
|
|
3867
|
+
*/
|
|
3868
|
+
initials?: string;
|
|
3869
|
+
/** Size in px. Defaults to 20. */
|
|
3870
|
+
size?: number;
|
|
3871
|
+
/** Initials are the identity default; icon is for generic/unassigned people. */
|
|
3872
|
+
fallback?: 'initials' | 'icon';
|
|
3873
|
+
className?: string;
|
|
3874
|
+
}
|
|
3875
|
+
|
|
3876
|
+
/**
|
|
3877
|
+
* A person rendered as a first-class platform entity: an avatar (+ optional
|
|
3878
|
+
* name) that reveals an identity card on hover — name, email, organization, and
|
|
3879
|
+
* role. Read-only; use the same component everywhere a user appears so people
|
|
3880
|
+
* feel like consistent, recognizable objects across the platform.
|
|
3881
|
+
*/
|
|
3882
|
+
export declare function UserChip({ user, showName, size, className }: UserChipProps): JSX.Element;
|
|
3883
|
+
|
|
3884
|
+
export declare interface UserChipProps {
|
|
3885
|
+
user: UserChipUser;
|
|
3886
|
+
/** Render the name beside the avatar. When false, only the avatar shows. */
|
|
3887
|
+
showName?: boolean;
|
|
3888
|
+
/** Avatar size in px (the inline trigger). Defaults to 22. */
|
|
3889
|
+
size?: number;
|
|
3890
|
+
className?: string;
|
|
3891
|
+
}
|
|
3892
|
+
|
|
3893
|
+
/**
|
|
3894
|
+
* Canonical shape for a platform user, mirroring the fields the Users surface
|
|
3895
|
+
* (chat-admin user management + `/api/user/list`) exposes. Only `name` is
|
|
3896
|
+
* required; everything else degrades gracefully.
|
|
3897
|
+
*/
|
|
3898
|
+
export declare interface UserChipUser {
|
|
3899
|
+
name: string;
|
|
3900
|
+
email?: string | null;
|
|
3901
|
+
/** Tenant / org the user belongs to (e.g. "Sequence", "Acme Corp"). */
|
|
3902
|
+
organization?: string | null;
|
|
3903
|
+
role?: string | null;
|
|
3904
|
+
/** Profile image URL; falls back to a deterministic initials avatar. */
|
|
3905
|
+
avatarUrl?: string | null;
|
|
3906
|
+
/** Stable id for deterministic avatar color (defaults to email, then name). */
|
|
3907
|
+
colorKey?: string;
|
|
3908
|
+
/** Explicit initials override (e.g. "AR") when `name` is a single token. */
|
|
3909
|
+
initials?: string;
|
|
3910
|
+
}
|
|
3911
|
+
|
|
3912
|
+
/**
|
|
3913
|
+
* A person rendered as one inline unit: a neutral avatar icon followed by their
|
|
3914
|
+
* full name. For lightweight person references (a lead, an assignee label) where
|
|
3915
|
+
* you only have a name. When you have full identity (email/org) and want the
|
|
3916
|
+
* hover card, use `UserChip` instead.
|
|
3917
|
+
*
|
|
3918
|
+
* Inherits font size/color from its container so it drops into any context.
|
|
3919
|
+
*/
|
|
3920
|
+
export declare function UserLabel({ name, size, className }: UserLabelProps): JSX.Element;
|
|
3921
|
+
|
|
3922
|
+
export declare interface UserLabelProps {
|
|
3923
|
+
name: string;
|
|
3924
|
+
/** Avatar size in px. Defaults to 18. */
|
|
3925
|
+
size?: number;
|
|
3926
|
+
className?: string;
|
|
3927
|
+
}
|
|
3928
|
+
|
|
3929
|
+
/**
|
|
3930
|
+
* Resolve a `ParsedDate` (year/month/day, any of which may be null)
|
|
3931
|
+
* into a concrete `Date`, using the reference date and `dayDefault`
|
|
3932
|
+
* to fill in the missing pieces.
|
|
3933
|
+
*
|
|
3934
|
+
* Decisions:
|
|
3935
|
+
* - Missing day: 1st of the month for `start`, last day for `end`.
|
|
3936
|
+
* - Missing month: January (start) or December (end).
|
|
3937
|
+
* - Missing year: current year, unless picking that year would put
|
|
3938
|
+
* the date in the future for "bare month" inputs — in which case
|
|
3939
|
+
* we fall back to the prior year (matches Mercury's behaviour for
|
|
3940
|
+
* "Dec" entered in July).
|
|
3941
|
+
*
|
|
3942
|
+
* Returns `null` if the resulting date doesn't actually exist (e.g.
|
|
3943
|
+
* "Feb 30 2024" was typed).
|
|
3944
|
+
*/
|
|
3945
|
+
/**
|
|
3946
|
+
* Direction the parser leans when a year is missing from the user's
|
|
3947
|
+
* input. Default is `'past'` — matches the original retrospective bias
|
|
3948
|
+
* (`"Dec"` in July → last December). Forward-planning surfaces (due
|
|
3949
|
+
* dates, scheduling) pass `'future'` so `"Jun 8"` in May reads as the
|
|
3950
|
+
* upcoming June 8 instead of last year's.
|
|
3951
|
+
*/
|
|
3952
|
+
declare type YearBias = 'past' | 'future';
|
|
3953
|
+
|
|
3954
|
+
export { }
|
|
3955
|
+
|
|
3956
|
+
|
|
3957
|
+
declare module 'chart.js' {
|
|
3958
|
+
interface TooltipPositionerMap {
|
|
3959
|
+
cursor: TooltipPositionerFunction<ChartType>;
|
|
3960
|
+
}
|
|
3961
|
+
}
|