@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Stepper/Step.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Step ===============================================*/
-
-import { forwardRef, type ElementType } from "react"
+import type { ElementType, FC } from "react"
 import { Link } from "react-router-dom"
 import classNames from "classnames"
 import { Text } from "../../"
@@ -10,109 +8,115 @@ import { StyledStep, NumberContainer } from "./styles"
 import type { ILibStep } from "./types"
 
 /**
- * @description Returns a Step component
- * @link https://documentation-components-react.vercel.app/components/stepper
+ * Step component for rendering a single step in a stepper, supporting links, buttons, icons, and customizable appearance.
+ *
+ * @component
  * @extends HTMLSpanElement & LibButtonLinkBlank
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop direction?: "column" | "row"
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop isActive?: boolean
- * @prop isDone?: boolean
- * @prop iconActive?: string | JSX.Element
- * @prop iconActiveSize?: number
- * @prop number?: number
- * @prop iconBaseUrl?: string
- * @prop onClick?: void => only if to or href are not defined
- * @prop disabled?: boolean => only if onClick is defined
- * @prop to?: string => only if onClick and href are not defined
- * @prop href?: string => only if onClick and to are not defined
- * @prop blank?: boolean => only if to or href are defined
+ * @param {Object} props - Step props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLSpanElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {"column" | "row"} [props.direction="row"] - Direction of the step layout.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for the step.
+ * @param {boolean} [props.isActive] - Whether the step is active.
+ * @param {boolean} [props.isDone] - Whether the step is completed.
+ * @param {string | JSX.Element} [props.iconActive] - Icon to display when the step is active and done.
+ * @param {number} [props.iconActiveSize=16] - Size of the active icon.
+ * @param {number} [props.number] - Step number to display.
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon.
+ * @param {() => void} [props.onClick] - Click handler (only if to or href are not defined).
+ * @param {boolean} [props.disabled] - Whether the step is disabled (only if onClick is defined).
+ * @param {string} [props.to] - Link target (only if onClick and href are not defined).
+ * @param {string} [props.href] - Href for anchor (only if onClick and to are not defined).
+ * @param {boolean} [props.blank] - Open link in new tab (only if to or href are defined).
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Step label/content.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Step component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/stepper
+ * @example
+ * <Step number={1} isActive>Step 1</Step>
  */
-export const Step = forwardRef<HTMLSpanElement, ILibStep>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            direction = "row",
-            accentColor = "primary",
-            isActive,
-            isDone,
-            iconActiveSize = 16,
-            iconActive = (
-                <CheckCircle
-                    data-testid={testid && `${testid}.NumberContainer.Icon`}
-                    className={className && "Icon"}
-                    size={iconActiveSize}
-                />
-            ),
-            iconBaseUrl,
-            number,
-            to,
-            href,
-            blank,
-            onClick,
-            ...rest
-        },
-        ref
-    ) => {
-        const getAs: ElementType = as
-            ? as
-            : to
-            ? Link
-            : onClick
-            ? "button"
-            : href
-            ? "a"
-            : "span"
+export const Step: FC<ILibStep> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    direction = "row",
+    accentColor = "primary",
+    isActive,
+    isDone,
+    iconActiveSize = 16,
+    iconActive = (
+        <CheckCircle
+            data-testid={testid && `${testid}.NumberContainer.Icon`}
+            className={className && "Icon"}
+            size={iconActiveSize}
+        />
+    ),
+    iconBaseUrl,
+    number,
+    to,
+    href,
+    blank,
+    onClick,
+    ...rest
+}) => {
+    const getAs: ElementType = as
+        ? as
+        : to
+        ? Link
+        : onClick
+        ? "button"
+        : href
+        ? "a"
+        : "span"
 
-        const isLink: boolean = !!(to || href || onClick)
+    const isLink: boolean = !!(to || href || onClick)
 
-        return (
-            <StyledStep
-                data-testid={testid}
-                className={classNames(className, { StepLink: isLink })}
-                ref={ref}
-                as={getAs}
-                to={to}
-                onClick={onClick}
-                href={href}
-                target={blank ? "blank" : null}
-                rel={blank ? "noreferrer noopener" : null}
-                $direction={direction}
+    return (
+        <StyledStep
+            data-testid={testid}
+            className={classNames(className, { StepLink: isLink })}
+            ref={ref}
+            as={getAs}
+            to={to}
+            onClick={onClick}
+            href={href}
+            target={blank ? "blank" : null}
+            rel={blank ? "noreferrer noopener" : null}
+            $direction={direction}
+            $accentColor={accentColor}
+            {...rest}
+        >
+            <NumberContainer
+                data-testid={testid && `${testid}.NumberContainer`}
+                className={classNames(
+                    { NumberContainer: className },
+                    { Active: isActive }
+                )}
                 $accentColor={accentColor}
-                {...rest}
             >
-                <NumberContainer
-                    data-testid={testid && `${testid}.NumberContainer`}
-                    className={classNames(
-                        { NumberContainer: className },
-                        { Active: isActive }
-                    )}
-                    $accentColor={accentColor}
-                >
-                    {isActive && isDone ? (
-                        <LibIcon
-                            icon={iconActive}
-                            size={iconActiveSize}
-                            baseUrl={iconBaseUrl}
-                        />
-                    ) : (
-                        number
-                    )}
-                </NumberContainer>
+                {isActive && isDone ? (
+                    <LibIcon
+                        icon={iconActive}
+                        size={iconActiveSize}
+                        baseUrl={iconBaseUrl}
+                    />
+                ) : (
+                    number
+                )}
+            </NumberContainer>
 
-                <Text
-                    tag="small"
-                    data-testid={testid && `${testid}.Text`}
-                    className={className && "Text"}
-                >
-                    {children}
-                </Text>
-            </StyledStep>
-        )
-    }
-)
+            <Text
+                tag="small"
+                data-testid={testid && `${testid}.Text`}
+                className={className && "Text"}
+            >
+                {children}
+            </Text>
+        </StyledStep>
+    )
+}

