@nimbus-ds/patterns 1.8.0-rc.1 → 1.8.0-rc.10

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.
 
+## 2025-02-12
+
+- Added new `@nimbus-ds/initial-screen` component. ([#97](https://github.com/TiendaNube/nimbus-patterns/pull/97) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2024-03-06 `1.8.0`
 
 ### 🎉 New features

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { BoxBaseProps, BoxProperties, BoxProps, ButtonProperties, ButtonProps, C
 import { IconProps } from '@nimbus-ds/icons';
 import { PolymorphicForwardRefComponent } from '@nimbus-ds/typings';
 import React from 'react';
-import { ButtonHTMLAttributes, ComponentProps, ComponentPropsWithRef, FC, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { ButtonHTMLAttributes, ComponentProps, ComponentPropsWithRef, FC, HTMLAttributes, MouseEventHandler, PropsWithChildren, ReactElement, ReactNode } from 'react';
 import { DayPicker } from 'react-day-picker';
 
 export interface AppShellHeaderProperties {
@@ -777,6 +777,7 @@ export type EmptyAppContentTextElementProps = EmptyAppContentTextElementProperti
 declare const EmptyAppContentTextElement: React.FC<EmptyAppContentTextElementProps>;
 export interface EmptyAppHeroSectionProperties extends Pick<ThumbnailProps, "src" | "alt"> {
 	title: string;
+	titleChildren?: ReactNode;
 	subtitle?: string;
 	content: string;
 	actions?: ReactNode;
@@ -813,5 +814,102 @@ export interface EmptyAppProperties {
 }
 export type EmptyAppProps = EmptyAppProperties & Omit<BoxProps, "width" | "display" | "flexDirection" | "backgroundColor" | "pb" | "children">;
 export declare const EmptyApp: React.FC<EmptyAppProps> & EmptyAppComponents;
+export type BulletProps = {
+	icon: ReactNode;
+	text: string;
+};
+export type InitialScreenBulletProps = PropsWithChildren<BulletProps & Omit<BoxProps, "display" | "gap">>;
+declare const InitialScreenBullet: React.FC<InitialScreenBulletProps>;
+export type BaseHeroProps = {
+	title?: string;
+	subtitle?: string;
+	actions?: ReactNode;
+	image: ReactNode;
+	description?: ReactNode;
+	bullets?: ReactElement<InitialScreenBulletProps, typeof InitialScreenBullet>[];
+};
+export type InitialScreenHeroProps = PropsWithChildren<BaseHeroProps> & Omit<BoxProps, "alignItems" | "mx">;
+declare const InitialScreenHero: React.FC<InitialScreenHeroProps>;
+export type Props = {
+	title: string;
+};
+export type InitialScreenSectionProps = PropsWithChildren<Props> & Omit<BoxProps, "display" | "flexDirection" | "paddingTop" | "gap" | "maxWidth" | "mx">;
+declare const InitialScreenSection: React.FC<InitialScreenSectionProps>;
+export type InitialScreenCardProps = {
+	icon: ReactNode;
+	title: string;
+	description: string;
+};
+export type InitialScreenCardLayoutProps = PropsWithChildren & Omit<BoxProps, "display" | "flexDirection" | "gap">;
+declare const InitialScreenCard: React.FC<InitialScreenCardProps>;
+declare const InitialScreenCardLayout: React.FC<InitialScreenCardLayoutProps>;
+export type InitialScreenFeatureItemProps = PropsWithChildren<{
+	title: string;
+	description: string;
+}>;
+export type InitialScreenFeatureProps = {
+	content: ReactNode;
+	image: ReactNode;
+};
+export type InitialScreenFeatureItemSpacingProps = Omit<BoxProps, "borderTopWidth" | "borderBottomWidth" | "borderColor" | "borderStyle">;
+declare const InitialScreenFeatureItem: React.FC<InitialScreenFeatureItemProps>;
+declare const InitialScreenFeatureItemSpacing: React.FC<InitialScreenFeatureItemSpacingProps>;
+declare const InitialScreenFeature: React.FC<InitialScreenFeatureProps>;
+export type ModuleProps = {
+	title: string;
+	description: string;
+};
+export type InitialScreenModuleProps = PropsWithChildren<ModuleProps> & BoxProps;
+declare const InitialScreenModule: React.FC<InitialScreenModuleProps>;
+export interface InitialScreenComponents {
+	/**
+	 * Displays a bullet point with an icon and text, typically used to list app features with visual appeal.
+	 */
+	Bullet: typeof InitialScreenBullet;
+	/**
+	 * Displays a card with an icon, title, and children, generally used for descriptive purposes.
+	 */
+	Card: typeof InitialScreenCard;
+	/**
+	 * Displays multiple cards in a row or column, responsive to screen size.
+	 */
+	CardLayout: typeof InitialScreenCardLayout;
+	/**
+	 * Displays a feature with content and an image side by side.
+	 */
+	Feature: typeof InitialScreenFeature;
+	/**
+	 * Displays a feature with a title, description, and children, often used with the ItemSpacing component.
+	 */
+	FeatureItem: typeof InitialScreenFeatureItem;
+	/**
+	 * A line that separates items in the feature, maintaining a consistent layout.
+	 */
+	FeatureItemSpacing: typeof InitialScreenFeatureItemSpacing;
+	/**
+	 * Displays a hero with a title, subtitle, description, actions, bullets, and an image, typically for the main content of the initial screen.
+	 */
+	Hero: typeof InitialScreenHero;
+	/**
+	 * Displays a module with a title, description, and children, generally used for application modules or callout cards.
+	 */
+	Module: typeof InitialScreenModule;
+	/**
+	 * Displays a section with a title and children, used to separate content in the initial screen while maintaining a consistent layout.
+	 */
+	Section: typeof InitialScreenSection;
+}
+export interface InitialScreenBaseProps {
+	/**
+	 * Content of the InitialScreen component.
+	 * @TJS-type React.ReactNode
+	 */
+	children: React.ReactNode;
+}
+export type InitialScreenProps = InitialScreenBaseProps & Omit<BoxProps, "width" | "display" | "flexDirection" | "backgroundColor" | "pb" | "children">;
+/**
+ * This component provides a consistent layout and spacing for displaying a landing or welcome screen. It introduces users to an application or service, offering options to access more information or proceed further.
+ */
+export declare const InitialScreen: React.FC<InitialScreenProps> & InitialScreenComponents;
 
 export {};