@nimbus-ds/components 5.0.0 → 5.1.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
+## 2023-07-11 `5.1.1`
+
+#### 🎉 New features
+
+- Added `ref` property to `Select` component API. ([#180](https://github.com/TiendaNube/nimbus-design-system/pull/180) by [@juniorconquista](https://github.com/juniorconquista)).
+- Added `ref` property to `Textarea` component API. ([#180](https://github.com/TiendaNube/nimbus-design-system/pull/180) by [@juniorconquista](https://github.com/juniorconquista)).
+
+#### 🐛 Bug fixes
+
+- Adding extra right padding to the modal title to prevent the title from getting overlaid by the close button. ([#179](https://github.com/TiendaNube/nimbus-design-system/pull/179) by [@juniorconquista](https://github.com/juniorconquista))
+
+#### 📚 3rd party library updates
+
+- Updated `@floating-ui/react@0.24.6`. ([#179](https://github.com/TiendaNube/nimbus-design-system/pull/179) by [@juanchigallego](https://github.com/juanchigallego))
+
+## 2023-06-13 `5.1.0`
+
+### 🎉 New features
+
+- Added `Padding` property to the Component `Card.Header`. ([#169](https://github.com/TiendaNube/nimbus-design-system/pull/169) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `Padding` property to the Component `Card.Footer`. ([#169](https://github.com/TiendaNube/nimbus-design-system/pull/169) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `Padding` property to the Component `Modal.Header`. ([#169](https://github.com/TiendaNube/nimbus-design-system/pull/169) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `Padding` property to the Component `Modal.Footer`. ([#169](https://github.com/TiendaNube/nimbus-design-system/pull/169) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `wordBreak` property to the Component `Text` API. ([#169](https://github.com/TiendaNube/nimbus-design-system/pull/169) by [@juniorconquista](https://github.com/juniorconquista))
+
 ## 2023-05-23 `5.0.0`
 
 #### 🛠 Breaking changes

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-// Generated by dts-bundle-generator v7.1.0
+// Generated by dts-bundle-generator v7.2.0
 
 import React from 'react';
-import { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, ReactElement, ReactNode, SVGAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, ReactElement, ReactNode, SVGAttributes } from 'react';
 
 export interface SkeletonProperties {
 	/**
@@ -100,6 +100,7 @@ export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
 export type Overflow = "visible" | "hidden" | "scroll" | "auto";
 export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
 export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
+export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
 declare const propertiesBox: {
 	gap: {
 		none: string;
@@ -856,6 +857,7 @@ declare const propertiesText: {
 		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
+	wordBreak: WordBreak[];
 };
 export type TextColorProperties = keyof typeof propertiesText.color;
 export type TextFontSizeProperties = keyof typeof propertiesText.fontSize;
@@ -896,6 +898,10 @@ export interface TextSprinkle {
 	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
 	 */
 	WebkitLineClamp?: number | TextConditions<number>;
+	/**
+	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
+	 */
+	wordBreak?: WordBreak | TextConditions<WordBreak>;
 }
 declare const text: {
 	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
@@ -1025,15 +1031,15 @@ declare const text: {
 				};
 				textAlign: {
 					values: {
-						left: {
+						center: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						right: {
+						left: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
-						center: {
+						right: {
 							default: string;
 							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
 						};
@@ -1111,6 +1117,28 @@ declare const text: {
 					};
 					name: "fontSize";
 				};
+				wordBreak: {
+					values: {
+						normal: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"break-word": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"break-all": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"keep-all": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+					};
+					staticScale: WordBreak[];
+					name: "wordBreak";
+				};
 			};
 		} & {
 			config: {
@@ -1142,7 +1170,7 @@ declare const text: {
 		} & {
 			config: {
 				[x: string]: {
-					mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "lineClamp" | "WebkitLineClamp")[];
+					mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "wordBreak" | "lineClamp" | "WebkitLineClamp")[];
 				};
 			};
 		}
@@ -1189,6 +1217,7 @@ declare const text: {
 			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
+		wordBreak: WordBreak[];
 	};
 	classnames: {
 		base: string;
@@ -1478,6 +1507,54 @@ declare const accordion: {
 	};
 };
 declare const card: {
+	classnames: {
+		container: string;
+		container__footer: string;
+	};
+	subComponents: {
+		header: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		body: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		footer: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+	};
 	sprinkle: ((props: {
 		backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
 		padding?: "base" | "small" | "none" | undefined;
@@ -1504,10 +1581,6 @@ declare const card: {
 			none: string;
 		};
 	};
-	classnames: {
-		container: string;
-		container__footer: string;
-	};
 };
 declare const propertiesModal: {
 	padding: {
@@ -1530,6 +1603,56 @@ export interface ModalSprinkle {
 	padding?: PaddingProperties | Conditions<PaddingProperties>;
 }
 declare const modal: {
+	classnames: {
+		overlay: string;
+		container: string;
+		container__close: string;
+		container__footer: string;
+	};
+	subComponents: {
+		header: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		body: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		footer: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+	};
 	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
 		{
 			config: {
@@ -1577,14 +1700,6 @@ declare const modal: {
 			none: string;
 		};
 	};
-	classnames: {
-		overlay: string;
-		container: string;
-		container__close: string;
-		container__header: string;
-		container__body: string;
-		container__footer: string;
-	};
 };
 declare const sidebarSprinkle: {
 	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
@@ -1902,7 +2017,7 @@ export interface TableSprinkle {
 }
 export interface BoxProperties extends BoxSprinkle {
 	/**
-	 * Element to be rendered inside the Box component. Meu teste
+	 * Element to be rendered inside the Box component.
 	 * @TJS-type React.ReactNode
 	 */
 	children?: ReactNode;
@@ -2099,9 +2214,9 @@ export interface IconButtonProperties extends IconButtonSprinkle {
 }
 export type IconButtonProps = IconButtonProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
 export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
-export type InputPasswordProperties = Pick<InputProps, "appearance" | "disabled">;
+export type InputPasswordProperties = Pick<InputBaseProps, "appearance" | "disabled">;
 declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
-export type InputSearchProperties = Pick<InputProps, "appearance" | "disabled">;
+export type InputSearchProperties = Pick<InputBaseProps, "appearance" | "disabled">;
 declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 export type InputSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
 export type InputSkeletonProps = InputSkeletonProperties;
@@ -2136,8 +2251,9 @@ export interface InputProperties {
 	 */
 	"data-testid"?: string;
 }
-export type InputProps = InputProperties & InputHTMLAttributes<HTMLInputElement>;
+export type InputBaseProps = InputProperties & InputHTMLAttributes<HTMLInputElement>;
 export declare const Input: React.ForwardRefExoticComponent<InputProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>> & InputComponents;
+export type InputProps = ComponentPropsWithRef<typeof Input>;
 export type LabelSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
 	/**
 	 * This is an attribute used to identify a DOM node for testing purposes.
@@ -2398,8 +2514,8 @@ export interface SelectProperties {
 	 */
 	appearance?: "success" | "warning" | "danger" | "neutral";
 }
-export type SelectProps = SelectProperties & SelectHTMLAttributes<HTMLSelectElement>;
-export declare const Select: React.FC<SelectProps> & SelectComponents;
+export declare const Select: React.ForwardRefExoticComponent<SelectProperties & React.SelectHTMLAttributes<HTMLSelectElement> & React.InputHTMLAttributes<HTMLSelectElement> & React.RefAttributes<HTMLSelectElement>> & SelectComponents;
+export type SelectProps = ComponentPropsWithRef<typeof Select>;
 export interface SpinnerProperties {
 	/**
 	 * Sets the width and height of the spinner.
@@ -2483,8 +2599,8 @@ export interface TextareaProperties {
 	 * */
 	id: string;
 }
-export type TextareaProps = TextareaProperties & TextareaHTMLAttributes<HTMLTextAreaElement>;
-export declare const Textarea: React.FC<TextareaProps> & TextareaComponents;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProperties & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>> & TextareaComponents;
+export type TextareaProps = ComponentPropsWithRef<typeof Textarea>;
 export type ThumbnailSkeletonProperties = Partial<Pick<ThumbnailProps, "aspectRatio">> & Partial<Pick<SkeletonProps, "width" | "data-testid">>;
 export type ThumbnailSkeletonProps = ThumbnailSkeletonProperties;
 declare const ThumbnailSkeleton: React.FC<ThumbnailSkeletonProps>;
@@ -2520,7 +2636,7 @@ declare const TitleSkeleton: React.FC<TitleSkeletonProps>;
 export interface TitleComponents {
 	Skeleton: typeof TitleSkeleton;
 }
-export interface TitleProperties {
+export interface TitleProperties extends TitleSprinkle {
 	/**
 	 * The content of the title.
 	 * @TJS-type React.ReactNode
@@ -2532,7 +2648,7 @@ export interface TitleProperties {
 	 */
 	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }
-export type TitleProps = TitleProperties & TitleSprinkle & HTMLAttributes<HTMLHeadingElement>;
+export type TitleProps = TitleProperties & HTMLAttributes<HTMLHeadingElement>;
 export declare const Title: React.FC<TitleProps> & TitleComponents;
 export interface ToastProviderProperties {
 	/**
@@ -2765,7 +2881,7 @@ export interface CardBodyProperties {
 	 * The padding properties are used to generate space around an card's body content area.
 	 * @default none
 	 */
-	padding?: keyof typeof card.properties.padding;
+	padding?: keyof typeof card.subComponents.body.properties.padding;
 }
 export type CardBodyProps = CardBodyProperties & HTMLAttributes<HTMLElement>;
 declare const CardBody: React.FC<CardBodyProps>;
@@ -2775,6 +2891,11 @@ export interface CardFooterProperties {
 	 * @TJS-type React.ReactNode
 	 */
 	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an card's footer content area.
+	 * @default none
+	 */
+	padding?: keyof typeof card.subComponents.footer.properties.padding;
 }
 export type CardFooterProps = CardFooterProperties & HTMLAttributes<HTMLElement>;
 declare const CardFooter: React.FC<CardFooterProps>;
@@ -2788,6 +2909,11 @@ export interface CardHeaderProperties {
 	 * The title to display in the card header.
 	 */
 	title?: string;
+	/**
+	 * The padding properties are used to generate space around an card's header content area.
+	 * @default none
+	 */
+	padding?: keyof typeof card.subComponents.header.properties.padding;
 }
 export type CardHeaderProps = CardHeaderProperties & HTMLAttributes<HTMLElement>;
 declare const CardHeader: React.FC<CardHeaderProps>;
@@ -2823,9 +2949,9 @@ export interface ModalBodyProperties {
 	children: ReactNode;
 	/**
 	 * The padding properties are used to generate space around an modal's body content area.
-	 * @default base
+	 * @default none
 	 */
-	padding?: keyof typeof card.properties.padding;
+	padding?: keyof typeof modal.subComponents.body.properties.padding;
 }
 export type ModalBodyProps = ModalBodyProperties & HTMLAttributes<HTMLElement>;
 declare const ModalBody: React.FC<ModalBodyProps>;
@@ -2835,6 +2961,11 @@ export interface ModalFooterProperties {
 	 * @TJS-type React.ReactNode
 	 */
 	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an modal's footer content area.
+	 * @default none
+	 */
+	padding?: keyof typeof modal.subComponents.footer.properties.padding;
 }
 export type ModalFooterProps = ModalFooterProperties & HTMLAttributes<HTMLElement>;
 declare const ModalFooter: React.FC<ModalFooterProps>;
@@ -2848,6 +2979,11 @@ export interface ModalHeaderProperties {
 	 * The title to display in the modal header.
 	 */
 	title?: string;
+	/**
+	 * The padding properties are used to generate space around an modal's header content area.
+	 * @default none
+	 */
+	padding?: keyof typeof modal.subComponents.header.properties.padding;
 }
 export type ModalHeaderProps = ModalHeaderProperties & HTMLAttributes<HTMLElement>;
 declare const ModalHeader: React.FC<ModalHeaderProps>;