@nimbus-ds/box 2.3.0 → 2.4.0-rc.2

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 +9 -0
  2. package/dist/index.d.ts +26 -1
  3. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
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-10 `2.4.0`
6
+
7
+ ### 🎉 New features
8
+
9
+ - Added `boxShadow`, `transitionDuration`, `transitionDelay`, `transitionTimingFunction` and `transitionProperty` to component sprinkles. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
10
+ - Added `not-allowed` and `grab` options to `cursor` property. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
11
+ - Added `disabled` state to conditions. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
12
+ - Added `transparent` option to `backgroundColor` and `borderColor` sprinkles. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
13
+
5
14
  ## 2023-02-09 `2.3.0`
6
15
 
7
16
  ### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -36,7 +36,7 @@ export interface Conditions<T> {
36
36
  }
37
37
  export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
38
38
  export type BoxSizing = "border-box" | "content-box";
39
- export type Cursor = "auto" | "pointer";
39
+ export type Cursor = "auto" | "pointer" | "not-allowed" | "grab";
40
40
  export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid";
41
41
  export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
42
42
  export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
@@ -45,6 +45,7 @@ export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "bas
45
45
  export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
46
46
  export type Overflow = "visible" | "hidden" | "scroll" | "auto";
47
47
  export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
48
+ export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
48
49
  declare const propertiesBox: {
49
50
  gap: {
50
51
  none: string;
@@ -107,7 +108,9 @@ declare const propertiesBox: {
107
108
  "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
109
  "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
110
  "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
111
+ "neutral.surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
112
  "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ transparent: string;
111
114
  };
112
115
  borderColor: {
113
116
  "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -125,6 +128,7 @@ declare const propertiesBox: {
125
128
  "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
129
  "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
130
  "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
+ transparent: string;
128
132
  };
129
133
  borderStyle: BorderStyle[];
130
134
  boxSizing: BoxSizing[];
@@ -166,17 +170,33 @@ declare const propertiesBox: {
166
170
  overflow: Overflow[];
167
171
  overflowX: Overflow[];
168
172
  overflowY: Overflow[];
173
+ boxShadow: {
174
+ card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
+ popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
176
+ modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
177
+ focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
178
+ };
179
+ transitionDuration: {
180
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
181
+ fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
182
+ slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
183
+ slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
+ };
185
+ transitionTimingFunction: TransitionTiming[];
169
186
  };
170
187
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
171
188
  export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
189
+ export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
172
190
  export type BoxSpaceProperties = keyof typeof propertiesBox.space;
173
191
  export type BoxMarginProperties = keyof typeof propertiesBox.margin;
174
192
  export type BoxGapProperties = keyof typeof propertiesBox.gap;
175
193
  export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
194
+ export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
176
195
  export interface BoxConditions<T> extends Conditions<T> {
177
196
  focus?: T;
178
197
  active?: T;
179
198
  hover?: T;
199
+ disabled?: T;
180
200
  }
181
201
  export interface BoxSprinkle {
182
202
  width?: string | BoxConditions<string>;
@@ -212,6 +232,7 @@ export interface BoxSprinkle {
212
232
  borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
213
233
  borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
214
234
  boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
235
+ boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
215
236
  padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
216
237
  paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
217
238
  paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
@@ -240,6 +261,10 @@ export interface BoxSprinkle {
240
261
  mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
241
262
  mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
242
263
  my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
264
+ transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
265
+ transitionProperty?: string | BoxConditions<string>;
266
+ transitionDelay?: string | BoxConditions<string>;
267
+ transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
243
268
  }
244
269
  export interface BoxProps extends BoxSprinkle {
245
270
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "2.3.0",
3
+ "version": "2.4.0-rc.2",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -28,5 +28,6 @@
28
28
  "devDependencies": {
29
29
  "@vanilla-extract/dynamic": "^2.0.2",
30
30
  "webpack": "^5.74.0"
31
- }
31
+ },
32
+ "stableVersion": "2.3.0"
32
33
  }