@jirawatpyk/aura-react 4.4.2 → 4.5.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/README.md +8 -2
- package/dist/aura.bundle.js +65 -56
- package/dist/cjs/index.cjs +65 -56
- package/dist/esm/Combobox.js +2 -2
- package/dist/esm/DataTable.js +23 -16
- package/dist/esm/DatePicker.js +1 -1
- package/dist/esm/Dialog.js +1 -1
- package/dist/esm/DropdownMenu.js +1 -1
- package/dist/esm/feedback.js +2 -2
- package/dist/esm/layout.js +1 -1
- package/dist/esm/layout2.js +9 -7
- package/dist/esm/locale.js +2 -2
- package/dist/esm/overlay.js +1 -1
- package/dist/index.d.ts +915 -752
- package/package.json +9 -8
- package/scripts/aura-theme.mjs +1 -1
- package/src/theme.js +0 -147
package/dist/index.d.ts
CHANGED
|
@@ -1,825 +1,988 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
|
|
4
|
-
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
17
|
-
|
|
4
|
+
export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/** Visual variant. Default `primary`. */
|
|
6
|
+
variant?: "primary" | "secondary" | "creative";
|
|
7
|
+
/** Label text — short, Title Case English or Thai. */
|
|
8
|
+
children: React$1.ReactNode;
|
|
9
|
+
/** Leading icon name (see `IconName`). Hidden while loading. */
|
|
10
|
+
icon?: IconName;
|
|
11
|
+
/** Trailing icon name, e.g. `arrow-right` for forward actions. */
|
|
12
|
+
iconRight?: IconName;
|
|
13
|
+
/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
}
|
|
18
16
|
export interface DataTableColumn {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
export interface DataTableSort {
|
|
17
|
+
/** Key into each row object. */
|
|
18
|
+
key: string;
|
|
19
|
+
/** Header label (source style: UPPERCASE). */
|
|
20
|
+
label: string;
|
|
21
|
+
/** Fixed width in px; the last column usually takes the rest. */
|
|
22
|
+
width?: number;
|
|
23
|
+
/** Render the cell in the mono face (IDs). */
|
|
24
|
+
mono?: boolean;
|
|
25
|
+
/** Render the value as a StatusPill (tone picked from the word). */
|
|
26
|
+
pill?: boolean;
|
|
27
|
+
/** Override the tone for specific values, e.g. `{ 'QA': 'progress' }`. */
|
|
28
|
+
tones?: Record<string, StatusTone>;
|
|
29
|
+
/** Header becomes a button cycling asc → desc → unsorted. */
|
|
30
|
+
sortable?: boolean;
|
|
31
|
+
/** Value to sort by, when not the cell value (dates, amounts). */
|
|
32
|
+
sortValue?: (row: Record<string, any>) => string | number | null;
|
|
33
|
+
/** Custom cell content. */
|
|
34
|
+
render?: (row: Record<string, any>) => React$1.ReactNode;
|
|
35
|
+
/** Set false to keep a sized column fixed when the table is `resizable`. */
|
|
36
|
+
resizable?: boolean;
|
|
37
|
+
/** Resize limits in px. Defaults 64 / 480. For the flexible column, minWidth defaults to 160. */
|
|
38
|
+
minWidth?: number;
|
|
39
|
+
maxWidth?: number;
|
|
40
|
+
/** Start pinned to the left (needs a width). */
|
|
41
|
+
pinned?: boolean;
|
|
42
|
+
/** Start hidden (show it from the columns button). */
|
|
43
|
+
hidden?: boolean;
|
|
44
|
+
/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. */
|
|
45
|
+
hideBelow?: number | "sm" | "md" | "lg" | "xl";
|
|
46
|
+
/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
|
|
47
|
+
actions?: boolean;
|
|
48
|
+
}
|
|
49
|
+
export interface DataTableSort {
|
|
50
|
+
key: string;
|
|
51
|
+
dir: "asc" | "desc";
|
|
52
|
+
}
|
|
52
53
|
export interface DataTableEmpty {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
/** Default `inbox`; use `search` for "no matches". */
|
|
55
|
+
icon?: IconName;
|
|
56
|
+
/** Default "Nothing here yet". */
|
|
57
|
+
title?: string;
|
|
58
|
+
description?: string;
|
|
59
|
+
/** One action, usually a secondary Button. */
|
|
60
|
+
action?: React$1.ReactNode;
|
|
60
61
|
}
|
|
61
62
|
/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
|
|
62
63
|
export interface DataTableProps {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
export
|
|
120
|
-
|
|
121
|
-
export type IconName =
|
|
122
|
-
| 'check' | 'x' | 'plus' | 'minus' | 'search'
|
|
123
|
-
| 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right'
|
|
124
|
-
| 'arrow-right' | 'arrow-up-right' | 'arrow-up-down' | 'loader-circle'
|
|
125
|
-
| 'circle-alert' | 'circle-check' | 'info' | 'triangle-alert'
|
|
126
|
-
| 'settings' | 'user' | 'users' | 'filter' | 'ellipsis' | 'external-link'
|
|
127
|
-
| 'copy' | 'trash-2' | 'pencil' | 'download' | 'upload' | 'calendar'
|
|
128
|
-
| 'bell' | 'menu' | 'eye' | 'log-out'
|
|
129
|
-
| 'circle' | 'circle-dot-dashed' | 'ban' | 'arrow-up' | 'arrow-down' | 'inbox'
|
|
130
|
-
| 'pin' | 'pin-off' | 'eye-off' | 'columns-3' | 'arrow-left' | 'rotate-ccw'
|
|
131
|
-
| 'house' | 'layout-dashboard' | 'folder' | 'chart-column' | 'file-text' | 'mail' | 'lock'
|
|
132
|
-
| 'clock' | 'trending-up' | 'trending-down' | 'image' | 'paperclip' | 'cloud-upload' | 'file';
|
|
133
|
-
|
|
64
|
+
/** Defaults to ID · NAME · STATUS · OWNER (96 / 160 / 112 / auto px). */
|
|
65
|
+
columns?: DataTableColumn[];
|
|
66
|
+
rows: Array<Record<string, React$1.ReactNode>>;
|
|
67
|
+
/** Column key giving each row a unique React key. Default: the first column's key. */
|
|
68
|
+
rowKey?: string;
|
|
69
|
+
/** Accessible name for the table. */
|
|
70
|
+
label?: string;
|
|
71
|
+
/** Controlled sort; pair with onSortChange. */
|
|
72
|
+
sort?: DataTableSort | null;
|
|
73
|
+
/** Initial sort when uncontrolled. */
|
|
74
|
+
defaultSort?: DataTableSort | null;
|
|
75
|
+
onSortChange?: (sort: DataTableSort | null) => void;
|
|
76
|
+
/** Adds a checkbox column. */
|
|
77
|
+
selectable?: boolean;
|
|
78
|
+
/** Controlled selection (row keys); pair with onSelectionChange. */
|
|
79
|
+
selected?: Array<string | number>;
|
|
80
|
+
/** Initial selection when uncontrolled. */
|
|
81
|
+
defaultSelected?: Array<string | number>;
|
|
82
|
+
onSelectionChange?: (keys: Array<string | number>) => void;
|
|
83
|
+
/** Shown when rows is empty. */
|
|
84
|
+
empty?: DataTableEmpty;
|
|
85
|
+
/** Rows per page; omit for no pagination. */
|
|
86
|
+
pageSize?: number;
|
|
87
|
+
/** Controlled page (1-based); pair with onPageChange. */
|
|
88
|
+
page?: number;
|
|
89
|
+
/** Initial page when uncontrolled. Default 1. */
|
|
90
|
+
defaultPage?: number;
|
|
91
|
+
onPageChange?: (page: number) => void;
|
|
92
|
+
/** Adds drag/keyboard resize handles to every column that has a width. */
|
|
93
|
+
resizable?: boolean;
|
|
94
|
+
onColumnResize?: (key: string, width: number) => void;
|
|
95
|
+
/** Shows skeleton rows and disables sorting, select-all and paging. */
|
|
96
|
+
loading?: boolean;
|
|
97
|
+
/** Skeleton row count when there is no pageSize. Default 5. */
|
|
98
|
+
skeletonRows?: number;
|
|
99
|
+
/** Called on row click or Enter. */
|
|
100
|
+
onRowActivate?: (row: Record<string, any>) => void;
|
|
101
|
+
/** Fixed height in px: sticky header, and only the rows in view are rendered. */
|
|
102
|
+
height?: number;
|
|
103
|
+
/** Column menu on every header, drag-to-reorder, and the show/hide columns button. */
|
|
104
|
+
columnControls?: boolean;
|
|
105
|
+
/** Set false to keep column controls but turn off reordering. */
|
|
106
|
+
reorderable?: boolean;
|
|
107
|
+
/** Controlled column order (keys); pair with onColumnOrderChange. */
|
|
108
|
+
columnOrder?: string[];
|
|
109
|
+
onColumnOrderChange?: (keys: string[]) => void;
|
|
110
|
+
/** Controlled hidden columns (keys); pair with onHiddenColumnsChange. */
|
|
111
|
+
hiddenColumns?: string[];
|
|
112
|
+
onHiddenColumnsChange?: (keys: string[]) => void;
|
|
113
|
+
/** Controlled pinned columns (keys); pair with onPinnedColumnsChange. */
|
|
114
|
+
pinnedColumns?: string[];
|
|
115
|
+
onPinnedColumnsChange?: (keys: string[]) => void;
|
|
116
|
+
/** Container width in px below which rows render as stacked cards (phones). Try 640. Measured with ResizeObserver, so it follows the container, not the window. */
|
|
117
|
+
stackBelow?: number;
|
|
118
|
+
className?: string;
|
|
119
|
+
}
|
|
120
|
+
export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file";
|
|
134
121
|
/** Lucide stroke icon drawn inline in currentColor. */
|
|
135
122
|
export interface IconProps {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
|
|
146
|
-
/** Every icon name the bundle carries. */
|
|
147
|
-
export declare const iconNames: IconName[];
|
|
148
|
-
|
|
123
|
+
name: IconName;
|
|
124
|
+
/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
|
|
125
|
+
size?: "sm" | "md" | "lg" | number;
|
|
126
|
+
/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
|
|
127
|
+
label?: string;
|
|
128
|
+
/** Default 2 (Lucide's). */
|
|
129
|
+
strokeWidth?: number;
|
|
130
|
+
className?: string;
|
|
131
|
+
}
|
|
149
132
|
/** Creative surface with the AURA mesh and/or grain texture. Light in every theme; content in aura-on-texture. */
|
|
150
|
-
export interface SurfaceProps extends React.HTMLAttributes<HTMLElement> {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
133
|
+
export interface SurfaceProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
134
|
+
/** Default `mesh`. */
|
|
135
|
+
texture?: "mesh" | "grain" | "mesh-grain";
|
|
136
|
+
/** Element to render. Default `div`. */
|
|
137
|
+
as?: keyof React$1.JSX.IntrinsicElements;
|
|
138
|
+
children?: React$1.ReactNode;
|
|
156
139
|
}
|
|
157
140
|
/** Sets the language of built-in labels (pagination, close buttons, empty states…) and the default date display for everything inside. */
|
|
158
141
|
export interface AuraProviderProps {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
167
|
-
export
|
|
168
|
-
export declare function useAuraLocale(): { locale: 'th' | 'en' | null; calendar: 'buddhist' | 'gregory' | null; strings: Record<string, any> };
|
|
169
|
-
export declare const STRINGS: { en: Record<string, any>; th: Record<string, any> };
|
|
170
|
-
export declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLElement>>;
|
|
171
|
-
|
|
172
|
-
export type StatusTone = 'neutral' | 'progress' | 'ready' | 'blocked';
|
|
142
|
+
/** Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
|
|
143
|
+
locale?: "th" | "en";
|
|
144
|
+
/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. */
|
|
145
|
+
calendar?: "buddhist" | "gregory";
|
|
146
|
+
/** Override individual strings. */
|
|
147
|
+
strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
|
|
148
|
+
children?: React$1.ReactNode;
|
|
149
|
+
}
|
|
150
|
+
export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
|
|
173
151
|
/** Status pill: tone fill + icon + the status word. Tone comes from the word unless given. */
|
|
174
152
|
export interface StatusPillProps {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
153
|
+
/** The status word shown, e.g. "In Progress". */
|
|
154
|
+
children: React$1.ReactNode;
|
|
155
|
+
/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Blocked/Failed → blocked, anything else → neutral). */
|
|
156
|
+
tone?: StatusTone;
|
|
157
|
+
className?: string;
|
|
180
158
|
}
|
|
181
|
-
export declare const StatusPill: React.ForwardRefExoticComponent<StatusPillProps & React.RefAttributes<HTMLSpanElement>>;
|
|
182
|
-
/** The tone the pill would pick for a status word. */
|
|
183
|
-
export declare function statusTone(status: string): StatusTone;
|
|
184
|
-
|
|
185
159
|
/** 16px checkbox with 4px corners; ink when checked, a dash when indeterminate. */
|
|
186
|
-
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
}
|
|
202
|
-
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
203
|
-
|
|
160
|
+
export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "checked" | "defaultChecked"> {
|
|
161
|
+
/** Controlled state; pair with onChange. Or use defaultChecked. */
|
|
162
|
+
checked?: boolean;
|
|
163
|
+
defaultChecked?: boolean;
|
|
164
|
+
indeterminate?: boolean;
|
|
165
|
+
/** Accessible name for a bare box (tables). Not needed when children give a visible label. */
|
|
166
|
+
label?: string;
|
|
167
|
+
/** Visible label beside the box (form use). */
|
|
168
|
+
children?: React$1.ReactNode;
|
|
169
|
+
/** Second line under the visible label (needs an id to be linked). */
|
|
170
|
+
description?: React$1.ReactNode;
|
|
171
|
+
onChange?: (checked: boolean) => void;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
tabIndex?: number;
|
|
174
|
+
className?: string;
|
|
175
|
+
}
|
|
204
176
|
/** 32px round button holding one icon. */
|
|
205
|
-
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
}
|
|
212
|
-
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
213
|
-
|
|
177
|
+
export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
178
|
+
icon: IconName;
|
|
179
|
+
/** Accessible name and tooltip (required). */
|
|
180
|
+
label: string;
|
|
181
|
+
/** Icon size. Default `sm` (16). */
|
|
182
|
+
size?: "sm" | "md";
|
|
183
|
+
}
|
|
214
184
|
export interface MenuItem {
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
185
|
+
label?: string;
|
|
186
|
+
icon?: IconName;
|
|
187
|
+
/** Present = a checkable item (menuitemcheckbox). */
|
|
188
|
+
checked?: boolean;
|
|
189
|
+
disabled?: boolean;
|
|
190
|
+
/** Keep the menu open after choosing (checkbox lists). */
|
|
191
|
+
keepOpen?: boolean;
|
|
192
|
+
/** Short right-aligned hint, e.g. a shortcut. */
|
|
193
|
+
hint?: string;
|
|
194
|
+
/** A divider instead of an item. */
|
|
195
|
+
separator?: boolean;
|
|
196
|
+
onSelect?: () => void;
|
|
227
197
|
}
|
|
228
198
|
/** Popover list anchored to an element, rendered in a portal. */
|
|
229
199
|
export interface MenuProps {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
}
|
|
240
|
-
export
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
export interface SelectProps extends FieldProps, Omit<React.SelectHTMLAttributes<HTMLSelectElement>,
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
}
|
|
271
|
-
export
|
|
272
|
-
|
|
200
|
+
/** The element it opens from (usually the button that was clicked). */
|
|
201
|
+
anchor: HTMLElement;
|
|
202
|
+
items: MenuItem[];
|
|
203
|
+
/** Accessible name. */
|
|
204
|
+
label: string;
|
|
205
|
+
/** Called on choose, Escape, Tab or outside click. `restoreFocus` is true for keyboard closes. */
|
|
206
|
+
onClose: (restoreFocus: boolean) => void;
|
|
207
|
+
/** Focus the first item on open. Default true; turn off only for static demos. */
|
|
208
|
+
autoFocus?: boolean;
|
|
209
|
+
}
|
|
210
|
+
export interface FieldProps {
|
|
211
|
+
/** Visible label; also the accessible name. */
|
|
212
|
+
label: string;
|
|
213
|
+
/** Helper line under the field (caption, fg-secondary). */
|
|
214
|
+
hint?: React$1.ReactNode;
|
|
215
|
+
/** Replaces the hint, turns the edge fg-danger and sets aria-invalid. Write it as the fix. */
|
|
216
|
+
error?: React$1.ReactNode;
|
|
217
|
+
/** Adds a red asterisk and the native required attribute. */
|
|
218
|
+
required?: boolean;
|
|
219
|
+
/** Adds "(optional)" after the label. */
|
|
220
|
+
optional?: boolean;
|
|
221
|
+
}
|
|
222
|
+
export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
|
|
223
|
+
/** Leading icon inside the field. */
|
|
224
|
+
icon?: IconName;
|
|
225
|
+
/** Trailing unit, e.g. "THB". */
|
|
226
|
+
suffix?: React$1.ReactNode;
|
|
227
|
+
}
|
|
228
|
+
export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
|
|
229
|
+
}
|
|
230
|
+
export type SelectOption = string | {
|
|
231
|
+
value: string;
|
|
232
|
+
label: string;
|
|
233
|
+
disabled?: boolean;
|
|
234
|
+
};
|
|
235
|
+
export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "required"> {
|
|
236
|
+
options: SelectOption[];
|
|
237
|
+
/** A disabled first option shown in fg-tertiary until something is chosen. */
|
|
238
|
+
placeholder?: string;
|
|
239
|
+
icon?: IconName;
|
|
240
|
+
}
|
|
241
|
+
export type ChoiceOption = string | {
|
|
242
|
+
value: string;
|
|
243
|
+
label: string;
|
|
244
|
+
description?: string;
|
|
245
|
+
disabled?: boolean;
|
|
246
|
+
};
|
|
273
247
|
export interface RadioGroupProps extends FieldProps {
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
248
|
+
options: ChoiceOption[];
|
|
249
|
+
value?: string;
|
|
250
|
+
defaultValue?: string;
|
|
251
|
+
onChange?: (value: string) => void;
|
|
252
|
+
name?: string;
|
|
253
|
+
/** Default `vertical`. */
|
|
254
|
+
orientation?: "vertical" | "horizontal";
|
|
255
|
+
disabled?: boolean;
|
|
256
|
+
id?: string;
|
|
257
|
+
className?: string;
|
|
258
|
+
}
|
|
284
259
|
export interface SwitchProps {
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
export type FeedbackTone = 'info' | 'success' | 'warning' | 'danger';
|
|
260
|
+
label?: string;
|
|
261
|
+
description?: string;
|
|
262
|
+
checked?: boolean;
|
|
263
|
+
defaultChecked?: boolean;
|
|
264
|
+
onChange?: (checked: boolean) => void;
|
|
265
|
+
disabled?: boolean;
|
|
266
|
+
/** Required when there is no visible label. */
|
|
267
|
+
"aria-label"?: string;
|
|
268
|
+
id?: string;
|
|
269
|
+
className?: string;
|
|
270
|
+
}
|
|
271
|
+
export type FeedbackTone = "info" | "success" | "warning" | "danger";
|
|
298
272
|
export interface AlertProps {
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
273
|
+
tone?: FeedbackTone;
|
|
274
|
+
title?: React$1.ReactNode;
|
|
275
|
+
children?: React$1.ReactNode;
|
|
276
|
+
/** Usually a secondary Button. */
|
|
277
|
+
action?: React$1.ReactNode;
|
|
278
|
+
/** Adds a close button. */
|
|
279
|
+
onDismiss?: () => void;
|
|
280
|
+
className?: string;
|
|
281
|
+
}
|
|
308
282
|
export interface ToastOptions {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
283
|
+
title: string;
|
|
284
|
+
description?: string;
|
|
285
|
+
tone?: FeedbackTone;
|
|
286
|
+
action?: {
|
|
287
|
+
label: string;
|
|
288
|
+
onClick?: () => void;
|
|
289
|
+
};
|
|
290
|
+
/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
|
|
291
|
+
duration?: number;
|
|
292
|
+
/** Reuse an id to replace a toast in place. */
|
|
293
|
+
id?: string;
|
|
317
294
|
}
|
|
318
|
-
/** Show a toast; returns its id. Needs <Toaster /> mounted once. */
|
|
319
|
-
export declare const toast: ((opts: ToastOptions | string) => string) & { dismiss(id: string): void };
|
|
320
|
-
export declare function Toaster(props: { position?: 'bottom' | 'top' }): React.ReactElement;
|
|
321
295
|
export interface TooltipProps {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
}
|
|
331
|
-
export
|
|
332
|
-
|
|
333
|
-
|
|
296
|
+
content: React$1.ReactNode;
|
|
297
|
+
/** One focusable element. */
|
|
298
|
+
children: React$1.ReactElement;
|
|
299
|
+
side?: "top" | "bottom";
|
|
300
|
+
/** Hover delay in ms. Default 400. */
|
|
301
|
+
delay?: number;
|
|
302
|
+
/** Force open (demos, tests). */
|
|
303
|
+
open?: boolean;
|
|
304
|
+
}
|
|
305
|
+
export interface FieldPropsPublic {
|
|
306
|
+
label: string;
|
|
307
|
+
hint?: React$1.ReactNode;
|
|
308
|
+
error?: React$1.ReactNode;
|
|
309
|
+
required?: boolean;
|
|
310
|
+
optional?: boolean;
|
|
311
|
+
}
|
|
334
312
|
export interface DialogProps {
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
}
|
|
352
|
-
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
|
|
353
|
-
|
|
354
|
-
/* ---------- Layout & navigation ---------- */
|
|
313
|
+
open: boolean;
|
|
314
|
+
onClose: () => void;
|
|
315
|
+
title: React$1.ReactNode;
|
|
316
|
+
description?: React$1.ReactNode;
|
|
317
|
+
children?: React$1.ReactNode;
|
|
318
|
+
/** Buttons, right-aligned: secondary Cancel, then the primary action. */
|
|
319
|
+
footer?: React$1.ReactNode;
|
|
320
|
+
/** `sm` 400 · `md` 560 (default) · `lg` 720. */
|
|
321
|
+
size?: "sm" | "md" | "lg";
|
|
322
|
+
/** Default true. False hides the close button and ignores Escape and scrim clicks. */
|
|
323
|
+
dismissible?: boolean;
|
|
324
|
+
/** Use `alertdialog` for destructive confirmations. */
|
|
325
|
+
role?: "dialog" | "alertdialog";
|
|
326
|
+
/** Default true. Turn off only for static demos. */
|
|
327
|
+
autoFocus?: boolean;
|
|
328
|
+
className?: string;
|
|
329
|
+
}
|
|
355
330
|
export interface CardProps {
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
331
|
+
title?: React$1.ReactNode;
|
|
332
|
+
description?: React$1.ReactNode;
|
|
333
|
+
/** Top-right, usually an IconButton. */
|
|
334
|
+
actions?: React$1.ReactNode;
|
|
335
|
+
footer?: React$1.ReactNode;
|
|
336
|
+
children?: React$1.ReactNode;
|
|
337
|
+
/** Default `enterprise`. `creative` is for marketing and onboarding only. */
|
|
338
|
+
variant?: "enterprise" | "creative";
|
|
339
|
+
/** Heading level of the title. Default 3 — use 2 when cards sit directly under the page h1. */
|
|
340
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
341
|
+
/** Hover edge for clickable cards. */
|
|
342
|
+
interactive?: boolean;
|
|
343
|
+
as?: keyof React$1.JSX.IntrinsicElements;
|
|
344
|
+
className?: string;
|
|
345
|
+
/** id for the title element; the card is then labelled by it (aria-labelledby). */
|
|
346
|
+
titleId?: string;
|
|
347
|
+
}
|
|
348
|
+
export interface TabItem {
|
|
349
|
+
id: string;
|
|
350
|
+
label: string;
|
|
351
|
+
icon?: IconName;
|
|
352
|
+
count?: number;
|
|
353
|
+
disabled?: boolean;
|
|
354
|
+
content?: React$1.ReactNode;
|
|
355
|
+
}
|
|
373
356
|
export interface TabsProps {
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
}
|
|
382
|
-
export
|
|
383
|
-
|
|
357
|
+
tabs: TabItem[];
|
|
358
|
+
/** Accessible name for the tab list. */
|
|
359
|
+
label: string;
|
|
360
|
+
value?: string;
|
|
361
|
+
defaultValue?: string;
|
|
362
|
+
onChange?: (id: string) => void;
|
|
363
|
+
className?: string;
|
|
364
|
+
}
|
|
365
|
+
export interface NavItem {
|
|
366
|
+
id: string;
|
|
367
|
+
label: string;
|
|
368
|
+
icon?: IconName;
|
|
369
|
+
count?: number;
|
|
370
|
+
href?: string;
|
|
371
|
+
}
|
|
384
372
|
export interface SideNavProps {
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
373
|
+
sections?: Array<{
|
|
374
|
+
title?: string;
|
|
375
|
+
items: NavItem[];
|
|
376
|
+
}>;
|
|
377
|
+
items?: NavItem[];
|
|
378
|
+
value?: string;
|
|
379
|
+
defaultValue?: string;
|
|
380
|
+
onChange?: (id: string) => void;
|
|
381
|
+
header?: React$1.ReactNode;
|
|
382
|
+
footer?: React$1.ReactNode;
|
|
383
|
+
/** Default "Main". */
|
|
384
|
+
label?: string;
|
|
385
|
+
className?: string;
|
|
386
|
+
}
|
|
397
387
|
export interface BreadcrumbProps {
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
388
|
+
/** Root first; the last item is the current page. */
|
|
389
|
+
items: Array<{
|
|
390
|
+
label: string;
|
|
391
|
+
href?: string;
|
|
392
|
+
onClick?: () => void;
|
|
393
|
+
}>;
|
|
394
|
+
label?: string;
|
|
395
|
+
className?: string;
|
|
402
396
|
}
|
|
403
|
-
export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
|
|
404
397
|
export interface AvatarProps {
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
}
|
|
413
|
-
export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
414
|
-
|
|
415
|
-
/* ---------- 4.2: menus, pickers, drawers, layout ---------- */
|
|
416
|
-
|
|
398
|
+
/** Accessible name; also gives the initials and a stable colour. */
|
|
399
|
+
name: string;
|
|
400
|
+
src?: string;
|
|
401
|
+
/** `sm` 24 · `md` 32 (default) · `lg` 40. */
|
|
402
|
+
size?: "sm" | "md" | "lg";
|
|
403
|
+
status?: "online";
|
|
404
|
+
className?: string;
|
|
405
|
+
}
|
|
417
406
|
export interface DropdownMenuProps {
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
407
|
+
/** One element — usually a Button or IconButton. It gets aria-haspopup, aria-expanded and the click handler. */
|
|
408
|
+
trigger: React$1.ReactElement;
|
|
409
|
+
items: MenuItem[];
|
|
410
|
+
/** Accessible name for the menu. */
|
|
411
|
+
label?: string;
|
|
423
412
|
}
|
|
424
|
-
/** A trigger that opens a Menu. ArrowDown / ArrowUp on the trigger also opens it. */
|
|
425
|
-
export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLSpanElement>>;
|
|
426
|
-
|
|
427
413
|
export interface ComboboxOption {
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
414
|
+
value: string;
|
|
415
|
+
label: string;
|
|
416
|
+
/** Second line in the list; also searched. */
|
|
417
|
+
description?: string;
|
|
418
|
+
/** Extra search terms (English name, phone, code…). */
|
|
419
|
+
keywords?: string[];
|
|
420
|
+
disabled?: boolean;
|
|
421
|
+
/** Leading icon in the list. */
|
|
422
|
+
icon?: IconName;
|
|
435
423
|
}
|
|
436
424
|
export interface ComboboxProps extends FieldProps {
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
425
|
+
options: Array<ComboboxOption | string>;
|
|
426
|
+
/** Selected option value (controlled). */
|
|
427
|
+
value?: string | null;
|
|
428
|
+
defaultValue?: string | null;
|
|
429
|
+
onChange?: (value: string | null) => void;
|
|
430
|
+
id?: string;
|
|
431
|
+
name?: string;
|
|
432
|
+
placeholder?: string;
|
|
433
|
+
disabled?: boolean;
|
|
434
|
+
readOnly?: boolean;
|
|
435
|
+
/** Leading icon. Default `search`. */
|
|
436
|
+
icon?: IconName;
|
|
437
|
+
/** Clear button while a value is selected (Escape clears too). Default true. */
|
|
438
|
+
clearable?: boolean;
|
|
439
|
+
/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
|
|
440
|
+
onSearch?: (query: string) => void;
|
|
441
|
+
loading?: boolean;
|
|
442
|
+
loadingText?: string;
|
|
443
|
+
emptyText?: string;
|
|
444
|
+
/** Max options rendered. Default 200 — narrow with typing beyond that. */
|
|
445
|
+
limit?: number;
|
|
446
|
+
/** Replace the Thai-aware default filter (label, description, keywords). */
|
|
447
|
+
filter?: (option: ComboboxOption, query: string) => boolean;
|
|
448
|
+
className?: string;
|
|
461
449
|
}
|
|
462
|
-
/** Text field that filters a list as you type (ARIA 1.2 combobox). One value. */
|
|
463
|
-
export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
464
|
-
export declare function comboboxFilter(option: ComboboxOption, query: string): boolean;
|
|
465
|
-
|
|
466
450
|
/** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
|
|
467
451
|
export type ISODate = string;
|
|
468
452
|
export interface DateDisplayOptions {
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
453
|
+
/** `th` (default) or `en`. */
|
|
454
|
+
locale?: "th" | "en";
|
|
455
|
+
/** `buddhist` (default, พ.ศ.) or `gregory` (ค.ศ.). */
|
|
456
|
+
calendar?: "buddhist" | "gregory";
|
|
473
457
|
}
|
|
474
458
|
export interface CalendarProps extends DateDisplayOptions {
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
}
|
|
492
|
-
export
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
className?: string;
|
|
459
|
+
start?: ISODate | null;
|
|
460
|
+
end?: ISODate | null;
|
|
461
|
+
focus?: ISODate | null;
|
|
462
|
+
range?: boolean;
|
|
463
|
+
min?: ISODate;
|
|
464
|
+
max?: ISODate;
|
|
465
|
+
isDateDisabled?: (iso: ISODate) => boolean;
|
|
466
|
+
/** 0 = Sunday (Thai default), 1 = Monday. */
|
|
467
|
+
weekStartsOn?: 0 | 1;
|
|
468
|
+
onSelect?: (iso: ISODate | null) => void;
|
|
469
|
+
/** Adds a Clear link to the footer. */
|
|
470
|
+
onClear?: () => void;
|
|
471
|
+
/** false hides the Today / Clear footer. */
|
|
472
|
+
footer?: boolean;
|
|
473
|
+
/** Default true: focuses the selected (or today's) day on mount. */
|
|
474
|
+
autoFocus?: boolean;
|
|
475
|
+
}
|
|
476
|
+
export interface DateFieldProps extends FieldProps, DateDisplayOptions {
|
|
477
|
+
id?: string;
|
|
478
|
+
name?: string;
|
|
479
|
+
placeholder?: string;
|
|
480
|
+
disabled?: boolean;
|
|
481
|
+
/** Clear button while there is a value. Default true. */
|
|
482
|
+
clearable?: boolean;
|
|
483
|
+
min?: ISODate;
|
|
484
|
+
max?: ISODate;
|
|
485
|
+
isDateDisabled?: (iso: ISODate) => boolean;
|
|
486
|
+
weekStartsOn?: 0 | 1;
|
|
487
|
+
className?: string;
|
|
505
488
|
}
|
|
506
489
|
export interface DatePickerProps extends DateFieldProps {
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
490
|
+
value?: ISODate | null;
|
|
491
|
+
defaultValue?: ISODate | null;
|
|
492
|
+
onChange?: (value: ISODate | null) => void;
|
|
493
|
+
}
|
|
494
|
+
export interface DateRange {
|
|
495
|
+
start: ISODate | null;
|
|
496
|
+
end: ISODate | null;
|
|
510
497
|
}
|
|
511
|
-
/** Typed date field + calendar popover. Shows Buddhist-era dates (18 ก.ย. 2569); accepts dd/mm/yyyy in พ.ศ. or ค.ศ. and yyyy-mm-dd. */
|
|
512
|
-
export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
|
|
513
|
-
export interface DateRange { start: ISODate | null; end: ISODate | null; }
|
|
514
498
|
export interface DateRangePickerProps extends DateFieldProps {
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
}
|
|
519
|
-
export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
|
|
520
|
-
/** `formatDate('2026-09-18')` → `18 ก.ย. 2569`. format `long` → `18 กันยายน 2569`, `numeric` → `18/09/2569`. */
|
|
521
|
-
export declare function formatDate(iso: ISODate | null | undefined, opts?: DateDisplayOptions & { format?: 'short' | 'long' | 'numeric' | Intl.DateTimeFormatOptions }): string;
|
|
522
|
-
/** Parses dd/mm/yyyy (years ≥ 2400 are read as พ.ศ.) or yyyy-mm-dd. Returns ISO or null. */
|
|
523
|
-
export declare function parseDate(text: string): ISODate | null;
|
|
524
|
-
|
|
525
|
-
export interface DrawerProps {
|
|
526
|
-
open: boolean;
|
|
527
|
-
onClose: () => void;
|
|
528
|
-
/** Default `right`. */
|
|
529
|
-
side?: 'right' | 'left';
|
|
530
|
-
/** sm 360 · md 480 (default) · lg 640 · nav = SideNav width. Full width below 640px. */
|
|
531
|
-
size?: 'sm' | 'md' | 'lg' | 'nav';
|
|
532
|
-
title?: string;
|
|
533
|
-
description?: React.ReactNode;
|
|
534
|
-
children?: React.ReactNode;
|
|
535
|
-
/** Buttons, right-aligned; stacked on phones. */
|
|
536
|
-
footer?: React.ReactNode;
|
|
537
|
-
/** Scrim click and Escape close it. Default true. */
|
|
538
|
-
dismissible?: boolean;
|
|
539
|
-
/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
|
|
540
|
-
autoFocus?: boolean;
|
|
541
|
-
/** Needed when there is no title. */
|
|
542
|
-
'aria-label'?: string;
|
|
543
|
-
className?: string;
|
|
499
|
+
value?: DateRange;
|
|
500
|
+
defaultValue?: DateRange;
|
|
501
|
+
onChange?: (value: DateRange) => void;
|
|
544
502
|
}
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
503
|
+
export interface DrawerProps {
|
|
504
|
+
open: boolean;
|
|
505
|
+
onClose: () => void;
|
|
506
|
+
/** Default `right`. */
|
|
507
|
+
side?: "right" | "left";
|
|
508
|
+
/** sm 360 · md 480 (default) · lg 640 · nav = SideNav width. Full width below 640px. */
|
|
509
|
+
size?: "sm" | "md" | "lg" | "nav";
|
|
510
|
+
title?: string;
|
|
511
|
+
description?: React$1.ReactNode;
|
|
512
|
+
children?: React$1.ReactNode;
|
|
513
|
+
/** Buttons, right-aligned; stacked on phones. */
|
|
514
|
+
footer?: React$1.ReactNode;
|
|
515
|
+
/** Scrim click and Escape close it. Default true. */
|
|
516
|
+
dismissible?: boolean;
|
|
517
|
+
/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
|
|
518
|
+
autoFocus?: boolean;
|
|
519
|
+
/** Needed when there is no title. */
|
|
520
|
+
"aria-label"?: string;
|
|
521
|
+
className?: string;
|
|
522
|
+
}
|
|
523
|
+
export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
|
|
549
524
|
export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
|
|
550
|
-
/** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
|
|
551
|
-
export declare const breakpoints: { sm: 640; md: 768; lg: 1024; xl: 1280 };
|
|
552
|
-
/** The widest breakpoint the window meets. `lg` during server render and hydration. */
|
|
553
|
-
export declare function useBreakpoint(): Breakpoint;
|
|
554
|
-
export declare function useResponsive<T>(value: Responsive<T>): T | undefined;
|
|
555
525
|
/** Spacing step (aura-space-N) or any CSS length. */
|
|
556
526
|
export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | string;
|
|
557
527
|
export interface StackProps {
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
}
|
|
569
|
-
export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
|
|
528
|
+
direction?: Responsive<"row" | "column">;
|
|
529
|
+
gap?: Responsive<Space>;
|
|
530
|
+
/** Cross-axis alignment; responsive like direction ({ base: 'stretch', sm: 'flex-end' }). */
|
|
531
|
+
align?: Responsive<React$1.CSSProperties["alignItems"]>;
|
|
532
|
+
justify?: React$1.CSSProperties["justifyContent"];
|
|
533
|
+
wrap?: boolean;
|
|
534
|
+
as?: keyof React$1.JSX.IntrinsicElements;
|
|
535
|
+
className?: string;
|
|
536
|
+
style?: React$1.CSSProperties;
|
|
537
|
+
children?: React$1.ReactNode;
|
|
538
|
+
}
|
|
570
539
|
export interface GridProps {
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
}
|
|
580
|
-
export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
|
|
581
|
-
export declare const Container: React.ForwardRefExoticComponent<{ size?: 'default' | 'narrow'; as?: keyof JSX.IntrinsicElements; className?: string; style?: React.CSSProperties; children?: React.ReactNode } & React.RefAttributes<HTMLElement>>;
|
|
540
|
+
columns?: Responsive<number>;
|
|
541
|
+
/** Fit as many columns as there is room for, each at least this wide (px). Overrides columns. */
|
|
542
|
+
minItemWidth?: number;
|
|
543
|
+
gap?: Responsive<Space>;
|
|
544
|
+
as?: keyof React$1.JSX.IntrinsicElements;
|
|
545
|
+
className?: string;
|
|
546
|
+
style?: React$1.CSSProperties;
|
|
547
|
+
children?: React$1.ReactNode;
|
|
548
|
+
}
|
|
582
549
|
export interface AppShellProps {
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
}
|
|
594
|
-
export declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
|
|
595
|
-
|
|
596
|
-
/* ---------- 4.3: Stat, TimePicker, FileUpload ---------- */
|
|
597
|
-
|
|
550
|
+
/** Usually a SideNav. Fixed from 1024px up; in a Drawer behind a menu button below. */
|
|
551
|
+
nav?: React$1.ReactElement;
|
|
552
|
+
/** Top bar content (title, search, account menu). */
|
|
553
|
+
header?: React$1.ReactNode;
|
|
554
|
+
children?: React$1.ReactNode;
|
|
555
|
+
navLabel?: string;
|
|
556
|
+
menuLabel?: string;
|
|
557
|
+
/** id of <main>, for a skip link. Default `main`. */
|
|
558
|
+
mainId?: string;
|
|
559
|
+
className?: string;
|
|
560
|
+
}
|
|
598
561
|
export interface StatChange {
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
562
|
+
/** Shown as written, e.g. "+12%" or "−3". */
|
|
563
|
+
value: React$1.ReactNode;
|
|
564
|
+
direction?: "up" | "down" | "flat";
|
|
565
|
+
/** Default: up = positive, down = negative. Set it when a rise is bad (cancellations, wait time). */
|
|
566
|
+
tone?: "positive" | "negative" | "neutral";
|
|
567
|
+
/** e.g. "vs last month". */
|
|
568
|
+
label?: React$1.ReactNode;
|
|
606
569
|
}
|
|
607
570
|
export interface StatProps {
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
}
|
|
622
|
-
/** One number on a card: label, value, change and caption. Put several in a Grid. */
|
|
623
|
-
export declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLElement>>;
|
|
624
|
-
|
|
571
|
+
label: React$1.ReactNode;
|
|
572
|
+
value?: React$1.ReactNode;
|
|
573
|
+
/** Small unit after the value ("งาน", "คน", "%"). */
|
|
574
|
+
unit?: React$1.ReactNode;
|
|
575
|
+
change?: StatChange;
|
|
576
|
+
caption?: React$1.ReactNode;
|
|
577
|
+
icon?: IconName;
|
|
578
|
+
/** Skeleton in place of the value. */
|
|
579
|
+
loading?: boolean;
|
|
580
|
+
/** Makes the whole card a link or a button (drill-down). */
|
|
581
|
+
href?: string;
|
|
582
|
+
onClick?: () => void;
|
|
583
|
+
className?: string;
|
|
584
|
+
}
|
|
625
585
|
export interface TimePickerProps extends FieldProps {
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
}
|
|
647
|
-
/** Time field with a list of slots. Accepts typed 9 · 930 · 9:30 · 9.30 · 09.30 น. · 9:30 pm. */
|
|
648
|
-
export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
|
|
649
|
-
export declare function parseTime(text: string): string | null;
|
|
650
|
-
|
|
586
|
+
/** "HH:mm", 24-hour. */
|
|
587
|
+
value?: string | null;
|
|
588
|
+
defaultValue?: string | null;
|
|
589
|
+
onChange?: (value: string | null) => void;
|
|
590
|
+
/** Minutes between listed slots. Default 30. */
|
|
591
|
+
step?: number;
|
|
592
|
+
/** Earliest and latest allowed times, "HH:mm". Typed times outside them are refused with a message. */
|
|
593
|
+
min?: string;
|
|
594
|
+
max?: string;
|
|
595
|
+
isTimeDisabled?: (time: string) => boolean;
|
|
596
|
+
/** Slot to scroll to when empty (e.g. "09:00"). Default: min. */
|
|
597
|
+
suggest?: string;
|
|
598
|
+
/** Clear button while there is a value. Default true. */
|
|
599
|
+
clearable?: boolean;
|
|
600
|
+
id?: string;
|
|
601
|
+
name?: string;
|
|
602
|
+
placeholder?: string;
|
|
603
|
+
disabled?: boolean;
|
|
604
|
+
readOnly?: boolean;
|
|
605
|
+
className?: string;
|
|
606
|
+
}
|
|
651
607
|
export interface UploadItem {
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
608
|
+
id: string;
|
|
609
|
+
/** The browser File (absent for files already on the server). */
|
|
610
|
+
file?: File;
|
|
611
|
+
name: string;
|
|
612
|
+
size?: number;
|
|
613
|
+
type?: string;
|
|
614
|
+
/** ready = picked, not sent yet. Set uploading/done yourself while sending. */
|
|
615
|
+
status: "ready" | "uploading" | "done" | "error";
|
|
616
|
+
/** 0–100 while uploading. */
|
|
617
|
+
progress?: number;
|
|
618
|
+
error?: string;
|
|
619
|
+
/** For files already stored (edit forms). */
|
|
620
|
+
url?: string;
|
|
665
621
|
}
|
|
666
622
|
export interface FileUploadProps extends FieldProps {
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
export
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
export interface
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
/**
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
/** Adds a remove button (applied filters, chosen people). */
|
|
702
|
-
onRemove?: () => void;
|
|
703
|
-
removeLabel?: string;
|
|
704
|
-
/** Makes it a toggle chip (filter chips): renders a button with aria-pressed. */
|
|
705
|
-
selected?: boolean;
|
|
706
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
707
|
-
disabled?: boolean;
|
|
708
|
-
}
|
|
709
|
-
export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
|
|
623
|
+
value?: UploadItem[];
|
|
624
|
+
defaultValue?: UploadItem[];
|
|
625
|
+
onChange?: (items: UploadItem[]) => void;
|
|
626
|
+
onRemove?: (item: UploadItem) => void;
|
|
627
|
+
/** Same syntax as <input accept>: "image/*,.pdf". Checked on drop too. */
|
|
628
|
+
accept?: string;
|
|
629
|
+
multiple?: boolean;
|
|
630
|
+
/** Bytes per file. */
|
|
631
|
+
maxSize?: number;
|
|
632
|
+
/** With multiple. */
|
|
633
|
+
maxFiles?: number;
|
|
634
|
+
id?: string;
|
|
635
|
+
name?: string;
|
|
636
|
+
disabled?: boolean;
|
|
637
|
+
className?: string;
|
|
638
|
+
}
|
|
639
|
+
export type Tone = "neutral" | "accent" | "success" | "warning" | "danger";
|
|
640
|
+
export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
641
|
+
tone?: Tone;
|
|
642
|
+
/** soft (default) · solid · outline */
|
|
643
|
+
variant?: "soft" | "solid" | "outline";
|
|
644
|
+
icon?: IconName;
|
|
645
|
+
}
|
|
646
|
+
export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
|
|
647
|
+
children: React$1.ReactNode;
|
|
648
|
+
icon?: IconName;
|
|
649
|
+
/** Adds a remove button (applied filters, chosen people). */
|
|
650
|
+
onRemove?: () => void;
|
|
651
|
+
removeLabel?: string;
|
|
652
|
+
/** Makes it a toggle chip (filter chips): renders a button with aria-pressed. */
|
|
653
|
+
selected?: boolean;
|
|
654
|
+
onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
|
|
655
|
+
disabled?: boolean;
|
|
656
|
+
}
|
|
710
657
|
export interface ProgressProps {
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
}
|
|
725
|
-
export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
|
658
|
+
/** Omit for indeterminate. */
|
|
659
|
+
value?: number;
|
|
660
|
+
max?: number;
|
|
661
|
+
label?: React$1.ReactNode;
|
|
662
|
+
"aria-label"?: string;
|
|
663
|
+
showValue?: boolean;
|
|
664
|
+
/** Replaces the % text, e.g. "3 of 5 files". Also read out as aria-valuetext. */
|
|
665
|
+
valueLabel?: React$1.ReactNode;
|
|
666
|
+
hint?: React$1.ReactNode;
|
|
667
|
+
tone?: Tone;
|
|
668
|
+
size?: "sm" | "md";
|
|
669
|
+
id?: string;
|
|
670
|
+
className?: string;
|
|
671
|
+
}
|
|
726
672
|
export interface SkeletonProps {
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
}
|
|
736
|
-
export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
|
|
673
|
+
variant?: "text" | "rect" | "circle";
|
|
674
|
+
/** text only: number of lines (the last is shorter). */
|
|
675
|
+
lines?: number;
|
|
676
|
+
width?: number | string;
|
|
677
|
+
height?: number | string;
|
|
678
|
+
/** circle diameter. */
|
|
679
|
+
size?: number;
|
|
680
|
+
className?: string;
|
|
681
|
+
}
|
|
737
682
|
export interface EmptyStateProps {
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
}
|
|
748
|
-
export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
|
|
683
|
+
title: React$1.ReactNode;
|
|
684
|
+
description?: React$1.ReactNode;
|
|
685
|
+
icon?: IconName;
|
|
686
|
+
/** One or two buttons. */
|
|
687
|
+
action?: React$1.ReactNode;
|
|
688
|
+
size?: "sm" | "md";
|
|
689
|
+
bordered?: boolean;
|
|
690
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
691
|
+
className?: string;
|
|
692
|
+
}
|
|
749
693
|
export interface PaginationProps {
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
694
|
+
pageCount: number;
|
|
695
|
+
/** 1-based, controlled; pair with onChange. Or defaultPage. */
|
|
696
|
+
page?: number;
|
|
697
|
+
defaultPage?: number;
|
|
698
|
+
onChange?: (page: number) => void;
|
|
699
|
+
/** Pages shown each side of the current one. Default 1. */
|
|
700
|
+
siblingCount?: number;
|
|
701
|
+
/** Render real links (SEO, open in new tab); onChange still runs for client routing. */
|
|
702
|
+
getHref?: (page: number) => string;
|
|
703
|
+
label?: string;
|
|
704
|
+
className?: string;
|
|
705
|
+
}
|
|
706
|
+
export interface AccordionItem {
|
|
707
|
+
id: string;
|
|
708
|
+
title: React$1.ReactNode;
|
|
709
|
+
description?: React$1.ReactNode;
|
|
710
|
+
content: React$1.ReactNode;
|
|
711
|
+
icon?: IconName;
|
|
712
|
+
disabled?: boolean;
|
|
713
|
+
}
|
|
765
714
|
export interface AccordionProps {
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
}
|
|
778
|
-
export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
|
|
715
|
+
items: AccordionItem[];
|
|
716
|
+
/** single (default): one open at a time. multiple: any number. */
|
|
717
|
+
type?: "single" | "multiple";
|
|
718
|
+
value?: string | null | string[];
|
|
719
|
+
defaultValue?: string | null | string[];
|
|
720
|
+
onChange?: (value: any) => void;
|
|
721
|
+
/** single only: false keeps one section always open. Default true. */
|
|
722
|
+
collapsible?: boolean;
|
|
723
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
724
|
+
id?: string;
|
|
725
|
+
className?: string;
|
|
726
|
+
}
|
|
779
727
|
export interface PopoverProps {
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
728
|
+
/** One element; it gets aria-haspopup, aria-expanded and the click toggle. */
|
|
729
|
+
trigger: React$1.ReactElement;
|
|
730
|
+
children: React$1.ReactNode | ((api: {
|
|
731
|
+
close: () => void;
|
|
732
|
+
}) => React$1.ReactNode);
|
|
733
|
+
title?: React$1.ReactNode;
|
|
734
|
+
/** Accessible name when there is no title. */
|
|
735
|
+
label?: string;
|
|
736
|
+
open?: boolean;
|
|
737
|
+
defaultOpen?: boolean;
|
|
738
|
+
onOpenChange?: (open: boolean) => void;
|
|
739
|
+
placement?: "bottom-start" | "bottom-end" | "bottom-center" | "top-start" | "top-end" | "top-center";
|
|
740
|
+
width?: number | string;
|
|
741
|
+
/** Default true: focus moves to [data-autofocus] or the first control inside. */
|
|
742
|
+
autoFocus?: boolean;
|
|
743
|
+
id?: string;
|
|
744
|
+
className?: string;
|
|
745
|
+
}
|
|
799
746
|
export interface ThemeOptions {
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
}
|
|
808
|
-
export interface ThemeCheck {
|
|
747
|
+
/** The project's brand colour, #rgb or #rrggbb. Replaces AURA violet (links, focus ring, selection, info, progress, creative shadow in dark, mesh). */
|
|
748
|
+
brand: string;
|
|
749
|
+
/** Optional signal colour; replaces AURA lime in the accent dot and mesh only (success/ready stay green). */
|
|
750
|
+
signal?: string;
|
|
751
|
+
/** ink (default): primary buttons stay zinc ink. brand: primary buttons use the brand colour. */
|
|
752
|
+
primary?: "ink" | "brand";
|
|
753
|
+
name?: string;
|
|
754
|
+
}
|
|
755
|
+
export interface ThemeCheck {
|
|
756
|
+
theme: "light" | "dark";
|
|
757
|
+
pair: string;
|
|
758
|
+
ratio: number;
|
|
759
|
+
target: number;
|
|
760
|
+
pass: boolean;
|
|
761
|
+
}
|
|
809
762
|
export interface Theme {
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
}
|
|
820
|
-
/**
|
|
821
|
-
export
|
|
763
|
+
name: string | null;
|
|
764
|
+
brand: Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>;
|
|
765
|
+
signal: Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string> | null;
|
|
766
|
+
light: Record<string, string>;
|
|
767
|
+
dark: Record<string, string>;
|
|
768
|
+
checks: ThemeCheck[];
|
|
769
|
+
ok: boolean;
|
|
770
|
+
/** CSS overriding the tokens. No selector: the whole page. A selector (".tenant-acme") scopes it. Load after aura.css. */
|
|
771
|
+
css(selector?: string): string;
|
|
772
|
+
}
|
|
773
|
+
/** One SVG child: element name and its attributes. */
|
|
774
|
+
export type IconShape = [
|
|
775
|
+
string,
|
|
776
|
+
Record<string, string>
|
|
777
|
+
];
|
|
778
|
+
export declare var ICONS: Record<IconName, IconShape[]>;
|
|
779
|
+
export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
|
|
780
|
+
/** Every icon name the bundle carries. */
|
|
781
|
+
export declare const iconNames: IconName[];
|
|
782
|
+
/** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
|
|
783
|
+
export declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
784
|
+
export declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
785
|
+
/** Popover list anchored to an element, rendered in a portal. */
|
|
786
|
+
export declare const Menu: React$1.ForwardRefExoticComponent<MenuProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
787
|
+
/** A trigger that opens a Menu. ArrowDown / ArrowUp on the trigger also opens it. */
|
|
788
|
+
export declare const DropdownMenu: React$1.ForwardRefExoticComponent<DropdownMenuProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
789
|
+
export declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
790
|
+
/** The tone the pill would pick for a status word. */
|
|
791
|
+
declare function toneFor(status: unknown): StatusTone;
|
|
792
|
+
export declare const StatusPill: React$1.ForwardRefExoticComponent<StatusPillProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
793
|
+
/** Field: label, required/optional marks, the control, then the hint or error line. Wrap a custom control in it. */
|
|
794
|
+
export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
|
|
795
|
+
/** Visible label. Omit only when the control is labelled another way. */
|
|
796
|
+
label?: React$1.ReactNode;
|
|
797
|
+
/** The control's id: the label points at it, and the hint/error ids derive from it. */
|
|
798
|
+
id?: string;
|
|
799
|
+
children?: React$1.ReactNode;
|
|
800
|
+
/** Render the label as another element (e.g. `span` for a group of controls) with this id. */
|
|
801
|
+
labelAs?: string;
|
|
802
|
+
labelId?: string;
|
|
803
|
+
disabled?: boolean;
|
|
804
|
+
className?: string;
|
|
805
|
+
}
|
|
806
|
+
export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
807
|
+
export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
808
|
+
export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
809
|
+
export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
|
|
810
|
+
export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
|
|
811
|
+
export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
812
|
+
/** The Thai-aware default filter: label, description and keywords contain the query. */
|
|
813
|
+
declare function defaultFilter(option: ComboboxOption, query: string): boolean;
|
|
814
|
+
/** Text field that filters a list as you type (ARIA 1.2 combobox). One value. */
|
|
815
|
+
export declare const Combobox: React$1.ForwardRefExoticComponent<ComboboxProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
816
|
+
/** Options for formatDate: locale/calendar plus a preset or any Intl.DateTimeFormat options. */
|
|
817
|
+
export type FormatDateOptions = DateDisplayOptions & {
|
|
818
|
+
format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions;
|
|
819
|
+
};
|
|
820
|
+
/** Format an ISO date for display, e.g. "18 ก.ย. 2569" (th, Buddhist) or "18 Sept 2026" (en, Gregorian). */
|
|
821
|
+
export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
|
|
822
|
+
/** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
|
|
823
|
+
export declare function parseDate(text: string | null | undefined): ISODate | null;
|
|
824
|
+
export declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
825
|
+
/** Typed date field + calendar popover. Shows Buddhist-era dates (18 ก.ย. 2569); accepts dd/mm/yyyy in พ.ศ. or ค.ศ. and yyyy-mm-dd. */
|
|
826
|
+
export declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
827
|
+
export declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRangePickerProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
828
|
+
export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
829
|
+
/** Show a toast; returns its id. Needs <Toaster /> mounted once. */
|
|
830
|
+
export declare function toast(opts: ToastOptions | string): string;
|
|
831
|
+
export declare namespace toast {
|
|
832
|
+
var dismiss: (id: string) => void;
|
|
833
|
+
}
|
|
834
|
+
export interface ToasterProps {
|
|
835
|
+
/** Default `bottom`. */
|
|
836
|
+
position?: "bottom" | "top";
|
|
837
|
+
}
|
|
838
|
+
export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
|
|
839
|
+
export declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
840
|
+
export declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
841
|
+
/** Side panel over the page: record detail, filters, mobile navigation. Modal (focus trap, scroll lock, focus restore). */
|
|
842
|
+
export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
843
|
+
/** Enterprise data table: 48px rows, hairline dividers, mono header band. */
|
|
844
|
+
export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
845
|
+
export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
|
|
846
|
+
export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
847
|
+
export declare const SideNav: React$1.ForwardRefExoticComponent<SideNavProps & React$1.RefAttributes<HTMLElement>>;
|
|
848
|
+
export declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
|
|
849
|
+
export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
850
|
+
/** Centred page column. */
|
|
851
|
+
export interface ContainerProps {
|
|
852
|
+
/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
|
|
853
|
+
size?: "default" | "narrow";
|
|
854
|
+
as?: keyof React$1.JSX.IntrinsicElements;
|
|
855
|
+
className?: string;
|
|
856
|
+
style?: React$1.CSSProperties;
|
|
857
|
+
children?: React$1.ReactNode;
|
|
858
|
+
}
|
|
859
|
+
/** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
|
|
860
|
+
export declare var breakpoints: {
|
|
861
|
+
sm: 640;
|
|
862
|
+
md: 768;
|
|
863
|
+
lg: 1024;
|
|
864
|
+
xl: 1280;
|
|
865
|
+
};
|
|
866
|
+
/** The widest breakpoint the window currently meets: 'base' | 'sm' | 'md' | 'lg' | 'xl'. 'lg' during server render. */
|
|
867
|
+
export declare function useBreakpoint(): Breakpoint;
|
|
868
|
+
/** Pick a value for the current breakpoint from { base, sm, md, lg, xl } (falls back to the next smaller one). */
|
|
869
|
+
export declare function useResponsive<T>(value: Responsive<T>): T | undefined;
|
|
870
|
+
/** Stack — one direction, even gaps. direction and gap may be responsive: { base: 'column', md: 'row' }. */
|
|
871
|
+
export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
|
|
872
|
+
/** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
|
|
873
|
+
export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
|
|
874
|
+
/** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
|
|
875
|
+
export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
|
|
876
|
+
/** AppShell — side navigation + top bar + content. The nav is fixed from lg (1024px) up and a Drawer below it. */
|
|
877
|
+
export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
878
|
+
export declare const Surface: React$1.ForwardRefExoticComponent<SurfaceProps & React$1.RefAttributes<HTMLElement>>;
|
|
879
|
+
/** Every built-in label. Function entries build the text from their arguments. */
|
|
880
|
+
export interface AuraStrings {
|
|
881
|
+
close: string;
|
|
882
|
+
dismiss: string;
|
|
883
|
+
dismissToast: string;
|
|
884
|
+
notifications: string;
|
|
885
|
+
mainNav: string;
|
|
886
|
+
breadcrumb: string;
|
|
887
|
+
navigation: string;
|
|
888
|
+
openNav: string;
|
|
889
|
+
searching: string;
|
|
890
|
+
noMatches: string;
|
|
891
|
+
clear: (what?: string) => string;
|
|
892
|
+
keepTyping: (total: number) => string;
|
|
893
|
+
sortAsc: string;
|
|
894
|
+
sortDesc: string;
|
|
895
|
+
pin: string;
|
|
896
|
+
unpin: string;
|
|
897
|
+
moveLeft: string;
|
|
898
|
+
moveRight: string;
|
|
899
|
+
hideColumn: string;
|
|
900
|
+
resetColumns: string;
|
|
901
|
+
selectRows: string;
|
|
902
|
+
selectAllRows: string;
|
|
903
|
+
deselectAllRows: string;
|
|
904
|
+
selectAll: string;
|
|
905
|
+
selectRow: (k: React$1.ReactNode) => string;
|
|
906
|
+
selectedCount: (c: number) => string;
|
|
907
|
+
pinned: string;
|
|
908
|
+
columnOptions: (label?: string) => string;
|
|
909
|
+
column: (label?: string) => string;
|
|
910
|
+
columns: string;
|
|
911
|
+
showHideColumns: string;
|
|
912
|
+
empty: string;
|
|
913
|
+
loading: string;
|
|
914
|
+
loadingRows: string;
|
|
915
|
+
range: (a: number | string, b: number | string, total: number) => string;
|
|
916
|
+
page: (p: number, total: number) => string;
|
|
917
|
+
prevPage: string;
|
|
918
|
+
nextPage: string;
|
|
919
|
+
rowCount: (c: number) => string;
|
|
920
|
+
actions: string;
|
|
921
|
+
optional: string;
|
|
922
|
+
timePlaceholder: string;
|
|
923
|
+
timeInvalid: string;
|
|
924
|
+
timeOutOfRange: (a: number | string, b: number | string) => string;
|
|
925
|
+
dropFiles: string;
|
|
926
|
+
browse: string;
|
|
927
|
+
browseOne: string;
|
|
928
|
+
remove: (n: number | string) => string;
|
|
929
|
+
fileTooBig: (max?: number | string) => string;
|
|
930
|
+
fileWrongType: string;
|
|
931
|
+
tooManyFiles: (n: number | string) => string;
|
|
932
|
+
uploading: string;
|
|
933
|
+
images: string;
|
|
934
|
+
pagination: string;
|
|
935
|
+
pageN: (p: number) => string;
|
|
936
|
+
accepts: (list?: string, max?: number | string) => string;
|
|
937
|
+
}
|
|
938
|
+
export declare var STRINGS: {
|
|
939
|
+
en: AuraStrings;
|
|
940
|
+
th: AuraStrings;
|
|
941
|
+
};
|
|
942
|
+
/** What useAuraLocale returns. `locale` and `calendar` are null outside an AuraProvider. */
|
|
943
|
+
export interface AuraLocaleValue {
|
|
944
|
+
locale: "th" | "en" | null;
|
|
945
|
+
calendar: "buddhist" | "gregory" | null;
|
|
946
|
+
strings: AuraStrings;
|
|
947
|
+
}
|
|
948
|
+
/** Sets the language of built-in labels (and the default date locale) for everything inside. */
|
|
949
|
+
export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
|
|
950
|
+
/** { locale, calendar, strings } from the nearest AuraProvider (English strings when there is none). */
|
|
951
|
+
export declare function useAuraLocale(): AuraLocaleValue;
|
|
952
|
+
export declare const Stat: React$1.ForwardRefExoticComponent<StatProps & React$1.RefAttributes<HTMLElement>>;
|
|
953
|
+
/** Parse typed time: 9 · 09 · 930 · 0930 · 9:30 · 9.30 · 09.30 น. · 9:30 pm → "HH:mm" (24-hour) or null. */
|
|
954
|
+
export declare function parseTime(text: string | null | undefined): string | null;
|
|
955
|
+
export declare const TimePicker: React$1.ForwardRefExoticComponent<TimePickerProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
956
|
+
/** 1536 → "1.5 KB". */
|
|
957
|
+
export declare function formatBytes(n: number | null | undefined): string;
|
|
958
|
+
export declare const FileUpload: React$1.ForwardRefExoticComponent<FileUploadProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
959
|
+
/** WCAG contrast ratio of two #hex colours. */
|
|
822
960
|
export declare function contrast(a: string, b: string): number;
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
961
|
+
/** A 50–900 scale around one colour: same hue, AURA's lightness steps, chroma kept in gamut. */
|
|
962
|
+
declare function scale(hex: string): Theme["brand"];
|
|
963
|
+
/**
|
|
964
|
+
* createTheme({ brand, signal?, primary?: 'ink' | 'brand', name? })
|
|
965
|
+
* → { name, brand: {50…900}, signal: {50…900}|null, light: {token: #hex}, dark: {…}, checks: [{pair, ratio, target, pass}], ok, css(selector?) }
|
|
966
|
+
*/
|
|
967
|
+
export declare function createTheme(opts: ThemeOptions): Theme;
|
|
968
|
+
export interface ThemeStyleProps extends ThemeOptions {
|
|
969
|
+
/** Scope the theme to this selector instead of the whole page (multi-tenant). */
|
|
970
|
+
selector?: string;
|
|
971
|
+
}
|
|
972
|
+
export declare function ThemeStyle(props: ThemeStyleProps): React$1.ReactElement;
|
|
973
|
+
export declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
974
|
+
export declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLElement>>;
|
|
975
|
+
export declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
976
|
+
export declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
977
|
+
export declare const EmptyState: React$1.ForwardRefExoticComponent<EmptyStateProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
978
|
+
export declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLElement>>;
|
|
979
|
+
export declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
980
|
+
export declare const Popover: React$1.ForwardRefExoticComponent<PopoverProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
981
|
+
|
|
982
|
+
export {
|
|
983
|
+
defaultFilter as comboboxFilter,
|
|
984
|
+
scale as brandScale,
|
|
985
|
+
toneFor as statusTone,
|
|
986
|
+
};
|
|
987
|
+
|
|
988
|
+
export {};
|