@nimbus-ds/components 2.10.0-rc.1 → 2.10.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 (4) hide show
  1. package/CHANGELOG.md +4 -1
  2. package/dist/index.d.ts +46 -25
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -10,10 +10,13 @@ This package is intended for internal use in generating builds of each design sy
10
10
  - Changed `cursor` property default value to `inherit` on `Icon` component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
11
11
  - Added `zIndex` property to `Box` component sprinkles. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
12
12
  - Added `"border-box"` as default value for `boxSizing` property on `Box` component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
13
- - Added `minWidth` and `minHeight` properties to `Box` component sprinkles. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
13
+ - Added `backgroundImage`, `minWidth` and `minHeight` properties to `Box` component sprinkles. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
14
14
  - Changed `fontSize` default value to `base` on `Text` component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
15
15
  - Changed `lineHeight` default value to `base` on `Text` component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
16
16
  - Changed `color` default value to `neutral.textLow` on `Text` component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
17
+ - Added `as` prop on `Table.Cell` subcomponente API. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
18
+ - Replaced `size` property with `fontSize` on `Link` component. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
19
+ - Added `lineHeight` property to `Link` component API. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
17
20
 
18
21
  ### 💡 Others
19
22
 
package/dist/index.d.ts CHANGED
@@ -296,6 +296,11 @@ export interface BoxSprinkle {
296
296
  transitionDelay?: string | BoxConditions<string>;
297
297
  transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
298
298
  zIndex?: number | BoxConditions<number>;
299
+ backgroundImage?: string | BoxConditions<string>;
300
+ backgroundPosition?: string | BoxConditions<string>;
301
+ backgroundBlendMode?: string | BoxConditions<string>;
302
+ backgroundRepeat?: string | BoxConditions<string>;
303
+ backgroundSize?: string | BoxConditions<string>;
299
304
  }
