@nimbus-ds/components 1.0.0-rc.2 → 1.0.0-rc.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.d.ts +1156 -250
  2. package/dist/index.js +1 -1
  3. package/package.json +5 -5
  4. package/dist/index.d.ts.map +0 -1
package/dist/index.d.ts CHANGED
@@ -1,261 +1,1167 @@
1
- import React, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from "react";
2
- type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
3
- type BoxSizing = "border-box" | "content-box";
4
- type Cursor = "auto" | "pointer";
5
- declare const backgroundColorProperties: {
6
- "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
- "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9
- "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10
- "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
- "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
- "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
13
- "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14
- "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
- "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16
- "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17
- "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
18
- "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
19
- "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
- "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
- "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
- "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
26
- "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
- };
28
- declare const borderColorProperties: {
29
- "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
- "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
- "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
- "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
- "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
- "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
- "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
- "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
- "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
- "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40
- "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
41
- "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
42
- "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
43
- "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
44
- };
45
- declare const borderStyleProperties: BorderStyle[];
46
- declare const boxSizingProperties: BoxSizing[];
47
- declare const cursorProperties: Cursor[];
48
- declare const spaceProperties: {
49
- none: string;
50
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
- "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
55
- "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
- "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
- "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
- "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
- "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
- "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
- "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
- "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
- };
64
- type CursorProperties = (typeof cursorProperties)[number];
65
- type BorderColorProperties = keyof typeof borderColorProperties;
66
- type BackgroundColorProperties = keyof typeof backgroundColorProperties;
67
- type BorderStyleProperties = (typeof borderStyleProperties)[number];
68
- type BoxSizingProperties = (typeof boxSizingProperties)[number];
69
- type SpaceProperties = keyof typeof spaceProperties;
70
- interface Conditions<T> {
71
- xs?: T;
72
- md?: T;
73
- lg?: T;
74
- }
75
- interface BoxSprinkle {
76
- width?: string | Conditions<string>;
77
- height?: string | Conditions<string>;
78
- cursor?: CursorProperties | Conditions<CursorProperties>;
79
- backgroundColor?: BackgroundColorProperties | Conditions<BackgroundColorProperties>;
80
- borderRadius?: string | Conditions<string>;
81
- borderWidth?: string | Conditions<string>;
82
- borderColor?: BorderColorProperties | Conditions<BorderColorProperties>;
83
- borderStyle?: BorderStyleProperties | Conditions<BorderStyleProperties>;
84
- boxSizing?: BoxSizingProperties | Conditions<BoxSizingProperties>;
85
- padding?: SpaceProperties | Conditions<SpaceProperties>;
86
- paddingTop?: SpaceProperties | Conditions<SpaceProperties>;
87
- paddingBottom?: SpaceProperties | Conditions<SpaceProperties>;
88
- paddingLeft?: SpaceProperties | Conditions<SpaceProperties>;
89
- paddingRight?: SpaceProperties | Conditions<SpaceProperties>;
90
- margin?: SpaceProperties | Conditions<SpaceProperties>;
91
- marginTop?: SpaceProperties | Conditions<SpaceProperties>;
92
- marginBottom?: SpaceProperties | Conditions<SpaceProperties>;
93
- marginLeft?: SpaceProperties | Conditions<SpaceProperties>;
94
- marginRight?: SpaceProperties | Conditions<SpaceProperties>;
95
- paddingX?: SpaceProperties | Conditions<SpaceProperties>;
96
- paddingY?: SpaceProperties | Conditions<SpaceProperties>;
97
- p?: SpaceProperties | Conditions<SpaceProperties>;
98
- pl?: SpaceProperties | Conditions<SpaceProperties>;
99
- pr?: SpaceProperties | Conditions<SpaceProperties>;
100
- pt?: SpaceProperties | Conditions<SpaceProperties>;
101
- pb?: SpaceProperties | Conditions<SpaceProperties>;
102
- px?: SpaceProperties | Conditions<SpaceProperties>;
103
- py?: SpaceProperties | Conditions<SpaceProperties>;
104
- marginX?: SpaceProperties | Conditions<SpaceProperties>;
105
- marginY?: SpaceProperties | Conditions<SpaceProperties>;
106
- m?: SpaceProperties | Conditions<SpaceProperties>;
107
- mr?: SpaceProperties | Conditions<SpaceProperties>;
108
- ml?: SpaceProperties | Conditions<SpaceProperties>;
109
- mt?: SpaceProperties | Conditions<SpaceProperties>;
110
- mb?: SpaceProperties | Conditions<SpaceProperties>;
111
- mx?: SpaceProperties | Conditions<SpaceProperties>;
112
- my?: SpaceProperties | Conditions<SpaceProperties>;
1
+ // Generated by dts-bundle-generator v7.1.0
2
+
3
+ import { Placement } from '@floating-ui/react-dom-interactions';
4
+ import React from 'react';
5
+ import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, ReactElement, ReactNode, SVGAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
6
+
7
+ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
8
+ /** width alignment in content */
9
+ width: string;
10
+ /** height alignment in content */
11
+ height: string;
12
+ /** borderRadius alignment in content */
13
+ borderRadius?: string;
14
+ }
15
+ export declare const Skeleton: React.FC<SkeletonProps>;
16
+ export type BadgeSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
17
+ "data-testid"?: string;
18
+ };
19
+ declare const BadgeSkeleton: React.FC<BadgeSkeletonProps>;
20
+ export interface BadgeComponents {
21
+ Skeleton: typeof BadgeSkeleton;
22
+ }
23
+ export interface BadgeProps extends HTMLAttributes<HTMLElement> {
24
+ /** Badge color */
25
+ appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
26
+ /** Total items to be displayed without badge */
27
+ count: number | string;
28
+ /** Badge appearance color scheme */
29
+ theme?: "surface" | "light";
30
+ }
31
+ export declare const Badge: React.FC<BadgeProps> & BadgeComponents;
32
+ export type BoxBorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
33
+ export type BoxSizing = "border-box" | "content-box";
34
+ export type BoxCursor = "auto" | "pointer";
35
+ declare const boxBackgroundColorProperties: {
36
+ "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
+ "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
+ "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
+ "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40
+ "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
41
+ "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
42
+ "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
43
+ "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
44
+ "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
45
+ "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
+ "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
47
+ "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
48
+ "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
49
+ "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
+ "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
51
+ "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
+ "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
+ "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
55
+ "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
+ "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
+ };
58
+ declare const boxBorderColorProperties: {
59
+ "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
+ "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
66
+ "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
68
+ "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
+ "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
71
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
72
+ "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
+ "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
+ };
75
+ declare const boxBorderStyleProperties: BoxBorderStyle[];
76
+ declare const boxBoxSizingProperties: BoxSizing[];
77
+ declare const boxCursorProperties: BoxCursor[];
78
+ declare const boxSpaceProperties: {
79
+ none: string;
80
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
89
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
91
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
92
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
93
+ };
94
+ export type BoxCursorProperties = typeof boxCursorProperties[number];
95
+ export type BoxBorderColorProperties = keyof typeof boxBorderColorProperties;
96
+ export type BoxBackgroundColorProperties = keyof typeof boxBackgroundColorProperties;
97
+ export type BoxBorderStyleProperties = typeof boxBorderStyleProperties[number];
98
+ export type BoxBoxSizingProperties = typeof boxBoxSizingProperties[number];
99
+ export type BoxSpaceProperties = keyof typeof boxSpaceProperties;
100
+ export interface Conditions<T> {
101
+ xs?: T;
102
+ md?: T;
103
+ lg?: T;
104
+ }
105
+ export interface BoxSprinkle {
106
+ width?: string | Conditions<string>;
107
+ height?: string | Conditions<string>;
108
+ cursor?: BoxCursorProperties | Conditions<BoxCursorProperties>;
109
+ backgroundColor?: BoxBackgroundColorProperties | Conditions<BoxBackgroundColorProperties>;
110
+ borderRadius?: string | Conditions<string>;
111
+ borderWidth?: string | Conditions<string>;
112
+ borderColor?: BoxBorderColorProperties | Conditions<BoxBorderColorProperties>;
113
+ borderStyle?: BoxBorderStyleProperties | Conditions<BoxBorderStyleProperties>;
114
+ boxSizing?: BoxBoxSizingProperties | Conditions<BoxBoxSizingProperties>;
115
+ padding?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
116
+ paddingTop?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
117
+ paddingBottom?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
118
+ paddingLeft?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
119
+ paddingRight?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
120
+ margin?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
121
+ marginTop?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
122
+ marginBottom?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
123
+ marginLeft?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
124
+ marginRight?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
125
+ paddingX?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
126
+ paddingY?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
127
+ p?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
128
+ pl?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
129
+ pr?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
130
+ pt?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
131
+ pb?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
132
+ px?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
133
+ py?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
134
+ marginX?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
135
+ marginY?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
136
+ m?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
137
+ mr?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
138
+ ml?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
139
+ mt?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
140
+ mb?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
141
+ mx?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
142
+ my?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
143
+ }
144
+ declare const fileUploader: {
145
+ style: {
146
+ container: string;
147
+ disabled: string;
148
+ input: string;
149
+ skeleton: string;
150
+ };
151
+ sprinkle: ((props: {
152
+ aspectRatio?: "none" | "1-1" | "16-9" | "9-16" | "4-3" | "3-4" | "2-1" | "1-2" | undefined;
153
+ flexDirection?: "column" | "row" | undefined;
154
+ cursor?: "auto" | "pointer" | undefined;
155
+ }) => string) & {
156
+ properties: Set<"aspectRatio" | "cursor" | "flexDirection">;
157
+ };
158
+ properties: {
159
+ aspectRatio: {
160
+ "1-1": string;
161
+ "16-9": string;
162
+ "9-16": string;
163
+ "4-3": string;
164
+ "3-4": string;
165
+ "2-1": string;
166
+ "1-2": string;
167
+ none: string;
168
+ };
169
+ flexDirection: {
170
+ readonly row: "row";
171
+ readonly column: "column";
172
+ };
173
+ };
174
+ };
175
+ declare const icon: {
176
+ style: string;
177
+ sprinkle: ((props: {
178
+ color?: "primary.interactive" | "primary.textLow" | "primary.textHigh" | "success.interactive" | "success.textLow" | "success.textHigh" | "warning.interactive" | "warning.textLow" | "warning.textHigh" | "danger.interactive" | "danger.textLow" | "danger.textHigh" | "neutral.background" | "neutral.interactive" | "neutral.textDisabled" | "neutral.textLow" | "neutral.textHigh" | undefined;
179
+ cursor?: "auto" | "pointer" | undefined;
180
+ }) => string) & {
181
+ properties: Set<"color" | "cursor">;
182
+ };
183
+ properties: {
184
+ color: {
185
+ "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
+ "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
187
+ "primary.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
+ "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
+ "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
+ "success.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
+ "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
+ "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
+ "warning.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
+ "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
+ "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
+ "danger.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
+ "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
+ "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
+ "neutral.textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
+ "neutral.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
202
+ };
203
+ cursor: readonly [
204
+ "auto",
205
+ "pointer"
206
+ ];
207
+ };
208
+ };
209
+ declare const iconButtonBackgroundColorProperties: {
210
+ transparent: string;
211
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
212
+ "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
+ "neutral.interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
+ };
215
+ declare const iconButtonBorderColorProperties: {
216
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
217
+ "neutral.interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
+ transparent: string;
219
+ "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
+ "neutral.interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
221
+ };
222
+ export type IconButtonBackgroundColorProperties = keyof typeof iconButtonBackgroundColorProperties;
223
+ export type IconButtonBorderColorProperties = keyof typeof iconButtonBorderColorProperties;
224
+ export interface Conditions<T> {
225
+ xs?: T;
226
+ md?: T;
227
+ lg?: T;
228
+ focus?: T;
229
+ active?: T;
230
+ hover?: T;
231
+ }
232
+ export interface IconButtonSprinkle {
233
+ size?: string | Conditions<string>;
234
+ borderColor?: IconButtonBorderColorProperties | Conditions<IconButtonBorderColorProperties>;
235
+ backgroundColor?: IconButtonBackgroundColorProperties | Conditions<IconButtonBackgroundColorProperties>;
113
236
  }
