@nimbus-ds/components 5.35.0 → 5.36.0-rc.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 (54) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/Accordion/index.d.ts +19 -2
  3. package/dist/Accordion/index.js +1 -1
  4. package/dist/Alert/index.js +1 -1
  5. package/dist/Badge/index.js +1 -1
  6. package/dist/Box/index.d.ts +25 -22
  7. package/dist/Box/index.js +1 -1
  8. package/dist/Button/index.js +1 -1
  9. package/dist/CHANGELOG.md +7 -0
  10. package/dist/Card/index.js +1 -1
  11. package/dist/Checkbox/index.js +1 -1
  12. package/dist/Chip/index.js +1 -1
  13. package/dist/FileUploader/index.js +1 -1
  14. package/dist/Icon/index.js +1 -1
  15. package/dist/IconButton/index.d.ts +1 -0
  16. package/dist/IconButton/index.js +1 -1
  17. package/dist/Input/index.js +1 -1
  18. package/dist/Label/index.js +1 -1
  19. package/dist/Link/index.js +1 -1
  20. package/dist/List/index.js +1 -1
  21. package/dist/Modal/index.d.ts +1 -0
  22. package/dist/Modal/index.js +1 -1
  23. package/dist/MultiSelect/index.js +1 -1
  24. package/dist/Pagination/index.js +1 -1
  25. package/dist/Popover/index.d.ts +1 -0
  26. package/dist/ProgressBar/index.js +1 -1
  27. package/dist/Radio/index.js +1 -1
  28. package/dist/ScrollPane/index.d.ts +25 -22
  29. package/dist/ScrollPane/index.js +1 -1
  30. package/dist/SegmentedControl/index.d.ts +25 -22
  31. package/dist/SegmentedControl/index.js +1 -1
  32. package/dist/Select/index.js +1 -1
  33. package/dist/Sidebar/index.d.ts +1 -0
  34. package/dist/Sidebar/index.js +1 -1
  35. package/dist/SplitButton/index.d.ts +25 -22
  36. package/dist/SplitButton/index.js +1 -1
  37. package/dist/Stepper/index.d.ts +25 -22
  38. package/dist/Stepper/index.js +1 -1
  39. package/dist/Table/index.d.ts +1 -0
  40. package/dist/Tag/index.js +1 -1
  41. package/dist/Text/index.d.ts +1 -0
  42. package/dist/Text/index.js +1 -1
  43. package/dist/Textarea/index.js +1 -1
  44. package/dist/Thumbnail/index.js +1 -1
  45. package/dist/Title/index.d.ts +1 -0
  46. package/dist/Title/index.js +1 -1
  47. package/dist/Toast/index.js +1 -1
  48. package/dist/Toggle/index.js +1 -1
  49. package/dist/Tooltip/index.d.ts +1 -0
  50. package/dist/Tooltip/index.js +1 -1
  51. package/dist/components-props.json +1 -1
  52. package/dist/index.d.ts +44 -24
  53. package/dist/index.js +1 -1
  54. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -83,6 +83,7 @@ export interface Conditions<T> {
83
83
  md?: T;
84
84
  lg?: T;
85
85
  xl?: T;
86
+ xxl?: T;
86
87
  }
87
88
  export type AspectRatio = "1/1" | "16/9" | "9/16" | "4/3" | "3/4" | "2/1" | "1/2";
88
89
  export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
