@discuss-ds/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,876 @@
1
+ import * as class_variance_authority_types from 'class-variance-authority/types';
2
+ import * as React from 'react';
3
+ import { VariantProps } from 'class-variance-authority';
4
+ import { Switch as Switch$1, Toggle as Toggle$1, Checkbox as Checkbox$1, ToggleGroup, Slot, Label as Label$1, RadioGroup as RadioGroup$1, Select as Select$1, Slider as Slider$1, Tabs as Tabs$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Toast as Toast$1, Tooltip as Tooltip$1, Progress as Progress$1 } from 'radix-ui';
5
+ import { DayPickerProps } from 'react-day-picker';
6
+ import * as react_hook_form from 'react-hook-form';
7
+ import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
8
+ import { IconProps } from '@phosphor-icons/react';
9
+
10
+ declare const buttonVariants: (props?: ({
11
+ variant?: "link" | "default" | "subtle" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
12
+ size?: "md" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
13
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
14
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
15
+ /**
16
+ * Render `props.children` into the child element instead of wrapping it in
17
+ * a `<button>` (Radix `Slot`) — lets consumers compose e.g.
18
+ * `<Button asChild><a href="...">Label</a></Button>` without double-wrapping.
19
+ * The ref then targets whatever element the child renders, not necessarily
20
+ * an `HTMLButtonElement`.
21
+ */
22
+ asChild?: boolean;
23
+ }
24
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
25
+
26
+ type SwitchProps = React.ComponentPropsWithoutRef<typeof Switch$1.Root>;
27
+ declare const Switch: React.ForwardRefExoticComponent<Omit<Switch$1.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
28
+
29
+ type ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle$1.Root>;
30
+ declare const Toggle: React.ForwardRefExoticComponent<Omit<Toggle$1.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
31
+
32
+ type AIStatus = 'idle' | 'thinking' | 'executing' | 'working';
33
+ interface AIMiniAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
34
+ /** `idle` shows only the mark; the others add a status line next to it. */
35
+ status?: AIStatus;
36
+ /** Override the status text. */
37
+ label?: React.ReactNode;
38
+ /** Elapsed time shown after the label while `working` (e.g. "45 s"). */
39
+ elapsed?: React.ReactNode;
40
+ }
41
+ declare const AIMiniAvatar: React.ForwardRefExoticComponent<AIMiniAvatarProps & React.RefAttributes<HTMLDivElement>>;
42
+
43
+ interface AIResponseContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
44
+ /** Display-font heading at the top of the reply (e.g. "Confirm new project."). */
45
+ title?: React.ReactNode;
46
+ /** Message actions row — a `Timestamp` with copy / like / dislike / retry buttons. */
47
+ actions?: React.ReactNode;
48
+ /** Status line under the reply — an `AIMiniAvatar`. */
49
+ feedback?: React.ReactNode;
50
+ }
51
+ declare const AIResponseContainer: React.ForwardRefExoticComponent<AIResponseContainerProps & React.RefAttributes<HTMLDivElement>>;
52
+
53
+ declare const askAiToggleVariants: (props?: ({
54
+ type?: "menu" | "action" | null | undefined;
55
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
56
+ interface AskAiToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof Toggle$1.Root>, 'type'>, VariantProps<typeof askAiToggleVariants> {
57
+ }
58
+ declare const AskAiToggle: React.ForwardRefExoticComponent<AskAiToggleProps & React.RefAttributes<HTMLButtonElement>>;
59
+
60
+ interface ChatChoicesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
61
+ /** The question the assistant is asking. */
62
+ title: React.ReactNode;
63
+ }
64
+ declare const ChatChoices: React.ForwardRefExoticComponent<ChatChoicesProps & React.RefAttributes<HTMLDivElement>>;
65
+ interface ChatOptionBaseProps {
66
+ title: React.ReactNode;
67
+ description?: React.ReactNode;
68
+ className?: string;
69
+ }
70
+ interface ChatOptionActionProps extends ChatOptionBaseProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
71
+ kind?: 'action';
72
+ }
73
+ interface ChatOptionRadioProps extends ChatOptionBaseProps {
74
+ kind: 'radio';
75
+ /** Value in the surrounding `RadioGroup`. */
76
+ value: string;
77
+ disabled?: boolean;
78
+ }
79
+ interface ChatOptionCheckboxProps extends ChatOptionBaseProps {
80
+ kind: 'checkbox';
81
+ checked?: boolean;
82
+ defaultChecked?: boolean;
83
+ onCheckedChange?: (checked: boolean) => void;
84
+ disabled?: boolean;
85
+ }
86
+ type ChatOptionProps = ChatOptionActionProps | ChatOptionRadioProps | ChatOptionCheckboxProps;
87
+ declare function ChatOption(props: ChatOptionProps): React.JSX.Element;
88
+
89
+ interface ChatInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'defaultValue' | 'onChange'> {
90
+ value?: string;
91
+ defaultValue?: string;
92
+ onValueChange?: (value: string) => void;
93
+ /** Called with the text when the send button (or Enter) is pressed. */
94
+ onSubmit?: (value: string) => void;
95
+ placeholder?: string;
96
+ /** Accessible name for the text area. */
97
+ 'aria-label'?: string;
98
+ /** Attached files (`FileAttachment`s) shown above the text. */
99
+ attachments?: React.ReactNode;
100
+ /** A `ChatChoices` block shown above the text area. */
101
+ choices?: React.ReactNode;
102
+ /** Slot before the send button — usually a `ProjectSelector`. */
103
+ trailing?: React.ReactNode;
104
+ /** Called when the add (+) button is pressed. Hides the button when omitted. */
105
+ onAdd?: () => void;
106
+ addLabel?: string;
107
+ sendLabel?: string;
108
+ disabled?: boolean;
109
+ }
110
+ declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLDivElement>>;
111
+ interface AskAiInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onSubmit'> {
112
+ value?: string;
113
+ defaultValue?: string;
114
+ onValueChange?: (value: string) => void;
115
+ onSubmit?: (value: string) => void;
116
+ sendLabel?: string;
117
+ }
118
+ declare const AskAiInput: React.ForwardRefExoticComponent<AskAiInputProps & React.RefAttributes<HTMLInputElement>>;
119
+
120
+ interface FileAttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
121
+ name: string;
122
+ /** File type badge text, e.g. "PDF". */
123
+ type?: string;
124
+ /** Shows the round remove button on hover or keyboard focus (Figma: Default). Omit for the sent-message card (Figma: Variant 3). */
125
+ onRemove?: () => void;
126
+ removeLabel?: string;
127
+ }
128
+ declare const FileAttachment: React.ForwardRefExoticComponent<FileAttachmentProps & React.RefAttributes<HTMLDivElement>>;
129
+
130
+ interface ProjectSelectorProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue'> {
131
+ /** Name of the chosen project. Leave empty for "New Project". */
132
+ project?: string;
133
+ /**
134
+ * Existing project names. When given, pressing the selector opens a menu with
135
+ * "New Project" and these names; the current choice is checked.
136
+ */
137
+ projects?: string[];
138
+ /** Called with the chosen project name, or `undefined` for "New Project". */
139
+ onProjectChange?: (project: string | undefined) => void;
140
+ /** Label of the "new project" menu item and of the pill when no project is chosen. */
141
+ newProjectLabel?: string;
142
+ /**
143
+ * `selected` means the project is locked for this chat: the pill is read-only
144
+ * (no caret, neutral border). Otherwise it is a trigger with a caret.
145
+ */
146
+ selected?: boolean;
147
+ }
148
+ declare const ProjectSelector: React.ForwardRefExoticComponent<ProjectSelectorProps & React.RefAttributes<HTMLButtonElement>>;
149
+
150
+ interface TimestampProps extends React.HTMLAttributes<HTMLDivElement> {
151
+ /** The time text, e.g. "5 minutes ago". */
152
+ time: React.ReactNode;
153
+ /** Action buttons (ghost icon `Button`s) shown next to the time. */
154
+ children?: React.ReactNode;
155
+ /** `before` puts the time left of the actions (user messages); `after` puts it right of them (AI replies). */
156
+ timePosition?: 'before' | 'after';
157
+ }
158
+ declare const Timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLDivElement>>;
159
+
160
+ interface TopicCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
161
+ /** Leading 24px icon (a Phosphor icon, e.g. `<FolderOpen weight="fill" />`). */
162
+ icon?: React.ReactNode;
163
+ title: React.ReactNode;
164
+ /** Small tag beside the title (e.g. a language `RoleTag`). */
165
+ badge?: React.ReactNode;
166
+ description: React.ReactNode;
167
+ /** Chips under the description (e.g. topic tags). */
168
+ tags?: React.ReactNode;
169
+ /** Meta line under the description (e.g. "7 Questions · 30 minutes"). */
170
+ meta?: React.ReactNode;
171
+ }
172
+ declare const TopicCard: React.ForwardRefExoticComponent<TopicCardProps & React.RefAttributes<HTMLDivElement>>;
173
+ interface TopicCardMetaItemProps extends React.HTMLAttributes<HTMLSpanElement> {
174
+ icon: React.ReactNode;
175
+ }
176
+ /** An icon + text item for `TopicCard`'s `meta` line. */
177
+ declare function TopicCardMetaItem({ icon, children, className, ...props }: TopicCardMetaItemProps): React.JSX.Element;
178
+ /** A short chip for `TopicCard`'s `tags` row. */
179
+ declare function TopicCardTag({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
180
+ interface TopicActivityRowProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
181
+ /** Status text, e.g. "New Activity Created". */
182
+ status: React.ReactNode;
183
+ }
184
+ declare const TopicActivityRow: React.ForwardRefExoticComponent<TopicActivityRowProps & React.RefAttributes<HTMLButtonElement>>;
185
+
186
+ interface UserMessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
187
+ /** Attached files (`FileAttachment`s) shown above the text. */
188
+ attachments?: React.ReactNode;
189
+ /** Row under the bubble, usually a `Timestamp` with message actions. */
190
+ footer?: React.ReactNode;
191
+ }
192
+ declare const UserMessageBubble: React.ForwardRefExoticComponent<UserMessageBubbleProps & React.RefAttributes<HTMLDivElement>>;
193
+
194
+ type CalendarProps = DayPickerProps & {
195
+ /** Days to mark with a dashed outline (e.g. suggested interview slots). */
196
+ recommendedDates?: Date[];
197
+ };
198
+ declare function Calendar({ className, classNames, showOutsideDays, captionLayout, recommendedDates, modifiers, modifiersClassNames, startMonth, endMonth, ...props }: CalendarProps): React.JSX.Element;
199
+ declare namespace Calendar {
200
+ var displayName: string;
201
+ }
202
+
203
+ type CheckboxProps = React.ComponentPropsWithoutRef<typeof Checkbox$1.Root>;
204
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<Checkbox$1.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
205
+ interface CheckboxFieldProps extends CheckboxProps {
206
+ label: React.ReactNode;
207
+ /** Secondary line under the label. */
208
+ description?: React.ReactNode;
209
+ }
210
+ /** Checkbox with its label (and optional description) laid out per Figma. */
211
+ declare const CheckboxField: React.ForwardRefExoticComponent<CheckboxFieldProps & React.RefAttributes<HTMLButtonElement>>;
212
+
213
+ interface TimeValue {
214
+ /** 1–12 */
215
+ hour: number;
216
+ /** 0–59 */
217
+ minute: number;
218
+ period: 'AM' | 'PM';
219
+ }
220
+ interface TimeItemProps extends React.ComponentPropsWithoutRef<typeof ToggleGroup.Item> {
221
+ /** Dashed outline to suggest this slot. */
222
+ recommended?: boolean;
223
+ }
224
+ declare const TimeItem: React.ForwardRefExoticComponent<TimeItemProps & React.RefAttributes<HTMLButtonElement>>;
225
+ interface TimePickerProps {
226
+ value?: TimeValue;
227
+ onValueChange?: (value: TimeValue) => void;
228
+ /** Minute interval between options. */
229
+ minuteStep?: number;
230
+ isHourDisabled?: (hour: number, period: 'AM' | 'PM') => boolean;
231
+ isMinuteDisabled?: (minute: number, hour: number, period: 'AM' | 'PM') => boolean;
232
+ isHourRecommended?: (hour: number, period: 'AM' | 'PM') => boolean;
233
+ isMinuteRecommended?: (minute: number, hour: number, period: 'AM' | 'PM') => boolean;
234
+ className?: string;
235
+ }
236
+ /** Figma: Calendar (25) › Time Picker Panel — AM/PM switch with hour and minute columns. */
237
+ declare function TimePicker({ value, onValueChange, minuteStep, isHourDisabled, isMinuteDisabled, isHourRecommended, isMinuteRecommended, className, }: TimePickerProps): React.JSX.Element;
238
+
239
+ interface DateTimePickerProps {
240
+ /** Initial selection. The picker keeps its own draft until Apply, so remount it (e.g. with a `key`) to reset from a new value. */
241
+ value?: Date;
242
+ defaultValue?: Date;
243
+ /** Called with the chosen date (time included when `showTime`) when Apply is pressed. */
244
+ onApply?: (value: Date | undefined) => void;
245
+ onReset?: () => void;
246
+ /** Show the time picker column next to the calendar. */
247
+ showTime?: boolean;
248
+ calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect'>;
249
+ timePickerProps?: Omit<TimePickerProps, 'value' | 'onValueChange'>;
250
+ className?: string;
251
+ }
252
+ declare function DateTimePicker({ value, defaultValue, onApply, onReset, showTime, calendarProps, timePickerProps, className, }: DateTimePickerProps): React.JSX.Element;
253
+ interface DatePickerProps extends Omit<DateTimePickerProps, 'onApply' | 'className'> {
254
+ label?: React.ReactNode;
255
+ placeholder?: string;
256
+ onValueChange?: (value: Date | undefined) => void;
257
+ className?: string;
258
+ }
259
+ /** Field-style trigger that opens a `DateTimePicker` in a popover. Figma: Calendar (25) › Calendar & time. */
260
+ declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
261
+
262
+ type FieldStatus = 'default' | 'success' | 'error';
263
+ /**
264
+ * Classes for a bordered field surface (Figma: Text Input / Textarea / Select).
265
+ * Hover and the open "select" state use `input-accent`; success and error swap
266
+ * the border colour. Focus is handled by the global `:focus-visible` ring.
267
+ */
268
+ declare function fieldSurfaceClasses(status?: FieldStatus): string;
269
+ interface FieldControlProps {
270
+ id: string;
271
+ 'aria-describedby'?: string;
272
+ 'aria-invalid'?: true;
273
+ }
274
+ interface FieldProps {
275
+ /** Label shown above the control. */
276
+ label?: React.ReactNode;
277
+ /** Neutral helper text shown under the control. Replaced by `message` on success/error. */
278
+ description?: React.ReactNode;
279
+ /** Status message shown with an icon when `status` is `success` or `error`. */
280
+ message?: React.ReactNode;
281
+ status?: FieldStatus;
282
+ /** Id for the control; generated when omitted. */
283
+ id?: string;
284
+ className?: string;
285
+ /** Render the control, spreading the supplied props onto it. */
286
+ children: (control: FieldControlProps) => React.ReactNode;
287
+ }
288
+ /**
289
+ * Label + control + helper/status message, wired together with
290
+ * `htmlFor`/`aria-describedby`/`aria-invalid`. Shared by Text Input, Textarea,
291
+ * Select, Numerical input and Input with action.
292
+ */
293
+ declare function Field({ label, description, message, status, id, className, children }: FieldProps): React.JSX.Element;
294
+
295
+ declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
296
+ declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): React.JSX.Element;
297
+ declare function useFormField(): {
298
+ invalid: boolean;
299
+ isDirty: boolean;
300
+ isTouched: boolean;
301
+ isValidating: boolean;
302
+ error?: react_hook_form.FieldError | undefined;
303
+ id: string;
304
+ name: string;
305
+ formItemId: string;
306
+ formDescriptionId: string;
307
+ formMessageId: string;
308
+ };
309
+ type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
310
+ declare const FormItem: React.ForwardRefExoticComponent<FormItemProps & React.RefAttributes<HTMLDivElement>>;
311
+ type FormLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
312
+ declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
313
+ type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot.Root>;
314
+ declare const FormControl: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
315
+ children?: React.ReactNode;
316
+ } & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
317
+ type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
318
+ declare const FormDescription: React.ForwardRefExoticComponent<FormDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
319
+ type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
320
+ declare const FormMessage: React.ForwardRefExoticComponent<FormMessageProps & React.RefAttributes<HTMLParagraphElement>>;
321
+
322
+ /** `September 23, 2026 - 11:30 AM` (or just the date when `showTime` is false). */
323
+ declare function formatDateTime(date: Date, showTime?: boolean): string;
324
+
325
+ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
326
+ /** Border/message state. `error` also sets `aria-invalid`. */
327
+ status?: FieldStatus;
328
+ /** Convenience: renders a Field (label + helper/status message) around the input. */
329
+ label?: React.ReactNode;
330
+ description?: React.ReactNode;
331
+ message?: React.ReactNode;
332
+ }
333
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
334
+
335
+ interface InputWithActionProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
336
+ /** Label of the trailing action button. */
337
+ actionLabel: string;
338
+ onAction?: React.MouseEventHandler<HTMLButtonElement>;
339
+ /** Chips (e.g. `EditableTag`s) shown inside the field before the input. */
340
+ tags?: React.ReactNode;
341
+ status?: Exclude<FieldStatus, 'success'>;
342
+ label?: React.ReactNode;
343
+ /** Support text shown under the field. */
344
+ description?: React.ReactNode;
345
+ /** Error message shown when `status` is `error`. */
346
+ message?: React.ReactNode;
347
+ }
348
+ declare const InputWithAction: React.ForwardRefExoticComponent<InputWithActionProps & React.RefAttributes<HTMLInputElement>>;
349
+
350
+ type LabelProps = React.ComponentPropsWithoutRef<typeof Label$1.Root>;
351
+ declare const Label: React.ForwardRefExoticComponent<Omit<Label$1.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
352
+
353
+ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'size'> {
354
+ value?: number;
355
+ defaultValue?: number;
356
+ onValueChange?: (value: number) => void;
357
+ min?: number;
358
+ max?: number;
359
+ step?: number;
360
+ /** Unit shown after the value (e.g. "minutes"). */
361
+ unit?: string;
362
+ status?: FieldStatus;
363
+ label?: React.ReactNode;
364
+ description?: React.ReactNode;
365
+ message?: React.ReactNode;
366
+ }
367
+ declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
368
+
369
+ type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroup$1.Root>;
370
+ declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
371
+ type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroup$1.Item>;
372
+ declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroup$1.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
373
+ interface RadioGroupFieldItemProps extends RadioGroupItemProps {
374
+ label: React.ReactNode;
375
+ /** Secondary line under the label. */
376
+ description?: React.ReactNode;
377
+ }
378
+ /** A radio with its label (and optional description) laid out per Figma. */
379
+ declare const RadioGroupFieldItem: React.ForwardRefExoticComponent<RadioGroupFieldItemProps & React.RefAttributes<HTMLButtonElement>>;
380
+
381
+ interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
382
+ /** Called when the clear (×) button is pressed, after the field has been emptied. */
383
+ onClear?: () => void;
384
+ /** Label for the clear button. */
385
+ clearLabel?: string;
386
+ }
387
+ declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLInputElement>>;
388
+
389
+ declare const Select: React.FC<Select$1.SelectProps>;
390
+ declare const SelectValue: React.ForwardRefExoticComponent<Select$1.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
391
+ declare const SelectGroup: React.ForwardRefExoticComponent<Select$1.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
392
+ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Select$1.Trigger> {
393
+ /** Leading icon (Figma: "With label = No" shows a gear). */
394
+ icon?: React.ReactNode;
395
+ }
396
+ declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
397
+ type SelectContentProps = React.ComponentPropsWithoutRef<typeof Select$1.Content>;
398
+ declare const SelectContent: React.ForwardRefExoticComponent<Omit<Select$1.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
399
+ type SelectItemProps = React.ComponentPropsWithoutRef<typeof Select$1.Item>;
400
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<Select$1.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
401
+
402
+ interface SliderProps extends React.ComponentPropsWithoutRef<typeof Slider$1.Root> {
403
+ /** Text shown above the track on the left (e.g. "Label"). The max value is shown on the right. */
404
+ label?: React.ReactNode;
405
+ /** Show the min and max values above the track instead of a label. */
406
+ showRange?: boolean;
407
+ /**
408
+ * Show the current value in a bubble above the thumb. `true` shows it while
409
+ * the thumb is hovered, focused or dragged; `'always'` keeps it visible.
410
+ */
411
+ showValue?: boolean | 'always';
412
+ }
413
+ declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
414
+
415
+ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
416
+ status?: FieldStatus;
417
+ /** Convenience: renders a Field (label + helper/status message) around the textarea. */
418
+ label?: React.ReactNode;
419
+ description?: React.ReactNode;
420
+ message?: React.ReactNode;
421
+ }
422
+ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
423
+
424
+ /** `filter` is the pill-shaped table filter; `toggle` is the icon-only mode switch. */
425
+ type TabNavigationVariant = 'filter' | 'toggle';
426
+ declare const TabNavigationContext: React.Context<TabNavigationVariant>;
427
+ declare const tabNavigationVariants: (props?: ({
428
+ variant?: "filter" | "toggle" | null | undefined;
429
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
430
+ /** Radix `Tabs.Root` — owns the selected value; pair with `TabNavigation` + `TabItem` + `TabsContent`. */
431
+ declare const Tabs: React.ForwardRefExoticComponent<Tabs$1.TabsProps & React.RefAttributes<HTMLDivElement>>;
432
+ declare const TabsContent: React.ForwardRefExoticComponent<Tabs$1.TabsContentProps & React.RefAttributes<HTMLDivElement>>;
433
+ interface TabNavigationProps extends React.ComponentPropsWithoutRef<typeof Tabs$1.List>, VariantProps<typeof tabNavigationVariants> {
434
+ }
435
+ declare const TabNavigation: React.ForwardRefExoticComponent<TabNavigationProps & React.RefAttributes<HTMLDivElement>>;
436
+
437
+ type TabItemProps = React.ComponentPropsWithoutRef<typeof Tabs$1.Trigger>;
438
+ declare const TabItem: React.ForwardRefExoticComponent<Omit<Tabs$1.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
439
+
440
+ declare const Dialog: React.FC<Dialog$1.DialogProps>;
441
+ declare const DialogTrigger: React.ForwardRefExoticComponent<Dialog$1.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
442
+ declare const DialogClose: React.ForwardRefExoticComponent<Dialog$1.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
443
+ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialog$1.Content> {
444
+ /** Label for the corner close button. */
445
+ closeLabel?: string;
446
+ /** Hide the corner close button (e.g. when the footer is the only way out). */
447
+ hideClose?: boolean;
448
+ }
449
+ declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
450
+ declare const DialogHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
451
+ declare const DialogTitle: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
452
+ declare const DialogDescription: React.ForwardRefExoticComponent<Omit<Dialog$1.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
453
+ declare const DialogBody: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
454
+ declare const DialogFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
455
+
456
+ declare const DropdownMenu: React.FC<DropdownMenu$1.DropdownMenuProps>;
457
+ declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
458
+ declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
459
+ declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenu$1.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
460
+ declare const DropdownMenuSub: React.FC<DropdownMenu$1.DropdownMenuSubProps>;
461
+ type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Content>;
462
+ declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
463
+ interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item> {
464
+ /** Secondary line under the label. */
465
+ description?: React.ReactNode;
466
+ /** `destructive` shows a trash icon and red text (Figma: State = Destructive). */
467
+ variant?: 'default' | 'destructive';
468
+ /** Leading icon. */
469
+ icon?: React.ReactNode;
470
+ }
471
+ declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
472
+ interface DropdownMenuSelectableItemProps {
473
+ description?: React.ReactNode;
474
+ }
475
+ /** A checkable item: the selected state is accent-coloured with a trailing check (Figma: State = Selected). */
476
+ declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuSelectableItemProps & React.RefAttributes<HTMLDivElement>>;
477
+ /** One choice of a `DropdownMenuRadioGroup`, styled like a selected item when active. */
478
+ declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & DropdownMenuSelectableItemProps & React.RefAttributes<HTMLDivElement>>;
479
+ /** Item that opens a submenu, with a trailing caret (Figma: Expand = Yes). */
480
+ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
481
+ declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
482
+ declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
483
+ declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenu$1.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
484
+
485
+ type ToastVariant = 'info' | 'success' | 'warning' | 'destructive';
486
+ declare const toastVariants: (props?: ({
487
+ variant?: "destructive" | "success" | "info" | "warning" | null | undefined;
488
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
489
+ declare const ToastProvider: React.FC<Toast$1.ToastProviderProps>;
490
+ declare const ToastViewport: React.ForwardRefExoticComponent<Omit<Toast$1.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
491
+ interface ToastProps extends Omit<React.ComponentPropsWithoutRef<typeof Toast$1.Root>, 'title'>, VariantProps<typeof toastVariants> {
492
+ /** Bold first line. */
493
+ title?: React.ReactNode;
494
+ description?: React.ReactNode;
495
+ /** Optional action button (e.g. Undo). Wrap it in `ToastAction`. */
496
+ action?: React.ReactNode;
497
+ closeLabel?: string;
498
+ }
499
+ declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
500
+ declare const ToastAction: React.ForwardRefExoticComponent<Toast$1.ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
501
+ interface ToastInlineProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
502
+ /** Show a close button and call this when it is pressed. */
503
+ onClose?: () => void;
504
+ closeLabel?: string;
505
+ }
506
+ declare const ToastInline: React.ForwardRefExoticComponent<ToastInlineProps & React.RefAttributes<HTMLDivElement>>;
507
+
508
+ declare const TooltipProvider: React.FC<Tooltip$1.TooltipProviderProps>;
509
+ declare const Tooltip: React.FC<Tooltip$1.TooltipProps>;
510
+ declare const TooltipTrigger: React.ForwardRefExoticComponent<Tooltip$1.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
511
+ interface TooltipContentProps extends Omit<React.ComponentPropsWithoutRef<typeof Tooltip$1.Content>, 'title'> {
512
+ /** Bold first line. With `description` this is the Descriptive tooltip. */
513
+ title?: React.ReactNode;
514
+ description?: React.ReactNode;
515
+ /** Underlined action line under the description — the Rich tooltip. Usually a link or button. */
516
+ action?: React.ReactNode;
517
+ /** Show the pointer arrow toward the trigger. */
518
+ arrow?: boolean;
519
+ }
520
+ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
521
+
522
+ interface FileUploadZoneProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'title' | 'type'> {
523
+ title?: React.ReactNode;
524
+ /** Supported formats line. */
525
+ hint?: React.ReactNode;
526
+ icon?: React.ReactNode;
527
+ /** Called with the chosen or dropped files. */
528
+ onFiles?: (files: File[]) => void;
529
+ }
530
+ declare const FileUploadZone: React.ForwardRefExoticComponent<FileUploadZoneProps & React.RefAttributes<HTMLInputElement>>;
531
+ interface FileUploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
532
+ name: string;
533
+ /** File size text, e.g. "443KB". */
534
+ size?: string;
535
+ status?: 'uploading' | 'complete' | 'error';
536
+ /** 0–100, shown while uploading. */
537
+ progress?: number;
538
+ /** Remaining time text while uploading, e.g. "2 seconds left". */
539
+ timeLeft?: string;
540
+ icon?: React.ReactNode;
541
+ onRemove?: () => void;
542
+ removeLabel?: string;
543
+ }
544
+ declare const FileUploadItem: React.ForwardRefExoticComponent<FileUploadItemProps & React.RefAttributes<HTMLDivElement>>;
545
+
546
+ interface MediaInfoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
547
+ name: string;
548
+ /** Secondary line parts, e.g. ["443KB", "1/5"], joined with a dot. */
549
+ details?: string[];
550
+ onRemove?: () => void;
551
+ removeLabel?: string;
552
+ /** Larger name / details (the image preview uses these). */
553
+ large?: boolean;
554
+ }
555
+ declare function MediaInfo({ name, details, onRemove, removeLabel, large, className, ...props }: MediaInfoProps): React.JSX.Element;
556
+ interface ImagePreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
557
+ /** The image (an `<img>` filling the area). Leave empty for the placeholder fill. */
558
+ children?: React.ReactNode;
559
+ name: string;
560
+ details?: string[];
561
+ onRemove?: () => void;
562
+ }
563
+ declare const ImagePreview: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<HTMLDivElement>>;
564
+ interface ImageThumbnailsProps extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroup.Root>, 'type' | 'value' | 'defaultValue' | 'onValueChange'> {
565
+ /** Slots shown, e.g. 5. Slots past `images.length` render as empty dashed placeholders. */
566
+ max: number;
567
+ images: {
568
+ id: string;
569
+ src?: string;
570
+ alt: string;
571
+ }[];
572
+ value?: string;
573
+ onValueChange?: (id: string) => void;
574
+ }
575
+ declare const ImageThumbnails: React.ForwardRefExoticComponent<ImageThumbnailsProps & React.RefAttributes<HTMLDivElement>>;
576
+ interface VideoPlayerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
577
+ /** Video source. Without one, the area shows the placeholder fill. */
578
+ src?: string;
579
+ name?: string;
580
+ details?: string[];
581
+ onRemove?: () => void;
582
+ /** Called by the "more" (…) button. */
583
+ onMore?: () => void;
584
+ /** Initial time values for static previews (seconds). */
585
+ initialTime?: number;
586
+ initialDuration?: number;
587
+ }
588
+ declare const VideoPlayer: React.ForwardRefExoticComponent<VideoPlayerProps & React.RefAttributes<HTMLDivElement>>;
589
+ interface VolumeControlProps {
590
+ /** 0–1. */
591
+ volume: number;
592
+ onVolumeChange: (volume: number) => void;
593
+ className?: string;
594
+ }
595
+ declare function VolumeControl({ volume, onVolumeChange, className }: VolumeControlProps): React.JSX.Element;
596
+
597
+ interface OpenEndAnswerProps extends Omit<TextareaProps, 'label' | 'description' | 'message' | 'maxLength'> {
598
+ /** Character limit shown in the counter. */
599
+ maxLength?: number;
600
+ }
601
+ declare const OpenEndAnswer: React.ForwardRefExoticComponent<OpenEndAnswerProps & React.RefAttributes<HTMLTextAreaElement>>;
602
+
603
+ declare const QuestionCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
604
+
605
+ interface QuestionEditorCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
606
+ /** Question number shown in the drag-handle tag. */
607
+ number: number;
608
+ title: string;
609
+ onTitleChange?: (title: string) => void;
610
+ /** The question is being edited: accent border, counter and footer are shown. */
611
+ active?: boolean;
612
+ maxLength?: number;
613
+ /** Footer label, e.g. "4/20 choices". Shown while `active`. */
614
+ countLabel?: React.ReactNode;
615
+ /** Header actions. Defaults to copy, delete and preview buttons wired to the `on*` callbacks. */
616
+ actions?: React.ReactNode;
617
+ onDuplicate?: () => void;
618
+ onDelete?: () => void;
619
+ onPreview?: () => void;
620
+ /** Sparkle button beside the card, revealed on hover, focus or while `active`. Omit to hide it. */
621
+ onAskAi?: () => void;
622
+ /** Footer: adds an answer choice. Omit (with `onPaste`) to hide the footer buttons. */
623
+ onAdd?: () => void;
624
+ /** Footer: opens paste-many-choices. */
625
+ onPaste?: () => void;
626
+ /** Optional strip under the card body, e.g. an "Inferred" assumption note. */
627
+ note?: React.ReactNode;
628
+ }
629
+ declare const QuestionEditorCard: React.ForwardRefExoticComponent<QuestionEditorCardProps & React.RefAttributes<HTMLDivElement>>;
630
+
631
+ interface QuestionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
632
+ /** Question number, shown as "QUESTION 01". */
633
+ number: number;
634
+ title: React.ReactNode;
635
+ /** Adds the red asterisk after the title. */
636
+ required?: boolean;
637
+ /** Shows an error banner above the header. `true` shows "This question is mandatory."; pass a node for a custom message. */
638
+ error?: boolean | React.ReactNode;
639
+ onDismissError?: () => void;
640
+ /** Editor mode: an editable title with a character counter and hover actions. */
641
+ editor?: boolean;
642
+ /** Editor mode: called as the title is typed. `title` must then be a string. */
643
+ onTitleChange?: (title: string) => void;
644
+ /** Editor mode: action buttons (copy, delete, preview, AI) revealed on hover or focus. */
645
+ actions?: React.ReactNode;
646
+ /** Editor mode: title length limit. */
647
+ maxLength?: number;
648
+ /** Editor mode: the question is being edited — the number tag turns accent. */
649
+ active?: boolean;
650
+ /** Editor mode: show the "n/2000 characters" counter. Defaults to `true`. */
651
+ showCounter?: boolean;
652
+ }
653
+ declare const QuestionHeader: React.ForwardRefExoticComponent<QuestionHeaderProps & React.RefAttributes<HTMLDivElement>>;
654
+
655
+ type QuestionType = 'select-one' | 'select-multiple' | 'ranking' | 'upload' | 'rating' | 'open-end';
656
+ interface QuestionTypeIconProps extends Omit<IconProps, 'weight'> {
657
+ type: QuestionType;
658
+ }
659
+ declare function QuestionTypeIcon({ type, size, className, ...props }: QuestionTypeIconProps): React.JSX.Element;
660
+
661
+ interface QuestionNavItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
662
+ /** The question currently open in the editor. */
663
+ selected?: boolean;
664
+ /** Question type, shown as the leading 16px duotone icon. */
665
+ questionType?: QuestionType;
666
+ /** The question has validation problems — the type icon becomes a warning icon. */
667
+ error?: boolean;
668
+ /** Render the child element instead of a `<button>` (e.g. a router link). */
669
+ asChild?: boolean;
670
+ }
671
+ declare const QuestionNavItem: React.ForwardRefExoticComponent<QuestionNavItemProps & React.RefAttributes<HTMLButtonElement>>;
672
+
673
+ interface OptionBase {
674
+ label: React.ReactNode;
675
+ className?: string;
676
+ disabled?: boolean;
677
+ }
678
+ interface QuestionRadioOptionProps extends OptionBase {
679
+ kind?: 'radio';
680
+ /** Value in the surrounding `RadioGroup`. */
681
+ value: string;
682
+ }
683
+ interface QuestionCheckboxOptionProps extends OptionBase {
684
+ kind: 'checkbox';
685
+ checked?: boolean;
686
+ defaultChecked?: boolean;
687
+ onCheckedChange?: (checked: boolean) => void;
688
+ }
689
+ type QuestionOptionProps = QuestionRadioOptionProps | QuestionCheckboxOptionProps;
690
+ declare function QuestionOption(props: QuestionOptionProps): React.JSX.Element;
691
+ interface QuestionOtherOptionProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSubmit'> {
692
+ /** Called with the typed text when the confirm button (or Enter) is pressed. */
693
+ onSubmit?: (value: string) => void;
694
+ confirmLabel?: string;
695
+ }
696
+ declare const QuestionOtherOption: React.ForwardRefExoticComponent<QuestionOtherOptionProps & React.RefAttributes<HTMLInputElement>>;
697
+ interface QuestionOptionEditorProps {
698
+ label: string;
699
+ onLabelChange?: (label: string) => void;
700
+ /** Called by the trash button. */
701
+ onRemove?: () => void;
702
+ /** Called by the add (+) button. */
703
+ onAdd?: () => void;
704
+ className?: string;
705
+ }
706
+ declare function QuestionOptionEditor({ label, onLabelChange, onRemove, onAdd, className }: QuestionOptionEditorProps): React.JSX.Element;
707
+
708
+ interface RankItemData {
709
+ id: string;
710
+ label: React.ReactNode;
711
+ }
712
+ interface RankListProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onChange'> {
713
+ items: RankItemData[];
714
+ /** Called with the new order after a drag or a keyboard move. */
715
+ onItemsChange: (items: RankItemData[]) => void;
716
+ }
717
+ declare const RankList: React.ForwardRefExoticComponent<RankListProps & React.RefAttributes<HTMLOListElement>>;
718
+
719
+ interface RatingScaleProps extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroup.Root>, 'type' | 'value' | 'defaultValue' | 'onValueChange'> {
720
+ /** Number of points on the scale. */
721
+ max?: number;
722
+ /** Selected rating (1-based), or `undefined` for none. */
723
+ value?: number;
724
+ defaultValue?: number;
725
+ onValueChange?: (value: number | undefined) => void;
726
+ /** Caption under the first point (e.g. "Not likely"). */
727
+ lowLabel?: React.ReactNode;
728
+ /** Caption under the last point (e.g. "Very likely"). */
729
+ highLabel?: React.ReactNode;
730
+ }
731
+ declare const RatingScale: React.ForwardRefExoticComponent<RatingScaleProps & React.RefAttributes<HTMLDivElement>>;
732
+
733
+ interface ProgressProps extends React.ComponentPropsWithoutRef<typeof Progress$1.Root> {
734
+ /** Heading shown above the track, left-aligned (e.g. "Project Progress"). */
735
+ label?: React.ReactNode;
736
+ /** Right-aligned value above the track. Pass `true` to render `value%`. */
737
+ valueLabel?: React.ReactNode | true;
738
+ /** Left caption below the track (e.g. "16 of 25 tasks completed"). */
739
+ detailsStart?: React.ReactNode;
740
+ /** Right caption below the track (e.g. "Est. 3 days remaining"). */
741
+ detailsEnd?: React.ReactNode;
742
+ }
743
+ declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
744
+
745
+ interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
746
+ /** Alternate row backgrounds (Figma: Stripe = Yes). */
747
+ striped?: boolean;
748
+ /** Class names for the bordered, rounded scroll container around the `<table>`. */
749
+ containerClassName?: string;
750
+ }
751
+ declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
752
+ declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
753
+ declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
754
+ interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
755
+ /** Highlights the row and marks it with the accent edge (Figma: State = Selected). */
756
+ selected?: boolean;
757
+ }
758
+ declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
759
+ type Align = 'left' | 'right';
760
+ interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
761
+ align?: Align;
762
+ /** Render the label as a sort button. Provide `sort` and `onSort`. */
763
+ sortable?: boolean;
764
+ sort?: 'none' | 'asc' | 'desc';
765
+ onSort?: () => void;
766
+ /** Narrow centred column for a select-all checkbox. */
767
+ checkbox?: boolean;
768
+ }
769
+ declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
770
+ interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
771
+ align?: Align;
772
+ /** Secondary text colour (Figma: Type = Muted). */
773
+ muted?: boolean;
774
+ /** Narrow centred cell for a checkbox or radio. */
775
+ checkbox?: boolean;
776
+ /** Right-aligned cell for row actions; lays its children out in a row with 4px gaps. */
777
+ actions?: boolean;
778
+ }
779
+ declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
780
+ interface TableCellTwoLinesProps extends React.HTMLAttributes<HTMLDivElement> {
781
+ primary: React.ReactNode;
782
+ secondary?: React.ReactNode;
783
+ /** Leading avatar / image (Figma: Two Lines Avatar). */
784
+ avatar?: React.ReactNode;
785
+ }
786
+ /** Primary + support text stack for a `TableCell` (Figma: Type = Two Lines / Option). Set the row/cell height to `h-14`. */
787
+ declare function TableCellTwoLines({ primary, secondary, avatar, className, ...props }: TableCellTwoLinesProps): React.JSX.Element;
788
+
789
+ declare const statCardVariants: (props?: ({
790
+ variant?: "default" | "warning" | null | undefined;
791
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
792
+ interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof statCardVariants> {
793
+ label: React.ReactNode;
794
+ value: React.ReactNode;
795
+ /** Leading icon beside the value (24px). */
796
+ icon?: React.ReactNode;
797
+ }
798
+ declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
799
+
800
+ interface ActivityStat extends Pick<StatCardProps, 'label' | 'value' | 'icon' | 'variant'> {
801
+ id: string;
802
+ }
803
+ interface ActivitySection {
804
+ id: string;
805
+ heading: React.ReactNode;
806
+ body: React.ReactNode;
807
+ /** Removable tags shown under the body. */
808
+ tags?: string[];
809
+ }
810
+ interface ActivityStructureProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
811
+ title?: React.ReactNode;
812
+ /** Stat tiles, laid out in a two-column grid. */
813
+ stats: ActivityStat[];
814
+ /** Text sections (e.g. Research Goal, Target Audience), optionally with tags. */
815
+ sections?: ActivitySection[];
816
+ /** Called with `(sectionId, tag)` when a tag's remove button is pressed. Omit for read-only tags. */
817
+ onRemoveTag?: (sectionId: string, tag: string) => void;
818
+ /** Called with the section id by the dashed "Add tag" chip. Omit to hide it. */
819
+ onAddTag?: (sectionId: string) => void;
820
+ addTagLabel?: string;
821
+ }
822
+ declare const ActivityStructure: React.ForwardRefExoticComponent<ActivityStructureProps & React.RefAttributes<HTMLElement>>;
823
+
824
+ declare const tagVariants: (props?: ({
825
+ variant?: "default" | "destructive" | "success" | "warning" | "neutral" | null | undefined;
826
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
827
+ interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
828
+ }
829
+ /** Read-only label for system states (Live Interview, Self-paced, AI Interview). */
830
+ declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
831
+ declare const statusDotVariants: (props?: ({
832
+ status?: "active" | "inactive" | "error" | "pending" | null | undefined;
833
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
834
+ interface StatusTagProps extends React.HTMLAttributes<HTMLSpanElement>, Required<Pick<VariantProps<typeof statusDotVariants>, 'status'>> {
835
+ }
836
+ /** White tag with a coloured status dot (Active / Inactive / Pending / Error). */
837
+ declare const StatusTag: React.ForwardRefExoticComponent<StatusTagProps & React.RefAttributes<HTMLSpanElement>>;
838
+
839
+ interface EditableTagProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
840
+ /** `default` is the highlighted (primary) value, `editable` is removable, `add` adds a value, `multiple` is the "+N more" overflow chip. */
841
+ type?: 'default' | 'editable' | 'add' | 'multiple';
842
+ /** Leading icon. `default` shows a crown unless you pass `null`. */
843
+ icon?: React.ReactNode;
844
+ /** Renders a remove button on `editable`/`default` tags. */
845
+ onRemove?: () => void;
846
+ /** Click handler for `add` and `multiple` (rendered as a button when set). */
847
+ onClick?: React.MouseEventHandler<HTMLButtonElement>;
848
+ children: React.ReactNode;
849
+ }
850
+ declare const EditableTag: React.ForwardRefExoticComponent<EditableTagProps & React.RefAttributes<HTMLElement>>;
851
+
852
+ interface RoleTagProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
853
+ type?: 'primary' | 'secondary' | 'question' | 'interactable';
854
+ /** Pressed state for `interactable` tags. */
855
+ selected?: boolean;
856
+ onClick?: React.MouseEventHandler<HTMLButtonElement>;
857
+ children: React.ReactNode;
858
+ }
859
+ declare const RoleTag: React.ForwardRefExoticComponent<RoleTagProps & React.RefAttributes<HTMLElement>>;
860
+
861
+ type PaginationItemValue = number | 'ellipsis';
862
+ /** 1-based page list with ellipses, e.g. `[1, 2, 'ellipsis', 5]`. Keeps first, last and the current page ± `siblings`. */
863
+ declare function getPaginationItems(page: number, pageCount: number, siblings?: number): PaginationItemValue[];
864
+ interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
865
+ /** Current page, 1-based. */
866
+ page: number;
867
+ pageCount: number;
868
+ onPageChange: (page: number) => void;
869
+ /** `full` lists page numbers; `compact` shows `1/5` between the arrows. */
870
+ variant?: 'full' | 'compact';
871
+ /** How many pages to show either side of the current one (full variant). */
872
+ siblings?: number;
873
+ }
874
+ declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
875
+
876
+ export { AIMiniAvatar, type AIMiniAvatarProps, AIResponseContainer, type AIResponseContainerProps, type AIStatus, type ActivitySection, type ActivityStat, ActivityStructure, type ActivityStructureProps, AskAiInput, type AskAiInputProps, AskAiToggle, type AskAiToggleProps, Button, type ButtonProps, Calendar, type CalendarProps, ChatChoices, type ChatChoicesProps, ChatInput, type ChatInputProps, ChatOption, type ChatOptionActionProps, type ChatOptionCheckboxProps, type ChatOptionProps, type ChatOptionRadioProps, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuSelectableItemProps, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditableTag, type EditableTagProps, Field, type FieldControlProps, type FieldProps, type FieldStatus, FileAttachment, type FileAttachmentProps, FileUploadItem, type FileUploadItemProps, FileUploadZone, type FileUploadZoneProps, Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, FormItem, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, ImagePreview, type ImagePreviewProps, ImageThumbnails, type ImageThumbnailsProps, Input, type InputProps, InputWithAction, type InputWithActionProps, Label, type LabelProps, MediaInfo, type MediaInfoProps, NumberInput, type NumberInputProps, OpenEndAnswer, type OpenEndAnswerProps, Pagination, type PaginationItemValue, type PaginationProps, Progress, type ProgressProps, ProjectSelector, type ProjectSelectorProps, QuestionCard, type QuestionCheckboxOptionProps, QuestionEditorCard, type QuestionEditorCardProps, QuestionHeader, type QuestionHeaderProps, QuestionNavItem, type QuestionNavItemProps, QuestionOption, QuestionOptionEditor, type QuestionOptionEditorProps, type QuestionOptionProps, QuestionOtherOption, type QuestionOtherOptionProps, type QuestionRadioOptionProps, type QuestionType, QuestionTypeIcon, type QuestionTypeIconProps, RadioGroup, RadioGroupFieldItem, type RadioGroupFieldItemProps, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RankItemData, RankList, type RankListProps, RatingScale, type RatingScaleProps, RoleTag, type RoleTagProps, SearchBar, type SearchBarProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectTrigger, type SelectTriggerProps, SelectValue, Slider, type SliderProps, StatCard, type StatCardProps, StatusTag, type StatusTagProps, Switch, type SwitchProps, TabItem, type TabItemProps, TabNavigation, TabNavigationContext, type TabNavigationProps, type TabNavigationVariant, Table, TableBody, TableCell, type TableCellProps, TableCellTwoLines, type TableCellTwoLinesProps, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, Tag, type TagProps, Textarea, type TextareaProps, TimeItem, type TimeItemProps, TimePicker, type TimePickerProps, type TimeValue, Timestamp, type TimestampProps, Toast, ToastAction, ToastInline, type ToastInlineProps, type ToastProps, ToastProvider, type ToastVariant, ToastViewport, Toggle, type ToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, TopicActivityRow, type TopicActivityRowProps, TopicCard, TopicCardMetaItem, type TopicCardMetaItemProps, type TopicCardProps, TopicCardTag, UserMessageBubble, type UserMessageBubbleProps, VideoPlayer, type VideoPlayerProps, VolumeControl, type VolumeControlProps, fieldSurfaceClasses, formatDateTime, getPaginationItems, useFormField };