nuvox 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BUILDING-COMPONENTS.md +544 -0
- package/CONTRACT.md +255 -0
- package/LICENSE +28 -0
- package/README.md +99 -0
- package/THIRD-PARTY-NOTICES.md +52 -0
- package/dist/chunk-3F7OVF4J.js +1126 -0
- package/dist/chunk-3F7OVF4J.js.map +1 -0
- package/dist/context-menu-CBdFZq5L.d.cts +627 -0
- package/dist/context-menu-CBdFZq5L.d.ts +627 -0
- package/dist/index.cjs +896 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +58 -0
- package/dist/index.d.ts +58 -0
- package/dist/index.js +71 -0
- package/dist/index.js.map +1 -0
- package/dist/react/index.cjs +23038 -0
- package/dist/react/index.cjs.map +1 -0
- package/dist/react/index.css +5731 -0
- package/dist/react/index.css.map +1 -0
- package/dist/react/index.d.cts +1937 -0
- package/dist/react/index.d.ts +1937 -0
- package/dist/react/index.js +21500 -0
- package/dist/react/index.js.map +1 -0
- package/dist/themes/generated.css +1155 -0
- package/package.json +72 -0
|
@@ -0,0 +1,627 @@
|
|
|
1
|
+
interface ColorScale {
|
|
2
|
+
50: string;
|
|
3
|
+
100: string;
|
|
4
|
+
200: string;
|
|
5
|
+
300: string;
|
|
6
|
+
400: string;
|
|
7
|
+
500: string;
|
|
8
|
+
600: string;
|
|
9
|
+
700: string;
|
|
10
|
+
800: string;
|
|
11
|
+
900: string;
|
|
12
|
+
}
|
|
13
|
+
interface SemanticColor {
|
|
14
|
+
light: string;
|
|
15
|
+
subtle: string;
|
|
16
|
+
base: string;
|
|
17
|
+
dark: string;
|
|
18
|
+
deeper: string;
|
|
19
|
+
}
|
|
20
|
+
interface ThemeTokens {
|
|
21
|
+
meta: {
|
|
22
|
+
name: string;
|
|
23
|
+
label: string;
|
|
24
|
+
/** Short description of the visual identity — kept out of CSS, used in docs/registry UI. */
|
|
25
|
+
description: string;
|
|
26
|
+
};
|
|
27
|
+
color: {
|
|
28
|
+
neutral: ColorScale & {
|
|
29
|
+
0: string;
|
|
30
|
+
950: string;
|
|
31
|
+
};
|
|
32
|
+
success: SemanticColor;
|
|
33
|
+
danger: SemanticColor;
|
|
34
|
+
warning: SemanticColor;
|
|
35
|
+
info: SemanticColor;
|
|
36
|
+
/** Page/app background, not component surface. */
|
|
37
|
+
background: string;
|
|
38
|
+
/** Default component surface (card, input, modal body). */
|
|
39
|
+
surface: string;
|
|
40
|
+
/** Elevated surface (popover, dropdown, tooltip). */
|
|
41
|
+
surfaceRaised: string;
|
|
42
|
+
border: string;
|
|
43
|
+
borderFocus: string;
|
|
44
|
+
text: string;
|
|
45
|
+
textMuted: string;
|
|
46
|
+
textInverse: string;
|
|
47
|
+
};
|
|
48
|
+
radius: {
|
|
49
|
+
sm: string;
|
|
50
|
+
md: string;
|
|
51
|
+
lg: string;
|
|
52
|
+
xl: string;
|
|
53
|
+
"2xl": string;
|
|
54
|
+
full: string;
|
|
55
|
+
};
|
|
56
|
+
spacing: {
|
|
57
|
+
xs: string;
|
|
58
|
+
sm: string;
|
|
59
|
+
md: string;
|
|
60
|
+
lg: string;
|
|
61
|
+
xl: string;
|
|
62
|
+
"2xl": string;
|
|
63
|
+
};
|
|
64
|
+
typography: {
|
|
65
|
+
fontSans: string;
|
|
66
|
+
fontMono: string;
|
|
67
|
+
sizeXs: string;
|
|
68
|
+
sizeSm: string;
|
|
69
|
+
sizeMd: string;
|
|
70
|
+
sizeLg: string;
|
|
71
|
+
sizeXl: string;
|
|
72
|
+
weightNormal: string;
|
|
73
|
+
weightMedium: string;
|
|
74
|
+
weightBold: string;
|
|
75
|
+
lineHeightTight: string;
|
|
76
|
+
lineHeightNormal: string;
|
|
77
|
+
};
|
|
78
|
+
shadow: {
|
|
79
|
+
xs: string;
|
|
80
|
+
sm: string;
|
|
81
|
+
md: string;
|
|
82
|
+
lg: string;
|
|
83
|
+
xl: string;
|
|
84
|
+
"2xl": string;
|
|
85
|
+
inner: string;
|
|
86
|
+
};
|
|
87
|
+
elevation: {
|
|
88
|
+
/** z-index steps — must be consistent across every portal-based component. */
|
|
89
|
+
dropdown: number;
|
|
90
|
+
popover: number;
|
|
91
|
+
modal: number;
|
|
92
|
+
toast: number;
|
|
93
|
+
tooltip: number;
|
|
94
|
+
};
|
|
95
|
+
motion: {
|
|
96
|
+
durationFast: string;
|
|
97
|
+
durationNormal: string;
|
|
98
|
+
durationSlow: string;
|
|
99
|
+
easeStandard: string;
|
|
100
|
+
easeEmphasized: string;
|
|
101
|
+
/** Set to '0.01ms' by a reduced-motion-aware theme variant if needed. */
|
|
102
|
+
durationInstant: string;
|
|
103
|
+
};
|
|
104
|
+
border: {
|
|
105
|
+
widthThin: string;
|
|
106
|
+
widthMedium: string;
|
|
107
|
+
widthThick: string;
|
|
108
|
+
style: string;
|
|
109
|
+
};
|
|
110
|
+
effects: {
|
|
111
|
+
/**
|
|
112
|
+
* CSS `backdrop-filter: blur()` amount, e.g. "16px" or "0px".
|
|
113
|
+
* Every non-glass theme sets this to "0px" — an explicit zero,
|
|
114
|
+
* not an absent field, so `defineTheme`'s completeness check
|
|
115
|
+
* still catches an accidentally-forgotten theme. Translucent
|
|
116
|
+
* `color.surface`/`color.border` values (glass, dark-glass) are
|
|
117
|
+
* only actually visible as "glass" when something behind them
|
|
118
|
+
* is blurred; without this, a translucent white surface over a
|
|
119
|
+
* plain page background is indistinguishable from opaque white.
|
|
120
|
+
*/
|
|
121
|
+
backdropBlur: string;
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Identity function with a strict parameter type.
|
|
126
|
+
* Its only job is to make an incomplete theme a compile error
|
|
127
|
+
* at the call site, with TypeScript naming the exact missing key.
|
|
128
|
+
*/
|
|
129
|
+
declare function defineTheme(tokens: ThemeTokens): ThemeTokens;
|
|
130
|
+
/** Every top-level and nested key path, used by the completeness test. */
|
|
131
|
+
declare const TOKEN_CATEGORIES: readonly ["meta", "color", "radius", "spacing", "typography", "shadow", "elevation", "motion", "border", "effects"];
|
|
132
|
+
/**
|
|
133
|
+
* Every required leaf path, hardcoded independently of any
|
|
134
|
+
* theme instance. This is deliberately NOT derived from
|
|
135
|
+
* whichever theme happens to register first — that would make
|
|
136
|
+
* the very first theme registered the unverified "trust me"
|
|
137
|
+
* reference. Every path listed here corresponds 1:1 to a field
|
|
138
|
+
* in ThemeTokens; if you add a field to the contract, add its
|
|
139
|
+
* path here too (a mismatch here is caught by
|
|
140
|
+
* registry.test.ts's cross-check against `light`).
|
|
141
|
+
*/
|
|
142
|
+
declare const REQUIRED_TOKEN_PATHS: readonly ["meta.name", "meta.label", "meta.description", ...string[], "color.background", "color.surface", "color.surfaceRaised", "color.border", "color.borderFocus", "color.text", "color.textMuted", "color.textInverse", "radius.sm", "radius.md", "radius.lg", "radius.xl", "radius.2xl", "radius.full", "spacing.xs", "spacing.sm", "spacing.md", "spacing.lg", "spacing.xl", "spacing.2xl", "typography.fontSans", "typography.fontMono", "typography.sizeXs", "typography.sizeSm", "typography.sizeMd", "typography.sizeLg", "typography.sizeXl", "typography.weightNormal", "typography.weightMedium", "typography.weightBold", "typography.lineHeightTight", "typography.lineHeightNormal", "shadow.xs", "shadow.sm", "shadow.md", "shadow.lg", "shadow.xl", "shadow.2xl", "shadow.inner", "elevation.dropdown", "elevation.popover", "elevation.modal", "elevation.toast", "elevation.tooltip", "motion.durationFast", "motion.durationNormal", "motion.durationSlow", "motion.easeStandard", "motion.easeEmphasized", "motion.durationInstant", "border.widthThin", "border.widthMedium", "border.widthThick", "border.style", "effects.backdropBlur"];
|
|
143
|
+
/** Returns every required path that is missing or empty on the given theme-like object. */
|
|
144
|
+
declare function findMissingTokenPaths(theme: unknown): string[];
|
|
145
|
+
|
|
146
|
+
interface AccentDefinition {
|
|
147
|
+
name: string;
|
|
148
|
+
label: string;
|
|
149
|
+
scale: ColorScale;
|
|
150
|
+
}
|
|
151
|
+
declare function registerAccent(def: AccentDefinition): void;
|
|
152
|
+
declare function getAccent(name: string): AccentDefinition | undefined;
|
|
153
|
+
declare function listAccents(): AccentDefinition[];
|
|
154
|
+
declare const DEFAULT_ACCENT = "indigo";
|
|
155
|
+
|
|
156
|
+
type Size = "xs" | "sm" | "md" | "lg" | "xl";
|
|
157
|
+
/**
|
|
158
|
+
* Every component accepts these. `theme` and `color` are two
|
|
159
|
+
* independent axes: `theme` overrides shape (radius, shadow,
|
|
160
|
+
* motion, glass/gradient/glow — see NuvoxProvider/withThemeOverride),
|
|
161
|
+
* `color` overrides brand accent only (see accents.ts/withAccentOverride)
|
|
162
|
+
* and touches nothing structural. A component can use either, both,
|
|
163
|
+
* or neither without the other being implied.
|
|
164
|
+
*/
|
|
165
|
+
interface BaseComponentProps {
|
|
166
|
+
className?: string;
|
|
167
|
+
style?: React.CSSProperties;
|
|
168
|
+
/** Component-level theme (shape) override. */
|
|
169
|
+
theme?: string;
|
|
170
|
+
/** Component-level accent (brand color) override. */
|
|
171
|
+
color?: string;
|
|
172
|
+
}
|
|
173
|
+
type Variant = "solid" | "outline" | "ghost" | "soft";
|
|
174
|
+
|
|
175
|
+
interface FieldProps {
|
|
176
|
+
disabled?: boolean;
|
|
177
|
+
required?: boolean;
|
|
178
|
+
/** Whether the field is in an invalid/error state. */
|
|
179
|
+
error?: boolean;
|
|
180
|
+
size?: Size;
|
|
181
|
+
}
|
|
182
|
+
interface FieldState {
|
|
183
|
+
isDisabled: boolean;
|
|
184
|
+
isRequired: boolean;
|
|
185
|
+
isInvalid: boolean;
|
|
186
|
+
size: Size;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
interface RatingCoreProps {
|
|
190
|
+
/** Number of stars. Default 5. */
|
|
191
|
+
max?: number;
|
|
192
|
+
/** Allow half-star increments (0.5 steps) instead of whole stars only. Default false. */
|
|
193
|
+
allowHalf?: boolean;
|
|
194
|
+
disabled?: boolean;
|
|
195
|
+
/** Displays the current value but blocks changing it — distinct from `disabled` (still focusable/announced, just not editable). Default false. */
|
|
196
|
+
readOnly?: boolean;
|
|
197
|
+
size?: Size;
|
|
198
|
+
}
|
|
199
|
+
type StarFill = "empty" | "half" | "full";
|
|
200
|
+
|
|
201
|
+
type OTPInputType = "numeric" | "alphanumeric";
|
|
202
|
+
interface OTPInputCoreProps extends FieldProps {
|
|
203
|
+
/** Number of boxes. Default 6. */
|
|
204
|
+
length?: number;
|
|
205
|
+
/** Which characters are accepted. Default "numeric". */
|
|
206
|
+
type?: OTPInputType;
|
|
207
|
+
/** Renders each filled box as a dot instead of the character — the "Pin Input" variant of this same component. Default false. */
|
|
208
|
+
mask?: boolean;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
type Placement = "top" | "bottom" | "left" | "right";
|
|
212
|
+
type Alignment = "start" | "center" | "end";
|
|
213
|
+
|
|
214
|
+
interface SelectOptionItem {
|
|
215
|
+
value: string;
|
|
216
|
+
label: string;
|
|
217
|
+
/**
|
|
218
|
+
* Optional shorter label for the closed trigger only. Falls back
|
|
219
|
+
* to `label` when omitted. Exists for cases like PhoneInput's
|
|
220
|
+
* country select, where the listbox row needs more context
|
|
221
|
+
* ("🇺🇸 US +1") than the narrow, fixed-width trigger has room for
|
|
222
|
+
* — rather than forcing one string to serve both and either
|
|
223
|
+
* cramping the trigger or truncating it.
|
|
224
|
+
*/
|
|
225
|
+
triggerLabel?: string;
|
|
226
|
+
disabled?: boolean;
|
|
227
|
+
}
|
|
228
|
+
interface SelectCoreProps extends FieldProps {
|
|
229
|
+
placement?: Placement;
|
|
230
|
+
align?: Alignment;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
interface PhoneCountry {
|
|
234
|
+
iso2: string;
|
|
235
|
+
name: string;
|
|
236
|
+
/** Digits only, no "+". */
|
|
237
|
+
dialCode: string;
|
|
238
|
+
/** Emoji flag — zero-dependency, no icon/image asset needed. */
|
|
239
|
+
flag: string;
|
|
240
|
+
}
|
|
241
|
+
interface PhoneInputCoreProps extends FieldProps {
|
|
242
|
+
/** Overrides DEFAULT_COUNTRIES with a consumer-supplied list. */
|
|
243
|
+
countries?: PhoneCountry[];
|
|
244
|
+
/** ISO 3166-1 alpha-2 code to preselect when the value has no recognizable dial code yet. Default "US". */
|
|
245
|
+
defaultCountry?: string;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
type BadgeVariant = "solid" | "outline" | "soft";
|
|
249
|
+
interface BadgeCoreProps {
|
|
250
|
+
variant?: BadgeVariant;
|
|
251
|
+
size?: Size;
|
|
252
|
+
/** Renders a small status dot instead of any label/count content. */
|
|
253
|
+
dot?: boolean;
|
|
254
|
+
/** Numeric count — 999+ caps display, same convention as the old codebase. */
|
|
255
|
+
count?: number;
|
|
256
|
+
/** Derived by the React layer from whether onDismiss was passed, not set directly. */
|
|
257
|
+
dismissible?: boolean;
|
|
258
|
+
hasIconLeft?: boolean;
|
|
259
|
+
hasIconRight?: boolean;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
type AvatarSize = Size | "2xl";
|
|
263
|
+
type AvatarShape = "circle" | "square";
|
|
264
|
+
type AvatarStatus = "online" | "offline" | "away" | "busy";
|
|
265
|
+
interface AvatarCoreProps {
|
|
266
|
+
size?: AvatarSize;
|
|
267
|
+
shape?: AvatarShape;
|
|
268
|
+
status?: AvatarStatus;
|
|
269
|
+
/** Derived by the React layer (image present and not errored), not set directly. */
|
|
270
|
+
hasImage?: boolean;
|
|
271
|
+
/** Derived by the React layer from whether an onClick was passed. */
|
|
272
|
+
isClickable?: boolean;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
type SpinnerVariant = "ring" | "dots" | "bars" | "pulse" | "dual-ring" | "ripple" | "orbit" | "bounce" | "conic" | "buffer" | "linear" | "heartbeat" | "infinity" | "hourglass" | "pinwheel" | "radar" | "wave" | "helix" | "atom" | "comet" | "gauge" | "stack" | "spiral" | "burst" | "eclipse" | "petal" | "sine" | "gear" | "pendulum" | "dancer";
|
|
276
|
+
interface SpinnerCoreProps {
|
|
277
|
+
size?: Size;
|
|
278
|
+
variant?: SpinnerVariant;
|
|
279
|
+
/** Accessible label — defaults to "Loading" if not given. */
|
|
280
|
+
label?: string;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
type DividerOrientation = "horizontal" | "vertical";
|
|
284
|
+
interface DividerCoreProps {
|
|
285
|
+
orientation?: DividerOrientation;
|
|
286
|
+
/** Derived by the React layer from whether label content was passed. */
|
|
287
|
+
hasLabel?: boolean;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
type CardVariant = "elevated" | "outlined" | "flat" | "filled";
|
|
291
|
+
type CardPadding = "none" | "sm" | "md" | "lg";
|
|
292
|
+
/** vertical: media stacked above/below content (default). horizontal: media beside content, fixed-width. */
|
|
293
|
+
type CardLayout = "vertical" | "horizontal";
|
|
294
|
+
interface CardCoreProps {
|
|
295
|
+
variant?: CardVariant;
|
|
296
|
+
padding?: CardPadding;
|
|
297
|
+
layout?: CardLayout;
|
|
298
|
+
/** Renders header/footer/badge/children on top of media with a gradient scrim, instead of stacked below it. */
|
|
299
|
+
overlay?: boolean;
|
|
300
|
+
disabled?: boolean;
|
|
301
|
+
/** Derived by the React layer from whether onClick was passed. */
|
|
302
|
+
isClickable?: boolean;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
type AlertVariant = "info" | "success" | "warning" | "danger";
|
|
306
|
+
interface AlertCoreProps {
|
|
307
|
+
variant?: AlertVariant;
|
|
308
|
+
/** Derived by the React layer from whether onDismiss was passed. */
|
|
309
|
+
dismissible?: boolean;
|
|
310
|
+
/** Derived by the React layer from whether an icon slot was explicitly hidden. */
|
|
311
|
+
hasIcon?: boolean;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
type ModalSize = Size | "full";
|
|
315
|
+
interface ModalCoreProps {
|
|
316
|
+
size?: ModalSize;
|
|
317
|
+
/** Clicking the backdrop closes the modal. Default true. */
|
|
318
|
+
closeOnBackdropClick?: boolean;
|
|
319
|
+
/** Escape closes the modal. Default true. */
|
|
320
|
+
closeOnEscape?: boolean;
|
|
321
|
+
hasTitle?: boolean;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
type ToastVariant = "info" | "success" | "warning" | "danger";
|
|
325
|
+
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* A tone, not a shape. Progress deliberately does NOT reuse the
|
|
329
|
+
* shared `Variant` union ("solid" | "outline" | "ghost" | "soft") —
|
|
330
|
+
* that describes fill treatment for interactive controls and means
|
|
331
|
+
* nothing for a meter. What varies here is semantic color, so this
|
|
332
|
+
* is its own small union, and (per CONTRACT.md Rule 5b) `success`/
|
|
333
|
+
* `warning`/`danger` are the theme-defined SEMANTIC colors, kept
|
|
334
|
+
* separate from the brand accent. `brand` is the default and is the
|
|
335
|
+
* one tone that tracks the accent.
|
|
336
|
+
*/
|
|
337
|
+
type ProgressVariant = "brand" | "success" | "warning" | "danger";
|
|
338
|
+
interface ProgressCoreProps {
|
|
339
|
+
/** 0..max. Ignored (and the bar animates) when `indeterminate`. */
|
|
340
|
+
value?: number;
|
|
341
|
+
/** Upper bound. Default 100. */
|
|
342
|
+
max?: number;
|
|
343
|
+
/** Unknown-duration state: an animated bar, no numeric value. */
|
|
344
|
+
indeterminate?: boolean;
|
|
345
|
+
size?: Size;
|
|
346
|
+
variant?: ProgressVariant;
|
|
347
|
+
/** Render the numeric percent next to the track. Default false. */
|
|
348
|
+
showValue?: boolean;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
/**
|
|
352
|
+
* Horizontal is the default (a row of tabs above their panels).
|
|
353
|
+
* Vertical changes two things at once, which is why it's a single
|
|
354
|
+
* flag and not two: the visual layout AND — per WAI-ARIA — which
|
|
355
|
+
* arrow keys move between tabs (Up/Down instead of Left/Right).
|
|
356
|
+
*/
|
|
357
|
+
type TabsOrientation = "horizontal" | "vertical";
|
|
358
|
+
/**
|
|
359
|
+
* "automatic" (the WAI-ARIA default) selects a tab the moment it's
|
|
360
|
+
* focused via the arrow keys — good for cheap panels. "manual"
|
|
361
|
+
* moves focus without selecting, requiring Enter/Space to commit —
|
|
362
|
+
* the right choice when showing a panel is expensive (a network
|
|
363
|
+
* fetch, a heavy chart) and you don't want every arrow press to
|
|
364
|
+
* trigger it.
|
|
365
|
+
*/
|
|
366
|
+
type TabsActivationMode = "automatic" | "manual";
|
|
367
|
+
/** Visual treatment of the tab row. Shape only — never encodes color meaning. */
|
|
368
|
+
type TabsVariant = "line" | "soft" | "solid";
|
|
369
|
+
interface TabsCoreProps {
|
|
370
|
+
orientation?: TabsOrientation;
|
|
371
|
+
activationMode?: TabsActivationMode;
|
|
372
|
+
variant?: TabsVariant;
|
|
373
|
+
size?: Size;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* "single" allows one open section at a time (optionally
|
|
378
|
+
* `collapsible`, so the open one can be closed to leave all shut).
|
|
379
|
+
* "multiple" lets any number be open at once. The two modes carry
|
|
380
|
+
* different value shapes (a string vs. a string[]), which is why
|
|
381
|
+
* the React props are a discriminated union on this field.
|
|
382
|
+
*/
|
|
383
|
+
type AccordionType = "single" | "multiple";
|
|
384
|
+
interface AccordionCoreProps {
|
|
385
|
+
size?: Size;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/**
|
|
389
|
+
* A menu opens below its trigger, left-aligned, by default — the
|
|
390
|
+
* conventional action-menu placement (unlike Tooltip, which centers
|
|
391
|
+
* above). Both are passthroughs to core/floating.ts so a consumer
|
|
392
|
+
* can flip a menu that would collide with the viewport edge; the
|
|
393
|
+
* positioner also flips automatically when it doesn't fit.
|
|
394
|
+
*/
|
|
395
|
+
interface DropdownCoreProps {
|
|
396
|
+
size?: Size;
|
|
397
|
+
placement?: Placement;
|
|
398
|
+
align?: Alignment;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Menu items have two visual variants: the default, and a
|
|
402
|
+
* destructive one ("danger") for actions like Delete. "danger" is a
|
|
403
|
+
* SEMANTIC color drawn from the separate success/warning/danger
|
|
404
|
+
* registry (CONTRACT.md Rule 5b) — it is not the theme accent, and
|
|
405
|
+
* it stays red across every accent so a destructive action never
|
|
406
|
+
* blends into a brand-colored menu.
|
|
407
|
+
*/
|
|
408
|
+
type DropdownItemVariant = "default" | "danger";
|
|
409
|
+
|
|
410
|
+
type SliderValue = number | readonly [number, number];
|
|
411
|
+
interface SliderCoreProps {
|
|
412
|
+
min?: number;
|
|
413
|
+
max?: number;
|
|
414
|
+
step?: number;
|
|
415
|
+
disabled?: boolean;
|
|
416
|
+
size?: Size;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
interface ComboboxOption {
|
|
420
|
+
value: string;
|
|
421
|
+
label: string;
|
|
422
|
+
disabled?: boolean;
|
|
423
|
+
}
|
|
424
|
+
interface ComboboxCoreProps extends FieldProps {
|
|
425
|
+
placement?: Placement;
|
|
426
|
+
align?: Alignment;
|
|
427
|
+
/**
|
|
428
|
+
* When the typed query matches no option and the field loses
|
|
429
|
+
* focus or Enter is pressed, this controls what happens to it:
|
|
430
|
+
* `false` (default) reverts the input back to the last committed
|
|
431
|
+
* value's label (or clears it if nothing was ever selected) — the
|
|
432
|
+
* same "you must pick a real option" behavior Select enforces.
|
|
433
|
+
* `true` commits the typed text itself as the value, letting
|
|
434
|
+
* Combobox double as a free-text field with suggestions rather
|
|
435
|
+
* than a strict picker.
|
|
436
|
+
*/
|
|
437
|
+
allowCustomValue?: boolean;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
interface DatePickerCoreProps extends FieldProps {
|
|
441
|
+
min?: Date;
|
|
442
|
+
max?: Date;
|
|
443
|
+
/** An extra predicate for one-off disabled dates (holidays, already-booked days) beyond the min/max range. */
|
|
444
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
445
|
+
weekStartsOn?: 0 | 1;
|
|
446
|
+
locale?: string;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
/** A time of day, no date attached. `hours` is 0-23 (24-hour, locale-independent internally); `minutes` is 0-59. */
|
|
450
|
+
interface TimeValue {
|
|
451
|
+
hours: number;
|
|
452
|
+
minutes: number;
|
|
453
|
+
}
|
|
454
|
+
interface TimePickerCoreProps extends FieldProps {
|
|
455
|
+
min?: TimeValue;
|
|
456
|
+
max?: TimeValue;
|
|
457
|
+
/** 12-hour (AM/PM) vs 24-hour display and parsing. Default true. */
|
|
458
|
+
use12Hour?: boolean;
|
|
459
|
+
/** An extra predicate for one-off disabled slots (e.g. already-booked times) beyond min/max. */
|
|
460
|
+
isTimeDisabled?: (time: TimeValue) => boolean;
|
|
461
|
+
locale?: string;
|
|
462
|
+
}
|
|
463
|
+
type TimePanelMode = "dial" | "digital";
|
|
464
|
+
|
|
465
|
+
type ColorPickerVariant = "both" | "presets" | "custom";
|
|
466
|
+
interface ColorPickerCoreProps extends FieldProps {
|
|
467
|
+
/** Preset swatches offered in the popover, as hex strings. Defaults to DEFAULT_PRESETS. */
|
|
468
|
+
presets?: string[];
|
|
469
|
+
/**
|
|
470
|
+
* Which part(s) of the popover to show. `"both"` (default) is the
|
|
471
|
+
* preset grid plus the custom saturation/hue panel underneath it.
|
|
472
|
+
* `"presets"` shows only the grid — a fixed palette with no
|
|
473
|
+
* arbitrary-color escape hatch. `"custom"` shows only the
|
|
474
|
+
* saturation/hue panel — no preset shortcuts at all.
|
|
475
|
+
*/
|
|
476
|
+
variant?: ColorPickerVariant;
|
|
477
|
+
}
|
|
478
|
+
declare const DEFAULT_PRESETS: string[];
|
|
479
|
+
|
|
480
|
+
type CarouselOrientation = "horizontal" | "vertical";
|
|
481
|
+
interface CarouselCoreProps {
|
|
482
|
+
/** Wrap past the last slide back to the first (and vice versa). Default false. */
|
|
483
|
+
loop?: boolean;
|
|
484
|
+
orientation?: CarouselOrientation;
|
|
485
|
+
/** Auto-advance on a timer. Default false. */
|
|
486
|
+
autoPlay?: boolean;
|
|
487
|
+
/** Milliseconds between auto-advances. Default 5000. */
|
|
488
|
+
autoPlayInterval?: number;
|
|
489
|
+
/** Pause the autoplay timer while the pointer is over the carousel. Default true. */
|
|
490
|
+
pauseOnHover?: boolean;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
type TimelineOrientation = "vertical" | "horizontal";
|
|
494
|
+
/** Vertical only — which side of the line each item's content sits on. "alternate" ignores this per-item and flips by list position (even/odd), in CSS. Ignored for horizontal orientation. */
|
|
495
|
+
type TimelineAlign = "start" | "end" | "alternate";
|
|
496
|
+
type TimelineStatus = "default" | "success" | "warning" | "danger" | "info";
|
|
497
|
+
interface TimelineCoreProps {
|
|
498
|
+
orientation?: TimelineOrientation;
|
|
499
|
+
align?: TimelineAlign;
|
|
500
|
+
}
|
|
501
|
+
interface TimelineItemCoreProps {
|
|
502
|
+
status?: TimelineStatus;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
interface CommandItem {
|
|
506
|
+
id: string;
|
|
507
|
+
label: string;
|
|
508
|
+
description?: string;
|
|
509
|
+
/** A short label for the keyboard shortcut, shown but not wired up — the consumer's own global key listener is what actually triggers `onSelect`, this is display only (e.g. "⌘K"). */
|
|
510
|
+
shortcut?: string;
|
|
511
|
+
disabled?: boolean;
|
|
512
|
+
group?: string;
|
|
513
|
+
/** Extra terms that count toward a match without being shown (e.g. "settings" also matching an item labeled "Preferences"). */
|
|
514
|
+
keywords?: string[];
|
|
515
|
+
}
|
|
516
|
+
interface CommandGroup {
|
|
517
|
+
/** `undefined` for items with no `group` set — still a real group (rendered without a header), not dropped. */
|
|
518
|
+
group: string | undefined;
|
|
519
|
+
items: CommandItem[];
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
interface PopoverCoreProps {
|
|
523
|
+
placement?: Placement;
|
|
524
|
+
align?: Alignment;
|
|
525
|
+
/**
|
|
526
|
+
* Whether the popover behaves like a modal dialog — traps focus
|
|
527
|
+
* inside (Tab cycles rather than leaving), sets aria-modal, and
|
|
528
|
+
* is the right choice when the content is itself a small form the
|
|
529
|
+
* user must finish or dismiss. Default false: a non-modal popup
|
|
530
|
+
* that still receives real focus and closes on Escape or an
|
|
531
|
+
* outside click, but doesn't trap Tab — the right default for
|
|
532
|
+
* lighter content like a menu-adjacent info panel. This is
|
|
533
|
+
* exactly the axis DatePicker's calendar panel needs to be false
|
|
534
|
+
* on: focus must be able to move between the Input and the grid
|
|
535
|
+
* without Tab getting trapped inside just the calendar.
|
|
536
|
+
*/
|
|
537
|
+
modal?: boolean;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
type SkeletonVariant = "text" | "circular" | "rectangular";
|
|
541
|
+
type SkeletonAnimation = "pulse" | "wave" | "shine" | "glow" | "none";
|
|
542
|
+
interface SkeletonCoreProps {
|
|
543
|
+
variant?: SkeletonVariant;
|
|
544
|
+
animation?: SkeletonAnimation;
|
|
545
|
+
/**
|
|
546
|
+
* Category-A-specific radius override (BUILDING-COMPONENTS.md's
|
|
547
|
+
* Category A note: "radius as an extra override prop... display
|
|
548
|
+
* primitives are the case where overriding a single shape
|
|
549
|
+
* property without a full theme override makes sense"). Only
|
|
550
|
+
* meaningful for "rectangular" — "circular" always renders fully
|
|
551
|
+
* round and "text" uses a small fixed radius regardless, the same
|
|
552
|
+
* way Card's radius prop only affects Card's own corners.
|
|
553
|
+
*/
|
|
554
|
+
radius?: string;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
type PaginationItem = number | "ellipsis";
|
|
558
|
+
interface PaginationCoreProps {
|
|
559
|
+
totalPages: number;
|
|
560
|
+
/** How many page numbers show on each side of the current page. Default 1. */
|
|
561
|
+
siblingCount?: number;
|
|
562
|
+
/** How many page numbers are always pinned at the start and end. Default 1. */
|
|
563
|
+
boundaryCount?: number;
|
|
564
|
+
size?: Size;
|
|
565
|
+
disabled?: boolean;
|
|
566
|
+
/** Renders "first page" / "last page" jump buttons. Default false. */
|
|
567
|
+
showFirstLast?: boolean;
|
|
568
|
+
/** Renders previous/next buttons. Default true. */
|
|
569
|
+
showPrevNext?: boolean;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
interface BreadcrumbCoreProps {
|
|
573
|
+
size?: Size;
|
|
574
|
+
}
|
|
575
|
+
type BreadcrumbSlot = number | "ellipsis";
|
|
576
|
+
|
|
577
|
+
interface FileUploadCoreProps extends FieldProps {
|
|
578
|
+
/** Same syntax as the native <input accept>: comma-separated extensions (".png"), MIME types ("image/png"), or MIME wildcards ("image/*"). Undefined accepts anything. */
|
|
579
|
+
accept?: string;
|
|
580
|
+
multiple?: boolean;
|
|
581
|
+
/** Files larger than this are rejected. Undefined means no limit. */
|
|
582
|
+
maxSizeBytes?: number;
|
|
583
|
+
}
|
|
584
|
+
type FileVerdict = "ok" | "type" | "size";
|
|
585
|
+
|
|
586
|
+
interface TableCoreProps {
|
|
587
|
+
size?: Size;
|
|
588
|
+
/** Alternating row background. Default false. */
|
|
589
|
+
striped?: boolean;
|
|
590
|
+
/** Borders around every cell, not just horizontal row rules. Default false. */
|
|
591
|
+
bordered?: boolean;
|
|
592
|
+
/** Keeps the header visible while the body scrolls — only has something to stick within if an ancestor bounds the table's height (e.g. a wrapping div with max-height). Default false. */
|
|
593
|
+
stickyHeader?: boolean;
|
|
594
|
+
}
|
|
595
|
+
type SortDirection = "asc" | "desc" | null;
|
|
596
|
+
/** The conventional 3-state cycle a sortable header click steps through: unsorted → asc → desc → unsorted. */
|
|
597
|
+
declare function getNextSortDirection(current: SortDirection): SortDirection;
|
|
598
|
+
type SelectAllState = "none" | "some" | "all";
|
|
599
|
+
/** The tri-state a "select all" header checkbox should show, computed from how many of the total rows are currently selected. */
|
|
600
|
+
declare function getSelectAllState(totalCount: number, selectedCount: number): SelectAllState;
|
|
601
|
+
|
|
602
|
+
type DrawerSide = "left" | "right" | "top" | "bottom";
|
|
603
|
+
type DrawerSize = Size | "full";
|
|
604
|
+
interface DrawerCoreProps {
|
|
605
|
+
/** Which edge the panel slides in from. Default "right". */
|
|
606
|
+
side?: DrawerSide;
|
|
607
|
+
/**
|
|
608
|
+
* For a left/right drawer this is the panel's width; for a
|
|
609
|
+
* top/bottom drawer it's the panel's height — "size" always means
|
|
610
|
+
* "how far the panel extends from its edge," regardless of side.
|
|
611
|
+
*/
|
|
612
|
+
size?: DrawerSize;
|
|
613
|
+
closeOnBackdropClick?: boolean;
|
|
614
|
+
closeOnEscape?: boolean;
|
|
615
|
+
hasTitle?: boolean;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
interface ContextMenuCoreProps {
|
|
619
|
+
size?: Size;
|
|
620
|
+
}
|
|
621
|
+
/** A right-click position, in viewport coordinates. */
|
|
622
|
+
interface MenuPoint {
|
|
623
|
+
x: number;
|
|
624
|
+
y: number;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
export { type TableCoreProps as $, type AccentDefinition as A, type BadgeVariant as B, type CardLayout as C, type DropdownItemVariant as D, type PhoneCountry as E, type FieldProps as F, type PhoneInputCoreProps as G, type Placement as H, type PopoverCoreProps as I, type ProgressVariant as J, type RatingCoreProps as K, type SelectOptionItem as L, type MenuPoint as M, type SemanticColor as N, type OTPInputCoreProps as O, type PaginationItem as P, type Size as Q, REQUIRED_TOKEN_PATHS as R, type SelectAllState as S, type ThemeTokens as T, type SkeletonAnimation as U, type SkeletonVariant as V, type SliderValue as W, type SortDirection as X, type SpinnerVariant as Y, type StarFill as Z, TOKEN_CATEGORIES as _, type AccordionType as a, type TabsActivationMode as a0, type TabsOrientation as a1, type TabsVariant as a2, type TimePickerCoreProps as a3, type TimeValue as a4, type TimelineAlign as a5, type TimelineCoreProps as a6, type TimelineItemCoreProps as a7, type TimelineOrientation as a8, type TimelineStatus as a9, type PaginationCoreProps as aA, type BreadcrumbCoreProps as aB, type SkeletonCoreProps as aC, type DrawerCoreProps as aD, type ContextMenuCoreProps as aE, DEFAULT_ACCENT as aF, type ToastPosition as aa, type ToastVariant as ab, type Variant as ac, defineTheme as ad, findMissingTokenPaths as ae, getAccent as af, getNextSortDirection as ag, getSelectAllState as ah, listAccents as ai, registerAccent as aj, type BadgeCoreProps as ak, type AvatarCoreProps as al, type SpinnerCoreProps as am, type DividerCoreProps as an, type CardCoreProps as ao, type AlertCoreProps as ap, type ModalCoreProps as aq, type ProgressCoreProps as ar, type TabsCoreProps as as, type AccordionCoreProps as at, type DropdownCoreProps as au, type SelectCoreProps as av, type SliderCoreProps as aw, type ComboboxCoreProps as ax, type TimePanelMode as ay, type FileUploadCoreProps as az, type AlertVariant as b, type Alignment as c, type AvatarShape as d, type AvatarSize as e, type AvatarStatus as f, type BaseComponentProps as g, type BreadcrumbSlot as h, type CardPadding as i, type CardVariant as j, type CarouselCoreProps as k, type CarouselOrientation as l, type ColorPickerCoreProps as m, type ColorScale as n, type ComboboxOption as o, type CommandGroup as p, type CommandItem as q, DEFAULT_PRESETS as r, type DatePickerCoreProps as s, type DividerOrientation as t, type DrawerSide as u, type DrawerSize as v, type FieldState as w, type FileVerdict as x, type ModalSize as y, type OTPInputType as z };
|