@julseb-lib/react 0.0.85 → 0.0.86

package/dist/lib/components/Tabs/Tabs.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Tabs component ===============================================*/
-
-import { forwardRef, useState } from "react"
+import { useState, type FC } from "react"
 import { useSearchParams } from "react-router-dom"
 import { uuid } from "@julseb-lib/utils"
 import { Text } from "../../"
@@ -11,127 +9,132 @@ import { TabItem } from "./TabItem"
 import type { ILibTabs } from "./types"
 
 /**
- * @description Returns a Tabs component
- * @link https://documentation-components-react.vercel.app/components/tabs
+ * Tabs component for rendering a set of tabbed panels with customizable tab items, active state, URL sync, and visual variants.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop tabsItems: Array<LibTabItem>
- * @prop showInUrl?: boolean
- * @prop queries?: Array<Array<string>> => only if showInUrl is set to true, working only with projects using react-router
- * @prop justify?: "start" | "stretch"
- * @prop active?: number
- * @prop variant?: "basic" | "rounded"
+ * @param {Object} props - Tabs props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} [props.className] - Additional class names.
+ * @param {Array<LibTabItem>} props.tabsItems - Array of tab item objects.
+ * @param {boolean} [props.showInUrl] - If true, syncs the active tab with the URL query string (requires react-router).
+ * @param {Array<Array<string>>} [props.queries] - Query parameters for URL sync (only if showInUrl is true).
+ * @param {"start" | "stretch"} [props.justify="start"] - Justification of the tab buttons.
+ * @param {number} [props.active=0] - Index of the initially active tab.
+ * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the tabs.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Tabs component.
  *
- * @type LibTabItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string
- * @prop content: ReactNode
+ * @see https://documentation-components-react.vercel.app/components/tabs
+ * @example
+ * <Tabs
+ *   tabsItems={[
+ *     { title: "Tab 1", content: <div>Content 1</div> },
+ *     { title: "Tab 2", content: <div>Content 2</div> }
+ *   ]}
+ *   active={0}
+ *   justify="start"
+ *   variant="basic"
+ * />
  */
