@nimbus-ds/components 5.24.0-rc.2 → 5.24.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/index.js +2 -0
- package/dist/Alert/index.js +2 -0
- package/dist/Badge/index.js +2 -0
- package/dist/Box/index.js +2 -0
- package/dist/Button/index.js +2 -0
- package/dist/CHANGELOG.md +658 -0
- package/dist/Card/index.js +2 -0
- package/dist/Checkbox/index.js +2 -0
- package/dist/Chip/index.js +2 -0
- package/dist/Collapsible/index.js +2 -0
- package/dist/FileUploader/index.js +2 -0
- package/dist/Icon/index.js +2 -0
- package/dist/IconButton/index.js +2 -0
- package/dist/Input/index.js +2 -0
- package/dist/Label/index.js +2 -0
- package/dist/Link/index.js +2 -0
- package/dist/List/index.js +2 -0
- package/dist/Modal/index.js +2 -0
- package/dist/MultiSelect/index.js +2 -0
- package/dist/Pagination/index.js +2 -0
- package/dist/Popover/index.js +2 -0
- package/dist/ProgressBar/index.js +2 -0
- package/dist/README.md +235 -0
- package/dist/Radio/index.js +2 -0
- package/dist/ScrollPane/index.js +2 -0
- package/dist/SegmentedControl/index.js +2 -0
- package/dist/Select/index.js +2 -0
- package/dist/Sidebar/index.js +2 -0
- package/dist/Skeleton/index.js +2 -0
- package/dist/Spinner/index.js +2 -0
- package/dist/Stepper/index.js +2 -0
- package/dist/Table/index.js +2 -0
- package/dist/Tabs/index.js +2 -0
- package/dist/Tag/index.js +2 -0
- package/dist/Text/index.js +2 -0
- package/dist/Textarea/index.js +2 -0
- package/dist/Thumbnail/index.js +2 -0
- package/dist/Title/index.js +2 -0
- package/dist/Toast/index.js +2 -0
- package/dist/Toggle/index.js +2 -0
- package/dist/Tooltip/index.js +2 -0
- package/dist/index.d.ts +3966 -0
- package/dist/index.js +2 -0
- package/package.json +1 -1
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,3966 @@
|
|
|
1
|
+
// Generated by dts-bundle-generator v7.2.0
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, SVGAttributes } from 'react';
|
|
5
|
+
|
|
6
|
+
export interface SkeletonProperties {
|
|
7
|
+
/**
|
|
8
|
+
* Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
|
|
9
|
+
*/
|
|
10
|
+
width: string;
|
|
11
|
+
/**
|
|
12
|
+
* Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
|
|
13
|
+
*/
|
|
14
|
+
height: string;
|
|
15
|
+
/**
|
|
16
|
+
* The border radius of the skeleton.
|
|
17
|
+
*/
|
|
18
|
+
borderRadius?: string;
|
|
19
|
+
/**
|
|
20
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
21
|
+
*/
|
|
22
|
+
"data-testid"?: string;
|
|
23
|
+
}
|
|
24
|
+
export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
|
|
25
|
+
export declare const Skeleton: React.FC<SkeletonProps>;
|
|
26
|
+
export type BadgeSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
|
|
27
|
+
/**
|
|
28
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
29
|
+
*/
|
|
30
|
+
"data-testid"?: string;
|
|
31
|
+
};
|
|
32
|
+
export type BadgeSkeletonProps = BadgeSkeletonProperties;
|
|
33
|
+
declare const BadgeSkeleton: React.FC<BadgeSkeletonProps>;
|
|
34
|
+
export interface BadgeComponents {
|
|
35
|
+
Skeleton: typeof BadgeSkeleton;
|
|
36
|
+
}
|
|
37
|
+
export interface BadgeProperties {
|
|
38
|
+
/**
|
|
39
|
+
* Change the visual style of the badge.
|
|
40
|
+
* @default neutral
|
|
41
|
+
*/
|
|
42
|
+
appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
|
|
43
|
+
/**
|
|
44
|
+
* Total items to be displayed without badge
|
|
45
|
+
*/
|
|
46
|
+
count: number | string;
|
|
47
|
+
/**
|
|
48
|
+
* Change the color scheme of the badge.
|
|
49
|
+
* @default surface
|
|
50
|
+
*/
|
|
51
|
+
theme?: "surface" | "light";
|
|
52
|
+
}
|
|
53
|
+
export type BadgeProps = BadgeProperties & HTMLAttributes<HTMLElement>;
|
|
54
|
+
export declare const Badge: React.FC<BadgeProps> & BadgeComponents;
|
|
55
|
+
export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
|
|
56
|
+
export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
|
|
57
|
+
as?: E;
|
|
58
|
+
}>>;
|
|
59
|
+
export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}
|
|
60
|
+
/**
|
|
61
|
+
* Extends original type to ensure built in React types play nice
|
|
62
|
+
* with polymorphic components still e.g. `React.ElementRef` etc.
|
|
63
|
+
*/
|
|
64
|
+
> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
|
|
65
|
+
/**
|
|
66
|
+
* When `as` prop is passed, use this overload.
|
|
67
|
+
* Merges original own props (without DOM props) and the inferred props
|
|
68
|
+
* from `as` element with the own props taking precendence.
|
|
69
|
+
*
|
|
70
|
+
* We explicitly avoid `React.ElementType` and manually narrow the prop types
|
|
71
|
+
* so that events are typed when using JSX.IntrinsicElements.
|
|
72
|
+
*/
|
|
73
|
+
<As = IntrinsicElementString>(props: As extends "" ? {
|
|
74
|
+
as: keyof JSX.IntrinsicElements;
|
|
75
|
+
} : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
|
|
76
|
+
as: As;
|
|
77
|
+
}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
|
|
78
|
+
as: As;
|
|
79
|
+
}> : never): React.ReactElement | null;
|
|
80
|
+
}
|
|
81
|
+
export interface Conditions<T> {
|
|
82
|
+
xs?: T;
|
|
83
|
+
md?: T;
|
|
84
|
+
lg?: T;
|
|
85
|
+
xl?: T;
|
|
86
|
+
}
|
|
87
|
+
export type AspectRatio = "1/1" | "16/9" | "9/16" | "4/3" | "3/4" | "2/1" | "1/2";
|
|
88
|
+
export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
|
|
89
|
+
export type BoxSizing = "border-box" | "content-box";
|
|
90
|
+
export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
|
|
91
|
+
export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid" | "none";
|
|
92
|
+
export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
|
|
93
|
+
export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
|
|
94
|
+
export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
|
|
95
|
+
export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
|
|
96
|
+
export type AlignSelf = "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
|
|
97
|
+
export type TextAlign = "left" | "right" | "center" | "justify";
|
|
98
|
+
export type TextDecoration = "none" | "underline" | "line-through";
|
|
99
|
+
export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
|
|
100
|
+
export type Overflow = "visible" | "hidden" | "scroll" | "auto";
|
|
101
|
+
export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
|
|
102
|
+
export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
|
|
103
|
+
export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
|
|
104
|
+
declare const propertiesBox: {
|
|
105
|
+
gap: {
|
|
106
|
+
none: string;
|
|
107
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
108
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
109
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
110
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
111
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
112
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
113
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
114
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
115
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
116
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
117
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
118
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
119
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
120
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
121
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
122
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
123
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
124
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
125
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
126
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
127
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
128
|
+
};
|
|
129
|
+
gridGap: {
|
|
130
|
+
none: string;
|
|
131
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
132
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
133
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
134
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
135
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
136
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
137
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
138
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
139
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
140
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
141
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
142
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
143
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
144
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
145
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
146
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
147
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
148
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
149
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
150
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
151
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
152
|
+
};
|
|
153
|
+
display: Display[];
|
|
154
|
+
flexDirection: FlexDirection[];
|
|
155
|
+
flexWrap: FlexWrap[];
|
|
156
|
+
justifyContent: JustifyContent[];
|
|
157
|
+
alignItems: AlignItems[];
|
|
158
|
+
alignSelf: AlignSelf[];
|
|
159
|
+
pointerEvents: PointerEvents[];
|
|
160
|
+
backgroundColor: {
|
|
161
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
162
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
163
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
164
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
165
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
166
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
167
|
+
"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
168
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
169
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
170
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
171
|
+
"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
172
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
173
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
|
|
174
|
+
* The min height property specifies the height of a box's content area.
|
|
175
|
+
*/
|
|
176
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
177
|
+
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
178
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
179
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
180
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
181
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
182
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
183
|
+
"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
184
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
185
|
+
transparent: string;
|
|
186
|
+
};
|
|
187
|
+
background: {
|
|
188
|
+
"ai-generative-interactive-border": string;
|
|
189
|
+
"ai-generative-interactive": string;
|
|
190
|
+
transparent: string;
|
|
191
|
+
};
|
|
192
|
+
color: {
|
|
193
|
+
currentColor: string;
|
|
194
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
195
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
196
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
197
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
198
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
199
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
200
|
+
"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
201
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
202
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
203
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
204
|
+
"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
205
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
206
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
|
|
207
|
+
* The min height property specifies the height of a box's content area.
|
|
208
|
+
*/
|
|
209
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
210
|
+
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
211
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
212
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
213
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
214
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
215
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
216
|
+
"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
217
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
218
|
+
transparent: string;
|
|
219
|
+
};
|
|
220
|
+
borderColor: {
|
|
221
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
222
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
223
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
224
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
225
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
226
|
+
"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
227
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
228
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
229
|
+
"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
230
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
231
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
232
|
+
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
233
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
234
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
235
|
+
"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
236
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
237
|
+
transparent: string;
|
|
238
|
+
};
|
|
239
|
+
borderRadius: {
|
|
240
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
241
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
242
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
243
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
244
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
245
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
246
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
247
|
+
full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
248
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
249
|
+
half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
250
|
+
none: string;
|
|
251
|
+
};
|
|
252
|
+
borderWidth: {
|
|
253
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
254
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
255
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
256
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
257
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
258
|
+
none: string;
|
|
259
|
+
};
|
|
260
|
+
borderStyle: BorderStyle[];
|
|
261
|
+
boxSizing: BoxSizing[];
|
|
262
|
+
cursor: Cursor[];
|
|
263
|
+
spacing: {
|
|
264
|
+
none: string;
|
|
265
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
266
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
267
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
268
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
269
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
270
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
271
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
272
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
273
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
274
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
275
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
276
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
277
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
278
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
279
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
280
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
281
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
282
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
283
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
284
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
285
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
286
|
+
};
|
|
287
|
+
margin: {
|
|
288
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
289
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
290
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
291
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
292
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
293
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
294
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
295
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
296
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
297
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
298
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
299
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
300
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
301
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
302
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
303
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
304
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
305
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
306
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
307
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
308
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
309
|
+
auto: string;
|
|
310
|
+
none: string;
|
|
311
|
+
};
|
|
312
|
+
position: Position[];
|
|
313
|
+
overflow: Overflow[];
|
|
314
|
+
overflowX: Overflow[];
|
|
315
|
+
overflowY: Overflow[];
|
|
316
|
+
boxShadow: {
|
|
317
|
+
"0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
318
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
319
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
320
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
321
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
322
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
323
|
+
focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
324
|
+
aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
325
|
+
};
|
|
326
|
+
transitionDuration: {
|
|
327
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
328
|
+
fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
329
|
+
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
330
|
+
slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
331
|
+
};
|
|
332
|
+
transitionTimingFunction: TransitionTiming[];
|
|
333
|
+
textDecoration: TextDecoration[];
|
|
334
|
+
zIndex: {
|
|
335
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
336
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
337
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
338
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
339
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
340
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
341
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
342
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
343
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
344
|
+
};
|
|
345
|
+
textAlign: TextAlign[];
|
|
346
|
+
fontWeight: {
|
|
347
|
+
regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
348
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
349
|
+
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
350
|
+
};
|
|
351
|
+
fontSize: {
|
|
352
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
353
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
354
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
355
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
356
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
357
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
358
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
359
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
360
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
361
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
362
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
363
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
364
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
365
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
366
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
367
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
368
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
369
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
370
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
371
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
372
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
373
|
+
h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
374
|
+
h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
|
|
375
|
+
* This defines the ability for a flex item to shrink if necessary.
|
|
376
|
+
*/
|
|
377
|
+
h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
378
|
+
h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
379
|
+
h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
380
|
+
h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
381
|
+
};
|
|
382
|
+
lineHeight: {
|
|
383
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
384
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
385
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
386
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
387
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
388
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
389
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
390
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
391
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
392
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
393
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
394
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
395
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
396
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
397
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
398
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
399
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
400
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
401
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
402
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
403
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
404
|
+
h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
405
|
+
h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
406
|
+
h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
407
|
+
h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
408
|
+
h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
409
|
+
h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
410
|
+
};
|
|
411
|
+
};
|
|
412
|
+
export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
|
|
413
|
+
export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
|
|
414
|
+
export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
|
|
415
|
+
export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
|
|
416
|
+
export type BoxColorProperties = keyof typeof propertiesBox.color;
|
|
417
|
+
export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
|
|
418
|
+
export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
|
|
419
|
+
export type BoxMarginProperties = keyof typeof propertiesBox.margin;
|
|
420
|
+
export type BoxGapProperties = keyof typeof propertiesBox.gap;
|
|
421
|
+
export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
|
|
422
|
+
export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
|
|
423
|
+
export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
|
|
424
|
+
export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
|
|
425
|
+
export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
|
|
426
|
+
export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
|
|
427
|
+
export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
|
|
428
|
+
export interface BoxConditions<T> extends Conditions<T> {
|
|
429
|
+
focus?: T;
|
|
430
|
+
focusWithin?: T;
|
|
431
|
+
active?: T;
|
|
432
|
+
hover?: T;
|
|
433
|
+
disabled?: T;
|
|
434
|
+
}
|
|
435
|
+
export interface BoxSprinkle {
|
|
436
|
+
/**
|
|
437
|
+
* The width property specifies the width of a box's content area.
|
|
438
|
+
*/
|
|
439
|
+
width?: string | BoxConditions<string>;
|
|
440
|
+
/**
|
|
441
|
+
* The height property specifies the height of a box's content area.
|
|
442
|
+
*/
|
|
443
|
+
height?: string | BoxConditions<string>;
|
|
444
|
+
/**
|
|
445
|
+
* The max width property specifies the width of a box's content area.
|
|
446
|
+
*/
|
|
447
|
+
maxWidth?: string | BoxConditions<string>;
|
|
448
|
+
/**
|
|
449
|
+
* The max height property specifies the height of a box's content area.
|
|
450
|
+
*/
|
|
451
|
+
maxHeight?: string | BoxConditions<string>;
|
|
452
|
+
/**
|
|
453
|
+
* The min width property specifies the width of a box's content area.
|
|
454
|
+
*/
|
|
455
|
+
minWidth?: string | BoxConditions<string>;
|
|
456
|
+
/**
|
|
457
|
+
* The min height property specifies the height of a box's content area.
|
|
458
|
+
*/
|
|
459
|
+
minHeight?: string | BoxConditions<string>;
|
|
460
|
+
/**
|
|
461
|
+
* The bottom property participates in setting the vertical position of a positioned box.
|
|
462
|
+
*/
|
|
463
|
+
bottom?: string | BoxConditions<string>;
|
|
464
|
+
/**
|
|
465
|
+
* The left property participates in specifying the horizontal position of a positioned box.
|
|
466
|
+
*/
|
|
467
|
+
left?: string | BoxConditions<string>;
|
|
468
|
+
/**
|
|
469
|
+
* The right property participates in specifying the horizontal position of a positioned box.
|
|
470
|
+
*/
|
|
471
|
+
right?: string | BoxConditions<string>;
|
|
472
|
+
/**
|
|
473
|
+
* The top property participates in setting the vertical position of a positioned box.
|
|
474
|
+
*/
|
|
475
|
+
top?: string | BoxConditions<string>;
|
|
476
|
+
/**
|
|
477
|
+
* This is the shorthand for flexGrow, flexShrink and flexBasis combined.
|
|
478
|
+
*/
|
|
479
|
+
flex?: string | BoxConditions<string>;
|
|
480
|
+
/**
|
|
481
|
+
* This defines the ability for a flex item to shrink if necessary.
|
|
482
|
+
*/
|
|
483
|
+
flexShrink?: string | BoxConditions<string>;
|
|
484
|
+
/**
|
|
485
|
+
* This defines the ability for a flex item to grow if necessary.
|
|
486
|
+
*/
|
|
487
|
+
flexGrow?: string | BoxConditions<string>;
|
|
488
|
+
/**
|
|
489
|
+
* The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
|
|
490
|
+
*/
|
|
491
|
+
flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
|
|
492
|
+
/**
|
|
493
|
+
* The order property controls the order in which they appear in a flex container.
|
|
494
|
+
*/
|
|
495
|
+
order?: string | BoxConditions<string>;
|
|
496
|
+
/**
|
|
497
|
+
* The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
|
|
498
|
+
*/
|
|
499
|
+
gridTemplateColumns?: string | BoxConditions<string>;
|
|
500
|
+
/**
|
|
501
|
+
* The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
|
|
502
|
+
*/
|
|
503
|
+
gridTemplateAreas?: string | BoxConditions<string>;
|
|
504
|
+
/**
|
|
505
|
+
* The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
|
|
506
|
+
*/
|
|
507
|
+
gridTemplateRows?: string | BoxConditions<string>;
|
|
508
|
+
/**
|
|
509
|
+
* The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
|
|
510
|
+
* a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
|
|
511
|
+
*/
|
|
512
|
+
gridArea?: string | BoxConditions<string>;
|
|
513
|
+
/**
|
|
514
|
+
* The display property sets whether an box is treated as a block or inline element and the layout used for its children,
|
|
515
|
+
* such as grid or flex.
|
|
516
|
+
*/
|
|
517
|
+
display?: Display | BoxConditions<Display>;
|
|
518
|
+
/**
|
|
519
|
+
* The justifyContent property defines how the browser distributes space between and around content items along
|
|
520
|
+
* the main-axis of a flex container, and the inline axis of a grid container.
|
|
521
|
+
*/
|
|
522
|
+
justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
|
|
523
|
+
/**
|
|
524
|
+
* The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
|
|
525
|
+
*/
|
|
526
|
+
flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
|
|
527
|
+
/**
|
|
528
|
+
* The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
|
|
529
|
+
* In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
|
|
530
|
+
*/
|
|
531
|
+
alignItems?: AlignItems | BoxConditions<AlignItems>;
|
|
532
|
+
/**
|
|
533
|
+
* The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
|
|
534
|
+
* In Flexbox, it aligns the item on the cross axis.
|
|
535
|
+
*/
|
|
536
|
+
alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
|
|
537
|
+
/**
|
|
538
|
+
* The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
|
|
539
|
+
*/
|
|
540
|
+
gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
|
|
541
|
+
/**
|
|
542
|
+
* The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
|
|
543
|
+
*/
|
|
544
|
+
gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
|
|
545
|
+
/**
|
|
546
|
+
* The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
|
|
547
|
+
*/
|
|
548
|
+
pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
|
|
549
|
+
/**
|
|
550
|
+
* The position property sets how an box is positioned in a document.
|
|
551
|
+
*/
|
|
552
|
+
position?: Position | BoxConditions<Position>;
|
|
553
|
+
/**
|
|
554
|
+
* The overflow shorthand property sets the desired behavior for an box's overflow.
|
|
555
|
+
*/
|
|
556
|
+
overflow?: Overflow | BoxConditions<Overflow>;
|
|
557
|
+
/**
|
|
558
|
+
* The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
|
|
559
|
+
*/
|
|
560
|
+
overflowX?: Overflow | BoxConditions<Overflow>;
|
|
561
|
+
/**
|
|
562
|
+
* The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
|
|
563
|
+
*/
|
|
564
|
+
overflowY?: Overflow | BoxConditions<Overflow>;
|
|
565
|
+
/**
|
|
566
|
+
* The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
|
|
567
|
+
*/
|
|
568
|
+
cursor?: Cursor | BoxConditions<Cursor>;
|
|
569
|
+
/**
|
|
570
|
+
* The backgroundColor property sets the background color of the box.
|
|
571
|
+
* @default neutral-background
|
|
572
|
+
* @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
|
|
573
|
+
*/
|
|
574
|
+
backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
|
|
575
|
+
/**
|
|
576
|
+
* The color property is used to set the color of the box.
|
|
577
|
+
*/
|
|
578
|
+
color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
|
|
579
|
+
/**
|
|
580
|
+
* The borderRadius property rounds the corners of an box's outer border edge.
|
|
581
|
+
*/
|
|
582
|
+
borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
|
|
583
|
+
/**
|
|
584
|
+
* The borderWidth property sets the width of an box's border.
|
|
585
|
+
*/
|
|
586
|
+
borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
587
|
+
/**
|
|
588
|
+
* The borderTopWidth property defines the width of the border at the top of a box.
|
|
589
|
+
*/
|
|
590
|
+
borderTopWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
591
|
+
/**
|
|
592
|
+
* The borderBottomWidth property defines the width of the border at the bottom of a box.
|
|
593
|
+
*/
|
|
594
|
+
borderBottomWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
595
|
+
/**
|
|
596
|
+
* The borderLeftWidth property defines the width of the border at the left of a box.
|
|
597
|
+
*/
|
|
598
|
+
borderLeftWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
599
|
+
/**
|
|
600
|
+
* The borderRightWidth property defines the width of the border at the right of a box.
|
|
601
|
+
*/
|
|
602
|
+
borderRightWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
603
|
+
/**
|
|
604
|
+
* The borderWidthX shorthand property defines the width of the element's border on the left and right.
|
|
605
|
+
*/
|
|
606
|
+
borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
607
|
+
/**
|
|
608
|
+
* The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
|
|
609
|
+
*/
|
|
610
|
+
borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
|
|
611
|
+
/**
|
|
612
|
+
* The borderColor property sets the color of the box's four borders.
|
|
613
|
+
*/
|
|
614
|
+
borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
|
|
615
|
+
/**
|
|
616
|
+
* borderStyle property sets the line style for all four sides of an box's border.
|
|
617
|
+
*/
|
|
618
|
+
borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
|
|
619
|
+
/**
|
|
620
|
+
* The boxSizing property sets how the total width and height of an box is calculated.
|
|
621
|
+
* @default border-box
|
|
622
|
+
*/
|
|
623
|
+
boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
|
|
624
|
+
/**
|
|
625
|
+
* The boxShadow property adds shadow effects around an box's frame.
|
|
626
|
+
*/
|
|
627
|
+
boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
|
|
628
|
+
/**
|
|
629
|
+
* The padding properties are used to generate space around an box's content area.
|
|
630
|
+
*/
|
|
631
|
+
padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
632
|
+
/**
|
|
633
|
+
* The paddingTop property sets the height of the padding area on the top of an box.
|
|
634
|
+
*/
|
|
635
|
+
paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
636
|
+
/**
|
|
637
|
+
* The paddingBottom property sets the height of the padding area on the bottom of an box.
|
|
638
|
+
*/
|
|
639
|
+
paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
640
|
+
/**
|
|
641
|
+
* The paddingLeft property sets the width of the padding area to the left of an box.
|
|
642
|
+
*/
|
|
643
|
+
paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
644
|
+
/**
|
|
645
|
+
* The paddingLeft property sets the width of the padding area to the right of an box.
|
|
646
|
+
*/
|
|
647
|
+
paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
648
|
+
/**
|
|
649
|
+
* The margin shorthand property sets the margin area on all four sides of an box.
|
|
650
|
+
*/
|
|
651
|
+
margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
652
|
+
/**
|
|
653
|
+
* The marginTop property sets the margin area on the top of an box.
|
|
654
|
+
*/
|
|
655
|
+
marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
656
|
+
/**
|
|
657
|
+
* The marginBottom property sets the margin area on the bottom of an box.
|
|
658
|
+
*/
|
|
659
|
+
marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
660
|
+
/**
|
|
661
|
+
* The marginLeft property sets the margin area on the left side of an box.
|
|
662
|
+
*/
|
|
663
|
+
marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
664
|
+
/**
|
|
665
|
+
* The marginRight property sets the margin area on the right side of an box.
|
|
666
|
+
*/
|
|
667
|
+
marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
668
|
+
/**
|
|
669
|
+
* The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
|
|
670
|
+
*/
|
|
671
|
+
transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
|
|
672
|
+
/**
|
|
673
|
+
* The transitionProperty property sets the CSS properties to which a transition effect should be applied.
|
|
674
|
+
*/
|
|
675
|
+
transitionProperty?: string | BoxConditions<string>;
|
|
676
|
+
/**
|
|
677
|
+
* The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
|
|
678
|
+
*/
|
|
679
|
+
transitionDelay?: string | BoxConditions<string>;
|
|
680
|
+
/**
|
|
681
|
+
* The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
|
|
682
|
+
*/
|
|
683
|
+
transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
|
|
684
|
+
/**
|
|
685
|
+
* The zIndex property specifies the stack order of the box.
|
|
686
|
+
*/
|
|
687
|
+
zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
|
|
688
|
+
/**
|
|
689
|
+
* The background property sets the background of the box.
|
|
690
|
+
*/
|
|
691
|
+
background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
|
|
692
|
+
/**
|
|
693
|
+
* The backgroundImage property sets one or more background images on an element.
|
|
694
|
+
*/
|
|
695
|
+
backgroundImage?: string | BoxConditions<string>;
|
|
696
|
+
/**
|
|
697
|
+
* The backgroundPosition property sets the initial position for each background image.
|
|
698
|
+
* The position is relative to the position layer set by background-origin.
|
|
699
|
+
*/
|
|
700
|
+
backgroundPosition?: string | BoxConditions<string>;
|
|
701
|
+
/**
|
|
702
|
+
* The backgroundBlendMode property sets how an element's background images should blend with each
|
|
703
|
+
* other and with the element's background color.
|
|
704
|
+
*/
|
|
705
|
+
backgroundBlendMode?: string | BoxConditions<string>;
|
|
706
|
+
/**
|
|
707
|
+
* The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
|
|
708
|
+
*/
|
|
709
|
+
backgroundRepeat?: string | BoxConditions<string>;
|
|
710
|
+
/**
|
|
711
|
+
* The textDecoration shorthand property sets the appearance of decorative lines on text.
|
|
712
|
+
*/
|
|
713
|
+
textDecoration?: TextDecoration | BoxConditions<TextDecoration>;
|
|
714
|
+
/**
|
|
715
|
+
* The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
|
|
716
|
+
*/
|
|
717
|
+
backgroundSize?: string | BoxConditions<string>;
|
|
718
|
+
/**
|
|
719
|
+
* The p shorthand property sets the margin area on all four sides of an box.
|
|
720
|
+
*/
|
|
721
|
+
p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
722
|
+
/**
|
|
723
|
+
* The pl shorthand property sets the width of the padding area to the left of an box.
|
|
724
|
+
*/
|
|
725
|
+
pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
726
|
+
/**
|
|
727
|
+
* The pl shorthand property sets the width of the padding area to the right of an box.
|
|
728
|
+
*/
|
|
729
|
+
pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
730
|
+
/**
|
|
731
|
+
* The pt shorthand property sets the height of the padding area on the top of an box.
|
|
732
|
+
*/
|
|
733
|
+
pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
734
|
+
/**
|
|
735
|
+
* The pb shorthand property sets the height of the padding area on the botton of an box.
|
|
736
|
+
*/
|
|
737
|
+
pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
738
|
+
/**
|
|
739
|
+
* The px shorthand property defines the width of the left and right padding area of a box.
|
|
740
|
+
*/
|
|
741
|
+
px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
742
|
+
/**
|
|
743
|
+
* The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
|
|
744
|
+
*/
|
|
745
|
+
py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
746
|
+
/**
|
|
747
|
+
* The paddingX shorthand property defines the width of the left and right padding area of a box.
|
|
748
|
+
*/
|
|
749
|
+
paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
750
|
+
/**
|
|
751
|
+
* The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
|
|
752
|
+
*/
|
|
753
|
+
paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
|
|
754
|
+
/**
|
|
755
|
+
* The m shorthand property sets the margin area on all four sides of an box.
|
|
756
|
+
*/
|
|
757
|
+
m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
758
|
+
/**
|
|
759
|
+
* The mr property sets the margin area on the right side of an box.
|
|
760
|
+
*/
|
|
761
|
+
mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
762
|
+
/**
|
|
763
|
+
* The ml property sets the margin area on the left side of an box.
|
|
764
|
+
*/
|
|
765
|
+
ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
766
|
+
/**
|
|
767
|
+
* The mt property sets the margin area on the top of an box.
|
|
768
|
+
*/
|
|
769
|
+
mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
770
|
+
/**
|
|
771
|
+
* The marginBottom property sets the margin area on the bottom of an box.
|
|
772
|
+
*/
|
|
773
|
+
mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
774
|
+
/**
|
|
775
|
+
* The mx property defines the margin area on the left and right side of a box.
|
|
776
|
+
*/
|
|
777
|
+
mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
778
|
+
/**
|
|
779
|
+
* The my property defines the margin area on the top and bottom of a box
|
|
780
|
+
*/
|
|
781
|
+
my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
782
|
+
/**
|
|
783
|
+
* The marginX property defines the margin area on the left and right side of a box.
|
|
784
|
+
*/
|
|
785
|
+
marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
786
|
+
/**
|
|
787
|
+
* The marginY property defines the margin area on the top and bottom of a box
|
|
788
|
+
*/
|
|
789
|
+
marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
790
|
+
/**
|
|
791
|
+
* The fontSize property sets the size of the box.
|
|
792
|
+
* @default base
|
|
793
|
+
*/
|
|
794
|
+
fontSize?: BoxFontSizeProperties | BoxConditions<BoxFontSizeProperties>;
|
|
795
|
+
/**
|
|
796
|
+
* The fontWeight property sets how thick or thin characters in box should be displayed.
|
|
797
|
+
* @default regular
|
|
798
|
+
*/
|
|
799
|
+
fontWeight?: BoxFontWeightProperties | BoxConditions<BoxFontWeightProperties>;
|
|
800
|
+
/**
|
|
801
|
+
* The lineHeight property specifies the line height of the box.
|
|
802
|
+
* @default base
|
|
803
|
+
*/
|
|
804
|
+
lineHeight?: BoxLineHeightProperties | BoxConditions<BoxLineHeightProperties>;
|
|
805
|
+
/**
|
|
806
|
+
* The textAlign property specifies the horizontal alignment of box.
|
|
807
|
+
* @default left
|
|
808
|
+
*/
|
|
809
|
+
textAlign?: TextAlign | BoxConditions<TextAlign>;
|
|
810
|
+
}
|
|
811
|
+
declare const fileUploader: {
|
|
812
|
+
sprinkle: ((props: {
|
|
813
|
+
aspectRatio?: "none" | AspectRatio | undefined;
|
|
814
|
+
flexDirection?: "row" | "column" | undefined;
|
|
815
|
+
cursor?: Cursor | undefined;
|
|
816
|
+
}) => string) & {
|
|
817
|
+
properties: Set<"aspectRatio" | "cursor" | "flexDirection">;
|
|
818
|
+
};
|
|
819
|
+
properties: {
|
|
820
|
+
aspectRatio: readonly [
|
|
821
|
+
"none",
|
|
822
|
+
...AspectRatio[]
|
|
823
|
+
];
|
|
824
|
+
flexDirection: readonly [
|
|
825
|
+
"row",
|
|
826
|
+
"column"
|
|
827
|
+
];
|
|
828
|
+
cursor: Cursor[];
|
|
829
|
+
};
|
|
830
|
+
classnames: {
|
|
831
|
+
container: string;
|
|
832
|
+
container__input: string;
|
|
833
|
+
disabled: string;
|
|
834
|
+
skeleton: string;
|
|
835
|
+
};
|
|
836
|
+
};
|
|
837
|
+
declare const icon: {
|
|
838
|
+
sprinkle: ((props: {
|
|
839
|
+
color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
|
|
840
|
+
cursor?: Cursor | undefined;
|
|
841
|
+
}) => string) & {
|
|
842
|
+
properties: Set<"color" | "cursor">;
|
|
843
|
+
};
|
|
844
|
+
properties: {
|
|
845
|
+
color: {
|
|
846
|
+
currentColor: string;
|
|
847
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
848
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
849
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
850
|
+
"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
851
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
852
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
853
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
854
|
+
"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
855
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
856
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
857
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
858
|
+
"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
859
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
860
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
861
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
862
|
+
"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
863
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
864
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
865
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
866
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
867
|
+
"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
868
|
+
"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
869
|
+
"ai-generative": string;
|
|
870
|
+
};
|
|
871
|
+
cursor: Cursor[];
|
|
872
|
+
};
|
|
873
|
+
classnames: {
|
|
874
|
+
base: string;
|
|
875
|
+
};
|
|
876
|
+
};
|
|
877
|
+
declare const propertiesIconButton: {
|
|
878
|
+
backgroundColor: {
|
|
879
|
+
transparent: string;
|
|
880
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
881
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
882
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
883
|
+
"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
884
|
+
};
|
|
885
|
+
borderColor: {
|
|
886
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
887
|
+
"neutral-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
888
|
+
"neutral-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
889
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
890
|
+
transparent: string;
|
|
891
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
892
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
893
|
+
"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
894
|
+
};
|
|
895
|
+
};
|
|
896
|
+
export type IconButtonBackgroundColorProperties = keyof typeof propertiesIconButton.backgroundColor;
|
|
897
|
+
export type IconButtonBorderColorProperties = keyof typeof propertiesIconButton.borderColor;
|
|
898
|
+
export interface IconButtonConditions<T> extends Conditions<T> {
|
|
899
|
+
focus?: T;
|
|
900
|
+
active?: T;
|
|
901
|
+
hover?: T;
|
|
902
|
+
}
|
|
903
|
+
export interface IconButtonSprinkle {
|
|
904
|
+
/**
|
|
905
|
+
* The size of the component.
|
|
906
|
+
* @default 2.75rem
|
|
907
|
+
*/
|
|
908
|
+
size?: string | IconButtonConditions<string>;
|
|
909
|
+
/**
|
|
910
|
+
* The borderColor property sets the color of the icon button's four borders.
|
|
911
|
+
* @default { xs: "neutral-interactive", active: "neutral-interactivePressed", hover: "neutral-interactiveHover", focus: "primary-interactive" }
|
|
912
|
+
*/
|
|
913
|
+
borderColor?: IconButtonBorderColorProperties | IconButtonConditions<IconButtonBorderColorProperties>;
|
|
914
|
+
/**
|
|
915
|
+
* The backgroundColor property sets the background color of the icon button.
|
|
916
|
+
* @default { xs: "neutral-surface", active: "neutral-interactive", hover: "neutral-surfaceHighlight" }
|
|
917
|
+
*/
|
|
918
|
+
backgroundColor?: IconButtonBackgroundColorProperties | IconButtonConditions<IconButtonBackgroundColorProperties>;
|
|
919
|
+
}
|
|
920
|
+
declare const propertiesText: {
|
|
921
|
+
color: {
|
|
922
|
+
currentColor: string;
|
|
923
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
|
|
924
|
+
* The color property is used to set the color of the text.
|
|
925
|
+
* @default neutral-textLow
|
|
926
|
+
*/
|
|
927
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
928
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
929
|
+
"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
930
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
931
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
932
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
933
|
+
"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
934
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
935
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
936
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
937
|
+
"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
|
|
938
|
+
* The textDecoration shorthand property sets the appearance of decorative lines on text.
|
|
939
|
+
*/
|
|
940
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
941
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
942
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
943
|
+
"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
944
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
945
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
946
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
947
|
+
"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
948
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
949
|
+
"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
950
|
+
};
|
|
951
|
+
textAlign: TextAlign[];
|
|
952
|
+
lineHeight: {
|
|
953
|
+
readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
954
|
+
readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
955
|
+
readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
956
|
+
};
|
|
957
|
+
fontWeight: {
|
|
958
|
+
regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
959
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
960
|
+
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
961
|
+
};
|
|
962
|
+
fontSize: {
|
|
963
|
+
caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
964
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
965
|
+
highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
966
|
+
};
|
|
967
|
+
wordBreak: WordBreak[];
|
|
968
|
+
textDecoration: TextDecoration[];
|
|
969
|
+
};
|
|
970
|
+
export type TextColorProperties = keyof typeof propertiesText.color;
|
|
971
|
+
export type TextFontSizeProperties = keyof typeof propertiesText.fontSize;
|
|
972
|
+
export type TextFontWeightProperties = keyof typeof propertiesText.fontWeight;
|
|
973
|
+
export type TextLineHeightProperties = keyof typeof propertiesText.lineHeight;
|
|
974
|
+
export type TextConditions<T> = Conditions<T>;
|
|
975
|
+
export interface TextSprinkle {
|
|
976
|
+
/**
|
|
977
|
+
* The fontSize property sets the size of the text.
|
|
978
|
+
* @default base
|
|
979
|
+
*/
|
|
980
|
+
fontSize?: TextFontSizeProperties | TextConditions<TextFontSizeProperties>;
|
|
981
|
+
/**
|
|
982
|
+
* The fontWeight property sets how thick or thin characters in text should be displayed.
|
|
983
|
+
* @default regular
|
|
984
|
+
*/
|
|
985
|
+
fontWeight?: TextFontWeightProperties | TextConditions<TextFontWeightProperties>;
|
|
986
|
+
/**
|
|
987
|
+
* The lineHeight property specifies the line height of the text.
|
|
988
|
+
* @default base
|
|
989
|
+
*/
|
|
990
|
+
lineHeight?: TextLineHeightProperties | TextConditions<TextLineHeightProperties>;
|
|
991
|
+
/**
|
|
992
|
+
* The textAlign property specifies the horizontal alignment of text.
|
|
993
|
+
* @default left
|
|
994
|
+
*/
|
|
995
|
+
textAlign?: TextAlign | TextConditions<TextAlign>;
|
|
996
|
+
/**
|
|
997
|
+
* The color property is used to set the color of the text.
|
|
998
|
+
* @default neutral-textLow
|
|
999
|
+
*/
|
|
1000
|
+
color?: TextColorProperties | TextConditions<TextColorProperties>;
|
|
1001
|
+
/**
|
|
1002
|
+
* The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
|
|
1003
|
+
*/
|
|
1004
|
+
lineClamp?: number | TextConditions<number>;
|
|
1005
|
+
/**
|
|
1006
|
+
* The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
|
|
1007
|
+
*/
|
|
1008
|
+
WebkitLineClamp?: number | TextConditions<number>;
|
|
1009
|
+
/**
|
|
1010
|
+
* The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
|
|
1011
|
+
*/
|
|
1012
|
+
wordBreak?: WordBreak | TextConditions<WordBreak>;
|
|
1013
|
+
/**
|
|
1014
|
+
* The textDecoration shorthand property sets the appearance of decorative lines on text.
|
|
1015
|
+
*/
|
|
1016
|
+
textDecoration?: TextDecoration | TextConditions<TextDecoration>;
|
|
1017
|
+
}
|
|
1018
|
+
declare const text: {
|
|
1019
|
+
sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
|
|
1020
|
+
{
|
|
1021
|
+
config: {
|
|
1022
|
+
color: {
|
|
1023
|
+
values: {
|
|
1024
|
+
currentColor: {
|
|
1025
|
+
default: string;
|
|
1026
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1027
|
+
};
|
|
1028
|
+
"primary-interactive": {
|
|
1029
|
+
default: string;
|
|
1030
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1031
|
+
};
|
|
1032
|
+
"primary-surface": {
|
|
1033
|
+
default: string;
|
|
1034
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1035
|
+
};
|
|
1036
|
+
"primary-textLow": {
|
|
1037
|
+
default: string;
|
|
1038
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1039
|
+
};
|
|
1040
|
+
"success-textLow": {
|
|
1041
|
+
default: string;
|
|
1042
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1043
|
+
};
|
|
1044
|
+
"success-surface": {
|
|
1045
|
+
default: string;
|
|
1046
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1047
|
+
};
|
|
1048
|
+
"warning-interactive": {
|
|
1049
|
+
default: string;
|
|
1050
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1051
|
+
};
|
|
1052
|
+
"warning-surface": {
|
|
1053
|
+
default: string;
|
|
1054
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1055
|
+
};
|
|
1056
|
+
"warning-textLow": {
|
|
1057
|
+
default: string;
|
|
1058
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1059
|
+
};
|
|
1060
|
+
"danger-interactive": {
|
|
1061
|
+
default: string;
|
|
1062
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1063
|
+
};
|
|
1064
|
+
"danger-surface": {
|
|
1065
|
+
default: string;
|
|
1066
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1067
|
+
};
|
|
1068
|
+
"danger-textLow": {
|
|
1069
|
+
default: string;
|
|
1070
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1071
|
+
};
|
|
1072
|
+
"neutral-background": {
|
|
1073
|
+
default: string;
|
|
1074
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1075
|
+
};
|
|
1076
|
+
"neutral-interactive": {
|
|
1077
|
+
default: string;
|
|
1078
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1079
|
+
};
|
|
1080
|
+
"neutral-surface": {
|
|
1081
|
+
default: string;
|
|
1082
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1083
|
+
};
|
|
1084
|
+
"neutral-textLow": {
|
|
1085
|
+
default: string;
|
|
1086
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1087
|
+
};
|
|
1088
|
+
"success-interactive": {
|
|
1089
|
+
default: string;
|
|
1090
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1091
|
+
};
|
|
1092
|
+
"primary-textHigh": {
|
|
1093
|
+
default: string;
|
|
1094
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1095
|
+
};
|
|
1096
|
+
"success-textHigh": {
|
|
1097
|
+
default: string;
|
|
1098
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1099
|
+
};
|
|
1100
|
+
"warning-textHigh": {
|
|
1101
|
+
default: string;
|
|
1102
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1103
|
+
};
|
|
1104
|
+
"danger-textHigh": {
|
|
1105
|
+
default: string;
|
|
1106
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1107
|
+
};
|
|
1108
|
+
"neutral-textDisabled": {
|
|
1109
|
+
default: string;
|
|
1110
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1111
|
+
};
|
|
1112
|
+
"neutral-textHigh": {
|
|
1113
|
+
default: string;
|
|
1114
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1115
|
+
};
|
|
1116
|
+
};
|
|
1117
|
+
staticScale: {
|
|
1118
|
+
currentColor: string;
|
|
1119
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1120
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1121
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1122
|
+
"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1123
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1124
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1125
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1126
|
+
"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1127
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1128
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1129
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1130
|
+
"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1131
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1132
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1133
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1134
|
+
"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1135
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1136
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1137
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1138
|
+
"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1139
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1140
|
+
"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1141
|
+
};
|
|
1142
|
+
name: "color";
|
|
1143
|
+
};
|
|
1144
|
+
textAlign: {
|
|
1145
|
+
values: {
|
|
1146
|
+
center: {
|
|
1147
|
+
default: string;
|
|
1148
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1149
|
+
};
|
|
1150
|
+
left: {
|
|
1151
|
+
default: string;
|
|
1152
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1153
|
+
};
|
|
1154
|
+
right: {
|
|
1155
|
+
default: string;
|
|
1156
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1157
|
+
};
|
|
1158
|
+
justify: {
|
|
1159
|
+
default: string;
|
|
1160
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1161
|
+
};
|
|
1162
|
+
};
|
|
1163
|
+
staticScale: TextAlign[];
|
|
1164
|
+
name: "textAlign";
|
|
1165
|
+
};
|
|
1166
|
+
lineHeight: {
|
|
1167
|
+
values: {
|
|
1168
|
+
caption: {
|
|
1169
|
+
default: string;
|
|
1170
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1171
|
+
};
|
|
1172
|
+
base: {
|
|
1173
|
+
default: string;
|
|
1174
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1175
|
+
};
|
|
1176
|
+
highlight: {
|
|
1177
|
+
default: string;
|
|
1178
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1179
|
+
};
|
|
1180
|
+
};
|
|
1181
|
+
staticScale: {
|
|
1182
|
+
readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1183
|
+
readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1184
|
+
readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1185
|
+
};
|
|
1186
|
+
name: "lineHeight";
|
|
1187
|
+
};
|
|
1188
|
+
fontWeight: {
|
|
1189
|
+
values: {
|
|
1190
|
+
regular: {
|
|
1191
|
+
default: string;
|
|
1192
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1193
|
+
};
|
|
1194
|
+
medium: {
|
|
1195
|
+
default: string;
|
|
1196
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1197
|
+
};
|
|
1198
|
+
bold: {
|
|
1199
|
+
default: string;
|
|
1200
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1201
|
+
};
|
|
1202
|
+
};
|
|
1203
|
+
staticScale: {
|
|
1204
|
+
regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1205
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1206
|
+
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1207
|
+
};
|
|
1208
|
+
name: "fontWeight";
|
|
1209
|
+
};
|
|
1210
|
+
fontSize: {
|
|
1211
|
+
values: {
|
|
1212
|
+
caption: {
|
|
1213
|
+
default: string;
|
|
1214
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1215
|
+
};
|
|
1216
|
+
base: {
|
|
1217
|
+
default: string;
|
|
1218
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1219
|
+
};
|
|
1220
|
+
highlight: {
|
|
1221
|
+
default: string;
|
|
1222
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1223
|
+
};
|
|
1224
|
+
};
|
|
1225
|
+
staticScale: {
|
|
1226
|
+
caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1227
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1228
|
+
highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1229
|
+
};
|
|
1230
|
+
name: "fontSize";
|
|
1231
|
+
};
|
|
1232
|
+
wordBreak: {
|
|
1233
|
+
values: {
|
|
1234
|
+
normal: {
|
|
1235
|
+
default: string;
|
|
1236
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1237
|
+
};
|
|
1238
|
+
"break-word": {
|
|
1239
|
+
default: string;
|
|
1240
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1241
|
+
};
|
|
1242
|
+
"break-all": {
|
|
1243
|
+
default: string;
|
|
1244
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1245
|
+
};
|
|
1246
|
+
"keep-all": {
|
|
1247
|
+
default: string;
|
|
1248
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1249
|
+
};
|
|
1250
|
+
};
|
|
1251
|
+
staticScale: WordBreak[];
|
|
1252
|
+
name: "wordBreak";
|
|
1253
|
+
};
|
|
1254
|
+
textDecoration: {
|
|
1255
|
+
values: {
|
|
1256
|
+
none: {
|
|
1257
|
+
default: string;
|
|
1258
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1259
|
+
};
|
|
1260
|
+
"line-through": {
|
|
1261
|
+
default: string;
|
|
1262
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1263
|
+
};
|
|
1264
|
+
underline: {
|
|
1265
|
+
default: string;
|
|
1266
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1267
|
+
};
|
|
1268
|
+
};
|
|
1269
|
+
staticScale: TextDecoration[];
|
|
1270
|
+
name: "textDecoration";
|
|
1271
|
+
};
|
|
1272
|
+
};
|
|
1273
|
+
} & {
|
|
1274
|
+
config: {
|
|
1275
|
+
lineClamp: {
|
|
1276
|
+
dynamic: {
|
|
1277
|
+
default: string;
|
|
1278
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1279
|
+
};
|
|
1280
|
+
dynamicScale: true;
|
|
1281
|
+
name: "lineClamp";
|
|
1282
|
+
vars: {
|
|
1283
|
+
default: string;
|
|
1284
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1285
|
+
};
|
|
1286
|
+
};
|
|
1287
|
+
WebkitLineClamp: {
|
|
1288
|
+
dynamic: {
|
|
1289
|
+
default: string;
|
|
1290
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1291
|
+
};
|
|
1292
|
+
dynamicScale: boolean;
|
|
1293
|
+
name: "WebkitLineClamp";
|
|
1294
|
+
vars: {
|
|
1295
|
+
default: string;
|
|
1296
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1297
|
+
};
|
|
1298
|
+
};
|
|
1299
|
+
};
|
|
1300
|
+
} & {
|
|
1301
|
+
config: {
|
|
1302
|
+
[x: string]: {
|
|
1303
|
+
mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "wordBreak" | "lineClamp" | "textDecoration" | "WebkitLineClamp")[];
|
|
1304
|
+
};
|
|
1305
|
+
};
|
|
1306
|
+
}
|
|
1307
|
+
]>;
|
|
1308
|
+
properties: {
|
|
1309
|
+
color: {
|
|
1310
|
+
currentColor: string;
|
|
1311
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1312
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1313
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1314
|
+
"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1315
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1316
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1317
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1318
|
+
"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1319
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1320
|
+
"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1321
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1322
|
+
"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1323
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1324
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1325
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1326
|
+
"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1327
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1328
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1329
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1330
|
+
"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1331
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1332
|
+
"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1333
|
+
};
|
|
1334
|
+
textAlign: TextAlign[];
|
|
1335
|
+
lineHeight: {
|
|
1336
|
+
readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1337
|
+
readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1338
|
+
readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1339
|
+
};
|
|
1340
|
+
fontWeight: {
|
|
1341
|
+
regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1342
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1343
|
+
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1344
|
+
};
|
|
1345
|
+
fontSize: {
|
|
1346
|
+
caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1347
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1348
|
+
highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1349
|
+
};
|
|
1350
|
+
wordBreak: WordBreak[];
|
|
1351
|
+
textDecoration: TextDecoration[];
|
|
1352
|
+
};
|
|
1353
|
+
classnames: {
|
|
1354
|
+
base: string;
|
|
1355
|
+
trim: string;
|
|
1356
|
+
};
|
|
1357
|
+
};
|
|
1358
|
+
declare const propertiesTitle: {
|
|
1359
|
+
color: {
|
|
1360
|
+
"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1361
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1362
|
+
"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1363
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1364
|
+
"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1365
|
+
"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1366
|
+
"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1367
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1368
|
+
"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1369
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1370
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1371
|
+
};
|
|
1372
|
+
textAlign: TextAlign[];
|
|
1373
|
+
fontSize: {
|
|
1374
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1375
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1376
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1377
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1378
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1379
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1380
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1381
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1382
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1383
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1384
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1385
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1386
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1387
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1388
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1389
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1390
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1391
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1392
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1393
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1394
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1395
|
+
h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1396
|
+
h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1397
|
+
h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1398
|
+
h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1399
|
+
h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1400
|
+
h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1401
|
+
};
|
|
1402
|
+
fontWeight: {
|
|
1403
|
+
regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1404
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1405
|
+
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1406
|
+
};
|
|
1407
|
+
lineHeight: {
|
|
1408
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1409
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1410
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1411
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1412
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1413
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1414
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1415
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1416
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1417
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1418
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1419
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1420
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1421
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1422
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1423
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1424
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1425
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1426
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1427
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1428
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1429
|
+
h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1430
|
+
h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1431
|
+
h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1432
|
+
h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1433
|
+
h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1434
|
+
h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1435
|
+
};
|
|
1436
|
+
};
|
|
1437
|
+
export type TitleColorProperties = keyof typeof propertiesTitle.color;
|
|
1438
|
+
export type TitleFontSizeProperties = keyof typeof propertiesTitle.fontSize;
|
|
1439
|
+
export type TitleFontWeightProperties = keyof typeof propertiesTitle.fontWeight;
|
|
1440
|
+
export type TitleLineHeightProperties = keyof typeof propertiesTitle.lineHeight;
|
|
1441
|
+
export type TitleConditions<T> = Conditions<T>;
|
|
1442
|
+
export interface TitleSprinkle {
|
|
1443
|
+
/**
|
|
1444
|
+
* The fontSize property sets the size of the title.
|
|
1445
|
+
* @default base
|
|
1446
|
+
*/
|
|
1447
|
+
fontSize?: TitleFontSizeProperties | TitleConditions<TitleFontSizeProperties>;
|
|
1448
|
+
/**
|
|
1449
|
+
* The fontWeight property sets how thick or thin characters in title should be displayed.
|
|
1450
|
+
* @default regular
|
|
1451
|
+
*/
|
|
1452
|
+
fontWeight?: TitleFontWeightProperties | TitleConditions<TitleFontWeightProperties>;
|
|
1453
|
+
/**
|
|
1454
|
+
* The lineHeight property specifies the line height of the title.
|
|
1455
|
+
* @default base
|
|
1456
|
+
*/
|
|
1457
|
+
lineHeight?: TitleLineHeightProperties | TitleConditions<TitleLineHeightProperties>;
|
|
1458
|
+
/**
|
|
1459
|
+
* The textAlign property specifies the horizontal alignment of title.
|
|
1460
|
+
* @default left
|
|
1461
|
+
*/
|
|
1462
|
+
textAlign?: TextAlign | TitleConditions<TextAlign>;
|
|
1463
|
+
/**
|
|
1464
|
+
* The color property is used to set the color of the title.
|
|
1465
|
+
* @default neutral-textLow
|
|
1466
|
+
*/
|
|
1467
|
+
color?: TitleColorProperties | TitleConditions<TitleColorProperties>;
|
|
1468
|
+
}
|
|
1469
|
+
declare const multiSelect: {
|
|
1470
|
+
sprinkle: ((props: {
|
|
1471
|
+
zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | {
|
|
1472
|
+
xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
|
|
1473
|
+
md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
|
|
1474
|
+
lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
|
|
1475
|
+
xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
|
|
1476
|
+
} | undefined;
|
|
1477
|
+
}) => string) & {
|
|
1478
|
+
properties: Set<"zIndex">;
|
|
1479
|
+
};
|
|
1480
|
+
properties: {
|
|
1481
|
+
zIndex: {
|
|
1482
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1483
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1484
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1485
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1486
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1487
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1488
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1489
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1490
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1491
|
+
};
|
|
1492
|
+
};
|
|
1493
|
+
classnames: {
|
|
1494
|
+
appearance: Record<"success" | "warning" | "danger" | "neutral", string>;
|
|
1495
|
+
container: string;
|
|
1496
|
+
container__icon: string;
|
|
1497
|
+
container__button: string;
|
|
1498
|
+
};
|
|
1499
|
+
};
|
|
1500
|
+
declare const propertiesPopover: {
|
|
1501
|
+
backgroundColor: {
|
|
1502
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1503
|
+
"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1504
|
+
"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1505
|
+
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1506
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1507
|
+
"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1508
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1509
|
+
};
|
|
1510
|
+
color: {
|
|
1511
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1512
|
+
"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1513
|
+
"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1514
|
+
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1515
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1516
|
+
"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1517
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1518
|
+
};
|
|
1519
|
+
padding: {
|
|
1520
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1521
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1522
|
+
none: string;
|
|
1523
|
+
};
|
|
1524
|
+
zIndex: {
|
|
1525
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1526
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1527
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1528
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1529
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1530
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1531
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1532
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1533
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1534
|
+
};
|
|
1535
|
+
overflow: Overflow[];
|
|
1536
|
+
};
|
|
1537
|
+
export type PopoverColorProperties = keyof typeof propertiesPopover.color;
|
|
1538
|
+
export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
|
|
1539
|
+
export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
|
|
1540
|
+
export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
|
|
1541
|
+
export interface PopoverSprinkle {
|
|
1542
|
+
/**
|
|
1543
|
+
* The width property specifies the width of a popover's content area.
|
|
1544
|
+
* @default fit-content
|
|
1545
|
+
*/
|
|
1546
|
+
width?: string | Conditions<string>;
|
|
1547
|
+
/**
|
|
1548
|
+
* The maxWidth property specifies the maximum width of a popover's content area.
|
|
1549
|
+
*/
|
|
1550
|
+
maxWidth?: string | Conditions<string>;
|
|
1551
|
+
/**
|
|
1552
|
+
* The height property specifies the height of a popover's content area.
|
|
1553
|
+
*/
|
|
1554
|
+
height?: string | Conditions<string>;
|
|
1555
|
+
/**
|
|
1556
|
+
* The zIndex property specifies the stack order of the popover.
|
|
1557
|
+
*/
|
|
1558
|
+
zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
|
|
1559
|
+
/**
|
|
1560
|
+
* The backgroundColor property sets the background color of the popover.
|
|
1561
|
+
* @default neutral-background
|
|
1562
|
+
* @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
|
|
1563
|
+
*/
|
|
1564
|
+
backgroundColor?: PopoverBackgroundColorProperties | Conditions<PopoverBackgroundColorProperties>;
|
|
1565
|
+
/**
|
|
1566
|
+
* The color property is used to set the color of the popover.
|
|
1567
|
+
* @default neutral-background
|
|
1568
|
+
*/
|
|
1569
|
+
color?: PopoverColorProperties | Conditions<PopoverColorProperties>;
|
|
1570
|
+
/**
|
|
1571
|
+
* The padding properties are used to generate space around an popover's content area.
|
|
1572
|
+
* @default base
|
|
1573
|
+
*/
|
|
1574
|
+
padding?: PopoverPaddingProperties | Conditions<PopoverPaddingProperties>;
|
|
1575
|
+
/**
|
|
1576
|
+
* The overflow shorthand property sets the desired behavior for an popover's content overflow.
|
|
1577
|
+
*/
|
|
1578
|
+
overflow?: Overflow | Conditions<Overflow>;
|
|
1579
|
+
}
|
|
1580
|
+
declare const spinner: {
|
|
1581
|
+
sprinkle: ((props: {
|
|
1582
|
+
color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | undefined;
|
|
1583
|
+
}) => string) & {
|
|
1584
|
+
properties: Set<"color">;
|
|
1585
|
+
};
|
|
1586
|
+
properties: {
|
|
1587
|
+
color: {
|
|
1588
|
+
currentColor: string;
|
|
1589
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1590
|
+
"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1591
|
+
"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1592
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1593
|
+
"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1594
|
+
"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1595
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1596
|
+
"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1597
|
+
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1598
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1599
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1600
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1601
|
+
"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1602
|
+
};
|
|
1603
|
+
};
|
|
1604
|
+
classnames: {
|
|
1605
|
+
base: string;
|
|
1606
|
+
};
|
|
1607
|
+
};
|
|
1608
|
+
declare const link: {
|
|
1609
|
+
sprinkle: ((props: {
|
|
1610
|
+
textDecoration?: TextDecoration | undefined;
|
|
1611
|
+
fontSize?: "caption" | "base" | "highlight" | undefined;
|
|
1612
|
+
lineHeight?: "caption" | "base" | "highlight" | undefined;
|
|
1613
|
+
}) => string) & {
|
|
1614
|
+
properties: Set<"fontSize" | "lineHeight" | "textDecoration">;
|
|
1615
|
+
};
|
|
1616
|
+
properties: {
|
|
1617
|
+
textDecoration: TextDecoration[];
|
|
1618
|
+
fontSize: {
|
|
1619
|
+
caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1620
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1621
|
+
highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1622
|
+
};
|
|
1623
|
+
lineHeight: {
|
|
1624
|
+
readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1625
|
+
readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1626
|
+
readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1627
|
+
};
|
|
1628
|
+
};
|
|
1629
|
+
classnames: {
|
|
1630
|
+
base: string;
|
|
1631
|
+
appearance: Record<"primary" | "danger" | "neutral" | "neutral-background", string>;
|
|
1632
|
+
};
|
|
1633
|
+
};
|
|
1634
|
+
export interface TooltipSprinkle {
|
|
1635
|
+
/**
|
|
1636
|
+
* The maxWidth property specifies the maximum width of a popover's content area.
|
|
1637
|
+
*/
|
|
1638
|
+
maxWidth?: string | Conditions<string>;
|
|
1639
|
+
}
|
|
1640
|
+
declare const thumbnail: {
|
|
1641
|
+
sprinkle: ((props: {
|
|
1642
|
+
aspectRatio?: AspectRatio | undefined;
|
|
1643
|
+
}) => string) & {
|
|
1644
|
+
properties: Set<"aspectRatio">;
|
|
1645
|
+
};
|
|
1646
|
+
properties: {
|
|
1647
|
+
aspectRatio: AspectRatio[];
|
|
1648
|
+
};
|
|
1649
|
+
classnames: {
|
|
1650
|
+
container: string;
|
|
1651
|
+
container__image: string;
|
|
1652
|
+
container__placeholder: string;
|
|
1653
|
+
skeleton: string;
|
|
1654
|
+
width: string;
|
|
1655
|
+
};
|
|
1656
|
+
};
|
|
1657
|
+
declare const accordion: {
|
|
1658
|
+
sprinkle: ((props: {
|
|
1659
|
+
borderTop?: "base" | "none" | undefined;
|
|
1660
|
+
borderBottom?: "base" | "none" | undefined;
|
|
1661
|
+
padding?: "base" | "none" | undefined;
|
|
1662
|
+
}) => string) & {
|
|
1663
|
+
properties: Set<"borderBottom" | "borderTop" | "padding">;
|
|
1664
|
+
};
|
|
1665
|
+
properties: {
|
|
1666
|
+
borderTop: {
|
|
1667
|
+
none: string;
|
|
1668
|
+
base: string;
|
|
1669
|
+
};
|
|
1670
|
+
borderBottom: {
|
|
1671
|
+
none: string;
|
|
1672
|
+
base: string;
|
|
1673
|
+
};
|
|
1674
|
+
padding: {
|
|
1675
|
+
none: string;
|
|
1676
|
+
base: string;
|
|
1677
|
+
};
|
|
1678
|
+
};
|
|
1679
|
+
classnames: {
|
|
1680
|
+
header: string;
|
|
1681
|
+
header__content: string;
|
|
1682
|
+
header__description: string;
|
|
1683
|
+
header__title: string;
|
|
1684
|
+
header_active: string;
|
|
1685
|
+
body: string;
|
|
1686
|
+
};
|
|
1687
|
+
};
|
|
1688
|
+
declare const card: {
|
|
1689
|
+
classnames: {
|
|
1690
|
+
container: string;
|
|
1691
|
+
container__footer: string;
|
|
1692
|
+
};
|
|
1693
|
+
subComponents: {
|
|
1694
|
+
header: {
|
|
1695
|
+
sprinkle: ((props: {
|
|
1696
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1697
|
+
}) => string) & {
|
|
1698
|
+
properties: Set<"padding">;
|
|
1699
|
+
};
|
|
1700
|
+
properties: {
|
|
1701
|
+
padding: {
|
|
1702
|
+
base: string;
|
|
1703
|
+
small: string;
|
|
1704
|
+
none: string;
|
|
1705
|
+
};
|
|
1706
|
+
};
|
|
1707
|
+
};
|
|
1708
|
+
body: {
|
|
1709
|
+
sprinkle: ((props: {
|
|
1710
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1711
|
+
}) => string) & {
|
|
1712
|
+
properties: Set<"padding">;
|
|
1713
|
+
};
|
|
1714
|
+
properties: {
|
|
1715
|
+
padding: {
|
|
1716
|
+
base: string;
|
|
1717
|
+
small: string;
|
|
1718
|
+
none: string;
|
|
1719
|
+
};
|
|
1720
|
+
};
|
|
1721
|
+
};
|
|
1722
|
+
footer: {
|
|
1723
|
+
sprinkle: ((props: {
|
|
1724
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1725
|
+
}) => string) & {
|
|
1726
|
+
properties: Set<"padding">;
|
|
1727
|
+
};
|
|
1728
|
+
properties: {
|
|
1729
|
+
padding: {
|
|
1730
|
+
base: string;
|
|
1731
|
+
small: string;
|
|
1732
|
+
none: string;
|
|
1733
|
+
};
|
|
1734
|
+
};
|
|
1735
|
+
};
|
|
1736
|
+
};
|
|
1737
|
+
sprinkle: ((props: {
|
|
1738
|
+
backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
|
|
1739
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1740
|
+
}) => string) & {
|
|
1741
|
+
properties: Set<"backgroundColor" | "padding">;
|
|
1742
|
+
};
|
|
1743
|
+
properties: {
|
|
1744
|
+
backgroundColor: {
|
|
1745
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1746
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1747
|
+
"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1748
|
+
"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1749
|
+
"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1750
|
+
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1751
|
+
"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1752
|
+
"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1753
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1754
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1755
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1756
|
+
};
|
|
1757
|
+
padding: {
|
|
1758
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1759
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1760
|
+
none: string;
|
|
1761
|
+
};
|
|
1762
|
+
};
|
|
1763
|
+
};
|
|
1764
|
+
declare const propertiesModal: {
|
|
1765
|
+
padding: {
|
|
1766
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1767
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1768
|
+
none: string;
|
|
1769
|
+
};
|
|
1770
|
+
};
|
|
1771
|
+
export type PaddingProperties = keyof typeof propertiesModal.padding;
|
|
1772
|
+
export interface ModalSprinkle {
|
|
1773
|
+
/**
|
|
1774
|
+
* The maxWidth property specifies the maxWidth of a modal's content area. The width of the modal will be defined by the width of the content in this prop.
|
|
1775
|
+
* @default { xs: "100%", md: "500px" }
|
|
1776
|
+
*/
|
|
1777
|
+
maxWidth?: string | Conditions<string>;
|
|
1778
|
+
/**
|
|
1779
|
+
* The padding properties are used to generate space around an modal's content area.
|
|
1780
|
+
* @default base
|
|
1781
|
+
*/
|
|
1782
|
+
padding?: PaddingProperties | Conditions<PaddingProperties>;
|
|
1783
|
+
}
|
|
1784
|
+
declare const modal: {
|
|
1785
|
+
classnames: {
|
|
1786
|
+
overlay: string;
|
|
1787
|
+
overlayScoped: string;
|
|
1788
|
+
container: string;
|
|
1789
|
+
container__close: string;
|
|
1790
|
+
container__footer: string;
|
|
1791
|
+
};
|
|
1792
|
+
subComponents: {
|
|
1793
|
+
header: {
|
|
1794
|
+
sprinkle: ((props: {
|
|
1795
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1796
|
+
}) => string) & {
|
|
1797
|
+
properties: Set<"padding">;
|
|
1798
|
+
};
|
|
1799
|
+
properties: {
|
|
1800
|
+
padding: {
|
|
1801
|
+
base: string;
|
|
1802
|
+
small: string;
|
|
1803
|
+
none: string;
|
|
1804
|
+
};
|
|
1805
|
+
};
|
|
1806
|
+
};
|
|
1807
|
+
body: {
|
|
1808
|
+
sprinkle: ((props: {
|
|
1809
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1810
|
+
}) => string) & {
|
|
1811
|
+
properties: Set<"padding">;
|
|
1812
|
+
};
|
|
1813
|
+
properties: {
|
|
1814
|
+
padding: {
|
|
1815
|
+
base: string;
|
|
1816
|
+
small: string;
|
|
1817
|
+
none: string;
|
|
1818
|
+
};
|
|
1819
|
+
};
|
|
1820
|
+
};
|
|
1821
|
+
footer: {
|
|
1822
|
+
sprinkle: ((props: {
|
|
1823
|
+
padding?: "base" | "small" | "none" | undefined;
|
|
1824
|
+
}) => string) & {
|
|
1825
|
+
properties: Set<"padding">;
|
|
1826
|
+
};
|
|
1827
|
+
properties: {
|
|
1828
|
+
padding: {
|
|
1829
|
+
base: string;
|
|
1830
|
+
small: string;
|
|
1831
|
+
none: string;
|
|
1832
|
+
};
|
|
1833
|
+
};
|
|
1834
|
+
};
|
|
1835
|
+
};
|
|
1836
|
+
sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
|
|
1837
|
+
{
|
|
1838
|
+
config: {
|
|
1839
|
+
maxWidth: {
|
|
1840
|
+
dynamic: {
|
|
1841
|
+
default: string;
|
|
1842
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1843
|
+
};
|
|
1844
|
+
dynamicScale: true;
|
|
1845
|
+
name: "maxWidth";
|
|
1846
|
+
vars: {
|
|
1847
|
+
default: string;
|
|
1848
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1849
|
+
};
|
|
1850
|
+
};
|
|
1851
|
+
padding: {
|
|
1852
|
+
dynamic: {
|
|
1853
|
+
default: string;
|
|
1854
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1855
|
+
};
|
|
1856
|
+
dynamicScale: {
|
|
1857
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1858
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1859
|
+
none: string;
|
|
1860
|
+
};
|
|
1861
|
+
name: "padding";
|
|
1862
|
+
vars: {
|
|
1863
|
+
default: string;
|
|
1864
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1865
|
+
};
|
|
1866
|
+
};
|
|
1867
|
+
};
|
|
1868
|
+
} & {
|
|
1869
|
+
config: {
|
|
1870
|
+
[x: string]: {
|
|
1871
|
+
mappings: ("maxWidth" | "padding")[];
|
|
1872
|
+
};
|
|
1873
|
+
};
|
|
1874
|
+
}
|
|
1875
|
+
]>;
|
|
1876
|
+
properties: {
|
|
1877
|
+
padding: {
|
|
1878
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1879
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1880
|
+
none: string;
|
|
1881
|
+
};
|
|
1882
|
+
};
|
|
1883
|
+
};
|
|
1884
|
+
declare const sidebarSprinkle: {
|
|
1885
|
+
sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
|
|
1886
|
+
{
|
|
1887
|
+
config: {
|
|
1888
|
+
zIndex: {
|
|
1889
|
+
values: {
|
|
1890
|
+
100: {
|
|
1891
|
+
default: string;
|
|
1892
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1893
|
+
};
|
|
1894
|
+
200: {
|
|
1895
|
+
default: string;
|
|
1896
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1897
|
+
};
|
|
1898
|
+
300: {
|
|
1899
|
+
default: string;
|
|
1900
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1901
|
+
};
|
|
1902
|
+
400: {
|
|
1903
|
+
default: string;
|
|
1904
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1905
|
+
};
|
|
1906
|
+
500: {
|
|
1907
|
+
default: string;
|
|
1908
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1909
|
+
};
|
|
1910
|
+
600: {
|
|
1911
|
+
default: string;
|
|
1912
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1913
|
+
};
|
|
1914
|
+
700: {
|
|
1915
|
+
default: string;
|
|
1916
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1917
|
+
};
|
|
1918
|
+
800: {
|
|
1919
|
+
default: string;
|
|
1920
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1921
|
+
};
|
|
1922
|
+
900: {
|
|
1923
|
+
default: string;
|
|
1924
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1925
|
+
};
|
|
1926
|
+
};
|
|
1927
|
+
staticScale: {
|
|
1928
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1929
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1930
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1931
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1932
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1933
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1934
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1935
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1936
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1937
|
+
};
|
|
1938
|
+
name: "zIndex";
|
|
1939
|
+
};
|
|
1940
|
+
padding: {
|
|
1941
|
+
values: {
|
|
1942
|
+
base: {
|
|
1943
|
+
default: string;
|
|
1944
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1945
|
+
};
|
|
1946
|
+
small: {
|
|
1947
|
+
default: string;
|
|
1948
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1949
|
+
};
|
|
1950
|
+
none: {
|
|
1951
|
+
default: string;
|
|
1952
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1953
|
+
};
|
|
1954
|
+
};
|
|
1955
|
+
staticScale: {
|
|
1956
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1957
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1958
|
+
none: string;
|
|
1959
|
+
};
|
|
1960
|
+
name: "padding";
|
|
1961
|
+
};
|
|
1962
|
+
};
|
|
1963
|
+
} & {
|
|
1964
|
+
config: {
|
|
1965
|
+
maxWidth: {
|
|
1966
|
+
dynamic: {
|
|
1967
|
+
default: string;
|
|
1968
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1969
|
+
};
|
|
1970
|
+
dynamicScale: true;
|
|
1971
|
+
name: "maxWidth";
|
|
1972
|
+
vars: {
|
|
1973
|
+
default: string;
|
|
1974
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
1975
|
+
};
|
|
1976
|
+
};
|
|
1977
|
+
};
|
|
1978
|
+
} & {
|
|
1979
|
+
config: {
|
|
1980
|
+
[x: string]: {
|
|
1981
|
+
mappings: ("zIndex" | "maxWidth" | "padding")[];
|
|
1982
|
+
};
|
|
1983
|
+
};
|
|
1984
|
+
}
|
|
1985
|
+
]>;
|
|
1986
|
+
properties: {
|
|
1987
|
+
zIndex: {
|
|
1988
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1989
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1990
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1991
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1992
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1993
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1994
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1995
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1996
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1997
|
+
};
|
|
1998
|
+
padding: {
|
|
1999
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2000
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2001
|
+
none: string;
|
|
2002
|
+
};
|
|
2003
|
+
};
|
|
2004
|
+
};
|
|
2005
|
+
export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
|
|
2006
|
+
export type SidebarZIndexProperties = keyof typeof sidebarSprinkle.properties.zIndex;
|
|
2007
|
+
export interface SidebarSprinkle {
|
|
2008
|
+
/**
|
|
2009
|
+
* The maxWidth property specifies the maxWidth of a sidebar's content area.
|
|
2010
|
+
* @default 375px
|
|
2011
|
+
*/
|
|
2012
|
+
maxWidth?: string | Conditions<string>;
|
|
2013
|
+
/**
|
|
2014
|
+
* The zIndex property specifies the stack order of the sidebar.
|
|
2015
|
+
*/
|
|
2016
|
+
zIndex?: SidebarZIndexProperties | Conditions<SidebarZIndexProperties>;
|
|
2017
|
+
/**
|
|
2018
|
+
* The padding properties are used to generate space around an sidebar's content area.
|
|
2019
|
+
* @default base
|
|
2020
|
+
*/
|
|
2021
|
+
padding?: SidebarPaddingProperties | Conditions<SidebarPaddingProperties>;
|
|
2022
|
+
}
|
|
2023
|
+
declare const sidebar: {
|
|
2024
|
+
sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
|
|
2025
|
+
{
|
|
2026
|
+
config: {
|
|
2027
|
+
zIndex: {
|
|
2028
|
+
values: {
|
|
2029
|
+
100: {
|
|
2030
|
+
default: string;
|
|
2031
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2032
|
+
};
|
|
2033
|
+
200: {
|
|
2034
|
+
default: string;
|
|
2035
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2036
|
+
};
|
|
2037
|
+
300: {
|
|
2038
|
+
default: string;
|
|
2039
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2040
|
+
};
|
|
2041
|
+
400: {
|
|
2042
|
+
default: string;
|
|
2043
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2044
|
+
};
|
|
2045
|
+
500: {
|
|
2046
|
+
default: string;
|
|
2047
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2048
|
+
};
|
|
2049
|
+
600: {
|
|
2050
|
+
default: string;
|
|
2051
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2052
|
+
};
|
|
2053
|
+
700: {
|
|
2054
|
+
default: string;
|
|
2055
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2056
|
+
};
|
|
2057
|
+
800: {
|
|
2058
|
+
default: string;
|
|
2059
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2060
|
+
};
|
|
2061
|
+
900: {
|
|
2062
|
+
default: string;
|
|
2063
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2064
|
+
};
|
|
2065
|
+
};
|
|
2066
|
+
staticScale: {
|
|
2067
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2068
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2069
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2070
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2071
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2072
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2073
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2074
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2075
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2076
|
+
};
|
|
2077
|
+
name: "zIndex";
|
|
2078
|
+
};
|
|
2079
|
+
padding: {
|
|
2080
|
+
values: {
|
|
2081
|
+
base: {
|
|
2082
|
+
default: string;
|
|
2083
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2084
|
+
};
|
|
2085
|
+
small: {
|
|
2086
|
+
default: string;
|
|
2087
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2088
|
+
};
|
|
2089
|
+
none: {
|
|
2090
|
+
default: string;
|
|
2091
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2092
|
+
};
|
|
2093
|
+
};
|
|
2094
|
+
staticScale: {
|
|
2095
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2096
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2097
|
+
none: string;
|
|
2098
|
+
};
|
|
2099
|
+
name: "padding";
|
|
2100
|
+
};
|
|
2101
|
+
};
|
|
2102
|
+
} & {
|
|
2103
|
+
config: {
|
|
2104
|
+
maxWidth: {
|
|
2105
|
+
dynamic: {
|
|
2106
|
+
default: string;
|
|
2107
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2108
|
+
};
|
|
2109
|
+
dynamicScale: true;
|
|
2110
|
+
name: "maxWidth";
|
|
2111
|
+
vars: {
|
|
2112
|
+
default: string;
|
|
2113
|
+
conditions: Record<"xs" | "md" | "lg" | "xl", string>;
|
|
2114
|
+
};
|
|
2115
|
+
};
|
|
2116
|
+
};
|
|
2117
|
+
} & {
|
|
2118
|
+
config: {
|
|
2119
|
+
[x: string]: {
|
|
2120
|
+
mappings: ("zIndex" | "maxWidth" | "padding")[];
|
|
2121
|
+
};
|
|
2122
|
+
};
|
|
2123
|
+
}
|
|
2124
|
+
]>;
|
|
2125
|
+
properties: {
|
|
2126
|
+
zIndex: {
|
|
2127
|
+
"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2128
|
+
"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2129
|
+
"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2130
|
+
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2131
|
+
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2132
|
+
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2133
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2134
|
+
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2135
|
+
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2136
|
+
};
|
|
2137
|
+
padding: {
|
|
2138
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2139
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2140
|
+
none: string;
|
|
2141
|
+
};
|
|
2142
|
+
};
|
|
2143
|
+
classnames: {
|
|
2144
|
+
overlay: string;
|
|
2145
|
+
overlayScoped: string;
|
|
2146
|
+
container: string;
|
|
2147
|
+
containerScoped: string;
|
|
2148
|
+
container__header: string;
|
|
2149
|
+
container__body: string;
|
|
2150
|
+
container__footer: string;
|
|
2151
|
+
position: Record<"left" | "right", string>;
|
|
2152
|
+
isVisible: string;
|
|
2153
|
+
};
|
|
2154
|
+
};
|
|
2155
|
+
declare const propertiesTable: {
|
|
2156
|
+
backgroundColor: {
|
|
2157
|
+
transparent: string;
|
|
2158
|
+
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2159
|
+
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2160
|
+
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2161
|
+
"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2162
|
+
"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2163
|
+
};
|
|
2164
|
+
padding: {
|
|
2165
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2166
|
+
small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
2167
|
+
none: string;
|
|
2168
|
+
};
|
|
2169
|
+
};
|
|
2170
|
+
export type TablePaddingProperties = keyof typeof propertiesTable.padding;
|
|
2171
|
+
export type TableRowBackgroundColorProperties = keyof typeof propertiesTable.backgroundColor;
|
|
2172
|
+
export interface TableConditions<T> extends Conditions<T> {
|
|
2173
|
+
rest?: T;
|
|
2174
|
+
focus?: T;
|
|
2175
|
+
active?: T;
|
|
2176
|
+
hover?: T;
|
|
2177
|
+
}
|
|
2178
|
+
export interface TableSprinkle {
|
|
2179
|
+
/**
|
|
2180
|
+
* The width property specifies the width of a table's content area.
|
|
2181
|
+
*/
|
|
2182
|
+
width?: string | TableConditions<string>;
|
|
2183
|
+
/**
|
|
2184
|
+
* The maxWidth property specifies the maxWidth of a table's content area.
|
|
2185
|
+
*/
|
|
2186
|
+
maxWidth?: string | TableConditions<string>;
|
|
2187
|
+
/**
|
|
2188
|
+
* The minWidth property specifies the minWidth of a table's content area.
|
|
2189
|
+
*/
|
|
2190
|
+
minWidth?: string | TableConditions<string>;
|
|
2191
|
+
/**
|
|
2192
|
+
* The backgroundColor property sets the background color of the table.
|
|
2193
|
+
*/
|
|
2194
|
+
backgroundColor?: TableRowBackgroundColorProperties | TableConditions<TableRowBackgroundColorProperties>;
|
|
2195
|
+
/**
|
|
2196
|
+
* The padding properties are used to generate space around an table's content area.
|
|
2197
|
+
*/
|
|
2198
|
+
padding?: TablePaddingProperties | TableConditions<TablePaddingProperties>;
|
|
2199
|
+
}
|
|
2200
|
+
export interface BoxProperties extends BoxSprinkle {
|
|
2201
|
+
/**
|
|
2202
|
+
* Element to be rendered inside the Box component.
|
|
2203
|
+
* @TJS-type React.ReactNode
|
|
2204
|
+
*/
|
|
2205
|
+
children?: ReactNode;
|
|
2206
|
+
}
|
|
2207
|
+
export type BoxBaseProps = BoxProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
|
|
2208
|
+
export declare const Box: PolymorphicForwardRefComponent<"div", BoxBaseProps>;
|
|
2209
|
+
export type BoxProps = ComponentPropsWithRef<typeof Box>;
|
|
2210
|
+
export type ButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2211
|
+
export type ButtonSkeletonProps = ButtonSkeletonProperties;
|
|
2212
|
+
declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
|
|
2213
|
+
export interface ButtonComponents {
|
|
2214
|
+
Skeleton: typeof ButtonSkeleton;
|
|
2215
|
+
}
|
|
2216
|
+
export interface ButtonProperties {
|
|
2217
|
+
/**
|
|
2218
|
+
* The content of the button.
|
|
2219
|
+
* @TJS-type React.ReactNode
|
|
2220
|
+
*/
|
|
2221
|
+
children: ReactNode;
|
|
2222
|
+
/**
|
|
2223
|
+
* Change the visual style of the button.
|
|
2224
|
+
* @default neutral
|
|
2225
|
+
*/
|
|
2226
|
+
appearance?: "primary" | "danger" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
|
|
2227
|
+
/**
|
|
2228
|
+
* Disables the button, disallowing user interaction.
|
|
2229
|
+
* @default false
|
|
2230
|
+
*/
|
|
2231
|
+
disabled?: boolean;
|
|
2232
|
+
/**
|
|
2233
|
+
* Determines if the button should grow to fill the full width of its container.
|
|
2234
|
+
* @default false
|
|
2235
|
+
*/
|
|
2236
|
+
fullWidth?: boolean;
|
|
2237
|
+
}
|
|
2238
|
+
export type ButtonBaseProps = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
2239
|
+
export declare const Button: PolymorphicForwardRefComponent<"button" | "a", ButtonBaseProps> & ButtonComponents;
|
|
2240
|
+
export type ButtonProps = ComponentPropsWithRef<typeof Button>;
|
|
2241
|
+
export type CheckboxSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2242
|
+
export type CheckboxSkeletonProps = CheckboxSkeletonProperties;
|
|
2243
|
+
declare const CheckboxSkeleton: React.FC<CheckboxSkeletonProps>;
|
|
2244
|
+
export interface CheckboxComponents {
|
|
2245
|
+
Skeleton: typeof CheckboxSkeleton;
|
|
2246
|
+
}
|
|
2247
|
+
export interface CheckboxProperties {
|
|
2248
|
+
/**
|
|
2249
|
+
* The name of the input element.
|
|
2250
|
+
*/
|
|
2251
|
+
name: string;
|
|
2252
|
+
/**
|
|
2253
|
+
* Change the visual style of the checkbox.
|
|
2254
|
+
* @default neutral
|
|
2255
|
+
*/
|
|
2256
|
+
appearance?: "primary" | "danger";
|
|
2257
|
+
/**
|
|
2258
|
+
* Modifies true/false value of the native checkbox.
|
|
2259
|
+
*/
|
|
2260
|
+
checked?: boolean;
|
|
2261
|
+
/**
|
|
2262
|
+
* Modifies the native disabled state of the native checkbox.
|
|
2263
|
+
*/
|
|
2264
|
+
disabled?: boolean;
|
|
2265
|
+
/**
|
|
2266
|
+
* If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
|
|
2267
|
+
* @default false
|
|
2268
|
+
*/
|
|
2269
|
+
indeterminate?: boolean;
|
|
2270
|
+
/**
|
|
2271
|
+
* Text to be rendered inside the component.
|
|
2272
|
+
*/
|
|
2273
|
+
label?: string;
|
|
2274
|
+
}
|
|
2275
|
+
export type CheckboxProps = CheckboxProperties & InputHTMLAttributes<HTMLInputElement>;
|
|
2276
|
+
export declare const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
|
|
2277
|
+
export type ChipSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
|
|
2278
|
+
/**
|
|
2279
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2280
|
+
*/
|
|
2281
|
+
"data-testid"?: string;
|
|
2282
|
+
};
|
|
2283
|
+
export type ChipSkeletonProps = ChipSkeletonProperties;
|
|
2284
|
+
declare const ChipSkeleton: React.FC<ChipSkeletonProps>;
|
|
2285
|
+
export interface ChipComponents {
|
|
2286
|
+
Skeleton: typeof ChipSkeleton;
|
|
2287
|
+
}
|
|
2288
|
+
export interface ChipProperties {
|
|
2289
|
+
/**
|
|
2290
|
+
Text to be displayed on chip.
|
|
2291
|
+
*/
|
|
2292
|
+
text: string;
|
|
2293
|
+
/**
|
|
2294
|
+
* SVG icon to be displayed on chip.
|
|
2295
|
+
* @TJS-type React.ReactNode
|
|
2296
|
+
*/
|
|
2297
|
+
icon?: ReactNode;
|
|
2298
|
+
/**
|
|
2299
|
+
* Informs whether the close icon should be displayed.
|
|
2300
|
+
*/
|
|
2301
|
+
removable?: boolean;
|
|
2302
|
+
/**
|
|
2303
|
+
* Highlights the chip to indicate its value was generated by AI.
|
|
2304
|
+
* Applies AI gradient border and an AI outline.
|
|
2305
|
+
*/
|
|
2306
|
+
aiGenerated?: boolean;
|
|
2307
|
+
}
|
|
2308
|
+
export type ChipProps = ChipProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
|
|
2309
|
+
export declare const Chip: React.FC<ChipProps> & ChipComponents;
|
|
2310
|
+
export type FileUploaderSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & Partial<Pick<FileUploaderProps, "aspectRatio">> & {
|
|
2311
|
+
/**
|
|
2312
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2313
|
+
*/
|
|
2314
|
+
"data-testid"?: string;
|
|
2315
|
+
};
|
|
2316
|
+
export type FileUploaderSkeletonProps = FileUploaderSkeletonProperties;
|
|
2317
|
+
declare const FileUploaderSkeleton: React.FC<FileUploaderSkeletonProps>;
|
|
2318
|
+
export interface FileUploaderComponents {
|
|
2319
|
+
Skeleton: typeof FileUploaderSkeleton;
|
|
2320
|
+
}
|
|
2321
|
+
export interface FileUploaderProperties {
|
|
2322
|
+
/**
|
|
2323
|
+
* Provide additional context to the action.
|
|
2324
|
+
*/
|
|
2325
|
+
placeholder?: string;
|
|
2326
|
+
/**
|
|
2327
|
+
* Accept file types
|
|
2328
|
+
* @default image/jpeg,image/gif,image/png
|
|
2329
|
+
*/
|
|
2330
|
+
accept?: string;
|
|
2331
|
+
/**
|
|
2332
|
+
* Height value of the file uploader. Defaults to 100%.
|
|
2333
|
+
* @default 100%
|
|
2334
|
+
*/
|
|
2335
|
+
height?: string;
|
|
2336
|
+
/**
|
|
2337
|
+
* Width value of the file uploader. Defaults to 100%.
|
|
2338
|
+
* @default 100%
|
|
2339
|
+
*/
|
|
2340
|
+
width?: string;
|
|
2341
|
+
/**
|
|
2342
|
+
* Permitted aspect ratios for the size of the file uploader.
|
|
2343
|
+
* @default 1/1
|
|
2344
|
+
*/
|
|
2345
|
+
aspectRatio?: typeof fileUploader.properties.aspectRatio[number];
|
|
2346
|
+
/**
|
|
2347
|
+
* Defines the position of the placeholder in relation to the icon.
|
|
2348
|
+
* @default column
|
|
2349
|
+
*/
|
|
2350
|
+
flexDirection?: typeof fileUploader.properties.flexDirection[number];
|
|
2351
|
+
}
|
|
2352
|
+
export type FileUploaderProps = FileUploaderProperties & InputHTMLAttributes<HTMLInputElement>;
|
|
2353
|
+
export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
|
|
2354
|
+
export type IconSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
|
|
2355
|
+
/**
|
|
2356
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2357
|
+
*/
|
|
2358
|
+
"data-testid"?: string;
|
|
2359
|
+
};
|
|
2360
|
+
export type IconSkeletonProps = IconSkeletonProperties;
|
|
2361
|
+
declare const IconSkeleton: React.FC<IconSkeletonProps>;
|
|
2362
|
+
export interface IconComponents {
|
|
2363
|
+
Skeleton: typeof IconSkeleton;
|
|
2364
|
+
}
|
|
2365
|
+
export interface IconProperties {
|
|
2366
|
+
/**
|
|
2367
|
+
* The SVG contents to display in the Icon.
|
|
2368
|
+
* @TJS-type React.ReactNode
|
|
2369
|
+
*/
|
|
2370
|
+
source: ReactNode;
|
|
2371
|
+
/**
|
|
2372
|
+
* Set the color for the SVG fill.
|
|
2373
|
+
* Use "ai-generative" to apply the Nimbus AI generative gradient.
|
|
2374
|
+
* @default neutral-textLow
|
|
2375
|
+
*/
|
|
2376
|
+
color?: keyof typeof icon.properties.color | "ai-generative";
|
|
2377
|
+
/**
|
|
2378
|
+
* The cursor property specifies the mouse cursor to be displayed when pointing over an element.
|
|
2379
|
+
* @default inherit
|
|
2380
|
+
*/
|
|
2381
|
+
cursor?: (typeof icon.properties.cursor)[number];
|
|
2382
|
+
}
|
|
2383
|
+
export type IconProps = IconProperties & HTMLAttributes<HTMLDivElement>;
|
|
2384
|
+
export declare const Icon: React.FC<IconProps> & IconComponents;
|
|
2385
|
+
/**
|
|
2386
|
+
* Checks if a color value is valid (exists and is not "none" or "transparent")
|
|
2387
|
+
* @param color - The color value to check
|
|
2388
|
+
* @returns True if color is valid, false otherwise
|
|
2389
|
+
*/
|
|
2390
|
+
export declare const isValidColorValue: (color: string | undefined) => boolean;
|
|
2391
|
+
/**
|
|
2392
|
+
* Checks if a color value can use gradient (valid and not already a URL reference)
|
|
2393
|
+
* @param color - The color value to check
|
|
2394
|
+
* @returns True if color can use gradient, false otherwise
|
|
2395
|
+
*/
|
|
2396
|
+
export declare const canUseGradient: (color: string) => boolean;
|
|
2397
|
+
/**
|
|
2398
|
+
* Checks if a color value is a gradient
|
|
2399
|
+
* @param color - The color value to check
|
|
2400
|
+
* @returns True if color is a known gradient value, false otherwise
|
|
2401
|
+
*/
|
|
2402
|
+
export declare const isGradient: (color: string) => boolean;
|
|
2403
|
+
/**
|
|
2404
|
+
* Collection of known gradient color values
|
|
2405
|
+
*/
|
|
2406
|
+
export declare const GRADIENT_COLORS: Set<string>;
|
|
2407
|
+
export type IconButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height">> & {
|
|
2408
|
+
/**
|
|
2409
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2410
|
+
*/
|
|
2411
|
+
"data-testid"?: string;
|
|
2412
|
+
};
|
|
2413
|
+
export type IconButtonSkeletonProps = IconButtonSkeletonProperties;
|
|
2414
|
+
declare const IconButtonSkeleton: React.FC<IconButtonSkeletonProps>;
|
|
2415
|
+
export interface IconButtonComponents {
|
|
2416
|
+
Skeleton: typeof IconButtonSkeleton;
|
|
2417
|
+
}
|
|
2418
|
+
export interface IconButtonProperties extends IconButtonSprinkle {
|
|
2419
|
+
/**
|
|
2420
|
+
* Type of html tag to create for the Icon Button component.
|
|
2421
|
+
* @default button
|
|
2422
|
+
*/
|
|
2423
|
+
as?: "button" | "div";
|
|
2424
|
+
/**
|
|
2425
|
+
* The SVG contents to display in the Icon button.
|
|
2426
|
+
* @TJS-type React.ReactNode
|
|
2427
|
+
*/
|
|
2428
|
+
source: ReactNode;
|
|
2429
|
+
/**
|
|
2430
|
+
* Set the color for the inner Icon fill.
|
|
2431
|
+
* @default neutral-textHigh
|
|
2432
|
+
*/
|
|
2433
|
+
color?: IconProps["color"];
|
|
2434
|
+
/**
|
|
2435
|
+
* AI gradient background appearance for the button container.
|
|
2436
|
+
* When provided, container color/border sprinkles are ignored in favor of gradient styles.
|
|
2437
|
+
*/
|
|
2438
|
+
appearance?: "ai-generative";
|
|
2439
|
+
}
|
|
2440
|
+
export type IconButtonProps = IconButtonProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
|
|
2441
|
+
export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
|
|
2442
|
+
export type InputPasswordProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
|
|
2443
|
+
declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
|
|
2444
|
+
export type InputSearchProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
|
|
2445
|
+
declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
|
|
2446
|
+
export type InputSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2447
|
+
export type InputSkeletonProps = InputSkeletonProperties;
|
|
2448
|
+
declare const InputSkeleton: React.FC<InputSkeletonProps>;
|
|
2449
|
+
export interface InputComponents {
|
|
2450
|
+
Password: typeof InputPassword;
|
|
2451
|
+
Search: typeof InputSearch;
|
|
2452
|
+
Skeleton: typeof InputSkeleton;
|
|
2453
|
+
}
|
|
2454
|
+
export interface InputProperties {
|
|
2455
|
+
/**
|
|
2456
|
+
* Change the visual style of the input.
|
|
2457
|
+
* @default neutral
|
|
2458
|
+
*/
|
|
2459
|
+
appearance?: "neutral" | "success" | "warning" | "danger" | "ai-generative";
|
|
2460
|
+
/**
|
|
2461
|
+
* Highlights the field to indicate its value was generated by AI.
|
|
2462
|
+
* Applies AI gradient border, white background and an AI focus ring.
|
|
2463
|
+
*/
|
|
2464
|
+
aiGenerated?: boolean;
|
|
2465
|
+
/**
|
|
2466
|
+
* Disables the input, disallowing user interaction.
|
|
2467
|
+
*/
|
|
2468
|
+
disabled?: boolean;
|
|
2469
|
+
/**
|
|
2470
|
+
* Sent icon display position
|
|
2471
|
+
* @default start
|
|
2472
|
+
*/
|
|
2473
|
+
appendPosition?: "end" | "start";
|
|
2474
|
+
/**
|
|
2475
|
+
* SVG icon to be displayed on input.
|
|
2476
|
+
* @TJS-type React.ReactNode
|
|
2477
|
+
*/
|
|
2478
|
+
append?: ReactNode;
|
|
2479
|
+
/**
|
|
2480
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2481
|
+
*/
|
|
2482
|
+
"data-testid"?: string;
|
|
2483
|
+
}
|
|
2484
|
+
export type InputBaseProps = InputProperties & InputHTMLAttributes<HTMLInputElement>;
|
|
2485
|
+
export declare const Input: React.ForwardRefExoticComponent<InputProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>> & InputComponents;
|
|
2486
|
+
export type InputProps = ComponentPropsWithRef<typeof Input>;
|
|
2487
|
+
export type LabelSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
|
|
2488
|
+
/**
|
|
2489
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2490
|
+
*/
|
|
2491
|
+
"data-testid"?: string;
|
|
2492
|
+
};
|
|
2493
|
+
export type LabelSkeletonProps = LabelSkeletonProperties;
|
|
2494
|
+
declare const LabelSkeleton: React.FC<LabelSkeletonProps>;
|
|
2495
|
+
export interface LabelComponents {
|
|
2496
|
+
Skeleton: typeof LabelSkeleton;
|
|
2497
|
+
}
|
|
2498
|
+
export interface LabelProperties {
|
|
2499
|
+
/**
|
|
2500
|
+
* The content of the label.
|
|
2501
|
+
* @TJS-type React.ReactNode
|
|
2502
|
+
*/
|
|
2503
|
+
children: ReactNode;
|
|
2504
|
+
/**
|
|
2505
|
+
* The for attribute specifies which form element a label is bound to.
|
|
2506
|
+
*/
|
|
2507
|
+
htmlFor?: string;
|
|
2508
|
+
/**
|
|
2509
|
+
* If true the label will be visually hidden but maintain accessibility purpose
|
|
2510
|
+
* @default false
|
|
2511
|
+
*/
|
|
2512
|
+
hidden?: boolean;
|
|
2513
|
+
}
|
|
2514
|
+
export type LabelProps = LabelProperties & HTMLAttributes<HTMLElement>;
|
|
2515
|
+
export declare const Label: React.FC<LabelProps> & LabelComponents;
|
|
2516
|
+
export type LinkSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2517
|
+
export type LinkSkeletonProps = LinkSkeletonProperties;
|
|
2518
|
+
declare const LinkSkeleton: React.FC<LinkSkeletonProps>;
|
|
2519
|
+
export interface LinkComponents {
|
|
2520
|
+
Skeleton: typeof LinkSkeleton;
|
|
2521
|
+
}
|
|
2522
|
+
export interface LinkProperties {
|
|
2523
|
+
/**
|
|
2524
|
+
* The content of the link.
|
|
2525
|
+
* @TJS-type React.ReactNode
|
|
2526
|
+
*/
|
|
2527
|
+
children: ReactNode;
|
|
2528
|
+
/**
|
|
2529
|
+
* Change the visual style of the link.
|
|
2530
|
+
* @default neutral
|
|
2531
|
+
*/
|
|
2532
|
+
appearance?: "primary" | "danger" | "neutral" | "neutral-background";
|
|
2533
|
+
/**
|
|
2534
|
+
* The textDecoration property specifies the decoration added to link.
|
|
2535
|
+
* @default neutral
|
|
2536
|
+
*/
|
|
2537
|
+
textDecoration?: typeof link.properties.textDecoration[number];
|
|
2538
|
+
/**
|
|
2539
|
+
* The fontSize property sets the size of the link.
|
|
2540
|
+
* @default base
|
|
2541
|
+
*/
|
|
2542
|
+
fontSize?: keyof typeof link.properties.fontSize;
|
|
2543
|
+
/**
|
|
2544
|
+
* The lineHeight property specifies the line height of the link
|
|
2545
|
+
* @default base
|
|
2546
|
+
*/
|
|
2547
|
+
lineHeight?: keyof typeof link.properties.lineHeight;
|
|
2548
|
+
}
|
|
2549
|
+
export type LinkBaseProps = LinkProperties & HTMLAttributes<HTMLElement>;
|
|
2550
|
+
export declare const Link: PolymorphicForwardRefComponent<"button" | "a", LinkBaseProps> & LinkComponents;
|
|
2551
|
+
export type LinkProps = ComponentPropsWithRef<typeof Link>;
|
|
2552
|
+
export type ListSkeletonItemProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
|
|
2553
|
+
/**
|
|
2554
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2555
|
+
*/
|
|
2556
|
+
"data-testid"?: string;
|
|
2557
|
+
};
|
|
2558
|
+
export type ListSkeletonItemProps = ListSkeletonItemProperties;
|
|
2559
|
+
declare const ListSkeletonItem: React.FC<ListSkeletonItemProps>;
|
|
2560
|
+
export interface ListSkeletonProperties {
|
|
2561
|
+
/**
|
|
2562
|
+
* The content of the list skeleton.
|
|
2563
|
+
* @TJS-type React.ReactNode
|
|
2564
|
+
*/
|
|
2565
|
+
children: ReactNode;
|
|
2566
|
+
/**
|
|
2567
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2568
|
+
*/
|
|
2569
|
+
"data-testid"?: string;
|
|
2570
|
+
}
|
|
2571
|
+
export type ListSkeletonProps = ListSkeletonProperties & HTMLAttributes<HTMLDivElement>;
|
|
2572
|
+
declare const ListSkeleton: React.FC<ListSkeletonProps>;
|
|
2573
|
+
export interface ListItemProperties {
|
|
2574
|
+
/**
|
|
2575
|
+
* The content of the list item.
|
|
2576
|
+
* @TJS-type React.ReactNode
|
|
2577
|
+
*/
|
|
2578
|
+
children: ReactNode;
|
|
2579
|
+
}
|
|
2580
|
+
export type ListItemProps = ListItemProperties & HTMLAttributes<HTMLLIElement>;
|
|
2581
|
+
declare const ListItem: React.FC<ListItemProps>;
|
|
2582
|
+
export interface ListComponents {
|
|
2583
|
+
Skeleton: typeof ListSkeleton;
|
|
2584
|
+
SkeletonItem: typeof ListSkeletonItem;
|
|
2585
|
+
Item: typeof ListItem;
|
|
2586
|
+
}
|
|
2587
|
+
export interface ListProperties {
|
|
2588
|
+
/**
|
|
2589
|
+
* The content of the list.
|
|
2590
|
+
* @TJS-type React.ReactNode
|
|
2591
|
+
*/
|
|
2592
|
+
children: ReactNode;
|
|
2593
|
+
/**
|
|
2594
|
+
* Determines the type of html list that will be rendered
|
|
2595
|
+
* @default ul
|
|
2596
|
+
*/
|
|
2597
|
+
as?: "ul" | "ol";
|
|
2598
|
+
}
|
|
2599
|
+
export type ListProps = ListProperties & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
|
|
2600
|
+
export declare const List: React.FC<ListProps> & ListComponents;
|
|
2601
|
+
export type MultiSelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2602
|
+
export type MultiSelectSkeletonProps = MultiSelectSkeletonProperties & HTMLAttributes<HTMLDivElement>;
|
|
2603
|
+
declare const MultiSelectSkeleton: React.FC<MultiSelectSkeletonProps>;
|
|
2604
|
+
export interface MultiSelectComponents {
|
|
2605
|
+
Skeleton: typeof MultiSelectSkeleton;
|
|
2606
|
+
}
|
|
2607
|
+
export interface MultiSelectOption {
|
|
2608
|
+
/**
|
|
2609
|
+
* Label for the option.
|
|
2610
|
+
*/
|
|
2611
|
+
label: string;
|
|
2612
|
+
/**
|
|
2613
|
+
* Value of the option
|
|
2614
|
+
*/
|
|
2615
|
+
value: string;
|
|
2616
|
+
}
|
|
2617
|
+
export interface MultiSelectProperties {
|
|
2618
|
+
/**
|
|
2619
|
+
* The name of the wrapper element or the select element when native.
|
|
2620
|
+
*/
|
|
2621
|
+
name: string;
|
|
2622
|
+
/**
|
|
2623
|
+
* The id of the wrapper element or the select element when native.
|
|
2624
|
+
*/
|
|
2625
|
+
id: string;
|
|
2626
|
+
/**
|
|
2627
|
+
* Change the visual style of the select.
|
|
2628
|
+
* @default neutral
|
|
2629
|
+
*/
|
|
2630
|
+
appearance?: "success" | "warning" | "danger" | "neutral";
|
|
2631
|
+
/**
|
|
2632
|
+
* Options of the MultiSelect
|
|
2633
|
+
*/
|
|
2634
|
+
options: MultiSelectOption[];
|
|
2635
|
+
/**
|
|
2636
|
+
* Options of the MultiSelect
|
|
2637
|
+
*/
|
|
2638
|
+
onChange?: (values: MultiSelectOption[]) => void;
|
|
2639
|
+
/**
|
|
2640
|
+
* Deafult of the MultiSelect
|
|
2641
|
+
*/
|
|
2642
|
+
value?: MultiSelectOption[];
|
|
2643
|
+
/**
|
|
2644
|
+
* ZIndex of the MultiSelect
|
|
2645
|
+
*/
|
|
2646
|
+
zIndex?: keyof typeof multiSelect.properties.zIndex;
|
|
2647
|
+
}
|
|
2648
|
+
export type MultiSelectBaseProps = MultiSelectProperties & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "value">;
|
|
2649
|
+
export declare const MultiSelect: React.FC<MultiSelectBaseProps> & MultiSelectComponents;
|
|
2650
|
+
export type MultiSelectProps = ComponentPropsWithRef<typeof MultiSelect>;
|
|
2651
|
+
export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end";
|
|
2652
|
+
export interface PopoverProperties extends PopoverSprinkle {
|
|
2653
|
+
/**
|
|
2654
|
+
* An HTML element, or a function that returns one. It's used to set the position of the popover.
|
|
2655
|
+
* @TJS-type React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode);
|
|
2656
|
+
*/
|
|
2657
|
+
children: ReactNode | ((data: {
|
|
2658
|
+
open: boolean;
|
|
2659
|
+
setVisibility: (visibility: boolean) => void;
|
|
2660
|
+
}) => ReactNode);
|
|
2661
|
+
/**
|
|
2662
|
+
* The content of the popover.
|
|
2663
|
+
* @TJS-type React.ReactNode
|
|
2664
|
+
*/
|
|
2665
|
+
content: ReactNode;
|
|
2666
|
+
/**
|
|
2667
|
+
* If true, the component is shown.
|
|
2668
|
+
*/
|
|
2669
|
+
visible?: boolean;
|
|
2670
|
+
/**
|
|
2671
|
+
* Function to control popover opening and closing.
|
|
2672
|
+
* @TJS-type (visible: boolean) => void;
|
|
2673
|
+
*/
|
|
2674
|
+
onVisibility?: (visible: boolean) => void;
|
|
2675
|
+
/**
|
|
2676
|
+
* Conditional for displaying the popover arrow.
|
|
2677
|
+
* @default true
|
|
2678
|
+
*/
|
|
2679
|
+
arrow?: boolean;
|
|
2680
|
+
/**
|
|
2681
|
+
* A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
|
|
2682
|
+
* @default false
|
|
2683
|
+
*/
|
|
2684
|
+
matchReferenceWidth?: boolean;
|
|
2685
|
+
/**
|
|
2686
|
+
* Position of the popover.
|
|
2687
|
+
* @default bottom
|
|
2688
|
+
*/
|
|
2689
|
+
position?: PopoverPlacement;
|
|
2690
|
+
/**
|
|
2691
|
+
* Adds hover event listeners that change the open state, like CSS :hover.
|
|
2692
|
+
* @default false
|
|
2693
|
+
*/
|
|
2694
|
+
enabledHover?: boolean;
|
|
2695
|
+
/**
|
|
2696
|
+
* Adds click event listeners that change the open state.
|
|
2697
|
+
* @default true
|
|
2698
|
+
*/
|
|
2699
|
+
enabledClick?: boolean;
|
|
2700
|
+
/**
|
|
2701
|
+
* Adds listeners that dismiss (close) the floating element.
|
|
2702
|
+
* @default true
|
|
2703
|
+
*/
|
|
2704
|
+
enabledDismiss?: boolean;
|
|
2705
|
+
/**
|
|
2706
|
+
* Offest displaces the floating element from its core placement along the specified axes.
|
|
2707
|
+
* @default 10
|
|
2708
|
+
*/
|
|
2709
|
+
offset?: number;
|
|
2710
|
+
/**
|
|
2711
|
+
* When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover.
|
|
2712
|
+
* @default false
|
|
2713
|
+
*/
|
|
2714
|
+
renderOverlay?: boolean;
|
|
2715
|
+
}
|
|
2716
|
+
export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children" | "content">;
|
|
2717
|
+
export declare const Popover: React.FC<PopoverProps>;
|
|
2718
|
+
export type RadioSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<RadioProps, "as">> & {
|
|
2719
|
+
/**
|
|
2720
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2721
|
+
*/
|
|
2722
|
+
"data-testid"?: string;
|
|
2723
|
+
};
|
|
2724
|
+
export type RadioSkeletonProps = RadioSkeletonProperties;
|
|
2725
|
+
declare const RadioSkeleton: React.FC<RadioSkeletonProps>;
|
|
2726
|
+
export interface RadioComponents {
|
|
2727
|
+
Skeleton: typeof RadioSkeleton;
|
|
2728
|
+
}
|
|
2729
|
+
export interface RadioProperties {
|
|
2730
|
+
/**
|
|
2731
|
+
* Name attribute of the input element.
|
|
2732
|
+
*/
|
|
2733
|
+
name: string;
|
|
2734
|
+
/**
|
|
2735
|
+
* Change the visual style of the radio.
|
|
2736
|
+
* @default radio
|
|
2737
|
+
*/
|
|
2738
|
+
as?: "radio" | "button";
|
|
2739
|
+
/**
|
|
2740
|
+
* Modifies true/false value of the native radio.
|
|
2741
|
+
*/
|
|
2742
|
+
checked?: boolean;
|
|
2743
|
+
/**
|
|
2744
|
+
* Modifies the native disabled state of the native radio.
|
|
2745
|
+
*/
|
|
2746
|
+
disabled?: boolean;
|
|
2747
|
+
/**
|
|
2748
|
+
* Text to be rendered inside the component.
|
|
2749
|
+
*/
|
|
2750
|
+
label?: string;
|
|
2751
|
+
}
|
|
2752
|
+
export type RadioProps = RadioProperties & InputHTMLAttributes<HTMLInputElement>;
|
|
2753
|
+
export declare const Radio: React.FC<RadioProps> & RadioComponents;
|
|
2754
|
+
export interface SelectGroupProperties {
|
|
2755
|
+
/**
|
|
2756
|
+
* Label for the option group.
|
|
2757
|
+
*/
|
|
2758
|
+
label: string;
|
|
2759
|
+
/**
|
|
2760
|
+
* The content of the option group.
|
|
2761
|
+
* @TJS-type React.ReactNode
|
|
2762
|
+
*/
|
|
2763
|
+
children: ReactNode;
|
|
2764
|
+
}
|
|
2765
|
+
export type SelectGroupProps = SelectGroupProperties & OptgroupHTMLAttributes<HTMLOptGroupElement>;
|
|
2766
|
+
declare const SelectGroup: React.FC<SelectGroupProps>;
|
|
2767
|
+
export interface SelectOptionProperties {
|
|
2768
|
+
/**
|
|
2769
|
+
* Label for the option.
|
|
2770
|
+
*/
|
|
2771
|
+
label: string;
|
|
2772
|
+
/**
|
|
2773
|
+
* Value of the option
|
|
2774
|
+
*/
|
|
2775
|
+
value: string;
|
|
2776
|
+
}
|
|
2777
|
+
export type SelectOptionProps = SelectOptionProperties & OptionHTMLAttributes<HTMLOptionElement>;
|
|
2778
|
+
declare const SelectOption: React.FC<SelectOptionProps>;
|
|
2779
|
+
export type SelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2780
|
+
export type SelectSkeletonProps = SelectSkeletonProperties;
|
|
2781
|
+
declare const SelectSkeleton: React.FC<SelectSkeletonProps>;
|
|
2782
|
+
export interface SelectComponents {
|
|
2783
|
+
Group: typeof SelectGroup;
|
|
2784
|
+
Option: typeof SelectOption;
|
|
2785
|
+
Skeleton: typeof SelectSkeleton;
|
|
2786
|
+
}
|
|
2787
|
+
export interface SelectProperties {
|
|
2788
|
+
/**
|
|
2789
|
+
* The name of the wrapper element or the select element when native.
|
|
2790
|
+
*/
|
|
2791
|
+
name: string;
|
|
2792
|
+
/**
|
|
2793
|
+
* The id of the wrapper element or the select element when native.
|
|
2794
|
+
*/
|
|
2795
|
+
id: string;
|
|
2796
|
+
/**
|
|
2797
|
+
* The content of the select.
|
|
2798
|
+
* @TJS-type React.ReactNode
|
|
2799
|
+
*/
|
|
2800
|
+
children: ReactNode;
|
|
2801
|
+
/**
|
|
2802
|
+
* Change the visual style of the select.
|
|
2803
|
+
* @default neutral
|
|
2804
|
+
*/
|
|
2805
|
+
appearance?: "success" | "warning" | "danger" | "neutral";
|
|
2806
|
+
}
|
|
2807
|
+
export declare const Select: React.ForwardRefExoticComponent<SelectProperties & React.SelectHTMLAttributes<HTMLSelectElement> & React.InputHTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>> & SelectComponents;
|
|
2808
|
+
export type SelectProps = ComponentPropsWithRef<typeof Select>;
|
|
2809
|
+
export interface SpinnerProperties {
|
|
2810
|
+
/**
|
|
2811
|
+
* Sets the width and height of the spinner.
|
|
2812
|
+
* @default large
|
|
2813
|
+
*/
|
|
2814
|
+
size?: "small" | "medium" | "large" | number;
|
|
2815
|
+
/**
|
|
2816
|
+
* Set the color for the spinner SVG fill.
|
|
2817
|
+
* @default primary-interactive
|
|
2818
|
+
*/
|
|
2819
|
+
color?: keyof typeof spinner.properties.color;
|
|
2820
|
+
}
|
|
2821
|
+
export type SpinnerProps = SpinnerProperties & SVGAttributes<SVGElement>;
|
|
2822
|
+
export declare const Spinner: React.FC<SpinnerProps>;
|
|
2823
|
+
export type TagSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
|
|
2824
|
+
/**
|
|
2825
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
2826
|
+
*/
|
|
2827
|
+
"data-testid"?: string;
|
|
2828
|
+
};
|
|
2829
|
+
export type TagSkeletonProps = TagSkeletonProperties;
|
|
2830
|
+
declare const TagSkeleton: React.FC<TagSkeletonProps>;
|
|
2831
|
+
export interface TagComponents {
|
|
2832
|
+
Skeleton: typeof TagSkeleton;
|
|
2833
|
+
}
|
|
2834
|
+
export interface TagProperties {
|
|
2835
|
+
/**
|
|
2836
|
+
* The content of the tag.
|
|
2837
|
+
* @TJS-type React.ReactNode
|
|
2838
|
+
*/
|
|
2839
|
+
children: ReactNode;
|
|
2840
|
+
/**
|
|
2841
|
+
* Change the visual style of the tag.
|
|
2842
|
+
* @default neutral
|
|
2843
|
+
*/
|
|
2844
|
+
appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
|
|
2845
|
+
}
|
|
2846
|
+
export type TagProps = TagProperties & HTMLAttributes<HTMLDivElement>;
|
|
2847
|
+
export declare const Tag: React.FC<TagProps> & TagComponents;
|
|
2848
|
+
export type TextSkeletonProperties = {
|
|
2849
|
+
fontSize?: keyof typeof text.properties.fontSize;
|
|
2850
|
+
} & Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
|
|
2851
|
+
export type TextSkeletonProps = TextSkeletonProperties;
|
|
2852
|
+
declare const TextSkeleton: React.FC<TextSkeletonProps>;
|
|
2853
|
+
export interface TextComponents {
|
|
2854
|
+
Skeleton: typeof TextSkeleton;
|
|
2855
|
+
}
|
|
2856
|
+
export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
|
|
2857
|
+
/**
|
|
2858
|
+
* The content of the link.
|
|
2859
|
+
* @TJS-type React.ReactNode
|
|
2860
|
+
*/
|
|
2861
|
+
children: ReactNode;
|
|
2862
|
+
/**
|
|
2863
|
+
* Type of html tag to create for the Text component.
|
|
2864
|
+
* @default p
|
|
2865
|
+
*/
|
|
2866
|
+
as?: "p" | "span";
|
|
2867
|
+
}
|
|
2868
|
+
export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
|
|
2869
|
+
export declare const Text: React.FC<TextProps> & TextComponents;
|
|
2870
|
+
export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2871
|
+
export type TextareaSkeletonProps = TextareaSkeletonProperties;
|
|
2872
|
+
declare const TextareaSkeleton: React.FC<TextareaSkeletonProps>;
|
|
2873
|
+
export interface TextareaComponents {
|
|
2874
|
+
Skeleton: typeof TextareaSkeleton;
|
|
2875
|
+
}
|
|
2876
|
+
export interface TextareaProperties {
|
|
2877
|
+
/**
|
|
2878
|
+
* Change the visual style of the textarea.
|
|
2879
|
+
* @default neutral
|
|
2880
|
+
*/
|
|
2881
|
+
appearance?: "neutral" | "success" | "warning" | "danger" | "ai-generative";
|
|
2882
|
+
/**
|
|
2883
|
+
* Number of lines to be rendered for the user to input text
|
|
2884
|
+
* @default 2
|
|
2885
|
+
*/
|
|
2886
|
+
lines?: number;
|
|
2887
|
+
/**
|
|
2888
|
+
* ID of the textarea
|
|
2889
|
+
* */
|
|
2890
|
+
id: string;
|
|
2891
|
+
}
|
|
2892
|
+
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProperties & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>> & TextareaComponents;
|
|
2893
|
+
export type TextareaProps = ComponentPropsWithRef<typeof Textarea>;
|
|
2894
|
+
export type ThumbnailSkeletonProperties = Partial<Pick<ThumbnailProps, "aspectRatio">> & Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2895
|
+
export type ThumbnailSkeletonProps = ThumbnailSkeletonProperties;
|
|
2896
|
+
declare const ThumbnailSkeleton: React.FC<ThumbnailSkeletonProps>;
|
|
2897
|
+
export interface ThumbnailComponents {
|
|
2898
|
+
Skeleton: typeof ThumbnailSkeleton;
|
|
2899
|
+
}
|
|
2900
|
+
export interface ThumbnailProperties {
|
|
2901
|
+
/**
|
|
2902
|
+
* The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
|
|
2903
|
+
*/
|
|
2904
|
+
alt: string;
|
|
2905
|
+
/**
|
|
2906
|
+
* The content of the thumbnail.
|
|
2907
|
+
* @TJS-type React.ReactNode
|
|
2908
|
+
*/
|
|
2909
|
+
children?: ReactNode;
|
|
2910
|
+
/**
|
|
2911
|
+
* Permitted aspect ratios for the size of the thumbnail image.
|
|
2912
|
+
* @default 1/1
|
|
2913
|
+
*/
|
|
2914
|
+
aspectRatio?: typeof thumbnail.properties.aspectRatio[number];
|
|
2915
|
+
/**
|
|
2916
|
+
* Width value of the thumbnail image. Defaults to 100%.
|
|
2917
|
+
* @default 100%
|
|
2918
|
+
*/
|
|
2919
|
+
width?: string;
|
|
2920
|
+
}
|
|
2921
|
+
export type ThumbnailProps = ThumbnailProperties & ImgHTMLAttributes<HTMLImageElement>;
|
|
2922
|
+
export declare const Thumbnail: React.FC<ThumbnailProps> & ThumbnailComponents;
|
|
2923
|
+
export type TitleSkeletonProperties = Pick<TitleProps, "as"> & Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
|
|
2924
|
+
export type TitleSkeletonProps = TitleSkeletonProperties;
|
|
2925
|
+
declare const TitleSkeleton: React.FC<TitleSkeletonProps>;
|
|
2926
|
+
export interface TitleComponents {
|
|
2927
|
+
Skeleton: typeof TitleSkeleton;
|
|
2928
|
+
}
|
|
2929
|
+
export interface TitleProperties extends TitleSprinkle {
|
|
2930
|
+
/**
|
|
2931
|
+
* The content of the title.
|
|
2932
|
+
* @TJS-type React.ReactNode
|
|
2933
|
+
*/
|
|
2934
|
+
children: ReactNode;
|
|
2935
|
+
/**
|
|
2936
|
+
* Type of html tag to create for the title.
|
|
2937
|
+
* @default h1
|
|
2938
|
+
*/
|
|
2939
|
+
as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
2940
|
+
}
|
|
2941
|
+
export type TitleProps = TitleProperties & HTMLAttributes<HTMLHeadingElement>;
|
|
2942
|
+
export declare const Title: React.FC<TitleProps> & TitleComponents;
|
|
2943
|
+
export interface ToastProviderProperties {
|
|
2944
|
+
/**
|
|
2945
|
+
* @TJS-type React.ReactNode
|
|
2946
|
+
*/
|
|
2947
|
+
children: ReactNode;
|
|
2948
|
+
}
|
|
2949
|
+
export type ToastProviderProps = ToastProviderProperties;
|
|
2950
|
+
export declare const ToastProvider: React.FC<ToastProviderProps>;
|
|
2951
|
+
export interface ToastComponents {
|
|
2952
|
+
Provider: typeof ToastProvider;
|
|
2953
|
+
}
|
|
2954
|
+
export type Types = "primary" | "success" | "danger" | "progress";
|
|
2955
|
+
export interface ToastProperties {
|
|
2956
|
+
/**
|
|
2957
|
+
* Unique toast ID used when hiding or removing a toast.
|
|
2958
|
+
*/
|
|
2959
|
+
id: string;
|
|
2960
|
+
/**
|
|
2961
|
+
* The text that should appear in the toast message.
|
|
2962
|
+
*/
|
|
2963
|
+
text: string;
|
|
2964
|
+
/**
|
|
2965
|
+
* Change the visual style of the toast.
|
|
2966
|
+
* @default primary
|
|
2967
|
+
*/
|
|
2968
|
+
type?: Types;
|
|
2969
|
+
/**
|
|
2970
|
+
* The time in milliseconds that the toast message should persist.
|
|
2971
|
+
* @default 4000
|
|
2972
|
+
*/
|
|
2973
|
+
duration?: 4000 | 8000 | 16000;
|
|
2974
|
+
/**
|
|
2975
|
+
* Tells you whether or not Toast should close automatically.
|
|
2976
|
+
* @default true
|
|
2977
|
+
*/
|
|
2978
|
+
autoClose?: boolean;
|
|
2979
|
+
/**
|
|
2980
|
+
* Tells the toast position when we are using multiple toasts.
|
|
2981
|
+
* @default 0
|
|
2982
|
+
*/
|
|
2983
|
+
position?: number;
|
|
2984
|
+
}
|
|
2985
|
+
export type ToastProps = ToastProperties & HTMLAttributes<HTMLDivElement>;
|
|
2986
|
+
export declare const Toast: React.FC<ToastProps> & ToastComponents;
|
|
2987
|
+
export interface ToastContextProps {
|
|
2988
|
+
closeToast: (id: string) => void;
|
|
2989
|
+
addToast: (toast: Omit<ToastProps, "autoClose">) => void;
|
|
2990
|
+
}
|
|
2991
|
+
export declare const useToast: () => ToastContextProps;
|
|
2992
|
+
export type ToggleSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
|
|
2993
|
+
export type ToggleSkeletonProps = ToggleSkeletonProperties;
|
|
2994
|
+
declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
|
|
2995
|
+
export interface ToggleComponents {
|
|
2996
|
+
Skeleton: typeof ToggleSkeleton;
|
|
2997
|
+
}
|
|
2998
|
+
export interface ToggleProperties {
|
|
2999
|
+
/**
|
|
3000
|
+
* The name of the input element.
|
|
3001
|
+
*/
|
|
3002
|
+
name: string;
|
|
3003
|
+
/**
|
|
3004
|
+
* Sets toggle state to activated or deactivated.
|
|
3005
|
+
*/
|
|
3006
|
+
active?: boolean;
|
|
3007
|
+
/**
|
|
3008
|
+
* Text to be rendered inside the component
|
|
3009
|
+
*/
|
|
3010
|
+
label?: string;
|
|
3011
|
+
}
|
|
3012
|
+
export type ToggleProps = ToggleProperties & InputHTMLAttributes<HTMLInputElement>;
|
|
3013
|
+
export declare const Toggle: React.FC<ToggleProps> & ToggleComponents;
|
|
3014
|
+
export interface TooltipProperties extends TooltipSprinkle {
|
|
3015
|
+
/**
|
|
3016
|
+
* An HTML element, or a function that returns one. It's used to set the position of the tooltip.
|
|
3017
|
+
* @TJS-type React.ReactNode
|
|
3018
|
+
*/
|
|
3019
|
+
children: ReactNode;
|
|
3020
|
+
/**
|
|
3021
|
+
* The text that should appear in the tooltip message.
|
|
3022
|
+
*/
|
|
3023
|
+
content: string;
|
|
3024
|
+
/**
|
|
3025
|
+
* Conditional for displaying the popover arrow.
|
|
3026
|
+
* @default false
|
|
3027
|
+
*/
|
|
3028
|
+
arrow?: boolean;
|
|
3029
|
+
/**
|
|
3030
|
+
* Position of the popover.
|
|
3031
|
+
* @default bottom
|
|
3032
|
+
*/
|
|
3033
|
+
position?: "top" | "bottom" | "left" | "right";
|
|
3034
|
+
}
|
|
3035
|
+
export type TooltipProps = TooltipProperties & HTMLAttributes<HTMLDivElement>;
|
|
3036
|
+
export declare const Tooltip: React.FC<TooltipProps>;
|
|
3037
|
+
export type ProgressBarSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
|
|
3038
|
+
declare const ProgressBarSkeleton: React.FC<ProgressBarSkeletonProperties>;
|
|
3039
|
+
export interface ProgressBarComponents {
|
|
3040
|
+
Skeleton: typeof ProgressBarSkeleton;
|
|
3041
|
+
}
|
|
3042
|
+
export interface ProgressBarProperties {
|
|
3043
|
+
/**
|
|
3044
|
+
* Progress value from 0 to 100
|
|
3045
|
+
* @note Always renders with a minimum 8px width for visual consistency
|
|
3046
|
+
*/
|
|
3047
|
+
value: number;
|
|
3048
|
+
/**
|
|
3049
|
+
* Change the visual style of the progress bar.
|
|
3050
|
+
* @default neutral
|
|
3051
|
+
*/
|
|
3052
|
+
appearance?: "primary" | "success" | "warning" | "danger" | "neutral" | "ai-generative";
|
|
3053
|
+
}
|
|
3054
|
+
/**
|
|
3055
|
+
* ProgressBar component displays the progress of an operation or task in a visual format.
|
|
3056
|
+
* It provides a horizontal bar that fills based on the completion percentage.
|
|
3057
|
+
*
|
|
3058
|
+
* @component
|
|
3059
|
+
* @example
|
|
3060
|
+
* <ProgressBar value={50} appearance="primary" />
|
|
3061
|
+
*
|
|
3062
|
+
* @example
|
|
3063
|
+
* // With skeleton loading state
|
|
3064
|
+
* <ProgressBar.Skeleton width="200px" />
|
|
3065
|
+
*/
|
|
3066
|
+
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProperties & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ProgressBarProperties> & React.RefAttributes<HTMLDivElement>> & ProgressBarComponents;
|
|
3067
|
+
export type ProgressBarProps = ComponentPropsWithRef<typeof ProgressBar>;
|
|
3068
|
+
export interface AccordionBodyProperties {
|
|
3069
|
+
/**
|
|
3070
|
+
* The content of the accordion body.
|
|
3071
|
+
* @TJS-type React.ReactNode
|
|
3072
|
+
*/
|
|
3073
|
+
children: ReactNode;
|
|
3074
|
+
/**
|
|
3075
|
+
* The borderBottom property defines a lower border of the accordion body.
|
|
3076
|
+
* @default none
|
|
3077
|
+
*/
|
|
3078
|
+
borderBottom?: keyof typeof accordion.properties.borderBottom;
|
|
3079
|
+
/**
|
|
3080
|
+
* The borderTop property defines a top border of the accordion body.
|
|
3081
|
+
* @default none
|
|
3082
|
+
*/
|
|
3083
|
+
borderTop?: keyof typeof accordion.properties.borderTop;
|
|
3084
|
+
/**
|
|
3085
|
+
* Padding properties are used to generate space around the content area of an Accordion.Body..
|
|
3086
|
+
* @default base
|
|
3087
|
+
*/
|
|
3088
|
+
padding?: keyof typeof accordion.properties.padding;
|
|
3089
|
+
}
|
|
3090
|
+
export type AccordionBodyProps = AccordionBodyProperties & HTMLAttributes<HTMLElement>;
|
|
3091
|
+
declare const AccordionBody: React.FC<AccordionBodyProps>;
|
|
3092
|
+
export interface AccordionItemProperties {
|
|
3093
|
+
/**
|
|
3094
|
+
* The content of the accordion body.
|
|
3095
|
+
* @TJS-type React.ReactNode
|
|
3096
|
+
*/
|
|
3097
|
+
children: ReactNode;
|
|
3098
|
+
/**
|
|
3099
|
+
* Unique indicator to identify accordion items
|
|
3100
|
+
*/
|
|
3101
|
+
index: string;
|
|
3102
|
+
/**
|
|
3103
|
+
* This is an attribute used to identify a DOM node for testing purposes.
|
|
3104
|
+
*/
|
|
3105
|
+
testId?: string;
|
|
3106
|
+
}
|
|
3107
|
+
export type AccordionItemProps = AccordionItemProperties;
|
|
3108
|
+
declare const AccordionItem: React.FC<AccordionItemProps>;
|
|
3109
|
+
export interface AccordionHeaderProperties {
|
|
3110
|
+
/**
|
|
3111
|
+
* The content of the accordion header.
|
|
3112
|
+
* @TJS-type React.ReactNode | ((data: { selected: string; index: string }) => React.ReactNode);
|
|
3113
|
+
*/
|
|
3114
|
+
children?: ReactNode | ((data: {
|
|
3115
|
+
selected: string;
|
|
3116
|
+
index: string;
|
|
3117
|
+
}) => ReactNode);
|
|
3118
|
+
/**
|
|
3119
|
+
* The title to display in the accordion header.
|
|
3120
|
+
*/
|
|
3121
|
+
title?: string;
|
|
3122
|
+
/**
|
|
3123
|
+
* The subtitle to display in the accordion header.
|
|
3124
|
+
*/
|
|
3125
|
+
subtitle?: string;
|
|
3126
|
+
/**
|
|
3127
|
+
* The SVG contents to display in the accordion header.
|
|
3128
|
+
* @TJS-type React.ReactNode
|
|
3129
|
+
*/
|
|
3130
|
+
icon?: ReactNode;
|
|
3131
|
+
/**
|
|
3132
|
+
* Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
|
|
3133
|
+
* @default false
|
|
3134
|
+
*/
|
|
3135
|
+
noIconToggle?: boolean;
|
|
3136
|
+
/**
|
|
3137
|
+
* The borderTop property defines a lower border of the accordion header.
|
|
3138
|
+
* @default base
|
|
3139
|
+
*/
|
|
3140
|
+
borderTop?: keyof typeof accordion.properties.borderTop;
|
|
3141
|
+
/**
|
|
3142
|
+
* The borderBottom property defines a lower border of the accordion header.
|
|
3143
|
+
*/
|
|
3144
|
+
borderBottom?: keyof typeof accordion.properties.borderBottom;
|
|
3145
|
+
}
|
|
3146
|
+
export type AccordionHeaderProps = AccordionHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "children">;
|
|
3147
|
+
declare const AccordionHeader: React.FC<AccordionHeaderProps>;
|
|
3148
|
+
export interface AccordionComponents {
|
|
3149
|
+
Body: typeof AccordionBody;
|
|
3150
|
+
Item: typeof AccordionItem;
|
|
3151
|
+
Header: typeof AccordionHeader;
|
|
3152
|
+
}
|
|
3153
|
+
export interface AccordionProperties {
|
|
3154
|
+
/**
|
|
3155
|
+
* The content of the accordion.
|
|
3156
|
+
* @TJS-type React.ReactNode
|
|
3157
|
+
*/
|
|
3158
|
+
children?: ReactNode;
|
|
3159
|
+
/**
|
|
3160
|
+
* Informs which accordion item is open by default, this value must be the same as informed in the index of each item
|
|
3161
|
+
*/
|
|
3162
|
+
selectedDefault?: string;
|
|
3163
|
+
}
|
|
3164
|
+
export type AccordionProps = AccordionProperties & HTMLAttributes<HTMLElement>;
|
|
3165
|
+
export declare const Accordion: React.FC<AccordionProps> & AccordionComponents;
|
|
3166
|
+
export type AlertSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
|
|
3167
|
+
export type AlertSkeletonProps = AlertSkeletonProperties;
|
|
3168
|
+
declare const AlertSkeleton: React.FC<AlertSkeletonProps>;
|
|
3169
|
+
export interface AlertComponents {
|
|
3170
|
+
Skeleton: typeof AlertSkeleton;
|
|
3171
|
+
}
|
|
3172
|
+
export interface AlertProperties {
|
|
3173
|
+
/**
|
|
3174
|
+
* The content for the title of the alert.
|
|
3175
|
+
*/
|
|
3176
|
+
title?: string;
|
|
3177
|
+
/**
|
|
3178
|
+
* Change the visual style of the alert.
|
|
3179
|
+
* @default neutral
|
|
3180
|
+
*/
|
|
3181
|
+
appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
|
|
3182
|
+
/**
|
|
3183
|
+
* The content of the alert.
|
|
3184
|
+
* @TJS-type React.ReactNode
|
|
3185
|
+
*/
|
|
3186
|
+
children: ReactNode;
|
|
3187
|
+
/**
|
|
3188
|
+
* Function to be passed on actioning the dismiss button.
|
|
3189
|
+
* @TJS-type () => void;
|
|
3190
|
+
*/
|
|
3191
|
+
onRemove?: () => void;
|
|
3192
|
+
/**
|
|
3193
|
+
* Determines if the alert is shown or not.
|
|
3194
|
+
* @default true
|
|
3195
|
+
*/
|
|
3196
|
+
show?: boolean;
|
|
3197
|
+
}
|
|
3198
|
+
export type AlertProps = AlertProperties & HTMLAttributes<HTMLElement>;
|
|
3199
|
+
export declare const Alert: React.FC<AlertProps> & AlertComponents;
|
|
3200
|
+
export interface CardBodyProperties {
|
|
3201
|
+
/**
|
|
3202
|
+
* The content of the card body.
|
|
3203
|
+
* @TJS-type React.ReactNode
|
|
3204
|
+
*/
|
|
3205
|
+
children: ReactNode;
|
|
3206
|
+
/**
|
|
3207
|
+
* The padding properties are used to generate space around an card's body content area.
|
|
3208
|
+
* @default none
|
|
3209
|
+
*/
|
|
3210
|
+
padding?: keyof typeof card.subComponents.body.properties.padding;
|
|
3211
|
+
}
|
|
3212
|
+
export type CardBodyProps = CardBodyProperties & HTMLAttributes<HTMLElement>;
|
|
3213
|
+
declare const CardBody: React.FC<CardBodyProps>;
|
|
3214
|
+
export interface CardFooterProperties {
|
|
3215
|
+
/**
|
|
3216
|
+
* The content of the card footer.
|
|
3217
|
+
* @TJS-type React.ReactNode
|
|
3218
|
+
*/
|
|
3219
|
+
children: ReactNode;
|
|
3220
|
+
/**
|
|
3221
|
+
* The padding properties are used to generate space around an card's footer content area.
|
|
3222
|
+
* @default none
|
|
3223
|
+
*/
|
|
3224
|
+
padding?: keyof typeof card.subComponents.footer.properties.padding;
|
|
3225
|
+
}
|
|
3226
|
+
export type CardFooterProps = CardFooterProperties & HTMLAttributes<HTMLElement>;
|
|
3227
|
+
declare const CardFooter: React.FC<CardFooterProps>;
|
|
3228
|
+
export interface CardHeaderProperties {
|
|
3229
|
+
/**
|
|
3230
|
+
* The content of the card header.
|
|
3231
|
+
* @TJS-type React.ReactNode
|
|
3232
|
+
*/
|
|
3233
|
+
children?: ReactNode;
|
|
3234
|
+
/**
|
|
3235
|
+
* The title to display in the card header.
|
|
3236
|
+
*/
|
|
3237
|
+
title?: string;
|
|
3238
|
+
/**
|
|
3239
|
+
* The padding properties are used to generate space around an card's header content area.
|
|
3240
|
+
* @default none
|
|
3241
|
+
*/
|
|
3242
|
+
padding?: keyof typeof card.subComponents.header.properties.padding;
|
|
3243
|
+
}
|
|
3244
|
+
export type CardHeaderProps = CardHeaderProperties & HTMLAttributes<HTMLElement>;
|
|
3245
|
+
declare const CardHeader: React.FC<CardHeaderProps>;
|
|
3246
|
+
export interface CardComponents {
|
|
3247
|
+
Body: typeof CardBody;
|
|
3248
|
+
Footer: typeof CardFooter;
|
|
3249
|
+
Header: typeof CardHeader;
|
|
3250
|
+
}
|
|
3251
|
+
export interface CardProperties {
|
|
3252
|
+
/**
|
|
3253
|
+
* The content of the card.
|
|
3254
|
+
* @TJS-type React.ReactNode
|
|
3255
|
+
*/
|
|
3256
|
+
children: ReactNode;
|
|
3257
|
+
/**
|
|
3258
|
+
* The padding properties are used to generate space around an card's content area.
|
|
3259
|
+
* @default base
|
|
3260
|
+
*/
|
|
3261
|
+
padding?: keyof typeof card.properties.padding;
|
|
3262
|
+
/**
|
|
3263
|
+
* The backgroundColor property sets the background color of the card.
|
|
3264
|
+
* @default neutral-background
|
|
3265
|
+
*/
|
|
3266
|
+
backgroundColor?: keyof typeof card.properties.backgroundColor;
|
|
3267
|
+
}
|
|
3268
|
+
export type CardProps = CardProperties & HTMLAttributes<HTMLElement>;
|
|
3269
|
+
export declare const Card: React.FC<CardProps> & CardComponents;
|
|
3270
|
+
export interface CollapsibleBodyProperties {
|
|
3271
|
+
/**
|
|
3272
|
+
* The content of the collapsible body.
|
|
3273
|
+
* @TJS-type React.ReactNode
|
|
3274
|
+
*/
|
|
3275
|
+
children: ReactNode;
|
|
3276
|
+
/**
|
|
3277
|
+
* Show Collapsible.Body when state is open or closed.
|
|
3278
|
+
* @default open
|
|
3279
|
+
*/
|
|
3280
|
+
visibleWhen?: "open" | "closed";
|
|
3281
|
+
/**
|
|
3282
|
+
* Set the direction that Collapsible.Body going to open
|
|
3283
|
+
* @default none
|
|
3284
|
+
*/
|
|
3285
|
+
direction?: "top" | "bottom" | "none";
|
|
3286
|
+
}
|
|
3287
|
+
export type CollapsibleBodyProps = CollapsibleBodyProperties & HTMLAttributes<HTMLElement>;
|
|
3288
|
+
declare const CollapsibleBody: React.FC<CollapsibleBodyProps>;
|
|
3289
|
+
export interface CollapsibleItemProperties {
|
|
3290
|
+
/**
|
|
3291
|
+
* The content of the collapsible body.
|
|
3292
|
+
* @TJS-type React.ReactNode
|
|
3293
|
+
*/
|
|
3294
|
+
children: ReactNode;
|
|
3295
|
+
}
|
|
3296
|
+
export type CollapsibleItemProps = CollapsibleItemProperties;
|
|
3297
|
+
declare const CollapsibleItem: React.FC<CollapsibleItemProps>;
|
|
3298
|
+
export interface CollapsibleComponents {
|
|
3299
|
+
Body: typeof CollapsibleBody;
|
|
3300
|
+
Item: typeof CollapsibleItem;
|
|
3301
|
+
}
|
|
3302
|
+
export interface CollapsibleProperties {
|
|
3303
|
+
children?: ReactNode;
|
|
3304
|
+
open?: boolean;
|
|
3305
|
+
}
|
|
3306
|
+
export type CollapsibleBaseProps = CollapsibleProperties & Omit<HTMLAttributes<HTMLElement>, "onChange">;
|
|
3307
|
+
export declare const Collapsible: React.FC<CollapsibleProperties> & CollapsibleComponents;
|
|
3308
|
+
export type CloseOnOutsidePress = (event: PointerEvent | MouseEvent) => boolean;
|
|
3309
|
+
export interface ModalBodyProperties {
|
|
3310
|
+
/**
|
|
3311
|
+
* The content of the modal body.
|
|
3312
|
+
* @TJS-type React.ReactNode
|
|
3313
|
+
*/
|
|
3314
|
+
children: ReactNode;
|
|
3315
|
+
/**
|
|
3316
|
+
* The padding properties are used to generate space around an modal's body content area.
|
|
3317
|
+
* @default none
|
|
3318
|
+
*/
|
|
3319
|
+
padding?: keyof typeof modal.subComponents.body.properties.padding;
|
|
3320
|
+
}
|
|
3321
|
+
export type ModalBodyProps = ModalBodyProperties & HTMLAttributes<HTMLElement>;
|
|
3322
|
+
declare const ModalBody: React.FC<ModalBodyProps>;
|
|
3323
|
+
export interface ModalFooterProperties {
|
|
3324
|
+
/**
|
|
3325
|
+
* The content of the modal footer.
|
|
3326
|
+
* @TJS-type React.ReactNode
|
|
3327
|
+
*/
|
|
3328
|
+
children: ReactNode;
|
|
3329
|
+
/**
|
|
3330
|
+
* The padding properties are used to generate space around an modal's footer content area.
|
|
3331
|
+
* @default none
|
|
3332
|
+
*/
|
|
3333
|
+
padding?: keyof typeof modal.subComponents.footer.properties.padding;
|
|
3334
|
+
}
|
|
3335
|
+
export type ModalFooterProps = ModalFooterProperties & HTMLAttributes<HTMLElement>;
|
|
3336
|
+
declare const ModalFooter: React.FC<ModalFooterProps>;
|
|
3337
|
+
export interface ModalHeaderProperties {
|
|
3338
|
+
/**
|
|
3339
|
+
* The content of the modal header.
|
|
3340
|
+
* @TJS-type React.ReactNode
|
|
3341
|
+
*/
|
|
3342
|
+
children?: ReactNode;
|
|
3343
|
+
/**
|
|
3344
|
+
* The title to display in the modal header.
|
|
3345
|
+
*/
|
|
3346
|
+
title?: string;
|
|
3347
|
+
/**
|
|
3348
|
+
* The padding properties are used to generate space around an modal's header content area.
|
|
3349
|
+
* @default none
|
|
3350
|
+
*/
|
|
3351
|
+
padding?: keyof typeof modal.subComponents.header.properties.padding;
|
|
3352
|
+
}
|
|
3353
|
+
export type ModalHeaderProps = ModalHeaderProperties & HTMLAttributes<HTMLElement>;
|
|
3354
|
+
declare const ModalHeader: React.FC<ModalHeaderProps>;
|
|
3355
|
+
export interface ModalComponents {
|
|
3356
|
+
Body: typeof ModalBody;
|
|
3357
|
+
Footer: typeof ModalFooter;
|
|
3358
|
+
Header: typeof ModalHeader;
|
|
3359
|
+
}
|
|
3360
|
+
export interface ModalProperties extends ModalSprinkle {
|
|
3361
|
+
/**
|
|
3362
|
+
* The content of the modal.
|
|
3363
|
+
* @TJS-type React.ReactNode
|
|
3364
|
+
*/
|
|
3365
|
+
children: ReactNode;
|
|
3366
|
+
/**
|
|
3367
|
+
* Whether the modal is open or not.
|
|
3368
|
+
*/
|
|
3369
|
+
open: boolean;
|
|
3370
|
+
/**
|
|
3371
|
+
* Callback fired when the component requests to be closed.
|
|
3372
|
+
* @TJS-type (open: boolean) => void;
|
|
3373
|
+
*/
|
|
3374
|
+
onDismiss?: (open: boolean) => void;
|
|
3375
|
+
/**
|
|
3376
|
+
* Id to be embedded in the portal element
|
|
3377
|
+
*/
|
|
3378
|
+
portalId?: string;
|
|
3379
|
+
/**
|
|
3380
|
+
* Controls whether clicking/pressing outside should close the modal.
|
|
3381
|
+
* - boolean: enable/disable dismissal on outside press
|
|
3382
|
+
* - function: receive the DOM event and return true to allow closing, false to ignore
|
|
3383
|
+
*
|
|
3384
|
+
* Defaults to true.
|
|
3385
|
+
*/
|
|
3386
|
+
closeOnOutsidePress?: boolean | CloseOnOutsidePress;
|
|
3387
|
+
/**
|
|
3388
|
+
* The attribute name to ignore when checking for outside clicks. Useful to
|
|
3389
|
+
* mark regions (e.g., a chat) that should not close the modal when clicked.
|
|
3390
|
+
* @default "data-nimbus-outside-press-ignore"
|
|
3391
|
+
*/
|
|
3392
|
+
ignoreAttributeName?: string;
|
|
3393
|
+
/**
|
|
3394
|
+
* The padding properties are used to generate space around an modal's content area.
|
|
3395
|
+
* @default base
|
|
3396
|
+
*/
|
|
3397
|
+
padding?: keyof typeof modal.properties.padding;
|
|
3398
|
+
}
|
|
3399
|
+
export type ModalProps = ModalProperties & {
|
|
3400
|
+
/**
|
|
3401
|
+
* Root element where the portal should be mounted. When provided and not null,
|
|
3402
|
+
* the portal renders inside this element; when null/undefined, the default root is used.
|
|
3403
|
+
*/
|
|
3404
|
+
root?: HTMLElement | null;
|
|
3405
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
3406
|
+
export declare const Modal: React.FC<ModalProps> & ModalComponents;
|
|
3407
|
+
export interface PaginationItemData {
|
|
3408
|
+
pageNumber: number | string;
|
|
3409
|
+
isCurrent: boolean;
|
|
3410
|
+
}
|
|
3411
|
+
export interface PaginationProperties {
|
|
3412
|
+
/**
|
|
3413
|
+
* The currently selected page.
|
|
3414
|
+
*/
|
|
3415
|
+
activePage: number;
|
|
3416
|
+
/**
|
|
3417
|
+
* The total number of pages.
|
|
3418
|
+
*/
|
|
3419
|
+
pageCount: number;
|
|
3420
|
+
/**
|
|
3421
|
+
* Called with event and page number when a page is clicked.
|
|
3422
|
+
* @TJS-type (page: number) => void;
|
|
3423
|
+
*/
|
|
3424
|
+
onPageChange: (page: number) => void;
|
|
3425
|
+
/**
|
|
3426
|
+
* Determines whether page numbers should be shown.
|
|
3427
|
+
* @default true
|
|
3428
|
+
*/
|
|
3429
|
+
showNumbers?: boolean;
|
|
3430
|
+
/**
|
|
3431
|
+
* Custom render function for pagination items.
|
|
3432
|
+
*/
|
|
3433
|
+
renderItem?: (item: PaginationItemData) => React.ReactNode;
|
|
3434
|
+
}
|
|
3435
|
+
export type PaginationProps = PaginationProperties & HTMLAttributes<HTMLElement>;
|
|
3436
|
+
export declare const Pagination: React.FC<PaginationProps>;
|
|
3437
|
+
export interface ScrollPaneItemProperties {
|
|
3438
|
+
/**
|
|
3439
|
+
* The content to be rendered inside the scroll pane item
|
|
3440
|
+
*/
|
|
3441
|
+
children: ReactNode;
|
|
3442
|
+
/**
|
|
3443
|
+
* Custom class name for styling
|
|
3444
|
+
*/
|
|
3445
|
+
className?: string;
|
|
3446
|
+
/**
|
|
3447
|
+
* Custom inline styles
|
|
3448
|
+
*/
|
|
3449
|
+
style?: React.CSSProperties;
|
|
3450
|
+
/**
|
|
3451
|
+
* Callback fired when the item is clicked
|
|
3452
|
+
*/
|
|
3453
|
+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
3454
|
+
}
|
|
3455
|
+
export type ScrollPaneItemProps = ScrollPaneItemProperties & Omit<BoxProps, "children">;
|
|
3456
|
+
export type ScrollPaneArrowProperties = {
|
|
3457
|
+
children: ReactNode;
|
|
3458
|
+
};
|
|
3459
|
+
export type ScrollPaneArrowVerticalEndProperties = ScrollPaneArrowProperties;
|
|
3460
|
+
export type ScrollPaneArrowVerticalStartProperties = ScrollPaneArrowProperties;
|
|
3461
|
+
export type ScrollPaneArrowHorizontalEndProperties = ScrollPaneArrowProperties;
|
|
3462
|
+
export type ScrollPaneArrowHorizontalStartProperties = ScrollPaneArrowProperties;
|
|
3463
|
+
export interface ScrollPaneComponents {
|
|
3464
|
+
Item: React.FC<ScrollPaneItemProps>;
|
|
3465
|
+
ArrowHorizontalStart: React.FC<ScrollPaneArrowHorizontalStartProperties>;
|
|
3466
|
+
ArrowHorizontalEnd: React.FC<ScrollPaneArrowHorizontalEndProperties>;
|
|
3467
|
+
ArrowVerticalStart: React.FC<ScrollPaneArrowVerticalStartProperties>;
|
|
3468
|
+
ArrowVerticalEnd: React.FC<ScrollPaneArrowVerticalEndProperties>;
|
|
3469
|
+
}
|
|
3470
|
+
export interface ScrollPaneProperties {
|
|
3471
|
+
/**
|
|
3472
|
+
* The content to be rendered inside the scroll pane
|
|
3473
|
+
*/
|
|
3474
|
+
children: ReactNode;
|
|
3475
|
+
/**
|
|
3476
|
+
* Whether to show gradient overlays when content overflows
|
|
3477
|
+
* @default true
|
|
3478
|
+
*/
|
|
3479
|
+
showGradients?: boolean;
|
|
3480
|
+
/**
|
|
3481
|
+
* Whether to show navigation arrows for scrolling
|
|
3482
|
+
* @default false
|
|
3483
|
+
*/
|
|
3484
|
+
showArrows?: boolean;
|
|
3485
|
+
/**
|
|
3486
|
+
* Whether to show the scrollbar
|
|
3487
|
+
* @default true
|
|
3488
|
+
*/
|
|
3489
|
+
showScrollbar?: boolean;
|
|
3490
|
+
/**
|
|
3491
|
+
* The direction of the scroll (horizontal or vertical)
|
|
3492
|
+
* @default "horizontal"
|
|
3493
|
+
*/
|
|
3494
|
+
direction?: "horizontal" | "vertical";
|
|
3495
|
+
/**
|
|
3496
|
+
* Whether items should scroll into view when clicked
|
|
3497
|
+
* @default true
|
|
3498
|
+
*/
|
|
3499
|
+
scrollToItemOnClick?: boolean;
|
|
3500
|
+
/**
|
|
3501
|
+
* Custom arrow component to render at the start of the scroll area
|
|
3502
|
+
*/
|
|
3503
|
+
scrollPaneArrowStart?: React.ReactNode;
|
|
3504
|
+
/**
|
|
3505
|
+
* Custom arrow component to render at the end of the scroll area
|
|
3506
|
+
*/
|
|
3507
|
+
scrollPaneArrowEnd?: React.ReactNode;
|
|
3508
|
+
/**
|
|
3509
|
+
* Props to be passed to the content container
|
|
3510
|
+
*/
|
|
3511
|
+
contentContainerProps?: object;
|
|
3512
|
+
}
|
|
3513
|
+
export type ScrollPaneProps = ScrollPaneProperties & Omit<BoxProps, "children"> & {
|
|
3514
|
+
contentContainerProps?: BoxProps;
|
|
3515
|
+
};
|
|
3516
|
+
/**
|
|
3517
|
+
* ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.
|
|
3518
|
+
* It provides gradient overlays, optional navigation arrows, and scroll-to-item functionality.
|
|
3519
|
+
*
|
|
3520
|
+
* @example
|
|
3521
|
+
* <ScrollPane showArrows showGradients showScrollbar>
|
|
3522
|
+
* <ScrollPane.Item>Item 1</ScrollPane.Item>
|
|
3523
|
+
* <ScrollPane.Item>Item 2</ScrollPane.Item>
|
|
3524
|
+
* </ScrollPane>
|
|
3525
|
+
*/
|
|
3526
|
+
export declare const ScrollPane: React.FC<ScrollPaneProps> & ScrollPaneComponents;
|
|
3527
|
+
export interface SidebarBodyProperties {
|
|
3528
|
+
/**
|
|
3529
|
+
* The content of the sidebar body.
|
|
3530
|
+
* @TJS-type React.ReactNode
|
|
3531
|
+
*/
|
|
3532
|
+
children: ReactNode;
|
|
3533
|
+
/**
|
|
3534
|
+
* The padding properties are used to generate space around an sidebar's body content area.
|
|
3535
|
+
* @default base
|
|
3536
|
+
*/
|
|
3537
|
+
padding?: keyof typeof sidebar.properties.padding;
|
|
3538
|
+
}
|
|
3539
|
+
export type SidebarBodyProps = SidebarBodyProperties & HTMLAttributes<HTMLElement>;
|
|
3540
|
+
declare const SidebarBody: React.FC<SidebarBodyProps>;
|
|
3541
|
+
export interface SidebarFooterProperties {
|
|
3542
|
+
/**
|
|
3543
|
+
* The content of the sidebar footer.
|
|
3544
|
+
* @TJS-type React.ReactNode
|
|
3545
|
+
*/
|
|
3546
|
+
children: ReactNode;
|
|
3547
|
+
/**
|
|
3548
|
+
* The padding properties are used to generate space around an sidebar's footer content area.
|
|
3549
|
+
* @default base
|
|
3550
|
+
*/
|
|
3551
|
+
padding?: keyof typeof sidebar.properties.padding;
|
|
3552
|
+
}
|
|
3553
|
+
export type SidebarFooterProps = SidebarFooterProperties & HTMLAttributes<HTMLElement>;
|
|
3554
|
+
declare const SidebarFooter: React.FC<SidebarFooterProps>;
|
|
3555
|
+
export interface SidebarHeaderProperties {
|
|
3556
|
+
/**
|
|
3557
|
+
* The content of the sidebar header.
|
|
3558
|
+
* @TJS-type React.ReactNode
|
|
3559
|
+
*/
|
|
3560
|
+
children?: ReactNode;
|
|
3561
|
+
/**
|
|
3562
|
+
* The title to display in the sidebar header.
|
|
3563
|
+
*/
|
|
3564
|
+
title?: string;
|
|
3565
|
+
/**
|
|
3566
|
+
* The padding properties are used to generate space around an sidebar's header content area.
|
|
3567
|
+
* @default base
|
|
3568
|
+
*/
|
|
3569
|
+
padding?: keyof typeof sidebar.properties.padding;
|
|
3570
|
+
}
|
|
3571
|
+
export type SidebarHeaderProps = SidebarHeaderProperties & HTMLAttributes<HTMLElement>;
|
|
3572
|
+
declare const SidebarHeader: React.FC<SidebarHeaderProps>;
|
|
3573
|
+
export interface SidebarComponents {
|
|
3574
|
+
Body: typeof SidebarBody;
|
|
3575
|
+
Footer: typeof SidebarFooter;
|
|
3576
|
+
Header: typeof SidebarHeader;
|
|
3577
|
+
}
|
|
3578
|
+
export interface SidebarProperties extends SidebarSprinkle {
|
|
3579
|
+
/**
|
|
3580
|
+
* Side from which the sidebar will appear.
|
|
3581
|
+
* @default right
|
|
3582
|
+
*/
|
|
3583
|
+
position?: "right" | "left";
|
|
3584
|
+
/**
|
|
3585
|
+
* The padding properties are used to generate space around an sidebar's content area.
|
|
3586
|
+
* @default base
|
|
3587
|
+
*/
|
|
3588
|
+
padding?: keyof typeof sidebar.properties.padding;
|
|
3589
|
+
/**
|
|
3590
|
+
* The content of the sidebar.
|
|
3591
|
+
* @TJS-type React.ReactNode
|
|
3592
|
+
*/
|
|
3593
|
+
children: ReactNode;
|
|
3594
|
+
/**
|
|
3595
|
+
* Callback fired when the component requests to be closed.
|
|
3596
|
+
* () => void;
|
|
3597
|
+
*/
|
|
3598
|
+
onRemove?: () => void;
|
|
3599
|
+
/**
|
|
3600
|
+
* Determines if the sidebar is shown or not.
|
|
3601
|
+
* @default true
|
|
3602
|
+
*/
|
|
3603
|
+
open?: boolean;
|
|
3604
|
+
/**
|
|
3605
|
+
* Determines if RemoveScroll wraps sidebar's children component.
|
|
3606
|
+
* @default true
|
|
3607
|
+
*/
|
|
3608
|
+
needRemoveScroll?: boolean;
|
|
3609
|
+
/**
|
|
3610
|
+
* Controls whether clicking/pressing outside should close the sidebar.
|
|
3611
|
+
* - boolean: enable/disable dismissal on outside press
|
|
3612
|
+
* - function: receive the DOM event and return true to allow closing, false to ignore
|
|
3613
|
+
*
|
|
3614
|
+
* Defaults to true for backward compatibility.
|
|
3615
|
+
*/
|
|
3616
|
+
closeOnOutsidePress?: boolean | CloseOnOutsidePress;
|
|
3617
|
+
/**
|
|
3618
|
+
* The attribute name to ignore when checking for outside clicks.
|
|
3619
|
+
* @default "data-nimbus-outside-press-ignore"
|
|
3620
|
+
*/
|
|
3621
|
+
ignoreAttributeName?: string;
|
|
3622
|
+
}
|
|
3623
|
+
export type SidebarProps = SidebarProperties & {
|
|
3624
|
+
/**
|
|
3625
|
+
* Root element where the portal should be mounted. When provided and not null,
|
|
3626
|
+
* the portal renders inside this element; when null/undefined, the default root is used.
|
|
3627
|
+
*/
|
|
3628
|
+
root?: HTMLElement | null;
|
|
3629
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
3630
|
+
export declare const Sidebar: React.FC<SidebarProps> & SidebarComponents;
|
|
3631
|
+
/**
|
|
3632
|
+
* Represents the visual state of a step
|
|
3633
|
+
*/
|
|
3634
|
+
export type StepState = "completed" | "started" | "pending";
|
|
3635
|
+
export interface StepperItemProperties {
|
|
3636
|
+
/**
|
|
3637
|
+
* The step number (0-based index) for this item.
|
|
3638
|
+
* This is automatically assigned by the parent Stepper component.
|
|
3639
|
+
*/
|
|
3640
|
+
step: number;
|
|
3641
|
+
/**
|
|
3642
|
+
* The label text to display for this step
|
|
3643
|
+
*/
|
|
3644
|
+
label?: string;
|
|
3645
|
+
}
|
|
3646
|
+
export type StepperItemProps = StepperItemProperties & HTMLAttributes<HTMLDivElement>;
|
|
3647
|
+
export interface StepperCardProperties {
|
|
3648
|
+
/**
|
|
3649
|
+
* The content to be rendered inside the card container
|
|
3650
|
+
* @TJS-type React.ReactNode
|
|
3651
|
+
*/
|
|
3652
|
+
children: ReactNode;
|
|
3653
|
+
}
|
|
3654
|
+
export type StepperCardProps = StepperCardProperties;
|
|
3655
|
+
export interface StepperComponents {
|
|
3656
|
+
Item: React.FC<Omit<StepperItemProps, "step">>;
|
|
3657
|
+
Card: React.FC<StepperCardProps>;
|
|
3658
|
+
}
|
|
3659
|
+
export interface BaseStepperProperties {
|
|
3660
|
+
/**
|
|
3661
|
+
* The currently active step (0-based index).
|
|
3662
|
+
* Steps before this will be marked as completed.
|
|
3663
|
+
*/
|
|
3664
|
+
activeStep: number;
|
|
3665
|
+
/**
|
|
3666
|
+
* The content of the stepper (StepperItem components).
|
|
3667
|
+
* Total steps will be calculated automatically based on the number of children.
|
|
3668
|
+
* @TJS-type React.ReactNode
|
|
3669
|
+
*/
|
|
3670
|
+
children: ReactNode;
|
|
3671
|
+
}
|
|
3672
|
+
export interface ControlledStepperProperties extends BaseStepperProperties {
|
|
3673
|
+
/**
|
|
3674
|
+
* The currently selected step (0-based index).
|
|
3675
|
+
* This step will be visually highlighted to show user selection.
|
|
3676
|
+
*/
|
|
3677
|
+
selectedStep: number;
|
|
3678
|
+
/**
|
|
3679
|
+
* Callback called when a step is selected.
|
|
3680
|
+
* Receives the step number (0-based index) as parameter.
|
|
3681
|
+
*/
|
|
3682
|
+
onSelectStep: (step: number) => void;
|
|
3683
|
+
}
|
|
3684
|
+
/**
|
|
3685
|
+
* Props for the Stepper component, supporting both controlled and uncontrolled modes
|
|
3686
|
+
*/
|
|
3687
|
+
export type StepperProps = (BaseStepperProperties | ControlledStepperProperties) & Omit<BoxProps, "display" | "flexWrap" | "gap">;
|
|
3688
|
+
export type StepperProperties = BaseStepperProperties & ControlledStepperProperties;
|
|
3689
|
+
export declare const Stepper: React.FC<StepperProps> & StepperComponents;
|
|
3690
|
+
/**
|
|
3691
|
+
* Context value provided by StepperContext to share state between stepper components
|
|
3692
|
+
*/
|
|
3693
|
+
export interface StepperContextValue {
|
|
3694
|
+
/**
|
|
3695
|
+
* The total number of steps in the stepper
|
|
3696
|
+
*/
|
|
3697
|
+
totalSteps: number;
|
|
3698
|
+
/**
|
|
3699
|
+
* The currently active step (0-based index)
|
|
3700
|
+
*/
|
|
3701
|
+
activeStep: number;
|
|
3702
|
+
/**
|
|
3703
|
+
* The currently selected step (0-based index)
|
|
3704
|
+
*/
|
|
3705
|
+
selectedStep?: number;
|
|
3706
|
+
/**
|
|
3707
|
+
* Callback to handle step selection
|
|
3708
|
+
*/
|
|
3709
|
+
onSelect?: (step: number) => void;
|
|
3710
|
+
}
|
|
3711
|
+
/**
|
|
3712
|
+
* Checks if the stepper is in controlled mode.
|
|
3713
|
+
* @param props - The props of the stepper
|
|
3714
|
+
* @returns True if the stepper is controlled, false otherwise
|
|
3715
|
+
*/
|
|
3716
|
+
export declare const isControlled: (props: any) => props is ControlledStepperProperties;
|
|
3717
|
+
export interface TabsButtonProperties {
|
|
3718
|
+
/**
|
|
3719
|
+
* Label of the tab button.
|
|
3720
|
+
*/
|
|
3721
|
+
label: string;
|
|
3722
|
+
/**
|
|
3723
|
+
* Content of the tab button.
|
|
3724
|
+
*/
|
|
3725
|
+
labelContent?: ReactNode;
|
|
3726
|
+
/**
|
|
3727
|
+
* Determines if tab is active.
|
|
3728
|
+
* @default false
|
|
3729
|
+
*/
|
|
3730
|
+
active?: boolean;
|
|
3731
|
+
/**
|
|
3732
|
+
* Position of the tab inside the tab list.
|
|
3733
|
+
*/
|
|
3734
|
+
index: number;
|
|
3735
|
+
/**
|
|
3736
|
+
* Function executed when clicking the tab.
|
|
3737
|
+
* @TJS-type (index: number) => void;
|
|
3738
|
+
*/
|
|
3739
|
+
setActiveTab: (index: number) => void;
|
|
3740
|
+
/**
|
|
3741
|
+
* Determines if tab spans all available width.
|
|
3742
|
+
* @default false
|
|
3743
|
+
*/
|
|
3744
|
+
fullWidth?: boolean;
|
|
3745
|
+
}
|
|
3746
|
+
export type TabsButtonProps = TabsButtonProperties & HTMLAttributes<HTMLLIElement>;
|
|
3747
|
+
declare const TabsButton: React.FC<TabsButtonProps>;
|
|
3748
|
+
export interface TabsItemProperties {
|
|
3749
|
+
/**
|
|
3750
|
+
* Label of the tabpanel. Used to pair with it's corresponding tab control.
|
|
3751
|
+
*/
|
|
3752
|
+
label: string;
|
|
3753
|
+
/**
|
|
3754
|
+
* Optional content of the tabpanel.
|
|
3755
|
+
* @TJS-type ReactNode;
|
|
3756
|
+
*/
|
|
3757
|
+
labelContent?: ReactNode;
|
|
3758
|
+
/**
|
|
3759
|
+
* The content of the tabs item.
|
|
3760
|
+
* @TJS-type ReactNode | ReactNode[];
|
|
3761
|
+
*/
|
|
3762
|
+
children: ReactNode | ReactNode[];
|
|
3763
|
+
}
|
|
3764
|
+
export type TabsItemProps = TabsItemProperties & HTMLAttributes<HTMLElement>;
|
|
3765
|
+
declare const TabsItem: React.FC<TabsItemProps>;
|
|
3766
|
+
export interface TabsComponents {
|
|
3767
|
+
Button: typeof TabsButton;
|
|
3768
|
+
Item: typeof TabsItem;
|
|
3769
|
+
}
|
|
3770
|
+
export interface BaseTabsProperties {
|
|
3771
|
+
/**
|
|
3772
|
+
* The content of the tabs.
|
|
3773
|
+
* @TJS-type ReactElement<TabsButtonProps>[];
|
|
3774
|
+
*/
|
|
3775
|
+
children: ReactElement<TabsButtonProps>[];
|
|
3776
|
+
/**
|
|
3777
|
+
* Sets the indicated tab as active by default. If unset, defaults to first tab.
|
|
3778
|
+
*/
|
|
3779
|
+
preSelectedTab?: number;
|
|
3780
|
+
/**
|
|
3781
|
+
* Determines if tabs should span available width.
|
|
3782
|
+
* @default false
|
|
3783
|
+
*/
|
|
3784
|
+
fullWidth?: boolean;
|
|
3785
|
+
}
|
|
3786
|
+
export interface ControlledTabsProperties extends BaseTabsProperties {
|
|
3787
|
+
/**
|
|
3788
|
+
* The currently selected tab index.
|
|
3789
|
+
*/
|
|
3790
|
+
selected: number;
|
|
3791
|
+
/**
|
|
3792
|
+
* Callback fired when the selected tab changes.
|
|
3793
|
+
*/
|
|
3794
|
+
onTabSelect: (index: number) => void;
|
|
3795
|
+
/**
|
|
3796
|
+
* preSelectedTab is not used in controlled mode
|
|
3797
|
+
*/
|
|
3798
|
+
preSelectedTab?: never;
|
|
3799
|
+
}
|
|
3800
|
+
export type TabsProps = (BaseTabsProperties | ControlledTabsProperties) & Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSelect">;
|
|
3801
|
+
export declare const Tabs: React.FC<TabsProps> & TabsComponents;
|
|
3802
|
+
export interface TableBodyProperties {
|
|
3803
|
+
/**
|
|
3804
|
+
* The content of the table body.
|
|
3805
|
+
* @TJS-type React.ReactNode
|
|
3806
|
+
*/
|
|
3807
|
+
children: ReactNode;
|
|
3808
|
+
}
|
|
3809
|
+
export type TableBodyProps = TableBodyProperties & HTMLAttributes<HTMLTableSectionElement>;
|
|
3810
|
+
declare const TableBody: React.FC<TableBodyProps>;
|
|
3811
|
+
export interface TableCellProperties extends TableSprinkle {
|
|
3812
|
+
/**
|
|
3813
|
+
* The content of the table cell.
|
|
3814
|
+
* @TJS-type React.ReactNode
|
|
3815
|
+
*/
|
|
3816
|
+
children: ReactNode;
|
|
3817
|
+
/**
|
|
3818
|
+
* Type of html tag to create for the table cell.
|
|
3819
|
+
* @default td
|
|
3820
|
+
*/
|
|
3821
|
+
as?: "td" | "th";
|
|
3822
|
+
}
|
|
3823
|
+
export type TableCellProps = TableCellProperties & HTMLAttributes<HTMLTableCellElement>;
|
|
3824
|
+
declare const TableCell: React.FC<TableCellProps>;
|
|
3825
|
+
export interface TableHeadProperties {
|
|
3826
|
+
/**
|
|
3827
|
+
* The content of the table head.
|
|
3828
|
+
* @TJS-type React.ReactNode
|
|
3829
|
+
*/
|
|
3830
|
+
children: ReactNode;
|
|
3831
|
+
}
|
|
3832
|
+
export type TableHeadProps = TableHeadProperties & HTMLAttributes<HTMLTableSectionElement>;
|
|
3833
|
+
declare const TableHead: React.FC<TableHeadProps>;
|
|
3834
|
+
export interface TableRowProperties extends TableSprinkle {
|
|
3835
|
+
/**
|
|
3836
|
+
* The content of the table row.
|
|
3837
|
+
* @TJS-type React.ReactNode
|
|
3838
|
+
*/
|
|
3839
|
+
children: ReactNode;
|
|
3840
|
+
/**
|
|
3841
|
+
* The ID of the table row.
|
|
3842
|
+
*/
|
|
3843
|
+
id?: string;
|
|
3844
|
+
/**
|
|
3845
|
+
* Function to be passed when clicking on the table row.
|
|
3846
|
+
* @TJS-type () => void;
|
|
3847
|
+
*/
|
|
3848
|
+
onClick?: () => void;
|
|
3849
|
+
}
|
|
3850
|
+
export type TableRowProps = TableRowProperties & HTMLAttributes<HTMLTableRowElement>;
|
|
3851
|
+
declare const TableRow: React.FC<TableRowProps>;
|
|
3852
|
+
export interface TableComponents {
|
|
3853
|
+
Body: typeof TableBody;
|
|
3854
|
+
Cell: typeof TableCell;
|
|
3855
|
+
Head: typeof TableHead;
|
|
3856
|
+
Row: typeof TableRow;
|
|
3857
|
+
}
|
|
3858
|
+
export interface TableProperties {
|
|
3859
|
+
/**
|
|
3860
|
+
* The content of the table.
|
|
3861
|
+
* @TJS-type React.ReactNode
|
|
3862
|
+
*/
|
|
3863
|
+
children: ReactNode;
|
|
3864
|
+
}
|
|
3865
|
+
export type TableProps = TableProperties & HTMLAttributes<HTMLTableElement>;
|
|
3866
|
+
export declare const Table: React.FC<TableProps> & TableComponents;
|
|
3867
|
+
export interface SegmentedControlButtonSkeletonProps {
|
|
3868
|
+
/** Width of the skeleton button */
|
|
3869
|
+
width?: string;
|
|
3870
|
+
/** Height of the skeleton button */
|
|
3871
|
+
height?: string;
|
|
3872
|
+
}
|
|
3873
|
+
export type SegmentedControlButtonProperties = PropsWithChildren<{
|
|
3874
|
+
/**
|
|
3875
|
+
* Unique identifier for the segment button.
|
|
3876
|
+
* Required for proper state management and accessibility.
|
|
3877
|
+
*/
|
|
3878
|
+
id: string;
|
|
3879
|
+
/**
|
|
3880
|
+
* Label of the segment used for accessibility.
|
|
3881
|
+
*/
|
|
3882
|
+
label?: string;
|
|
3883
|
+
/**
|
|
3884
|
+
* Determines if segment spans all available width.
|
|
3885
|
+
* @default false
|
|
3886
|
+
*/
|
|
3887
|
+
fullWidth?: boolean;
|
|
3888
|
+
}>;
|
|
3889
|
+
export type SegmentedControlButtonProps = SegmentedControlButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
3890
|
+
export interface SegmentedControlButtonComponents {
|
|
3891
|
+
Skeleton: React.FC<SegmentedControlButtonSkeletonProps>;
|
|
3892
|
+
}
|
|
3893
|
+
declare const SegmentedControlButton: PolymorphicForwardRefComponent<"button" | "a", SegmentedControlButtonProps> & SegmentedControlButtonComponents;
|
|
3894
|
+
declare const SegmentedControlButtonSkeleton: React.FC<SegmentedControlButtonSkeletonProps>;
|
|
3895
|
+
export interface SegmentedControlBaseProps {
|
|
3896
|
+
/**
|
|
3897
|
+
* The content of the segmented control.
|
|
3898
|
+
* Should contain SegmentedControlButton components with unique id props.
|
|
3899
|
+
*/
|
|
3900
|
+
children: ReactNode;
|
|
3901
|
+
/**
|
|
3902
|
+
* Determines if segments span all available width.
|
|
3903
|
+
* @default false
|
|
3904
|
+
*/
|
|
3905
|
+
fullWidth?: boolean;
|
|
3906
|
+
}
|
|
3907
|
+
/**
|
|
3908
|
+
* Component composition structure for the SegmentedControl
|
|
3909
|
+
*/
|
|
3910
|
+
export interface SegmentedControlComponents {
|
|
3911
|
+
Button: typeof SegmentedControlButton;
|
|
3912
|
+
ButtonSkeleton: typeof SegmentedControlButtonSkeleton;
|
|
3913
|
+
}
|
|
3914
|
+
export interface ControlledSegmentedControlProperties extends SegmentedControlBaseProps {
|
|
3915
|
+
/**
|
|
3916
|
+
* The currently selected segment IDs.
|
|
3917
|
+
* Allows for single or multiple selection.
|
|
3918
|
+
*/
|
|
3919
|
+
selectedSegments: string[];
|
|
3920
|
+
/**
|
|
3921
|
+
* Callback fired when the selected segments change.
|
|
3922
|
+
* @param selectedIds Array of selected segment IDs
|
|
3923
|
+
*/
|
|
3924
|
+
onSegmentsSelect?: (selectedIds: string[]) => void;
|
|
3925
|
+
}
|
|
3926
|
+
/**
|
|
3927
|
+
* Props for the SegmentedControl component, supporting both controlled and uncontrolled modes
|
|
3928
|
+
*/
|
|
3929
|
+
export type SegmentedControlProps = (SegmentedControlBaseProps | ControlledSegmentedControlProperties) & Omit<BoxProps, "display" | "backgroundColor" | "gap" | "borderRadius" | "children">;
|
|
3930
|
+
/**
|
|
3931
|
+
* SegmentedControl component for grouped selection controls
|
|
3932
|
+
*/
|
|
3933
|
+
export declare const SegmentedControl: React.FC<SegmentedControlProps> & SegmentedControlComponents;
|
|
3934
|
+
export interface SegmentedControlContextValue {
|
|
3935
|
+
/**
|
|
3936
|
+
* Register a button with its unique identifier
|
|
3937
|
+
* @param id The unique identifier for the button
|
|
3938
|
+
*/
|
|
3939
|
+
registerButton: (id: string) => void;
|
|
3940
|
+
/**
|
|
3941
|
+
* Unregister a button by its identifier
|
|
3942
|
+
* @param id The identifier of the button to unregister
|
|
3943
|
+
*/
|
|
3944
|
+
unregisterButton: (id: string) => void;
|
|
3945
|
+
/**
|
|
3946
|
+
* Toggle a segment's state by ID
|
|
3947
|
+
* @param id The unique identifier of the segment to toggle
|
|
3948
|
+
*/
|
|
3949
|
+
toggleSegment: (id: string) => void;
|
|
3950
|
+
/**
|
|
3951
|
+
* Check if a segment is currently selected by ID
|
|
3952
|
+
* @param id The unique identifier of the segment to check
|
|
3953
|
+
*/
|
|
3954
|
+
isSelected: (id: string) => boolean;
|
|
3955
|
+
/**
|
|
3956
|
+
* Whether buttons should span full width
|
|
3957
|
+
*/
|
|
3958
|
+
fullWidth: boolean;
|
|
3959
|
+
}
|
|
3960
|
+
/**
|
|
3961
|
+
* Hook to use SegmentedControl context with error if not found
|
|
3962
|
+
* @throws Error if not within a SegmentedControl
|
|
3963
|
+
*/
|
|
3964
|
+
export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
|
|
3965
|
+
|
|
3966
|
+
export {};
|