@lumx/react 3.0.2-alpha-react-utils.3 → 3.0.3-alpha.1

package/types.d.ts

@@ -27,6 +27,8 @@ export declare type Comp<P, T = HTMLElement> = {
 };
 /** Union type of all heading elements */
 export declare type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Union type of all text elements */
+export declare type TextElement = "span" | "p" | HeadingElement;
 export interface HasTheme {
 	/**
 	 * Theme adapting the component to light or dark background.
@@ -1133,6 +1135,24 @@ export interface FlexBoxProps extends GenericProps {
  * @return React element.
  */
 export declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
+/**
+ * Accepted gap sizes for the generic block.
+ */
+export declare const GenericBlockGapSize: Pick<{
+	readonly xxs: "xxs";
+	readonly xs: "xs";
+	readonly s: "s";
+	readonly m: "m";
+	readonly l: "l";
+	readonly xl: "xl";
+	readonly xxl: "xxl";
+	readonly tiny: "tiny";
+	readonly regular: "regular";
+	readonly medium: "medium";
+	readonly big: "big";
+	readonly huge: "huge";
+}, "tiny" | "regular" | "medium" | "big" | "huge">;
+export declare type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
 export interface GenericBlockProps extends FlexBoxProps {
 	/**
 	 * Component to use as visual element.
@@ -1172,28 +1192,37 @@ export interface GenericBlockProps extends FlexBoxProps {
 	 * props to forward to the figure element.
 	 */
 	figureProps?: Omit<FlexBoxProps, "children">;
+	/**
+	 * Gap space between sections.
+	 */
+	gap?: GenericBlockGapSize;
 }
 export declare type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
+export interface GenericBlockSectionProps extends FlexBoxProps {
+	/**
+	 * Gap space between items.
+	 */
+	gap?: GenericBlockGapSize;
+}
 export interface GenericBlock extends BaseGenericBlock {
 	/**
 	 * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
 	 * the "figure" section of the block (instead of using `figure` and `figureProps` props).
 	 */
-	Figure: Comp<FlexBoxProps>;
+	Figure: Comp<GenericBlockSectionProps>;
 	/**
 	 * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
 	 * the "content" section of the block (instead of using `content` and `contentProps` props).
 	 */
-	Content: Comp<FlexBoxProps>;
+	Content: Comp<GenericBlockSectionProps>;
 	/**
 	 * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
 	 * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
 	 */
-	Actions: Comp<FlexBoxProps>;
+	Actions: Comp<GenericBlockSectionProps>;
 }
 declare const BaseGenericBlock: BaseGenericBlock;
 export declare const GenericBlock: GenericBlock;
-export declare type TextComponents = "span" | "p" | HeadingElement;
 /**
  * Defines the props of the component.
  */
@@ -1201,7 +1230,7 @@ export interface TextProps extends GenericProps {
 	/**
 	 * Color variant.
 	 */
-	color?: Color;
+	color?: ColorPalette;
 	/**
 	 * Lightened or darkened variant of the selected color.
 	 */
@@ -1213,7 +1242,7 @@ export interface TextProps extends GenericProps {
 	/**
 	 * Custom component to render the text.
 	 */
-	as: TextComponents;
+	as: TextElement;
 	/**
 	 * Control whether the text should truncate or not.
 	 * Setting as `true` will make the text truncate on a single line.
@@ -1222,6 +1251,11 @@ export interface TextProps extends GenericProps {
 	truncate?: boolean | {
 		lines: number;
 	};
+	/**
+	 * Prevents text to wrap on multiple lines
+	 * (automatically activated when single line text truncate is activated).
+	 */
+	noWrap?: boolean;
 }
 /**
  * Text component.
@@ -1460,6 +1494,31 @@ export interface ImageBlockProps extends GenericProps, HasTheme {
  * @return React element.
  */
 export declare const ImageBlock: Comp<ImageBlockProps, HTMLDivElement>;
+/**
+ * Defines the props of the component.
+ */
+export interface InlineListProps extends GenericProps {
+	/**
+	 * Text color.
+	 */
+	color?: ColorPalette;
+	/**
+	 * Lightened or darkened variant of the selected color.
+	 */
+	colorVariant?: ColorVariant;
+	/**
+	 * Typography variant.
+	 */
+	typography?: Typography;
+}
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const InlineList: Comp<InlineListProps>;
 /**
  * Defines the props of the component.
  */