@cjlapao/ui-kit 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1205 -829
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +37 -0
- package/dist/index.d.cts +260 -44
- package/dist/index.d.ts +260 -44
- package/dist/index.js +1140 -767
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/CapsuleBlueprint--CgRT7dr.d.cts +0 -426
- package/dist/CapsuleBlueprint--CgRT7dr.d.ts +0 -426
- package/dist/CapsuleBlueprint-12uQWAvU.d.cts +0 -732
- package/dist/CapsuleBlueprint-12uQWAvU.d.ts +0 -732
- package/dist/CapsuleBlueprint-1FP6avn4.d.cts +0 -1017
- package/dist/CapsuleBlueprint-1FP6avn4.d.ts +0 -1017
- package/dist/CapsuleBlueprint-6DmJgar9.d.cts +0 -358
- package/dist/CapsuleBlueprint-6DmJgar9.d.ts +0 -358
- package/dist/CapsuleBlueprint-B7MPc5wu.d.cts +0 -835
- package/dist/CapsuleBlueprint-B7MPc5wu.d.ts +0 -835
- package/dist/CapsuleBlueprint-BFHAMKUF.d.cts +0 -991
- package/dist/CapsuleBlueprint-BFHAMKUF.d.ts +0 -991
- package/dist/CapsuleBlueprint-BG23ZWsl.d.cts +0 -460
- package/dist/CapsuleBlueprint-BG23ZWsl.d.ts +0 -460
- package/dist/CapsuleBlueprint-BGx-KPqS.d.cts +0 -925
- package/dist/CapsuleBlueprint-BGx-KPqS.d.ts +0 -925
- package/dist/CapsuleBlueprint-BJYVRyFD.d.cts +0 -449
- package/dist/CapsuleBlueprint-BJYVRyFD.d.ts +0 -449
- package/dist/CapsuleBlueprint-BQq4ywG4.d.cts +0 -835
- package/dist/CapsuleBlueprint-BQq4ywG4.d.ts +0 -835
- package/dist/CapsuleBlueprint-BTgmUcyF.d.cts +0 -278
- package/dist/CapsuleBlueprint-BTgmUcyF.d.ts +0 -278
- package/dist/CapsuleBlueprint-BX2YI1yC.d.cts +0 -415
- package/dist/CapsuleBlueprint-BX2YI1yC.d.ts +0 -415
- package/dist/CapsuleBlueprint-BfPODmvJ.d.cts +0 -822
- package/dist/CapsuleBlueprint-BfPODmvJ.d.ts +0 -822
- package/dist/CapsuleBlueprint-BfSPPu5k.d.cts +0 -616
- package/dist/CapsuleBlueprint-BfSPPu5k.d.ts +0 -616
- package/dist/CapsuleBlueprint-BoPkPR2J.d.cts +0 -785
- package/dist/CapsuleBlueprint-BoPkPR2J.d.ts +0 -785
- package/dist/CapsuleBlueprint-CJeLH0j2.d.cts +0 -228
- package/dist/CapsuleBlueprint-CJeLH0j2.d.ts +0 -228
- package/dist/CapsuleBlueprint-CJwXDMzM.d.cts +0 -622
- package/dist/CapsuleBlueprint-CJwXDMzM.d.ts +0 -622
- package/dist/CapsuleBlueprint-CM125BJI.d.cts +0 -811
- package/dist/CapsuleBlueprint-CM125BJI.d.ts +0 -811
- package/dist/CapsuleBlueprint-CQPeacGV.d.cts +0 -426
- package/dist/CapsuleBlueprint-CQPeacGV.d.ts +0 -426
- package/dist/CapsuleBlueprint-CQy2O0UN.d.cts +0 -889
- package/dist/CapsuleBlueprint-CQy2O0UN.d.ts +0 -889
- package/dist/CapsuleBlueprint-CRy04iCR.d.cts +0 -695
- package/dist/CapsuleBlueprint-CRy04iCR.d.ts +0 -695
- package/dist/CapsuleBlueprint-CixXdjMu.d.cts +0 -925
- package/dist/CapsuleBlueprint-CixXdjMu.d.ts +0 -925
- package/dist/CapsuleBlueprint-CjCxwO1O.d.cts +0 -786
- package/dist/CapsuleBlueprint-CjCxwO1O.d.ts +0 -786
- package/dist/CapsuleBlueprint-Cm10IA2w.d.cts +0 -342
- package/dist/CapsuleBlueprint-Cm10IA2w.d.ts +0 -342
- package/dist/CapsuleBlueprint-CoGsooJJ.d.cts +0 -492
- package/dist/CapsuleBlueprint-CoGsooJJ.d.ts +0 -492
- package/dist/CapsuleBlueprint-CpHqUsJK.d.cts +0 -786
- package/dist/CapsuleBlueprint-CpHqUsJK.d.ts +0 -786
- package/dist/CapsuleBlueprint-CrRg8EVW.d.cts +0 -358
- package/dist/CapsuleBlueprint-CrRg8EVW.d.ts +0 -358
- package/dist/CapsuleBlueprint-DGxsd0aY.d.cts +0 -785
- package/dist/CapsuleBlueprint-DGxsd0aY.d.ts +0 -785
- package/dist/CapsuleBlueprint-DYnwizSo.d.cts +0 -698
- package/dist/CapsuleBlueprint-DYnwizSo.d.ts +0 -698
- package/dist/CapsuleBlueprint-DbLSB78P.d.cts +0 -235
- package/dist/CapsuleBlueprint-DbLSB78P.d.ts +0 -235
- package/dist/CapsuleBlueprint-DfV8XBEZ.d.cts +0 -1001
- package/dist/CapsuleBlueprint-DfV8XBEZ.d.ts +0 -1001
- package/dist/CapsuleBlueprint-DiG1FUoM.d.cts +0 -757
- package/dist/CapsuleBlueprint-DiG1FUoM.d.ts +0 -757
- package/dist/CapsuleBlueprint-DvdeHC13.d.cts +0 -289
- package/dist/CapsuleBlueprint-DvdeHC13.d.ts +0 -289
- package/dist/CapsuleBlueprint-DvinXyHp.d.cts +0 -342
- package/dist/CapsuleBlueprint-DvinXyHp.d.ts +0 -342
- package/dist/CapsuleBlueprint-DwW8YOJg.d.cts +0 -925
- package/dist/CapsuleBlueprint-DwW8YOJg.d.ts +0 -925
- package/dist/CapsuleBlueprint-E069msDY.d.cts +0 -310
- package/dist/CapsuleBlueprint-E069msDY.d.ts +0 -310
- package/dist/CapsuleBlueprint-LECoxlXA.d.cts +0 -497
- package/dist/CapsuleBlueprint-LECoxlXA.d.ts +0 -497
- package/dist/CapsuleBlueprint-V9pDg6lh.d.cts +0 -247
- package/dist/CapsuleBlueprint-V9pDg6lh.d.ts +0 -247
- package/dist/CapsuleBlueprint-bOLrWbIc.d.cts +0 -858
- package/dist/CapsuleBlueprint-bOLrWbIc.d.ts +0 -858
- package/dist/CapsuleBlueprint-if_tP8K8.d.cts +0 -1022
- package/dist/CapsuleBlueprint-if_tP8K8.d.ts +0 -1022
- package/dist/CapsuleBlueprint-pP0Ima0I.d.cts +0 -768
- package/dist/CapsuleBlueprint-pP0Ima0I.d.ts +0 -768
- package/dist/CapsuleBlueprint-w82xP6zg.d.cts +0 -222
- package/dist/CapsuleBlueprint-w82xP6zg.d.ts +0 -222
- package/dist/CapsuleBlueprint-wdlxOX4L.d.cts +0 -472
- package/dist/CapsuleBlueprint-wdlxOX4L.d.ts +0 -472
- package/dist/CapsuleBlueprint-wxqu6jA3.d.cts +0 -529
- package/dist/CapsuleBlueprint-wxqu6jA3.d.ts +0 -529
|
@@ -1,1022 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* common/theme/glass.ts — Framework-agnostic glass utility module.
|
|
5
|
-
*
|
|
6
|
-
* Extracts all glass logic from Panel into reusable functions and types
|
|
7
|
-
* so that any control (Button, IconButton, DropdownButton, etc.) can
|
|
8
|
-
* compose glass styling without duplicating the Panel implementation.
|
|
9
|
-
*
|
|
10
|
-
* This file is pure TypeScript — no React, Vue, or DOM imports.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Backdrop vibrancy level for glass surfaces.
|
|
15
|
-
* - `"low"` → 1.0× saturation
|
|
16
|
-
* - `"medium"` → 1.2× saturation (default)
|
|
17
|
-
* - `"high"` → 1.4× saturation
|
|
18
|
-
* - `number` → arbitrary multiplier (0 – 2 recommended)
|
|
19
|
-
*/
|
|
20
|
-
type GlassVibrancy = "low" | "medium" | "high" | number;
|
|
21
|
-
/**
|
|
22
|
-
* Glass fill transparency level.
|
|
23
|
-
* - `"frosted"` → 65 % light / 25 % dark (default)
|
|
24
|
-
* - `"light"` → 85 % light / 35 % dark
|
|
25
|
-
* - `"clear"` → 30 % light / 10 % dark (sheer — pair with a light backdrop)
|
|
26
|
-
* - `number` → 0–1 fraction; light = round(frac × 100), dark = min(round(frac × 30), 30)
|
|
27
|
-
*
|
|
28
|
-
* Only the three presets (and their +10 hover steps) are safelisted. A numeric
|
|
29
|
-
* value emits an arbitrary opacity that Tailwind's scanner cannot see, so the
|
|
30
|
-
* fill silently disappears unless that exact step happens to be generated —
|
|
31
|
-
* see `scripts/generate-safelist.mjs`.
|
|
32
|
-
*/
|
|
33
|
-
type GlassOpacity = "frosted" | "light" | "clear" | number;
|
|
34
|
-
/**
|
|
35
|
-
* Specular highlight mode for glass surfaces.
|
|
36
|
-
* - `"none"` → no specular overlay
|
|
37
|
-
* - `"classic"` → sheen falling from the top edge
|
|
38
|
-
* - `"halo"` → broad bloom plus two off-centre corner glints
|
|
39
|
-
*/
|
|
40
|
-
type SpecularMode = "none" | "classic" | "halo";
|
|
41
|
-
|
|
42
|
-
declare const BUTTON_VARIANTS: readonly ["solid", "soft", "outline", "ghost", "link", "clear", "icon", "glass"];
|
|
43
|
-
type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
|
|
44
|
-
/** Label weight. Derived from the runtime list for the same reason. */
|
|
45
|
-
declare const BUTTON_WEIGHTS: readonly ["normal", "medium", "semibold", "bold"];
|
|
46
|
-
type ButtonWeight = (typeof BUTTON_WEIGHTS)[number];
|
|
47
|
-
/**
|
|
48
|
-
* The 21 Tailwind palette colours the kit supports.
|
|
49
|
-
*
|
|
50
|
-
* `TrueColor` is derived from this array rather than declared alongside it, so
|
|
51
|
-
* the runtime list and the type can never drift — adding a colour here adds it
|
|
52
|
-
* to the type, the generated theme, and every consumer that enumerates colours.
|
|
53
|
-
*/
|
|
54
|
-
declare const TRUE_COLORS: readonly ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "rose", "slate", "gray", "zinc", "neutral", "stone"];
|
|
55
|
-
/**
|
|
56
|
-
* TrueColor is the only valid color type in the ui-kit theme system.
|
|
57
|
-
* All components, tokens, and utilities must use TrueColor exclusively.
|
|
58
|
-
*/
|
|
59
|
-
type TrueColor = (typeof TRUE_COLORS)[number];
|
|
60
|
-
/**
|
|
61
|
-
* The fill class for a dot/swatch of each TrueColor: the 500 step in light
|
|
62
|
-
* mode, the 400 step in dark. Literal per colour — never interpolated — so
|
|
63
|
-
* Tailwind's scanner always sees them; the helper is what components share.
|
|
64
|
-
*/
|
|
65
|
-
declare const TRUE_COLOR_DOT_CLASSES: Record<TrueColor, string>;
|
|
66
|
-
/** Dot/swatch fill for a TrueColor. */
|
|
67
|
-
declare function getTrueColorDotClass(tone: TrueColor): string;
|
|
68
|
-
/**
|
|
69
|
-
* The ink class for a TrueColor: the 500 step in light mode, the 400 step
|
|
70
|
-
* in dark — what SVG strokes (`stroke-current`) and legends use where a
|
|
71
|
-
* fill class would not apply. Literal per colour, as above.
|
|
72
|
-
*/
|
|
73
|
-
declare const TRUE_COLOR_TEXT_CLASSES: Record<TrueColor, string>;
|
|
74
|
-
/** Ink (stroke/text) class for a TrueColor. */
|
|
75
|
-
declare function getTrueColorTextClass(tone: TrueColor): string;
|
|
76
|
-
/**
|
|
77
|
-
* Shared size type used across all frameworks and components.
|
|
78
|
-
* Replaces both the old ThemeSize (dead code) and ModalSize.
|
|
79
|
-
*/
|
|
80
|
-
type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "2xl" | "3xl" | "full";
|
|
81
|
-
/**
|
|
82
|
-
* The size scale every interactive control shares. Derived from the runtime
|
|
83
|
-
* list so the two cannot drift, and so demos/docs can enumerate it.
|
|
84
|
-
*/
|
|
85
|
-
declare const CONTROL_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
|
|
86
|
-
type ControlSize = (typeof CONTROL_SIZES)[number];
|
|
87
|
-
/**
|
|
88
|
-
* The two layouts a linear control can take.
|
|
89
|
-
*
|
|
90
|
-
* This union was declared independently in `Slider`, `Rating`, `AppDivider`,
|
|
91
|
-
* `Stepper` and `Tabs` (five names for one scale), so a rename or addition in
|
|
92
|
-
* the theme would never reach any of them. It lives here once; each control
|
|
93
|
-
* keeps its own alias (`SliderOrientation`, …) so call sites and the barrels
|
|
94
|
-
* are unaffected.
|
|
95
|
-
*/
|
|
96
|
-
declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
|
|
97
|
-
type Orientation = (typeof ORIENTATIONS)[number];
|
|
98
|
-
/**
|
|
99
|
-
* The geometry of an interactive control at each shared size.
|
|
100
|
-
*
|
|
101
|
-
* Every control in the trigger family needs the same answer to "how big is the
|
|
102
|
-
* icon, the box, the spinner at this size". That table was copy-pasted into
|
|
103
|
-
* `Button` (text padding, icon-only padding, icon and spinner sizes) and
|
|
104
|
-
* `IconButton` (square box, icon, `<Spinner>` size) — two copies of one scale,
|
|
105
|
-
* drifting independently. It lives here once; the components import it.
|
|
106
|
-
*/
|
|
107
|
-
type ControlSizeTokens = {
|
|
108
|
-
/** Font size and padding of a labelled control. */
|
|
109
|
-
text: string;
|
|
110
|
-
/** Padding of a square (icon-only) control. */
|
|
111
|
-
iconOnly: string;
|
|
112
|
-
/** Fixed box of a square control (`IconButton`). */
|
|
113
|
-
box: string;
|
|
114
|
-
/** Space between an icon and its label. */
|
|
115
|
-
gap: string;
|
|
116
|
-
/** Icon dimensions at this control size — identical across controls. */
|
|
117
|
-
icon: string;
|
|
118
|
-
/** Dimensions of the inline spinner inside a labelled control. */
|
|
119
|
-
spinner: string;
|
|
120
|
-
/** Size to pass to `<Spinner>` inside a square control. */
|
|
121
|
-
spinnerSize: ControlSize;
|
|
122
|
-
};
|
|
123
|
-
declare const getControlSizeTokens: (size: ControlSize) => ControlSizeTokens;
|
|
124
|
-
/**
|
|
125
|
-
* The corner radius every trigger-family control shares, so a `Button` next to
|
|
126
|
-
* an `Input` is the same box (both `rounded-lg`). Panel-family containers use
|
|
127
|
-
* `DEFAULT_SURFACE_CORNER` instead — a different scale, deliberately.
|
|
128
|
-
*/
|
|
129
|
-
declare const DEFAULT_TRIGGER_CORNER = "rounded-lg";
|
|
130
|
-
/**
|
|
131
|
-
* Strength of a decorative glow behind a control (currently `SearchBar`'s
|
|
132
|
-
* gradient variant).
|
|
133
|
-
*/
|
|
134
|
-
declare const GLOW_INTENSITIES: readonly ["subtle", "soft", "medium", "strong"];
|
|
135
|
-
type GlowIntensity = (typeof GLOW_INTENSITIES)[number];
|
|
136
|
-
/**
|
|
137
|
-
* Surface treatments shared by every text-entry control — `Input`, `Textarea`,
|
|
138
|
-
* `SearchBar`. Defined once here so the three are the same box when they sit
|
|
139
|
-
* next to each other in a form.
|
|
140
|
-
*/
|
|
141
|
-
declare const INPUT_VARIANTS: readonly ["flat", "elevated", "ghost", "underline", "glass", "gradient"];
|
|
142
|
-
type InputVariant = (typeof INPUT_VARIANTS)[number];
|
|
143
|
-
type InputVariantTokens = {
|
|
144
|
-
/** Border, fill, radius, shadow, backdrop. */
|
|
145
|
-
surface: string;
|
|
146
|
-
/** Text and placeholder colours. */
|
|
147
|
-
text: string;
|
|
148
|
-
/** Resting colour for a leading icon or other adornment. */
|
|
149
|
-
icon: string;
|
|
150
|
-
/** True when the surface is see-through and sits over unknown content. */
|
|
151
|
-
translucent: boolean;
|
|
152
|
-
};
|
|
153
|
-
/**
|
|
154
|
-
* The variant's surface with its border colour removed, keeping the width and
|
|
155
|
-
* sides.
|
|
156
|
-
*
|
|
157
|
-
* A validation state paints its own border colour, and `border-rose-500`
|
|
158
|
-
* beside the variant's `border-neutral-300` is a same-specificity collision
|
|
159
|
-
* whose winner is emission order — measured in the built stylesheet,
|
|
160
|
-
* `.border-emerald-500` lands *before* `.border-neutral-300` and
|
|
161
|
-
* `.border-rose-500` after it, so an errored field turned rose and a
|
|
162
|
-
* successful one stayed grey. Strip the colour so only one class can apply.
|
|
163
|
-
*/
|
|
164
|
-
declare const stripBorderColor: (surface: string) => string;
|
|
165
|
-
/** True when a caller-supplied class string sets a text colour of its own. */
|
|
166
|
-
declare const hasTextColor: (className?: string) => boolean;
|
|
167
|
-
/**
|
|
168
|
-
* A class string with its text colour removed.
|
|
169
|
-
*
|
|
170
|
-
* Same trap as `stripBorderColor`: a component's own `text-neutral-500` and a
|
|
171
|
-
* caller's `text-emerald-600` are the same specificity, so the winner is
|
|
172
|
-
* emission order in the built stylesheet — which means a documented override
|
|
173
|
-
* works for some colours and silently does nothing for others.
|
|
174
|
-
*/
|
|
175
|
-
declare const stripTextColor: (className: string) => string;
|
|
176
|
-
declare const getInputVariantTokens: (variant: InputVariant) => InputVariantTokens;
|
|
177
|
-
type FieldToneTokens = {
|
|
178
|
-
/** Border colour while anything inside the field has focus. */
|
|
179
|
-
focusBorder: string;
|
|
180
|
-
/** Glow ring while anything inside the field has focus. */
|
|
181
|
-
focusRing: string;
|
|
182
|
-
/** Leading/trailing icon colour while the field has focus. */
|
|
183
|
-
icon: string;
|
|
184
|
-
/** Focus ring for an inline trailing button. */
|
|
185
|
-
buttonFocusRing: string;
|
|
186
|
-
};
|
|
187
|
-
declare const getFieldToneTokens: (color: TrueColor) => FieldToneTokens;
|
|
188
|
-
type FieldSizeTokens = {
|
|
189
|
-
px: string;
|
|
190
|
-
py: string;
|
|
191
|
-
/** `underline` has no box to inset from, and needs room above the rule. */
|
|
192
|
-
underlinePy: string;
|
|
193
|
-
text: string;
|
|
194
|
-
icon: ControlSize;
|
|
195
|
-
/** Inline trailing button. */
|
|
196
|
-
button: string;
|
|
197
|
-
};
|
|
198
|
-
/** Padding and type scale, so any two fields line up when stacked. */
|
|
199
|
-
declare const FIELD_SIZE_STYLES: Record<ControlSize, FieldSizeTokens>;
|
|
200
|
-
declare const getFieldSizeTokens: (size: ControlSize) => FieldSizeTokens;
|
|
201
|
-
/**
|
|
202
|
-
* Border only at rest; the ring is part of the focus state, exactly as it is
|
|
203
|
-
* for the tone tokens. A status used to add a bare `ring-2 ring-inset` at rest
|
|
204
|
-
* with no ring *colour* — an unset ring colour resolves to `currentColor`, so
|
|
205
|
-
* every errored or successful field carried a near-black 2px halo inside its
|
|
206
|
-
* coloured border.
|
|
207
|
-
*
|
|
208
|
-
* These also carry no copy colour. Forcing `text-neutral-900 dark:text-neutral-100`
|
|
209
|
-
* alongside the border costs an errored `underline` or `glass` field the
|
|
210
|
-
* high-contrast pair it needs to stay legible over a backdrop.
|
|
211
|
-
*/
|
|
212
|
-
declare const FIELD_STATUS_CLASSES: Record<"error" | "success", string>;
|
|
213
|
-
/**
|
|
214
|
-
* Surface treatments for containers — `Panel` and anything built on it
|
|
215
|
-
* (`FormSection`). Kept here so the type and the text that sits on those
|
|
216
|
-
* surfaces are defined once, not per component.
|
|
217
|
-
*/
|
|
218
|
-
declare const SURFACE_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass"];
|
|
219
|
-
type SurfaceVariant = (typeof SURFACE_VARIANTS)[number];
|
|
220
|
-
/**
|
|
221
|
-
* The button a card surface implies — what a card CTA wears when it is not
|
|
222
|
-
* given a variant of its own. An outlined card offers an outlined button.
|
|
223
|
-
*/
|
|
224
|
-
declare const SURFACE_TO_BUTTON_VARIANT: Record<SurfaceVariant, ButtonVariant>;
|
|
225
|
-
/**
|
|
226
|
-
* The surface family plus `plain` — "draw a card, or draw nothing at all".
|
|
227
|
-
*
|
|
228
|
-
* A control that may already sit inside a card the app owns needs a way to say
|
|
229
|
-
* "no surface of my own"; nine components had each spelled that out for
|
|
230
|
-
* themselves (`PanelVariant | "plain"` seven times, `[...SURFACE_VARIANTS,
|
|
231
|
-
* "plain"]` twice) and only one of them exported a runtime list, so demos could
|
|
232
|
-
* not enumerate the others. Same list, nine names: the day `SURFACE_VARIANTS`
|
|
233
|
-
* gains a member, eight of them keep working only by luck.
|
|
234
|
-
*/
|
|
235
|
-
declare const PLAIN_SURFACE_VARIANTS: readonly ["elevated", "outlined", "subtle", "tonal", "default", "glass", "simple", "liquid-glass", "plain"];
|
|
236
|
-
type PlainSurfaceVariant = (typeof PLAIN_SURFACE_VARIANTS)[number];
|
|
237
|
-
type SurfaceTextTokens = {
|
|
238
|
-
/** Section and card headings. */
|
|
239
|
-
heading: string;
|
|
240
|
-
/** Body copy. */
|
|
241
|
-
body: string;
|
|
242
|
-
/** Secondary copy — descriptions under a label. */
|
|
243
|
-
description: string;
|
|
244
|
-
/** Tertiary copy — hints, counters, "optional" markers. */
|
|
245
|
-
muted: string;
|
|
246
|
-
/** Hairline between regions of the surface. */
|
|
247
|
-
divider: string;
|
|
248
|
-
translucent: boolean;
|
|
249
|
-
};
|
|
250
|
-
declare const getSurfaceTextTokens: (variant: SurfaceVariant) => SurfaceTextTokens;
|
|
251
|
-
/**
|
|
252
|
-
* A full-bleed interactive region on a container surface — a disclosure header,
|
|
253
|
-
* a clickable card row.
|
|
254
|
-
*
|
|
255
|
-
* Two rules learned the hard way, both encoded here so callers cannot get them
|
|
256
|
-
* wrong: a ring colour is inert without a ring *width*, and an outer ring is
|
|
257
|
-
* clipped by any ancestor with `overflow: hidden` (which every `Panel` has), so
|
|
258
|
-
* the ring is inset.
|
|
259
|
-
*/
|
|
260
|
-
type SurfaceTriggerTokens = {
|
|
261
|
-
/** Background wash on hover. Low-alpha, so it works on glass too. */
|
|
262
|
-
hover: string;
|
|
263
|
-
/** Complete focus indicator: outline reset, width, inset, colour. */
|
|
264
|
-
focusRing: string;
|
|
265
|
-
};
|
|
266
|
-
declare const getSurfaceTriggerTokens: (color: TrueColor) => SurfaceTriggerTokens;
|
|
267
|
-
/**
|
|
268
|
-
* Corner radius scale for container surfaces.
|
|
269
|
-
*
|
|
270
|
-
* The token names are historical and do NOT map 1:1 onto Tailwind's radius
|
|
271
|
-
* utilities — `rounded-sm` here is Tailwind's `rounded-lg`. They are kept as
|
|
272
|
-
* they are because the whole kit already calls them by these names and the
|
|
273
|
-
* scale itself is monotonic and correct; renaming would silently reshape every
|
|
274
|
-
* existing card. `getSurfaceCornerRem` exposes the real radius so a demo can
|
|
275
|
-
* label them honestly.
|
|
276
|
-
*
|
|
277
|
-
* Capsule radii (`rounded-full` / `pill`) are not part of the container scale:
|
|
278
|
-
* a capsule is a shape, and the `Pill` component owns it. Containers that need
|
|
279
|
-
* one take a `rounded-full` class directly.
|
|
280
|
-
*/
|
|
281
|
-
declare const SURFACE_CORNERS: readonly ["none", "rounded", "rounded-sm", "rounded-md", "rounded-lg", "rounded-xl"];
|
|
282
|
-
type SurfaceCorner = (typeof SURFACE_CORNERS)[number];
|
|
283
|
-
/** The radius a container uses when the caller does not pick one. */
|
|
284
|
-
declare const DEFAULT_SURFACE_CORNER: SurfaceCorner;
|
|
285
|
-
declare const getSurfaceCornerClass: (corner: SurfaceCorner) => string;
|
|
286
|
-
declare const getSurfaceCornerRem: (corner: SurfaceCorner) => string;
|
|
287
|
-
/**
|
|
288
|
-
* Container padding, on the same scale every control uses plus a `none` step,
|
|
289
|
-
* so a Panel's padding and the Button inside it are described in one language.
|
|
290
|
-
*/
|
|
291
|
-
declare const SURFACE_PADDINGS: readonly ["none", "xs", "sm", "md", "lg", "xl"];
|
|
292
|
-
type SurfacePadding = "none" | ControlSize;
|
|
293
|
-
/**
|
|
294
|
-
* The header seam. `SideMenu` draws it below its logo block, and `PageHeader`
|
|
295
|
-
* continues it into the main column; both paint these same classes on their
|
|
296
|
-
* facing edges, so the horizontal line the user sees crossing the shell is
|
|
297
|
-
* spelled exactly once. A component that rounded, padded or recoloured past
|
|
298
|
-
* these would visibly break the seam where the two meet.
|
|
299
|
-
*/
|
|
300
|
-
declare const SIDE_MENU_HEADER_HEIGHT = "h-15";
|
|
301
|
-
declare const SIDE_MENU_HEADER_SEAM = "border-gray-200 dark:border-neutral-700";
|
|
302
|
-
declare const SIDE_MENU_HEADER_FILL = "bg-white dark:bg-neutral-900";
|
|
303
|
-
declare const getSurfacePaddingClass: (padding: SurfacePadding) => string;
|
|
304
|
-
/** Every padding token but `none`, for the callers that require a real inset. */
|
|
305
|
-
declare const getSurfacePaddingClasses: () => Record<SurfacePadding, string>;
|
|
306
|
-
/**
|
|
307
|
-
* The tones that read as "no tint". Consumers that tint chrome per tone
|
|
308
|
-
* (Table's header band, for instance) route these through the neutral
|
|
309
|
-
* treatment instead of painting a grey-blue header.
|
|
310
|
-
*/
|
|
311
|
-
declare const NEUTRAL_TONES: TrueColor[];
|
|
312
|
-
/**
|
|
313
|
-
* Cell density for data grids. Deliberately orthogonal to the surface
|
|
314
|
-
* variant: the variant decides how the container is drawn, the density how
|
|
315
|
-
* tight the cells inside it sit. A compact table on glass must read the same
|
|
316
|
-
* as a compact table on an outlined card.
|
|
317
|
-
*/
|
|
318
|
-
declare const TABLE_DENSITIES: readonly ["default", "compact", "minimal"];
|
|
319
|
-
type TableDensity = (typeof TABLE_DENSITIES)[number];
|
|
320
|
-
type TableDensityTokens = {
|
|
321
|
-
/** Padding + text size for body and header cells. */
|
|
322
|
-
cell: string;
|
|
323
|
-
/** Leading cell of a row (overrides `cell`'s left padding). */
|
|
324
|
-
sideLeft: string;
|
|
325
|
-
/** Trailing cell of a row (overrides `cell`'s right padding). */
|
|
326
|
-
sideRight: string;
|
|
327
|
-
/** Vertical padding inside the cell's inner flex wrapper. */
|
|
328
|
-
contentVertical: string;
|
|
329
|
-
};
|
|
330
|
-
declare const getTableDensityTokens: (density: TableDensity) => TableDensityTokens;
|
|
331
|
-
/**
|
|
332
|
-
* Geometry and opacity of the `gradient` variant's glow.
|
|
333
|
-
*
|
|
334
|
-
* `pad` is reserved on the control's own wrapper and `inset` positions the glow
|
|
335
|
-
* inside it, so the halo is drawn **within the control's layout box**. Painting
|
|
336
|
-
* it outside — the obvious way — means any ancestor with `overflow: auto`
|
|
337
|
-
* clips it, and `Panel`'s body is `overflow-auto` by default. Same rule as the
|
|
338
|
-
* inset focus ring.
|
|
339
|
-
*/
|
|
340
|
-
type GlowTokens = {
|
|
341
|
-
/** Padding reserved on the wrapper to hold the halo. */
|
|
342
|
-
pad: string;
|
|
343
|
-
/** Glow position inside that padding. The gap left over absorbs the blur. */
|
|
344
|
-
inset: string;
|
|
345
|
-
blur: string;
|
|
346
|
-
idleOpacity: number;
|
|
347
|
-
focusOpacity: number;
|
|
348
|
-
};
|
|
349
|
-
declare const getGlowTokens: (intensity: GlowIntensity) => GlowTokens;
|
|
350
|
-
/**
|
|
351
|
-
* Glow gradient stops: the tone's 600 and 400 shades, read from Tailwind's own
|
|
352
|
-
* custom properties rather than a hard-coded hex table.
|
|
353
|
-
*/
|
|
354
|
-
declare const resolveGlowGradient: (tone: TrueColor, from?: string, to?: string) => [string, string];
|
|
355
|
-
/**
|
|
356
|
-
* Surface treatments for the `SideMenu` container.
|
|
357
|
-
*
|
|
358
|
-
* `sidebar` is the kit's standing look (a translucent blur pushed into the
|
|
359
|
-
* layout), `inset` is a flat panel with a hairline on the content edge,
|
|
360
|
-
* `floating` is a detached rounded card, `floating-glass` is that card in the
|
|
361
|
-
* kit's liquid-glass language, and `glass` is the liquid-glass language flush
|
|
362
|
-
* in the layout — both glass treatments are tinted with the menu's tone. The
|
|
363
|
-
* rows inside a menu take the matching treatment automatically.
|
|
364
|
-
*/
|
|
365
|
-
declare const SIDEBAR_VARIANTS: readonly ["sidebar", "inset", "floating", "floating-glass", "glass"];
|
|
366
|
-
type SidebarVariant = (typeof SIDEBAR_VARIANTS)[number];
|
|
367
|
-
/**
|
|
368
|
-
* How a `SideMenu` collapses on desktop.
|
|
369
|
-
*
|
|
370
|
-
* `icon` shrinks it to an icon rail, `offcanvas` removes the panel from the
|
|
371
|
-
* layout entirely (a small handle at the edge opens it again), and `none`
|
|
372
|
-
* makes the panel non-collapsible.
|
|
373
|
-
*/
|
|
374
|
-
declare const SIDEBAR_COLLAPSIBLE_MODES: readonly ["icon", "offcanvas", "none"];
|
|
375
|
-
type SidebarCollapsible = (typeof SIDEBAR_COLLAPSIBLE_MODES)[number];
|
|
376
|
-
/** Which edge of the layout the `SideMenu` sits on. */
|
|
377
|
-
declare const SIDEBAR_SIDES: readonly ["left", "right"];
|
|
378
|
-
type SidebarSide = (typeof SIDEBAR_SIDES)[number];
|
|
379
|
-
/**
|
|
380
|
-
* The media query at which a responsive `SideMenu` becomes an offcanvas
|
|
381
|
-
* overlay (below it) instead of using its desktop collapsible mode (above it).
|
|
382
|
-
*/
|
|
383
|
-
declare const SIDEBAR_MOBILE_QUERY = "(max-width: 1023px)";
|
|
384
|
-
interface SideMenuItemTokens {
|
|
385
|
-
/** Fill of the active row. */
|
|
386
|
-
bg: string;
|
|
387
|
-
/** Copy of the active row. */
|
|
388
|
-
text: string;
|
|
389
|
-
/** Wash under the cursor on an idle row. */
|
|
390
|
-
hoverBg: string;
|
|
391
|
-
/** Copy of an idle row under the cursor. */
|
|
392
|
-
hoverText: string;
|
|
393
|
-
/** Icon of the active row. */
|
|
394
|
-
iconActive: string;
|
|
395
|
-
/** Icon of an idle row under the cursor. */
|
|
396
|
-
iconHover: string;
|
|
397
|
-
}
|
|
398
|
-
declare const getSideMenuItemTokens: (color: TrueColor) => SideMenuItemTokens;
|
|
399
|
-
/**
|
|
400
|
-
* Resting copy for an idle `SideMenu` row, per surface context.
|
|
401
|
-
*
|
|
402
|
-
* A see-through surface composites over unknown content, so the light end of
|
|
403
|
-
* the neutral scale disappears on it — the same two-step rule as
|
|
404
|
-
* `getSurfaceTextTokens`.
|
|
405
|
-
*/
|
|
406
|
-
declare const SIDEBAR_IDLE_COPY: {
|
|
407
|
-
readonly solid: {
|
|
408
|
-
readonly text: "text-neutral-600 dark:text-neutral-400";
|
|
409
|
-
readonly icon: "text-neutral-400 dark:text-neutral-500";
|
|
410
|
-
};
|
|
411
|
-
readonly glass: {
|
|
412
|
-
readonly text: "text-neutral-800 dark:text-neutral-100";
|
|
413
|
-
readonly icon: "text-neutral-600 dark:text-neutral-300";
|
|
414
|
-
};
|
|
415
|
-
};
|
|
416
|
-
type SidebarIdleCopyKind = keyof typeof SIDEBAR_IDLE_COPY;
|
|
417
|
-
interface SidebarSurfaceTokens {
|
|
418
|
-
/** Fill and blur of the layer painted behind the content. */
|
|
419
|
-
fill: string;
|
|
420
|
-
/**
|
|
421
|
-
* Opaque counterpart of `fill`, for states where the panel grows over other
|
|
422
|
-
* content (the hover-rail expansion) and must not show it through. A
|
|
423
|
-
* translucent `fill` there reads as a second, see-through layer.
|
|
424
|
-
*/
|
|
425
|
-
solidFill: string;
|
|
426
|
-
/** Edge treatment. Empty when the panel is flush and borderless. */
|
|
427
|
-
border: string;
|
|
428
|
-
/** Which edges carry the border: the content-facing one only, or all. */
|
|
429
|
-
borderSides: "start" | "all";
|
|
430
|
-
/** Shadow cast toward the content (left-side panel). */
|
|
431
|
-
shadow: string;
|
|
432
|
-
/** Shadow cast toward the content (right-side panel). */
|
|
433
|
-
shadowRight: string;
|
|
434
|
-
/** Corner radius. Empty when flush. */
|
|
435
|
-
radius: string;
|
|
436
|
-
/** Offset from the layout edges ("" = flush, a margin when detached). */
|
|
437
|
-
offset: string;
|
|
438
|
-
/** Whether the row copy needs the see-through contrast step. */
|
|
439
|
-
idleCopy: SidebarIdleCopyKind;
|
|
440
|
-
}
|
|
441
|
-
/**
|
|
442
|
-
* The container treatment for a `SideMenu` variant. The glass treatments are
|
|
443
|
-
* resolved from the shared glass module at the call site, so their fill is
|
|
444
|
-
* tinted with the menu's tone and cannot drift from `Panel`'s glass.
|
|
445
|
-
* `floating-glass` is the glass treatment with the floating card's geometry
|
|
446
|
-
* (offset, radius) layered on top.
|
|
447
|
-
*/
|
|
448
|
-
declare const getSidebarSurfaceTokens: (variant: SidebarVariant, color: TrueColor) => SidebarSurfaceTokens;
|
|
449
|
-
type ButtonTheme = Record<ButtonVariant, Record<TrueColor, string>>;
|
|
450
|
-
type ButtonHoverTheme = Record<ButtonVariant, Record<TrueColor, string>>;
|
|
451
|
-
type ButtonActiveTheme = Record<ButtonVariant, Record<TrueColor, string>>;
|
|
452
|
-
type ButtonActiveHoverTheme = Record<ButtonVariant, Record<TrueColor, string>>;
|
|
453
|
-
type ToggleTheme = Record<TrueColor, string>;
|
|
454
|
-
type CheckboxTheme = Record<TrueColor, string>;
|
|
455
|
-
type SpinnerTheme = Record<TrueColor, [string, string, string, string]>;
|
|
456
|
-
type LoaderTheme = Record<TrueColor, {
|
|
457
|
-
track: string;
|
|
458
|
-
bar: string;
|
|
459
|
-
}>;
|
|
460
|
-
type MultiToggleTheme = Record<TrueColor, {
|
|
461
|
-
active: string;
|
|
462
|
-
activeText: string;
|
|
463
|
-
indicator: string;
|
|
464
|
-
hover: string;
|
|
465
|
-
}>;
|
|
466
|
-
type MultiToggleVariantTokens = {
|
|
467
|
-
softIndicator: string;
|
|
468
|
-
activeText: string;
|
|
469
|
-
hover: string;
|
|
470
|
-
};
|
|
471
|
-
type MultiToggleVariantTheme = Record<TrueColor, MultiToggleVariantTokens>;
|
|
472
|
-
type TabsColorTokens = {
|
|
473
|
-
hoverText: string;
|
|
474
|
-
activeText: string;
|
|
475
|
-
onAccentText: string;
|
|
476
|
-
focusRing: string;
|
|
477
|
-
accentBg: string;
|
|
478
|
-
subtleBg: string;
|
|
479
|
-
subtleHoverBg: string;
|
|
480
|
-
segmentedContainer: string;
|
|
481
|
-
badgeSubtle: string;
|
|
482
|
-
badgeStrong: string;
|
|
483
|
-
badgeOnAccent: string;
|
|
484
|
-
underlineActive: string;
|
|
485
|
-
};
|
|
486
|
-
type TabsTheme = Record<TrueColor, TabsColorTokens>;
|
|
487
|
-
type PanelToneConfig = {
|
|
488
|
-
border: string;
|
|
489
|
-
/**
|
|
490
|
-
* Hairline for the `outlined` variant. Deliberately lighter than `border`
|
|
491
|
-
* and paired with a low-alpha dark value, so the outline reads as a hairline
|
|
492
|
-
* in both modes instead of a hard rule in light mode.
|
|
493
|
-
*/
|
|
494
|
-
outlineBorder: string;
|
|
495
|
-
heading: string;
|
|
496
|
-
muted: string;
|
|
497
|
-
badge: string;
|
|
498
|
-
subtleBg: string;
|
|
499
|
-
tonalBg: string;
|
|
500
|
-
glassBg: string;
|
|
501
|
-
glassBorder: string;
|
|
502
|
-
liquidBg: string;
|
|
503
|
-
liquidBorder: string;
|
|
504
|
-
liquidShadow: string;
|
|
505
|
-
liquidHeading: string;
|
|
506
|
-
overlayGradient: string;
|
|
507
|
-
decorationShape: string;
|
|
508
|
-
decorationGradient: string;
|
|
509
|
-
};
|
|
510
|
-
type PanelTheme = Record<TrueColor, PanelToneConfig>;
|
|
511
|
-
type StepperToneConfig = {
|
|
512
|
-
activeBg: string;
|
|
513
|
-
activeText: string;
|
|
514
|
-
completedBg: string;
|
|
515
|
-
completedText: string;
|
|
516
|
-
pendingBorder: string;
|
|
517
|
-
pendingText: string;
|
|
518
|
-
underlineBase: string;
|
|
519
|
-
};
|
|
520
|
-
type StepperTheme = Record<TrueColor, StepperToneConfig>;
|
|
521
|
-
type BadgeTheme = Record<TrueColor, string>;
|
|
522
|
-
type PillTheme = Record<TrueColor, Record<"solid" | "soft" | "outline", {
|
|
523
|
-
base: string;
|
|
524
|
-
border?: string;
|
|
525
|
-
}>>;
|
|
526
|
-
type AlertTheme = Record<TrueColor, {
|
|
527
|
-
subtle: string;
|
|
528
|
-
solid: string;
|
|
529
|
-
outline: string;
|
|
530
|
-
icon: string;
|
|
531
|
-
text: string;
|
|
532
|
-
border: string;
|
|
533
|
-
dismiss: string;
|
|
534
|
-
}>;
|
|
535
|
-
type StatTileTheme = Record<TrueColor, {
|
|
536
|
-
decorationBg: string;
|
|
537
|
-
iconColor: string;
|
|
538
|
-
divider: string;
|
|
539
|
-
}>;
|
|
540
|
-
type ButtonSelectorColorTokens = {
|
|
541
|
-
selectedBorder: string;
|
|
542
|
-
selectedBg: string;
|
|
543
|
-
selectedIcon: string;
|
|
544
|
-
selectedLabel: string;
|
|
545
|
-
selectedIndicatorBg: string;
|
|
546
|
-
selectedIndicatorBorder: string;
|
|
547
|
-
selectedIndicatorDot: string;
|
|
548
|
-
};
|
|
549
|
-
type ButtonSelectorTheme = Record<TrueColor, ButtonSelectorColorTokens>;
|
|
550
|
-
interface ThemeDefinition {
|
|
551
|
-
button: ButtonTheme;
|
|
552
|
-
buttonHover: ButtonHoverTheme;
|
|
553
|
-
buttonActive: ButtonActiveTheme;
|
|
554
|
-
buttonActiveHover: ButtonActiveHoverTheme;
|
|
555
|
-
toggle: ToggleTheme;
|
|
556
|
-
checkbox: CheckboxTheme;
|
|
557
|
-
spinner: SpinnerTheme;
|
|
558
|
-
loader: LoaderTheme;
|
|
559
|
-
multiToggle: MultiToggleTheme;
|
|
560
|
-
multiToggleVariant: MultiToggleVariantTheme;
|
|
561
|
-
tabs: TabsTheme;
|
|
562
|
-
panel: PanelTheme;
|
|
563
|
-
stepper: StepperTheme;
|
|
564
|
-
badge: BadgeTheme;
|
|
565
|
-
pill: PillTheme;
|
|
566
|
-
alert: AlertTheme;
|
|
567
|
-
statTile: StatTileTheme;
|
|
568
|
-
buttonSelector: ButtonSelectorTheme;
|
|
569
|
-
}
|
|
570
|
-
type DeepPartial<T> = {
|
|
571
|
-
[K in keyof T]?: T[K] extends Record<string, unknown> ? DeepPartial<T[K]> : T[K];
|
|
572
|
-
};
|
|
573
|
-
declare const configureTheme: (overrides: DeepPartial<ThemeDefinition>) => void;
|
|
574
|
-
declare const resetTheme: () => void;
|
|
575
|
-
declare const getButtonColorClasses: (variant: ButtonVariant, color: TrueColor) => string;
|
|
576
|
-
declare const getButtonHoverClasses: (variant: ButtonVariant, color: TrueColor) => string;
|
|
577
|
-
declare const getButtonActiveClasses: (variant: ButtonVariant, color: TrueColor) => string;
|
|
578
|
-
declare const getButtonActiveHoverClasses: (variant: ButtonVariant, color: TrueColor) => string;
|
|
579
|
-
declare const getButtonBaseClasses: (variant: ButtonVariant, color: TrueColor) => string;
|
|
580
|
-
/**
|
|
581
|
-
* The `ButtonVariant`s that read as a slider.
|
|
582
|
-
*
|
|
583
|
-
* `link` and `clear` are text treatments — a slider has no text to treat —
|
|
584
|
-
* and `icon` is a square affordance, so all three are excluded rather than
|
|
585
|
-
* aliased onto something else. What remains covers the full range a track
|
|
586
|
-
* can express: a saturated fill, a tinted one, a bordered wash, a quiet
|
|
587
|
-
* translucent one and a frosted one.
|
|
588
|
-
*/
|
|
589
|
-
declare const SLIDER_VARIANTS: readonly ["solid", "soft", "outline", "ghost", "glass"];
|
|
590
|
-
type SliderVariant = (typeof SLIDER_VARIANTS)[number];
|
|
591
|
-
interface SliderVariantTokens {
|
|
592
|
-
/** Paint for the active track segment, from the start (or min handle) to the value. */
|
|
593
|
-
fill: string;
|
|
594
|
-
/** Border of the handle. */
|
|
595
|
-
handle: string;
|
|
596
|
-
/** The handle's focus-ring colour, including its `focus-visible:` prefix. */
|
|
597
|
-
ring: string;
|
|
598
|
-
}
|
|
599
|
-
/**
|
|
600
|
-
* Slider treatments — the same visual language `Button` uses, mapped onto a
|
|
601
|
-
* slider's two paintable surfaces (the track segment and the handle) so a
|
|
602
|
-
* slider dropped next to a button row reads as part of the same UI.
|
|
603
|
-
*/
|
|
604
|
-
declare const getSliderVariantTokens: (color: TrueColor, variant: SliderVariant) => SliderVariantTokens;
|
|
605
|
-
/**
|
|
606
|
-
* The `ButtonVariant`s that read as a toggle.
|
|
607
|
-
*
|
|
608
|
-
* Same rationale as `SLIDER_VARIANTS`: `link` and `clear` are text treatments
|
|
609
|
-
* a track has nothing to treat, and `icon` is a square affordance. What
|
|
610
|
-
* remains covers the full range a track can express — a saturated fill, a
|
|
611
|
-
* tinted one, a bordered wash, a quiet translucent one and a frosted one.
|
|
612
|
-
*/
|
|
613
|
-
declare const TOGGLE_VARIANTS: readonly ["solid", "soft", "outline", "ghost", "glass"];
|
|
614
|
-
type ToggleVariant = (typeof TOGGLE_VARIANTS)[number];
|
|
615
|
-
interface ToggleVariantTokens {
|
|
616
|
-
/** Paint for the track when the switch is on (carries `peer-checked:`). */
|
|
617
|
-
track: string;
|
|
618
|
-
/** The thumb's focus-ring colour, driven off the input's `focus-visible`. */
|
|
619
|
-
ring: string;
|
|
620
|
-
/** True when the on-state fill is see-through and sits over unknown content. */
|
|
621
|
-
translucent: boolean;
|
|
622
|
-
}
|
|
623
|
-
/**
|
|
624
|
-
* Toggle treatments — the same visual language `Button` and `Slider` use,
|
|
625
|
-
* mapped onto the toggle's one paintable surface (the on-state track fill) so
|
|
626
|
-
* a toggle dropped next to a button or slider reads as part of the same UI.
|
|
627
|
-
*
|
|
628
|
-
* The off-state track is deliberately identical across variants — the neutral
|
|
629
|
-
* base — so the on-state fill is what expresses the treatment, exactly as a
|
|
630
|
-
* slider's neutral track does.
|
|
631
|
-
*
|
|
632
|
-
* The `glass` token only carries the frosted fill; the backdrop blur,
|
|
633
|
-
* vibrancy and specular overlay stay with the component, because they depend
|
|
634
|
-
* on the `glassOpacity` / `vibrancy` / `specularMode` props. The same numeric
|
|
635
|
-
* opacity caveat as `getGlassFillClass` applies: only the three presets are
|
|
636
|
-
* safelisted.
|
|
637
|
-
*/
|
|
638
|
-
declare const getToggleVariantTokens: (color: TrueColor, variant: ToggleVariant, glassOpacity?: GlassOpacity) => ToggleVariantTokens;
|
|
639
|
-
declare const getToggleColorClasses: (color: TrueColor) => string;
|
|
640
|
-
/**
|
|
641
|
-
* @deprecated Returns `accent-{color}-600`, which only paints a *native*
|
|
642
|
-
* checkbox — and a native checkbox ignores border, radius and background, so
|
|
643
|
-
* every other class the control carried was dead. Use
|
|
644
|
-
* `getCheckboxControlTokens`, which styles a real box.
|
|
645
|
-
*/
|
|
646
|
-
declare const getCheckboxColorClasses: (color: TrueColor) => string;
|
|
647
|
-
interface CheckboxControlTokens {
|
|
648
|
-
/** Fill and border of the box once checked or indeterminate. */
|
|
649
|
-
checked: string;
|
|
650
|
-
/** Focus ring, driven off the sibling input's focus. */
|
|
651
|
-
ring: string;
|
|
652
|
-
/** Colour of the tick/dash glyph, which sits on the checked fill. */
|
|
653
|
-
glyph: string;
|
|
654
|
-
}
|
|
655
|
-
/**
|
|
656
|
-
* Fills step to `-700` light / `-400` dark rather than the `-600` / `-500` the
|
|
657
|
-
* native `accent-color` used, for the same reason `Alert`'s solid variant does:
|
|
658
|
-
* a white glyph on `{color}-600` measures 2.94:1 on yellow and 3.06 on lime,
|
|
659
|
-
* under even the 3:1 that WCAG asks of a *graphical* object, and on a `-500`
|
|
660
|
-
* fill it is worse. At `-700` under white and `-400` under `{color}-950` the
|
|
661
|
-
* worst case across all 21 tones is 4.93:1.
|
|
662
|
-
*/
|
|
663
|
-
interface CheckboxVariantTokens {
|
|
664
|
-
/** Fill, shadow and backdrop of the resting box. */
|
|
665
|
-
fill: string;
|
|
666
|
-
/** Resting border colour. Replaced wholesale by the error state. */
|
|
667
|
-
border: string;
|
|
668
|
-
/** Border colour under the cursor. */
|
|
669
|
-
hover: string;
|
|
670
|
-
/** True when the box is see-through and sits over unknown content. */
|
|
671
|
-
translucent: boolean;
|
|
672
|
-
}
|
|
673
|
-
declare const getCheckboxVariantTokens: (variant: InputVariant) => CheckboxVariantTokens;
|
|
674
|
-
declare const getCheckboxControlTokens: (color: TrueColor) => CheckboxControlTokens;
|
|
675
|
-
declare const getSpinnerColorTokens: (color: TrueColor) => [string, string, string, string];
|
|
676
|
-
/**
|
|
677
|
-
* The geometry of a `StatusSpinner` at each shared control size.
|
|
678
|
-
*
|
|
679
|
-
* The wrapper is the same circle `Spinner` draws at that size, so the two can
|
|
680
|
-
* sit side by side and line up; the dot and the ring width scale with it.
|
|
681
|
-
*/
|
|
682
|
-
interface StatusSpinnerSizeTokens {
|
|
683
|
-
/** Outer circle. Matches `Spinner`'s diameter at the same size. */
|
|
684
|
-
wrapper: string;
|
|
685
|
-
/** Centre dot. */
|
|
686
|
-
dot: string;
|
|
687
|
-
/** Ring border width. */
|
|
688
|
-
border: string;
|
|
689
|
-
}
|
|
690
|
-
declare const getStatusSpinnerSizeTokens: (size: ControlSize) => StatusSpinnerSizeTokens;
|
|
691
|
-
/**
|
|
692
|
-
* The paint of a `StatusSpinner` in one tone.
|
|
693
|
-
*
|
|
694
|
-
* Generated from `TRUE_COLORS` — there is no hand-written per-colour map to
|
|
695
|
-
* drift. `dot` is the one class-shaped token (both steps are already in the
|
|
696
|
-
* generated safelist); the arc and track are CSS colours rather than classes,
|
|
697
|
-
* because the four border sides carry four different values and a `dark:`
|
|
698
|
-
* variant cannot reach an inline style. They read the tone's own Tailwind
|
|
699
|
-
* variable — emitted for all 21 tones — and `color-mix` derives the track and
|
|
700
|
-
* the glow from it, so a tone can never render as another colour.
|
|
701
|
-
*/
|
|
702
|
-
interface StatusSpinnerToneTokens {
|
|
703
|
-
/** Centre dot fill. */
|
|
704
|
-
dot: string;
|
|
705
|
-
/** The rotating arc, as a CSS colour. */
|
|
706
|
-
arc: string;
|
|
707
|
-
/** The idle ring (30% of the tone), as a CSS colour. */
|
|
708
|
-
track: string;
|
|
709
|
-
/** The halo around the dot, as a CSS colour. */
|
|
710
|
-
glow: string;
|
|
711
|
-
}
|
|
712
|
-
declare const getStatusSpinnerToneTokens: (tone: TrueColor) => StatusSpinnerToneTokens;
|
|
713
|
-
/**
|
|
714
|
-
* The paint of a `ProgressSpinner` in one tone.
|
|
715
|
-
*
|
|
716
|
-
* The same generated-from-`TRUE_COLORS` approach as `StatusSpinner`: the arc
|
|
717
|
-
* reads the tone's own Tailwind variable and `color-mix` derives the idle
|
|
718
|
-
* track from it, so a tone can never render as another colour. The inline
|
|
719
|
-
* SVG cannot use `dark:` variants, which is why these are CSS colours rather
|
|
720
|
-
* than classes.
|
|
721
|
-
*/
|
|
722
|
-
interface ProgressSpinnerToneTokens {
|
|
723
|
-
/** The moving arc (or the determinate range), as a CSS colour. */
|
|
724
|
-
arc: string;
|
|
725
|
-
/** The idle ring (30% of the tone), as a CSS colour. */
|
|
726
|
-
track: string;
|
|
727
|
-
}
|
|
728
|
-
declare const getProgressSpinnerToneTokens: (tone: TrueColor) => ProgressSpinnerToneTokens;
|
|
729
|
-
declare const getLoaderProgressColors: (color: TrueColor) => {
|
|
730
|
-
track: string;
|
|
731
|
-
bar: string;
|
|
732
|
-
};
|
|
733
|
-
declare const getMultiToggleColorTokens: (color: TrueColor) => {
|
|
734
|
-
active: string;
|
|
735
|
-
activeText: string;
|
|
736
|
-
indicator: string;
|
|
737
|
-
hover: string;
|
|
738
|
-
};
|
|
739
|
-
declare const getMultiToggleVariantTokens: (color: TrueColor) => MultiToggleVariantTokens;
|
|
740
|
-
declare const getTabsColorTokens: (color: TrueColor) => TabsColorTokens;
|
|
741
|
-
/**
|
|
742
|
-
* Base treatment per surface variant — the shadow, ring, blur and fill that do
|
|
743
|
-
* not depend on tone.
|
|
744
|
-
*
|
|
745
|
-
* Lifted out of `Panel` so any control that draws a *surface* can mirror it
|
|
746
|
-
* exactly rather than copying the switch. `MultiToggle`'s track is the first
|
|
747
|
-
* other consumer: a segmented control is a container holding segments, so it
|
|
748
|
-
* belongs to the same family and has to read identically beside a `Panel`.
|
|
749
|
-
*/
|
|
750
|
-
declare const SURFACE_VARIANT_BASE: Record<SurfaceVariant, string>;
|
|
751
|
-
/**
|
|
752
|
-
* Rim for the translucent variants. Deliberately tone-independent: a saturated
|
|
753
|
-
* `{tone}-500` edge fights the backdrop it is meant to sit over, so glass gets
|
|
754
|
-
* a light rim that reads as a bevel instead of an outline.
|
|
755
|
-
*/
|
|
756
|
-
declare const SURFACE_GLASS_RIM = "border-white/50 dark:border-white/10";
|
|
757
|
-
/** Variants whose surface is see-through. */
|
|
758
|
-
declare const TRANSLUCENT_SURFACE_VARIANTS: readonly SurfaceVariant[];
|
|
759
|
-
interface SurfaceVariantOverrides {
|
|
760
|
-
/** Replaces the variant's own fill, keeping its shadow and ring. */
|
|
761
|
-
bgClass?: string;
|
|
762
|
-
/** Replaces the variant's own rim colour. */
|
|
763
|
-
borderClass?: string;
|
|
764
|
-
/** Extra classes folded in for `liquid-glass` (vibrancy, glass fill). */
|
|
765
|
-
liquidExtras?: string;
|
|
766
|
-
}
|
|
767
|
-
/**
|
|
768
|
-
* The full class set for a surface variant at a tone — the same combination
|
|
769
|
-
* `Panel` renders, so a control using this sits flush beside one.
|
|
770
|
-
*/
|
|
771
|
-
declare const getSurfaceVariantClasses: (variant: SurfaceVariant, tone: TrueColor, overrides?: SurfaceVariantOverrides) => string;
|
|
772
|
-
declare const getPanelToneStyles: (tone: TrueColor) => PanelToneConfig;
|
|
773
|
-
declare const getStepperTonePalette: (tone: TrueColor) => StepperToneConfig;
|
|
774
|
-
declare const getBadgeColorClasses: (color: TrueColor) => string;
|
|
775
|
-
declare const getPillColorClasses: (color: TrueColor, variant: "solid" | "soft" | "outline") => {
|
|
776
|
-
base: string;
|
|
777
|
-
border?: string;
|
|
778
|
-
};
|
|
779
|
-
/**
|
|
780
|
-
* @deprecated Use `getAlertVariantTokens(color, variant)`. This bag hands the
|
|
781
|
-
* same icon/text/dismiss classes to every variant, which is unreadable on
|
|
782
|
-
* `solid`. Kept so existing call sites keep compiling.
|
|
783
|
-
*/
|
|
784
|
-
declare const getAlertColorClasses: (color: TrueColor) => AlertTheme[TrueColor];
|
|
785
|
-
/**
|
|
786
|
-
* Alert treatments. `glass` and `liquid-glass` are the same pair `Panel` and
|
|
787
|
-
* `Pill` offer, so a callout dropped on a glass card no longer has to be the
|
|
788
|
-
* one opaque slab in the layout.
|
|
789
|
-
*/
|
|
790
|
-
declare const ALERT_VARIANTS: readonly ["subtle", "solid", "outline", "glass", "liquid-glass"];
|
|
791
|
-
type AlertVariant = (typeof ALERT_VARIANTS)[number];
|
|
792
|
-
/**
|
|
793
|
-
* Where the leading icon sits against the callout's content.
|
|
794
|
-
*
|
|
795
|
-
* `top` is the default and the only one that was previously possible: the icon
|
|
796
|
-
* centres on the *title's* line box, which is what you want for a one- or
|
|
797
|
-
* two-line callout. `center` centres it against the whole block — right when
|
|
798
|
-
* the body runs long enough that a top-aligned glyph looks stranded — and
|
|
799
|
-
* `bottom` pins it to the last line.
|
|
800
|
-
*/
|
|
801
|
-
declare const ALERT_ICON_ALIGNMENTS: readonly ["top", "center", "bottom"];
|
|
802
|
-
type AlertIconAlign = (typeof ALERT_ICON_ALIGNMENTS)[number];
|
|
803
|
-
/**
|
|
804
|
-
* What the callout *means*, as opposed to what colour it is.
|
|
805
|
-
*
|
|
806
|
-
* Both kits' demos have been passing `tone="info"` / `"success"` / `"warning"`
|
|
807
|
-
* / `"danger"` since tone became a `TrueColor` — none of them are one, so every
|
|
808
|
-
* such alert fell through to the blue fallback and four "different" tones
|
|
809
|
-
* rendered identically. The semantics were real and worth keeping; they just
|
|
810
|
-
* belong in their own prop, which resolves to a tone *and* the right icon *and*
|
|
811
|
-
* the right live-region politeness.
|
|
812
|
-
*/
|
|
813
|
-
declare const ALERT_INTENTS: readonly ["info", "success", "warning", "danger", "neutral"];
|
|
814
|
-
type AlertIntent = (typeof ALERT_INTENTS)[number];
|
|
815
|
-
interface AlertIntentConfig {
|
|
816
|
-
tone: TrueColor;
|
|
817
|
-
/** Registry icon name used when the caller does not supply one. */
|
|
818
|
-
icon: string;
|
|
819
|
-
/**
|
|
820
|
-
* How assistive technology should announce it. `role="alert"` is an
|
|
821
|
-
* *assertive* live region: it interrupts whatever the user is reading, which
|
|
822
|
-
* is right for a failure and wrong for a page that merely renders an
|
|
823
|
-
* informational banner on load.
|
|
824
|
-
*/
|
|
825
|
-
live: "assertive" | "polite";
|
|
826
|
-
}
|
|
827
|
-
declare const ALERT_INTENT_CONFIG: Record<AlertIntent, AlertIntentConfig>;
|
|
828
|
-
/**
|
|
829
|
-
* Where a toast viewport sits on the screen — PrimeVue's seven anchor
|
|
830
|
-
* positions, kept as a runtime list so demos and docs enumerate the same
|
|
831
|
-
* seven. `center` is the only one without a corner.
|
|
832
|
-
*/
|
|
833
|
-
declare const TOAST_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right", "center"];
|
|
834
|
-
type ToastPosition = (typeof TOAST_POSITIONS)[number];
|
|
835
|
-
/**
|
|
836
|
-
* How the stack reads: `stacked` (the PrimeVue 4.5.5 default — a deck of
|
|
837
|
-
* collapsed cards that fans out on hover) or `expanded` (always fanned out,
|
|
838
|
-
* the classic list).
|
|
839
|
-
*/
|
|
840
|
-
declare const TOAST_MODES: readonly ["stacked", "expanded"];
|
|
841
|
-
type ToastMode = (typeof TOAST_MODES)[number];
|
|
842
|
-
declare const DEFAULT_TOAST_POSITION: ToastPosition;
|
|
843
|
-
declare const DEFAULT_TOAST_MODE: ToastMode;
|
|
844
|
-
/** Distance the stack offsets each card (stacked peek and expanded seam). */
|
|
845
|
-
declare const DEFAULT_TOAST_GAP_PX = 12;
|
|
846
|
-
/** How many newest toasts stay visible; older ones wait their turn. */
|
|
847
|
-
declare const DEFAULT_TOAST_LIMIT = 3;
|
|
848
|
-
/**
|
|
849
|
-
* Kit default — PrimeVue has no default auto-dismiss, and a toast that never
|
|
850
|
-
* dies is a trap. `life: 0` or `sticky: true` for a persistent message.
|
|
851
|
-
*/
|
|
852
|
-
declare const DEFAULT_TOAST_LIFE_MS = 5000;
|
|
853
|
-
/** Above Modal's 1600: a toast raised while a modal is open sits above it. */
|
|
854
|
-
declare const DEFAULT_TOAST_Z_INDEX = 2000;
|
|
855
|
-
/** PrimeVue's viewport width (18.75rem = 300px). */
|
|
856
|
-
declare const TOAST_DEFAULT_WIDTH = "18.75rem";
|
|
857
|
-
/**
|
|
858
|
-
* The geometry of a toast card at each shared control size.
|
|
859
|
-
*
|
|
860
|
-
* Same reasoning as Alert's size table, promoted to the theme because the
|
|
861
|
-
* card lives in a different folder than the callout it shares its language
|
|
862
|
-
* with, and a second size table for the same scale would drift (brief §2).
|
|
863
|
-
* The close button and the action buttons sit on the trigger family's scale,
|
|
864
|
-
* so a toast and the Button beside it are described in the same language.
|
|
865
|
-
*/
|
|
866
|
-
interface ToastSizeTokens {
|
|
867
|
-
/** The card's own padding. */
|
|
868
|
-
container: string;
|
|
869
|
-
/** Space between the leading glyph and the copy. */
|
|
870
|
-
gap: string;
|
|
871
|
-
/** Title type. */
|
|
872
|
-
title: string;
|
|
873
|
-
/** Detail type. */
|
|
874
|
-
detail: string;
|
|
875
|
-
/** The intent glyph, on the shared control scale. */
|
|
876
|
-
icon: ControlSize;
|
|
877
|
-
/**
|
|
878
|
-
* Height of the glyph's box: exactly the title's line box, so the glyph
|
|
879
|
-
* centres on the title's cap height at any size (Alert's calibration).
|
|
880
|
-
*/
|
|
881
|
-
iconBox: string;
|
|
882
|
-
/** The close button's square box. */
|
|
883
|
-
close: string;
|
|
884
|
-
/** The close glyph's size. */
|
|
885
|
-
closeIcon: ControlSize;
|
|
886
|
-
/** The progress bar's height, on the shared scale. */
|
|
887
|
-
progress: ControlSize;
|
|
888
|
-
/** The action buttons' size (trigger family). */
|
|
889
|
-
action: ControlSize;
|
|
890
|
-
/** Space above the actions row. */
|
|
891
|
-
actions: string;
|
|
892
|
-
}
|
|
893
|
-
declare const getToastSizeTokens: (size: ControlSize) => ToastSizeTokens;
|
|
894
|
-
/**
|
|
895
|
-
* Whether a field is reporting a problem.
|
|
896
|
-
*
|
|
897
|
-
* One list, because it was six: `INPUT_`, `SELECT_`, `CHECKBOX_` and
|
|
898
|
-
* `INPUT_GROUP_VALIDATION_STATUSES` each declared it, and `Textarea` and
|
|
899
|
-
* `FormField` had bare unions exporting no runtime list at all — so their
|
|
900
|
-
* demos could not enumerate the states they support. Same three strings, six
|
|
901
|
-
* names: the day one changes, the other five will not.
|
|
902
|
-
*/
|
|
903
|
-
declare const VALIDATION_STATUSES: readonly ["none", "error", "success"];
|
|
904
|
-
type ValidationStatus = (typeof VALIDATION_STATUSES)[number];
|
|
905
|
-
/**
|
|
906
|
-
* What went wrong with a request, as opposed to what colour to paint it.
|
|
907
|
-
*
|
|
908
|
-
* The same reasoning as `ALERT_INTENTS`: a failing call already knows whether
|
|
909
|
-
* it was refused, throttled, or simply could not be reached, and every caller
|
|
910
|
-
* translating that into a tone *and* a glyph *and* two strings is how one
|
|
911
|
-
* screen ends up saying "Connection Error" for a 403. The kind resolves all
|
|
912
|
-
* four; anything the caller states explicitly still wins.
|
|
913
|
-
*/
|
|
914
|
-
declare const API_ERROR_KINDS: readonly ["unknown", "offline", "server", "forbidden", "notFound", "rateLimited"];
|
|
915
|
-
type ApiErrorKind = (typeof API_ERROR_KINDS)[number];
|
|
916
|
-
interface ApiErrorKindConfig {
|
|
917
|
-
tone: TrueColor;
|
|
918
|
-
/** Registry icon name used when the caller does not supply one. */
|
|
919
|
-
icon: string;
|
|
920
|
-
title: string;
|
|
921
|
-
subtitle: string;
|
|
922
|
-
/**
|
|
923
|
-
* Whether retrying it stands a chance. A 403 does not get a "Try again"
|
|
924
|
-
* button by default — offering one for a failure the user cannot clear is
|
|
925
|
-
* how a dead end starts looking like a bug.
|
|
926
|
-
*/
|
|
927
|
-
retryable: boolean;
|
|
928
|
-
}
|
|
929
|
-
declare const API_ERROR_KIND_CONFIG: Record<ApiErrorKind, ApiErrorKindConfig>;
|
|
930
|
-
interface AlertVariantTokens {
|
|
931
|
-
/** Fill plus the callout's base copy colour. */
|
|
932
|
-
surface: string;
|
|
933
|
-
/** Border colour. The `border` utility itself is on the base class. */
|
|
934
|
-
border: string;
|
|
935
|
-
/** Leading icon. */
|
|
936
|
-
icon: string;
|
|
937
|
-
/** Secondary copy under the title. */
|
|
938
|
-
text: string;
|
|
939
|
-
/** Dismiss button: rest, hover and focus ring. */
|
|
940
|
-
dismiss: string;
|
|
941
|
-
}
|
|
942
|
-
/**
|
|
943
|
-
* Replaces the old flat `getAlertColorClasses` bag, which handed the *same*
|
|
944
|
-
* `icon`, `text` and `dismiss` classes to every variant. On `solid` — a
|
|
945
|
-
* `{color}-600` fill — that painted the description `{color}-700` and the icon
|
|
946
|
-
* `{color}-500`, i.e. a dark tone on a saturated tone of itself. It was
|
|
947
|
-
* unreadable at every tone and no test could see it.
|
|
948
|
-
*/
|
|
949
|
-
declare const getAlertVariantTokens: (color: TrueColor, variant: AlertVariant) => AlertVariantTokens;
|
|
950
|
-
declare const getStatTileColorClasses: (color: TrueColor) => StatTileTheme[TrueColor];
|
|
951
|
-
|
|
952
|
-
type IconName = "Add" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "ArrowUp" | "Attached" | "Attachment" | "Back" | "Blueprint" | "Bug" | "Chat" | "CheckCircle" | "ChevronLeft" | "ChevronRight" | "Clean" | "Close" | "Close1" | "CloudOff" | "Cog" | "Complete" | "Container" | "CopyClipboard" | "Dashboard" | "Details" | "Docker copy" | "Docker" | "Dots" | "Download" | "Edit" | "Equal" | "Error" | "Export" | "EyeClosed" | "EyeOpen" | "Globe" | "Help" | "Idea" | "Image" | "Info" | "Key" | "LXC-Old" | "LXC" | "Log" | "Moon" | "Notification" | "Official" | "Offline" | "OpenApp" | "Parameter" | "Pause" | "Praise" | "ReportFeedback" | "Reset" | "Restart" | "Rocket" | "Run" | "Save" | "Scale" | "Script" | "Search" | "Send" | "Settings" | "Shop" | "Star" | "Stop" | "Sun" | "Suspend" | "ThemeAuto" | "ThemeDark" | "ThemeLight" | "Trash" | "UX" | "User" | "Users" | "Verified" | "ViewGrid" | "ViewRows" | "Library" | "Host" | "VirtualMachine" | "Role" | "Roles" | "Cache" | "Claim" | "Claims" | "KeyManagement" | "Windows" | "Ubuntu" | "Debian" | "Apple" | "KaliLinux" | "RedHat" | "Fedora" | "CentOS" | "Clone" | "Copy" | "Live" | "HealthCheck" | "ReverseProxy" | "ReverseProxyCORS" | "ReverseProxyRoutes" | "ReverseProxyFrom" | "ReverseProxyHeadersRequest" | "ReverseProxyHeadersResponse" | "ReverseProxyHTTP" | "ReverseProxyTo" | "ReverseProxyTLS" | "ReverseProxyTCP" | "Refresh" | "Calendar" | "Folder" | "Jobs" | "Warning" | "Artifactory" | "Azure" | "Minio" | "Aws" | "Orchestrator" | "Podman" | "PodmanDesktop" | "Group" | "Pin" | "Database" | "RemoteHost" | "Login" | "Logout" | "Snapshot" | "Revert" | "CleanBrush" | "Pull" | "Push" | "CatalogVersion" | "File" | "Revoke" | "Taint" | "Unlock" | "Check" | "ArrowChevronLeft" | "ArrowChevronRight" | "Drag" | "ChartLine" | "Accordion";
|
|
953
|
-
declare const iconRegistry: Record<IconName, React__default.ForwardRefExoticComponent<React__default.SVGProps<SVGSVGElement>>>;
|
|
954
|
-
|
|
955
|
-
type HelpButtonPlacement = "top" | "bottom" | "left" | "right" | "auto";
|
|
956
|
-
interface HelpButtonProps {
|
|
957
|
-
/**
|
|
958
|
-
* Help content to display in the panel.
|
|
959
|
-
* Pass a `string` to render as Markdown (tables and URLs supported).
|
|
960
|
-
* Pass a `ReactNode` to render arbitrary JSX directly.
|
|
961
|
-
*/
|
|
962
|
-
content: string | React__default.ReactNode;
|
|
963
|
-
/** Optional title shown in the panel header. Defaults to "Help". */
|
|
964
|
-
title?: React__default.ReactNode;
|
|
965
|
-
/**
|
|
966
|
-
* Preferred placement of the floating panel relative to the trigger button.
|
|
967
|
-
* "auto" (default) picks the side with the most available space.
|
|
968
|
-
*/
|
|
969
|
-
placement?: HelpButtonPlacement;
|
|
970
|
-
/** Accent color for the trigger button and the panel header band. @default "sky" */
|
|
971
|
-
color?: TrueColor;
|
|
972
|
-
/**
|
|
973
|
-
* Surface treatment of the floating panel — the shared container family the
|
|
974
|
-
* `Panel` reference owns, so a help panel and a card beside it read the same.
|
|
975
|
-
* @default "elevated"
|
|
976
|
-
*/
|
|
977
|
-
variant?: SurfaceVariant;
|
|
978
|
-
/** Corner radius of the panel, on the shared container scale. @default "rounded-md" */
|
|
979
|
-
corner?: SurfaceCorner;
|
|
980
|
-
/** Size of the trigger icon button, on the shared control scale. @default "xs" */
|
|
981
|
-
size?: ControlSize;
|
|
982
|
-
/** Icon for the trigger button. Defaults to "Help". */
|
|
983
|
-
icon?: IconName;
|
|
984
|
-
/** Maximum width of the floating panel in px. Defaults to 360. */
|
|
985
|
-
maxWidth?: number;
|
|
986
|
-
/**
|
|
987
|
-
* When true the panel body is a pulsing skeleton shaped like the help copy,
|
|
988
|
-
* so a slow help fetch does not flash empty text. @default false
|
|
989
|
-
*/
|
|
990
|
-
loading?: boolean;
|
|
991
|
-
/** Extra class applied to the root wrapper. */
|
|
992
|
-
className?: string;
|
|
993
|
-
}
|
|
994
|
-
declare const HelpButton: React__default.FC<HelpButtonProps>;
|
|
995
|
-
|
|
996
|
-
declare enum CapsuleBlueprintValueType {
|
|
997
|
-
String = "string",
|
|
998
|
-
Int = "int",
|
|
999
|
-
Boolean = "boolean",
|
|
1000
|
-
Select = "select",
|
|
1001
|
-
List = "list",
|
|
1002
|
-
Map = "map"
|
|
1003
|
-
}
|
|
1004
|
-
interface CapsuleBlueprintParameter {
|
|
1005
|
-
name: string;
|
|
1006
|
-
key: string;
|
|
1007
|
-
description?: string;
|
|
1008
|
-
type?: string;
|
|
1009
|
-
value_type?: CapsuleBlueprintValueType;
|
|
1010
|
-
default?: any;
|
|
1011
|
-
required?: boolean;
|
|
1012
|
-
is_required?: boolean;
|
|
1013
|
-
is_secret?: boolean;
|
|
1014
|
-
options?: any;
|
|
1015
|
-
hint?: string;
|
|
1016
|
-
help?: string;
|
|
1017
|
-
service_name?: string;
|
|
1018
|
-
depends_on?: string[];
|
|
1019
|
-
[key: string]: any;
|
|
1020
|
-
}
|
|
1021
|
-
|
|
1022
|
-
export { DEFAULT_TOAST_POSITION as $, type AlertIntent as A, type ButtonVariant as B, type ControlSize as C, API_ERROR_KIND_CONFIG as D, type AlertIntentConfig as E, type AlertVariantTokens as F, type GlassOpacity as G, type HelpButtonProps as H, type IconName as I, type ApiErrorKindConfig as J, BUTTON_VARIANTS as K, BUTTON_WEIGHTS as L, CONTROL_SIZES as M, CapsuleBlueprintValueType as N, type Orientation as O, type PlainSurfaceVariant as P, type CheckboxControlTokens as Q, type CheckboxVariantTokens as R, type SurfaceCorner as S, type TrueColor as T, type ControlSizeTokens as U, type ValidationStatus as V, DEFAULT_SURFACE_CORNER as W, DEFAULT_TOAST_GAP_PX as X, DEFAULT_TOAST_LIFE_MS as Y, DEFAULT_TOAST_LIMIT as Z, DEFAULT_TOAST_MODE as _, type AlertVariant as a, getCheckboxVariantTokens as a$, DEFAULT_TOAST_Z_INDEX as a0, DEFAULT_TRIGGER_CORNER as a1, FIELD_SIZE_STYLES as a2, FIELD_STATUS_CLASSES as a3, type FieldSizeTokens as a4, type FieldToneTokens as a5, GLOW_INTENSITIES as a6, type GlowTokens as a7, HelpButton as a8, type HelpButtonPlacement as a9, type StatusSpinnerToneTokens as aA, type SurfaceTriggerTokens as aB, type SurfaceVariantOverrides as aC, TABLE_DENSITIES as aD, TOAST_DEFAULT_WIDTH as aE, TOAST_MODES as aF, TOAST_POSITIONS as aG, TOGGLE_VARIANTS as aH, TRANSLUCENT_SURFACE_VARIANTS as aI, TRUE_COLORS as aJ, TRUE_COLOR_DOT_CLASSES as aK, TRUE_COLOR_TEXT_CLASSES as aL, type TableDensityTokens as aM, type ToastSizeTokens as aN, type ToggleVariantTokens as aO, VALIDATION_STATUSES as aP, configureTheme as aQ, getAlertColorClasses as aR, getAlertVariantTokens as aS, getBadgeColorClasses as aT, getButtonActiveClasses as aU, getButtonActiveHoverClasses as aV, getButtonBaseClasses as aW, getButtonColorClasses as aX, getButtonHoverClasses as aY, getCheckboxColorClasses as aZ, getCheckboxControlTokens as a_, INPUT_VARIANTS as aa, type InputVariantTokens as ab, NEUTRAL_TONES as ac, ORIENTATIONS as ad, PLAIN_SURFACE_VARIANTS as ae, type ProgressSpinnerToneTokens as af, SIDEBAR_COLLAPSIBLE_MODES as ag, SIDEBAR_IDLE_COPY as ah, SIDEBAR_MOBILE_QUERY as ai, SIDEBAR_SIDES as aj, SIDEBAR_VARIANTS as ak, SIDE_MENU_HEADER_FILL as al, SIDE_MENU_HEADER_HEIGHT as am, SIDE_MENU_HEADER_SEAM as an, SLIDER_VARIANTS as ao, SURFACE_VARIANTS as ap, SURFACE_CORNERS as aq, SURFACE_GLASS_RIM as ar, SURFACE_PADDINGS as as, SURFACE_TO_BUTTON_VARIANT as at, SURFACE_VARIANT_BASE as au, type SideMenuItemTokens as av, type SidebarIdleCopyKind as aw, type SidebarSurfaceTokens as ax, type SliderVariantTokens as ay, type StatusSpinnerSizeTokens as az, type AlertIconAlign as b, getControlSizeTokens as b0, getFieldSizeTokens as b1, getFieldToneTokens as b2, getGlowTokens as b3, getInputVariantTokens as b4, getLoaderProgressColors as b5, getMultiToggleColorTokens as b6, getMultiToggleVariantTokens as b7, getPanelToneStyles as b8, getPillColorClasses as b9, resolveGlowGradient as bA, stripBorderColor as bB, stripTextColor as bC, getProgressSpinnerToneTokens as ba, getSideMenuItemTokens as bb, getSidebarSurfaceTokens as bc, getSliderVariantTokens as bd, getSpinnerColorTokens as be, getStatTileColorClasses as bf, getStatusSpinnerSizeTokens as bg, getStatusSpinnerToneTokens as bh, getStepperTonePalette as bi, getSurfaceCornerClass as bj, getSurfaceCornerRem as bk, getSurfacePaddingClass as bl, getSurfacePaddingClasses as bm, getSurfaceTextTokens as bn, getSurfaceTriggerTokens as bo, getSurfaceVariantClasses as bp, getTableDensityTokens as bq, getTabsColorTokens as br, getToastSizeTokens as bs, getToggleColorClasses as bt, getToggleVariantTokens as bu, getTrueColorDotClass as bv, getTrueColorTextClass as bw, hasTextColor as bx, iconRegistry as by, resetTheme as bz, type GlassVibrancy as c, type SpecularMode as d, type ButtonWeight as e, type SurfacePadding as f, type SurfaceVariant as g, type GlowIntensity as h, type InputVariant as i, type SliderVariant as j, type ToggleVariant as k, type ToastPosition as l, type ToastMode as m, type Size as n, type SidebarVariant as o, type SidebarSide as p, type SidebarCollapsible as q, type SurfaceTextTokens as r, type TableDensity as s, type ApiErrorKind as t, type CapsuleBlueprintParameter as u, ALERT_ICON_ALIGNMENTS as v, ALERT_INTENTS as w, ALERT_INTENT_CONFIG as x, ALERT_VARIANTS as y, API_ERROR_KINDS as z };
|