114
237
  declare const text: {
115
- style: string;
116
- sprinkle: ((props: {
117
- color?: "primary.interactive" | "primary.textLow" | "primary.textHigh" | "success.interactive" | "success.textLow" | "success.textHigh" | "warning.interactive" | "warning.textLow" | "warning.textHigh" | "danger.interactive" | "danger.textLow" | "danger.textHigh" | "neutral.background" | "neutral.interactive" | "neutral.textDisabled" | "neutral.textLow" | "neutral.textHigh" | "currentColor" | undefined;
118
- lineHeight?: "caption" | "base" | "highlight" | undefined;
119
- fontWeight?: "regular" | "bold" | undefined;
120
- fontSize?: "caption" | "base" | "highlight" | undefined;
121
- textAlign?: "left" | "right" | "center" | "justify" | undefined;
122
- }) => string) & {
123
- properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
124
- };
125
- properties: {
126
- colors: {
127
- currentColor: string;
128
- "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
129
- "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
- "primary.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
- "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
- "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
133
- "success.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
134
- "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
135
- "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
- "warning.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
137
- "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
138
- "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
139
- "danger.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
140
- "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
141
- "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
142
- "neutral.textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
- "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
144
- "neutral.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
145
- };
146
- textAlign: {
147
- readonly left: "left";
148
- readonly right: "right";
149
- readonly center: "center";
150
- readonly justify: "justify";
151
- };
152
- lineHeight: {
153
- caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
- base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
155
- highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
- };
157
- fontWeight: {
158
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
159
- bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
160
- };
161
- fontSize: {
162
- caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
163
- base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
164
- highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
165
- };
166
- };
167
- };
168
- interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
169
- /** width alignment in content */
170
- width: string;
171
- /** height alignment in content */
172
- height: string;
173
- /** borderRadius alignment in content */
174
- borderRadius?: string;
175
- }
176
- type _SkeletonProps1 = Pick<TextProps, "fontSize"> & Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
177
- "data-testid"?: string;
178
- };
179
- declare const Skeleton: React.FC<_SkeletonProps1>;
180
- interface TextComponents {
181
- Skeleton: typeof Skeleton;
238
+ style: string;
239
+ sprinkle: ((props: {
240
+ color?: "primary.interactive" | "primary.textLow" | "primary.textHigh" | "success.interactive" | "success.textLow" | "success.textHigh" | "warning.interactive" | "warning.textLow" | "warning.textHigh" | "danger.interactive" | "danger.textLow" | "danger.textHigh" | "neutral.background" | "neutral.interactive" | "neutral.textDisabled" | "neutral.textLow" | "neutral.textHigh" | "currentColor" | undefined;
241
+ lineHeight?: "caption" | "base" | "highlight" | undefined;
242
+ fontWeight?: "regular" | "bold" | undefined;
243
+ fontSize?: "caption" | "base" | "highlight" | undefined;
244
+ textAlign?: "left" | "right" | "center" | "justify" | undefined;
245
+ }) => string) & {
246
+ properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
247
+ };
248
+ properties: {
249
+ colors: {
250
+ currentColor: string;
251
+ "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
+ "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
+ "primary.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
+ "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
+ "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
+ "success.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
257
+ "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
258
+ "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ "warning.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
260
+ "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
261
+ "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
262
+ "danger.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
263
+ "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
265
+ "neutral.textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
266
+ "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
267
+ "neutral.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
268
+ };
269
+ textAlign: {
270
+ readonly left: "left";
271
+ readonly right: "right";
272
+ readonly center: "center";
273
+ readonly justify: "justify";
274
+ };
275
+ lineHeight: {
276
+ caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
277
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
278
+ highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
279
+ };
280
+ fontWeight: {
281
+ regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
282
+ bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
283
+ };
284
+ fontSize: {
285
+ caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
286
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
287
+ highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
288
+ };
289
+ };
290
+ };
291
+ declare const title: {
292
+ style: import("@vanilla-extract/recipes").RuntimeFn<{
293
+ as: {
294
+ h1: {
295
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
296
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
297
+ };
298
+ h2: {
299
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
300
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
301
+ };
302
+ h3: {
303
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
304
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
305
+ };
306
+ h4: {
307
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
308
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
309
+ };
310
+ h5: {
311
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
312
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
313
+ };
314
+ h6: {
315
+ fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
317
+ };
318
+ };
319
+ defaultVariants: {
320
+ as: string;
321
+ };
322
+ }>;
323
+ sprinkle: ((props: {
324
+ color?: "primary.textLow" | "primary.textHigh" | "success.textLow" | "success.textHigh" | "warning.textLow" | "warning.textHigh" | "danger.textLow" | "danger.textHigh" | "neutral.textLow" | "neutral.textHigh" | undefined;
325
+ textAlign?: "left" | "right" | "center" | "justify" | undefined;
326
+ }) => string) & {
327
+ properties: Set<"color" | "textAlign">;
328
+ };
329
+ properties: {
330
+ colors: {
331
+ "primary.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
332
+ "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
333
+ "success.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
334
+ "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
335
+ "warning.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
336
+ "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
337
+ "danger.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
338
+ "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
339
+ "neutral.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
340
+ "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
341
+ };
342
+ textAlign: {
343
+ readonly left: "left";
344
+ readonly right: "right";
345
+ readonly center: "center";
346
+ readonly justify: "justify";
347
+ };
348
+ };
349
+ };
350
+ declare const popover: {
351
+ style: {
352
+ content: string;
353
+ baseArrow: string;
354
+ arrow: Record<"bottom" | "left" | "right" | "top", string>;
355
+ placement: Record<"bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end", string>;
356
+ };
357
+ sprinkle: ((props: {
358
+ backgroundColor?: "primary" | "success" | "warning" | "danger" | "neutral" | "light" | undefined;
359
+ color?: "primary" | "success" | "warning" | "danger" | "neutral" | "light" | undefined;
360
+ padding?: "base" | "none" | undefined;
361
+ }) => string) & {
362
+ properties: Set<"backgroundColor" | "color" | "padding">;
363
+ };
364
+ properties: {
365
+ backgroundColor: {
366
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
367
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
368
+ danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
369
+ neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
370
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
371
+ light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
372
+ };
373
+ padding: {
374
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
375
+ none: number;
376
+ };
377
+ color: {
378
+ primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
379
+ success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
380
+ danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
381
+ neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
382
+ warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
383
+ light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
384
+ };
385
+ };
386
+ };
387
+ declare const spinner: {
388
+ style: string;
389
+ sprinkle: ((props: {
390
+ color?: "primary.interactive" | "primary.textLow" | "success.interactive" | "success.textLow" | "danger.interactive" | "danger.textLow" | "neutral.background" | "neutral.interactive" | "neutral.textLow" | undefined;
391
+ }) => string) & {
392
+ properties: Set<"color">;
393
+ };
394
+ properties: {
395
+ "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
396
+ "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
397
+ "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
398
+ "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
399
+ "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
400
+ "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
401
+ "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
402
+ "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
403
+ "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
404
+ };
405
+ };
406
+ export type StackDisplay = "block" | "flex" | "inline-flex" | "grid" | "inline-grid";
407
+ export type StackFlexWrap = "nowrap" | "wrap" | "wrap-reverse";
408
+ export type StackFlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
409
+ export type StackJustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
410
+ export type StackAlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
411
+ declare const stackDisplayProperties: StackDisplay[];
412
+ declare const stackFlexDirectionProperties: StackFlexDirection[];
413
+ declare const stackFlexWrapProperties: StackFlexWrap[];
414
+ declare const stackJustifyContentProperties: StackJustifyContent[];
415
+ declare const stackAlignItemsProperties: StackAlignItems[];
416
+ declare const stackSpaceProperties: {
417
+ none: string;
418
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
419
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
420
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
421
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
422
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
423
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
424
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
425
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
426
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
427
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
428
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
429
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
430
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
431
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
432
+ };
433
+ export type StackJustifyContentProperties = typeof stackJustifyContentProperties[number];
434
+ export type StackSpaceProperties = keyof typeof stackSpaceProperties;
435
+ export type StackDisplayProperties = typeof stackDisplayProperties[number];
436
+ export type StackFlexDirectionProperties = typeof stackFlexDirectionProperties[number];
437
+ export type StackAlignItemsProperties = typeof stackAlignItemsProperties[number];
438
+ export type StackFlexWrapProperties = typeof stackFlexWrapProperties[number];
439
+ export interface Conditions<T> {
440
+ xs?: T;
441
+ md?: T;
442
+ lg?: T;
182
443
  }