-export const Tabs = forwardRef<HTMLDivElement, ILibTabs>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            tabsItems,
-            justify = "start",
-            active = 0,
-            variant = "basic",
-            showInUrl,
-            queries,
-            ...rest
-        },
-        ref
-    ) => {
-        const [searchParams, setSearchParams] = useSearchParams()
-        const tab = searchParams.get("tab") || active.toString()
+export const Tabs: FC<ILibTabs> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    tabsItems,
+    justify = "start",
+    active = 0,
+    variant = "basic",
+    showInUrl,
+    queries,
+    ...rest
+}) => {
+    const [searchParams, setSearchParams] = useSearchParams()
+    const tab = searchParams.get("tab") || active.toString()
 
-        const [activeTab, setActiveTab] = useState<number>(
-            showInUrl ? Number(tab) : active
-        )
+    const [activeTab, setActiveTab] = useState<number>(
+        showInUrl ? Number(tab) : active
+    )
 
-        const handleClick = (activeTab: number) => {
-            setActiveTab(activeTab)
+    const handleClick = (activeTab: number) => {
+        setActiveTab(activeTab)
 
-            if (showInUrl) {
-                setSearchParams(
-                    queries
-                        ? {
-                              tab: activeTab,
-                              ...Object.fromEntries(queries),
-                          }
-                        : { tab: activeTab }
-                )
-            }
+        if (showInUrl) {
+            setSearchParams(
+                queries
+                    ? {
+                          tab: activeTab,
+                          ...Object.fromEntries(queries),
+                      }
+                    : { tab: activeTab }
+            )
         }
+    }
 
-        return (
-            <TabsContainer
-                data-testid={testid}
-                className={className}
-                ref={ref}
-                as={as}
-                {...rest}
+    return (
+        <TabsContainer
+            data-testid={testid}
+            className={className}
+            ref={ref}
+            as={as}
+            {...rest}
+        >
+            <TabsButtonsContainer
+                data-testid={testid && `${testid}.TabsButtonsContainer`}
+                className={className && "TabsButtonsContainer"}
+                justify={justify}
+                variant={variant}
             >
-                <TabsButtonsContainer
-                    data-testid={testid && `${testid}.TabsButtonsContainer`}
-                    className={className && "TabsButtonsContainer"}
-                    justify={justify}
-                    variant={variant}
-                >
-                    {tabsItems.map((item, i) => (
-                        <TabButton
-                            key={uuid()}
-                            data-testid={
-                                item["data-testid"]
-                                    ? item["data-testid"]
-                                    : testid &&
-                                      `${testid}.TabsButtonsContainer.TabButton`
-                            }
-                            className={
-                                item.className
-                                    ? `${item.className}.Button`
-                                    : className && "TabButton"
-                            }
-                            id={item.id && `${item.id}.TabButton`}
-                            ref={item.ref}
-                            isActive={activeTab === i}
-                            onClick={() => handleClick(i)}
-                            justify={justify}
-                            variant={variant}
-                        >
-                            {item.title}
-                        </TabButton>
-                    ))}
-                </TabsButtonsContainer>
-
                 {tabsItems.map((item, i) => (
-                    <TabItem
+                    <TabButton
                         key={uuid()}
                         data-testid={
                             item["data-testid"]
                                 ? item["data-testid"]
-                                : testid && `${testid}.TabItem`
+                                : testid &&
+                                  `${testid}.TabsButtonsContainer.TabButton`
                         }
                         className={
                             item.className
-                                ? `${item.className}.Tab`
-                                : className && "TabItem"
+                                ? `${item.className}.Button`
+                                : className && "TabButton"
                         }
-                        id={item.id && `${item.id}.Tab`}
+                        id={item.id && `${item.id}.TabButton`}
                         ref={item.ref}
-                        as={typeof item.content === "string" ? Text : "span"}
-                        isActive={activeTab.toString() === i.toString()}
+                        isActive={activeTab === i}
+                        onClick={() => handleClick(i)}
+                        justify={justify}
+                        variant={variant}
                     >
-                        {item.content}
-                    </TabItem>
+                        {item.title}
+                    </TabButton>
                 ))}
-            </TabsContainer>
-        )
-    }
-)
+            </TabsButtonsContainer>
+
+            {tabsItems.map((item, i) => (
+                <TabItem
+                    key={uuid()}
+                    data-testid={
+                        item["data-testid"]
+                            ? item["data-testid"]
+                            : testid && `${testid}.TabItem`
+                    }
+                    className={
+                        item.className
+                            ? `${item.className}.Tab`
+                            : className && "TabItem"
+                    }
+                    id={item.id && `${item.id}.Tab`}
+                    ref={item.ref}
+                    as={typeof item.content === "string" ? Text : "span"}
+                    isActive={activeTab.toString() === i.toString()}
+                >
+                    {item.content}
+                </TabItem>
+            ))}
+        </TabsContainer>
+    )
+}

package/dist/lib/components/Tabs/TabsButtonsContainer.tsx

@@ -1,46 +1,48 @@
-/*=============================================== TabsButtonsContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledTabsButtonsContainer } from "./styles"
 import type { ILibTabsButtonsContainer } from "./types"
 
 /**
- * @description Returns a TabsButtonsContainer component
- * @link https://documentation-components-react.vercel.app/components/tabs
+ * TabsButtonsContainer component for wrapping tab buttons with customizable justification and visual variant.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop justify?: "start" | "stretch"
- * @prop variant?: "basic" | "rounded"
+ * @param {Object} props - TabsButtonsContainer props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {"start" | "stretch"} [props.justify="start"] - Justification of the tab buttons.
+ * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the tab buttons.
+ * @param {ReactNode} [props.children] - Tab button elements.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered TabsButtonsContainer component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/tabs
+ * @example
+ * <TabsButtonsContainer justify="stretch" variant="rounded">
+ *   {tabButtons}
+ * </TabsButtonsContainer>
  */
-export const TabsButtonsContainer = forwardRef<
-    HTMLDivElement,
-    ILibTabsButtonsContainer
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            justify = "start",
-            variant = "basic",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledTabsButtonsContainer
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $cols={(children as Array<typeof children>)?.length}
-                $justify={justify}
-                $variant={variant}
-                {...rest}
-            >
-                {children}
-            </StyledTabsButtonsContainer>
-        )
-    }
-)
+export const TabsButtonsContainer: FC<ILibTabsButtonsContainer> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    justify = "start",
+    variant = "basic",
+    ...rest
+}) => {
+    return (
+        <StyledTabsButtonsContainer
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $cols={(children as Array<typeof children>)?.length}
+            $justify={justify}
+            $variant={variant}
+            {...rest}
+        >
+            {children}
+        </StyledTabsButtonsContainer>
+    )
+}