300
305
  declare const fileUploader: {
301
306
  sprinkle: ((props: {
@@ -647,14 +652,25 @@ declare const spinner: {
647
652
  declare const link: {
648
653
  sprinkle: ((props: {
649
654
  textDecoration?: TextDecoration | undefined;
655
+ fontSize?: "caption" | "base" | "highlight" | undefined;
656
+ lineHeight?: "caption" | "base" | "highlight" | undefined;
650
657
  }) => string) & {
651
- properties: Set<"textDecoration">;
658
+ properties: Set<"fontSize" | "lineHeight" | "textDecoration">;
652
659
  };
653
660
  properties: {
654
661
  textDecoration: TextDecoration[];
662
+ fontSize: {
663
+ caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
664
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
665
+ highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
666
+ };
667
+ lineHeight: {
668
+ readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
669
+ readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
670
+ readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
671
+ };
655
672
  };
656
673
  classnames: {
657
- size: Record<"caption" | "base" | "highlight", string>;
658
674
  appearance: Record<"primary" | "danger" | "neutral" | "neutral.background", string>;
659
675
  };
660
676
  };
@@ -753,19 +769,19 @@ declare const modal: {
753
769
  maxWidth: {
754
770
  dynamic: {
755
771
  default: string;
756
- conditions: Record<"xs" | "md" | "lg", string>;
772
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
757
773
  };
758
774
  dynamicScale: true;
759
775
  name: "maxWidth";
760
776
  vars: {
761
777
  default: string;
762
- conditions: Record<"xs" | "md" | "lg", string>;
778
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
763
779
  };
764
780
  };
765
781
  padding: {
766
782
  dynamic: {
767
783
  default: string;
768
- conditions: Record<"xs" | "md" | "lg", string>;
784
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
769
785
  };
770
786
  dynamicScale: {
771
787
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -775,7 +791,7 @@ declare const modal: {
775
791
  name: "padding";
776
792
  vars: {
777
793
  default: string;
778
- conditions: Record<"xs" | "md" | "lg", string>;
794
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
779
795
  };
780
796
  };
781
797
  };
@@ -811,15 +827,15 @@ declare const sidebarSprinkle: {
811
827
  values: {
812
828
  base: {
813
829
  default: string;
814
- conditions: Record<"xs" | "md" | "lg", string>;
830
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
815
831
  };
816
832
  small: {
817
833
  default: string;
818
- conditions: Record<"xs" | "md" | "lg", string>;
834
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
819
835
  };
820
836
  none: {
821
837
  default: string;
822
- conditions: Record<"xs" | "md" | "lg", string>;
838
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
823
839
  };
824
840
  };
825
841
  staticScale: {
@@ -835,25 +851,25 @@ declare const sidebarSprinkle: {
835
851
  maxWidth: {
836
852
  dynamic: {
837
853
  default: string;
838
- conditions: Record<"xs" | "md" | "lg", string>;
854
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
839
855
  };
840
856
  dynamicScale: true;
841
857
  name: "maxWidth";
842
858
  vars: {
843
859
  default: string;
844
- conditions: Record<"xs" | "md" | "lg", string>;
860
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
845
861
  };
846
862
  };
847
863
  zIndex: {
848
864
  dynamic: {
849
865
  default: string;
850
- conditions: Record<"xs" | "md" | "lg", string>;
866
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
851
867
  };
852
868
  dynamicScale: true;
853
869
  name: "zIndex";
854
870
  vars: {
855
871
  default: string;
856
- conditions: Record<"xs" | "md" | "lg", string>;
872
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
857
873
  };
858
874
  };
859
875
  };
@@ -887,15 +903,15 @@ declare const sidebar: {
887
903
  values: {
888
904
  base: {
889
905
  default: string;
890
- conditions: Record<"xs" | "md" | "lg", string>;
906
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
891
907
  };
892
908
  small: {
893
909
  default: string;
894
- conditions: Record<"xs" | "md" | "lg", string>;
910
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
895
911
  };
896
912
  none: {
897
913
  default: string;
898
- conditions: Record<"xs" | "md" | "lg", string>;
914
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
899
915
  };
900
916
  };
901
917
  staticScale: {
@@ -911,25 +927,25 @@ declare const sidebar: {
911
927
  maxWidth: {
912
928
  dynamic: {
913
929
  default: string;
914
- conditions: Record<"xs" | "md" | "lg", string>;
930
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
915
931
  };
916
932
  dynamicScale: true;
917
933
  name: "maxWidth";
918
934
  vars: {
919
935
  default: string;
920
- conditions: Record<"xs" | "md" | "lg", string>;
936
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
921
937
  };
922
938
  };
923
939
  zIndex: {
924
940
  dynamic: {
925
941
  default: string;
926
- conditions: Record<"xs" | "md" | "lg", string>;
942
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
927
943
  };
928
944
  dynamicScale: true;
929
945
  name: "zIndex";
930
946
  vars: {
931
947
  default: string;
932
- conditions: Record<"xs" | "md" | "lg", string>;
948
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
933
949
  };
934
950
  };
935
951
  };
@@ -982,10 +998,10 @@ export interface TableConditions<T> extends Conditions<T> {
982
998
  hover?: T;
983
999
  }
984
1000
  export interface TableSprinkle {
985
- padding?: TablePaddingProperties;
986
- width?: string;
987
- maxWidth?: string;
988
- minWidth?: string;
1001
+ padding?: TablePaddingProperties | TableConditions<TablePaddingProperties>;
1002
+ width?: string | TableConditions<string>;
1003
+ maxWidth?: string | TableConditions<string>;
1004
+ minWidth?: string | TableConditions<string>;
989
1005
  backgroundColor?: TableRowBackgroundColorProperties | TableConditions<TableRowBackgroundColorProperties>;
990
1006
  }
991
1007
  export type BoxExtends = BoxSprinkle & HTMLAttributes<HTMLElement>;
@@ -1156,7 +1172,9 @@ export interface LinkProps extends HTMLAttributes<HTMLElement> {
1156
1172
  /** Decoration for the link text */
1157
1173
  textDecoration?: typeof link.properties.textDecoration[number];
1158
1174
  /** Size of the link text */
1159
- size?: "caption" | "base" | "highlight";
1175
+ fontSize?: keyof typeof link.properties.fontSize;
1176
+ /** Link text line height */
1177
+ lineHeight?: keyof typeof link.properties.lineHeight;
1160
1178
  }
1161
1179
  export declare const Link: PolymorphicForwardRefComponent<"a" | "button", LinkProps> & LinkComponents;
1162
1180
  export type ListSkeletonItemProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
@@ -1641,7 +1659,10 @@ export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement>
1641
1659
  declare const TableBody: React.FC<TableBodyProps>;
1642
1660
  export type TableExtends = TableSprinkle & HTMLAttributes<HTMLTableCellElement>;
1643
1661
  export interface TableCellProps extends TableExtends {
1662
+ /** Content of the cell */
1644
1663
  children: ReactNode;
1664
+ /** Defines the type of html element to be rendered */
1665
+ as?: "td" | "th";
1645
1666
  }
1646
1667
  declare const TableCell: React.FC<TableCellProps>;
1647
1668
  export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {