@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Text/templates/H6.tsx

@@ -1,34 +1,28 @@
-/*=============================================== H6 ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledH6 } from "../styles"
 import type { ILibText } from "../types"
 
-export const H6 = forwardRef<HTMLHeadingElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledH6
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledH6>
-        )
-    }
-)
+export const H6: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledH6
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledH6>
+    )
+}

package/dist/lib/components/Text/templates/Ol.tsx

@@ -1,34 +1,28 @@
-/*=============================================== Ol ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledOl } from "../styles"
 import type { ILibText } from "../types"
 
-export const Ol = forwardRef<HTMLOListElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledOl
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledOl>
-        )
-    }
-)
+export const Ol: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledOl
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledOl>
+    )
+}

package/dist/lib/components/Text/templates/P.tsx

@@ -1,34 +1,28 @@
-/*=============================================== P ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledP } from "../styles"
 import type { ILibText } from "../types"
 
-export const P = forwardRef<HTMLParagraphElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledP
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledP>
-        )
-    }
-)
+export const P: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledP
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledP>
+    )
+}

package/dist/lib/components/Text/templates/Small.tsx

@@ -1,34 +1,28 @@
-/*=============================================== Small ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledSmall } from "../styles"
 import type { ILibText } from "../types"
 
-export const Small = forwardRef<HTMLParagraphElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledSmall
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledSmall>
-        )
-    }
-)
+export const Small: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledSmall
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledSmall>
+    )
+}

package/dist/lib/components/Text/templates/Strong.tsx

@@ -1,34 +1,28 @@
-/*=============================================== Strong ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledStrong } from "../styles"
 import type { ILibText } from "../types"
 
-export const Strong = forwardRef<HTMLParagraphElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledStrong
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledStrong>
-        )
-    }
-)
+export const Strong: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledStrong
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledStrong>
+    )
+}

package/dist/lib/components/Text/templates/Ul.tsx

@@ -1,34 +1,28 @@
-/*=============================================== Ul ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledUl } from "../styles"
 import type { ILibText } from "../types"
 
-export const Ul = forwardRef<HTMLUListElement, ILibText>(
-    (
-        {
-            as,
-            "data-testid": testid,
-            children,
-            color,
-            linkColor,
-            textAlign,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledUl
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $color={color}
-                $linkColor={linkColor}
-                $textAlign={textAlign}
-                {...rest}
-            >
-                {children}
-            </StyledUl>
-        )
-    }
-)
+export const Ul: FC<ILibText> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    color,
+    linkColor,
+    textAlign,
+    ...rest
+}) => {
+    return (
+        <StyledUl
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $color={color}
+            $linkColor={linkColor}
+            $textAlign={textAlign}
+            {...rest}
+        >
+            {children}
+        </StyledUl>
+    )
+}

package/dist/lib/components/Text/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== Text types ===============================================*/
-
 import type {
     LibAllColors,
     LibColorsHover,

package/dist/lib/components/TextIcon/TextIcon.tsx

@@ -1,6 +1,4 @@
-/*=============================================== TextIcon component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Text } from "../../"
 import { LibIcon } from "../LibIcon"
 import { getIconHeight } from "./utils"
@@ -8,97 +6,95 @@ import { StyledTextIcon, IconContainer } from "./styles"
 import type { ILibTextIcon } from "./types"
 
 /**
- * @description Returns a Text with Icon component
- * @link https://documentation-components-react.vercel.app/components/text-icon
+ * TextIcon component for rendering text with an icon, supporting customizable tag, icon, color, gap, and layout.
+ *
+ * @component
  * @extends ILibText
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>
- * @prop icon: string | JSX.Element
- * @prop iconColor?: Any color from the library
- * @prop iconSize?: number
- * @prop textAs?: ElementType
- * @prop tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "small" | "blockquote"
- * @prop iconBaseUrl?: string
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop containerStyle?: CSSProperties
- * @prop color?: Any color from the library
- * @prop linkColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop textAlign?: CssTextAlign
- * @prop display?: boolean => only if tag is set to h1 to h5
+ * @param {Object} props - TextIcon props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string | JSX.Element} props.icon - Icon to display.
+ * @param {string} [props.iconColor] - Icon color (any color from the library).
+ * @param {number} [props.iconSize] - Icon size.
+ * @param {ElementType} [props.textAs] - Custom element type for the text.
+ * @param {"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "small" | "blockquote"} [props.tag="p"] - Tag for the text element.
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap] - Gap between icon and text.
+ * @param {CSSProperties} [props.containerStyle] - Style for the container.
+ * @param {string} [props.color] - Text color (any color from the library).
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.linkColor] - Link color.
+ * @param {CssTextAlign} [props.textAlign] - Text alignment.
+ * @param {boolean} [props.display] - Display property (only if tag is set to h1 to h5).
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Text content.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered TextIcon component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/text-icon
+ * @example
+ * <TextIcon icon="star" tag="h2" color="primary">Featured</TextIcon>
  */
-export const TextIcon = forwardRef<
-    HTMLHeadingElement &
-        HTMLParagraphElement &
-        HTMLQuoteElement &
-        HTMLUListElement &
-        HTMLOListElement &
-        HTMLDListElement,
-    ILibTextIcon
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            textAs,
-            className,
-            children,
-            icon,
-            iconColor,
-            iconSize,
-            iconBaseUrl,
-            tag = "p",
-            display,
-            gap,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
-            "data-testid": testid && `${testid}.Text`,
-            as: textAs,
-            className: "Text",
-            children,
-            ...rest,
-        }
+export const TextIcon: FC<ILibTextIcon> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    textAs,
+    className,
+    children,
+    icon,
+    iconColor,
+    iconSize,
+    iconBaseUrl,
+    tag = "p",
+    display,
+    gap,
+    containerStyle,
+    ...rest
+}) => {
+    const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
+        "data-testid": testid && `${testid}.Text`,
+        as: textAs,
+        className: "Text",
+        children,
+        ...rest,
+    }
 