183
- export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
184
- /** Element to be rendered inside the Text component */
185
- children: ReactNode;
186
- /** Type of html tag to create for the Text component */
187
- as?: "p" | "span";
188
- /** Text size */
189
- fontSize?: keyof typeof text.properties.fontSize;
190
- /** Bold font for the text component */
191
- fontWeight?: keyof typeof text.properties.fontWeight;
192
- /** Text line height */
193
- lineHeight?: keyof typeof text.properties.lineHeight;
194
- /** Text alignment in content */
195
- textAlign?: keyof typeof text.properties.textAlign;
196
- /** Text color */
197
- color?: keyof typeof text.properties.colors;
198
- }
199
- export const Text: React.FC<TextProps> & TextComponents;
200
- type _SkeletonProps2 = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
201
- "data-testid"?: string;
202
- };
203
- declare const _Skeleton1: React.FC<_SkeletonProps2>;
204
- interface BadgeComponents {
205
- _Skeleton1: typeof _Skeleton1;
444
+ export interface StackSprinkle {
445
+ width?: string | Conditions<string>;
446
+ height?: string | Conditions<string>;
447
+ flex?: string | Conditions<string>;
448
+ gridTemplateColumns?: string | Conditions<string>;
449
+ gridTemplateAreas?: string | Conditions<string>;
450
+ gridTemplateRows?: string | Conditions<string>;
451
+ display?: StackDisplayProperties | Conditions<StackDisplayProperties>;
452
+ flexWrap?: StackFlexWrapProperties | Conditions<StackFlexWrapProperties>;
453
+ justifyContent?: StackJustifyContentProperties | Conditions<StackJustifyContentProperties>;
454
+ flexDirection?: StackFlexDirectionProperties | Conditions<StackFlexDirectionProperties>;
455
+ alignItems?: StackAlignItemsProperties | Conditions<StackAlignItemsProperties>;
456
+ gap?: StackSpaceProperties | Conditions<StackSpaceProperties>;
457
+ gridGap?: StackSpaceProperties | Conditions<StackSpaceProperties>;
206
458
  }
207
- export interface BadgeProps extends HTMLAttributes<HTMLElement> {
208
- /** Badge color */
209
- appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
210
- /** Total items to be displayed without badge */
211
- count: number | string;
212
- /** Badge appearance color scheme */
213
- theme?: "surface" | "light";
214
- }
215
- export const Badge: React.FC<BadgeProps> & BadgeComponents;
216
- type Extends = BoxSprinkle & HTMLAttributes<HTMLDivElement>;
217
- export interface BoxProps extends Extends {
218
- /** Element to be rendered inside the Box component */
219
- children?: ReactNode;
220
- }
221
- export const Box: React.FC<BoxProps>;
222
- type _SkeletonProps3 = Partial<Pick<SkeletonProps, "width">> & {
223
- "data-testid"?: string;
224
- };
225
- declare const _Skeleton2: React.FC<_SkeletonProps3>;
226
- interface ButtonComponents {
227
- _Skeleton2: typeof _Skeleton2;
459
+ declare const thumbnail: {
460
+ style: {
461
+ container: string;
462
+ image: string;
463
+ placeholder: string;
464
+ skeleton: string;
465
+ };
466
+ sprinkle: ((props: {
467
+ aspectRatio?: "1-1" | "16-9" | "9-16" | "4-3" | "3-4" | "2-1" | "1-2" | undefined;
468
+ }) => string) & {
469
+ properties: Set<"aspectRatio">;
470
+ };
471
+ properties: {
472
+ aspectRatio: {
473
+ "1-1": string;
474
+ "16-9": string;
475
+ "9-16": string;
476
+ "4-3": string;
477
+ "3-4": string;
478
+ "2-1": string;
479
+ "1-2": string;
480
+ };
481
+ };
482
+ };
483
+ declare const card: {
484
+ style: {
485
+ container: string;
486
+ header: string;
487
+ body: string;
488
+ footer: string;
489
+ };
490
+ sprinkle: ((props: {
491
+ backgroundColor?: "primary.surface" | "primary.surfaceHighlight" | "success.surface" | "success.surfaceHighlight" | "warning.surface" | "warning.surfaceHighlight" | "danger.surface" | "danger.surfaceHighlight" | "neutral.background" | "neutral.surface" | "neutral.surfaceHighlight" | undefined;
492
+ padding?: "base" | "none" | undefined;
493
+ }) => string) & {
494
+ properties: Set<"backgroundColor" | "padding">;
495
+ };
496
+ properties: {
497
+ padding: {
498
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
499
+ none: number;
500
+ };
501
+ backgroundColor: {
502
+ "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
503
+ "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
504
+ "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
505
+ "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
506
+ "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
507
+ "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
508
+ "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
509
+ "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
510
+ "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
511
+ "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
512
+ "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
513
+ };
514
+ };
515
+ };
516
+ declare const paddingProperties: {
517
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
518
+ none: number;
519
+ };
520
+ export type PaddingProperties = keyof typeof paddingProperties;
521
+ export interface Conditions<T> {
522
+ xs?: T;
523
+ md?: T;
524
+ lg?: T;
525
+ }
526
+ export interface SidebarSprinkle {
527
+ maxWidth?: string | Conditions<string>;
528
+ zIndex?: number | Conditions<number>;
529
+ padding?: PaddingProperties | Conditions<PaddingProperties>;
530
+ }
531
+ declare const sidebar: {
532
+ style: {
533
+ overlay: string;
534
+ container: string;
535
+ positions: Record<"left" | "right", string>;
536
+ isVisible: string;
537
+ header: string;
538
+ body: string;
539
+ footer: string;
540
+ };
541
+ sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
542
+ {
543
+ config: {
544
+ padding: {
545
+ values: {
546
+ base: {
547
+ default: string;
548
+ conditions: Record<"xs" | "md" | "lg", string>;
549
+ };
550
+ none: {
551
+ default: string;
552
+ conditions: Record<"xs" | "md" | "lg", string>;
553
+ };
554
+ };
555
+ staticScale: {
556
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
557
+ none: number;
558
+ };
559
+ name: "padding";
560
+ };
561
+ };
562
+ } & {
563
+ config: {
564
+ maxWidth: {
565
+ dynamic: {
566
+ default: string;
567
+ conditions: Record<"xs" | "md" | "lg", string>;
568
+ };
569
+ dynamicScale: true;
570
+ name: "maxWidth";
571
+ vars: {
572
+ default: string;
573
+ conditions: Record<"xs" | "md" | "lg", string>;
574
+ };
575
+ };
576
+ zIndex: {
577
+ dynamic: {
578
+ default: string;
579
+ conditions: Record<"xs" | "md" | "lg", string>;
580
+ };
581
+ dynamicScale: true;
582
+ name: "zIndex";
583
+ vars: {
584
+ default: string;
585
+ conditions: Record<"xs" | "md" | "lg", string>;
586
+ };
587
+ };
588
+ };
589
+ } & {
590
+ config: {
591
+ [x: string]: {
592
+ mappings: ("maxWidth" | "zIndex" | "padding")[];
593
+ };
594
+ };
595
+ }
596
+ ]>;
597
+ properties: {
598
+ padding: {
599
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
600
+ none: number;
601
+ };
602
+ };
603
+ };
604
+ export type BoxExtends = BoxSprinkle & HTMLAttributes<HTMLDivElement>;
605
+ export interface BoxProps extends BoxExtends {
606
+ /** Element to be rendered inside the Box component */
607
+ children?: ReactNode;
608
+ }
609
+ export declare const Box: React.FC<BoxProps>;
610
+ export type ButtonSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
611
+ "data-testid"?: string;
612
+ };
613
+ declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
614
+ export interface ButtonComponents {
615
+ Skeleton: typeof ButtonSkeleton;
228
616
  }