package/dist/lib/components/Stepper/Stepper.tsx

@@ -1,96 +1,92 @@
-/*=============================================== Stepper component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { Step } from "./Step"
 import { StyledStepper } from "./styles"
 import type { ILibStepper } from "./types"
 
 /**
- * @description Returns a Stepper component
- * @link https://documentation-components-react.vercel.app/components/stepper
+ * Stepper component for rendering a sequence of steps, supporting both array-based and custom children, with customizable direction, icons, and accent color.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop steps: Array<LibStep> => only if children is not defined
- * @prop children?: ReactChildren => only if steps is not defined
- * @prop direction?: "column" | "row"
- * @prop activeStep?: number
- * @prop iconActive?: string | JSX.Element
- * @prop iconActiveSize?: number
- * @prop iconBaseUrl?: string
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
+ * @param {Object} props - Stepper 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 {Array<LibStep>} [props.steps] - Array of step objects to render (used if children is not defined).
+ * @param {ReactNode} [props.children] - Custom step elements (used if steps is not defined).
+ * @param {"column" | "row"} [props.direction="row"] - Direction of the stepper layout.
+ * @param {number} [props.activeStep=0] - Index of the currently active step (1-based).
+ * @param {string | JSX.Element} [props.iconActive] - Icon to display for active/done steps.
+ * @param {number} [props.iconActiveSize] - Size of the active icon.
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for the stepper.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Stepper component.
  *
- * @type LibStep
- * @extends LibButtonLinkBlank
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop text: string
- * @prop onClick?: void => only if to or href are not defined
- * @prop disabled?: boolean => only if onClick is defined
- * @prop to?: string => only if onClick and href are not defined
- * @prop href?: string => only if onClick and to are not defined
- * @prop blank?: boolean => only if to or href are defined
+ * @see https://documentation-components-react.vercel.app/components/stepper
+ * @example
+ * <Stepper
+ *   steps={[
+ *     { text: "Step 1" },
+ *     { text: "Step 2" },
+ *     { text: "Step 3" }
+ *   ]}
+ *   activeStep={2}
+ *   direction="row"
+ * />
  */
-export const Stepper = forwardRef<HTMLDivElement, ILibStepper>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            steps,
-            className,
-            activeStep = 0,
-            direction = "row",
-            iconActive,
-            iconActiveSize,
-            iconBaseUrl,
-            accentColor = "primary",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledStepper
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $direction={direction}
-                $accentColor={accentColor}
-                {...rest}
-            >
-                {steps
-                    ? steps.map((step, i) => (
-                          <Step
-                              data-testid={
-                                  step["data-testid"] ||
-                                  (testid && `${testid}.Step-${i}`)
-                              }
-                              className={
-                                  step.className || (className && "Step")
-                              }
-                              id={step.id}
-                              ref={step.ref}
-                              number={i + 1}
-                              isActive={activeStep >= i + 1}
-                              isDone={activeStep >= i}
-                              iconActive={iconActive}
-                              iconActiveSize={iconActiveSize}
-                              direction={direction}
-                              accentColor={accentColor}
-                              iconBaseUrl={iconBaseUrl}
-                              key={uuid()}
-                              {...step}
-                          >
-                              {step.text}
-                          </Step>
-                      ))
-                    : children}
-            </StyledStepper>
-        )
-    }
-)
+export const Stepper: FC<ILibStepper> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    steps,
+    className,
+    activeStep = 0,
+    direction = "row",
+    iconActive,
+    iconActiveSize,
+    iconBaseUrl,
+    accentColor = "primary",
+    ...rest
+}) => {
+    return (
+        <StyledStepper
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            $direction={direction}
+            $accentColor={accentColor}
+            {...rest}
+        >
+            {steps
+                ? steps.map((step, i) => (
+                      <Step
+                          data-testid={
+                              step["data-testid"] ||
+                              (testid && `${testid}.Step-${i}`)
+                          }
+                          className={step.className || (className && "Step")}
+                          id={step.id}
+                          ref={step.ref}
+                          number={i + 1}
+                          isActive={activeStep >= i + 1}
+                          isDone={activeStep >= i}
+                          iconActive={iconActive}
+                          iconActiveSize={iconActiveSize}
+                          direction={direction}
+                          accentColor={accentColor}
+                          iconBaseUrl={iconBaseUrl}
+                          key={uuid()}
+                          {...step}
+                      >
+                          {step.text}
+                      </Step>
+                  ))
+                : children}
+        </StyledStepper>
+    )
+}

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

