@nimbus-ds/box 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.d.ts +114 -47
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
4
 
5
+ ## 2023-02-09 `2.3.0`
6
+
7
+ ### 🎉 New features
8
+
9
+ - Added properties present in the `@nimbus-ds/stack` package to the component because `Stack` has been deprecated. ([#83](https://github.com/TiendaNube/nimbus-design-system/pull/83) by [@juniorconquista](https://github.com/juniorconquista))
10
+
5
11
  ## 2023-02-08 `2.2.0`
6
12
 
7
13
  ### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -37,9 +37,55 @@ export interface Conditions<T> {
37
37
  export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
38
38
  export type BoxSizing = "border-box" | "content-box";
39
39
  export type Cursor = "auto" | "pointer";
40
+ export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid";
41
+ export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
42
+ export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
43
+ export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
44
+ export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
40
45
  export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
41
46
  export type Overflow = "visible" | "hidden" | "scroll" | "auto";
47
+ export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
42
48
  declare const propertiesBox: {
49
+ gap: {
50
+ none: string;
51
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
55
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ };
66
+ gridGap: {
67
+ none: string;
68
+ "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
71
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
72
+ "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
75
+ "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
76
+ "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
+ "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
78
+ "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
+ "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80
+ "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
+ };
83
+ display: Display[];
84
+ flexDirection: FlexDirection[];
85
+ flexWrap: FlexWrap[];
86
+ justifyContent: JustifyContent[];
87
+ alignItems: AlignItems[];
88
+ pointerEvents: PointerEvents[];
43
89
  backgroundColor: {
44
90
  "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
45
91
  "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -125,54 +171,75 @@ export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
125
171
  export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
126
172
  export type BoxSpaceProperties = keyof typeof propertiesBox.space;
127
173
  export type BoxMarginProperties = keyof typeof propertiesBox.margin;
174
+ export type BoxGapProperties = keyof typeof propertiesBox.gap;
175
+ export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
176
+ export interface BoxConditions<T> extends Conditions<T> {
177
+ focus?: T;
178
+ active?: T;
179
+ hover?: T;
180
+ }
128
181
  export interface BoxSprinkle {
129
- width?: string | Conditions<string>;
130
- height?: string | Conditions<string>;
131
- maxWidth?: string | Conditions<string>;
132
- maxHeight?: string | Conditions<string>;
133
- bottom?: string | Conditions<string>;
134
- left?: string | Conditions<string>;
135
- right?: string | Conditions<string>;
136
- top?: string | Conditions<string>;
137
- position?: Position | Conditions<Position>;
138
- overflow?: Overflow | Conditions<Overflow>;
139
- overflowX?: Overflow | Conditions<Overflow>;
140
- overflowY?: Overflow | Conditions<Overflow>;
141
- cursor?: Cursor | Conditions<Cursor>;
142
- backgroundColor?: BoxBackgroundColorProperties | Conditions<BoxBackgroundColorProperties>;
143
- borderRadius?: string | Conditions<string>;
144
- borderWidth?: string | Conditions<string>;
145
- borderColor?: BoxBorderColorProperties | Conditions<BoxBorderColorProperties>;
146
- borderStyle?: BorderStyle | Conditions<BorderStyle>;
147
- boxSizing?: BoxSizing | Conditions<BoxSizing>;
148
- padding?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
149
- paddingTop?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
150
- paddingBottom?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
151
- paddingLeft?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
152
- paddingRight?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
153
- margin?: BoxMarginProperties | Conditions<BoxMarginProperties>;
154
- marginTop?: BoxMarginProperties | Conditions<BoxMarginProperties>;
155
- marginBottom?: BoxMarginProperties | Conditions<BoxMarginProperties>;
156
- marginLeft?: BoxMarginProperties | Conditions<BoxMarginProperties>;
157
- marginRight?: BoxMarginProperties | Conditions<BoxMarginProperties>;
158
- paddingX?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
159
- paddingY?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
160
- p?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
161
- pl?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
162
- pr?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
163
- pt?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
164
- pb?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
165
- px?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
166
- py?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
167
- marginX?: BoxMarginProperties | Conditions<BoxMarginProperties>;
168
- marginY?: BoxMarginProperties | Conditions<BoxMarginProperties>;
169
- m?: BoxMarginProperties | Conditions<BoxMarginProperties>;
170
- mr?: BoxMarginProperties | Conditions<BoxMarginProperties>;
171
- ml?: BoxMarginProperties | Conditions<BoxMarginProperties>;
172
- mt?: BoxMarginProperties | Conditions<BoxMarginProperties>;
173
- mb?: BoxMarginProperties | Conditions<BoxMarginProperties>;
174
- mx?: BoxMarginProperties | Conditions<BoxMarginProperties>;
175
- my?: BoxMarginProperties | Conditions<BoxMarginProperties>;
182
+ width?: string | BoxConditions<string>;
183
+ height?: string | BoxConditions<string>;
184
+ maxWidth?: string | BoxConditions<string>;
185
+ maxHeight?: string | BoxConditions<string>;
186
+ bottom?: string | BoxConditions<string>;
187
+ left?: string | BoxConditions<string>;
188
+ right?: string | BoxConditions<string>;
189
+ top?: string | BoxConditions<string>;
190
+ flex?: string | BoxConditions<string>;
191
+ flexShrink?: string | BoxConditions<string>;
192
+ gridTemplateColumns?: string | BoxConditions<string>;
193
+ gridTemplateAreas?: string | BoxConditions<string>;
194
+ gridTemplateRows?: string | BoxConditions<string>;
195
+ gridArea?: string | BoxConditions<string>;
196
+ display?: Display | BoxConditions<Display>;
197
+ flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
198
+ justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
199
+ flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
200
+ alignItems?: AlignItems | BoxConditions<AlignItems>;
201
+ gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
202
+ gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
203
+ pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
204
+ position?: Position | BoxConditions<Position>;
205
+ overflow?: Overflow | BoxConditions<Overflow>;
206
+ overflowX?: Overflow | BoxConditions<Overflow>;
207
+ overflowY?: Overflow | BoxConditions<Overflow>;
208
+ cursor?: Cursor | BoxConditions<Cursor>;
209
+ backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
210
+ borderRadius?: string | BoxConditions<string>;
211
+ borderWidth?: string | BoxConditions<string>;
212
+ borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
213
+ borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
214
+ boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
215
+ padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
216
+ paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
217
+ paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
218
+ paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
219
+ paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
220
+ margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
221
+ marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
222
+ marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
223
+ marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
224
+ marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
225
+ paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
226
+ paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
227
+ p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
228
+ pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
229
+ pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
230
+ pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
231
+ pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
232
+ px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
233
+ py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
234
+ marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
235
+ marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
236
+ m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
237
+ mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
238
+ ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
239
+ mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
240
+ mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
241
+ mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
242
+ my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
176
243
  }
177
244
  export interface BoxProps extends BoxSprinkle {
178
245
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "2.2.0",
3
+ "version": "2.3.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [