@rarui/components 1.11.0 → 1.13.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/CHANGELOG.md +15 -2
- package/custom-elements.json +205 -1
- package/dist/index.d.ts +603 -250
- package/dist/index.js +146 -88
- package/package.json +9 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2017 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/** TemplateResult types */
|
|
8
|
+
declare const HTML_RESULT = 1;
|
|
9
|
+
declare const SVG_RESULT = 2;
|
|
10
|
+
declare const MATHML_RESULT = 3;
|
|
11
|
+
type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
|
|
12
|
+
/**
|
|
13
|
+
* The return type of the template tag functions, {@linkcode html} and
|
|
14
|
+
* {@linkcode svg} when it hasn't been compiled by @lit-labs/compiler.
|
|
15
|
+
*
|
|
16
|
+
* A `TemplateResult` object holds all the information about a template
|
|
17
|
+
* expression required to render it: the template strings, expression values,
|
|
18
|
+
* and type of template (html or svg).
|
|
19
|
+
*
|
|
20
|
+
* `TemplateResult` objects do not create any DOM on their own. To create or
|
|
21
|
+
* update DOM you need to render the `TemplateResult`. See
|
|
22
|
+
* [Rendering](https://lit.dev/docs/components/rendering) for more information.
|
|
23
|
+
*
|
|
24
|
+
*/
|
|
25
|
+
type UncompiledTemplateResult<T extends ResultType = ResultType> = {
|
|
26
|
+
['_$litType$']: T;
|
|
27
|
+
strings: TemplateStringsArray;
|
|
28
|
+
values: unknown[];
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* The return type of the template tag functions, {@linkcode html} and
|
|
32
|
+
* {@linkcode svg}.
|
|
33
|
+
*
|
|
34
|
+
* A `TemplateResult` object holds all the information about a template
|
|
35
|
+
* expression required to render it: the template strings, expression values,
|
|
36
|
+
* and type of template (html or svg).
|
|
37
|
+
*
|
|
38
|
+
* `TemplateResult` objects do not create any DOM on their own. To create or
|
|
39
|
+
* update DOM you need to render the `TemplateResult`. See
|
|
40
|
+
* [Rendering](https://lit.dev/docs/components/rendering) for more information.
|
|
41
|
+
*
|
|
42
|
+
* In Lit 4, this type will be an alias of
|
|
43
|
+
* MaybeCompiledTemplateResult, so that code will get type errors if it assumes
|
|
44
|
+
* that Lit templates are not compiled. When deliberately working with only
|
|
45
|
+
* one, use either {@linkcode CompiledTemplateResult} or
|
|
46
|
+
* {@linkcode UncompiledTemplateResult} explicitly.
|
|
47
|
+
*/
|
|
48
|
+
type TemplateResult<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;
|
|
49
|
+
/**
|
|
50
|
+
* Object specifying options for controlling lit-html rendering. Note that
|
|
51
|
+
* while `render` may be called multiple times on the same `container` (and
|
|
52
|
+
* `renderBefore` reference node) to efficiently update the rendered content,
|
|
53
|
+
* only the options passed in during the first render are respected during
|
|
54
|
+
* the lifetime of renders to that unique `container` + `renderBefore`
|
|
55
|
+
* combination.
|
|
56
|
+
*/
|
|
57
|
+
interface RenderOptions {
|
|
58
|
+
/**
|
|
59
|
+
* An object to use as the `this` value for event listeners. It's often
|
|
60
|
+
* useful to set this to the host component rendering a template.
|
|
61
|
+
*/
|
|
62
|
+
host?: object;
|
|
63
|
+
/**
|
|
64
|
+
* A DOM node before which to render content in the container.
|
|
65
|
+
*/
|
|
66
|
+
renderBefore?: ChildNode | null;
|
|
67
|
+
/**
|
|
68
|
+
* Node used for cloning the template (`importNode` will be called on this
|
|
69
|
+
* node). This controls the `ownerDocument` of the rendered DOM, along with
|
|
70
|
+
* any inherited context. Defaults to the global `document`.
|
|
71
|
+
*/
|
|
72
|
+
creationScope?: {
|
|
73
|
+
importNode(node: Node, deep?: boolean): Node;
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* The initial connected state for the top-level part being rendered. If no
|
|
77
|
+
* `isConnected` option is set, `AsyncDirective`s will be connected by
|
|
78
|
+
* default. Set to `false` if the initial render occurs in a disconnected tree
|
|
79
|
+
* and `AsyncDirective`s should see `isConnected === false` for their initial
|
|
80
|
+
* render. The `part.setConnected()` method must be used subsequent to initial
|
|
81
|
+
* render to change the connected state of the part.
|
|
82
|
+
*/
|
|
83
|
+
isConnected?: boolean;
|
|
84
|
+
}
|
|
85
|
+
|
|
1
86
|
/**
|
|
2
87
|
* A CSSResult or native CSSStyleSheet.
|
|
3
88
|
*
|
|
@@ -829,49 +914,6 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
|
|
|
829
914
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
830
915
|
}
|
|
831
916
|
|
|
832
|
-
/**
|
|
833
|
-
* @license
|
|
834
|
-
* Copyright 2017 Google LLC
|
|
835
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
836
|
-
*/
|
|
837
|
-
|
|
838
|
-
/**
|
|
839
|
-
* Object specifying options for controlling lit-html rendering. Note that
|
|
840
|
-
* while `render` may be called multiple times on the same `container` (and
|
|
841
|
-
* `renderBefore` reference node) to efficiently update the rendered content,
|
|
842
|
-
* only the options passed in during the first render are respected during
|
|
843
|
-
* the lifetime of renders to that unique `container` + `renderBefore`
|
|
844
|
-
* combination.
|
|
845
|
-
*/
|
|
846
|
-
interface RenderOptions {
|
|
847
|
-
/**
|
|
848
|
-
* An object to use as the `this` value for event listeners. It's often
|
|
849
|
-
* useful to set this to the host component rendering a template.
|
|
850
|
-
*/
|
|
851
|
-
host?: object;
|
|
852
|
-
/**
|
|
853
|
-
* A DOM node before which to render content in the container.
|
|
854
|
-
*/
|
|
855
|
-
renderBefore?: ChildNode | null;
|
|
856
|
-
/**
|
|
857
|
-
* Node used for cloning the template (`importNode` will be called on this
|
|
858
|
-
* node). This controls the `ownerDocument` of the rendered DOM, along with
|
|
859
|
-
* any inherited context. Defaults to the global `document`.
|
|
860
|
-
*/
|
|
861
|
-
creationScope?: {
|
|
862
|
-
importNode(node: Node, deep?: boolean): Node;
|
|
863
|
-
};
|
|
864
|
-
/**
|
|
865
|
-
* The initial connected state for the top-level part being rendered. If no
|
|
866
|
-
* `isConnected` option is set, `AsyncDirective`s will be connected by
|
|
867
|
-
* default. Set to `false` if the initial render occurs in a disconnected tree
|
|
868
|
-
* and `AsyncDirective`s should see `isConnected === false` for their initial
|
|
869
|
-
* render. The `part.setConnected()` method must be used subsequent to initial
|
|
870
|
-
* render to change the connected state of the part.
|
|
871
|
-
*/
|
|
872
|
-
isConnected?: boolean;
|
|
873
|
-
}
|
|
874
|
-
|
|
875
917
|
/**
|
|
876
918
|
* @license
|
|
877
919
|
* Copyright 2017 Google LLC
|
|
@@ -12242,7 +12284,7 @@ declare namespace DataType$1 {
|
|
|
12242
12284
|
type VisualBox = "border-box" | "content-box" | "padding-box";
|
|
12243
12285
|
}
|
|
12244
12286
|
|
|
12245
|
-
type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string
|
|
12287
|
+
type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string})`;
|
|
12246
12288
|
|
|
12247
12289
|
declare const simplePseudoMap: {
|
|
12248
12290
|
readonly ':-moz-any-link': true;
|
|
@@ -12281,6 +12323,7 @@ declare const simplePseudoMap: {
|
|
|
12281
12323
|
readonly '::-ms-track': true;
|
|
12282
12324
|
readonly '::-ms-value': true;
|
|
12283
12325
|
readonly '::-webkit-backdrop': true;
|
|
12326
|
+
readonly '::-webkit-calendar-picker-indicator': true;
|
|
12284
12327
|
readonly '::-webkit-inner-spin-button': true;
|
|
12285
12328
|
readonly '::-webkit-input-placeholder': true;
|
|
12286
12329
|
readonly '::-webkit-meter-bar': true;
|
|
@@ -12366,7 +12409,6 @@ declare const simplePseudoMap: {
|
|
|
12366
12409
|
readonly ':visited': true;
|
|
12367
12410
|
};
|
|
12368
12411
|
type SimplePseudos = keyof typeof simplePseudoMap;
|
|
12369
|
-
|
|
12370
12412
|
interface ContainerProperties {
|
|
12371
12413
|
container?: string;
|
|
12372
12414
|
containerType?: 'size' | 'inline-size' | (string & {});
|
|
@@ -12398,12 +12440,12 @@ interface AllQueries<StyleType> extends MediaQueries<StyleType & AllQueries<Styl
|
|
|
12398
12440
|
}
|
|
12399
12441
|
type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
|
|
12400
12442
|
interface SelectorMap {
|
|
12401
|
-
[selector: string]:
|
|
12443
|
+
[selector: string]: WithQueries<CSSPropertiesWithVars>;
|
|
12402
12444
|
}
|
|
12403
12445
|
interface StyleWithSelectors extends CSSPropertiesAndPseudos {
|
|
12404
12446
|
selectors?: SelectorMap;
|
|
12405
12447
|
}
|
|
12406
|
-
type StyleRule =
|
|
12448
|
+
type StyleRule = WithQueries<StyleWithSelectors>;
|
|
12407
12449
|
type ClassNames = string | Array<ClassNames>;
|
|
12408
12450
|
type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
|
|
12409
12451
|
|
|
@@ -16094,47 +16136,47 @@ declare namespace DataType {
|
|
|
16094
16136
|
type VisualBox = "border-box" | "content-box" | "padding-box";
|
|
16095
16137
|
}
|
|
16096
16138
|
declare const fontWeightProperties: {
|
|
16097
|
-
regular: `var(--${string})` | `var(--${string}, ${string})
|
|
16098
|
-
medium: `var(--${string})` | `var(--${string}, ${string})
|
|
16099
|
-
semiBold: `var(--${string})` | `var(--${string}, ${string})
|
|
16100
|
-
bold: `var(--${string})` | `var(--${string}, ${string})
|
|
16139
|
+
regular: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16140
|
+
medium: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16141
|
+
semiBold: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16142
|
+
bold: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16101
16143
|
};
|
|
16102
16144
|
declare const colorProperties: {
|
|
16103
16145
|
currentColor: string;
|
|
16104
|
-
brand: `var(--${string})` | `var(--${string}, ${string})
|
|
16105
|
-
"brand-alt": `var(--${string})` | `var(--${string}, ${string})
|
|
16106
|
-
disabled: `var(--${string})` | `var(--${string}, ${string})
|
|
16107
|
-
error: `var(--${string})` | `var(--${string}, ${string})
|
|
16108
|
-
info: `var(--${string})` | `var(--${string}, ${string})
|
|
16109
|
-
invert: `var(--${string})` | `var(--${string}, ${string})
|
|
16110
|
-
"invert-disabled": `var(--${string})` | `var(--${string}, ${string})
|
|
16111
|
-
"invert-secondary": `var(--${string})` | `var(--${string}, ${string})
|
|
16112
|
-
"on-brand": `var(--${string})` | `var(--${string}, ${string})
|
|
16113
|
-
"on-error": `var(--${string})` | `var(--${string}, ${string})
|
|
16114
|
-
"on-info": `var(--${string})` | `var(--${string}, ${string})
|
|
16115
|
-
"on-success": `var(--${string})` | `var(--${string}, ${string})
|
|
16116
|
-
"on-warning": `var(--${string})` | `var(--${string}, ${string})
|
|
16117
|
-
primary: `var(--${string})` | `var(--${string}, ${string})
|
|
16118
|
-
secondary: `var(--${string})` | `var(--${string}, ${string})
|
|
16119
|
-
success: `var(--${string})` | `var(--${string}, ${string})
|
|
16120
|
-
warning: `var(--${string})` | `var(--${string}, ${string})
|
|
16121
|
-
"warning-alt": `var(--${string})` | `var(--${string}, ${string})
|
|
16146
|
+
brand: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16147
|
+
"brand-alt": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16148
|
+
disabled: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16149
|
+
error: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16150
|
+
info: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16151
|
+
invert: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16152
|
+
"invert-disabled": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16153
|
+
"invert-secondary": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16154
|
+
"on-brand": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16155
|
+
"on-error": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16156
|
+
"on-info": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16157
|
+
"on-success": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16158
|
+
"on-warning": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16159
|
+
primary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16160
|
+
secondary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16161
|
+
success: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16162
|
+
warning: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16163
|
+
"warning-alt": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16122
16164
|
};
|
|
16123
16165
|
declare const borderColorProperties: {
|
|
16124
16166
|
transparent: string;
|
|
16125
|
-
brand: `var(--${string})` | `var(--${string}, ${string})
|
|
16126
|
-
"brand-alt": `var(--${string})` | `var(--${string}, ${string})
|
|
16127
|
-
disabled: `var(--${string})` | `var(--${string}, ${string})
|
|
16128
|
-
divider: `var(--${string})` | `var(--${string}, ${string})
|
|
16129
|
-
error: `var(--${string})` | `var(--${string}, ${string})
|
|
16130
|
-
info: `var(--${string})` | `var(--${string}, ${string})
|
|
16131
|
-
invert: `var(--${string})` | `var(--${string}, ${string})
|
|
16132
|
-
"invert-disabled": `var(--${string})` | `var(--${string}, ${string})
|
|
16133
|
-
primary: `var(--${string})` | `var(--${string}, ${string})
|
|
16134
|
-
secondary: `var(--${string})` | `var(--${string}, ${string})
|
|
16135
|
-
subdued: `var(--${string})` | `var(--${string}, ${string})
|
|
16136
|
-
success: `var(--${string})` | `var(--${string}, ${string})
|
|
16137
|
-
warning: `var(--${string})` | `var(--${string}, ${string})
|
|
16167
|
+
brand: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16168
|
+
"brand-alt": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16169
|
+
disabled: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16170
|
+
divider: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16171
|
+
error: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16172
|
+
info: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16173
|
+
invert: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16174
|
+
"invert-disabled": `var(--${string})` | `var(--${string}, ${string})`;
|
|
16175
|
+
primary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16176
|
+
secondary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16177
|
+
subdued: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16178
|
+
success: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16179
|
+
warning: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16138
16180
|
};
|
|
16139
16181
|
|
|
16140
16182
|
declare const chipStyles: {
|
|
@@ -16145,7 +16187,7 @@ declare const chipStyles: {
|
|
|
16145
16187
|
*/
|
|
16146
16188
|
pill: {
|
|
16147
16189
|
true: {
|
|
16148
|
-
borderRadius: `var(--${string})` | `var(--${string}, ${string})
|
|
16190
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16149
16191
|
};
|
|
16150
16192
|
};
|
|
16151
16193
|
/**
|
|
@@ -16154,11 +16196,11 @@ declare const chipStyles: {
|
|
|
16154
16196
|
*/
|
|
16155
16197
|
selected: {
|
|
16156
16198
|
true: {
|
|
16157
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16158
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16159
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16199
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16200
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16201
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16160
16202
|
":hover": {
|
|
16161
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16203
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16162
16204
|
};
|
|
16163
16205
|
};
|
|
16164
16206
|
};
|
|
@@ -16168,13 +16210,13 @@ declare const chipStyles: {
|
|
|
16168
16210
|
*/
|
|
16169
16211
|
size: {
|
|
16170
16212
|
medium: {
|
|
16171
|
-
lineHeight: `var(--${string})` | `var(--${string}, ${string})
|
|
16172
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16213
|
+
lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16214
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16173
16215
|
height: "2rem";
|
|
16174
16216
|
};
|
|
16175
16217
|
small: {
|
|
16176
|
-
lineHeight: `var(--${string})` | `var(--${string}, ${string})
|
|
16177
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16218
|
+
lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16219
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16178
16220
|
height: "1.5rem";
|
|
16179
16221
|
};
|
|
16180
16222
|
};
|
|
@@ -16260,20 +16302,20 @@ interface IconSprinkle extends IconDynamicProperties {
|
|
|
16260
16302
|
}
|
|
16261
16303
|
|
|
16262
16304
|
declare const textLineHeightProperties: {
|
|
16263
|
-
xxs: `var(--${string})` | `var(--${string}, ${string})
|
|
16264
|
-
xs: `var(--${string})` | `var(--${string}, ${string})
|
|
16265
|
-
s: `var(--${string})` | `var(--${string}, ${string})
|
|
16266
|
-
m: `var(--${string})` | `var(--${string}, ${string})
|
|
16267
|
-
l: `var(--${string})` | `var(--${string}, ${string})
|
|
16268
|
-
xl: `var(--${string})` | `var(--${string}, ${string})
|
|
16305
|
+
xxs: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16306
|
+
xs: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16307
|
+
s: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16308
|
+
m: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16309
|
+
l: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16310
|
+
xl: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16269
16311
|
};
|
|
16270
16312
|
declare const textFontSizeProperties: {
|
|
16271
|
-
xxs: `var(--${string})` | `var(--${string}, ${string})
|
|
16272
|
-
xs: `var(--${string})` | `var(--${string}, ${string})
|
|
16273
|
-
s: `var(--${string})` | `var(--${string}, ${string})
|
|
16274
|
-
m: `var(--${string})` | `var(--${string}, ${string})
|
|
16275
|
-
l: `var(--${string})` | `var(--${string}, ${string})
|
|
16276
|
-
xl: `var(--${string})` | `var(--${string}, ${string})
|
|
16313
|
+
xxs: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16314
|
+
xs: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16315
|
+
s: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16316
|
+
m: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16317
|
+
l: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16318
|
+
xl: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16277
16319
|
};
|
|
16278
16320
|
|
|
16279
16321
|
type TextDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "wordBreak" | "textTransform" | "textOverflow" | "width" | "whiteSpace"> & Pick<StandardShorthandProperties, "textDecoration" | "overflow">;
|
|
@@ -16298,20 +16340,20 @@ interface TextSprinkle extends TextDynamicProperties {
|
|
|
16298
16340
|
}
|
|
16299
16341
|
|
|
16300
16342
|
declare const titleLineHeightProperties: {
|
|
16301
|
-
hero: `var(--${string})` | `var(--${string}, ${string})
|
|
16302
|
-
xs: `var(--${string})` | `var(--${string}, ${string})
|
|
16303
|
-
s: `var(--${string})` | `var(--${string}, ${string})
|
|
16304
|
-
m: `var(--${string})` | `var(--${string}, ${string})
|
|
16305
|
-
l: `var(--${string})` | `var(--${string}, ${string})
|
|
16306
|
-
xl: `var(--${string})` | `var(--${string}, ${string})
|
|
16343
|
+
hero: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16344
|
+
xs: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16345
|
+
s: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16346
|
+
m: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16347
|
+
l: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16348
|
+
xl: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16307
16349
|
};
|
|
16308
16350
|
declare const titleFontSizeProperties: {
|
|
16309
|
-
hero: `var(--${string})` | `var(--${string}, ${string})
|
|
16310
|
-
xs: `var(--${string})` | `var(--${string}, ${string})
|
|
16311
|
-
s: `var(--${string})` | `var(--${string}, ${string})
|
|
16312
|
-
m: `var(--${string})` | `var(--${string}, ${string})
|
|
16313
|
-
l: `var(--${string})` | `var(--${string}, ${string})
|
|
16314
|
-
xl: `var(--${string})` | `var(--${string}, ${string})
|
|
16351
|
+
hero: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16352
|
+
xs: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16353
|
+
s: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16354
|
+
m: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16355
|
+
l: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16356
|
+
xl: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16315
16357
|
};
|
|
16316
16358
|
|
|
16317
16359
|
type TitleDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "textTransform"> & Pick<StandardShorthandProperties, "textDecoration">;
|
|
@@ -16346,24 +16388,24 @@ declare const avatarStyles: {
|
|
|
16346
16388
|
small: {
|
|
16347
16389
|
width: "20px";
|
|
16348
16390
|
height: "20px";
|
|
16349
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16391
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16350
16392
|
};
|
|
16351
16393
|
medium: {
|
|
16352
16394
|
width: "30px";
|
|
16353
16395
|
height: "30px";
|
|
16354
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16396
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16355
16397
|
};
|
|
16356
16398
|
large: {
|
|
16357
16399
|
width: "40px";
|
|
16358
16400
|
height: "40px";
|
|
16359
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16360
|
-
borderWidth: `var(--${string})` | `var(--${string}, ${string})
|
|
16401
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16402
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16361
16403
|
};
|
|
16362
16404
|
xLarge: {
|
|
16363
16405
|
width: "60px";
|
|
16364
16406
|
height: "60px";
|
|
16365
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16366
|
-
borderWidth: `var(--${string})` | `var(--${string}, ${string})
|
|
16407
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16408
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16367
16409
|
};
|
|
16368
16410
|
};
|
|
16369
16411
|
}>;
|
|
@@ -16396,39 +16438,39 @@ declare const badgeStyles: {
|
|
|
16396
16438
|
*/
|
|
16397
16439
|
appearance: {
|
|
16398
16440
|
brand: {
|
|
16399
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16400
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16401
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16441
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16442
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16443
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16402
16444
|
};
|
|
16403
16445
|
danger: {
|
|
16404
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16405
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16406
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16446
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16447
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16448
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16407
16449
|
};
|
|
16408
16450
|
success: {
|
|
16409
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16410
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16411
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16451
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16452
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16453
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16412
16454
|
};
|
|
16413
16455
|
warning: {
|
|
16414
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16415
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16416
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16456
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16457
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16458
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16417
16459
|
};
|
|
16418
16460
|
info: {
|
|
16419
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16420
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16421
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16461
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16462
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16463
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16422
16464
|
};
|
|
16423
16465
|
neutral: {
|
|
16424
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16425
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16426
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16466
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16467
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16468
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16427
16469
|
};
|
|
16428
16470
|
inverted: {
|
|
16429
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16430
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16431
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16471
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16472
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16473
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16432
16474
|
};
|
|
16433
16475
|
};
|
|
16434
16476
|
/**
|
|
@@ -16437,22 +16479,22 @@ declare const badgeStyles: {
|
|
|
16437
16479
|
*/
|
|
16438
16480
|
size: {
|
|
16439
16481
|
large: {
|
|
16440
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
16482
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16441
16483
|
height: "3rem";
|
|
16442
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16443
|
-
fontWeight: `var(--${string})` | `var(--${string}, ${string})
|
|
16484
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16485
|
+
fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16444
16486
|
};
|
|
16445
16487
|
medium: {
|
|
16446
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
16488
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16447
16489
|
height: "2em";
|
|
16448
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16449
|
-
fontWeight: `var(--${string})` | `var(--${string}, ${string})
|
|
16490
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16491
|
+
fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16450
16492
|
};
|
|
16451
16493
|
small: {
|
|
16452
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
16494
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16453
16495
|
height: "1.5rem";
|
|
16454
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16455
|
-
fontWeight: `var(--${string})` | `var(--${string}, ${string})
|
|
16496
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16497
|
+
fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16456
16498
|
};
|
|
16457
16499
|
dot: {
|
|
16458
16500
|
height: "0.5rem";
|
|
@@ -16466,9 +16508,9 @@ declare const badgeStyles: {
|
|
|
16466
16508
|
variant: {
|
|
16467
16509
|
solid: {};
|
|
16468
16510
|
outlined: {
|
|
16469
|
-
borderWidth: `var(--${string})` | `var(--${string}, ${string})
|
|
16511
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16470
16512
|
borderStyle: "solid";
|
|
16471
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16513
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16472
16514
|
};
|
|
16473
16515
|
};
|
|
16474
16516
|
}>;
|
|
@@ -16495,34 +16537,34 @@ declare const buttonStyles: {
|
|
|
16495
16537
|
*/
|
|
16496
16538
|
appearance: {
|
|
16497
16539
|
brand: {
|
|
16498
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16499
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16500
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16540
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16541
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16542
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16501
16543
|
};
|
|
16502
16544
|
danger: {
|
|
16503
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16504
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16505
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16545
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16546
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16547
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16506
16548
|
};
|
|
16507
16549
|
success: {
|
|
16508
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16509
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16510
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16550
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16551
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16552
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16511
16553
|
};
|
|
16512
16554
|
warning: {
|
|
16513
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16514
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16515
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16555
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16556
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16557
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16516
16558
|
};
|
|
16517
16559
|
neutral: {
|
|
16518
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16519
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16520
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16560
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16561
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16562
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16521
16563
|
};
|
|
16522
16564
|
inverted: {
|
|
16523
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16524
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16525
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16565
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16566
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16567
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16526
16568
|
};
|
|
16527
16569
|
};
|
|
16528
16570
|
/**
|
|
@@ -16531,22 +16573,22 @@ declare const buttonStyles: {
|
|
|
16531
16573
|
*/
|
|
16532
16574
|
size: {
|
|
16533
16575
|
large: {
|
|
16534
|
-
gap: `var(--${string})` | `var(--${string}, ${string})
|
|
16535
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
16576
|
+
gap: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16577
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16536
16578
|
height: "3rem";
|
|
16537
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16579
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16538
16580
|
};
|
|
16539
16581
|
medium: {
|
|
16540
|
-
gap: `var(--${string})` | `var(--${string}, ${string})
|
|
16541
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
16582
|
+
gap: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16583
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16542
16584
|
height: "2.5rem";
|
|
16543
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16585
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16544
16586
|
};
|
|
16545
16587
|
small: {
|
|
16546
|
-
gap: `var(--${string})` | `var(--${string}, ${string})
|
|
16547
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
16588
|
+
gap: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16589
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16548
16590
|
height: "2rem";
|
|
16549
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16591
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16550
16592
|
};
|
|
16551
16593
|
};
|
|
16552
16594
|
/**
|
|
@@ -16557,11 +16599,11 @@ declare const buttonStyles: {
|
|
|
16557
16599
|
solid: {
|
|
16558
16600
|
selectors: {
|
|
16559
16601
|
"&:hover:after": {
|
|
16560
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16602
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16561
16603
|
};
|
|
16562
16604
|
"&:active:after": {
|
|
16563
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16564
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16605
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16606
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16565
16607
|
};
|
|
16566
16608
|
};
|
|
16567
16609
|
};
|
|
@@ -16582,6 +16624,7 @@ declare const buttonStyles: {
|
|
|
16582
16624
|
|
|
16583
16625
|
type ButtonVariants = NonNullable<RecipeVariants<typeof buttonStyles.button>>;
|
|
16584
16626
|
|
|
16627
|
+
declare const overlayBackgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16585
16628
|
declare const checkboxStyles: {
|
|
16586
16629
|
checkbox: RuntimeFn<{
|
|
16587
16630
|
/**
|
|
@@ -16589,9 +16632,9 @@ declare const checkboxStyles: {
|
|
|
16589
16632
|
*/
|
|
16590
16633
|
error: {
|
|
16591
16634
|
true: {
|
|
16592
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16635
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16593
16636
|
":checked": {
|
|
16594
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16637
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16595
16638
|
};
|
|
16596
16639
|
};
|
|
16597
16640
|
};
|
|
@@ -16633,7 +16676,7 @@ declare const checkboxStyles: {
|
|
|
16633
16676
|
error: {
|
|
16634
16677
|
true: {
|
|
16635
16678
|
vars: {
|
|
16636
|
-
[
|
|
16679
|
+
[overlayBackgroundColor]: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16637
16680
|
};
|
|
16638
16681
|
};
|
|
16639
16682
|
};
|
|
@@ -16652,34 +16695,34 @@ declare const iconButtonStyles: {
|
|
|
16652
16695
|
*/
|
|
16653
16696
|
appearance: {
|
|
16654
16697
|
brand: {
|
|
16655
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16656
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16657
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16698
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16699
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16700
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16658
16701
|
};
|
|
16659
16702
|
danger: {
|
|
16660
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16661
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16662
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16703
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16704
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16705
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16663
16706
|
};
|
|
16664
16707
|
success: {
|
|
16665
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16666
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16667
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16708
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16709
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16710
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16668
16711
|
};
|
|
16669
16712
|
warning: {
|
|
16670
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16671
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16672
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16713
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16714
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16715
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16673
16716
|
};
|
|
16674
16717
|
neutral: {
|
|
16675
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16676
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16677
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16718
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16719
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16720
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16678
16721
|
};
|
|
16679
16722
|
inverted: {
|
|
16680
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16681
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16682
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16723
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16724
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16725
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16683
16726
|
};
|
|
16684
16727
|
};
|
|
16685
16728
|
/**
|
|
@@ -16690,17 +16733,17 @@ declare const iconButtonStyles: {
|
|
|
16690
16733
|
large: {
|
|
16691
16734
|
height: "3rem";
|
|
16692
16735
|
width: "3rem";
|
|
16693
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16736
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16694
16737
|
};
|
|
16695
16738
|
medium: {
|
|
16696
16739
|
height: "2.5rem";
|
|
16697
16740
|
width: "2.5rem";
|
|
16698
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16741
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16699
16742
|
};
|
|
16700
16743
|
small: {
|
|
16701
16744
|
height: "2rem";
|
|
16702
16745
|
width: "2rem";
|
|
16703
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16746
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16704
16747
|
};
|
|
16705
16748
|
};
|
|
16706
16749
|
variant: {
|
|
@@ -16711,11 +16754,11 @@ declare const iconButtonStyles: {
|
|
|
16711
16754
|
solid: {
|
|
16712
16755
|
selectors: {
|
|
16713
16756
|
"&:hover:after": {
|
|
16714
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16757
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16715
16758
|
};
|
|
16716
16759
|
"&:active:after": {
|
|
16717
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16718
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16760
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16761
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16719
16762
|
};
|
|
16720
16763
|
};
|
|
16721
16764
|
};
|
|
@@ -16739,9 +16782,9 @@ declare const iconButtonStyles: {
|
|
|
16739
16782
|
*/
|
|
16740
16783
|
rounded: {
|
|
16741
16784
|
true: {
|
|
16742
|
-
borderRadius: `var(--${string})` | `var(--${string}, ${string})
|
|
16785
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16743
16786
|
":after": {
|
|
16744
|
-
borderRadius: `var(--${string})` | `var(--${string}, ${string})
|
|
16787
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16745
16788
|
};
|
|
16746
16789
|
};
|
|
16747
16790
|
};
|
|
@@ -16750,6 +16793,49 @@ declare const iconButtonStyles: {
|
|
|
16750
16793
|
|
|
16751
16794
|
type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
|
|
16752
16795
|
|
|
16796
|
+
declare const styles$4: {
|
|
16797
|
+
link: RuntimeFn<{
|
|
16798
|
+
/**
|
|
16799
|
+
* Determines the visual style of the link.
|
|
16800
|
+
* @default brand
|
|
16801
|
+
*/
|
|
16802
|
+
appearance: {
|
|
16803
|
+
brand: {
|
|
16804
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16805
|
+
};
|
|
16806
|
+
neutral: {
|
|
16807
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16808
|
+
};
|
|
16809
|
+
inverted: {
|
|
16810
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16811
|
+
};
|
|
16812
|
+
};
|
|
16813
|
+
/**
|
|
16814
|
+
* Specifies the size of the link.
|
|
16815
|
+
* @default large
|
|
16816
|
+
*/
|
|
16817
|
+
size: {
|
|
16818
|
+
large: {
|
|
16819
|
+
fontSize: "1.125rem";
|
|
16820
|
+
lineHeight: "1.75rem";
|
|
16821
|
+
letterSpacing: ".0112rem";
|
|
16822
|
+
};
|
|
16823
|
+
small: {
|
|
16824
|
+
fontSize: ".875rem";
|
|
16825
|
+
lineHeight: "1.25rem";
|
|
16826
|
+
letterSpacing: ".0088rem";
|
|
16827
|
+
};
|
|
16828
|
+
medium: {
|
|
16829
|
+
fontSize: "1rem";
|
|
16830
|
+
lineHeight: "1.5rem";
|
|
16831
|
+
letterSpacing: ".01rem";
|
|
16832
|
+
};
|
|
16833
|
+
};
|
|
16834
|
+
}>;
|
|
16835
|
+
};
|
|
16836
|
+
|
|
16837
|
+
type LinkVariants = NonNullable<RecipeVariants<typeof styles$4.link>>;
|
|
16838
|
+
|
|
16753
16839
|
declare const progressStyles: {
|
|
16754
16840
|
progress: string;
|
|
16755
16841
|
bar: string;
|
|
@@ -16775,9 +16861,9 @@ declare const progressStyles: {
|
|
|
16775
16861
|
circleText: string;
|
|
16776
16862
|
};
|
|
16777
16863
|
declare const progressColorProperties: {
|
|
16778
|
-
info: `var(--${string})` | `var(--${string}, ${string})
|
|
16779
|
-
success: `var(--${string})` | `var(--${string}, ${string})
|
|
16780
|
-
brand: `var(--${string})` | `var(--${string}, ${string})
|
|
16864
|
+
info: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16865
|
+
success: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16866
|
+
brand: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16781
16867
|
};
|
|
16782
16868
|
|
|
16783
16869
|
type ProgressVariants = NonNullable<RecipeVariants<typeof progressStyles.circle>>;
|
|
@@ -16827,26 +16913,26 @@ declare const styles$3: {
|
|
|
16827
16913
|
*/
|
|
16828
16914
|
error: {
|
|
16829
16915
|
true: {
|
|
16830
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16831
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16916
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16917
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16832
16918
|
selectors: {
|
|
16833
16919
|
"&:has(input:disabled)": {
|
|
16834
16920
|
opacity: "50%";
|
|
16835
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16921
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16836
16922
|
};
|
|
16837
16923
|
"&:has(input:checked)": {
|
|
16838
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16839
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16924
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16925
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16840
16926
|
};
|
|
16841
16927
|
"&:has(input:checked):after": {
|
|
16842
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16928
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16843
16929
|
};
|
|
16844
16930
|
"&:hover:before": {
|
|
16845
16931
|
opacity: number;
|
|
16846
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16932
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16847
16933
|
};
|
|
16848
16934
|
"&:active:before": {
|
|
16849
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16935
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16850
16936
|
};
|
|
16851
16937
|
};
|
|
16852
16938
|
};
|
|
@@ -16858,6 +16944,137 @@ declare const styles$3: {
|
|
|
16858
16944
|
|
|
16859
16945
|
type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
|
|
16860
16946
|
|
|
16947
|
+
declare const statusStyles: {
|
|
16948
|
+
status: RuntimeFn<{
|
|
16949
|
+
/**
|
|
16950
|
+
* Specifies whether the status should take up the full width of its container.
|
|
16951
|
+
* This variant is useful when you want to make a status span the entire width of its parent container.
|
|
16952
|
+
* @default false
|
|
16953
|
+
*
|
|
16954
|
+
*/
|
|
16955
|
+
full: {
|
|
16956
|
+
true: {
|
|
16957
|
+
width: "100%";
|
|
16958
|
+
};
|
|
16959
|
+
};
|
|
16960
|
+
/**
|
|
16961
|
+
* Determines the visual style of the status, influencing its color scheme.
|
|
16962
|
+
* @default success
|
|
16963
|
+
*/
|
|
16964
|
+
appearance: {
|
|
16965
|
+
success: {
|
|
16966
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16967
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16968
|
+
};
|
|
16969
|
+
warning: {
|
|
16970
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16971
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16972
|
+
};
|
|
16973
|
+
danger: {
|
|
16974
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16975
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16976
|
+
};
|
|
16977
|
+
inverted: {
|
|
16978
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16979
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16980
|
+
};
|
|
16981
|
+
neutral: {
|
|
16982
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16983
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16984
|
+
};
|
|
16985
|
+
info: {
|
|
16986
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16987
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16988
|
+
};
|
|
16989
|
+
};
|
|
16990
|
+
/**
|
|
16991
|
+
* Specifies the size of the badge, controlling its dimensions.
|
|
16992
|
+
* @default normal
|
|
16993
|
+
*/
|
|
16994
|
+
size: {
|
|
16995
|
+
normal: {
|
|
16996
|
+
height: "1.75rem";
|
|
16997
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16998
|
+
};
|
|
16999
|
+
small: {
|
|
17000
|
+
height: "1.5rem";
|
|
17001
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17002
|
+
};
|
|
17003
|
+
};
|
|
17004
|
+
/**
|
|
17005
|
+
* Specifies the variant of the status
|
|
17006
|
+
* @default solid
|
|
17007
|
+
*/
|
|
17008
|
+
variant: {
|
|
17009
|
+
solid: {};
|
|
17010
|
+
text: {
|
|
17011
|
+
backgroundColor: "transparent";
|
|
17012
|
+
};
|
|
17013
|
+
subdued: {};
|
|
17014
|
+
};
|
|
17015
|
+
}>;
|
|
17016
|
+
dot: RuntimeFn<{
|
|
17017
|
+
size: {
|
|
17018
|
+
normal: {
|
|
17019
|
+
height: ".5rem";
|
|
17020
|
+
width: ".5rem";
|
|
17021
|
+
};
|
|
17022
|
+
small: {
|
|
17023
|
+
height: ".25rem";
|
|
17024
|
+
width: ".25rem";
|
|
17025
|
+
};
|
|
17026
|
+
};
|
|
17027
|
+
}>;
|
|
17028
|
+
};
|
|
17029
|
+
|
|
17030
|
+
type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
|
|
17031
|
+
|
|
17032
|
+
declare const bannerStyles: {
|
|
17033
|
+
banner: RuntimeFn<{
|
|
17034
|
+
/**
|
|
17035
|
+
* Specifies the visual appearance of the banner message, influencing its color and style.
|
|
17036
|
+
* @default brand
|
|
17037
|
+
*/
|
|
17038
|
+
appearance: {
|
|
17039
|
+
brand: {
|
|
17040
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17041
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17042
|
+
};
|
|
17043
|
+
info: {
|
|
17044
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17045
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17046
|
+
};
|
|
17047
|
+
neutral: {
|
|
17048
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17049
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17050
|
+
};
|
|
17051
|
+
inverted: {
|
|
17052
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17053
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17054
|
+
};
|
|
17055
|
+
warning: {
|
|
17056
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17057
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17058
|
+
};
|
|
17059
|
+
error: {
|
|
17060
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17061
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17062
|
+
};
|
|
17063
|
+
};
|
|
17064
|
+
/**
|
|
17065
|
+
* Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.
|
|
17066
|
+
* @default false
|
|
17067
|
+
*/
|
|
17068
|
+
floating: {
|
|
17069
|
+
true: {
|
|
17070
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17071
|
+
};
|
|
17072
|
+
};
|
|
17073
|
+
}>;
|
|
17074
|
+
};
|
|
17075
|
+
|
|
17076
|
+
type BannerVariants = NonNullable<RecipeVariants<typeof bannerStyles.banner>>;
|
|
17077
|
+
|
|
16861
17078
|
declare const textareaStyles: {
|
|
16862
17079
|
textarea: RuntimeFn<{
|
|
16863
17080
|
/**
|
|
@@ -16865,27 +17082,27 @@ declare const textareaStyles: {
|
|
|
16865
17082
|
*/
|
|
16866
17083
|
appearance: {
|
|
16867
17084
|
success: {
|
|
16868
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17085
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16869
17086
|
":hover": {
|
|
16870
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17087
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16871
17088
|
};
|
|
16872
17089
|
":focus": {
|
|
16873
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17090
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16874
17091
|
};
|
|
16875
17092
|
":disabled": {
|
|
16876
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17093
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16877
17094
|
};
|
|
16878
17095
|
};
|
|
16879
17096
|
error: {
|
|
16880
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17097
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16881
17098
|
":hover": {
|
|
16882
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17099
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16883
17100
|
};
|
|
16884
17101
|
":focus": {
|
|
16885
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17102
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16886
17103
|
};
|
|
16887
17104
|
":disabled": {
|
|
16888
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17105
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16889
17106
|
};
|
|
16890
17107
|
};
|
|
16891
17108
|
};
|
|
@@ -16902,12 +17119,12 @@ declare const styles: {
|
|
|
16902
17119
|
*/
|
|
16903
17120
|
inverted: {
|
|
16904
17121
|
true: {
|
|
16905
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16906
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17122
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17123
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16907
17124
|
};
|
|
16908
17125
|
false: {
|
|
16909
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16910
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17126
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17127
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16911
17128
|
};
|
|
16912
17129
|
};
|
|
16913
17130
|
/**
|
|
@@ -16916,7 +17133,7 @@ declare const styles: {
|
|
|
16916
17133
|
*/
|
|
16917
17134
|
padding: {
|
|
16918
17135
|
base: {
|
|
16919
|
-
padding: `var(--${string})` | `var(--${string}, ${string})
|
|
17136
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16920
17137
|
};
|
|
16921
17138
|
none: {
|
|
16922
17139
|
padding: number;
|
|
@@ -16926,7 +17143,7 @@ declare const styles: {
|
|
|
16926
17143
|
header: RuntimeFn<{
|
|
16927
17144
|
padding: {
|
|
16928
17145
|
base: {
|
|
16929
|
-
padding: `var(--${string})` | `var(--${string}, ${string})
|
|
17146
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16930
17147
|
};
|
|
16931
17148
|
none: {
|
|
16932
17149
|
padding: number;
|
|
@@ -16947,7 +17164,7 @@ declare const cardStyles: {
|
|
|
16947
17164
|
*/
|
|
16948
17165
|
padding: {
|
|
16949
17166
|
base: {
|
|
16950
|
-
padding: `var(--${string})` | `var(--${string}, ${string})
|
|
17167
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16951
17168
|
};
|
|
16952
17169
|
none: {
|
|
16953
17170
|
padding: number;
|
|
@@ -16957,9 +17174,9 @@ declare const cardStyles: {
|
|
|
16957
17174
|
};
|
|
16958
17175
|
declare const cardBackgroundColorProperties: {
|
|
16959
17176
|
transparent: string;
|
|
16960
|
-
background: `var(--${string})` | `var(--${string}, ${string})
|
|
16961
|
-
primary: `var(--${string})` | `var(--${string}, ${string})
|
|
16962
|
-
secondary: `var(--${string})` | `var(--${string}, ${string})
|
|
17177
|
+
background: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17178
|
+
primary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17179
|
+
secondary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16963
17180
|
};
|
|
16964
17181
|
|
|
16965
17182
|
type CardVariants = NonNullable<RecipeVariants<typeof cardStyles.card>>;
|
|
@@ -17022,8 +17239,8 @@ declare const stepperStyles: {
|
|
|
17022
17239
|
*/
|
|
17023
17240
|
active: {
|
|
17024
17241
|
true: {
|
|
17025
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17026
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17242
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17243
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17027
17244
|
};
|
|
17028
17245
|
};
|
|
17029
17246
|
/**
|
|
@@ -17032,8 +17249,8 @@ declare const stepperStyles: {
|
|
|
17032
17249
|
*/
|
|
17033
17250
|
done: {
|
|
17034
17251
|
true: {
|
|
17035
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17036
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17252
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17253
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17037
17254
|
};
|
|
17038
17255
|
};
|
|
17039
17256
|
}>;
|
|
@@ -17045,14 +17262,14 @@ declare const stepperStyles: {
|
|
|
17045
17262
|
*/
|
|
17046
17263
|
horizontal: {
|
|
17047
17264
|
height: "1px";
|
|
17048
|
-
marginLeft: `var(--${string})` | `var(--${string}, ${string})
|
|
17049
|
-
marginRight: `var(--${string})` | `var(--${string}, ${string})
|
|
17265
|
+
marginLeft: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17266
|
+
marginRight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17050
17267
|
marginTop: "20px";
|
|
17051
17268
|
};
|
|
17052
17269
|
vertical: {
|
|
17053
17270
|
width: "1px";
|
|
17054
|
-
marginTop: `var(--${string})` | `var(--${string}, ${string})
|
|
17055
|
-
marginBottom: `var(--${string})` | `var(--${string}, ${string})
|
|
17271
|
+
marginTop: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17272
|
+
marginBottom: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17056
17273
|
marginLeft: "18px";
|
|
17057
17274
|
};
|
|
17058
17275
|
};
|
|
@@ -17175,6 +17392,15 @@ type ProgressProps = ProgressTyping & ProgressSprinkle;
|
|
|
17175
17392
|
|
|
17176
17393
|
type ProgressCircleProps = ProgressProps & ProgressVariants;
|
|
17177
17394
|
|
|
17395
|
+
interface StatusTyping {
|
|
17396
|
+
/**
|
|
17397
|
+
* Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.
|
|
17398
|
+
* @default true
|
|
17399
|
+
*/
|
|
17400
|
+
dot?: boolean;
|
|
17401
|
+
}
|
|
17402
|
+
type StatusProps = StatusTyping & StatusVariants;
|
|
17403
|
+
|
|
17178
17404
|
interface ButtonTyping {
|
|
17179
17405
|
/**
|
|
17180
17406
|
* Disables the button, disallowing user interaction.
|
|
@@ -17234,6 +17460,23 @@ interface TextareaProps extends TextareaVariants {
|
|
|
17234
17460
|
lines?: number;
|
|
17235
17461
|
}
|
|
17236
17462
|
|
|
17463
|
+
interface BannerTyping {
|
|
17464
|
+
/**
|
|
17465
|
+
* A function to be called when the user closes the banner. This function is typically used to handle the closing action.
|
|
17466
|
+
* @TJS-type () => void;
|
|
17467
|
+
*/
|
|
17468
|
+
onClose?: () => void;
|
|
17469
|
+
/**
|
|
17470
|
+
* The appearance of the banner. This can be used to set the color of the banner.
|
|
17471
|
+
*/
|
|
17472
|
+
appearance?: "brand" | "error" | "info" | "warning" | "neutral" | "inverted";
|
|
17473
|
+
/**
|
|
17474
|
+
* Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.
|
|
17475
|
+
*/
|
|
17476
|
+
floating?: boolean;
|
|
17477
|
+
}
|
|
17478
|
+
type BannerProps = BannerTyping & BannerVariants;
|
|
17479
|
+
|
|
17237
17480
|
type CardProps = CardVariants & CardSprinkle;
|
|
17238
17481
|
|
|
17239
17482
|
interface CardHeaderProps {
|
|
@@ -17247,6 +17490,8 @@ interface CardHeaderProps {
|
|
|
17247
17490
|
description?: string;
|
|
17248
17491
|
}
|
|
17249
17492
|
|
|
17493
|
+
type LinkProps = LinkVariants;
|
|
17494
|
+
|
|
17250
17495
|
declare global {
|
|
17251
17496
|
interface HTMLElementTagNameMap {
|
|
17252
17497
|
"rarui-avatar": RaruiAvatar;
|
|
@@ -17314,7 +17559,7 @@ declare class RaruiDivider extends LitElement {
|
|
|
17314
17559
|
render(): TemplateResult<1>;
|
|
17315
17560
|
}
|
|
17316
17561
|
|
|
17317
|
-
type IconName = "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-
|
|
17562
|
+
type IconName = "phone-call-outlined" | "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
|
|
17318
17563
|
|
|
17319
17564
|
declare global {
|
|
17320
17565
|
interface HTMLElementTagNameMap {
|
|
@@ -17564,6 +17809,31 @@ declare class RaruiProgress extends LitElement {
|
|
|
17564
17809
|
render(): TemplateResult<1>;
|
|
17565
17810
|
}
|
|
17566
17811
|
|
|
17812
|
+
declare global {
|
|
17813
|
+
interface HTMLElementTagNameMap {
|
|
17814
|
+
"rarui-status": RaruiStatus;
|
|
17815
|
+
}
|
|
17816
|
+
}
|
|
17817
|
+
/**
|
|
17818
|
+
* ## Rarui Status
|
|
17819
|
+
* ---
|
|
17820
|
+
* Visual indicator that shows the current status or situation of an item or process.
|
|
17821
|
+
* Useful for providing fast and understandable feedback to users.
|
|
17822
|
+
*
|
|
17823
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/status) for more details.
|
|
17824
|
+
*/
|
|
17825
|
+
type StatusProperties = Partial<StatusProps>;
|
|
17826
|
+
|
|
17827
|
+
declare class RaruiStatus extends LitElement {
|
|
17828
|
+
appearance?: StatusProperties["appearance"];
|
|
17829
|
+
size?: StatusProperties["size"];
|
|
17830
|
+
variant?: StatusProperties["variant"];
|
|
17831
|
+
full?: StatusProperties["full"];
|
|
17832
|
+
dot: StatusProperties["dot"];
|
|
17833
|
+
static styles: CSSResult;
|
|
17834
|
+
render(): TemplateResult<1>;
|
|
17835
|
+
}
|
|
17836
|
+
|
|
17567
17837
|
declare global {
|
|
17568
17838
|
interface HTMLElementTagNameMap {
|
|
17569
17839
|
"rarui-button": RaruiButton;
|
|
@@ -17749,6 +18019,89 @@ declare class RaruiTextarea extends LitElement {
|
|
|
17749
18019
|
private _onChange;
|
|
17750
18020
|
}
|
|
17751
18021
|
|
|
18022
|
+
declare global {
|
|
18023
|
+
interface HTMLElementTagNameMap {
|
|
18024
|
+
"rarui-link": RaruiLink;
|
|
18025
|
+
}
|
|
18026
|
+
}
|
|
18027
|
+
/**
|
|
18028
|
+
* ## Rarui Link
|
|
18029
|
+
* ---
|
|
18030
|
+
* A link (abbreviation of hyperlink) is an html object that allows you to jump to a new location when clicking or playing it
|
|
18031
|
+
*
|
|
18032
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components/navigation/link) for more details.
|
|
18033
|
+
*/
|
|
18034
|
+
type LinkProperties = Partial<LinkProps> & {
|
|
18035
|
+
/**
|
|
18036
|
+
* Defines the native type of the button.
|
|
18037
|
+
* It can be `Button`, `submit` or `reset`.
|
|
18038
|
+
*
|
|
18039
|
+
* ** IMPORTANT: ** should only be used when `as="button"`.
|
|
18040
|
+
*/
|
|
18041
|
+
type?: "button" | "submit" | "reset";
|
|
18042
|
+
/**
|
|
18043
|
+
* Disable the button, preventing user interactions.
|
|
18044
|
+
*
|
|
18045
|
+
* ** IMPORTANT: ** should only be used when `as="button"`.
|
|
18046
|
+
*/
|
|
18047
|
+
disabled?: boolean;
|
|
18048
|
+
/**
|
|
18049
|
+
* Define or rendered element type.
|
|
18050
|
+
*
|
|
18051
|
+
* - `a`: renders an element `<a>`, ideal for navigation.
|
|
18052
|
+
* - `Button`: render an element `<Button>`, ideal for actions.
|
|
18053
|
+
*/
|
|
18054
|
+
as?: "a" | "button";
|
|
18055
|
+
/**
|
|
18056
|
+
* Defines the destination URL of the link.
|
|
18057
|
+
*
|
|
18058
|
+
* ** IMPORTANT: ** should only be used when `as="a"`.
|
|
18059
|
+
*/
|
|
18060
|
+
href?: string;
|
|
18061
|
+
};
|
|
18062
|
+
|
|
18063
|
+
declare class RaruiLink extends LitElement {
|
|
18064
|
+
type: LinkProperties["type"];
|
|
18065
|
+
as: LinkProperties["as"];
|
|
18066
|
+
appearance?: LinkProperties["appearance"];
|
|
18067
|
+
size?: LinkProperties["size"];
|
|
18068
|
+
href?: LinkProperties["href"];
|
|
18069
|
+
disabled: LinkProperties["disabled"];
|
|
18070
|
+
static styles: CSSResult;
|
|
18071
|
+
render(): TemplateResult<1>;
|
|
18072
|
+
}
|
|
18073
|
+
|
|
18074
|
+
declare global {
|
|
18075
|
+
interface HTMLElementTagNameMap {
|
|
18076
|
+
"rarui-banner": RaruiBanner;
|
|
18077
|
+
}
|
|
18078
|
+
}
|
|
18079
|
+
/**
|
|
18080
|
+
* ## Rarui Banner
|
|
18081
|
+
* ---
|
|
18082
|
+
* Banner messages are displayed to the user at the top of the window/screen.
|
|
18083
|
+
*
|
|
18084
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/banner) for more details.
|
|
18085
|
+
*/
|
|
18086
|
+
type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> & {
|
|
18087
|
+
/**
|
|
18088
|
+
* If `true`, display the closing button in the upper right corner of the banner.
|
|
18089
|
+
* When clicked, it fires the `close` event that can be listened to externally.
|
|
18090
|
+
*
|
|
18091
|
+
* @default false
|
|
18092
|
+
*/
|
|
18093
|
+
closable?: boolean;
|
|
18094
|
+
};
|
|
18095
|
+
|
|
18096
|
+
declare class RaruiBanner extends LitElement {
|
|
18097
|
+
appearance?: BannerProperties["appearance"];
|
|
18098
|
+
floating: BannerProperties["floating"];
|
|
18099
|
+
closable: BannerProperties["closable"];
|
|
18100
|
+
static styles: CSSResult;
|
|
18101
|
+
private handleClose;
|
|
18102
|
+
render(): TemplateResult<1>;
|
|
18103
|
+
}
|
|
18104
|
+
|
|
17752
18105
|
declare global {
|
|
17753
18106
|
interface HTMLElementTagNameMap {
|
|
17754
18107
|
"rarui-card-header": RaruiCardHeader;
|