@@ -1,4 +1,2 @@
-/*=============================================== Stepper exports ===============================================*/
-
 export * from "./Stepper"
 export * from "./Step"

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Stepper types ===============================================*/
-
 import type {
     LibColorsHover,
     LibComponentBase,
@@ -10,8 +8,6 @@ import type {
     LibButtonLinkBlank,
 } from "../../types"
 
-/*====================== Stepper ======================*/
-
 interface ILibStepperBase extends LibComponentBase<HTMLDivElement> {
     direction?: LibStepperDirection
     activeStep?: number
@@ -33,8 +29,6 @@ interface StepperWithChildren extends ILibStepperBase {
 
 export type ILibStepper = StepperWithSteps | StepperWithChildren
 
-/*====================== Step ======================*/
-
 export type ILibStep = LibComponentBase<HTMLSpanElement> &
     LibButtonLinkBlank & {
         direction?: LibStepperDirection

package/dist/lib/components/Sticky/Sticky.tsx

@@ -1,30 +1,44 @@
-/*=============================================== Sticky component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledSticky } from "./styles"
 import type { ILibSticky } from "./types"
 
 /**
- * @description Returns a Sticky component
- * @link https://documentation-components-react.vercel.app/components/sticky
+ * Sticky component for rendering content that remains fixed at the top of the viewport with customizable offset.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop top?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
+ * @param {Object} props - Sticky 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 {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.top="s"] - Top offset for the sticky element.
+ * @param {ReactNode} [props.children] - Content to render inside the sticky container.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Sticky component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/sticky
+ * @example
+ * <Sticky top="m">
+ *   <div>Sticky content</div>
+ * </Sticky>
  */
-export const Sticky = forwardRef<HTMLDivElement, ILibSticky>(
-    ({ "data-testid": testid, as, children, top = "s", ...rest }, ref) => {
-        return (
-            <StyledSticky
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $top={top}
-                {...rest}
-            >
-                {children}
-            </StyledSticky>
-        )
-    }
-)
+export const Sticky: FC<ILibSticky> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    top = "s",
+    ...rest
+}) => {
+    return (
+        <StyledSticky
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $top={top}
+            {...rest}
+        >
+            {children}
+        </StyledSticky>
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Sticky types ===============================================*/
-
 import type { LibComponentBase, LibSpacers } from "../../types"
 
 export interface ILibSticky extends LibComponentBase<HTMLDivElement> {

package/dist/lib/components/Table/TBody.tsx

@@ -1,17 +1,27 @@
-/*=============================================== TBody component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import type { ILibTBody } from "./types"
 
 /**
- * @description Returns a TBody component
- * @link https://documentation-components-react.vercel.app/components/table
+ * TBody component for rendering the `<tbody>` section of a table.
+ *
+ * @component
  * @extends HTMLTableSectionElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableSectionElement>
+ * @param {Object} props - TBody props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLTableSectionElement>} [props.ref] - Ref forwarded to the tbody element.
+ * @param {any} [props.rest] - Additional props passed to the tbody element.
+ * @returns {JSX.Element} The rendered TBody component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/table
+ * @example
+ * <TBody>
+ *   <tr><td>Row content</td></tr>
+ * </TBody>
  */
-export const TBody = forwardRef<HTMLTableSectionElement, ILibTBody>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <tbody data-testid={testid} ref={ref} {...rest} />
-    }
-)
+export const TBody: FC<ILibTBody> = ({
+    "data-testid": testid,
+    ref,
+    ...rest
+}) => {
+    return <tbody data-testid={testid} ref={ref} {...rest} />
+}

package/dist/lib/components/Table/THead.tsx

@@ -1,17 +1,27 @@
-/*=============================================== THead component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import type { ILibTHead } from "./types"
 
 /**
- * @description Returns a THead component
- * @link https://documentation-components-react.vercel.app/components/table
+ * THead component for rendering the `<thead>` section of a table.
+ *
+ * @component
  * @extends HTMLTableSectionElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTableSectionElement>
+ * @param {Object} props - THead props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {Ref<HTMLTableSectionElement>} [props.ref] - Ref forwarded to the thead element.
+ * @param {any} [props.rest] - Additional props passed to the thead element.
+ * @returns {JSX.Element} The rendered THead component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/table
+ * @example
+ * <THead>
+ *   <tr><th>Header</th></tr>
+ * </THead>
  */
-export const THead = forwardRef<HTMLTableSectionElement, ILibTHead>(
-    ({ "data-testid": testid, ...rest }, ref) => {
-        return <thead data-testid={testid} ref={ref} {...rest} />
-    }
-)
+export const THead: FC<ILibTHead> = ({
+    "data-testid": testid,
+    ref,
+    ...rest
+}) => {
+    return <thead data-testid={testid} ref={ref} {...rest} />
+}