-        return (
-            <StyledTextIcon
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                style={containerStyle}
-                $gap={gap}
+    return (
+        <StyledTextIcon
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            style={containerStyle}
+            $gap={gap}
+        >
+            <IconContainer
+                data-testid={testid && `${testid}.IconContainer`}
+                className={className && "IconContainer"}
+                $tag={tag}
+                $display={display}
+                $iconSize={iconSize}
             >
-                <IconContainer
-                    data-testid={testid && `${testid}.IconContainer`}
-                    className={className && "IconContainer"}
-                    $tag={tag}
-                    $display={display}
-                    $iconSize={iconSize}
-                >
-                    <LibIcon
-                        data-testid={testid && `${testid}.IconContainer.Icon`}
-                        className={className && "Icon"}
-                        icon={icon}
-                        size={iconSize || getIconHeight(tag, display)}
-                        color={iconColor}
-                        baseUrl={iconBaseUrl}
-                    />
-                </IconContainer>
+                <LibIcon
+                    data-testid={testid && `${testid}.IconContainer.Icon`}
+                    className={className && "Icon"}
+                    icon={icon}
+                    size={iconSize || getIconHeight(tag, display)}
+                    color={iconColor}
+                    baseUrl={iconBaseUrl}
+                />
+            </IconContainer>
 
-                {tag === "h1" ||
-                tag === "h2" ||
-                tag === "h3" ||
-                tag === "h4" ||
-                tag === "h5" ? (
-                    <Text display={display} tag={tag} {...textProps} />
-                ) : (
-                    <Text tag={tag} {...textProps} />
-                )}
-            </StyledTextIcon>
-        )
-    }
-)
+            {tag === "h1" ||
+            tag === "h2" ||
+            tag === "h3" ||
+            tag === "h4" ||
+            tag === "h5" ? (
+                <Text display={display} tag={tag} {...textProps} />
+            ) : (
+                <Text tag={tag} {...textProps} />
+            )}
+        </StyledTextIcon>
+    )
+}

package/dist/lib/components/TextIcon/index.ts

@@ -1,3 +1 @@
-/*=============================================== TextIcon exports ===============================================*/
-
 export * from "./TextIcon"

package/dist/lib/components/TextIcon/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== TextIcon styles ===============================================*/
-
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { Mixins, setDefaultTheme } from "../../"

package/dist/lib/components/TextIcon/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== TextIcon types ===============================================*/
-
 import type { ElementType, CSSProperties } from "react"
 import type {
     LibAllColors,

package/dist/lib/components/TextIcon/utils.ts

@@ -1,5 +1,4 @@
 // @ts-nocheck
-/*=============================================== Utils ===============================================*/
 
 import { LIB_TOKENS } from "../.."
 import type { LibTextIconTag } from "../../types"