229
617
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
230
- /** Text to be displayed on chip */
231
- children: ReactNode;
232
- /** Button appearance */
233
- appearance?: "primary" | "danger" | "neutral";
234
- /** Set whether button state is disabled */
235
- disabled?: boolean;
618
+ /** Text to be displayed on chip */
619
+ children: ReactNode;
620
+ /** Button appearance */
621
+ appearance?: "primary" | "danger" | "neutral";
622
+ /** Set whether button state is disabled */
623
+ disabled?: boolean;
236
624
  }
237
- export const Button: React.FC<ButtonProps> & ButtonComponents;
238
- type _SkeletonProps4 = Partial<Pick<SkeletonProps, "width">> & {
239
- "data-testid"?: string;
625
+ export declare const Button: React.FC<ButtonProps> & ButtonComponents;
626
+ export type CheckboxSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
627
+ "data-testid"?: string;
240
628
  };
241
- declare const _Skeleton3: React.FC<_SkeletonProps4>;
242
- interface CheckboxComponents {
243
- _Skeleton3: typeof _Skeleton3;
629
+ declare const CheckboxSkeleton: React.FC<CheckboxSkeletonProps>;
630
+ export interface CheckboxComponents {
631
+ Skeleton: typeof CheckboxSkeleton;
244
632
  }
245
633
  export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
246
- /** Checkbox name */
247
- name: string;
248
- /** Checkbox color */
249
- appearance?: "primary" | "danger";
250
- /** Set whether checkbox state is checked */
251
- checked?: boolean;
252
- /** Set whether checkbox state is disabled */
253
- disabled?: boolean;
254
- /** Set whether checkbox state is indeterminate */
255
- indeterminate?: boolean;
256
- /** Text to be rendered inside the component */
257
- label?: string;
258
- }
259
- export const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
634
+ /** Checkbox name */
635
+ name: string;
636
+ /** Checkbox color */
637
+ appearance?: "primary" | "danger";
638
+ /** Set whether checkbox state is checked */
639
+ checked?: boolean;
640
+ /** Set whether checkbox state is disabled */
641
+ disabled?: boolean;
642
+ /** Set whether checkbox state is indeterminate */
643
+ indeterminate?: boolean;
644
+ /** Text to be rendered inside the component */
645
+ label?: string;
646
+ }
647
+ export declare const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
648
+ export type ChipSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
649
+ "data-testid"?: string;
650
+ };
651
+ declare const ChipSkeleton: React.FC<ChipSkeletonProps>;
652
+ export interface ChipComponents {
653
+ Skeleton: typeof ChipSkeleton;
654
+ }
655
+ export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
656
+ /** SVG icon to be displayed on chip */
657
+ icon?: ReactNode;
658
+ /** Informs whether the close icon should be displayed */
659
+ removable?: boolean;
660
+ /** Text to be displayed on chip */
661
+ text: string;
662
+ }
663
+ export declare const Chip: React.FC<ChipProps> & ChipComponents;
664
+ export type FileUploaderSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & Partial<Pick<FileUploaderProps, "aspectRatio">> & {
665
+ "data-testid"?: string;
666
+ };
667
+ declare const FileUploaderSkeleton: React.FC<FileUploaderSkeletonProps>;
668
+ export interface FileUploaderComponents {
669
+ Skeleton: typeof FileUploaderSkeleton;
670
+ }
671
+ export interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement> {
672
+ /** Provide additional context to the action */
673
+ placeholder?: string;
674
+ /** Accept file types */
675
+ accept?: string;
676
+ /** Height value of the file uploader. Defaults to 100% */
677
+ height?: string;
678
+ /** Width value of the file uploader. Defaults to 100% */
679
+ width?: string;
680
+ /** Permitted aspect ratios for the size of the file uploader */
681
+ aspectRatio?: keyof typeof fileUploader.properties.aspectRatio;
682
+ /** Defines the position of the placeholder in relation to the icon */
683
+ flexDirection?: keyof typeof fileUploader.properties.flexDirection;
684
+ }
685
+ export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
686
+ export type IconSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
687
+ "data-testid"?: string;
688
+ };
689
+ declare const IconSkeleton: React.FC<IconSkeletonProps>;
690
+ export interface IconComponents {
691
+ Skeleton: typeof IconSkeleton;
692
+ }
693
+ export interface IconProps extends HTMLAttributes<HTMLDivElement> {
694
+ /** Icon SVG */
695
+ source: ReactNode;
696
+ /** Icon color */
697
+ color?: keyof typeof icon.properties.color;
698
+ /** Icon cursor */
699
+ cursor?: typeof icon.properties.cursor[number];
700
+ }
701
+ export declare const Icon: React.FC<IconProps> & IconComponents;
702
+ export interface IconButtonSkeletonProps {
703
+ "data-testid"?: string;
704
+ }
705
+ declare const IconButtonSkeleton: React.FC<IconButtonSkeletonProps>;
706
+ export type IconButtonExtends = IconButtonSprinkle & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
707
+ export interface IconButtonComponents {
708
+ Skeleton: typeof IconButtonSkeleton;
709
+ }
710
+ export interface IconButtonProps extends IconButtonExtends {
711
+ /** Type of html tag to create for the Icon Button component */
712
+ as?: "button" | "div";
713
+ /** Icon Button SVG */
714
+ source: ReactNode;
715
+ }
716
+ export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
717
+ export type InputPasswordProps = Pick<InputProps, "appearance" | "disabled"> & InputHTMLAttributes<HTMLInputElement>;
718
+ declare const InputPassword: React.FC<InputPasswordProps>;
719
+ export type InputSearchProps = Pick<InputProps, "appearance" | "disabled"> & InputHTMLAttributes<HTMLInputElement>;
720
+ declare const InputSearch: React.FC<InputSearchProps>;
721
+ export type InputSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
722
+ "data-testid"?: string;
723
+ };
724
+ declare const InputSkeleton: React.FC<InputSkeletonProps>;
725
+ export interface InputComponents {
726
+ Password: typeof InputPassword;
727
+ Search: typeof InputSearch;
728
+ Skeleton: typeof InputSkeleton;
729
+ }
730
+ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
731
+ /** Input appearance */
732
+ appearance?: "neutral" | "success" | "warning" | "danger";
733
+ /** Input disabled */
734
+ disabled?: boolean;
735
+ /** Input append position icon */
736
+ appendPosition?: "end" | "start";
737
+ /** Input append icon */
738
+ append?: ReactNode;
739
+ }
740
+ export declare const Input: React.FC<InputProps> & InputComponents;
741
+ export type LabelSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
742
+ "data-testid"?: string;
743
+ };
744
+ declare const LabelSkeleton: React.FC<LabelSkeletonProps>;
745
+ export interface LabelComponents {
746
+ Skeleton: typeof LabelSkeleton;
747
+ }
748
+ export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
749
+ /** Element to be rendered inside the Label component */
750
+ children: ReactNode;
751
+ /** ID of the node with which the label is associated */
752
+ htmlFor?: string;
753
+ /** If true the label will be visually hidden but maintain accessibility purpose */
754
+ hidden?: boolean;
755
+ }
756
+ export declare const Label: React.FC<LabelProps> & LabelComponents;
757
+ export type LinkSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
758
+ "data-testid"?: string;
759
+ };
760
+ declare const LinkSkeleton: React.FC<LinkSkeletonProps>;
761
+ export interface LinkComponents {
762
+ Skeleton: typeof LinkSkeleton;
763
+ }
764
+ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
765
+ /** Text to be displayed on link */
766
+ children: ReactNode;
767
+ /** Link appearance */
768
+ appearance?: "primary" | "danger" | "neutral";
769
+ /** Decoration for the link text */
770
+ textDecoration?: "underline" | "none";
771
+ /** Size of the link text */
772
+ size?: "caption" | "base" | "highlight";
773
+ }
774
+ export declare const Link: React.FC<LinkProps> & LinkComponents;
775
+ export type ListSkeletonItemProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
776
+ "data-testid"?: string;
777
+ };
778
+ declare const ListSkeletonItem: React.FC<ListSkeletonItemProps>;
779
+ export interface ListSkeletonProps extends HTMLAttributes<HTMLDivElement> {
780
+ /** Element to be rendered inside the Skeleton component */
781
+ children: ReactNode;
782
+ /** Data element to reference during testing */
783
+ "data-testid"?: string;
784
+ }
785
+ declare const ListSkeleton: React.FC<ListSkeletonProps>;
786
+ export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
787
+ /** Element to be rendered inside the Item component */
788
+ children: ReactNode;
789
+ }
790
+ declare const ListItem: React.FC<ListItemProps>;
791
+ export interface ListComponents {
792
+ Skeleton: typeof ListSkeleton;
793
+ SkeletonItem: typeof ListSkeletonItem;
794
+ Item: typeof ListItem;
795
+ }
796
+ export interface ListProps extends HTMLAttributes<HTMLUListElement | HTMLOListElement> {
797
+ /** Element to be rendered inside the List component */
798
+ children: ReactNode;
799
+ /** Determines the type of html list that will be rendered */
800
+ as?: "ul" | "ol";
801
+ }
802
+ export declare const List: React.FC<ListProps> & ListComponents;
803
+ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
804
+ /** Popover anchor */
805
+ children: ReactNode;
806
+ /** Content for the Popover */
807
+ content: ReactNode;
808
+ /** Default open popover */
809
+ visible?: boolean;
810
+ /** Function to control popover opening and closing */
811
+ onVisibility?: (visible: boolean) => void;
812
+ /** Conditional for displaying the popover arrow */
813
+ arrow?: boolean;
814
+ /** Popover appearance */
815
+ appearance?: "primary" | "success" | "danger" | "neutral" | "warning" | "light";
816
+ /** Position of the Popover */
817
+ position?: Placement;
818
+ /** Popover padding */
819
+ padding?: keyof typeof popover.properties.padding;
820
+ /** Adds hover event listeners that change the open state, like CSS :hover */
821
+ enabledHover?: boolean;
822
+ /** Adds click event listeners that change the open state */
823
+ enabledClick?: boolean;
824
+ /** Adds listeners that dismiss (close) the floating element */
825
+ enabledDismiss?: boolean;
826
+ /** offset() displaces the floating element from its core placement along the specified axes */
827
+ offset?: number;
828
+ }
829
+ export declare const Popover: React.FC<PopoverProps>;
830
+ export type RadioSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<RadioProps, "as">> & {
831
+ "data-testid"?: string;
832
+ };
833
+ declare const RadioSkeleton: React.FC<RadioSkeletonProps>;
834
+ export interface RadioComponents {
835
+ Skeleton: typeof RadioSkeleton;
836
+ }
837
+ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
838
+ /** Radio name */
839
+ name: string;
840
+ /** Radio appareance */
841
+ as?: "radio" | "button";
842
+ /** Set whether radio state is checked */
843
+ checked?: boolean;
844
+ /** Set whether radio state is disabled */
845
+ disabled?: boolean;
846
+ /** Text to be rendered inside the component */
847
+ label?: string;
848
+ }
849
+ export declare const Radio: React.FC<RadioProps> & RadioComponents;
850
+ export interface SelectGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
851
+ /** Option group label */
852
+ label: string;
853
+ /** Elements to be rendered inside the option group */
854
+ children: ReactNode;
855
+ }
856
+ declare const SelectGroup: React.FC<SelectGroupProps>;
857
+ export interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
858
+ /** Label for the option */
859
+ label: string;
860
+ /** Value of the option */
861
+ value: string;
862
+ }
863
+ declare const SelectOption: React.FC<SelectOptionProps>;
864
+ export type SelectSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
865
+ "data-testid"?: string;
866
+ };
867
+ declare const SelectSkeleton: React.FC<SelectSkeletonProps>;
868
+ export interface SelectComponents {
869
+ Group: typeof SelectGroup;
870
+ Option: typeof SelectOption;
871
+ Skeleton: typeof SelectSkeleton;
872
+ }
873
+ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
874
+ /** Select name */
875
+ name: string;
876
+ /** Select id */
877
+ id: string;
878
+ /** Elements to be rendered inside the select list */
879
+ children: ReactNode;
880
+ /** Select color */
881
+ appearance?: "success" | "warning" | "danger" | "neutral";
882
+ }
883
+ export declare const Select: React.FC<SelectProps> & SelectComponents;
884
+ export interface SpinnerProps extends SVGAttributes<SVGElement> {
885
+ /** Spinner size */
886
+ size?: "small" | "medium" | "large" | number;
887
+ /** Spinner color */
888
+ color?: keyof typeof spinner.properties;
889
+ }
890
+ export declare const Spinner: React.FC<SpinnerProps>;
891
+ export type Extends = StackSprinkle & HTMLAttributes<HTMLDivElement>;
892
+ export interface StackProps extends Extends {
893
+ /** Element to be rendered inside the Stack component */
894
+ children?: ReactNode;
895
+ }
896
+ export declare const Stack: React.FC<StackProps>;
897
+ export type TagSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
898
+ "data-testid"?: string;
899
+ };
900
+ declare const TagSkeleton: React.FC<TagSkeletonProps>;
901
+ export interface TagComponents {
902
+ Skeleton: typeof TagSkeleton;
903
+ }
904
+ export interface TagProps extends HTMLAttributes<HTMLDivElement> {
905
+ /** Element to be rendered inside the Title component */
906
+ children: ReactNode;
907
+ /** Tag color */
908
+ appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
909
+ }
910
+ export declare const Tag: React.FC<TagProps> & TagComponents;
911
+ export type TextSkeletonProps = Pick<TextProps, "fontSize"> & Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
912
+ "data-testid"?: string;
913
+ };
914
+ declare const TextSkeleton: React.FC<TextSkeletonProps>;
915
+ export interface TextComponents {
916
+ Skeleton: typeof TextSkeleton;
917
+ }
918
+ export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
919
+ /** Element to be rendered inside the Text component */
920
+ children: ReactNode;
921
+ /** Type of html tag to create for the Text component */
922
+ as?: "p" | "span";
923
+ /** Text size */
924
+ fontSize?: keyof typeof text.properties.fontSize;
925
+ /** Bold font for the text component */
926
+ fontWeight?: keyof typeof text.properties.fontWeight;
927
+ /** Text line height */
928
+ lineHeight?: keyof typeof text.properties.lineHeight;
929
+ /** Text alignment in content */
930
+ textAlign?: keyof typeof text.properties.textAlign;
931
+ /** Text color */
932
+ color?: keyof typeof text.properties.colors;
933
+ }
934
+ export declare const Text: React.FC<TextProps> & TextComponents;
935
+ export type TextareaSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
936
+ "data-testid"?: string;
937
+ };
938
+ declare const TextareaSkeleton: React.FC<TextareaSkeletonProps>;
939
+ export interface TextareaComponents {
940
+ Skeleton: typeof TextareaSkeleton;
941
+ }
942
+ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
943
+ /** Element to be rendered inside the Textarea component */
944
+ appearance?: "neutral" | "success" | "warning" | "danger";
945
+ /** Number of lines to be rendered for the user to input text */
946
+ lines?: number;
947
+ /** ID of the textarea element */
948
+ id: string;
949
+ }
950
+ export declare const Textarea: React.FC<TextareaProps> & TextareaComponents;
951
+ export type ThumbnailSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<ThumbnailProps, "aspectRatio">> & {
952
+ "data-testid"?: string;
953
+ };
954
+ declare const ThumbnailSkeleton: React.FC<ThumbnailSkeletonProps>;
955
+ export interface ThumbnailComponents {
956
+ Skeleton: typeof ThumbnailSkeleton;
957
+ }
958
+ export interface ThumbnailProps extends ImgHTMLAttributes<HTMLImageElement> {
959
+ /** The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. */
960
+ alt: string;
961
+ /** Element to be displayed on thumbnail */
962
+ children?: ReactNode;
963
+ /** Permitted aspect ratios for the size of the image */
964
+ aspectRatio?: keyof typeof thumbnail.properties.aspectRatio;
965
+ /** Width value of the image. Defaults to 100% */
966
+ width?: string;
967
+ }
968
+ export declare const Thumbnail: React.FC<ThumbnailProps> & ThumbnailComponents;
969
+ export type TitleSkeletonProps = Pick<TitleProps, "as"> & Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
970
+ "data-testid"?: string;
971
+ };
972
+ declare const TitleSkeleton: React.FC<TitleSkeletonProps>;
973
+ export interface TitleComponents {
974
+ Skeleton: typeof TitleSkeleton;
975
+ }
976
+ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
977
+ /** Element to be rendered inside the Title component */
978
+ children: ReactNode;
979
+ /** Type of html tag to create for the Title component */
980
+ as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
981
+ /** Title alignment in content */
982
+ textAlign?: keyof typeof title.properties.textAlign;
983
+ /** Title color */
984
+ color?: keyof typeof title.properties.colors;
985
+ }
986
+ export declare const Title: React.FC<TitleProps> & TitleComponents;
987
+ export type Types = "primary" | "success" | "danger" | "progress";
988
+ export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
989
+ /** Toast id */
990
+ id: string;
991
+ /** Toast size */
992
+ text: string;
993
+ /** Toast type */
994
+ type?: Types;
995
+ /** Toast display time */
996
+ duration?: 4000 | 8000 | 16000;
997
+ /** Tells you whether or not Toast should close automatically */
998
+ autoClose?: boolean;
999
+ /** Tells the toast position when we are using multiple toasts */
1000
+ position?: number;
1001
+ }
1002
+ export declare const Toast: React.FC<ToastProps>;
1003
+ export interface ToastProviderProps {
1004
+ /** Element to be rendered inside the Title component */
1005
+ children: ReactNode;
1006
+ }
1007
+ export declare const ToastProvider: React.FC<ToastProviderProps>;
1008
+ export interface ToastContextProps {
1009
+ closeToast: (id: string) => void;
1010
+ addToast: (toast: Omit<ToastProps, "autoClose">) => void;
1011
+ }
1012
+ export declare const useToast: () => ToastContextProps;
1013
+ export type ToggleSkeletonProps = Partial<Pick<SkeletonProps, "width">> & {
1014
+ "data-testid"?: string;
1015
+ };
1016
+ declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
1017
+ export interface ToggleComponents {
1018
+ Skeleton: typeof ToggleSkeleton;
1019
+ }
1020
+ export interface ToggleProps extends InputHTMLAttributes<HTMLInputElement> {
1021
+ /** Toggle name */
1022
+ name: string;
1023
+ /** Set whether Toggle state is checked */
1024
+ active?: boolean;
1025
+ /** Text to be rendered inside the component */
1026
+ label?: string;
1027
+ }
1028
+ export declare const Toggle: React.FC<ToggleProps> & ToggleComponents;
1029
+ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
1030
+ /** Tooltip anchor */
1031
+ children: ReactNode;
1032
+ /** Text Label for the Tooltip */
1033
+ content: string;
1034
+ /** Position of the tooltip */
1035
+ position?: "top" | "bottom" | "left" | "right";
1036
+ }
1037
+ export declare const Tooltip: React.FC<TooltipProps>;
1038
+ export type AlertSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
1039
+ "data-testid"?: string;
1040
+ };
1041
+ declare const AlertSkeleton: React.FC<AlertSkeletonProps>;
1042
+ export interface AlertComponents {
1043
+ Skeleton: typeof AlertSkeleton;
1044
+ }
1045
+ export interface AlertProps extends HTMLAttributes<HTMLElement> {
1046
+ /** Alert title */
1047
+ title?: string;
1048
+ /** Alert appearance */
1049
+ appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
1050
+ /** Alert body content */
1051
+ children: ReactNode;
1052
+ /** Function to be passed on actioning the dismiss button */
1053
+ onRemove?: () => void;
1054
+ /** Determines if the alert is shown or not */
1055
+ show?: boolean;
1056
+ }
1057
+ export declare const Alert: React.FC<AlertProps> & AlertComponents;
1058
+ export interface CardBodyProps extends HTMLAttributes<HTMLElement> {
1059
+ /** Body content */
1060
+ children: ReactNode;
1061
+ /** Card padding */
1062
+ padding?: keyof typeof card.properties.padding;
1063
+ }
1064
+ declare const CardBody: React.FC<CardBodyProps>;
1065
+ export interface CardFooterProps extends HTMLAttributes<HTMLElement> {
1066
+ /** Footer content */
1067
+ children: ReactNode;
1068
+ }
1069
+ declare const CardFooter: React.FC<CardFooterProps>;
1070
+ export interface CardHeaderProps extends HTMLAttributes<HTMLElement> {
1071
+ /** Header content */
1072
+ children?: ReactNode;
1073
+ /** Header title */
1074
+ title?: string;
1075
+ }
1076
+ declare const CardHeader: React.FC<CardHeaderProps>;
1077
+ export interface CardComponents {
1078
+ Body: typeof CardBody;
1079
+ Footer: typeof CardFooter;
1080
+ Header: typeof CardHeader;
1081
+ }
1082
+ export interface CardProps extends HTMLAttributes<HTMLElement> {
1083
+ /** Card content */
1084
+ children: ReactNode;
1085
+ /** Card padding */
1086
+ padding?: keyof typeof card.properties.padding;
1087
+ /** Card background */
1088
+ backgroundColor?: keyof typeof card.properties.backgroundColor;
1089
+ }
1090
+ export declare const Card: React.FC<CardProps> & CardComponents;
1091
+ export interface SidebarBodyProps extends HTMLAttributes<HTMLElement> {
1092
+ /** Body content */
1093
+ children: ReactNode;
1094
+ /** Sidebar padding */
1095
+ padding?: keyof typeof sidebar.properties.padding;
1096
+ }
1097
+ declare const SidebarBody: React.FC<SidebarBodyProps>;
1098
+ export interface SidebarFooterProps extends HTMLAttributes<HTMLElement> {
1099
+ /** Footer content */
1100
+ children: ReactNode;
1101
+ /** Sidebar padding */
1102
+ padding?: keyof typeof sidebar.properties.padding;
1103
+ }
1104
+ declare const SidebarFooter: React.FC<SidebarFooterProps>;
1105
+ export interface SidebarHeaderProps extends HTMLAttributes<HTMLElement> {
1106
+ /** Header content */
1107
+ children?: ReactNode;
1108
+ /** Header title */
1109
+ title?: string;
1110
+ /** Sidebar padding */
1111
+ padding?: keyof typeof sidebar.properties.padding;
1112
+ }
1113
+ declare const SidebarHeader: React.FC<SidebarHeaderProps>;
1114
+ export type SidebarExtends = SidebarSprinkle & HTMLAttributes<HTMLDivElement>;
1115
+ export interface SidebarComponents {
1116
+ Body: typeof SidebarBody;
1117
+ Footer: typeof SidebarFooter;
1118
+ Header: typeof SidebarHeader;
1119
+ }
1120
+ export interface SidebarProps extends SidebarExtends {
1121
+ /** Sidebar position */
1122
+ position?: "right" | "left";
1123
+ /** Sidebar padding */
1124
+ padding?: keyof typeof sidebar.properties.padding;
1125
+ /** Sidebar body content */
1126
+ children: ReactNode;
1127
+ /** Function to be passed on actioning the dismiss button */
1128
+ onRemove?: () => void;
1129
+ /** Controls the menu display */
1130
+ open?: boolean;
1131
+ }
1132
+ export declare const Sidebar: React.FC<SidebarProps> & SidebarComponents;
1133
+ export interface TabsButtonProps extends HTMLAttributes<HTMLLIElement> {
1134
+ /** Label of the tab button. */
1135
+ label: string;
1136
+ /** Determines if tab is active. */
1137
+ active?: boolean;
1138
+ /** Position of the tab inside the tab list. */
1139
+ index: number;
1140
+ /** Function executed when clicking the tab. */
1141
+ setActiveTab: (index: number) => void;
1142
+ /** Determines if tab spans all available width. */
1143
+ fullWidth?: boolean;
1144
+ }
1145
+ declare const TabsButton: React.FC<TabsButtonProps>;
1146
+ export interface TabsItemProps extends HTMLAttributes<HTMLElement> {
1147
+ /** Label of the tabpanel. Used to pair with it's corresponding tab control. */
1148
+ label: string;
1149
+ /** Content of the panel. */
1150
+ children: ReactNode | ReactNode[];
1151
+ }
1152
+ declare const TabsItem: React.FC<TabsItemProps>;
1153
+ export interface TabsComponents {
1154
+ Button: typeof TabsButton;
1155
+ Item: typeof TabsItem;
1156
+ }
1157
+ export interface TabsProps extends HTMLAttributes<HTMLElement> {
1158
+ /** Tabs content. */
1159
+ children: ReactElement<TabsButtonProps>[];
1160
+ /** Sets the indicated tab as active by default. If unset, defaults to first tab. */
1161
+ preSelectedTab?: number;
1162
+ /** Determines if tabs should span available width. */
1163
+ fullWidth?: boolean;
1164
+ }
1165
+ export declare const Tabs: React.FC<TabsProps> & TabsComponents;
260
1166
 
261
- //# sourceMappingURL=index.d.ts.map
1167
+ export {};