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