package/dist/lib/components/Tabs/TabsContainer.tsx

@@ -1,23 +1,36 @@
-/*=============================================== TabsContainer component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledTabs } from "./styles"
 import type { ILibTabsContainer } from "./types"
 
 /**
- * @description Returns a TabsContainer component
- * @link https://documentation-components-react.vercel.app/components/tabs
+ * TabsContainer component for wrapping tabbed content and buttons.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @param {Object} props - TabsContainer props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {ReactNode} [props.children] - Content to render inside the container.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered TabsContainer component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/tabs
+ * @example
+ * <TabsContainer>
+ *   {children}
+ * </TabsContainer>
  */
-export const TabsContainer = forwardRef<HTMLDivElement, ILibTabsContainer>(
-    ({ "data-testid": testid, as, children, ...rest }, ref) => {
-        return (
-            <StyledTabs data-testid={testid} ref={ref} as={as} {...rest}>
-                {children}
-            </StyledTabs>
-        )
-    }
-)
+export const TabsContainer: FC<ILibTabsContainer> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    ...rest
+}) => {
+    return (
+        <StyledTabs data-testid={testid} ref={ref} as={as} {...rest}>
+            {children}
+        </StyledTabs>
+    )
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== Tabs exports ===============================================*/
-
 export * from "./Tabs"
 export * from "./TabsContainer"
 export * from "./TabsButtonsContainer"

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

@@ -1,5 +1,3 @@
-/*=============================================== Tabs styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import {
     setDefaultTheme,

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

@@ -1,5 +1,3 @@
-/*=============================================== Tabs types ===============================================*/
-
 import type { ButtonHTMLAttributes } from "react"
 import type {
     LibComponentBase,
@@ -8,20 +6,14 @@ import type {
     LibTabItem,
 } from "../../types"
 
-/*====================== TabsContainer ======================*/
-
 export interface ILibTabsContainer extends LibComponentBase<HTMLDivElement> {}
 
-/*====================== TabsButtonsContainer ======================*/
-
 export interface ILibTabsButtonsContainer
     extends LibComponentBase<HTMLDivElement> {
     justify?: LibTabJustify
     variant?: LibTabVariant
 }
 
-/*====================== TabsButton ======================*/
-
 export interface ILibTabButton
     extends LibComponentBase<HTMLButtonElement>,
         ButtonHTMLAttributes<HTMLButtonElement> {
@@ -31,14 +23,10 @@ export interface ILibTabButton
     variant?: LibTabVariant
 }
 
-/*====================== TabItem ======================*/
-
 export interface ILibTabItem extends LibComponentBase<HTMLDivElement> {
     isActive: boolean
 }
 
-/*====================== Tabs ======================*/
-
 interface ILibTabsBase extends LibComponentBase<HTMLDivElement> {
     tabsItems: Array<LibTabItem>
     justify?: LibTabJustify

package/dist/lib/components/Tag/Tag.tsx

@@ -1,97 +1,101 @@
-/*=============================================== Tag component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { getIconSizeFromFont } from "../../lib-utils"
 import { LibIcon } from "../LibIcon"
 import { StyledTag } from "./styles"
 import type { ILibTag } from "./types"
 
 /**
- * @description Returns a Tag component
- * @link https://documentation-components-react.vercel.app/components/tag
+ * Tag component for rendering a customizable tag with optional icons, colors, border, padding, and font size.
+ *
+ * @component
  * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop backgroundColor?: Any color from the library
- * @prop textColor?: Any color from the library
- * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
- * @prop padding?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop fontSize?: "display-h1" | "display-h2" | "display-h3" | "display-h4" | "display-h5" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "small"
- * @prop icons?: { left?: string | JSX.Element; right?: string | JSX.Element }
- * @prop iconSizes?: { left?: number; right?: number } => only if icons is defined
- * @prop iconBaseUrl?: string => only if icons is defined
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" => only if icons is defined
+ * @param {Object} props - Tag props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLSpanElement>} [props.ref] - Ref forwarded to the span element.
+ * @param {string} [props.backgroundColor="primary"] - Background color (any color from the library).
+ * @param {string} [props.textColor] - Text color (any color from the library).
+ * @param {{ style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: string }} [props.border] - Border style.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | { left?: LibSpacers | "auto"; top?: LibSpacers | "auto"; right?: LibSpacers | "auto"; bottom?: LibSpacers | "auto"; leftRight?: LibSpacers | "auto"; topBottom?: LibSpacers | "auto" }} [props.padding] - Padding for the tag.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }} [props.borderRadius="round"] - Border radius.
+ * @param {"display-h1" | "display-h2" | "display-h3" | "display-h4" | "display-h5" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "small"} [props.fontSize="small"] - Font size.
+ * @param {{ left?: string | JSX.Element; right?: string | JSX.Element }} [props.icons] - Icons to display on the left and/or right.
+ * @param {{ left?: number; right?: number }} [props.iconSizes] - Icon sizes for left and right icons.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between icon and text.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Tag content.
+ * @param {any} [props.rest] - Additional props passed to the span element.
+ * @returns {JSX.Element} The rendered Tag component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/tag
+ * @example
+ * <Tag backgroundColor="success" icons={{ left: "check" }}>Success</Tag>
  */
-export const Tag = forwardRef<HTMLSpanElement, ILibTag>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            backgroundColor = "primary",
-            textColor = backgroundColor === "white"
-                ? "primary"
-                : backgroundColor === "black"
-                ? "white"
-                : "background",
-            border,
-            padding = {
-                topBottom: "xxs",
-                leftRight: "s",
-            },
-            borderRadius = "round",
-            fontSize = "small",
-            icons,
-            iconSizes = {
-                left: getIconSizeFromFont(fontSize),
-                right: getIconSizeFromFont(fontSize),
-            },
-            iconBaseUrl,
-            gap = "xs",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledTag
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $backgroundColor={backgroundColor}
-                $textColor={textColor}
-                $border={border}
-                $padding={padding}
-                $borderRadius={borderRadius}
-                $gap={gap}
-                $fontSize={fontSize}
-                {...rest}
-            >
-                {icons?.left && (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon.Left`}
-                        className={className && "IconLeft"}
-                        icon={icons.left}
-                        size={iconSizes?.left}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
+export const Tag: FC<ILibTag> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    backgroundColor = "primary",
+    textColor = backgroundColor === "white"
+        ? "primary"
+        : backgroundColor === "black"
+        ? "white"
+        : "background",
+    border,
+    padding = {
+        topBottom: "xxs",
+        leftRight: "s",
+    },
+    borderRadius = "round",
+    fontSize = "small",
+    icons,
+    iconSizes = {
+        left: getIconSizeFromFont(fontSize),
+        right: getIconSizeFromFont(fontSize),
+    },
+    iconBaseUrl,
+    gap = "xs",
+    ...rest
+}) => {
+    return (
+        <StyledTag
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            $backgroundColor={backgroundColor}
+            $textColor={textColor}
+            $border={border}
+            $padding={padding}
+            $borderRadius={borderRadius}
+            $gap={gap}
+            $fontSize={fontSize}
+            {...rest}
+        >
+            {icons?.left && (
+                <LibIcon
+                    data-testid={testid && `${testid}.Icon.Left`}
+                    className={className && "IconLeft"}
+                    icon={icons.left}
+                    size={iconSizes?.left}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
 
-                {children}
+            {children}
 
-                {icons?.right && (
-                    <LibIcon
-                        data-testid={testid && `${testid}.Icon.Right`}
-                        className={className && "IconRight"}
-                        icon={icons.right}
-                        size={iconSizes?.right}
-                        baseUrl={iconBaseUrl}
-                    />
-                )}
-            </StyledTag>
-        )
-    }
-)
+            {icons?.right && (
+                <LibIcon
+                    data-testid={testid && `${testid}.Icon.Right`}
+                    className={className && "IconRight"}
+                    icon={icons.right}
+                    size={iconSizes?.right}
+                    baseUrl={iconBaseUrl}
+                />
+            )}
+        </StyledTag>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Tag styles ===============================================*/
-
 import styled from "styled-components"
 import { Mixins, setDefaultTheme } from "../../"
 import type {