@@ -163,7 +164,9 @@ declare const propertiesBox: {
163
164
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
164
165
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
165
166
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
166
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
167
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
168
+ * The width property specifies the width of a box's content area.
169
+ */
167
170
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
168
171
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
169
172
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -172,9 +175,7 @@ declare const propertiesBox: {
172
175
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
173
176
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
174
177
  "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
- "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
176
- * The min height property specifies the height of a box's content area.
177
- */
178
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
178
179
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
179
180
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
180
181
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -199,7 +200,9 @@ declare const propertiesBox: {
199
200
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
201
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
202
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
202
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
203
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
204
+ * The width property specifies the width of a box's content area.
205
+ */
203
206
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
204
207
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
208
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -208,9 +211,7 @@ declare const propertiesBox: {
208
211
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
209
212
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
210
213
  "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
- "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
212
- * The min height property specifies the height of a box's content area.
213
- */
214
+ "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
215
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
215
216
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
217
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -239,16 +240,17 @@ declare const propertiesBox: {
239
240
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
240
241
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
241
242
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
243
+ /**
244
+ * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
245
+ * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
246
+ */
242
247
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
243
248
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
244
249
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
245
250
  transparent: string;
246
251
  };
247
252
  borderRadius: {
248
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
249
- * 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.
250
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
251
- */
253
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
254
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
255
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
256
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -256,10 +258,6 @@ declare const propertiesBox: {
256
258
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
257
259
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
258
260
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
- /**
260
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
261
- * In Flexbox, it aligns the item on the cross axis.
262
- */
263
261
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
262
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
265
263
  none: string;
@@ -267,7 +265,9 @@ declare const propertiesBox: {
267
265
  borderWidth: {
268
266
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
267
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
- "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
268
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
269
+ * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
270
+ */
271
271
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
272
272
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
273
  none: string;
@@ -389,7 +389,9 @@ declare const propertiesBox: {
389
389
  h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
390
390
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
391
391
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
392
- h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
392
+ h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
393
+ * This defines the ability for a flex item to grow if necessary.
394
+ */
393
395
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
394
396
  };
395
397
  lineHeight: {
@@ -414,15 +416,15 @@ declare const propertiesBox: {
414
416
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
415
417
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
416
418
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
417
- h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
419
+ h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
420
+ * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
421
+ */
418
422
  h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
419
423
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
420
424
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
421
425
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
422
426
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
423
- }; /**
424
- * The paddingBottom property sets the height of the padding area on the bottom of an box.
425
- */
427
+ };
426
428
  };
427
429
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
428
430
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -442,6 +444,7 @@ export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
442
444
  export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
443
445
  export interface BoxConditions<T> extends Conditions<T> {
444
446
  focus?: T;
447
+ focusVisible?: T;
445
448
  focusWithin?: T;
446
449
  active?: T;
447
450
  hover?: T;
@@ -3339,18 +3342,35 @@ export interface AccordionComponents {
3339
3342
  Item: typeof AccordionItem;
3340
3343
  Header: typeof AccordionHeader;
3341
3344
  }
3342
- export interface AccordionProperties {
3345
+ export interface AccordionBaseProperties {
3343
3346
  /**
3344
3347
  * The content of the accordion.
3345
3348
  * @TJS-type React.ReactNode
3346
3349
  */
3347
3350
  children?: ReactNode;
3351
+ }
3352
+ export interface UncontrolledAccordionProperties extends AccordionBaseProperties {
3348
3353
  /**
3349
3354
  * Informs which accordion item is open by default, this value must be the same as informed in the index of each item
3350
3355
  */
3351
3356
  selectedDefault?: string;
3352
3357
  }
3353
- export type AccordionProps = AccordionProperties & HTMLAttributes<HTMLElement>;
3358
+ export interface ControlledAccordionProperties extends AccordionBaseProperties {
3359
+ /**
3360
+ * The currently selected accordion item ID.
3361
+ */
3362
+ selected: string;
3363
+ /**
3364
+ * Callback fired when the selected accordion item changes.
3365
+ * @param selectedId The ID of the selected accordion item
3366
+ */
3367
+ onSelect?: (selectedId: string) => void;
3368
+ }
3369
+ /**
3370
+ * Props for the Accordion component, supporting both controlled and uncontrolled modes
3371
+ */
3372
+ export type AccordionProps = (UncontrolledAccordionProperties | ControlledAccordionProperties) & Omit<HTMLAttributes<HTMLElement>, "onSelect" | "selected">;
3373
+ export type AccordionProperties = AccordionBaseProperties & UncontrolledAccordionProperties & ControlledAccordionProperties;
3354
3374
  export declare const Accordion: React.FC<AccordionProps> & AccordionComponents;
3355
3375
  export type AlertSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
3356
3376
  export type AlertSkeletonProps = AlertSkeletonProperties;