@nimbus-ds/box 4.2.0 → 4.3.1

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/CHANGELOG.md +12 -0
  2. package/dist/CHANGELOG.md +12 -0
  3. package/dist/index.d.ts +26 -15
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
4
 
5
+ ## 2025-09-17 `4.3.1`
6
+
7
+ #### 🐛 Bug fixes
8
+
9
+ - Fixed `ai-generative-interactive` and `ai-generative-interactive-border` options to match Nimbus AI gradient style. ([#352](https://github.com/TiendaNube/nimbus-design-system/pull/352) by [@joacotornello](https://github.com/joacotornello))
10
+
11
+ ## 2025-09-16 `4.3.0`
12
+
13
+ #### 🎉 New features
14
+
15
+ - Added `ai-generative-interactive` and `ai-generative-interactive-border` options to `background` property, and `aiFocus` option to `boxShadow` property. ([#352](https://github.com/TiendaNube/nimbus-design-system/pull/352) by [@joacotornello](https://github.com/joacotornello))
16
+
5
17
  ## 2025-03-25 `4.2.0`
6
18
 
7
19
  ### 🎉 New features
package/dist/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
4
 
5
+ ## 2025-09-17 `4.3.1`
6
+
7
+ #### 🐛 Bug fixes
8
+
9
+ - Fixed `ai-generative-interactive` and `ai-generative-interactive-border` options to match Nimbus AI gradient style. ([#352](https://github.com/TiendaNube/nimbus-design-system/pull/352) by [@joacotornello](https://github.com/joacotornello))
10
+
11
+ ## 2025-09-16 `4.3.0`
12
+
13
+ #### 🎉 New features
14
+
15
+ - Added `ai-generative-interactive` and `ai-generative-interactive-border` options to `background` property, and `aiFocus` option to `boxShadow` property. ([#352](https://github.com/TiendaNube/nimbus-design-system/pull/352) by [@joacotornello](https://github.com/joacotornello))
16
+
5
17
  ## 2025-03-25 `4.2.0`
6
18
 
7
19
  ### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -119,7 +119,9 @@ declare const propertiesBox: {
119
119
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
120
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
121
121
  "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
122
- "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
122
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
123
+ * The min height property specifies the height of a box's content area.
124
+ */
123
125
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
124
126
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
125
127
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -129,6 +131,13 @@ declare const propertiesBox: {
129
131
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
132
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
133
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
134
+ "ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
135
+ "ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
+ transparent: string;
137
+ };
138
+ background: {
139
+ "ai-generative-interactive-border": string;
140
+ "ai-generative-interactive": string;
132
141
  transparent: string;
133
142
  };
134
143
  color: {
@@ -145,7 +154,9 @@ declare const propertiesBox: {
145
154
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
146
155
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
147
156
  "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
148
- "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
158
+ * The min height property specifies the height of a box's content area.
159
+ */
149
160
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
150
161
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
151
162
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -155,6 +166,8 @@ declare const propertiesBox: {
155
166
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
167
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
168
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
169
+ "ai-generative-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
170
+ "ai-generative-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
158
171
  transparent: string;
159
172
  };
160
173
  borderColor: {
@@ -177,10 +190,7 @@ declare const propertiesBox: {
177
190
  transparent: string;
178
191
  };
179
192
  borderRadius: {
180
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * 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.
182
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
183
- */
193
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
194
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
195
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
196
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,10 +198,6 @@ declare const propertiesBox: {
188
198
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
199
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
200
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
- /**
192
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
193
- * In Flexbox, it aligns the item on the cross axis.
194
- */
195
201
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
202
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
203
  none: string;
@@ -268,6 +274,7 @@ declare const propertiesBox: {
268
274
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
275
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
276
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
277
+ aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
278
  };
272
279
  transitionDuration: {
273
280
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -317,7 +324,9 @@ declare const propertiesBox: {
317
324
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
325
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
326
  h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
320
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
327
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
328
+ * This defines the ability for a flex item to shrink if necessary.
329
+ */
321
330
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
331
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
332
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -351,10 +360,7 @@ declare const propertiesBox: {
351
360
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
361
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
362
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- }; /**
355
- * The boxSizing property sets how the total width and height of an box is calculated.
356
- * @default border-box
357
- */
363
+ };
358
364
  };
359
365
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
360
366
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -371,6 +377,7 @@ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transit
371
377
  export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
372
378
  export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
373
379
  export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
380
+ export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
374
381
  export interface BoxConditions<T> extends Conditions<T> {
375
382
  focus?: T;
376
383
  focusWithin?: T;
@@ -631,6 +638,10 @@ export interface BoxSprinkle {
631
638
  * The zIndex property specifies the stack order of the box.
632
639
  */
633
640
  zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
641
+ /**
642
+ * The background property sets the background of the box.
643
+ */
644
+ background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
634
645
  /**
635
646
  * The backgroundImage property sets one or more background images on an element.
636
647
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "4.2.0",
3
+ "version": "4.3.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -26,7 +26,7 @@
26
26
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
27
27
  },
28
28
  "devDependencies": {
29
- "@nimbus-ds/webpack": "^1.5.0",
29
+ "@nimbus-ds/webpack": "^1.7.0",
30
30
  "@vanilla-extract/dynamic": "^2.0.3"
31
31
  }
32
32
  }