@opencxh/ui-kit 3.175.1 → 3.176.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.
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5137 -5070
- package/dist/index.js.map +1 -1
- package/dist/src/action/Button.d.ts +3 -3
- package/dist/src/action/ButtonGroup.d.ts +2 -2
- package/dist/src/action/Link.d.ts +3 -3
- package/dist/src/action/SplitButton.d.ts +10 -10
- package/dist/src/content/ArtifactView.d.ts +1 -1
- package/dist/src/content/Avatar.d.ts +7 -15
- package/dist/src/content/ChannelBadge.d.ts +1 -1
- package/dist/src/content/Icon.d.ts +3 -3
- package/dist/src/content/Image.d.ts +3 -3
- package/dist/src/content/MessageBubble.d.ts +4 -13
- package/dist/src/content/Page.d.ts +8 -28
- package/dist/src/content/PageHeader.d.ts +0 -19
- package/dist/src/content/PageToolbar.d.ts +0 -2
- package/dist/src/content/RichText.d.ts +5 -8
- package/dist/src/content/SectionDivider.d.ts +1 -1
- package/dist/src/content/SettingsPage.d.ts +6 -10
- package/dist/src/content/activity/ActivityRow.d.ts +82 -0
- package/dist/src/content/activity/TimelineEvent.d.ts +22 -0
- package/dist/src/content/tableColumns.d.ts +6 -8
- package/dist/src/federated-resource/index.d.ts +5 -7
- package/dist/src/feedback/Badge.d.ts +4 -41
- package/dist/src/feedback/EmptyState.d.ts +1 -11
- package/dist/src/feedback/Kbd.d.ts +1 -8
- package/dist/src/feedback/ProgressBar.d.ts +0 -6
- package/dist/src/feedback/Spinner.d.ts +4 -26
- package/dist/src/feedback/StatusDot.d.ts +1 -12
- package/dist/src/feedback/StepIndicator.d.ts +1 -9
- package/dist/src/forms/Form.d.ts +25 -41
- package/dist/src/index.d.ts +51 -49
- package/dist/src/input/Checkbox.d.ts +5 -32
- package/dist/src/input/DatePicker.d.ts +2 -15
- package/dist/src/input/SearchField.d.ts +0 -5
- package/dist/src/input/SearchableTextField.d.ts +3 -4
- package/dist/src/input/Select.d.ts +2 -2
- package/dist/src/input/StorageInput.d.ts +1 -1
- package/dist/src/input/TextArea.d.ts +4 -29
- package/dist/src/input/TextField.d.ts +5 -42
- package/dist/src/meeting/MeetingGrid.d.ts +20 -19
- package/dist/src/meeting/ParticipantTile.d.ts +5 -9
- package/dist/src/meeting/VideoSurface.d.ts +1 -1
- package/dist/src/navigation/Sidebar.d.ts +15 -19
- package/dist/src/navigation/Tabs.d.ts +2 -2
- package/dist/src/overlays/ConfirmDialog.d.ts +0 -13
- package/dist/src/overlays/Dropdown.d.ts +1 -19
- package/dist/src/overlays/Modal.d.ts +4 -68
- package/dist/src/overlays/Popover.d.ts +0 -2
- package/dist/src/primitives/Box.d.ts +7 -7
- package/dist/src/typography/Heading.d.ts +4 -4
- package/dist/src/typography/Text.d.ts +7 -7
- package/package.json +3 -7
|
@@ -10,11 +10,5 @@ export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
10
10
|
/**
|
|
11
11
|
* Slim determinate progress bar (focus queue progress, subtask completion).
|
|
12
12
|
* Token-driven and mode-aware.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```tsx
|
|
16
|
-
* <ProgressBar value={40} />
|
|
17
|
-
* <ProgressBar value={3 / 7 * 100} variant="success" size="sm" />
|
|
18
|
-
* ```
|
|
19
13
|
*/
|
|
20
14
|
export declare function ProgressBar({ value, variant, size, className, ...props }: ProgressBarProps): React.JSX.Element;
|
|
@@ -1,32 +1,10 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
-
/**
|
|
8
|
-
* The color variant of the spinner
|
|
9
|
-
*/
|
|
10
|
-
variant?: 'primary' | 'secondary' | 'white' | 'current';
|
|
11
|
-
/**
|
|
12
|
-
* Optional label for accessibility
|
|
13
|
-
*/
|
|
3
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
4
|
+
variant?: "primary" | "secondary" | "white" | "current";
|
|
5
|
+
/** Accessible label; rendered visually only with `showLabel`. */
|
|
14
6
|
label?: string;
|
|
15
|
-
/**
|
|
16
|
-
* Whether to show the spinner with a label
|
|
17
|
-
*/
|
|
18
7
|
showLabel?: boolean;
|
|
19
8
|
}
|
|
20
|
-
/**
|
|
21
|
-
* Spinner component for loading states
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* ```tsx
|
|
25
|
-
* <Spinner size="md" variant="primary" />
|
|
26
|
-
*
|
|
27
|
-
* <Spinner size="lg" variant="primary" showLabel label="Loading..." />
|
|
28
|
-
*
|
|
29
|
-
* <Spinner size="sm" variant="white" />
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
9
|
+
/** Spinner for loading states. */
|
|
32
10
|
export declare function Spinner({ size, variant, label, showLabel, className, ...props }: SpinnerProps): React.JSX.Element;
|
|
@@ -18,16 +18,5 @@ export interface StatusDotProps {
|
|
|
18
18
|
label?: string;
|
|
19
19
|
className?: string;
|
|
20
20
|
}
|
|
21
|
-
/**
|
|
22
|
-
* Small state marker: presence, session state, unread, live recording.
|
|
23
|
-
*
|
|
24
|
-
* Replaces a scatter of hand-rolled `h-2 w-2 rounded-full bg-green-500` spans
|
|
25
|
-
* that used raw palette colours and disagreed on size (8px vs 10px).
|
|
26
|
-
*
|
|
27
|
-
* @example
|
|
28
|
-
* ```tsx
|
|
29
|
-
* <StatusDot tone="success" label="Online" />
|
|
30
|
-
* <StatusDot tone="danger" pulse label="Opname loopt" />
|
|
31
|
-
* ```
|
|
32
|
-
*/
|
|
21
|
+
/** Small state marker: presence, session state, unread, live recording. */
|
|
33
22
|
export declare function StatusDot({ tone, shape, pulse, label, className, }: StatusDotProps): React.JSX.Element;
|
|
@@ -17,13 +17,5 @@ export interface StepIndicatorProps {
|
|
|
17
17
|
label?: string;
|
|
18
18
|
className?: string;
|
|
19
19
|
}
|
|
20
|
-
/**
|
|
21
|
-
* Progress through a short, linear flow.
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* ```tsx
|
|
25
|
-
* <StepIndicator steps={["provider", "channel", "owner"]} current={step} />
|
|
26
|
-
* <StepIndicator steps={["intent", "channel", "address"]} current={step} variant="dots" />
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
20
|
+
/** Progress through a short, linear flow. */
|
|
29
21
|
export declare function StepIndicator({ steps, current, variant, label, className, }: StepIndicatorProps): React.JSX.Element;
|
package/dist/src/forms/Form.d.ts
CHANGED
|
@@ -3,41 +3,30 @@ import { default as React } from 'react';
|
|
|
3
3
|
export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "color" | "textarea" | "select" | "segmented" | "checkbox" | "radio" | "date" | "file" | "folder" | "custom" | "array";
|
|
4
4
|
/**
|
|
5
5
|
* `NonNullable` before the `object` test is load-bearing: form data is routinely
|
|
6
|
-
* a `Partial<T>`,
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* the kind of size at which TypeScript gives up (see {@link FieldPath}).
|
|
13
|
-
*
|
|
14
|
-
* `T extends unknown ?` makes this distribute over unions. Without it a
|
|
15
|
-
* discriminated union like `OwnerScope` only contributes the keys its members
|
|
16
|
-
* share (`keyof (A | B)` is an intersection), so `ownerScope.teamId` is
|
|
17
|
-
* unspellable even though a `kind: "team"` conditional field needs exactly that.
|
|
6
|
+
* a `Partial<T>`, and `Address | undefined extends object` is false — without it
|
|
7
|
+
* every nested path silently disappears and only top-level keys survive.
|
|
8
|
+
* Arrays, Dates and functions are leaves; recursing into them blows the union
|
|
9
|
+
* past what TypeScript will infer (see {@link FieldPath}).
|
|
10
|
+
* `T extends unknown ?` distributes over unions: `keyof (A | B)` keeps only
|
|
11
|
+
* shared keys, so `ownerScope.teamId` would otherwise be unspellable.
|
|
18
12
|
*/
|
|
19
13
|
type NestedKeys<T> = T extends unknown ? {
|
|
20
14
|
[K in keyof T]-?: NonNullable<T[K]> extends readonly unknown[] | Date | ((...args: never[]) => unknown) ? K & string : NonNullable<T[K]> extends object ? `${K & string}.${NestedKeys<NonNullable<T[K]>>}` : K & string;
|
|
21
15
|
}[keyof T] : never;
|
|
22
16
|
/**
|
|
23
|
-
* What a field may be named: any leaf path, plus any top-level key.
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* separate union rather than folded into `NestedKeys` itself: doing it inside
|
|
29
|
-
* the recursion doubles the union at every level, and TypeScript quietly gives
|
|
30
|
-
* up on inferring `group.items` once it gets large enough.
|
|
17
|
+
* What a field may be named: any leaf path, plus any top-level key. The second
|
|
18
|
+
* half exists for `type: "custom"` fields, which own a whole sub-object and
|
|
19
|
+
* would otherwise be unspellable, since `NestedKeys` only reaches leaves. Kept
|
|
20
|
+
* as a separate union: folding it into the recursion doubles the union at every
|
|
21
|
+
* level, and TypeScript quietly gives up inferring it once it gets large.
|
|
31
22
|
*/
|
|
32
23
|
type FieldPath<T> = NestedKeys<T> | (keyof T & string);
|
|
33
24
|
/**
|
|
34
25
|
* One band of a page-wide form: a fixed label column with the section title and
|
|
35
|
-
* its explanation, and the fields beside it.
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
* above it. Without this those sections each re-derive the column width and the
|
|
40
|
-
* spacing, and they drift.
|
|
26
|
+
* its explanation, and the fields beside it. Exported because a page often has
|
|
27
|
+
* a section that is not a `Form` field at all — a checklist, linked records —
|
|
28
|
+
* that must line up with the bands above it; without this each re-derives the
|
|
29
|
+
* column width and spacing, and they drift.
|
|
41
30
|
*/
|
|
42
31
|
export declare function FormSection({ title, description, className, children, }: {
|
|
43
32
|
title?: string;
|
|
@@ -60,9 +49,8 @@ export interface FormGroupItem<T = any> {
|
|
|
60
49
|
/** Placeholder text */
|
|
61
50
|
placeholder?: string;
|
|
62
51
|
/**
|
|
63
|
-
* Visible rows for `textarea`. Defaults to 4
|
|
64
|
-
*
|
|
65
|
-
* back while editing (a system prompt).
|
|
52
|
+
* Visible rows for `textarea`. Defaults to 4 — right for a note, far too small
|
|
53
|
+
* for a field someone reads back while editing (a system prompt).
|
|
66
54
|
*/
|
|
67
55
|
rows?: number;
|
|
68
56
|
/**
|
|
@@ -86,9 +74,9 @@ export interface FormGroupItem<T = any> {
|
|
|
86
74
|
/** Remove field from form data when empty */
|
|
87
75
|
removeIfEmpty?: boolean;
|
|
88
76
|
/**
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
77
|
+
* Explanation under the field: why it exists, or what the choice implies. For
|
|
78
|
+
* fields whose label cannot fully pose the question — a group `description` is
|
|
79
|
+
* too coarse once a group has several fields.
|
|
92
80
|
*/
|
|
93
81
|
help?: string;
|
|
94
82
|
/** Whether field is hidden */
|
|
@@ -119,8 +107,7 @@ export interface FormGroup<T = any> {
|
|
|
119
107
|
id: string;
|
|
120
108
|
/**
|
|
121
109
|
* Group title. Optional: a form that is one unbroken block of fields has no
|
|
122
|
-
* heading to give, and the label column already renders empty
|
|
123
|
-
* absent — the type was simply stricter than the component.
|
|
110
|
+
* heading to give, and the label column already renders empty without it.
|
|
124
111
|
*/
|
|
125
112
|
title?: string;
|
|
126
113
|
/** Group description */
|
|
@@ -192,15 +179,12 @@ export interface FormProps<T = Record<string, any>> {
|
|
|
192
179
|
* cast at the call site.
|
|
193
180
|
*/
|
|
194
181
|
ref?: React.RefObject<HTMLFormElement | null>;
|
|
195
|
-
/** SDK instance */
|
|
196
182
|
/**
|
|
197
183
|
* A handle that can call the server, for the storage fields (`storage`, `folder`).
|
|
198
|
-
*
|
|
199
|
-
*
|
|
200
|
-
*
|
|
201
|
-
*
|
|
202
|
-
* for what it uses also keeps the storage fields' eventual move out of here (they are
|
|
203
|
-
* slated to become a federated resource) from being blocked by a type import.
|
|
184
|
+
* Typed as the one method used rather than the whole `InternalSDK`: that type lives
|
|
185
|
+
* in `@opencxh/app-sdk`, which ui-kit does not (and should not) depend on to render
|
|
186
|
+
* a form. It also keeps the storage fields' slated move to a federated resource
|
|
187
|
+
* from being blocked by a type import.
|
|
204
188
|
*/
|
|
205
189
|
sdk?: FormInvoker;
|
|
206
190
|
}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,72 +1,74 @@
|
|
|
1
|
-
export { cn, createSizes, createVariants } from './utils/cn';
|
|
2
|
-
export { useAnchoredPosition, type AnchoredPositionOptions } from './utils/useAnchoredPosition';
|
|
3
|
-
export { IDENTITY_TONE_COUNT, identityDotClass, identityPlateClass, identityTone, type IdentityTone } from './utils/identity';
|
|
4
|
-
export { catTone, type CatTone } from './utils/catTone';
|
|
5
|
-
export { normalizeText, text } from './utils/text';
|
|
6
|
-
export { MeetingGrid, type MeetingGridProps } from './meeting/MeetingGrid';
|
|
7
|
-
export { ParticipantTile, type ParticipantTileProps } from './meeting/ParticipantTile';
|
|
8
|
-
export { VideoSurface, type VideoSurfaceProps } from './meeting/VideoSurface';
|
|
9
1
|
export { Button, type ButtonProps } from './action/Button';
|
|
10
2
|
export { ButtonGroup, type ButtonGroupProps } from './action/ButtonGroup';
|
|
11
3
|
export { FilterChip, type FilterChipProps } from './action/FilterChip';
|
|
12
4
|
export { Link, type LinkProps } from './action/Link';
|
|
13
|
-
export {
|
|
5
|
+
export { type SegmentedOption, SegmentedToggle, type SegmentedToggleProps, } from './action/SegmentedToggle';
|
|
14
6
|
export { SplitButton, type SplitButtonOption, type SplitButtonProps } from './action/SplitButton';
|
|
15
|
-
export
|
|
16
|
-
export { ImageField, type ImageFieldProps } from './input/ImageField';
|
|
17
|
-
export { DatePicker, type DatePickerProps } from './input/DatePicker';
|
|
18
|
-
export { FolderSelect, type FolderDestination, type FolderSelectProps } from './input/FolderSelect';
|
|
19
|
-
export { SearchableTextField, type SearchableTextFieldProps } from './input/SearchableTextField';
|
|
20
|
-
export { SearchField, type SearchFieldProps } from './input/SearchField';
|
|
21
|
-
export { Select, type SelectOption, type SelectProps } from './input/Select';
|
|
22
|
-
export { Switch, type SwitchProps } from './input/Switch';
|
|
23
|
-
export { StorageInput, type StorageInputProps } from './input/StorageInput';
|
|
24
|
-
export { TextArea, type TextAreaProps } from './input/TextArea';
|
|
25
|
-
export { TextField, type TextFieldProps } from './input/TextField';
|
|
26
|
-
export { Form, FormSection, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormInvoker, type FormProps } from './forms/Form';
|
|
27
|
-
export { autofillProps, type AutofillProps } from './forms/autofill';
|
|
28
|
-
export { Dropdown, type DropdownOption, type DropdownProps } from './overlays/Dropdown';
|
|
29
|
-
export { ConfirmDialog, type ConfirmDialogProps } from './overlays/ConfirmDialog';
|
|
30
|
-
export { Modal, type ModalProps } from './overlays/Modal';
|
|
31
|
-
export { Popover, type PopoverProps } from './overlays/Popover';
|
|
32
|
-
export { Badge, type BadgeProps } from './feedback/Badge';
|
|
33
|
-
export { ContentLoading, type ContentLoadingProps, type ContentLoadingShape } from './feedback/ContentLoading';
|
|
34
|
-
export { EmptyState, type EmptyStateProps } from './feedback/EmptyState';
|
|
35
|
-
export { Kbd, type KbdProps } from './feedback/Kbd';
|
|
36
|
-
export { ProgressBar, type ProgressBarProps } from './feedback/ProgressBar';
|
|
37
|
-
export { Spinner, type SpinnerProps } from './feedback/Spinner';
|
|
38
|
-
export { StatusDot, type StatusDotProps } from './feedback/StatusDot';
|
|
39
|
-
export { StepIndicator, type StepIndicatorProps } from './feedback/StepIndicator';
|
|
7
|
+
export * from './command-palette';
|
|
40
8
|
export { ArtifactView, type ArtifactViewProps } from './content/ArtifactView';
|
|
41
9
|
export { AssistantCard, type AssistantCardProps } from './content/AssistantCard';
|
|
42
10
|
export { Avatar, type AvatarProps, type AvatarTone } from './content/Avatar';
|
|
43
11
|
export { AvatarStack, type AvatarStackPerson, type AvatarStackProps } from './content/AvatarStack';
|
|
12
|
+
export { ActivityAvatar, ActivityGlyph, ActivityRow, type ActivityRowProps, type ActivityTone, cardActionClass, RowCard, } from './content/activity/ActivityRow';
|
|
13
|
+
export { TimelineEvent, type TimelineEventProps } from './content/activity/TimelineEvent';
|
|
44
14
|
export { ChannelBadge, type ChannelBadgeProps, type ChannelKey } from './content/ChannelBadge';
|
|
45
|
-
export { Icon,
|
|
15
|
+
export { Icon, type IconProps, resolveLucideIcon } from './content/Icon';
|
|
46
16
|
export { Image, type ImageProps } from './content/Image';
|
|
17
|
+
export { KpiCard, type KpiCardProps } from './content/KpiCard';
|
|
47
18
|
export { List, ListBulkAction, type ListGroup, type ListProps } from './content/List';
|
|
48
19
|
export { MessageBubble, type MessageBubbleProps } from './content/MessageBubble';
|
|
49
|
-
export { KpiCard, type KpiCardProps } from './content/KpiCard';
|
|
50
20
|
export { MetaSeparator, MetaValue, type MetaValueProps } from './content/MetaValue';
|
|
51
21
|
export { Page, type PageProps } from './content/Page';
|
|
52
|
-
export { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
|
|
53
|
-
export { PageToolbar, PageToolbarActions, type PageToolbarActionsProps, type PageToolbarProps } from './content/PageToolbar';
|
|
22
|
+
export { PageHeader, type PageHeaderAction, type PageHeaderProps, } from './content/PageHeader';
|
|
23
|
+
export { PageToolbar, PageToolbarActions, type PageToolbarActionsProps, type PageToolbarProps, } from './content/PageToolbar';
|
|
54
24
|
export { RichText, type RichTextProps } from './content/RichText';
|
|
55
25
|
export { SectionCaption, type SectionCaptionProps } from './content/SectionCaption';
|
|
56
26
|
export { SectionDivider, type SectionDividerProps } from './content/SectionDivider';
|
|
57
|
-
export {
|
|
58
|
-
export { SettingsRow,
|
|
27
|
+
export { type SettingsFrameApi, SettingsFrameProvider, SettingsPage, type SettingsPageProps, type SettingsTrailEntry, useSettingsFrame, useSettingsFrameHost, } from './content/SettingsPage';
|
|
28
|
+
export { SettingsRow, type SettingsRowProps, SettingsSection, type SettingsSectionProps, } from './content/SettingsRow';
|
|
59
29
|
export { SourceChip, type SourceChipProps } from './content/SourceChip';
|
|
60
|
-
export {
|
|
61
|
-
export {
|
|
30
|
+
export { dateFilterHandler, multiSelectFilterHandler, selectFilterHandler, Table, type TableAction, type TableColumn, type TableFilter, type TableProps, } from './content/Table';
|
|
31
|
+
export { type BadgeColumnConfig, type BooleanBadgeColumnConfig, badgeColumn, booleanBadgeColumn, type LabelsColumnConfig, labelsColumn, } from './content/tableColumns';
|
|
62
32
|
export { View, type ViewGroup, type ViewProps } from './content/View';
|
|
63
|
-
export {
|
|
64
|
-
export {
|
|
65
|
-
export {
|
|
66
|
-
export {
|
|
67
|
-
export
|
|
33
|
+
export { ErrorBoundary } from './error-boundary/index';
|
|
34
|
+
export { FederatedResource } from './federated-resource/index';
|
|
35
|
+
export { Badge, type BadgeProps } from './feedback/Badge';
|
|
36
|
+
export { ContentLoading, type ContentLoadingProps, type ContentLoadingShape, } from './feedback/ContentLoading';
|
|
37
|
+
export { EmptyState, type EmptyStateProps } from './feedback/EmptyState';
|
|
38
|
+
export { Kbd, type KbdProps } from './feedback/Kbd';
|
|
39
|
+
export { ProgressBar, type ProgressBarProps } from './feedback/ProgressBar';
|
|
40
|
+
export { Spinner, type SpinnerProps } from './feedback/Spinner';
|
|
41
|
+
export { StatusDot, type StatusDotProps } from './feedback/StatusDot';
|
|
42
|
+
export { StepIndicator, type StepIndicatorProps } from './feedback/StepIndicator';
|
|
43
|
+
export { type AutofillProps, autofillProps } from './forms/autofill';
|
|
44
|
+
export { Form, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormInvoker, type FormProps, FormSection, } from './forms/Form';
|
|
45
|
+
export { Checkbox, type CheckboxProps } from './input/Checkbox';
|
|
46
|
+
export { DatePicker, type DatePickerProps } from './input/DatePicker';
|
|
47
|
+
export { type FolderDestination, FolderSelect, type FolderSelectProps } from './input/FolderSelect';
|
|
48
|
+
export { ImageField, type ImageFieldProps } from './input/ImageField';
|
|
49
|
+
export { SearchableTextField, type SearchableTextFieldProps } from './input/SearchableTextField';
|
|
50
|
+
export { SearchField, type SearchFieldProps } from './input/SearchField';
|
|
51
|
+
export { Select, type SelectOption, type SelectProps } from './input/Select';
|
|
52
|
+
export { StorageInput, type StorageInputProps } from './input/StorageInput';
|
|
53
|
+
export { Switch, type SwitchProps } from './input/Switch';
|
|
54
|
+
export { TextArea, type TextAreaProps } from './input/TextArea';
|
|
55
|
+
export { TextField, type TextFieldProps } from './input/TextField';
|
|
56
|
+
export { MeetingGrid, type MeetingGridProps } from './meeting/MeetingGrid';
|
|
57
|
+
export { ParticipantTile, type ParticipantTileProps } from './meeting/ParticipantTile';
|
|
58
|
+
export { VideoSurface, type VideoSurfaceProps } from './meeting/VideoSurface';
|
|
59
|
+
export { type MenuItem, type MenuItemAction, SidebarMenu } from './navigation/Sidebar';
|
|
60
|
+
export { TabBar, type TabItem, Tabs, type TabsProps } from './navigation/Tabs';
|
|
61
|
+
export { ConfirmDialog, type ConfirmDialogProps } from './overlays/ConfirmDialog';
|
|
62
|
+
export { Dropdown, type DropdownOption, type DropdownProps, } from './overlays/Dropdown';
|
|
63
|
+
export { Modal, type ModalProps } from './overlays/Modal';
|
|
64
|
+
export { Popover, type PopoverProps } from './overlays/Popover';
|
|
68
65
|
export * from './primitives/Box';
|
|
69
66
|
export * from './primitives/Card';
|
|
67
|
+
export { Heading, type HeadingProps } from './typography/Heading';
|
|
70
68
|
export * from './typography/Text';
|
|
71
|
-
export {
|
|
72
|
-
export {
|
|
69
|
+
export { Text, type TextProps } from './typography/Text';
|
|
70
|
+
export { type CatTone, catTone } from './utils/catTone';
|
|
71
|
+
export { cn, createSizes, createVariants } from './utils/cn';
|
|
72
|
+
export { IDENTITY_TONE_COUNT, type IdentityTone, identityDotClass, identityPlateClass, identityTone, } from './utils/identity';
|
|
73
|
+
export { normalizeText, text } from './utils/text';
|
|
74
|
+
export { type AnchoredPositionOptions, useAnchoredPosition, } from './utils/useAnchoredPosition';
|
|
@@ -1,44 +1,17 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
3
|
-
/**
|
|
4
|
-
* The label for the checkbox
|
|
5
|
-
*/
|
|
2
|
+
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
6
3
|
label?: string;
|
|
7
|
-
/**
|
|
8
|
-
* Helper text to display below the checkbox
|
|
9
|
-
*/
|
|
10
4
|
helperText?: string;
|
|
11
|
-
/**
|
|
12
|
-
* Error message to display when the checkbox is invalid
|
|
13
|
-
*/
|
|
14
5
|
error?: string;
|
|
15
|
-
|
|
16
|
-
* The size of the checkbox
|
|
17
|
-
*/
|
|
18
|
-
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
19
|
-
/**
|
|
20
|
-
* Whether the checkbox is in an indeterminate state
|
|
21
|
-
*/
|
|
6
|
+
size?: "sm" | "md" | "lg" | "full";
|
|
22
7
|
indeterminate?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Additional class name for the container
|
|
25
|
-
*/
|
|
8
|
+
/** Additional class name for the container */
|
|
26
9
|
containerClassName?: string;
|
|
27
|
-
/**
|
|
28
|
-
* Additional class name for the label
|
|
29
|
-
*/
|
|
10
|
+
/** Additional class name for the label */
|
|
30
11
|
labelClassName?: string;
|
|
31
12
|
}
|
|
32
13
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* Uses the native input with `accent-color`, so the checked fill is the accent
|
|
14
|
+
* Native checkbox styled via `accent-color`: the checked fill is the accent
|
|
36
15
|
* token and dark mode needs no extra classes.
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* <Checkbox label="Voorwaarden accepteren" />
|
|
41
|
-
* <Checkbox label="Alles selecteren" indeterminate />
|
|
42
|
-
* ```
|
|
43
16
|
*/
|
|
44
17
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
export interface DatePickerProps {
|
|
2
|
-
/** Current date value */
|
|
3
2
|
value?: Date | null;
|
|
4
|
-
/** Change handler */
|
|
5
3
|
onChange?: (date: Date | null) => void;
|
|
6
|
-
/** Placeholder text */
|
|
7
4
|
placeholder?: string;
|
|
8
|
-
/** Whether the input is disabled */
|
|
9
5
|
disabled?: boolean;
|
|
10
|
-
/** Whether the input is required */
|
|
11
6
|
required?: boolean;
|
|
12
|
-
|
|
13
|
-
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
14
|
-
/** Additional CSS classes */
|
|
7
|
+
size?: "sm" | "md" | "lg" | "full";
|
|
15
8
|
className?: string;
|
|
16
|
-
/** Minimum selectable date */
|
|
17
9
|
minDate?: Date;
|
|
18
|
-
/** Maximum selectable date */
|
|
19
10
|
maxDate?: Date;
|
|
20
|
-
|
|
21
|
-
format?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd';
|
|
11
|
+
format?: "MM/dd/yyyy" | "dd/MM/yyyy" | "yyyy-MM-dd";
|
|
22
12
|
/**
|
|
23
13
|
* Also pick a time. The display gains `HH:mm`, the panel gains a time field,
|
|
24
14
|
* and choosing a day keeps the time already on the value instead of resetting
|
|
@@ -26,7 +16,4 @@ export interface DatePickerProps {
|
|
|
26
16
|
*/
|
|
27
17
|
withTime?: boolean;
|
|
28
18
|
}
|
|
29
|
-
/**
|
|
30
|
-
* DatePicker component with calendar popup
|
|
31
|
-
*/
|
|
32
19
|
export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
@@ -24,10 +24,5 @@ export interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
|
|
|
24
24
|
*
|
|
25
25
|
* Three places had grown their own copy of it (the nav search, the settings
|
|
26
26
|
* search, the table toolbar); they share this one now.
|
|
27
|
-
*
|
|
28
|
-
* @example
|
|
29
|
-
* ```tsx
|
|
30
|
-
* <SearchField value={query} onValueChange={setQuery} placeholder="Zoeken" hint="⌘K" />
|
|
31
|
-
* ```
|
|
32
27
|
*/
|
|
33
28
|
export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -18,10 +18,9 @@ export interface SearchableTextFieldProps extends Omit<React.InputHTMLAttributes
|
|
|
18
18
|
onSelect?: (value: string) => void;
|
|
19
19
|
debounceTime?: number;
|
|
20
20
|
/**
|
|
21
|
-
* Selector
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
* een vrije zoekopdracht (bv. een afzender-selector).
|
|
21
|
+
* Selector mode: on open (focus/chevron) show all options, even when the current
|
|
22
|
+
* value is an already-selected option; filter only once the user actually types.
|
|
23
|
+
* For fields that are more picker than free search (e.g. a sender selector).
|
|
25
24
|
*/
|
|
26
25
|
showAllOnOpen?: boolean;
|
|
27
26
|
}
|
|
@@ -24,9 +24,9 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
24
24
|
labelClassName?: string;
|
|
25
25
|
searchable?: boolean;
|
|
26
26
|
multiple?: boolean;
|
|
27
|
-
/**
|
|
27
|
+
/** Allow free-text entry (Enter, or clicking the create row). */
|
|
28
28
|
allowCreate?: boolean;
|
|
29
|
-
/**
|
|
29
|
+
/** Optionally shape the option created from free-text input. */
|
|
30
30
|
onCreateOption?: (label: string) => SelectOption;
|
|
31
31
|
}
|
|
32
32
|
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -29,7 +29,7 @@ export interface StorageInputProps {
|
|
|
29
29
|
data: FilePointer;
|
|
30
30
|
}> | undefined;
|
|
31
31
|
onDownloadFile?: (fileId: string) => Promise<Uint8Array> | undefined;
|
|
32
|
-
onRegisterFile?: (payload: Omit<FilePointer,
|
|
32
|
+
onRegisterFile?: (payload: Omit<FilePointer, "id">) => Promise<{
|
|
33
33
|
data: FilePointer;
|
|
34
34
|
}> | undefined;
|
|
35
35
|
}
|
|
@@ -1,39 +1,14 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,
|
|
3
|
-
/**
|
|
4
|
-
* The label for the textarea field
|
|
5
|
-
*/
|
|
2
|
+
export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
|
|
6
3
|
label?: string;
|
|
7
|
-
/**
|
|
8
|
-
* Helper text to display below the textarea
|
|
9
|
-
*/
|
|
10
4
|
helperText?: string;
|
|
11
|
-
/**
|
|
12
|
-
* Error message to display when the textarea is invalid
|
|
13
|
-
*/
|
|
14
5
|
error?: string;
|
|
15
|
-
|
|
16
|
-
* The size of the textarea field
|
|
17
|
-
*/
|
|
18
|
-
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
19
|
-
/**
|
|
20
|
-
* Whether the textarea should take the full width of its container
|
|
21
|
-
*/
|
|
6
|
+
size?: "sm" | "md" | "lg" | "full";
|
|
22
7
|
fullWidth?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Whether the textarea is in a loading state
|
|
25
|
-
*/
|
|
26
8
|
loading?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Additional class name for the container
|
|
29
|
-
*/
|
|
9
|
+
/** Additional class name for the container */
|
|
30
10
|
containerClassName?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Additional class name for the label
|
|
33
|
-
*/
|
|
11
|
+
/** Additional class name for the label */
|
|
34
12
|
labelClassName?: string;
|
|
35
13
|
}
|
|
36
|
-
/**
|
|
37
|
-
* TextArea component with theme integration and validation states
|
|
38
|
-
*/
|
|
39
14
|
export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -1,44 +1,16 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
3
|
-
/**
|
|
4
|
-
* The label for the input field
|
|
5
|
-
*/
|
|
2
|
+
export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
6
3
|
label?: string;
|
|
7
|
-
/**
|
|
8
|
-
* Helper text to display below the input
|
|
9
|
-
*/
|
|
10
4
|
helperText?: string;
|
|
11
|
-
/**
|
|
12
|
-
* Error message to display when the input is invalid
|
|
13
|
-
*/
|
|
14
5
|
error?: string;
|
|
15
|
-
|
|
16
|
-
* The size of the input field
|
|
17
|
-
*/
|
|
18
|
-
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
19
|
-
/**
|
|
20
|
-
* Whether the input should take the full width of its container
|
|
21
|
-
*/
|
|
6
|
+
size?: "sm" | "md" | "lg" | "full";
|
|
22
7
|
fullWidth?: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Icon to display at the start of the input
|
|
25
|
-
*/
|
|
26
8
|
startIcon?: React.ReactNode;
|
|
27
|
-
/**
|
|
28
|
-
* Icon to display at the end of the input
|
|
29
|
-
*/
|
|
30
9
|
endIcon?: React.ReactNode;
|
|
31
|
-
/**
|
|
32
|
-
* Whether the input is in a loading state
|
|
33
|
-
*/
|
|
34
10
|
loading?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* Additional class name for the container
|
|
37
|
-
*/
|
|
11
|
+
/** Additional class name for the container */
|
|
38
12
|
containerClassName?: string;
|
|
39
|
-
/**
|
|
40
|
-
* Additional class name for the label
|
|
41
|
-
*/
|
|
13
|
+
/** Additional class name for the label */
|
|
42
14
|
labelClassName?: string;
|
|
43
15
|
}
|
|
44
16
|
/**
|
|
@@ -58,14 +30,5 @@ export declare const fieldLabelClasses = "mb-1.5 block text-sm font-medium";
|
|
|
58
30
|
export declare const fieldFrameClasses: string;
|
|
59
31
|
/** Resting / error edge, shared so every control agrees on what "invalid" looks like. */
|
|
60
32
|
export declare const fieldEdgeClasses: (hasError: boolean) => "border-border-strong" | "border-danger-border bg-danger-soft";
|
|
61
|
-
/**
|
|
62
|
-
* TextField component with theme integration and validation states
|
|
63
|
-
*
|
|
64
|
-
* @example
|
|
65
|
-
* ```tsx
|
|
66
|
-
* <TextField label="E-mail" type="email" placeholder="naam@bedrijf.nl" />
|
|
67
|
-
* <TextField label="Zoeken" startIcon={<Icon icon={Search} />} />
|
|
68
|
-
* <TextField label="Wachtwoord" type="password" error="Verplicht veld" />
|
|
69
|
-
* ```
|
|
70
|
-
*/
|
|
33
|
+
/** Themed text input; shares its frame and label classes with TextArea, Select and DatePicker. */
|
|
71
34
|
export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -2,38 +2,39 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
export interface MeetingGridProps {
|
|
3
3
|
tiles: ReactNode[];
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
* 1-
|
|
5
|
+
* The tile that gets the main area — the dominant speaker, or the other
|
|
6
|
+
* party in a 1-on-1. The rest renders as a strip underneath.
|
|
7
7
|
*/
|
|
8
8
|
pinned?: ReactNode;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* Max strip tiles side by side; the overflow collapses into one `+N` tile.
|
|
11
|
+
* Without it a twelve-person meeting squeezes into a 448px dock as twelve
|
|
12
|
+
* unreadable slivers.
|
|
13
13
|
*/
|
|
14
14
|
maxStrip?: number;
|
|
15
15
|
className?: string;
|
|
16
16
|
}
|
|
17
17
|
export declare function columnsFor(count: number): string;
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
20
|
-
* dominant area and remaining tiles render in a strip underneath. Otherwise tiles
|
|
21
|
-
* flow in an auto-sized grid.
|
|
22
|
-
*
|
|
23
|
-
* **Het vlak bepaalt de tegels, niet andersom.** Elke cel is `min-w-0 min-h-0` en de rijen
|
|
24
|
-
* delen de hoogte (`auto-rows-fr`), zodat het raster past in de doos die het krijgt. Geef de
|
|
25
|
-
* tegels daarom `fill` mee: een tegel die zijn hoogte uit zijn eigen breedte haalt
|
|
26
|
-
* (`aspect-video`, de standaard) duwt het raster buiten zijn oevers zodra het vlak lager is
|
|
27
|
-
* dan die verhouding — precies wat er in de dock gebeurde.
|
|
28
|
-
*/
|
|
29
|
-
/**
|
|
30
|
-
* Hoeveel striptegels er getoond worden, en hoeveel er als `+N` overblijven.
|
|
19
|
+
* How many strip tiles to show, and how many collapse into `+N`.
|
|
31
20
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
21
|
+
* The counter takes a slot itself — otherwise it replaces one tile with the
|
|
22
|
+
* message that one tile is missing, which is no gain. With exactly enough
|
|
23
|
+
* room it stays away.
|
|
34
24
|
*/
|
|
35
25
|
export declare function splitStrip(count: number, maxStrip?: number): {
|
|
36
26
|
shown: number;
|
|
37
27
|
hidden: number;
|
|
38
28
|
};
|
|
29
|
+
/**
|
|
30
|
+
* Layout primitive for meeting views. When `pinned` is provided it gets the
|
|
31
|
+
* dominant area and remaining tiles render in a strip underneath; otherwise
|
|
32
|
+
* tiles flow in an auto-sized grid.
|
|
33
|
+
*
|
|
34
|
+
* The pane sizes the tiles, not the other way around: every cell is
|
|
35
|
+
* `min-w-0 min-h-0` and rows share the height (`auto-rows-fr`) so the grid
|
|
36
|
+
* fits the box it gets. Give tiles `fill`: a tile that takes its height from
|
|
37
|
+
* its own width (`aspect-video`, the default) pushes the grid out of bounds
|
|
38
|
+
* once the pane is shorter than that ratio.
|
|
39
|
+
*/
|
|
39
40
|
export declare function MeetingGrid({ tiles, pinned, maxStrip, className }: MeetingGridProps): import("react").JSX.Element;
|