@splenddev/kreativ-core 0.0.1 → 0.1.1

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.
Files changed (44) hide show
  1. package/README.md +70 -13
  2. package/dist/{common-CxqD2cxB.d.cts → common-1QyKLdTc.d.cts} +1 -1
  3. package/dist/{common-CxqD2cxB.d.ts → common-1QyKLdTc.d.ts} +1 -1
  4. package/dist/{hooks.cjs → hooks/index.cjs} +2 -2
  5. package/dist/hooks/index.cjs.map +1 -0
  6. package/dist/{hooks.d.ts → hooks/index.d.cts} +10 -4
  7. package/dist/{hooks.d.cts → hooks/index.d.ts} +10 -4
  8. package/dist/{hooks.js → hooks/index.js} +2 -2
  9. package/dist/hooks/index.js.map +1 -0
  10. package/dist/index.cjs +25 -1039
  11. package/dist/index.cjs.map +1 -1
  12. package/dist/index.d.cts +351 -7
  13. package/dist/index.d.ts +351 -7
  14. package/dist/index.js +26 -1010
  15. package/dist/index.js.map +1 -1
  16. package/dist/types/index.cjs +4 -0
  17. package/dist/types/index.cjs.map +1 -0
  18. package/dist/{types.d.ts → types/index.d.cts} +2 -2
  19. package/dist/{types.d.cts → types/index.d.ts} +2 -2
  20. package/dist/types/index.js +3 -0
  21. package/dist/types/index.js.map +1 -0
  22. package/dist/{utils.cjs → utils/index.cjs} +2 -2
  23. package/dist/utils/index.cjs.map +1 -0
  24. package/dist/{utils.d.cts → utils/index.d.cts} +1 -1
  25. package/dist/{utils.d.ts → utils/index.d.ts} +1 -1
  26. package/dist/{utils.js → utils/index.js} +2 -2
  27. package/dist/utils/index.js.map +1 -0
  28. package/package.json +1 -6
  29. package/dist/hooks.cjs.map +0 -1
  30. package/dist/hooks.js.map +0 -1
  31. package/dist/theme.cjs +0 -1183
  32. package/dist/theme.cjs.map +0 -1
  33. package/dist/theme.d.cts +0 -2724
  34. package/dist/theme.d.ts +0 -2724
  35. package/dist/theme.js +0 -1142
  36. package/dist/theme.js.map +0 -1
  37. package/dist/types.cjs +0 -4
  38. package/dist/types.cjs.map +0 -1
  39. package/dist/types.js +0 -3
  40. package/dist/types.js.map +0 -1
  41. package/dist/useColorMode-B7eyS27H.d.ts +0 -10
  42. package/dist/useColorMode-tvcgvc4V.d.cts +0 -10
  43. package/dist/utils.cjs.map +0 -1
  44. package/dist/utils.js.map +0 -1
package/dist/theme.d.cts 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.cjs';
2
- import { SizeToken, SizeScale, RecipeDefinition, Theme, ThemeOverride, RecipeCollection } from './types.cjs';
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 };