@nimbus-ds/box 3.1.0-rc.1 → 3.1.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.
Files changed (3) hide show
  1. package/dist/index.d.ts +575 -0
  2. package/dist/index.js +1 -0
  3. package/package.json +1 -1
package/dist/index.d.ts ADDED
@@ -0,0 +1,575 @@
1
+ // Generated by dts-bundle-generator v7.1.0
2
+
3
+ import React from 'react';
4
+ import { ComponentPropsWithRef, HTMLAttributes, ReactNode } from 'react';
5
+
6
+ export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
7
+ export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
8
+ as?: E;
9
+ }>>;
10
+ export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}
11
+ /**
12
+ * Extends original type to ensure built in React types play nice
13
+ * with polymorphic components still e.g. `React.ElementRef` etc.
14
+ */
15
+ > extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
16
+ /**
17
+ * When `as` prop is passed, use this overload.
18
+ * Merges original own props (without DOM props) and the inferred props
19
+ * from `as` element with the own props taking precendence.
20
+ *
21
+ * We explicitly avoid `React.ElementType` and manually narrow the prop types
22
+ * so that events are typed when using JSX.IntrinsicElements.
23
+ */
24
+ <As = IntrinsicElementString>(props: As extends "" ? {
25
+ as: keyof JSX.IntrinsicElements;
26
+ } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
27
+ as: As;
28
+ }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
29
+ as: As;
30
+ }> : never): React.ReactElement | null;
31
+ }
32
+ export interface Conditions<T> {
33
+ xs?: T;
34
+ md?: T;
35
+ lg?: T;
36
+ xl?: T;
37
+ }
38
+ export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
39
+ export type BoxSizing = "border-box" | "content-box";
40
+ export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
41
+ export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid" | "none";
42
+ export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
43
+ export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
44
+ export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
45
+ export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
46
+ export type AlignSelf = "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
47
+ export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
48
+ export type Overflow = "visible" | "hidden" | "scroll" | "auto";
49
+ export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
50
+ export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
51
+ declare const propertiesBox: {
52
+ gap: {
53
+ none: string; /**
54
+ * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
55
+ */
56
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
66
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
68
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ };
71
+ gridGap: {
72
+ none: string; /**
73
+ * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
74
+ */
75
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
76
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
78
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
89
+ };
90
+ display: Display[];
91
+ flexDirection: FlexDirection[];
92
+ flexWrap: FlexWrap[];
93
+ justifyContent: JustifyContent[];
94
+ alignItems: AlignItems[];
95
+ alignSelf: AlignSelf[];
96
+ pointerEvents: PointerEvents[];
97
+ backgroundColor: {
98
+ "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
99
+ "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
100
+ "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
101
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
102
+ "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
103
+ "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
104
+ "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
105
+ "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
106
+ "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
107
+ "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
+ "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
111
+ "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
+ "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
+ "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
115
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
116
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
+ "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
+ "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
119
+ "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
+ transparent: string;
121
+ };
122
+ color: {
123
+ currentColor: string;
124
+ "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
125
+ "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
+ "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
129
+ "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
+ "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
+ "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
+ "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
133
+ "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
134
+ "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
135
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
137
+ "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
138
+ "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
139
+ "danger-textLow": `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-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
+ "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
144
+ "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
145
+ "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
146
+ transparent: string;
147
+ };
148
+ borderColor: {
149
+ "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
150
+ "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
151
+ "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
+ "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
+ "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
+ "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
155
+ "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
+ "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
+ "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
158
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
159
+ "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
160
+ "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
161
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
162
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
163
+ "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
164
+ transparent: string;
165
+ };
166
+ borderStyle: BorderStyle[];
167
+ boxSizing: BoxSizing[];
168
+ cursor: Cursor[];
169
+ space: {
170
+ none: string;
171
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
172
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
173
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
174
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
176
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
177
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
178
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
179
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
180
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
181
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
182
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
183
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
+ };
185
+ margin: {
186
+ none: string;
187
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
+ auto: string;
201
+ };
202
+ position: Position[];
203
+ overflow: Overflow[];
204
+ overflowX: Overflow[];
205
+ overflowY: Overflow[];
206
+ boxShadow: {
207
+ card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
208
+ popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
209
+ modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
210
+ focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
+ };
212
+ transitionDuration: {
213
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
+ fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
215
+ slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
+ slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
217
+ };
218
+ transitionTimingFunction: TransitionTiming[];
219
+ };
220
+ export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
221
+ export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
222
+ export type BoxColorProperties = keyof typeof propertiesBox.color;
223
+ export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
224
+ export type BoxSpaceProperties = keyof typeof propertiesBox.space;
225
+ export type BoxMarginProperties = keyof typeof propertiesBox.margin;
226
+ export type BoxGapProperties = keyof typeof propertiesBox.gap;
227
+ export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
228
+ export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
229
+ export interface BoxConditions<T> extends Conditions<T> {
230
+ focus?: T;
231
+ focusWithin?: T;
232
+ active?: T;
233
+ hover?: T;
234
+ disabled?: T;
235
+ }
236
+ export interface BoxSprinkle {
237
+ /**
238
+ * The width property specifies the width of a box's content area.
239
+ */
240
+ width?: string | BoxConditions<string>;
241
+ /**
242
+ * The height property specifies the height of a box's content area.
243
+ */
244
+ height?: string | BoxConditions<string>;
245
+ /**
246
+ * The max width property specifies the width of a box's content area.
247
+ */
248
+ maxWidth?: string | BoxConditions<string>;
249
+ /**
250
+ * The max height property specifies the height of a box's content area.
251
+ */
252
+ maxHeight?: string | BoxConditions<string>;
253
+ /**
254
+ * The min width property specifies the width of a box's content area.
255
+ */
256
+ minWidth?: string | BoxConditions<string>;
257
+ /**
258
+ * The min height property specifies the height of a box's content area.
259
+ */
260
+ minHeight?: string | BoxConditions<string>;
261
+ /**
262
+ * The bottom property participates in setting the vertical position of a positioned box.
263
+ */
264
+ bottom?: string | BoxConditions<string>;
265
+ /**
266
+ * The left property participates in specifying the horizontal position of a positioned box.
267
+ */
268
+ left?: string | BoxConditions<string>;
269
+ /**
270
+ * The right property participates in specifying the horizontal position of a positioned box.
271
+ */
272
+ right?: string | BoxConditions<string>;
273
+ /**
274
+ * The top property participates in setting the vertical position of a positioned box.
275
+ */
276
+ top?: string | BoxConditions<string>;
277
+ /**
278
+ * This is the shorthand for flexGrow, flexShrink and flexBasis combined.
279
+ */
280
+ flex?: string | BoxConditions<string>;
281
+ /**
282
+ * This defines the ability for a flex item to shrink if necessary.
283
+ */
284
+ flexShrink?: string | BoxConditions<string>;
285
+ /**
286
+ * This defines the ability for a flex item to grow if necessary.
287
+ */
288
+ flexGrow?: string | BoxConditions<string>;
289
+ /**
290
+ * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
291
+ */
292
+ flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
293
+ /**
294
+ * The order property controls the order in which they appear in a flex container.
295
+ */
296
+ order?: string | BoxConditions<string>;
297
+ /**
298
+ * The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
299
+ */
300
+ gridTemplateColumns?: string | BoxConditions<string>;
301
+ /**
302
+ * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
303
+ */
304
+ gridTemplateAreas?: string | BoxConditions<string>;
305
+ /**
306
+ * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
307
+ */
308
+ gridTemplateRows?: string | BoxConditions<string>;
309
+ /**
310
+ * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
311
+ * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
312
+ */
313
+ gridArea?: string | BoxConditions<string>;
314
+ /**
315
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
316
+ * such as grid or flex.
317
+ */
318
+ display?: Display | BoxConditions<Display>;
319
+ /**
320
+ * The justifyContent property defines how the browser distributes space between and around content items along
321
+ * the main-axis of a flex container, and the inline axis of a grid container.
322
+ */
323
+ justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
324
+ /**
325
+ * The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
326
+ */
327
+ flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
328
+ /**
329
+ * 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.
330
+ * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
331
+ */
332
+ alignItems?: AlignItems | BoxConditions<AlignItems>;
333
+ /**
334
+ * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
335
+ * In Flexbox, it aligns the item on the cross axis.
336
+ */
337
+ alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
338
+ /**
339
+ * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
340
+ */
341
+ gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
342
+ /**
343
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
344
+ */
345
+ gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
346
+ /**
347
+ * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
348
+ */
349
+ pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
350
+ /**
351
+ * The position property sets how an box is positioned in a document.
352
+ */
353
+ position?: Position | BoxConditions<Position>;
354
+ /**
355
+ * The overflow shorthand property sets the desired behavior for an box's overflow.
356
+ */
357
+ overflow?: Overflow | BoxConditions<Overflow>;
358
+ /**
359
+ * The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
360
+ */
361
+ overflowX?: Overflow | BoxConditions<Overflow>;
362
+ /**
363
+ * The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
364
+ */
365
+ overflowY?: Overflow | BoxConditions<Overflow>;
366
+ /**
367
+ * The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
368
+ */
369
+ cursor?: Cursor | BoxConditions<Cursor>;
370
+ /**
371
+ * The backgroundColor property sets the background color of the box.
372
+ * @default neutral-background
373
+ * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
374
+ */
375
+ backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
376
+ /**
377
+ * The color property is used to set the color of the box.
378
+ */
379
+ color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
380
+ /**
381
+ * The borderRadius property rounds the corners of an box's outer border edge.
382
+ */
383
+ borderRadius?: string | BoxConditions<string>;
384
+ /**
385
+ * The borderWidth property sets the width of an box's border.
386
+ */
387
+ borderWidth?: string | BoxConditions<string>;
388
+ /**
389
+ * The borderColor property sets the color of the box's four borders.
390
+ */
391
+ borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
392
+ /**
393
+ * borderStyle property sets the line style for all four sides of an box's border.
394
+ */
395
+ borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
396
+ /**
397
+ * The boxSizing property sets how the total width and height of an box is calculated.
398
+ * @default border-box
399
+ */
400
+ boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
401
+ /**
402
+ * The boxShadow property adds shadow effects around an box's frame.
403
+ */
404
+ boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
405
+ /**
406
+ * The padding properties are used to generate space around an box's content area.
407
+ */
408
+ padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
409
+ /**
410
+ * The paddingTop property sets the height of the padding area on the top of an box.
411
+ */
412
+ paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
413
+ /**
414
+ * The paddingBottom property sets the height of the padding area on the bottom of an box.
415
+ */
416
+ paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
417
+ /**
418
+ * The paddingLeft property sets the width of the padding area to the left of an box.
419
+ */
420
+ paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
421
+ /**
422
+ * The paddingLeft property sets the width of the padding area to the right of an box.
423
+ */
424
+ paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
425
+ /**
426
+ * The margin shorthand property sets the margin area on all four sides of an box.
427
+ */
428
+ margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
429
+ /**
430
+ * The marginTop property sets the margin area on the top of an box.
431
+ */
432
+ marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
433
+ /**
434
+ * The marginBottom property sets the margin area on the bottom of an box.
435
+ */
436
+ marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
437
+ /**
438
+ * The marginLeft property sets the margin area on the left side of an box.
439
+ */
440
+ marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
441
+ /**
442
+ * The marginRight property sets the margin area on the right side of an box.
443
+ */
444
+ marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
445
+ /**
446
+ * The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
447
+ */
448
+ transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
449
+ /**
450
+ * The transitionProperty property sets the CSS properties to which a transition effect should be applied.
451
+ */
452
+ transitionProperty?: string | BoxConditions<string>;
453
+ /**
454
+ * The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
455
+ */
456
+ transitionDelay?: string | BoxConditions<string>;
457
+ /**
458
+ * 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.
459
+ */
460
+ transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
461
+ /**
462
+ * The zIndex property specifies the stack order of the box.
463
+ */
464
+ zIndex?: number | BoxConditions<number>;
465
+ /**
466
+ * The backgroundImage property sets one or more background images on an element.
467
+ */
468
+ backgroundImage?: string | BoxConditions<string>;
469
+ /**
470
+ * The backgroundPosition property sets the initial position for each background image.
471
+ * The position is relative to the position layer set by background-origin.
472
+ */
473
+ backgroundPosition?: string | BoxConditions<string>;
474
+ /**
475
+ * The backgroundBlendMode property sets how an element's background images should blend with each
476
+ * other and with the element's background color.
477
+ */
478
+ backgroundBlendMode?: string | BoxConditions<string>;
479
+ /**
480
+ * 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.
481
+ */
482
+ backgroundRepeat?: string | BoxConditions<string>;
483
+ /**
484
+ * 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.
485
+ */
486
+ backgroundSize?: string | BoxConditions<string>;
487
+ /**
488
+ * The p shorthand property sets the margin area on all four sides of an box.
489
+ */
490
+ p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
491
+ /**
492
+ * The pl shorthand property sets the width of the padding area to the left of an box.
493
+ */
494
+ pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
495
+ /**
496
+ * The pl shorthand property sets the width of the padding area to the right of an box.
497
+ */
498
+ pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
499
+ /**
500
+ * The pt shorthand property sets the height of the padding area on the top of an box.
501
+ */
502
+ pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
503
+ /**
504
+ * The pb shorthand property sets the height of the padding area on the botton of an box.
505
+ */
506
+ pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
507
+ /**
508
+ * The px shorthand property defines the width of the left and right padding area of a box.
509
+ */
510
+ px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
511
+ /**
512
+ * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
513
+ */
514
+ py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
515
+ /**
516
+ * The paddingX shorthand property defines the width of the left and right padding area of a box.
517
+ */
518
+ paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
519
+ /**
520
+ * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
521
+ */
522
+ paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
523
+ /**
524
+ * The m shorthand property sets the margin area on all four sides of an box.
525
+ */
526
+ m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
527
+ /**
528
+ * The mr property sets the margin area on the right side of an box.
529
+ */
530
+ mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
531
+ /**
532
+ * The ml property sets the margin area on the left side of an box.
533
+ */
534
+ ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
535
+ /**
536
+ * The mt property sets the margin area on the top of an box.
537
+ */
538
+ mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
539
+ /**
540
+ * The marginBottom property sets the margin area on the bottom of an box.
541
+ */
542
+ mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
543
+ /**
544
+ * The mx property defines the margin area on the left and right side of a box.
545
+ */
546
+ mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
547
+ /**
548
+ * The my property defines the margin area on the top and bottom of a box
549
+ */
550
+ my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
551
+ /**
552
+ * The marginX property defines the margin area on the left and right side of a box.
553
+ */
554
+ marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
555
+ /**
556
+ * The marginY property defines the margin area on the top and bottom of a box
557
+ */
558
+ marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
559
+ }
560
+ export interface BoxProperties extends BoxSprinkle {
561
+ /**
562
+ * Element to be rendered inside the Box component. Meu teste
563
+ * @TJS-type React.ReactNode
564
+ */
565
+ children?: ReactNode;
566
+ }
567
+ export type BoxBaseProps = BoxProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
568
+ export declare const Box: PolymorphicForwardRefComponent<"div", BoxBaseProps>;
569
+ export type BoxProps = ComponentPropsWithRef<typeof Box>;
570
+
571
+ export {
572
+ Box as default,
573
+ };
574
+
575
+ export {};
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/box"]=t(require("react"),require("@nimbus-ds/styles")):e["@nimbus-ds/box"]=t(e.react,e["@nimbus-ds/styles"])}(global,((e,t)=>(()=>{"use strict";var r={521:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Box=void 0;const n=r(15).__importStar(r(156)),o=r(990),a=(0,n.forwardRef)((({className:e,style:t,as:r="div",boxSizing:a="border-box",...i},c)=>{const{className:u,style:l,otherProps:f}=o.box.sprinkle({...i,boxSizing:a});return n.default.createElement(r,{ref:c,className:u,style:l,...f})}));t.Box=a,a.displayName="Box"},15:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>O,__asyncGenerator:()=>m,__asyncValues:()=>g,__await:()=>w,__awaiter:()=>f,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>E,__createBinding:()=>p,__decorate:()=>c,__exportStar:()=>y,__extends:()=>o,__generator:()=>s,__importDefault:()=>S,__importStar:()=>P,__makeTemplateObject:()=>x,__metadata:()=>l,__param:()=>u,__read:()=>b,__rest:()=>i,__spread:()=>v,__spreadArray:()=>_,__spreadArrays:()=>h,__values:()=>d});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function c(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function u(e,t){return function(r,n){t(r,n,e)}}function l(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function f(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{u(n.next(e))}catch(e){a(e)}}function c(e){try{u(n.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}u((n=n.apply(e,t||[])).next())}))}function s(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}}var p=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function y(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||p(t,e,r)}function d(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function b(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function v(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(b(arguments[t]));return e}function h(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,c=a.length;i<c;i++,o++)n[o]=a[i];return n}function _(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function w(e){return this instanceof w?(this.v=e,this):new w(e)}function m(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof w?Promise.resolve(r.value.v).then(u,l):f(a[0][2],r)}catch(e){f(a[0][3],e)}var r}function u(e){c("next",e)}function l(e){c("throw",e)}function f(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function O(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:w(e[n](t)),done:"return"===n}:o?o(t):t}:o}}function g(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=d(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function x(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var j=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function P(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&p(t,e,r);return j(t,e),t}function S(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function E(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},990:e=>{e.exports=t},156:t=>{t.exports=e}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{var e=a;Object.defineProperty(e,"__esModule",{value:!0}),e.Box=void 0;const t=o(521);var r=o(521);Object.defineProperty(e,"Box",{enumerable:!0,get:function(){return r.Box}}),e.default=t.Box})(),a})()));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "3.1.0-rc.1",
3
+ "version": "3.1.0-rc.3",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [