@splenddev/kreativ-core 0.0.1 → 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/README.md +33 -8
- package/dist/{common-CxqD2cxB.d.cts → common-1QyKLdTc.d.cts} +1 -1
- package/dist/{common-CxqD2cxB.d.ts → common-1QyKLdTc.d.ts} +1 -1
- package/dist/{hooks.cjs → hooks/index.cjs} +2 -2
- package/dist/hooks/index.cjs.map +1 -0
- package/dist/{hooks.d.ts → hooks/index.d.cts} +10 -4
- package/dist/{hooks.d.cts → hooks/index.d.ts} +10 -4
- package/dist/{hooks.js → hooks/index.js} +2 -2
- package/dist/hooks/index.js.map +1 -0
- package/dist/index.cjs +25 -1039
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +351 -7
- package/dist/index.d.ts +351 -7
- package/dist/index.js +26 -1010
- package/dist/index.js.map +1 -1
- package/dist/types/index.cjs +4 -0
- package/dist/types/index.cjs.map +1 -0
- package/dist/{types.d.ts → types/index.d.cts} +2 -2
- package/dist/{types.d.cts → types/index.d.ts} +2 -2
- package/dist/types/index.js +3 -0
- package/dist/types/index.js.map +1 -0
- package/dist/{utils.cjs → utils/index.cjs} +2 -2
- package/dist/utils/index.cjs.map +1 -0
- package/dist/{utils.d.cts → utils/index.d.cts} +1 -1
- package/dist/{utils.d.ts → utils/index.d.ts} +1 -1
- package/dist/{utils.js → utils/index.js} +2 -2
- package/dist/utils/index.js.map +1 -0
- package/package.json +1 -6
- package/dist/hooks.cjs.map +0 -1
- package/dist/hooks.js.map +0 -1
- package/dist/theme.cjs +0 -1183
- package/dist/theme.cjs.map +0 -1
- package/dist/theme.d.cts +0 -2724
- package/dist/theme.d.ts +0 -2724
- package/dist/theme.js +0 -1142
- package/dist/theme.js.map +0 -1
- package/dist/types.cjs +0 -4
- package/dist/types.cjs.map +0 -1
- package/dist/types.js +0 -3
- package/dist/types.js.map +0 -1
- package/dist/useColorMode-B7eyS27H.d.ts +0 -10
- package/dist/useColorMode-tvcgvc4V.d.cts +0 -10
- package/dist/utils.cjs.map +0 -1
- package/dist/utils.js.map +0 -1
package/dist/theme.d.ts
DELETED
|
@@ -1,2724 +0,0 @@
|
|
|
1
|
-
import { X as TokenValue, y as SemanticToken, Z as Typography, k as DesignTokens, U as TokenDefinition, W as TokenReferenceString$1, z as SemanticTokens, D as DeepPartial } from './common-CxqD2cxB.js';
|
|
2
|
-
import { SizeToken, SizeScale, RecipeDefinition, Theme, ThemeOverride, RecipeCollection } from './types.js';
|
|
3
|
-
import 'react';
|
|
4
|
-
|
|
5
|
-
declare function defineToken<T extends TokenValue>(value: T): {
|
|
6
|
-
value: T;
|
|
7
|
-
};
|
|
8
|
-
declare function defineTokens<T extends Record<string, TokenValue>>(tokens: T): { [K in keyof T]: ReturnType<typeof defineToken<T[K]>>; };
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Defines a semantic token that shares a single value across both
|
|
12
|
-
* light and dark modes (the explicit sameForBothModes shorthand).
|
|
13
|
-
*/
|
|
14
|
-
declare function defineSemanticToken<T extends TokenValue>(value: T): SemanticToken<T>;
|
|
15
|
-
/**
|
|
16
|
-
* Defines a semantic token with distinct light and dark values.
|
|
17
|
-
*/
|
|
18
|
-
declare function defineSemanticToken<T extends TokenValue>(light: T, dark: T): SemanticToken<T>;
|
|
19
|
-
type SemanticTokenInput<T extends TokenValue> = T | {
|
|
20
|
-
light: T;
|
|
21
|
-
dark: T;
|
|
22
|
-
};
|
|
23
|
-
declare function defineSemanticTokens<T extends Record<string, SemanticTokenInput<TokenValue>>>(tokens: T): {
|
|
24
|
-
[K in keyof T]: SemanticToken<T[K] extends {
|
|
25
|
-
light: infer V;
|
|
26
|
-
dark: infer _;
|
|
27
|
-
} ? V extends TokenValue ? V : never : T[K] extends TokenValue ? T[K] : never>;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
declare function defineSize<const T extends SizeToken>(size: T): T;
|
|
31
|
-
declare function defineSizes<const T extends SizeScale>(sizes: T): T;
|
|
32
|
-
|
|
33
|
-
declare function defineTypography<const T extends Typography>(typography: T): T;
|
|
34
|
-
|
|
35
|
-
declare function defineRecipe<const T extends RecipeDefinition>(recipe: T): T;
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Branded type-level error, surfaced at the defineTheme() call site
|
|
39
|
-
* when a section validator fails. Section validators wrap this in a
|
|
40
|
-
* section-named key (e.g. { semanticTokens: Invalid<...> }) rather
|
|
41
|
-
* than composing into an unreadable anonymous intersection.
|
|
42
|
-
*
|
|
43
|
-
* Path-tracking (__kuiPath) is a locked stretch goal, not yet built —
|
|
44
|
-
* ship section-named base errors first, confirm they render legibly
|
|
45
|
-
* in editor tooltips, then treat path-tracking as a follow-on.
|
|
46
|
-
*/
|
|
47
|
-
type Invalid<Message extends string> = {
|
|
48
|
-
readonly __kuiError: Message;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* A token reference string, e.g. "{colors.brand.500}" — legal for
|
|
53
|
-
* semantic tokens, but NOT legal for primitive tokens. defineToken's
|
|
54
|
-
* "no token references" rule is what makes defineTheme's cycle
|
|
55
|
-
* detection tractable (cycle detection only needs to walk
|
|
56
|
-
* semantic→semantic edges).
|
|
57
|
-
*/
|
|
58
|
-
type TokenReferenceString = `{${string}}`;
|
|
59
|
-
type IsTokenReference$1<T> = T extends TokenReferenceString ? true : false;
|
|
60
|
-
/**
|
|
61
|
-
* Recursively checks that every leaf in a token tree is a real
|
|
62
|
-
* terminal TokenValue, never a "{...}" reference string.
|
|
63
|
-
*/
|
|
64
|
-
type ValidateTokenLeaf<T> = T extends TokenDefinition<infer V> ? IsTokenReference$1<V> extends true ? Invalid<"Primitive tokens cannot contain token references — use defineSemanticToken instead"> : unknown : T extends Record<string, unknown> ? ValidateTokenTree<T> : unknown;
|
|
65
|
-
type ValidateTokenTree<T> = {
|
|
66
|
-
[K in keyof T]: ValidateTokenLeaf<T[K]>;
|
|
67
|
-
}[keyof T] extends infer Result ? Result extends Invalid<any> ? Result : unknown : never;
|
|
68
|
-
type ValidateTokens<T extends {
|
|
69
|
-
tokens?: unknown;
|
|
70
|
-
}> = T["tokens"] extends DesignTokens ? ValidateTokenTree<T["tokens"]> : unknown;
|
|
71
|
-
type ValidateTokenSection<T extends {
|
|
72
|
-
tokens?: unknown;
|
|
73
|
-
}> = ValidateTokens<T> extends infer Result ? Result extends Invalid<any> ? {
|
|
74
|
-
tokens: Result;
|
|
75
|
-
} : unknown : never;
|
|
76
|
-
|
|
77
|
-
type IsTokenReference<T> = T extends TokenReferenceString$1 ? true : false;
|
|
78
|
-
/**
|
|
79
|
-
* Strips the surrounding "{" "}" from a reference string, giving the
|
|
80
|
-
* raw dotted path, e.g. "{colors.brand.500}" -> "colors.brand.500".
|
|
81
|
-
*/
|
|
82
|
-
type ExtractPath<T extends string> = T extends `{${infer Path}}` ? Path : never;
|
|
83
|
-
/**
|
|
84
|
-
* Splits a dotted path string into a tuple of segments.
|
|
85
|
-
* "colors.brand.500" -> ["colors", "brand", "500"]
|
|
86
|
-
*/
|
|
87
|
-
type SplitPath<S extends string> = S extends `${infer Head}.${infer Rest}` ? [Head, ...SplitPath<Rest>] : [S];
|
|
88
|
-
/**
|
|
89
|
-
* Looks up a single path segment against T's keys, tolerating the
|
|
90
|
-
* common case where the segment is a numeric-looking string
|
|
91
|
-
* ("500") but the actual object key is a numeric literal (500) —
|
|
92
|
-
* e.g. color scale steps. TS's keyof does not match these directly.
|
|
93
|
-
*/
|
|
94
|
-
type LookupKey<T, Head extends string> = Head extends keyof T ? Head : Head extends `${infer N extends number}` ? N extends keyof T ? N : never : never;
|
|
95
|
-
/**
|
|
96
|
-
* Walks an object tree along a tuple of path segments. Resolves to
|
|
97
|
-
* the value at that path, or `never` if any segment doesn't exist.
|
|
98
|
-
*/
|
|
99
|
-
type ResolvePath<T, Path extends readonly string[]> = Path extends [infer Head extends string, ...infer Rest] ? LookupKey<T, Head> extends infer K ? K extends keyof T ? Rest extends readonly string[] ? Rest["length"] extends 0 ? T[K] : ResolvePath<T[K], Rest> : never : never : never : never;
|
|
100
|
-
/**
|
|
101
|
-
* True if a dotted-path reference resolves to something inside T.
|
|
102
|
-
*/
|
|
103
|
-
type PathExists<T, Ref extends string> = ResolvePath<T, SplitPath<ExtractPath<Ref>>> extends never ? false : true;
|
|
104
|
-
/**
|
|
105
|
-
* Validates that a single reference string, if it is one, actually
|
|
106
|
-
* resolves against the given tokens/semanticTokens tree. Non-reference
|
|
107
|
-
* values pass through as `unknown` (valid).
|
|
108
|
-
*/
|
|
109
|
-
type ValidateReferenceExists<Value, Tokens, _Path extends string = "unknown path"> = Value extends TokenReferenceString$1 ? PathExists<Tokens, Value> extends true ? unknown : Invalid<`References an unknown token: "${Value}"`> : unknown;
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Extracts the underlying value(s) out of a semantic token's
|
|
113
|
-
* ColorModeValue, to run existence checks against each.
|
|
114
|
-
*/
|
|
115
|
-
type ExtractCheckableValues<V> = V extends {
|
|
116
|
-
sameForBothModes: true;
|
|
117
|
-
value: infer X;
|
|
118
|
-
} ? [X] : V extends {
|
|
119
|
-
light: infer L;
|
|
120
|
-
dark: infer D;
|
|
121
|
-
} ? [L, D] : [];
|
|
122
|
-
/**
|
|
123
|
-
* Validates a single semantic token leaf: every reference it
|
|
124
|
-
* contains (light and/or dark) must resolve against the combined
|
|
125
|
-
* tokens+semanticTokens tree.
|
|
126
|
-
*
|
|
127
|
-
* NOTE: semantic->semantic cycle detection is NOT done here — it
|
|
128
|
-
* was attempted at the type level and hit TypeScript inference
|
|
129
|
-
* edge cases in recursive conditional types that made it unreliable
|
|
130
|
-
* (false positives on valid semantic->primitive references). Cycle
|
|
131
|
-
* detection is handled at runtime instead — see validateNoCycles in
|
|
132
|
-
* runtime/validateCycles.ts, called from defineTheme/extendTheme.
|
|
133
|
-
*/
|
|
134
|
-
type ValidateSemanticLeaf<Leaf, AllTokens> = Leaf extends {
|
|
135
|
-
value: infer V;
|
|
136
|
-
} ? ExtractCheckableValues<V> extends infer Values extends readonly unknown[] ? {
|
|
137
|
-
[I in keyof Values]: Values[I] extends TokenReferenceString$1 ? ValidateReferenceExists<Values[I], AllTokens> : unknown;
|
|
138
|
-
}[number] extends infer Result ? Result extends Invalid<any> ? Result : unknown : never : unknown : unknown;
|
|
139
|
-
/**
|
|
140
|
-
* Recursively walks the semanticTokens tree, validating every leaf.
|
|
141
|
-
*/
|
|
142
|
-
type ValidateSemanticTree<Tree, AllTokens> = {
|
|
143
|
-
[K in keyof Tree]: Tree[K] extends {
|
|
144
|
-
value: unknown;
|
|
145
|
-
} ? ValidateSemanticLeaf<Tree[K], AllTokens> : ValidateSemanticTree<Tree[K], AllTokens>;
|
|
146
|
-
}[keyof Tree] extends infer Result ? Result extends Invalid<any> ? Result : unknown : never;
|
|
147
|
-
type ValidateSemanticTokens<T extends {
|
|
148
|
-
tokens?: unknown;
|
|
149
|
-
semanticTokens?: unknown;
|
|
150
|
-
}> = T["semanticTokens"] extends SemanticTokens ? ValidateSemanticTree<T["semanticTokens"], (T["tokens"] extends DesignTokens ? T["tokens"] : {}) & T["semanticTokens"]> : unknown;
|
|
151
|
-
type ValidateSemanticTokenSection<T extends {
|
|
152
|
-
tokens?: unknown;
|
|
153
|
-
semanticTokens?: unknown;
|
|
154
|
-
}> = ValidateSemanticTokens<T> extends infer Result ? Result extends Invalid<any> ? {
|
|
155
|
-
semanticTokens: Result;
|
|
156
|
-
} : unknown : never;
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* Validates a single SizeToken's fontSize: if present, it MUST be a
|
|
160
|
-
* "{typography.someVariant}"-style reference into the theme's
|
|
161
|
-
* Typography collection — a raw CSS value (e.g. "1rem") is invalid.
|
|
162
|
-
*
|
|
163
|
-
* This is a cross-section rule (spans sizes + typography), which is
|
|
164
|
-
* why it lives in defineTheme's territory rather than defineSize or
|
|
165
|
-
* defineTypography individually — neither of those functions can see
|
|
166
|
-
* the other section in isolation.
|
|
167
|
-
*/
|
|
168
|
-
type ValidateSizeFontSize<FontSize, TypographyTree> = FontSize extends undefined ? unknown : FontSize extends TokenReferenceString$1 ? ValidateReferenceExists<FontSize, {
|
|
169
|
-
typography: TypographyTree;
|
|
170
|
-
}> : Invalid<`SizeToken.fontSize must reference a typography preset (e.g. "{typography.body}"), not a raw value: "${FontSize & string}"`>;
|
|
171
|
-
/**
|
|
172
|
-
* Walks every size in the SizeScale, validating each one's fontSize.
|
|
173
|
-
*/
|
|
174
|
-
type ValidateSizeScaleFontSizes<Sizes, TypographyTree> = {
|
|
175
|
-
[K in keyof Sizes]: Sizes[K] extends {
|
|
176
|
-
fontSize?: infer F;
|
|
177
|
-
} ? ValidateSizeFontSize<F, TypographyTree> : unknown;
|
|
178
|
-
}[keyof Sizes] extends infer Result ? Result extends Invalid<any> ? Result : unknown : never;
|
|
179
|
-
type ValidateTypography<T extends {
|
|
180
|
-
typography?: unknown;
|
|
181
|
-
sizes?: unknown;
|
|
182
|
-
}> = T["sizes"] extends SizeScale ? ValidateSizeScaleFontSizes<T["sizes"], T["typography"] extends Typography ? T["typography"] : {}> : unknown;
|
|
183
|
-
/**
|
|
184
|
-
* Cross-section rule: SizeToken.fontSize -> Typography preset.
|
|
185
|
-
*
|
|
186
|
-
* Despite the name (kept for continuity with the ownership-tree
|
|
187
|
-
* discussion, which described this as "the typography section" of
|
|
188
|
-
* cross-section rules), the actual invalid DATA here always lives on
|
|
189
|
-
* the `sizes` side (a bad fontSize value on a SizeToken), never on
|
|
190
|
-
* `typography` itself — so the resulting error is keyed under
|
|
191
|
-
* `sizes`, not `typography`. Keying it under `typography` would
|
|
192
|
-
* collide with T's own real `typography` field when intersected onto
|
|
193
|
-
* T in defineTheme's signature (T & ValidateTheme<T>), since TS would
|
|
194
|
-
* then require the theme's actual typography VALUE to also satisfy
|
|
195
|
-
* the Invalid<...> shape — which is a real bug that surfaced and was
|
|
196
|
-
* fixed during end-to-end testing of defineTheme.
|
|
197
|
-
*/
|
|
198
|
-
type ValidateTypographySection<T extends {
|
|
199
|
-
typography?: unknown;
|
|
200
|
-
sizes?: unknown;
|
|
201
|
-
}> = ValidateTypography<T> extends infer Result ? Result extends Invalid<any> ? {
|
|
202
|
-
sizes: Result;
|
|
203
|
-
} : unknown : never;
|
|
204
|
-
/**
|
|
205
|
-
* Validates a single TypographyStyle field: if its value is a
|
|
206
|
-
* "{...}" reference, it MUST resolve against the theme's primitive
|
|
207
|
-
* tokens (e.g. "{fonts.body}", "{fontWeights.bold}"). A raw literal
|
|
208
|
-
* value (e.g. "16px", 400) is always valid — references are opt-in,
|
|
209
|
-
* not required. This is DIFFERENT from the sizes.fontSize rule above:
|
|
210
|
-
* there, a reference is REQUIRED; here, a reference is OPTIONAL but
|
|
211
|
-
* must resolve if present.
|
|
212
|
-
*/
|
|
213
|
-
type ValidateTypographyField<FieldValue, TokensTree> = FieldValue extends TokenReferenceString$1 ? ValidateReferenceExists<FieldValue, TokensTree> : unknown;
|
|
214
|
-
/**
|
|
215
|
-
* Walks every field of a single TypographyStyle variant (fontFamily,
|
|
216
|
-
* fontSize, fontWeight, lineHeight, letterSpacing).
|
|
217
|
-
*/
|
|
218
|
-
type ValidateTypographyStyleFields<Style, TokensTree> = {
|
|
219
|
-
[K in keyof Style]: ValidateTypographyField<Style[K], TokensTree>;
|
|
220
|
-
}[keyof Style] extends infer Result ? Result extends Invalid<any> ? Result : unknown : never;
|
|
221
|
-
/**
|
|
222
|
-
* Walks every variant in the Typography collection (body, heading,
|
|
223
|
-
* label, etc.), validating every field's token references.
|
|
224
|
-
*/
|
|
225
|
-
type ValidateTypographyTokenReferences<TypographyTree, TokensTree> = {
|
|
226
|
-
[K in keyof TypographyTree]: ValidateTypographyStyleFields<TypographyTree[K], TokensTree>;
|
|
227
|
-
}[keyof TypographyTree] extends infer Result ? Result extends Invalid<any> ? Result : unknown : never;
|
|
228
|
-
/**
|
|
229
|
-
* Cross-section rule: TypographyStyle fields (fontFamily, fontSize,
|
|
230
|
-
* fontWeight, lineHeight, letterSpacing) MAY reference primitive
|
|
231
|
-
* tokens (e.g. "{fonts.body}") — if they do, the reference must
|
|
232
|
-
* resolve. This is a genuinely typography-owned rule (the invalid
|
|
233
|
-
* data lives in `typography` itself, not `sizes`), so it's kept as
|
|
234
|
-
* its own separately-exported section validator rather than folded
|
|
235
|
-
* into ValidateTypographySection above — composing both under one
|
|
236
|
-
* name would reintroduce the same key-collision risk that rule
|
|
237
|
-
* already caused once, since this one's natural key IS `typography`.
|
|
238
|
-
*/
|
|
239
|
-
type ValidateTypographyReferencesSection<T extends {
|
|
240
|
-
typography?: unknown;
|
|
241
|
-
tokens?: unknown;
|
|
242
|
-
}> = (T["typography"] extends Typography ? ValidateTypographyTokenReferences<T["typography"], T["tokens"] extends DesignTokens ? T["tokens"] : {}> : unknown) extends infer Result ? Result extends Invalid<any> ? {
|
|
243
|
-
typography: Result;
|
|
244
|
-
} : unknown : never;
|
|
245
|
-
|
|
246
|
-
type ValidateRecipes<_T extends {
|
|
247
|
-
recipes?: unknown;
|
|
248
|
-
}> = unknown;
|
|
249
|
-
type ValidateRecipeSection<_T extends {
|
|
250
|
-
recipes?: unknown;
|
|
251
|
-
}> = unknown;
|
|
252
|
-
|
|
253
|
-
/**
|
|
254
|
-
* Sizes section validator.
|
|
255
|
-
*
|
|
256
|
-
* Deliberately a no-op / pass-through. A SizeToken's fields are:
|
|
257
|
-
* height, width, paddingX, paddingY, fontSize, gap, iconSize, radius,
|
|
258
|
-
* separatorSize — and fontSize is the ONLY one of those that
|
|
259
|
-
* references another theme section (a typography preset). Every
|
|
260
|
-
* other field is a raw CSS length with no cross-section relationship
|
|
261
|
-
* to validate.
|
|
262
|
-
*
|
|
263
|
-
* The fontSize -> typography-preset rule is already fully owned by
|
|
264
|
-
* ValidateTypographySection (see typography.ts) — that's where it's
|
|
265
|
-
* implemented and tested, since it's conceptually "does this
|
|
266
|
-
* typography reference resolve", not "is this size valid". There is
|
|
267
|
-
* currently no independent rule left for ValidateSizesSection to own.
|
|
268
|
-
*
|
|
269
|
-
* This slot still exists (rather than being omitted from
|
|
270
|
-
* ValidateTheme's composition) so the "why is this empty" reasoning
|
|
271
|
-
* is documented in code, and so a real future sizes-only rule has an
|
|
272
|
-
* obvious home to land in without restructuring the composition.
|
|
273
|
-
*/
|
|
274
|
-
type ValidateSizes<_T extends {
|
|
275
|
-
sizes?: unknown;
|
|
276
|
-
}> = unknown;
|
|
277
|
-
type ValidateSizesSection<_T extends {
|
|
278
|
-
sizes?: unknown;
|
|
279
|
-
}> = unknown;
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* Composes all section validators into one type. Each section
|
|
283
|
-
* resolves to `unknown` (a no-op in the intersection) on success, or
|
|
284
|
-
* a section-named `{ sectionName: Invalid<...> }` object on failure
|
|
285
|
-
* — so a failing theme surfaces as a legible, named error at the
|
|
286
|
-
* defineTheme() call site instead of an anonymous intersection wall.
|
|
287
|
-
*
|
|
288
|
-
* ValidateRecipeSection and ValidateSizesSection are currently
|
|
289
|
-
* documented no-ops (see recipes.ts / sizes.ts for why) but are kept
|
|
290
|
-
* in the composition so the full section list is visible here and
|
|
291
|
-
* either can gain real rules later without changing this shape.
|
|
292
|
-
*
|
|
293
|
-
* ValidateTypographySection and ValidateTypographyReferencesSection
|
|
294
|
-
* are two DIFFERENT rules kept as separate types (not merged): the
|
|
295
|
-
* former validates sizes.fontSize -> typography (keyed under `sizes`,
|
|
296
|
-
* required reference), the latter validates typography's own fields
|
|
297
|
-
* -> tokens (keyed under `typography`, optional reference). Merging
|
|
298
|
-
* them would risk reintroducing the same key-collision bug already
|
|
299
|
-
* found and fixed once during this effort.
|
|
300
|
-
*/
|
|
301
|
-
type ValidateTheme<T extends Theme> = ValidateTokenSection<T> & ValidateSemanticTokenSection<T> & ValidateTypographySection<T> & ValidateTypographyReferencesSection<T> & ValidateRecipeSection<T> & ValidateSizesSection<T>;
|
|
302
|
-
|
|
303
|
-
/**
|
|
304
|
-
* Defines a Kreativ UI theme.
|
|
305
|
-
*
|
|
306
|
-
* Type-safe boundary for creating themes while preserving the exact
|
|
307
|
-
* structure and types of the supplied theme. Does not merge with the
|
|
308
|
-
* default theme or mutate the provided object — extension/resolution
|
|
309
|
-
* are handled separately by extendTheme.
|
|
310
|
-
*
|
|
311
|
-
* `T & ValidateTheme<T>` is what actually enforces validation at the
|
|
312
|
-
* call site: ValidateTheme<T> resolves to `unknown` (a no-op) when
|
|
313
|
-
* every section passes, or a section-named `{ tokens: Invalid<...> }`
|
|
314
|
-
* / `{ semanticTokens: Invalid<...> }` / etc. object when a section
|
|
315
|
-
* fails. Intersecting that onto the parameter type means a failing
|
|
316
|
-
* theme produces a real compile error naming the failing section and
|
|
317
|
-
* message, not just a generic "not assignable to Theme".
|
|
318
|
-
*
|
|
319
|
-
* Reference *existence* (does "{colors.brand.500}" resolve to a real
|
|
320
|
-
* token) is checked at compile time via ValidateSemanticTokenSection,
|
|
321
|
-
* as part of ValidateTheme above. Reference *cycles* (semantic token
|
|
322
|
-
* A -> B -> A) can't be reliably caught at the type level (hit TS
|
|
323
|
-
* inference edge cases in recursive conditional types), so they're
|
|
324
|
-
* checked here at call time instead, via assertNoCycles.
|
|
325
|
-
*/
|
|
326
|
-
declare function defineTheme<T extends Theme>(theme: T & ValidateTheme<T>): T;
|
|
327
|
-
|
|
328
|
-
declare function extendTokens(override?: ThemeOverride["tokens"]): DesignTokens;
|
|
329
|
-
declare function extendSemanticTokens(override?: ThemeOverride["semanticTokens"]): SemanticTokens;
|
|
330
|
-
|
|
331
|
-
declare function extendSizes(override?: ThemeOverride["sizes"]): SizeScale;
|
|
332
|
-
|
|
333
|
-
declare function extendTypography(override?: ThemeOverride["typography"]): Typography;
|
|
334
|
-
|
|
335
|
-
/**
|
|
336
|
-
* Overrides a single component's recipe against the built-in default
|
|
337
|
-
* for that component. For overriding just one recipe inline, without
|
|
338
|
-
* constructing a partial keyed-by-component-name object.
|
|
339
|
-
*/
|
|
340
|
-
declare function extendRecipe<K extends keyof RecipeCollection>(name: K, override?: DeepPartial<RecipeCollection[K]>): RecipeCollection[K];
|
|
341
|
-
/**
|
|
342
|
-
* Overrides the theme's full recipe collection against the built-in
|
|
343
|
-
* defaults. Thin wrapper over extendRecipe — the actual merge logic
|
|
344
|
-
* lives in exactly one place.
|
|
345
|
-
*/
|
|
346
|
-
declare function extendRecipes(override?: DeepPartial<RecipeCollection>): RecipeCollection;
|
|
347
|
-
|
|
348
|
-
declare function extendTheme(override?: ThemeOverride): Theme;
|
|
349
|
-
|
|
350
|
-
interface CycleValidationResult {
|
|
351
|
-
valid: boolean;
|
|
352
|
-
cyclePath?: string[];
|
|
353
|
-
}
|
|
354
|
-
/**
|
|
355
|
-
* Walks every semantic token's reference chain looking for a
|
|
356
|
-
* semantic->semantic cycle. Reference *existence* (does the path
|
|
357
|
-
* resolve at all) is validated separately at the type level via
|
|
358
|
-
* ValidateSemanticTokenSection — this function only detects cycles
|
|
359
|
-
* among references that do resolve to another semantic token.
|
|
360
|
-
*
|
|
361
|
-
* A reference that resolves to nothing (dangling) or to a primitive
|
|
362
|
-
* token is a dead end for cycle-walking purposes here, not an error
|
|
363
|
-
* this function raises — that's the type-level existence check's job.
|
|
364
|
-
*/
|
|
365
|
-
declare function validateNoCycles(semanticTokens: SemanticTokens): CycleValidationResult;
|
|
366
|
-
/**
|
|
367
|
-
* Throws a descriptive error if a semantic->semantic cycle is found.
|
|
368
|
-
* Intended to be called from defineTheme/extendTheme.
|
|
369
|
-
*/
|
|
370
|
-
declare function assertNoCycles(semanticTokens: SemanticTokens): void;
|
|
371
|
-
|
|
372
|
-
declare const defaultSemanticTokens: {
|
|
373
|
-
colors: {
|
|
374
|
-
brand: SemanticToken<"{colors.blue.500}" | "{colors.blue.400}">;
|
|
375
|
-
brandHover: SemanticToken<"{colors.blue.600}" | "{colors.blue.300}">;
|
|
376
|
-
brandFg: SemanticToken<"{colors.white}">;
|
|
377
|
-
background: SemanticToken<"{colors.gray.50}" | "{colors.gray.950}">;
|
|
378
|
-
surface: SemanticToken<"{colors.white}" | "{colors.gray.900}">;
|
|
379
|
-
surfaceRaised: SemanticToken<"{colors.gray.50}" | "{colors.gray.800}">;
|
|
380
|
-
surfaceSunken: SemanticToken<"{colors.gray.950}" | "{colors.gray.100}">;
|
|
381
|
-
border: SemanticToken<"{colors.gray.200}" | "{colors.gray.600}">;
|
|
382
|
-
text: SemanticToken<"{colors.gray.50}" | "{colors.gray.900}">;
|
|
383
|
-
textMuted: SemanticToken<"{colors.gray.500}" | "{colors.gray.400}">;
|
|
384
|
-
destructive: SemanticToken<"{colors.red.500}" | "{colors.red.400}">;
|
|
385
|
-
destructiveFg: SemanticToken<"{colors.white}">;
|
|
386
|
-
destructiveHover: SemanticToken<"{colors.red.600}" | "{colors.red.300}">;
|
|
387
|
-
success: SemanticToken<"{colors.green.500}" | "{colors.green.400}">;
|
|
388
|
-
successFg: SemanticToken<"{colors.white}">;
|
|
389
|
-
successHover: SemanticToken<"{colors.green.600}" | "{colors.green.300}">;
|
|
390
|
-
warning: SemanticToken<"{colors.amber.500}" | "{colors.amber.400}">;
|
|
391
|
-
warningFg: SemanticToken<"{colors.black}">;
|
|
392
|
-
warningHover: SemanticToken<"{colors.amber.600}" | "{colors.amber.300}">;
|
|
393
|
-
info: SemanticToken<"{colors.cyan.500}" | "{colors.cyan.400}">;
|
|
394
|
-
infoFg: SemanticToken<"{colors.white}">;
|
|
395
|
-
infoHover: SemanticToken<"{colors.cyan.600}" | "{colors.cyan.300}">;
|
|
396
|
-
shadowColor: SemanticToken<"{colors.gray.200}" | "{colors.gray.600}">;
|
|
397
|
-
};
|
|
398
|
-
};
|
|
399
|
-
|
|
400
|
-
declare const defaultSizes: {
|
|
401
|
-
readonly xs: {
|
|
402
|
-
readonly height: "1.75rem";
|
|
403
|
-
readonly width: "1.75rem";
|
|
404
|
-
readonly paddingX: "0.5rem";
|
|
405
|
-
readonly fontSize: "{typography.sizeXs}";
|
|
406
|
-
readonly gap: "0.25rem";
|
|
407
|
-
readonly iconSize: "0.75rem";
|
|
408
|
-
readonly radius: "0.65rem";
|
|
409
|
-
readonly separatorSize: "15px";
|
|
410
|
-
};
|
|
411
|
-
readonly sm: {
|
|
412
|
-
readonly height: "2rem";
|
|
413
|
-
readonly width: "2rem";
|
|
414
|
-
readonly paddingX: "0.75rem";
|
|
415
|
-
readonly fontSize: "{typography.sizeSm}";
|
|
416
|
-
readonly gap: "0.375rem";
|
|
417
|
-
readonly iconSize: "0.875rem";
|
|
418
|
-
readonly radius: "0.8rem";
|
|
419
|
-
readonly separatorSize: "20px";
|
|
420
|
-
};
|
|
421
|
-
readonly md: {
|
|
422
|
-
readonly height: "2.5rem";
|
|
423
|
-
readonly width: "2.5rem";
|
|
424
|
-
readonly paddingX: "1rem";
|
|
425
|
-
readonly fontSize: "{typography.sizeMd}";
|
|
426
|
-
readonly gap: "0.5rem";
|
|
427
|
-
readonly iconSize: "1rem";
|
|
428
|
-
readonly radius: "1rem";
|
|
429
|
-
readonly separatorSize: "25px";
|
|
430
|
-
};
|
|
431
|
-
readonly lg: {
|
|
432
|
-
readonly height: "3rem";
|
|
433
|
-
readonly width: "3rem";
|
|
434
|
-
readonly paddingX: "1.25rem";
|
|
435
|
-
readonly fontSize: "{typography.sizeLg}";
|
|
436
|
-
readonly gap: "0.625rem";
|
|
437
|
-
readonly iconSize: "1.25rem";
|
|
438
|
-
readonly radius: "1.15rem";
|
|
439
|
-
readonly separatorSize: "30px";
|
|
440
|
-
};
|
|
441
|
-
readonly xl: {
|
|
442
|
-
readonly height: "3.5rem";
|
|
443
|
-
readonly width: "3.5rem";
|
|
444
|
-
readonly paddingX: "1.5rem";
|
|
445
|
-
readonly fontSize: "{typography.sizeXl}";
|
|
446
|
-
readonly gap: "0.875rem";
|
|
447
|
-
readonly iconSize: "1.5rem";
|
|
448
|
-
readonly radius: "1.3rem";
|
|
449
|
-
readonly separatorSize: "35px";
|
|
450
|
-
};
|
|
451
|
-
};
|
|
452
|
-
|
|
453
|
-
declare const defaultRecipes: {
|
|
454
|
-
Button: {
|
|
455
|
-
readonly base: string;
|
|
456
|
-
readonly variants: {
|
|
457
|
-
readonly variant: {
|
|
458
|
-
readonly solid: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
459
|
-
readonly soft: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
460
|
-
readonly outline: "border bg-transparent ease-out active:scale-[0.98]";
|
|
461
|
-
readonly ghost: "bg-transparent ease-out active:scale-[0.98]";
|
|
462
|
-
readonly link: "bg-transparent p-0 h-auto hover:underline ease-out";
|
|
463
|
-
};
|
|
464
|
-
readonly color: Record<string, string>;
|
|
465
|
-
};
|
|
466
|
-
readonly defaultVariants: {
|
|
467
|
-
readonly variant: "solid";
|
|
468
|
-
readonly color: "brand";
|
|
469
|
-
};
|
|
470
|
-
readonly compoundVariants: {
|
|
471
|
-
conditions: Record<string, string>;
|
|
472
|
-
className: string;
|
|
473
|
-
}[];
|
|
474
|
-
};
|
|
475
|
-
FormControl: {
|
|
476
|
-
readonly base: string;
|
|
477
|
-
readonly variants: {
|
|
478
|
-
readonly variant: {
|
|
479
|
-
readonly outline: "border border-kui-border bg-transparent text-kui-text";
|
|
480
|
-
readonly filled: "border border-transparent bg-kui-surface-raised text-kui-text";
|
|
481
|
-
readonly ghost: "border border-transparent bg-transparent text-kui-text";
|
|
482
|
-
};
|
|
483
|
-
readonly embedded: {
|
|
484
|
-
readonly true: string;
|
|
485
|
-
readonly false: "";
|
|
486
|
-
};
|
|
487
|
-
readonly groupItem: {
|
|
488
|
-
readonly true: string;
|
|
489
|
-
readonly false: "";
|
|
490
|
-
};
|
|
491
|
-
readonly state: {
|
|
492
|
-
readonly none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20";
|
|
493
|
-
readonly error: string;
|
|
494
|
-
readonly success: string;
|
|
495
|
-
readonly warning: string;
|
|
496
|
-
};
|
|
497
|
-
readonly rounded: {
|
|
498
|
-
readonly true: "rounded-full";
|
|
499
|
-
readonly false: "";
|
|
500
|
-
};
|
|
501
|
-
readonly fullWidth: {
|
|
502
|
-
readonly true: "w-full";
|
|
503
|
-
readonly false: "";
|
|
504
|
-
};
|
|
505
|
-
readonly disabled: {
|
|
506
|
-
readonly true: string;
|
|
507
|
-
readonly false: "";
|
|
508
|
-
};
|
|
509
|
-
readonly attached: {
|
|
510
|
-
readonly true: "rounded-r-none";
|
|
511
|
-
readonly false: "";
|
|
512
|
-
};
|
|
513
|
-
readonly hasAdornment: {
|
|
514
|
-
readonly true: "px-2";
|
|
515
|
-
readonly false: "";
|
|
516
|
-
};
|
|
517
|
-
};
|
|
518
|
-
readonly compoundVariants: [{
|
|
519
|
-
readonly conditions: {
|
|
520
|
-
readonly embedded: true;
|
|
521
|
-
readonly state: "none";
|
|
522
|
-
};
|
|
523
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
524
|
-
}, {
|
|
525
|
-
readonly conditions: {
|
|
526
|
-
readonly embedded: true;
|
|
527
|
-
readonly state: "error";
|
|
528
|
-
};
|
|
529
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
530
|
-
}, {
|
|
531
|
-
readonly conditions: {
|
|
532
|
-
readonly embedded: true;
|
|
533
|
-
readonly state: "success";
|
|
534
|
-
};
|
|
535
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
536
|
-
}, {
|
|
537
|
-
readonly conditions: {
|
|
538
|
-
readonly embedded: true;
|
|
539
|
-
readonly state: "warning";
|
|
540
|
-
};
|
|
541
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
542
|
-
}, {
|
|
543
|
-
readonly conditions: {
|
|
544
|
-
readonly groupItem: true;
|
|
545
|
-
readonly state: "none";
|
|
546
|
-
};
|
|
547
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
548
|
-
}, {
|
|
549
|
-
readonly conditions: {
|
|
550
|
-
readonly groupItem: true;
|
|
551
|
-
readonly state: "error";
|
|
552
|
-
};
|
|
553
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
554
|
-
}, {
|
|
555
|
-
readonly conditions: {
|
|
556
|
-
readonly groupItem: true;
|
|
557
|
-
readonly state: "success";
|
|
558
|
-
};
|
|
559
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
560
|
-
}, {
|
|
561
|
-
readonly conditions: {
|
|
562
|
-
readonly groupItem: true;
|
|
563
|
-
readonly state: "warning";
|
|
564
|
-
};
|
|
565
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
566
|
-
}, {
|
|
567
|
-
readonly conditions: {
|
|
568
|
-
readonly disabled: true;
|
|
569
|
-
readonly state: "error";
|
|
570
|
-
};
|
|
571
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
572
|
-
}, {
|
|
573
|
-
readonly conditions: {
|
|
574
|
-
readonly disabled: true;
|
|
575
|
-
readonly state: "success";
|
|
576
|
-
};
|
|
577
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
578
|
-
}, {
|
|
579
|
-
readonly conditions: {
|
|
580
|
-
readonly disabled: true;
|
|
581
|
-
readonly state: "warning";
|
|
582
|
-
};
|
|
583
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
584
|
-
}, {
|
|
585
|
-
readonly conditions: {
|
|
586
|
-
readonly embedded: true;
|
|
587
|
-
readonly disabled: true;
|
|
588
|
-
};
|
|
589
|
-
readonly className: "border-0! hover:border-0! focus-within:ring-0! cursor-default";
|
|
590
|
-
}, {
|
|
591
|
-
readonly conditions: {
|
|
592
|
-
readonly groupItem: true;
|
|
593
|
-
readonly disabled: true;
|
|
594
|
-
};
|
|
595
|
-
readonly className: "border-0! hover:border-0! focus-within:ring-0! cursor-default";
|
|
596
|
-
}];
|
|
597
|
-
readonly defaultVariants: {
|
|
598
|
-
readonly variant: "outline";
|
|
599
|
-
readonly state: "none";
|
|
600
|
-
readonly embedded: false;
|
|
601
|
-
readonly groupItem: false;
|
|
602
|
-
readonly rounded: false;
|
|
603
|
-
readonly fullWidth: true;
|
|
604
|
-
readonly disabled: false;
|
|
605
|
-
readonly hasAdornment: false;
|
|
606
|
-
readonly attached: false;
|
|
607
|
-
};
|
|
608
|
-
};
|
|
609
|
-
Input: {
|
|
610
|
-
readonly base: string;
|
|
611
|
-
readonly variants: {
|
|
612
|
-
readonly variant: {
|
|
613
|
-
readonly outline: "";
|
|
614
|
-
readonly filled: "";
|
|
615
|
-
readonly ghost: "";
|
|
616
|
-
};
|
|
617
|
-
};
|
|
618
|
-
readonly defaultVariants: {
|
|
619
|
-
readonly variant: "outline";
|
|
620
|
-
};
|
|
621
|
-
};
|
|
622
|
-
Textarea: {
|
|
623
|
-
readonly base: string;
|
|
624
|
-
readonly variants: {
|
|
625
|
-
readonly variant: {
|
|
626
|
-
readonly outline: "";
|
|
627
|
-
readonly filled: "";
|
|
628
|
-
readonly ghost: "";
|
|
629
|
-
};
|
|
630
|
-
readonly resize: {
|
|
631
|
-
readonly none: "resize-none";
|
|
632
|
-
readonly both: "resize";
|
|
633
|
-
readonly horizontal: "resize-x";
|
|
634
|
-
readonly vertical: "resize-y";
|
|
635
|
-
};
|
|
636
|
-
readonly autoResize: {
|
|
637
|
-
readonly true: "resize-none overflow-hidden";
|
|
638
|
-
readonly false: "";
|
|
639
|
-
};
|
|
640
|
-
};
|
|
641
|
-
readonly defaultVariants: {
|
|
642
|
-
readonly variant: "outline";
|
|
643
|
-
readonly resize: "vertical";
|
|
644
|
-
readonly autoResize: false;
|
|
645
|
-
};
|
|
646
|
-
};
|
|
647
|
-
MarkdownEditor: {
|
|
648
|
-
readonly base: string;
|
|
649
|
-
readonly variants: {
|
|
650
|
-
readonly variant: {
|
|
651
|
-
readonly outline: "border border-kui-border bg-transparent";
|
|
652
|
-
readonly filled: "border border-transparent bg-kui-surface-raised";
|
|
653
|
-
readonly ghost: "border border-transparent bg-transparent";
|
|
654
|
-
};
|
|
655
|
-
readonly state: {
|
|
656
|
-
readonly none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20";
|
|
657
|
-
readonly error: "border-kui-destructive focus-within:ring-2 focus-within:ring-kui-destructive/20";
|
|
658
|
-
readonly success: "border-kui-success focus-within:ring-2 focus-within:ring-kui-success/20";
|
|
659
|
-
readonly warning: "border-kui-warning focus-within:ring-2 focus-within:ring-kui-warning/20";
|
|
660
|
-
};
|
|
661
|
-
readonly disabled: {
|
|
662
|
-
readonly true: string;
|
|
663
|
-
readonly false: "";
|
|
664
|
-
};
|
|
665
|
-
readonly fullWidth: {
|
|
666
|
-
readonly true: "w-full";
|
|
667
|
-
readonly false: "";
|
|
668
|
-
};
|
|
669
|
-
};
|
|
670
|
-
readonly defaultVariants: {
|
|
671
|
-
readonly variant: "outline";
|
|
672
|
-
readonly state: "none";
|
|
673
|
-
readonly fullWidth: true;
|
|
674
|
-
};
|
|
675
|
-
};
|
|
676
|
-
Checkbox: {
|
|
677
|
-
readonly base: string;
|
|
678
|
-
readonly variants: {
|
|
679
|
-
readonly state: {
|
|
680
|
-
readonly none: "border-kui-border";
|
|
681
|
-
readonly error: "border-kui-destructive";
|
|
682
|
-
readonly success: "border-kui-success";
|
|
683
|
-
readonly warning: "border-kui-warning";
|
|
684
|
-
};
|
|
685
|
-
readonly checked: {
|
|
686
|
-
readonly true: "border-kui-brand bg-kui-brand text-kui-brand-fg";
|
|
687
|
-
readonly false: "bg-transparent";
|
|
688
|
-
};
|
|
689
|
-
readonly disabled: {
|
|
690
|
-
readonly true: "cursor-not-allowed";
|
|
691
|
-
readonly false: "cursor-pointer";
|
|
692
|
-
};
|
|
693
|
-
readonly rounded: {
|
|
694
|
-
readonly true: "rounded-full";
|
|
695
|
-
readonly false: "rounded-[calc(var(--kui-checkbox-radius)-4px)]";
|
|
696
|
-
};
|
|
697
|
-
};
|
|
698
|
-
readonly compoundVariants: [{
|
|
699
|
-
readonly conditions: {
|
|
700
|
-
readonly checked: false;
|
|
701
|
-
readonly state: "error";
|
|
702
|
-
};
|
|
703
|
-
readonly className: "border-kui-destructive";
|
|
704
|
-
}, {
|
|
705
|
-
readonly conditions: {
|
|
706
|
-
readonly checked: false;
|
|
707
|
-
readonly state: "success";
|
|
708
|
-
};
|
|
709
|
-
readonly className: "border-kui-success";
|
|
710
|
-
}, {
|
|
711
|
-
readonly conditions: {
|
|
712
|
-
readonly checked: false;
|
|
713
|
-
readonly state: "warning";
|
|
714
|
-
};
|
|
715
|
-
readonly className: "border-kui-warning";
|
|
716
|
-
}];
|
|
717
|
-
readonly defaultVariants: {
|
|
718
|
-
readonly state: "none";
|
|
719
|
-
readonly checked: false;
|
|
720
|
-
readonly disabled: false;
|
|
721
|
-
readonly rounded: false;
|
|
722
|
-
};
|
|
723
|
-
};
|
|
724
|
-
ButtonGroup: {
|
|
725
|
-
readonly base: string;
|
|
726
|
-
readonly variants: {
|
|
727
|
-
readonly orientation: {
|
|
728
|
-
readonly horizontal: "flex-row";
|
|
729
|
-
readonly vertical: "flex-col items-stretch";
|
|
730
|
-
};
|
|
731
|
-
readonly attached: {
|
|
732
|
-
readonly true: "gap-0";
|
|
733
|
-
readonly false: "";
|
|
734
|
-
};
|
|
735
|
-
readonly spacing: {
|
|
736
|
-
readonly none: "gap-0";
|
|
737
|
-
readonly sm: "gap-1";
|
|
738
|
-
readonly md: "gap-2";
|
|
739
|
-
readonly lg: "gap-3";
|
|
740
|
-
};
|
|
741
|
-
};
|
|
742
|
-
readonly defaultVariants: {
|
|
743
|
-
readonly orientation: "horizontal";
|
|
744
|
-
readonly attached: false;
|
|
745
|
-
readonly spacing: "md";
|
|
746
|
-
};
|
|
747
|
-
readonly compoundVariants: [{
|
|
748
|
-
readonly conditions: {
|
|
749
|
-
readonly orientation: "horizontal";
|
|
750
|
-
readonly attached: true;
|
|
751
|
-
};
|
|
752
|
-
readonly className: string;
|
|
753
|
-
}, {
|
|
754
|
-
readonly conditions: {
|
|
755
|
-
readonly orientation: "vertical";
|
|
756
|
-
};
|
|
757
|
-
readonly className: string;
|
|
758
|
-
}, {
|
|
759
|
-
readonly conditions: {
|
|
760
|
-
readonly orientation: "vertical";
|
|
761
|
-
readonly attached: true;
|
|
762
|
-
};
|
|
763
|
-
readonly className: string;
|
|
764
|
-
}];
|
|
765
|
-
};
|
|
766
|
-
Switch: {
|
|
767
|
-
readonly base: string;
|
|
768
|
-
readonly variants: {
|
|
769
|
-
readonly checked: {
|
|
770
|
-
readonly true: "bg-kui-brand";
|
|
771
|
-
readonly false: "bg-kui-border";
|
|
772
|
-
};
|
|
773
|
-
readonly state: {
|
|
774
|
-
readonly none: "";
|
|
775
|
-
readonly error: "bg-kui-destructive";
|
|
776
|
-
readonly success: "bg-kui-success";
|
|
777
|
-
readonly warning: "bg-kui-warning";
|
|
778
|
-
};
|
|
779
|
-
readonly disabled: {
|
|
780
|
-
readonly true: "cursor-not-allowed opacity-50";
|
|
781
|
-
readonly false: "";
|
|
782
|
-
};
|
|
783
|
-
};
|
|
784
|
-
readonly defaultVariants: {
|
|
785
|
-
readonly checked: false;
|
|
786
|
-
readonly state: "none";
|
|
787
|
-
readonly disabled: false;
|
|
788
|
-
};
|
|
789
|
-
};
|
|
790
|
-
Container: {
|
|
791
|
-
readonly base: "w-full";
|
|
792
|
-
readonly variants: {
|
|
793
|
-
readonly maxWidth: {
|
|
794
|
-
readonly xs: "max-w-screen-xs";
|
|
795
|
-
readonly sm: "max-w-screen-sm";
|
|
796
|
-
readonly md: "max-w-screen-md";
|
|
797
|
-
readonly lg: "max-w-screen-lg";
|
|
798
|
-
readonly xl: "max-w-screen-xl";
|
|
799
|
-
readonly full: "max-w-full";
|
|
800
|
-
};
|
|
801
|
-
};
|
|
802
|
-
readonly defaultVariants: {
|
|
803
|
-
readonly maxWidth: "lg";
|
|
804
|
-
};
|
|
805
|
-
};
|
|
806
|
-
Link: {
|
|
807
|
-
readonly base: "kui-link";
|
|
808
|
-
readonly variants: {
|
|
809
|
-
readonly variant: {
|
|
810
|
-
readonly solid: "text-kui-brand hover:text-kui-brand-hover";
|
|
811
|
-
readonly outline: "text-kui-text-secondary hover:text-kui-brand";
|
|
812
|
-
readonly ghost: "text-kui-text-secondary hover:text-kui-text";
|
|
813
|
-
readonly soft: "text-kui-brand hover:text-kui-brand-hover";
|
|
814
|
-
};
|
|
815
|
-
readonly underline: {
|
|
816
|
-
readonly always: "underline";
|
|
817
|
-
readonly hover: "no-underline hover:underline";
|
|
818
|
-
readonly none: "no-underline";
|
|
819
|
-
};
|
|
820
|
-
readonly disabled: {
|
|
821
|
-
readonly true: "pointer-events-none opacity-50 cursor-not-allowed";
|
|
822
|
-
readonly false: "";
|
|
823
|
-
};
|
|
824
|
-
};
|
|
825
|
-
readonly defaultVariants: {
|
|
826
|
-
readonly variant: "solid";
|
|
827
|
-
readonly underline: "hover";
|
|
828
|
-
readonly disabled: false;
|
|
829
|
-
};
|
|
830
|
-
};
|
|
831
|
-
};
|
|
832
|
-
declare const defaultTheme: {
|
|
833
|
-
readonly tokens: {
|
|
834
|
-
colors: {
|
|
835
|
-
blue: {
|
|
836
|
-
300: {
|
|
837
|
-
value: "#5EA6ED";
|
|
838
|
-
};
|
|
839
|
-
400: {
|
|
840
|
-
value: "#4799EB";
|
|
841
|
-
};
|
|
842
|
-
500: {
|
|
843
|
-
value: "#1A80E6";
|
|
844
|
-
};
|
|
845
|
-
600: {
|
|
846
|
-
value: "#1773CF";
|
|
847
|
-
};
|
|
848
|
-
};
|
|
849
|
-
red: {
|
|
850
|
-
300: {
|
|
851
|
-
value: "#EB4747";
|
|
852
|
-
};
|
|
853
|
-
400: {
|
|
854
|
-
value: "#E83030";
|
|
855
|
-
};
|
|
856
|
-
500: {
|
|
857
|
-
value: "#E61A1A";
|
|
858
|
-
};
|
|
859
|
-
600: {
|
|
860
|
-
value: "#CF1717";
|
|
861
|
-
};
|
|
862
|
-
};
|
|
863
|
-
green: {
|
|
864
|
-
300: {
|
|
865
|
-
value: "#26D997";
|
|
866
|
-
};
|
|
867
|
-
400: {
|
|
868
|
-
value: "#22C388";
|
|
869
|
-
};
|
|
870
|
-
500: {
|
|
871
|
-
value: "#16A249";
|
|
872
|
-
};
|
|
873
|
-
600: {
|
|
874
|
-
value: "#12875C";
|
|
875
|
-
};
|
|
876
|
-
};
|
|
877
|
-
amber: {
|
|
878
|
-
300: {
|
|
879
|
-
value: "#F7B23B";
|
|
880
|
-
};
|
|
881
|
-
400: {
|
|
882
|
-
value: "#F6A823";
|
|
883
|
-
};
|
|
884
|
-
500: {
|
|
885
|
-
value: "#F59F0A";
|
|
886
|
-
};
|
|
887
|
-
600: {
|
|
888
|
-
value: "#D38909";
|
|
889
|
-
};
|
|
890
|
-
};
|
|
891
|
-
cyan: {
|
|
892
|
-
300: {
|
|
893
|
-
value: "#6CC3EF";
|
|
894
|
-
};
|
|
895
|
-
400: {
|
|
896
|
-
value: "#47B4EB";
|
|
897
|
-
};
|
|
898
|
-
500: {
|
|
899
|
-
value: "#1791CF";
|
|
900
|
-
};
|
|
901
|
-
600: {
|
|
902
|
-
value: "#137BAE";
|
|
903
|
-
};
|
|
904
|
-
};
|
|
905
|
-
indigo: {
|
|
906
|
-
300: {
|
|
907
|
-
value: "#818CF8";
|
|
908
|
-
};
|
|
909
|
-
400: {
|
|
910
|
-
value: "#6366F1";
|
|
911
|
-
};
|
|
912
|
-
500: {
|
|
913
|
-
value: "#4F46E5";
|
|
914
|
-
};
|
|
915
|
-
600: {
|
|
916
|
-
value: "#4338CA";
|
|
917
|
-
};
|
|
918
|
-
};
|
|
919
|
-
emerald: {
|
|
920
|
-
300: {
|
|
921
|
-
value: "#6EE7B7";
|
|
922
|
-
};
|
|
923
|
-
400: {
|
|
924
|
-
value: "#34D399";
|
|
925
|
-
};
|
|
926
|
-
500: {
|
|
927
|
-
value: "#10B981";
|
|
928
|
-
};
|
|
929
|
-
600: {
|
|
930
|
-
value: "#059669";
|
|
931
|
-
};
|
|
932
|
-
};
|
|
933
|
-
violet: {
|
|
934
|
-
300: {
|
|
935
|
-
value: "#A78BFA";
|
|
936
|
-
};
|
|
937
|
-
400: {
|
|
938
|
-
value: "#8B5CF6";
|
|
939
|
-
};
|
|
940
|
-
500: {
|
|
941
|
-
value: "#7C3AED";
|
|
942
|
-
};
|
|
943
|
-
600: {
|
|
944
|
-
value: "#6D28D9";
|
|
945
|
-
};
|
|
946
|
-
};
|
|
947
|
-
rose: {
|
|
948
|
-
300: {
|
|
949
|
-
value: "#FDA4AF";
|
|
950
|
-
};
|
|
951
|
-
400: {
|
|
952
|
-
value: "#FB7185";
|
|
953
|
-
};
|
|
954
|
-
500: {
|
|
955
|
-
value: "#F43F5E";
|
|
956
|
-
};
|
|
957
|
-
600: {
|
|
958
|
-
value: "#E11D48";
|
|
959
|
-
};
|
|
960
|
-
};
|
|
961
|
-
orange: {
|
|
962
|
-
300: {
|
|
963
|
-
value: "#FDBA74";
|
|
964
|
-
};
|
|
965
|
-
400: {
|
|
966
|
-
value: "#FB923C";
|
|
967
|
-
};
|
|
968
|
-
500: {
|
|
969
|
-
value: "#F97316";
|
|
970
|
-
};
|
|
971
|
-
600: {
|
|
972
|
-
value: "#EA580C";
|
|
973
|
-
};
|
|
974
|
-
};
|
|
975
|
-
gray: {
|
|
976
|
-
50: {
|
|
977
|
-
value: "#FAFAFA";
|
|
978
|
-
};
|
|
979
|
-
100: {
|
|
980
|
-
value: "#EBEBEB";
|
|
981
|
-
};
|
|
982
|
-
200: {
|
|
983
|
-
value: "#D9D9D9";
|
|
984
|
-
};
|
|
985
|
-
300: {
|
|
986
|
-
value: "#BDBDBD";
|
|
987
|
-
};
|
|
988
|
-
400: {
|
|
989
|
-
value: "#999999";
|
|
990
|
-
};
|
|
991
|
-
500: {
|
|
992
|
-
value: "#666666";
|
|
993
|
-
};
|
|
994
|
-
600: {
|
|
995
|
-
value: "#4D4D4D";
|
|
996
|
-
};
|
|
997
|
-
700: {
|
|
998
|
-
value: "#333333";
|
|
999
|
-
};
|
|
1000
|
-
800: {
|
|
1001
|
-
value: "#2E2E2E";
|
|
1002
|
-
};
|
|
1003
|
-
900: {
|
|
1004
|
-
value: "#1F1F1F";
|
|
1005
|
-
};
|
|
1006
|
-
950: {
|
|
1007
|
-
value: "#141414";
|
|
1008
|
-
};
|
|
1009
|
-
1000: {
|
|
1010
|
-
value: "#0A0A0A";
|
|
1011
|
-
};
|
|
1012
|
-
};
|
|
1013
|
-
white: {
|
|
1014
|
-
value: "#FFFFFF";
|
|
1015
|
-
};
|
|
1016
|
-
black: {
|
|
1017
|
-
value: "#000000";
|
|
1018
|
-
};
|
|
1019
|
-
};
|
|
1020
|
-
spacing: {
|
|
1021
|
-
1: {
|
|
1022
|
-
value: "0.25rem";
|
|
1023
|
-
};
|
|
1024
|
-
2: {
|
|
1025
|
-
value: "0.5rem";
|
|
1026
|
-
};
|
|
1027
|
-
3: {
|
|
1028
|
-
value: "0.75rem";
|
|
1029
|
-
};
|
|
1030
|
-
4: {
|
|
1031
|
-
value: "1rem";
|
|
1032
|
-
};
|
|
1033
|
-
5: {
|
|
1034
|
-
value: "1.25rem";
|
|
1035
|
-
};
|
|
1036
|
-
6: {
|
|
1037
|
-
value: "1.5rem";
|
|
1038
|
-
};
|
|
1039
|
-
8: {
|
|
1040
|
-
value: "2rem";
|
|
1041
|
-
};
|
|
1042
|
-
10: {
|
|
1043
|
-
value: "2.5rem";
|
|
1044
|
-
};
|
|
1045
|
-
12: {
|
|
1046
|
-
value: "3rem";
|
|
1047
|
-
};
|
|
1048
|
-
16: {
|
|
1049
|
-
value: "4rem";
|
|
1050
|
-
};
|
|
1051
|
-
xs: {
|
|
1052
|
-
value: "0.25rem";
|
|
1053
|
-
};
|
|
1054
|
-
sm: {
|
|
1055
|
-
value: "0.5rem";
|
|
1056
|
-
};
|
|
1057
|
-
md: {
|
|
1058
|
-
value: "1rem";
|
|
1059
|
-
};
|
|
1060
|
-
lg: {
|
|
1061
|
-
value: "1.5rem";
|
|
1062
|
-
};
|
|
1063
|
-
xl: {
|
|
1064
|
-
value: "2rem";
|
|
1065
|
-
};
|
|
1066
|
-
};
|
|
1067
|
-
radii: {
|
|
1068
|
-
none: {
|
|
1069
|
-
value: "0";
|
|
1070
|
-
};
|
|
1071
|
-
sm: {
|
|
1072
|
-
value: "0.25rem";
|
|
1073
|
-
};
|
|
1074
|
-
md: {
|
|
1075
|
-
value: "0.5rem";
|
|
1076
|
-
};
|
|
1077
|
-
lg: {
|
|
1078
|
-
value: "0.75rem";
|
|
1079
|
-
};
|
|
1080
|
-
xl: {
|
|
1081
|
-
value: "1rem";
|
|
1082
|
-
};
|
|
1083
|
-
full: {
|
|
1084
|
-
value: "9999px";
|
|
1085
|
-
};
|
|
1086
|
-
};
|
|
1087
|
-
fonts: {
|
|
1088
|
-
body: {
|
|
1089
|
-
value: "Inter, sans-serif";
|
|
1090
|
-
};
|
|
1091
|
-
heading: {
|
|
1092
|
-
value: "Inter, sans-serif";
|
|
1093
|
-
};
|
|
1094
|
-
mono: {
|
|
1095
|
-
value: "ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
1096
|
-
};
|
|
1097
|
-
};
|
|
1098
|
-
fontSizes: {
|
|
1099
|
-
xs: {
|
|
1100
|
-
value: "0.75rem";
|
|
1101
|
-
};
|
|
1102
|
-
sm: {
|
|
1103
|
-
value: "0.875rem";
|
|
1104
|
-
};
|
|
1105
|
-
md: {
|
|
1106
|
-
value: "1rem";
|
|
1107
|
-
};
|
|
1108
|
-
lg: {
|
|
1109
|
-
value: "1.125rem";
|
|
1110
|
-
};
|
|
1111
|
-
xl: {
|
|
1112
|
-
value: "1.25rem";
|
|
1113
|
-
};
|
|
1114
|
-
"2xl": {
|
|
1115
|
-
value: "1.5rem";
|
|
1116
|
-
};
|
|
1117
|
-
"3xl": {
|
|
1118
|
-
value: "1.875rem";
|
|
1119
|
-
};
|
|
1120
|
-
"4xl": {
|
|
1121
|
-
value: "2.25rem";
|
|
1122
|
-
};
|
|
1123
|
-
};
|
|
1124
|
-
fontWeights: {
|
|
1125
|
-
normal: {
|
|
1126
|
-
value: "400";
|
|
1127
|
-
};
|
|
1128
|
-
medium: {
|
|
1129
|
-
value: "500";
|
|
1130
|
-
};
|
|
1131
|
-
semibold: {
|
|
1132
|
-
value: "600";
|
|
1133
|
-
};
|
|
1134
|
-
bold: {
|
|
1135
|
-
value: "700";
|
|
1136
|
-
};
|
|
1137
|
-
};
|
|
1138
|
-
lineHeights: {
|
|
1139
|
-
tight: {
|
|
1140
|
-
value: "1.25";
|
|
1141
|
-
};
|
|
1142
|
-
normal: {
|
|
1143
|
-
value: "1.5";
|
|
1144
|
-
};
|
|
1145
|
-
relaxed: {
|
|
1146
|
-
value: "1.75";
|
|
1147
|
-
};
|
|
1148
|
-
};
|
|
1149
|
-
letterSpacings: {
|
|
1150
|
-
tighter: {
|
|
1151
|
-
value: "-0.025em";
|
|
1152
|
-
};
|
|
1153
|
-
tight: {
|
|
1154
|
-
value: "-0.01em";
|
|
1155
|
-
};
|
|
1156
|
-
normal: {
|
|
1157
|
-
value: "0";
|
|
1158
|
-
};
|
|
1159
|
-
wide: {
|
|
1160
|
-
value: "0.025em";
|
|
1161
|
-
};
|
|
1162
|
-
};
|
|
1163
|
-
animations: {
|
|
1164
|
-
spin: {
|
|
1165
|
-
value: "kui-spin 0.6s linear infinite";
|
|
1166
|
-
};
|
|
1167
|
-
"fade-in": {
|
|
1168
|
-
value: "kui-fade-in 0.15s ease-out";
|
|
1169
|
-
};
|
|
1170
|
-
"fade-out": {
|
|
1171
|
-
value: "kui-fade-out 0.15s ease-in";
|
|
1172
|
-
};
|
|
1173
|
-
"scale-in": {
|
|
1174
|
-
value: "kui-scale-in 0.15s ease-out";
|
|
1175
|
-
};
|
|
1176
|
-
"scale-out": {
|
|
1177
|
-
value: "kui-scale-out 0.15s ease-in";
|
|
1178
|
-
};
|
|
1179
|
-
"slide-up": {
|
|
1180
|
-
value: "kui-slide-up 0.2s ease-out";
|
|
1181
|
-
};
|
|
1182
|
-
"slide-down": {
|
|
1183
|
-
value: "kui-slide-down 0.2s ease-out";
|
|
1184
|
-
};
|
|
1185
|
-
"slide-left": {
|
|
1186
|
-
value: "kui-slide-left 0.2s ease-out";
|
|
1187
|
-
};
|
|
1188
|
-
"slide-right": {
|
|
1189
|
-
value: "kui-slide-right 0.2s ease-out";
|
|
1190
|
-
};
|
|
1191
|
-
"slide-in-next": {
|
|
1192
|
-
value: "kui-slide-in-next 0.2s ease-out";
|
|
1193
|
-
};
|
|
1194
|
-
"slide-in-prev": {
|
|
1195
|
-
value: "kui-slide-in-prev 0.2s ease-out";
|
|
1196
|
-
};
|
|
1197
|
-
bounce: {
|
|
1198
|
-
value: "kui-bounce 0.8s infinite";
|
|
1199
|
-
};
|
|
1200
|
-
pulse: {
|
|
1201
|
-
value: "kui-pulse 1.5s ease-in-out infinite";
|
|
1202
|
-
};
|
|
1203
|
-
shake: {
|
|
1204
|
-
value: "kui-shake 0.25s ease-in-out";
|
|
1205
|
-
};
|
|
1206
|
-
shimmer: {
|
|
1207
|
-
value: "kui-shimmer 1.5s linear infinite";
|
|
1208
|
-
};
|
|
1209
|
-
expand: {
|
|
1210
|
-
value: "kui-expand 0.2s ease-out";
|
|
1211
|
-
};
|
|
1212
|
-
collapse: {
|
|
1213
|
-
value: "kui-collapse 0.2s ease-in";
|
|
1214
|
-
};
|
|
1215
|
-
ping: {
|
|
1216
|
-
value: "kui-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite";
|
|
1217
|
-
};
|
|
1218
|
-
"state-error": {
|
|
1219
|
-
value: "kui-state-error 500ms ease-out 3 500ms";
|
|
1220
|
-
};
|
|
1221
|
-
"state-success": {
|
|
1222
|
-
value: "kui-state-success 500ms ease-out 2 500ms";
|
|
1223
|
-
};
|
|
1224
|
-
"state-warning": {
|
|
1225
|
-
value: "kui-state-warning 500ms ease-out 2 500ms";
|
|
1226
|
-
};
|
|
1227
|
-
};
|
|
1228
|
-
breakpoints: {
|
|
1229
|
-
sm: {
|
|
1230
|
-
value: "640px";
|
|
1231
|
-
};
|
|
1232
|
-
md: {
|
|
1233
|
-
value: "768px";
|
|
1234
|
-
};
|
|
1235
|
-
lg: {
|
|
1236
|
-
value: "1024px";
|
|
1237
|
-
};
|
|
1238
|
-
xl: {
|
|
1239
|
-
value: "1280px";
|
|
1240
|
-
};
|
|
1241
|
-
"2xl": {
|
|
1242
|
-
value: "1536px";
|
|
1243
|
-
};
|
|
1244
|
-
};
|
|
1245
|
-
};
|
|
1246
|
-
readonly semanticTokens: {
|
|
1247
|
-
colors: {
|
|
1248
|
-
brand: SemanticToken<"{colors.blue.500}" | "{colors.blue.400}">;
|
|
1249
|
-
brandHover: SemanticToken<"{colors.blue.600}" | "{colors.blue.300}">;
|
|
1250
|
-
brandFg: SemanticToken<"{colors.white}">;
|
|
1251
|
-
background: SemanticToken<"{colors.gray.50}" | "{colors.gray.950}">;
|
|
1252
|
-
surface: SemanticToken<"{colors.white}" | "{colors.gray.900}">;
|
|
1253
|
-
surfaceRaised: SemanticToken<"{colors.gray.50}" | "{colors.gray.800}">;
|
|
1254
|
-
surfaceSunken: SemanticToken<"{colors.gray.950}" | "{colors.gray.100}">;
|
|
1255
|
-
border: SemanticToken<"{colors.gray.200}" | "{colors.gray.600}">;
|
|
1256
|
-
text: SemanticToken<"{colors.gray.50}" | "{colors.gray.900}">;
|
|
1257
|
-
textMuted: SemanticToken<"{colors.gray.500}" | "{colors.gray.400}">;
|
|
1258
|
-
destructive: SemanticToken<"{colors.red.500}" | "{colors.red.400}">;
|
|
1259
|
-
destructiveFg: SemanticToken<"{colors.white}">;
|
|
1260
|
-
destructiveHover: SemanticToken<"{colors.red.600}" | "{colors.red.300}">;
|
|
1261
|
-
success: SemanticToken<"{colors.green.500}" | "{colors.green.400}">;
|
|
1262
|
-
successFg: SemanticToken<"{colors.white}">;
|
|
1263
|
-
successHover: SemanticToken<"{colors.green.600}" | "{colors.green.300}">;
|
|
1264
|
-
warning: SemanticToken<"{colors.amber.500}" | "{colors.amber.400}">;
|
|
1265
|
-
warningFg: SemanticToken<"{colors.black}">;
|
|
1266
|
-
warningHover: SemanticToken<"{colors.amber.600}" | "{colors.amber.300}">;
|
|
1267
|
-
info: SemanticToken<"{colors.cyan.500}" | "{colors.cyan.400}">;
|
|
1268
|
-
infoFg: SemanticToken<"{colors.white}">;
|
|
1269
|
-
infoHover: SemanticToken<"{colors.cyan.600}" | "{colors.cyan.300}">;
|
|
1270
|
-
shadowColor: SemanticToken<"{colors.gray.200}" | "{colors.gray.600}">;
|
|
1271
|
-
};
|
|
1272
|
-
};
|
|
1273
|
-
readonly typography: {
|
|
1274
|
-
readonly body: {
|
|
1275
|
-
readonly fontFamily: "{fonts.body}";
|
|
1276
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1277
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1278
|
-
};
|
|
1279
|
-
readonly bodySmall: {
|
|
1280
|
-
readonly fontFamily: "{fonts.body}";
|
|
1281
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1282
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1283
|
-
};
|
|
1284
|
-
readonly heading: {
|
|
1285
|
-
readonly fontFamily: "{fonts.heading}";
|
|
1286
|
-
readonly fontSize: "{fontSizes.2xl}";
|
|
1287
|
-
readonly fontWeight: "{fontWeights.bold}";
|
|
1288
|
-
readonly lineHeight: "{lineHeights.tight}";
|
|
1289
|
-
};
|
|
1290
|
-
readonly headingSmall: {
|
|
1291
|
-
readonly fontFamily: "{fonts.heading}";
|
|
1292
|
-
readonly fontSize: "{fontSizes.xl}";
|
|
1293
|
-
readonly fontWeight: "{fontWeights.semibold}";
|
|
1294
|
-
readonly lineHeight: "{lineHeights.tight}";
|
|
1295
|
-
};
|
|
1296
|
-
readonly label: {
|
|
1297
|
-
readonly fontFamily: "{fonts.body}";
|
|
1298
|
-
readonly fontWeight: "{fontWeights.medium}";
|
|
1299
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1300
|
-
};
|
|
1301
|
-
readonly caption: {
|
|
1302
|
-
readonly fontFamily: "{fonts.body}";
|
|
1303
|
-
readonly fontSize: "{fontSizes.xs}";
|
|
1304
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1305
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1306
|
-
};
|
|
1307
|
-
readonly mono: {
|
|
1308
|
-
readonly fontFamily: "{fonts.mono}";
|
|
1309
|
-
readonly fontSize: "{fontSizes.xs}";
|
|
1310
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1311
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1312
|
-
};
|
|
1313
|
-
readonly sizeXs: {
|
|
1314
|
-
readonly fontFamily: "{fonts.body}";
|
|
1315
|
-
readonly fontSize: "{fontSizes.xs}";
|
|
1316
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1317
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1318
|
-
};
|
|
1319
|
-
readonly sizeSm: {
|
|
1320
|
-
readonly fontFamily: "{fonts.body}";
|
|
1321
|
-
readonly fontSize: "{fontSizes.sm}";
|
|
1322
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1323
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1324
|
-
};
|
|
1325
|
-
readonly sizeMd: {
|
|
1326
|
-
readonly fontFamily: "{fonts.body}";
|
|
1327
|
-
readonly fontSize: "{fontSizes.sm}";
|
|
1328
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1329
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1330
|
-
};
|
|
1331
|
-
readonly sizeLg: {
|
|
1332
|
-
readonly fontFamily: "{fonts.body}";
|
|
1333
|
-
readonly fontSize: "{fontSizes.md}";
|
|
1334
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
1335
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
1336
|
-
};
|
|
1337
|
-
readonly sizeXl: {
|
|
1338
|
-
readonly fontFamily: "{fonts.body}";
|
|
1339
|
-
readonly fontSize: "{fontSizes.xl}";
|
|
1340
|
-
readonly fontWeight: "{fontWeights.medium}";
|
|
1341
|
-
readonly lineHeight: "{lineHeights.tight}";
|
|
1342
|
-
};
|
|
1343
|
-
};
|
|
1344
|
-
readonly recipes: {
|
|
1345
|
-
Button: {
|
|
1346
|
-
readonly base: string;
|
|
1347
|
-
readonly variants: {
|
|
1348
|
-
readonly variant: {
|
|
1349
|
-
readonly solid: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
1350
|
-
readonly soft: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
1351
|
-
readonly outline: "border bg-transparent ease-out active:scale-[0.98]";
|
|
1352
|
-
readonly ghost: "bg-transparent ease-out active:scale-[0.98]";
|
|
1353
|
-
readonly link: "bg-transparent p-0 h-auto hover:underline ease-out";
|
|
1354
|
-
};
|
|
1355
|
-
readonly color: Record<string, string>;
|
|
1356
|
-
};
|
|
1357
|
-
readonly defaultVariants: {
|
|
1358
|
-
readonly variant: "solid";
|
|
1359
|
-
readonly color: "brand";
|
|
1360
|
-
};
|
|
1361
|
-
readonly compoundVariants: {
|
|
1362
|
-
conditions: Record<string, string>;
|
|
1363
|
-
className: string;
|
|
1364
|
-
}[];
|
|
1365
|
-
};
|
|
1366
|
-
FormControl: {
|
|
1367
|
-
readonly base: string;
|
|
1368
|
-
readonly variants: {
|
|
1369
|
-
readonly variant: {
|
|
1370
|
-
readonly outline: "border border-kui-border bg-transparent text-kui-text";
|
|
1371
|
-
readonly filled: "border border-transparent bg-kui-surface-raised text-kui-text";
|
|
1372
|
-
readonly ghost: "border border-transparent bg-transparent text-kui-text";
|
|
1373
|
-
};
|
|
1374
|
-
readonly embedded: {
|
|
1375
|
-
readonly true: string;
|
|
1376
|
-
readonly false: "";
|
|
1377
|
-
};
|
|
1378
|
-
readonly groupItem: {
|
|
1379
|
-
readonly true: string;
|
|
1380
|
-
readonly false: "";
|
|
1381
|
-
};
|
|
1382
|
-
readonly state: {
|
|
1383
|
-
readonly none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20";
|
|
1384
|
-
readonly error: string;
|
|
1385
|
-
readonly success: string;
|
|
1386
|
-
readonly warning: string;
|
|
1387
|
-
};
|
|
1388
|
-
readonly rounded: {
|
|
1389
|
-
readonly true: "rounded-full";
|
|
1390
|
-
readonly false: "";
|
|
1391
|
-
};
|
|
1392
|
-
readonly fullWidth: {
|
|
1393
|
-
readonly true: "w-full";
|
|
1394
|
-
readonly false: "";
|
|
1395
|
-
};
|
|
1396
|
-
readonly disabled: {
|
|
1397
|
-
readonly true: string;
|
|
1398
|
-
readonly false: "";
|
|
1399
|
-
};
|
|
1400
|
-
readonly attached: {
|
|
1401
|
-
readonly true: "rounded-r-none";
|
|
1402
|
-
readonly false: "";
|
|
1403
|
-
};
|
|
1404
|
-
readonly hasAdornment: {
|
|
1405
|
-
readonly true: "px-2";
|
|
1406
|
-
readonly false: "";
|
|
1407
|
-
};
|
|
1408
|
-
};
|
|
1409
|
-
readonly compoundVariants: [{
|
|
1410
|
-
readonly conditions: {
|
|
1411
|
-
readonly embedded: true;
|
|
1412
|
-
readonly state: "none";
|
|
1413
|
-
};
|
|
1414
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1415
|
-
}, {
|
|
1416
|
-
readonly conditions: {
|
|
1417
|
-
readonly embedded: true;
|
|
1418
|
-
readonly state: "error";
|
|
1419
|
-
};
|
|
1420
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1421
|
-
}, {
|
|
1422
|
-
readonly conditions: {
|
|
1423
|
-
readonly embedded: true;
|
|
1424
|
-
readonly state: "success";
|
|
1425
|
-
};
|
|
1426
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1427
|
-
}, {
|
|
1428
|
-
readonly conditions: {
|
|
1429
|
-
readonly embedded: true;
|
|
1430
|
-
readonly state: "warning";
|
|
1431
|
-
};
|
|
1432
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1433
|
-
}, {
|
|
1434
|
-
readonly conditions: {
|
|
1435
|
-
readonly groupItem: true;
|
|
1436
|
-
readonly state: "none";
|
|
1437
|
-
};
|
|
1438
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1439
|
-
}, {
|
|
1440
|
-
readonly conditions: {
|
|
1441
|
-
readonly groupItem: true;
|
|
1442
|
-
readonly state: "error";
|
|
1443
|
-
};
|
|
1444
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1445
|
-
}, {
|
|
1446
|
-
readonly conditions: {
|
|
1447
|
-
readonly groupItem: true;
|
|
1448
|
-
readonly state: "success";
|
|
1449
|
-
};
|
|
1450
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1451
|
-
}, {
|
|
1452
|
-
readonly conditions: {
|
|
1453
|
-
readonly groupItem: true;
|
|
1454
|
-
readonly state: "warning";
|
|
1455
|
-
};
|
|
1456
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
1457
|
-
}, {
|
|
1458
|
-
readonly conditions: {
|
|
1459
|
-
readonly disabled: true;
|
|
1460
|
-
readonly state: "error";
|
|
1461
|
-
};
|
|
1462
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
1463
|
-
}, {
|
|
1464
|
-
readonly conditions: {
|
|
1465
|
-
readonly disabled: true;
|
|
1466
|
-
readonly state: "success";
|
|
1467
|
-
};
|
|
1468
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
1469
|
-
}, {
|
|
1470
|
-
readonly conditions: {
|
|
1471
|
-
readonly disabled: true;
|
|
1472
|
-
readonly state: "warning";
|
|
1473
|
-
};
|
|
1474
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
1475
|
-
}, {
|
|
1476
|
-
readonly conditions: {
|
|
1477
|
-
readonly embedded: true;
|
|
1478
|
-
readonly disabled: true;
|
|
1479
|
-
};
|
|
1480
|
-
readonly className: "border-0! hover:border-0! focus-within:ring-0! cursor-default";
|
|
1481
|
-
}, {
|
|
1482
|
-
readonly conditions: {
|
|
1483
|
-
readonly groupItem: true;
|
|
1484
|
-
readonly disabled: true;
|
|
1485
|
-
};
|
|
1486
|
-
readonly className: "border-0! hover:border-0! focus-within:ring-0! cursor-default";
|
|
1487
|
-
}];
|
|
1488
|
-
readonly defaultVariants: {
|
|
1489
|
-
readonly variant: "outline";
|
|
1490
|
-
readonly state: "none";
|
|
1491
|
-
readonly embedded: false;
|
|
1492
|
-
readonly groupItem: false;
|
|
1493
|
-
readonly rounded: false;
|
|
1494
|
-
readonly fullWidth: true;
|
|
1495
|
-
readonly disabled: false;
|
|
1496
|
-
readonly hasAdornment: false;
|
|
1497
|
-
readonly attached: false;
|
|
1498
|
-
};
|
|
1499
|
-
};
|
|
1500
|
-
Input: {
|
|
1501
|
-
readonly base: string;
|
|
1502
|
-
readonly variants: {
|
|
1503
|
-
readonly variant: {
|
|
1504
|
-
readonly outline: "";
|
|
1505
|
-
readonly filled: "";
|
|
1506
|
-
readonly ghost: "";
|
|
1507
|
-
};
|
|
1508
|
-
};
|
|
1509
|
-
readonly defaultVariants: {
|
|
1510
|
-
readonly variant: "outline";
|
|
1511
|
-
};
|
|
1512
|
-
};
|
|
1513
|
-
Textarea: {
|
|
1514
|
-
readonly base: string;
|
|
1515
|
-
readonly variants: {
|
|
1516
|
-
readonly variant: {
|
|
1517
|
-
readonly outline: "";
|
|
1518
|
-
readonly filled: "";
|
|
1519
|
-
readonly ghost: "";
|
|
1520
|
-
};
|
|
1521
|
-
readonly resize: {
|
|
1522
|
-
readonly none: "resize-none";
|
|
1523
|
-
readonly both: "resize";
|
|
1524
|
-
readonly horizontal: "resize-x";
|
|
1525
|
-
readonly vertical: "resize-y";
|
|
1526
|
-
};
|
|
1527
|
-
readonly autoResize: {
|
|
1528
|
-
readonly true: "resize-none overflow-hidden";
|
|
1529
|
-
readonly false: "";
|
|
1530
|
-
};
|
|
1531
|
-
};
|
|
1532
|
-
readonly defaultVariants: {
|
|
1533
|
-
readonly variant: "outline";
|
|
1534
|
-
readonly resize: "vertical";
|
|
1535
|
-
readonly autoResize: false;
|
|
1536
|
-
};
|
|
1537
|
-
};
|
|
1538
|
-
MarkdownEditor: {
|
|
1539
|
-
readonly base: string;
|
|
1540
|
-
readonly variants: {
|
|
1541
|
-
readonly variant: {
|
|
1542
|
-
readonly outline: "border border-kui-border bg-transparent";
|
|
1543
|
-
readonly filled: "border border-transparent bg-kui-surface-raised";
|
|
1544
|
-
readonly ghost: "border border-transparent bg-transparent";
|
|
1545
|
-
};
|
|
1546
|
-
readonly state: {
|
|
1547
|
-
readonly none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20";
|
|
1548
|
-
readonly error: "border-kui-destructive focus-within:ring-2 focus-within:ring-kui-destructive/20";
|
|
1549
|
-
readonly success: "border-kui-success focus-within:ring-2 focus-within:ring-kui-success/20";
|
|
1550
|
-
readonly warning: "border-kui-warning focus-within:ring-2 focus-within:ring-kui-warning/20";
|
|
1551
|
-
};
|
|
1552
|
-
readonly disabled: {
|
|
1553
|
-
readonly true: string;
|
|
1554
|
-
readonly false: "";
|
|
1555
|
-
};
|
|
1556
|
-
readonly fullWidth: {
|
|
1557
|
-
readonly true: "w-full";
|
|
1558
|
-
readonly false: "";
|
|
1559
|
-
};
|
|
1560
|
-
};
|
|
1561
|
-
readonly defaultVariants: {
|
|
1562
|
-
readonly variant: "outline";
|
|
1563
|
-
readonly state: "none";
|
|
1564
|
-
readonly fullWidth: true;
|
|
1565
|
-
};
|
|
1566
|
-
};
|
|
1567
|
-
Checkbox: {
|
|
1568
|
-
readonly base: string;
|
|
1569
|
-
readonly variants: {
|
|
1570
|
-
readonly state: {
|
|
1571
|
-
readonly none: "border-kui-border";
|
|
1572
|
-
readonly error: "border-kui-destructive";
|
|
1573
|
-
readonly success: "border-kui-success";
|
|
1574
|
-
readonly warning: "border-kui-warning";
|
|
1575
|
-
};
|
|
1576
|
-
readonly checked: {
|
|
1577
|
-
readonly true: "border-kui-brand bg-kui-brand text-kui-brand-fg";
|
|
1578
|
-
readonly false: "bg-transparent";
|
|
1579
|
-
};
|
|
1580
|
-
readonly disabled: {
|
|
1581
|
-
readonly true: "cursor-not-allowed";
|
|
1582
|
-
readonly false: "cursor-pointer";
|
|
1583
|
-
};
|
|
1584
|
-
readonly rounded: {
|
|
1585
|
-
readonly true: "rounded-full";
|
|
1586
|
-
readonly false: "rounded-[calc(var(--kui-checkbox-radius)-4px)]";
|
|
1587
|
-
};
|
|
1588
|
-
};
|
|
1589
|
-
readonly compoundVariants: [{
|
|
1590
|
-
readonly conditions: {
|
|
1591
|
-
readonly checked: false;
|
|
1592
|
-
readonly state: "error";
|
|
1593
|
-
};
|
|
1594
|
-
readonly className: "border-kui-destructive";
|
|
1595
|
-
}, {
|
|
1596
|
-
readonly conditions: {
|
|
1597
|
-
readonly checked: false;
|
|
1598
|
-
readonly state: "success";
|
|
1599
|
-
};
|
|
1600
|
-
readonly className: "border-kui-success";
|
|
1601
|
-
}, {
|
|
1602
|
-
readonly conditions: {
|
|
1603
|
-
readonly checked: false;
|
|
1604
|
-
readonly state: "warning";
|
|
1605
|
-
};
|
|
1606
|
-
readonly className: "border-kui-warning";
|
|
1607
|
-
}];
|
|
1608
|
-
readonly defaultVariants: {
|
|
1609
|
-
readonly state: "none";
|
|
1610
|
-
readonly checked: false;
|
|
1611
|
-
readonly disabled: false;
|
|
1612
|
-
readonly rounded: false;
|
|
1613
|
-
};
|
|
1614
|
-
};
|
|
1615
|
-
ButtonGroup: {
|
|
1616
|
-
readonly base: string;
|
|
1617
|
-
readonly variants: {
|
|
1618
|
-
readonly orientation: {
|
|
1619
|
-
readonly horizontal: "flex-row";
|
|
1620
|
-
readonly vertical: "flex-col items-stretch";
|
|
1621
|
-
};
|
|
1622
|
-
readonly attached: {
|
|
1623
|
-
readonly true: "gap-0";
|
|
1624
|
-
readonly false: "";
|
|
1625
|
-
};
|
|
1626
|
-
readonly spacing: {
|
|
1627
|
-
readonly none: "gap-0";
|
|
1628
|
-
readonly sm: "gap-1";
|
|
1629
|
-
readonly md: "gap-2";
|
|
1630
|
-
readonly lg: "gap-3";
|
|
1631
|
-
};
|
|
1632
|
-
};
|
|
1633
|
-
readonly defaultVariants: {
|
|
1634
|
-
readonly orientation: "horizontal";
|
|
1635
|
-
readonly attached: false;
|
|
1636
|
-
readonly spacing: "md";
|
|
1637
|
-
};
|
|
1638
|
-
readonly compoundVariants: [{
|
|
1639
|
-
readonly conditions: {
|
|
1640
|
-
readonly orientation: "horizontal";
|
|
1641
|
-
readonly attached: true;
|
|
1642
|
-
};
|
|
1643
|
-
readonly className: string;
|
|
1644
|
-
}, {
|
|
1645
|
-
readonly conditions: {
|
|
1646
|
-
readonly orientation: "vertical";
|
|
1647
|
-
};
|
|
1648
|
-
readonly className: string;
|
|
1649
|
-
}, {
|
|
1650
|
-
readonly conditions: {
|
|
1651
|
-
readonly orientation: "vertical";
|
|
1652
|
-
readonly attached: true;
|
|
1653
|
-
};
|
|
1654
|
-
readonly className: string;
|
|
1655
|
-
}];
|
|
1656
|
-
};
|
|
1657
|
-
Switch: {
|
|
1658
|
-
readonly base: string;
|
|
1659
|
-
readonly variants: {
|
|
1660
|
-
readonly checked: {
|
|
1661
|
-
readonly true: "bg-kui-brand";
|
|
1662
|
-
readonly false: "bg-kui-border";
|
|
1663
|
-
};
|
|
1664
|
-
readonly state: {
|
|
1665
|
-
readonly none: "";
|
|
1666
|
-
readonly error: "bg-kui-destructive";
|
|
1667
|
-
readonly success: "bg-kui-success";
|
|
1668
|
-
readonly warning: "bg-kui-warning";
|
|
1669
|
-
};
|
|
1670
|
-
readonly disabled: {
|
|
1671
|
-
readonly true: "cursor-not-allowed opacity-50";
|
|
1672
|
-
readonly false: "";
|
|
1673
|
-
};
|
|
1674
|
-
};
|
|
1675
|
-
readonly defaultVariants: {
|
|
1676
|
-
readonly checked: false;
|
|
1677
|
-
readonly state: "none";
|
|
1678
|
-
readonly disabled: false;
|
|
1679
|
-
};
|
|
1680
|
-
};
|
|
1681
|
-
Container: {
|
|
1682
|
-
readonly base: "w-full";
|
|
1683
|
-
readonly variants: {
|
|
1684
|
-
readonly maxWidth: {
|
|
1685
|
-
readonly xs: "max-w-screen-xs";
|
|
1686
|
-
readonly sm: "max-w-screen-sm";
|
|
1687
|
-
readonly md: "max-w-screen-md";
|
|
1688
|
-
readonly lg: "max-w-screen-lg";
|
|
1689
|
-
readonly xl: "max-w-screen-xl";
|
|
1690
|
-
readonly full: "max-w-full";
|
|
1691
|
-
};
|
|
1692
|
-
};
|
|
1693
|
-
readonly defaultVariants: {
|
|
1694
|
-
readonly maxWidth: "lg";
|
|
1695
|
-
};
|
|
1696
|
-
};
|
|
1697
|
-
Link: {
|
|
1698
|
-
readonly base: "kui-link";
|
|
1699
|
-
readonly variants: {
|
|
1700
|
-
readonly variant: {
|
|
1701
|
-
readonly solid: "text-kui-brand hover:text-kui-brand-hover";
|
|
1702
|
-
readonly outline: "text-kui-text-secondary hover:text-kui-brand";
|
|
1703
|
-
readonly ghost: "text-kui-text-secondary hover:text-kui-text";
|
|
1704
|
-
readonly soft: "text-kui-brand hover:text-kui-brand-hover";
|
|
1705
|
-
};
|
|
1706
|
-
readonly underline: {
|
|
1707
|
-
readonly always: "underline";
|
|
1708
|
-
readonly hover: "no-underline hover:underline";
|
|
1709
|
-
readonly none: "no-underline";
|
|
1710
|
-
};
|
|
1711
|
-
readonly disabled: {
|
|
1712
|
-
readonly true: "pointer-events-none opacity-50 cursor-not-allowed";
|
|
1713
|
-
readonly false: "";
|
|
1714
|
-
};
|
|
1715
|
-
};
|
|
1716
|
-
readonly defaultVariants: {
|
|
1717
|
-
readonly variant: "solid";
|
|
1718
|
-
readonly underline: "hover";
|
|
1719
|
-
readonly disabled: false;
|
|
1720
|
-
};
|
|
1721
|
-
};
|
|
1722
|
-
};
|
|
1723
|
-
readonly intensity: 50;
|
|
1724
|
-
readonly sizes: {
|
|
1725
|
-
readonly xs: {
|
|
1726
|
-
readonly height: "1.75rem";
|
|
1727
|
-
readonly width: "1.75rem";
|
|
1728
|
-
readonly paddingX: "0.5rem";
|
|
1729
|
-
readonly fontSize: "{typography.sizeXs}";
|
|
1730
|
-
readonly gap: "0.25rem";
|
|
1731
|
-
readonly iconSize: "0.75rem";
|
|
1732
|
-
readonly radius: "0.65rem";
|
|
1733
|
-
readonly separatorSize: "15px";
|
|
1734
|
-
};
|
|
1735
|
-
readonly sm: {
|
|
1736
|
-
readonly height: "2rem";
|
|
1737
|
-
readonly width: "2rem";
|
|
1738
|
-
readonly paddingX: "0.75rem";
|
|
1739
|
-
readonly fontSize: "{typography.sizeSm}";
|
|
1740
|
-
readonly gap: "0.375rem";
|
|
1741
|
-
readonly iconSize: "0.875rem";
|
|
1742
|
-
readonly radius: "0.8rem";
|
|
1743
|
-
readonly separatorSize: "20px";
|
|
1744
|
-
};
|
|
1745
|
-
readonly md: {
|
|
1746
|
-
readonly height: "2.5rem";
|
|
1747
|
-
readonly width: "2.5rem";
|
|
1748
|
-
readonly paddingX: "1rem";
|
|
1749
|
-
readonly fontSize: "{typography.sizeMd}";
|
|
1750
|
-
readonly gap: "0.5rem";
|
|
1751
|
-
readonly iconSize: "1rem";
|
|
1752
|
-
readonly radius: "1rem";
|
|
1753
|
-
readonly separatorSize: "25px";
|
|
1754
|
-
};
|
|
1755
|
-
readonly lg: {
|
|
1756
|
-
readonly height: "3rem";
|
|
1757
|
-
readonly width: "3rem";
|
|
1758
|
-
readonly paddingX: "1.25rem";
|
|
1759
|
-
readonly fontSize: "{typography.sizeLg}";
|
|
1760
|
-
readonly gap: "0.625rem";
|
|
1761
|
-
readonly iconSize: "1.25rem";
|
|
1762
|
-
readonly radius: "1.15rem";
|
|
1763
|
-
readonly separatorSize: "30px";
|
|
1764
|
-
};
|
|
1765
|
-
readonly xl: {
|
|
1766
|
-
readonly height: "3.5rem";
|
|
1767
|
-
readonly width: "3.5rem";
|
|
1768
|
-
readonly paddingX: "1.5rem";
|
|
1769
|
-
readonly fontSize: "{typography.sizeXl}";
|
|
1770
|
-
readonly gap: "0.875rem";
|
|
1771
|
-
readonly iconSize: "1.5rem";
|
|
1772
|
-
readonly radius: "1.3rem";
|
|
1773
|
-
readonly separatorSize: "35px";
|
|
1774
|
-
};
|
|
1775
|
-
};
|
|
1776
|
-
};
|
|
1777
|
-
|
|
1778
|
-
declare const defaultTokens: {
|
|
1779
|
-
colors: {
|
|
1780
|
-
blue: {
|
|
1781
|
-
300: {
|
|
1782
|
-
value: "#5EA6ED";
|
|
1783
|
-
};
|
|
1784
|
-
400: {
|
|
1785
|
-
value: "#4799EB";
|
|
1786
|
-
};
|
|
1787
|
-
500: {
|
|
1788
|
-
value: "#1A80E6";
|
|
1789
|
-
};
|
|
1790
|
-
600: {
|
|
1791
|
-
value: "#1773CF";
|
|
1792
|
-
};
|
|
1793
|
-
};
|
|
1794
|
-
red: {
|
|
1795
|
-
300: {
|
|
1796
|
-
value: "#EB4747";
|
|
1797
|
-
};
|
|
1798
|
-
400: {
|
|
1799
|
-
value: "#E83030";
|
|
1800
|
-
};
|
|
1801
|
-
500: {
|
|
1802
|
-
value: "#E61A1A";
|
|
1803
|
-
};
|
|
1804
|
-
600: {
|
|
1805
|
-
value: "#CF1717";
|
|
1806
|
-
};
|
|
1807
|
-
};
|
|
1808
|
-
green: {
|
|
1809
|
-
300: {
|
|
1810
|
-
value: "#26D997";
|
|
1811
|
-
};
|
|
1812
|
-
400: {
|
|
1813
|
-
value: "#22C388";
|
|
1814
|
-
};
|
|
1815
|
-
500: {
|
|
1816
|
-
value: "#16A249";
|
|
1817
|
-
};
|
|
1818
|
-
600: {
|
|
1819
|
-
value: "#12875C";
|
|
1820
|
-
};
|
|
1821
|
-
};
|
|
1822
|
-
amber: {
|
|
1823
|
-
300: {
|
|
1824
|
-
value: "#F7B23B";
|
|
1825
|
-
};
|
|
1826
|
-
400: {
|
|
1827
|
-
value: "#F6A823";
|
|
1828
|
-
};
|
|
1829
|
-
500: {
|
|
1830
|
-
value: "#F59F0A";
|
|
1831
|
-
};
|
|
1832
|
-
600: {
|
|
1833
|
-
value: "#D38909";
|
|
1834
|
-
};
|
|
1835
|
-
};
|
|
1836
|
-
cyan: {
|
|
1837
|
-
300: {
|
|
1838
|
-
value: "#6CC3EF";
|
|
1839
|
-
};
|
|
1840
|
-
400: {
|
|
1841
|
-
value: "#47B4EB";
|
|
1842
|
-
};
|
|
1843
|
-
500: {
|
|
1844
|
-
value: "#1791CF";
|
|
1845
|
-
};
|
|
1846
|
-
600: {
|
|
1847
|
-
value: "#137BAE";
|
|
1848
|
-
};
|
|
1849
|
-
};
|
|
1850
|
-
indigo: {
|
|
1851
|
-
300: {
|
|
1852
|
-
value: "#818CF8";
|
|
1853
|
-
};
|
|
1854
|
-
400: {
|
|
1855
|
-
value: "#6366F1";
|
|
1856
|
-
};
|
|
1857
|
-
500: {
|
|
1858
|
-
value: "#4F46E5";
|
|
1859
|
-
};
|
|
1860
|
-
600: {
|
|
1861
|
-
value: "#4338CA";
|
|
1862
|
-
};
|
|
1863
|
-
};
|
|
1864
|
-
emerald: {
|
|
1865
|
-
300: {
|
|
1866
|
-
value: "#6EE7B7";
|
|
1867
|
-
};
|
|
1868
|
-
400: {
|
|
1869
|
-
value: "#34D399";
|
|
1870
|
-
};
|
|
1871
|
-
500: {
|
|
1872
|
-
value: "#10B981";
|
|
1873
|
-
};
|
|
1874
|
-
600: {
|
|
1875
|
-
value: "#059669";
|
|
1876
|
-
};
|
|
1877
|
-
};
|
|
1878
|
-
violet: {
|
|
1879
|
-
300: {
|
|
1880
|
-
value: "#A78BFA";
|
|
1881
|
-
};
|
|
1882
|
-
400: {
|
|
1883
|
-
value: "#8B5CF6";
|
|
1884
|
-
};
|
|
1885
|
-
500: {
|
|
1886
|
-
value: "#7C3AED";
|
|
1887
|
-
};
|
|
1888
|
-
600: {
|
|
1889
|
-
value: "#6D28D9";
|
|
1890
|
-
};
|
|
1891
|
-
};
|
|
1892
|
-
rose: {
|
|
1893
|
-
300: {
|
|
1894
|
-
value: "#FDA4AF";
|
|
1895
|
-
};
|
|
1896
|
-
400: {
|
|
1897
|
-
value: "#FB7185";
|
|
1898
|
-
};
|
|
1899
|
-
500: {
|
|
1900
|
-
value: "#F43F5E";
|
|
1901
|
-
};
|
|
1902
|
-
600: {
|
|
1903
|
-
value: "#E11D48";
|
|
1904
|
-
};
|
|
1905
|
-
};
|
|
1906
|
-
orange: {
|
|
1907
|
-
300: {
|
|
1908
|
-
value: "#FDBA74";
|
|
1909
|
-
};
|
|
1910
|
-
400: {
|
|
1911
|
-
value: "#FB923C";
|
|
1912
|
-
};
|
|
1913
|
-
500: {
|
|
1914
|
-
value: "#F97316";
|
|
1915
|
-
};
|
|
1916
|
-
600: {
|
|
1917
|
-
value: "#EA580C";
|
|
1918
|
-
};
|
|
1919
|
-
};
|
|
1920
|
-
gray: {
|
|
1921
|
-
50: {
|
|
1922
|
-
value: "#FAFAFA";
|
|
1923
|
-
};
|
|
1924
|
-
100: {
|
|
1925
|
-
value: "#EBEBEB";
|
|
1926
|
-
};
|
|
1927
|
-
200: {
|
|
1928
|
-
value: "#D9D9D9";
|
|
1929
|
-
};
|
|
1930
|
-
300: {
|
|
1931
|
-
value: "#BDBDBD";
|
|
1932
|
-
};
|
|
1933
|
-
400: {
|
|
1934
|
-
value: "#999999";
|
|
1935
|
-
};
|
|
1936
|
-
500: {
|
|
1937
|
-
value: "#666666";
|
|
1938
|
-
};
|
|
1939
|
-
600: {
|
|
1940
|
-
value: "#4D4D4D";
|
|
1941
|
-
};
|
|
1942
|
-
700: {
|
|
1943
|
-
value: "#333333";
|
|
1944
|
-
};
|
|
1945
|
-
800: {
|
|
1946
|
-
value: "#2E2E2E";
|
|
1947
|
-
};
|
|
1948
|
-
900: {
|
|
1949
|
-
value: "#1F1F1F";
|
|
1950
|
-
};
|
|
1951
|
-
950: {
|
|
1952
|
-
value: "#141414";
|
|
1953
|
-
};
|
|
1954
|
-
1000: {
|
|
1955
|
-
value: "#0A0A0A";
|
|
1956
|
-
};
|
|
1957
|
-
};
|
|
1958
|
-
white: {
|
|
1959
|
-
value: "#FFFFFF";
|
|
1960
|
-
};
|
|
1961
|
-
black: {
|
|
1962
|
-
value: "#000000";
|
|
1963
|
-
};
|
|
1964
|
-
};
|
|
1965
|
-
spacing: {
|
|
1966
|
-
1: {
|
|
1967
|
-
value: "0.25rem";
|
|
1968
|
-
};
|
|
1969
|
-
2: {
|
|
1970
|
-
value: "0.5rem";
|
|
1971
|
-
};
|
|
1972
|
-
3: {
|
|
1973
|
-
value: "0.75rem";
|
|
1974
|
-
};
|
|
1975
|
-
4: {
|
|
1976
|
-
value: "1rem";
|
|
1977
|
-
};
|
|
1978
|
-
5: {
|
|
1979
|
-
value: "1.25rem";
|
|
1980
|
-
};
|
|
1981
|
-
6: {
|
|
1982
|
-
value: "1.5rem";
|
|
1983
|
-
};
|
|
1984
|
-
8: {
|
|
1985
|
-
value: "2rem";
|
|
1986
|
-
};
|
|
1987
|
-
10: {
|
|
1988
|
-
value: "2.5rem";
|
|
1989
|
-
};
|
|
1990
|
-
12: {
|
|
1991
|
-
value: "3rem";
|
|
1992
|
-
};
|
|
1993
|
-
16: {
|
|
1994
|
-
value: "4rem";
|
|
1995
|
-
};
|
|
1996
|
-
xs: {
|
|
1997
|
-
value: "0.25rem";
|
|
1998
|
-
};
|
|
1999
|
-
sm: {
|
|
2000
|
-
value: "0.5rem";
|
|
2001
|
-
};
|
|
2002
|
-
md: {
|
|
2003
|
-
value: "1rem";
|
|
2004
|
-
};
|
|
2005
|
-
lg: {
|
|
2006
|
-
value: "1.5rem";
|
|
2007
|
-
};
|
|
2008
|
-
xl: {
|
|
2009
|
-
value: "2rem";
|
|
2010
|
-
};
|
|
2011
|
-
};
|
|
2012
|
-
radii: {
|
|
2013
|
-
none: {
|
|
2014
|
-
value: "0";
|
|
2015
|
-
};
|
|
2016
|
-
sm: {
|
|
2017
|
-
value: "0.25rem";
|
|
2018
|
-
};
|
|
2019
|
-
md: {
|
|
2020
|
-
value: "0.5rem";
|
|
2021
|
-
};
|
|
2022
|
-
lg: {
|
|
2023
|
-
value: "0.75rem";
|
|
2024
|
-
};
|
|
2025
|
-
xl: {
|
|
2026
|
-
value: "1rem";
|
|
2027
|
-
};
|
|
2028
|
-
full: {
|
|
2029
|
-
value: "9999px";
|
|
2030
|
-
};
|
|
2031
|
-
};
|
|
2032
|
-
fonts: {
|
|
2033
|
-
body: {
|
|
2034
|
-
value: "Inter, sans-serif";
|
|
2035
|
-
};
|
|
2036
|
-
heading: {
|
|
2037
|
-
value: "Inter, sans-serif";
|
|
2038
|
-
};
|
|
2039
|
-
mono: {
|
|
2040
|
-
value: "ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
2041
|
-
};
|
|
2042
|
-
};
|
|
2043
|
-
fontSizes: {
|
|
2044
|
-
xs: {
|
|
2045
|
-
value: "0.75rem";
|
|
2046
|
-
};
|
|
2047
|
-
sm: {
|
|
2048
|
-
value: "0.875rem";
|
|
2049
|
-
};
|
|
2050
|
-
md: {
|
|
2051
|
-
value: "1rem";
|
|
2052
|
-
};
|
|
2053
|
-
lg: {
|
|
2054
|
-
value: "1.125rem";
|
|
2055
|
-
};
|
|
2056
|
-
xl: {
|
|
2057
|
-
value: "1.25rem";
|
|
2058
|
-
};
|
|
2059
|
-
"2xl": {
|
|
2060
|
-
value: "1.5rem";
|
|
2061
|
-
};
|
|
2062
|
-
"3xl": {
|
|
2063
|
-
value: "1.875rem";
|
|
2064
|
-
};
|
|
2065
|
-
"4xl": {
|
|
2066
|
-
value: "2.25rem";
|
|
2067
|
-
};
|
|
2068
|
-
};
|
|
2069
|
-
fontWeights: {
|
|
2070
|
-
normal: {
|
|
2071
|
-
value: "400";
|
|
2072
|
-
};
|
|
2073
|
-
medium: {
|
|
2074
|
-
value: "500";
|
|
2075
|
-
};
|
|
2076
|
-
semibold: {
|
|
2077
|
-
value: "600";
|
|
2078
|
-
};
|
|
2079
|
-
bold: {
|
|
2080
|
-
value: "700";
|
|
2081
|
-
};
|
|
2082
|
-
};
|
|
2083
|
-
lineHeights: {
|
|
2084
|
-
tight: {
|
|
2085
|
-
value: "1.25";
|
|
2086
|
-
};
|
|
2087
|
-
normal: {
|
|
2088
|
-
value: "1.5";
|
|
2089
|
-
};
|
|
2090
|
-
relaxed: {
|
|
2091
|
-
value: "1.75";
|
|
2092
|
-
};
|
|
2093
|
-
};
|
|
2094
|
-
letterSpacings: {
|
|
2095
|
-
tighter: {
|
|
2096
|
-
value: "-0.025em";
|
|
2097
|
-
};
|
|
2098
|
-
tight: {
|
|
2099
|
-
value: "-0.01em";
|
|
2100
|
-
};
|
|
2101
|
-
normal: {
|
|
2102
|
-
value: "0";
|
|
2103
|
-
};
|
|
2104
|
-
wide: {
|
|
2105
|
-
value: "0.025em";
|
|
2106
|
-
};
|
|
2107
|
-
};
|
|
2108
|
-
animations: {
|
|
2109
|
-
spin: {
|
|
2110
|
-
value: "kui-spin 0.6s linear infinite";
|
|
2111
|
-
};
|
|
2112
|
-
"fade-in": {
|
|
2113
|
-
value: "kui-fade-in 0.15s ease-out";
|
|
2114
|
-
};
|
|
2115
|
-
"fade-out": {
|
|
2116
|
-
value: "kui-fade-out 0.15s ease-in";
|
|
2117
|
-
};
|
|
2118
|
-
"scale-in": {
|
|
2119
|
-
value: "kui-scale-in 0.15s ease-out";
|
|
2120
|
-
};
|
|
2121
|
-
"scale-out": {
|
|
2122
|
-
value: "kui-scale-out 0.15s ease-in";
|
|
2123
|
-
};
|
|
2124
|
-
"slide-up": {
|
|
2125
|
-
value: "kui-slide-up 0.2s ease-out";
|
|
2126
|
-
};
|
|
2127
|
-
"slide-down": {
|
|
2128
|
-
value: "kui-slide-down 0.2s ease-out";
|
|
2129
|
-
};
|
|
2130
|
-
"slide-left": {
|
|
2131
|
-
value: "kui-slide-left 0.2s ease-out";
|
|
2132
|
-
};
|
|
2133
|
-
"slide-right": {
|
|
2134
|
-
value: "kui-slide-right 0.2s ease-out";
|
|
2135
|
-
};
|
|
2136
|
-
"slide-in-next": {
|
|
2137
|
-
value: "kui-slide-in-next 0.2s ease-out";
|
|
2138
|
-
};
|
|
2139
|
-
"slide-in-prev": {
|
|
2140
|
-
value: "kui-slide-in-prev 0.2s ease-out";
|
|
2141
|
-
};
|
|
2142
|
-
bounce: {
|
|
2143
|
-
value: "kui-bounce 0.8s infinite";
|
|
2144
|
-
};
|
|
2145
|
-
pulse: {
|
|
2146
|
-
value: "kui-pulse 1.5s ease-in-out infinite";
|
|
2147
|
-
};
|
|
2148
|
-
shake: {
|
|
2149
|
-
value: "kui-shake 0.25s ease-in-out";
|
|
2150
|
-
};
|
|
2151
|
-
shimmer: {
|
|
2152
|
-
value: "kui-shimmer 1.5s linear infinite";
|
|
2153
|
-
};
|
|
2154
|
-
expand: {
|
|
2155
|
-
value: "kui-expand 0.2s ease-out";
|
|
2156
|
-
};
|
|
2157
|
-
collapse: {
|
|
2158
|
-
value: "kui-collapse 0.2s ease-in";
|
|
2159
|
-
};
|
|
2160
|
-
ping: {
|
|
2161
|
-
value: "kui-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite";
|
|
2162
|
-
};
|
|
2163
|
-
"state-error": {
|
|
2164
|
-
value: "kui-state-error 500ms ease-out 3 500ms";
|
|
2165
|
-
};
|
|
2166
|
-
"state-success": {
|
|
2167
|
-
value: "kui-state-success 500ms ease-out 2 500ms";
|
|
2168
|
-
};
|
|
2169
|
-
"state-warning": {
|
|
2170
|
-
value: "kui-state-warning 500ms ease-out 2 500ms";
|
|
2171
|
-
};
|
|
2172
|
-
};
|
|
2173
|
-
breakpoints: {
|
|
2174
|
-
sm: {
|
|
2175
|
-
value: "640px";
|
|
2176
|
-
};
|
|
2177
|
-
md: {
|
|
2178
|
-
value: "768px";
|
|
2179
|
-
};
|
|
2180
|
-
lg: {
|
|
2181
|
-
value: "1024px";
|
|
2182
|
-
};
|
|
2183
|
-
xl: {
|
|
2184
|
-
value: "1280px";
|
|
2185
|
-
};
|
|
2186
|
-
"2xl": {
|
|
2187
|
-
value: "1536px";
|
|
2188
|
-
};
|
|
2189
|
-
};
|
|
2190
|
-
};
|
|
2191
|
-
|
|
2192
|
-
declare const defaultTypography: {
|
|
2193
|
-
readonly body: {
|
|
2194
|
-
readonly fontFamily: "{fonts.body}";
|
|
2195
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2196
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2197
|
-
};
|
|
2198
|
-
readonly bodySmall: {
|
|
2199
|
-
readonly fontFamily: "{fonts.body}";
|
|
2200
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2201
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2202
|
-
};
|
|
2203
|
-
readonly heading: {
|
|
2204
|
-
readonly fontFamily: "{fonts.heading}";
|
|
2205
|
-
readonly fontSize: "{fontSizes.2xl}";
|
|
2206
|
-
readonly fontWeight: "{fontWeights.bold}";
|
|
2207
|
-
readonly lineHeight: "{lineHeights.tight}";
|
|
2208
|
-
};
|
|
2209
|
-
readonly headingSmall: {
|
|
2210
|
-
readonly fontFamily: "{fonts.heading}";
|
|
2211
|
-
readonly fontSize: "{fontSizes.xl}";
|
|
2212
|
-
readonly fontWeight: "{fontWeights.semibold}";
|
|
2213
|
-
readonly lineHeight: "{lineHeights.tight}";
|
|
2214
|
-
};
|
|
2215
|
-
readonly label: {
|
|
2216
|
-
readonly fontFamily: "{fonts.body}";
|
|
2217
|
-
readonly fontWeight: "{fontWeights.medium}";
|
|
2218
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2219
|
-
};
|
|
2220
|
-
readonly caption: {
|
|
2221
|
-
readonly fontFamily: "{fonts.body}";
|
|
2222
|
-
readonly fontSize: "{fontSizes.xs}";
|
|
2223
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2224
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2225
|
-
};
|
|
2226
|
-
readonly mono: {
|
|
2227
|
-
readonly fontFamily: "{fonts.mono}";
|
|
2228
|
-
readonly fontSize: "{fontSizes.xs}";
|
|
2229
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2230
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2231
|
-
};
|
|
2232
|
-
readonly sizeXs: {
|
|
2233
|
-
readonly fontFamily: "{fonts.body}";
|
|
2234
|
-
readonly fontSize: "{fontSizes.xs}";
|
|
2235
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2236
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2237
|
-
};
|
|
2238
|
-
readonly sizeSm: {
|
|
2239
|
-
readonly fontFamily: "{fonts.body}";
|
|
2240
|
-
readonly fontSize: "{fontSizes.sm}";
|
|
2241
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2242
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2243
|
-
};
|
|
2244
|
-
readonly sizeMd: {
|
|
2245
|
-
readonly fontFamily: "{fonts.body}";
|
|
2246
|
-
readonly fontSize: "{fontSizes.sm}";
|
|
2247
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2248
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2249
|
-
};
|
|
2250
|
-
readonly sizeLg: {
|
|
2251
|
-
readonly fontFamily: "{fonts.body}";
|
|
2252
|
-
readonly fontSize: "{fontSizes.md}";
|
|
2253
|
-
readonly fontWeight: "{fontWeights.normal}";
|
|
2254
|
-
readonly lineHeight: "{lineHeights.normal}";
|
|
2255
|
-
};
|
|
2256
|
-
readonly sizeXl: {
|
|
2257
|
-
readonly fontFamily: "{fonts.body}";
|
|
2258
|
-
readonly fontSize: "{fontSizes.xl}";
|
|
2259
|
-
readonly fontWeight: "{fontWeights.medium}";
|
|
2260
|
-
readonly lineHeight: "{lineHeights.tight}";
|
|
2261
|
-
};
|
|
2262
|
-
};
|
|
2263
|
-
|
|
2264
|
-
declare const buttonBase: string;
|
|
2265
|
-
declare const buttonVariants: {
|
|
2266
|
-
readonly solid: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
2267
|
-
readonly soft: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
2268
|
-
readonly outline: "border bg-transparent ease-out active:scale-[0.98]";
|
|
2269
|
-
readonly ghost: "bg-transparent ease-out active:scale-[0.98]";
|
|
2270
|
-
readonly link: "bg-transparent p-0 h-auto hover:underline ease-out";
|
|
2271
|
-
};
|
|
2272
|
-
declare const buttonColors: {
|
|
2273
|
-
readonly brand: {
|
|
2274
|
-
readonly solid: "bg-kui-brand text-kui-brand-fg hover:bg-kui-brand-hover";
|
|
2275
|
-
readonly outline: "border-kui-brand text-kui-brand hover:bg-kui-brand/10";
|
|
2276
|
-
readonly ghost: "text-kui-brand hover:bg-kui-brand/10";
|
|
2277
|
-
readonly soft: "bg-kui-brand/10 text-kui-brand hover:bg-kui-brand/20";
|
|
2278
|
-
readonly link: "text-kui-brand";
|
|
2279
|
-
};
|
|
2280
|
-
readonly destructive: {
|
|
2281
|
-
readonly solid: "bg-kui-destructive text-kui-destructive-fg hover:bg-kui-destructive-hover";
|
|
2282
|
-
readonly outline: "border-kui-destructive text-kui-destructive hover:bg-kui-destructive/10";
|
|
2283
|
-
readonly ghost: "text-kui-destructive hover:bg-kui-destructive/10";
|
|
2284
|
-
readonly soft: "bg-kui-destructive/10 text-kui-destructive hover:bg-kui-destructive/20";
|
|
2285
|
-
readonly link: "text-kui-destructive";
|
|
2286
|
-
};
|
|
2287
|
-
readonly success: {
|
|
2288
|
-
readonly solid: "bg-kui-success text-kui-success-fg hover:bg-kui-success-hover";
|
|
2289
|
-
readonly outline: "border-kui-success text-kui-success hover:bg-kui-success/10";
|
|
2290
|
-
readonly ghost: "text-kui-success hover:bg-kui-success/10";
|
|
2291
|
-
readonly soft: "bg-kui-success/10 text-kui-success hover:bg-kui-success/20";
|
|
2292
|
-
readonly link: "text-kui-success";
|
|
2293
|
-
};
|
|
2294
|
-
readonly warning: {
|
|
2295
|
-
readonly solid: "bg-kui-warning text-kui-warning-fg hover:bg-kui-warning-hover";
|
|
2296
|
-
readonly outline: "border-kui-warning text-kui-warning hover:bg-kui-warning/10";
|
|
2297
|
-
readonly ghost: "text-kui-warning hover:bg-kui-warning/10";
|
|
2298
|
-
readonly soft: "bg-kui-warning/10 text-kui-warning hover:bg-kui-warning/20";
|
|
2299
|
-
readonly link: "text-kui-warning";
|
|
2300
|
-
};
|
|
2301
|
-
readonly info: {
|
|
2302
|
-
readonly solid: "bg-kui-info text-kui-info-fg hover:bg-kui-info-hover";
|
|
2303
|
-
readonly outline: "border-kui-info text-kui-info hover:bg-kui-info/10";
|
|
2304
|
-
readonly ghost: "text-kui-info hover:bg-kui-info/10";
|
|
2305
|
-
readonly soft: "bg-kui-info/10 text-kui-info hover:bg-kui-info/20";
|
|
2306
|
-
readonly link: "text-kui-info";
|
|
2307
|
-
};
|
|
2308
|
-
readonly white: {
|
|
2309
|
-
readonly solid: "bg-white text-black hover:bg-gray-50";
|
|
2310
|
-
readonly outline: "border-white/30 text-white hover:bg-white/10";
|
|
2311
|
-
readonly ghost: "text-white hover:bg-white/10";
|
|
2312
|
-
readonly soft: "bg-white/10 text-white hover:bg-white/20";
|
|
2313
|
-
readonly link: "text-white";
|
|
2314
|
-
};
|
|
2315
|
-
readonly neutral: {
|
|
2316
|
-
readonly solid: "bg-kui-surface-raised text-kui-text hover:bg-kui-surface-sunken";
|
|
2317
|
-
readonly outline: "border-kui-border text-kui-text hover:bg-kui-surface-raised";
|
|
2318
|
-
readonly ghost: "text-kui-text hover:bg-kui-surface-raised";
|
|
2319
|
-
readonly soft: "bg-kui-surface-raised text-kui-text hover:bg-kui-surface-sunken";
|
|
2320
|
-
readonly link: "text-kui-text";
|
|
2321
|
-
};
|
|
2322
|
-
readonly inherit: {
|
|
2323
|
-
readonly solid: string;
|
|
2324
|
-
readonly outline: string;
|
|
2325
|
-
readonly ghost: string;
|
|
2326
|
-
readonly soft: string;
|
|
2327
|
-
readonly link: string;
|
|
2328
|
-
};
|
|
2329
|
-
};
|
|
2330
|
-
declare const buttonRecipe: {
|
|
2331
|
-
readonly base: string;
|
|
2332
|
-
readonly variants: {
|
|
2333
|
-
readonly variant: {
|
|
2334
|
-
readonly solid: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
2335
|
-
readonly soft: "ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-[0.97]";
|
|
2336
|
-
readonly outline: "border bg-transparent ease-out active:scale-[0.98]";
|
|
2337
|
-
readonly ghost: "bg-transparent ease-out active:scale-[0.98]";
|
|
2338
|
-
readonly link: "bg-transparent p-0 h-auto hover:underline ease-out";
|
|
2339
|
-
};
|
|
2340
|
-
readonly color: Record<string, string>;
|
|
2341
|
-
};
|
|
2342
|
-
readonly defaultVariants: {
|
|
2343
|
-
readonly variant: "solid";
|
|
2344
|
-
readonly color: "brand";
|
|
2345
|
-
};
|
|
2346
|
-
readonly compoundVariants: {
|
|
2347
|
-
conditions: Record<string, string>;
|
|
2348
|
-
className: string;
|
|
2349
|
-
}[];
|
|
2350
|
-
};
|
|
2351
|
-
|
|
2352
|
-
declare const buttonGroupRecipe: {
|
|
2353
|
-
readonly base: string;
|
|
2354
|
-
readonly variants: {
|
|
2355
|
-
readonly orientation: {
|
|
2356
|
-
readonly horizontal: "flex-row";
|
|
2357
|
-
readonly vertical: "flex-col items-stretch";
|
|
2358
|
-
};
|
|
2359
|
-
readonly attached: {
|
|
2360
|
-
readonly true: "gap-0";
|
|
2361
|
-
readonly false: "";
|
|
2362
|
-
};
|
|
2363
|
-
readonly spacing: {
|
|
2364
|
-
readonly none: "gap-0";
|
|
2365
|
-
readonly sm: "gap-1";
|
|
2366
|
-
readonly md: "gap-2";
|
|
2367
|
-
readonly lg: "gap-3";
|
|
2368
|
-
};
|
|
2369
|
-
};
|
|
2370
|
-
readonly defaultVariants: {
|
|
2371
|
-
readonly orientation: "horizontal";
|
|
2372
|
-
readonly attached: false;
|
|
2373
|
-
readonly spacing: "md";
|
|
2374
|
-
};
|
|
2375
|
-
readonly compoundVariants: [{
|
|
2376
|
-
readonly conditions: {
|
|
2377
|
-
readonly orientation: "horizontal";
|
|
2378
|
-
readonly attached: true;
|
|
2379
|
-
};
|
|
2380
|
-
readonly className: string;
|
|
2381
|
-
}, {
|
|
2382
|
-
readonly conditions: {
|
|
2383
|
-
readonly orientation: "vertical";
|
|
2384
|
-
};
|
|
2385
|
-
readonly className: string;
|
|
2386
|
-
}, {
|
|
2387
|
-
readonly conditions: {
|
|
2388
|
-
readonly orientation: "vertical";
|
|
2389
|
-
readonly attached: true;
|
|
2390
|
-
};
|
|
2391
|
-
readonly className: string;
|
|
2392
|
-
}];
|
|
2393
|
-
};
|
|
2394
|
-
|
|
2395
|
-
declare const checkboxRecipe: {
|
|
2396
|
-
readonly base: string;
|
|
2397
|
-
readonly variants: {
|
|
2398
|
-
readonly state: {
|
|
2399
|
-
readonly none: "border-kui-border";
|
|
2400
|
-
readonly error: "border-kui-destructive";
|
|
2401
|
-
readonly success: "border-kui-success";
|
|
2402
|
-
readonly warning: "border-kui-warning";
|
|
2403
|
-
};
|
|
2404
|
-
readonly checked: {
|
|
2405
|
-
readonly true: "border-kui-brand bg-kui-brand text-kui-brand-fg";
|
|
2406
|
-
readonly false: "bg-transparent";
|
|
2407
|
-
};
|
|
2408
|
-
readonly disabled: {
|
|
2409
|
-
readonly true: "cursor-not-allowed";
|
|
2410
|
-
readonly false: "cursor-pointer";
|
|
2411
|
-
};
|
|
2412
|
-
readonly rounded: {
|
|
2413
|
-
readonly true: "rounded-full";
|
|
2414
|
-
readonly false: "rounded-[calc(var(--kui-checkbox-radius)-4px)]";
|
|
2415
|
-
};
|
|
2416
|
-
};
|
|
2417
|
-
readonly compoundVariants: [{
|
|
2418
|
-
readonly conditions: {
|
|
2419
|
-
readonly checked: false;
|
|
2420
|
-
readonly state: "error";
|
|
2421
|
-
};
|
|
2422
|
-
readonly className: "border-kui-destructive";
|
|
2423
|
-
}, {
|
|
2424
|
-
readonly conditions: {
|
|
2425
|
-
readonly checked: false;
|
|
2426
|
-
readonly state: "success";
|
|
2427
|
-
};
|
|
2428
|
-
readonly className: "border-kui-success";
|
|
2429
|
-
}, {
|
|
2430
|
-
readonly conditions: {
|
|
2431
|
-
readonly checked: false;
|
|
2432
|
-
readonly state: "warning";
|
|
2433
|
-
};
|
|
2434
|
-
readonly className: "border-kui-warning";
|
|
2435
|
-
}];
|
|
2436
|
-
readonly defaultVariants: {
|
|
2437
|
-
readonly state: "none";
|
|
2438
|
-
readonly checked: false;
|
|
2439
|
-
readonly disabled: false;
|
|
2440
|
-
readonly rounded: false;
|
|
2441
|
-
};
|
|
2442
|
-
};
|
|
2443
|
-
|
|
2444
|
-
declare const containerReccipe: {
|
|
2445
|
-
readonly base: "w-full";
|
|
2446
|
-
readonly variants: {
|
|
2447
|
-
readonly maxWidth: {
|
|
2448
|
-
readonly xs: "max-w-screen-xs";
|
|
2449
|
-
readonly sm: "max-w-screen-sm";
|
|
2450
|
-
readonly md: "max-w-screen-md";
|
|
2451
|
-
readonly lg: "max-w-screen-lg";
|
|
2452
|
-
readonly xl: "max-w-screen-xl";
|
|
2453
|
-
readonly full: "max-w-full";
|
|
2454
|
-
};
|
|
2455
|
-
};
|
|
2456
|
-
readonly defaultVariants: {
|
|
2457
|
-
readonly maxWidth: "lg";
|
|
2458
|
-
};
|
|
2459
|
-
};
|
|
2460
|
-
|
|
2461
|
-
declare const formControlBase: string;
|
|
2462
|
-
declare const formControlVariants: {
|
|
2463
|
-
readonly outline: "border border-kui-border bg-transparent text-kui-text";
|
|
2464
|
-
readonly filled: "border border-transparent bg-kui-surface-raised text-kui-text";
|
|
2465
|
-
readonly ghost: "border border-transparent bg-transparent text-kui-text";
|
|
2466
|
-
};
|
|
2467
|
-
declare const formControlRecipe: {
|
|
2468
|
-
readonly base: string;
|
|
2469
|
-
readonly variants: {
|
|
2470
|
-
readonly variant: {
|
|
2471
|
-
readonly outline: "border border-kui-border bg-transparent text-kui-text";
|
|
2472
|
-
readonly filled: "border border-transparent bg-kui-surface-raised text-kui-text";
|
|
2473
|
-
readonly ghost: "border border-transparent bg-transparent text-kui-text";
|
|
2474
|
-
};
|
|
2475
|
-
readonly embedded: {
|
|
2476
|
-
readonly true: string;
|
|
2477
|
-
readonly false: "";
|
|
2478
|
-
};
|
|
2479
|
-
readonly groupItem: {
|
|
2480
|
-
readonly true: string;
|
|
2481
|
-
readonly false: "";
|
|
2482
|
-
};
|
|
2483
|
-
readonly state: {
|
|
2484
|
-
readonly none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20";
|
|
2485
|
-
readonly error: string;
|
|
2486
|
-
readonly success: string;
|
|
2487
|
-
readonly warning: string;
|
|
2488
|
-
};
|
|
2489
|
-
readonly rounded: {
|
|
2490
|
-
readonly true: "rounded-full";
|
|
2491
|
-
readonly false: "";
|
|
2492
|
-
};
|
|
2493
|
-
readonly fullWidth: {
|
|
2494
|
-
readonly true: "w-full";
|
|
2495
|
-
readonly false: "";
|
|
2496
|
-
};
|
|
2497
|
-
readonly disabled: {
|
|
2498
|
-
readonly true: string;
|
|
2499
|
-
readonly false: "";
|
|
2500
|
-
};
|
|
2501
|
-
readonly attached: {
|
|
2502
|
-
readonly true: "rounded-r-none";
|
|
2503
|
-
readonly false: "";
|
|
2504
|
-
};
|
|
2505
|
-
readonly hasAdornment: {
|
|
2506
|
-
readonly true: "px-2";
|
|
2507
|
-
readonly false: "";
|
|
2508
|
-
};
|
|
2509
|
-
};
|
|
2510
|
-
readonly compoundVariants: [{
|
|
2511
|
-
readonly conditions: {
|
|
2512
|
-
readonly embedded: true;
|
|
2513
|
-
readonly state: "none";
|
|
2514
|
-
};
|
|
2515
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2516
|
-
}, {
|
|
2517
|
-
readonly conditions: {
|
|
2518
|
-
readonly embedded: true;
|
|
2519
|
-
readonly state: "error";
|
|
2520
|
-
};
|
|
2521
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2522
|
-
}, {
|
|
2523
|
-
readonly conditions: {
|
|
2524
|
-
readonly embedded: true;
|
|
2525
|
-
readonly state: "success";
|
|
2526
|
-
};
|
|
2527
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2528
|
-
}, {
|
|
2529
|
-
readonly conditions: {
|
|
2530
|
-
readonly embedded: true;
|
|
2531
|
-
readonly state: "warning";
|
|
2532
|
-
};
|
|
2533
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2534
|
-
}, {
|
|
2535
|
-
readonly conditions: {
|
|
2536
|
-
readonly groupItem: true;
|
|
2537
|
-
readonly state: "none";
|
|
2538
|
-
};
|
|
2539
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2540
|
-
}, {
|
|
2541
|
-
readonly conditions: {
|
|
2542
|
-
readonly groupItem: true;
|
|
2543
|
-
readonly state: "error";
|
|
2544
|
-
};
|
|
2545
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2546
|
-
}, {
|
|
2547
|
-
readonly conditions: {
|
|
2548
|
-
readonly groupItem: true;
|
|
2549
|
-
readonly state: "success";
|
|
2550
|
-
};
|
|
2551
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2552
|
-
}, {
|
|
2553
|
-
readonly conditions: {
|
|
2554
|
-
readonly groupItem: true;
|
|
2555
|
-
readonly state: "warning";
|
|
2556
|
-
};
|
|
2557
|
-
readonly className: "border-0! shadow-none! focus-within:ring-0! hover:border-0!";
|
|
2558
|
-
}, {
|
|
2559
|
-
readonly conditions: {
|
|
2560
|
-
readonly disabled: true;
|
|
2561
|
-
readonly state: "error";
|
|
2562
|
-
};
|
|
2563
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
2564
|
-
}, {
|
|
2565
|
-
readonly conditions: {
|
|
2566
|
-
readonly disabled: true;
|
|
2567
|
-
readonly state: "success";
|
|
2568
|
-
};
|
|
2569
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
2570
|
-
}, {
|
|
2571
|
-
readonly conditions: {
|
|
2572
|
-
readonly disabled: true;
|
|
2573
|
-
readonly state: "warning";
|
|
2574
|
-
};
|
|
2575
|
-
readonly className: "border-kui-border hover:border-kui-border focus-within:ring-0";
|
|
2576
|
-
}, {
|
|
2577
|
-
readonly conditions: {
|
|
2578
|
-
readonly embedded: true;
|
|
2579
|
-
readonly disabled: true;
|
|
2580
|
-
};
|
|
2581
|
-
readonly className: "border-0! hover:border-0! focus-within:ring-0! cursor-default";
|
|
2582
|
-
}, {
|
|
2583
|
-
readonly conditions: {
|
|
2584
|
-
readonly groupItem: true;
|
|
2585
|
-
readonly disabled: true;
|
|
2586
|
-
};
|
|
2587
|
-
readonly className: "border-0! hover:border-0! focus-within:ring-0! cursor-default";
|
|
2588
|
-
}];
|
|
2589
|
-
readonly defaultVariants: {
|
|
2590
|
-
readonly variant: "outline";
|
|
2591
|
-
readonly state: "none";
|
|
2592
|
-
readonly embedded: false;
|
|
2593
|
-
readonly groupItem: false;
|
|
2594
|
-
readonly rounded: false;
|
|
2595
|
-
readonly fullWidth: true;
|
|
2596
|
-
readonly disabled: false;
|
|
2597
|
-
readonly hasAdornment: false;
|
|
2598
|
-
readonly attached: false;
|
|
2599
|
-
};
|
|
2600
|
-
};
|
|
2601
|
-
|
|
2602
|
-
declare const inputBase: string;
|
|
2603
|
-
declare const inputRecipe: {
|
|
2604
|
-
readonly base: string;
|
|
2605
|
-
readonly variants: {
|
|
2606
|
-
readonly variant: {
|
|
2607
|
-
readonly outline: "";
|
|
2608
|
-
readonly filled: "";
|
|
2609
|
-
readonly ghost: "";
|
|
2610
|
-
};
|
|
2611
|
-
};
|
|
2612
|
-
readonly defaultVariants: {
|
|
2613
|
-
readonly variant: "outline";
|
|
2614
|
-
};
|
|
2615
|
-
};
|
|
2616
|
-
|
|
2617
|
-
declare const linkRecipe: {
|
|
2618
|
-
readonly base: "kui-link";
|
|
2619
|
-
readonly variants: {
|
|
2620
|
-
readonly variant: {
|
|
2621
|
-
readonly solid: "text-kui-brand hover:text-kui-brand-hover";
|
|
2622
|
-
readonly outline: "text-kui-text-secondary hover:text-kui-brand";
|
|
2623
|
-
readonly ghost: "text-kui-text-secondary hover:text-kui-text";
|
|
2624
|
-
readonly soft: "text-kui-brand hover:text-kui-brand-hover";
|
|
2625
|
-
};
|
|
2626
|
-
readonly underline: {
|
|
2627
|
-
readonly always: "underline";
|
|
2628
|
-
readonly hover: "no-underline hover:underline";
|
|
2629
|
-
readonly none: "no-underline";
|
|
2630
|
-
};
|
|
2631
|
-
readonly disabled: {
|
|
2632
|
-
readonly true: "pointer-events-none opacity-50 cursor-not-allowed";
|
|
2633
|
-
readonly false: "";
|
|
2634
|
-
};
|
|
2635
|
-
};
|
|
2636
|
-
readonly defaultVariants: {
|
|
2637
|
-
readonly variant: "solid";
|
|
2638
|
-
readonly underline: "hover";
|
|
2639
|
-
readonly disabled: false;
|
|
2640
|
-
};
|
|
2641
|
-
};
|
|
2642
|
-
|
|
2643
|
-
declare const markdownEditorRecipe: {
|
|
2644
|
-
readonly base: string;
|
|
2645
|
-
readonly variants: {
|
|
2646
|
-
readonly variant: {
|
|
2647
|
-
readonly outline: "border border-kui-border bg-transparent";
|
|
2648
|
-
readonly filled: "border border-transparent bg-kui-surface-raised";
|
|
2649
|
-
readonly ghost: "border border-transparent bg-transparent";
|
|
2650
|
-
};
|
|
2651
|
-
readonly state: {
|
|
2652
|
-
readonly none: "hover:border-kui-brand focus-within:ring-2 focus-within:ring-kui-brand/20";
|
|
2653
|
-
readonly error: "border-kui-destructive focus-within:ring-2 focus-within:ring-kui-destructive/20";
|
|
2654
|
-
readonly success: "border-kui-success focus-within:ring-2 focus-within:ring-kui-success/20";
|
|
2655
|
-
readonly warning: "border-kui-warning focus-within:ring-2 focus-within:ring-kui-warning/20";
|
|
2656
|
-
};
|
|
2657
|
-
readonly disabled: {
|
|
2658
|
-
readonly true: string;
|
|
2659
|
-
readonly false: "";
|
|
2660
|
-
};
|
|
2661
|
-
readonly fullWidth: {
|
|
2662
|
-
readonly true: "w-full";
|
|
2663
|
-
readonly false: "";
|
|
2664
|
-
};
|
|
2665
|
-
};
|
|
2666
|
-
readonly defaultVariants: {
|
|
2667
|
-
readonly variant: "outline";
|
|
2668
|
-
readonly state: "none";
|
|
2669
|
-
readonly fullWidth: true;
|
|
2670
|
-
};
|
|
2671
|
-
};
|
|
2672
|
-
|
|
2673
|
-
declare const switchRecipe: {
|
|
2674
|
-
readonly base: string;
|
|
2675
|
-
readonly variants: {
|
|
2676
|
-
readonly checked: {
|
|
2677
|
-
readonly true: "bg-kui-brand";
|
|
2678
|
-
readonly false: "bg-kui-border";
|
|
2679
|
-
};
|
|
2680
|
-
readonly state: {
|
|
2681
|
-
readonly none: "";
|
|
2682
|
-
readonly error: "bg-kui-destructive";
|
|
2683
|
-
readonly success: "bg-kui-success";
|
|
2684
|
-
readonly warning: "bg-kui-warning";
|
|
2685
|
-
};
|
|
2686
|
-
readonly disabled: {
|
|
2687
|
-
readonly true: "cursor-not-allowed opacity-50";
|
|
2688
|
-
readonly false: "";
|
|
2689
|
-
};
|
|
2690
|
-
};
|
|
2691
|
-
readonly defaultVariants: {
|
|
2692
|
-
readonly checked: false;
|
|
2693
|
-
readonly state: "none";
|
|
2694
|
-
readonly disabled: false;
|
|
2695
|
-
};
|
|
2696
|
-
};
|
|
2697
|
-
|
|
2698
|
-
declare const textareaRecipe: {
|
|
2699
|
-
readonly base: string;
|
|
2700
|
-
readonly variants: {
|
|
2701
|
-
readonly variant: {
|
|
2702
|
-
readonly outline: "";
|
|
2703
|
-
readonly filled: "";
|
|
2704
|
-
readonly ghost: "";
|
|
2705
|
-
};
|
|
2706
|
-
readonly resize: {
|
|
2707
|
-
readonly none: "resize-none";
|
|
2708
|
-
readonly both: "resize";
|
|
2709
|
-
readonly horizontal: "resize-x";
|
|
2710
|
-
readonly vertical: "resize-y";
|
|
2711
|
-
};
|
|
2712
|
-
readonly autoResize: {
|
|
2713
|
-
readonly true: "resize-none overflow-hidden";
|
|
2714
|
-
readonly false: "";
|
|
2715
|
-
};
|
|
2716
|
-
};
|
|
2717
|
-
readonly defaultVariants: {
|
|
2718
|
-
readonly variant: "outline";
|
|
2719
|
-
readonly resize: "vertical";
|
|
2720
|
-
readonly autoResize: false;
|
|
2721
|
-
};
|
|
2722
|
-
};
|
|
2723
|
-
|
|
2724
|
-
export { type CycleValidationResult, type ExtractPath, type Invalid, type IsTokenReference, type PathExists, type ResolvePath, type SplitPath, TokenReferenceString$1 as TokenReferenceString, type ValidateRecipeSection, type ValidateRecipes, type ValidateReferenceExists, type ValidateSemanticTokenSection, type ValidateSemanticTokens, type ValidateSizes, type ValidateSizesSection, type ValidateTheme, type ValidateTokenSection, type ValidateTokens, type ValidateTypography, type ValidateTypographyReferencesSection, type ValidateTypographySection, assertNoCycles, buttonBase, buttonColors, buttonGroupRecipe, buttonRecipe, buttonVariants, checkboxRecipe, containerReccipe, defaultRecipes, defaultSemanticTokens, defaultSizes, defaultTheme, defaultTokens, defaultTypography, defineRecipe, defineSemanticToken, defineSemanticTokens, defineSize, defineSizes, defineTheme, defineToken, defineTokens, defineTypography, extendRecipe, extendRecipes, extendSemanticTokens, extendSizes, extendTheme, extendTokens, extendTypography, formControlBase, formControlRecipe, formControlVariants, inputBase, inputRecipe, linkRecipe, markdownEditorRecipe, switchRecipe, textareaRecipe, validateNoCycles };
|