@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Dropdown/DropdownItem.tsx

@@ -1,97 +1,97 @@
-/*=============================================== DropdownItem component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { Link } from "react-router-dom"
 import { LibIcon } from "../LibIcon"
 import { StyledDropdownItem, IconContainer, TextContent } from "./styles"
 import type { ILibDropdownItem } from "./types"
 
 /**
- * @description Returns a DropdownItem component
- * @link https://documentation-components-react.vercel.app/components/dropdown
- * @extends HTMLButtonElement & HTMLAnchorElement & LibButtonLinkBlankRequired
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLButtonElement & HTMLAnchorElement>
- * @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
- * @prop accentColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop icon?: string | JSX.Element
- * @prop iconSize?: number => only if icon is defined
- * @prop iconBaseUrl?: string => only if icon is defined
+ * DropdownItem component for rendering an item in a Dropdown, supporting links, buttons, icons, and custom styling.
+ *
+ * @component
+ * @param {Object} props - DropdownItem props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {Ref<HTMLButtonElement & HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {() => void} [props.onClick] - Click handler (only if `to` or `href` are not defined).
+ * @param {boolean} [props.disabled] - Disables the item (only if `onClick` is defined).
+ * @param {string} [props.to] - React Router link target (only if `onClick` and `href` are not defined).
+ * @param {string} [props.href] - Anchor link target (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 {"primary" | "secondary" | "success" | "danger" | "warning" | "white" | "gray" | "font" | "background"} [props.accentColor="primary"] - Accent color for the item.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xxs"] - Gap between icon and content.
+ * @param {string|JSX.Element} [props.icon] - Icon to display in the item.
+ * @param {number} [props.iconSize=16] - Size of the icon (only if icon is defined).
+ * @param {string} [props.iconBaseUrl] - Base URL for the icon (only if icon is defined).
+ * @param {ReactNode} [props.children] - Content of the dropdown item.
+ * @param {string} [props.className] - Additional class names.
+ * @returns {JSX.Element} The rendered DropdownItem component.
+ *
+ * @example
+ * <DropdownItem to="/profile" icon="user" iconSize={18}>
+ *   Profile
+ * </DropdownItem>
  */
-export const DropdownItem = forwardRef<
-    HTMLButtonElement & HTMLAnchorElement,
-    ILibDropdownItem
->(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            onClick,
-            to,
-            href,
-            blank,
-            accentColor = "primary",
-            children,
-            disabled,
-            icon,
-            iconSize = 16,
-            iconBaseUrl,
-            gap = "xxs",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledDropdownItem
-                data-testid={testid}
-                className={className}
-                ref={ref}
-                as={as ? as : to ? Link : href ? "a" : "button"}
-                onClick={onClick}
-                to={to}
-                href={href}
-                disabled={!to && !href ? disabled : undefined}
-                target={blank && "_blank"}
-                rel={blank && "noreferrer noopener"}
-                $accentColor={accentColor}
-                $gap={gap}
-                {...rest}
-            >
-                {icon ? (
-                    <>
-                        <IconContainer
-                            data-testid={testid && `${testid}.IconContainer`}
-                            className={className && "DropdownItemIconContainer"}
-                        >
-                            <LibIcon
-                                data-testid={
-                                    testid && `${testid}.IconContainer.Icon`
-                                }
-                                className={className && "DropdownItemIcon"}
-                                icon={icon}
-                                size={iconSize}
-                                baseUrl={iconBaseUrl}
-                            />
-                        </IconContainer>
+export const DropdownItem: FC<ILibDropdownItem> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    onClick,
+    to,
+    href,
+    blank,
+    accentColor = "primary",
+    children,
+    disabled,
+    icon,
+    iconSize = 16,
+    iconBaseUrl,
+    gap = "xxs",
+    ...rest
+}) => {
+    return (
+        <StyledDropdownItem
+            data-testid={testid}
+            className={className}
+            ref={ref}
+            as={as ? as : to ? Link : href ? "a" : "button"}
+            onClick={onClick}
+            to={to}
+            href={href}
+            disabled={!to && !href ? disabled : undefined}
+            target={blank && "_blank"}
+            rel={blank && "noreferrer noopener"}
+            $accentColor={accentColor}
+            $gap={gap}
+            {...rest}
+        >
+            {icon ? (
+                <>
+                    <IconContainer
+                        data-testid={testid && `${testid}.IconContainer`}
+                        className={className && "DropdownItemIconContainer"}
+                    >
+                        <LibIcon
+                            data-testid={
+                                testid && `${testid}.IconContainer.Icon`
+                            }
+                            className={className && "DropdownItemIcon"}
+                            icon={icon}
+                            size={iconSize}
+                            baseUrl={iconBaseUrl}
+                        />
+                    </IconContainer>
 
-                        <TextContent
-                            data-testid={testid && `${testid}.TextContent`}
-                            className={className && "DropdownItemTextContent"}
-                        >
-                            {children}
-                        </TextContent>
-                    </>
-                ) : (
-                    children
-                )}
-            </StyledDropdownItem>
-        )
-    }
-)
+                    <TextContent
+                        data-testid={testid && `${testid}.TextContent`}
+                        className={className && "DropdownItemTextContent"}
+                    >
+                        {children}
+                    </TextContent>
+                </>
+            ) : (
+                children
+            )}
+        </StyledDropdownItem>
+    )
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== Dropdown exports ===============================================*/
-
 export * from "./Dropdown"
 export * from "./DropdownContainer"
 export * from "./DropdownItem"

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

@@ -1,5 +1,3 @@
-/*=============================================== Dropdown styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import {
@@ -37,6 +35,7 @@ const StyledDropdown = styled.div<{
     max-height: 0;
     transition: ${TRANSITIONS.SHORT};
     background-color: ${({ theme }) => theme.BACKGROUND};
+    ${Mixins.HideScrollbar};
     ${Mixins.Flexbox({
         $flexDirection: "column",
         $alignItems: "stretch",

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

@@ -1,5 +1,3 @@
-/*=============================================== Dropdown types ===============================================*/
-
 import type { ButtonHTMLAttributes } from "react"
 import type {
     LibDropdownItem,
@@ -15,8 +13,6 @@ import type {
 } from "../../types"
 import type { ILibFlexbox } from "../Flexbox/types"
 
-/*====================== Dropdown ======================*/
-
 interface ILibDropdownBase extends LibComponentBase<HTMLDivElement> {
     isOpen: boolean
     setIsOpen: DispatchState<boolean>
@@ -39,14 +35,10 @@ interface DropdownWithChildren extends ILibDropdownBase {
 
 export type ILibDropdown = DropdownWithItems | DropdownWithChildren
 
-/*====================== DropdownContainer ======================*/
-
 export interface ILibDropdownContainer extends ILibFlexbox {
     isOpen: boolean
 }
 
-/*====================== DropdownItem ======================*/
-
 type ILibDropdownItemBase = LibComponentBase<
     HTMLButtonElement & HTMLAnchorElement
 > &

package/dist/lib/components/Fade/Fade.tsx

@@ -1,42 +1,54 @@
-/*=============================================== Fade component ===============================================*/
-
-import { forwardRef, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState, type FC } from "react"
 import classNames from "classnames"
 import { useMergeRefs } from "../../"
 import { StyledFade } from "./styles"
 import type { ILibFade } from "./types"
 
 /**
- * @description Returns a Fade component
- * @link https://documentation-components-react.vercel.app/components/fade
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
+ * Fade component for animating its children with a fade-in effect when visible in the viewport.
+ *
+ * @component
+ * @param {Object} props - Fade 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 {ReactNode} [props.children] - Content to animate with fade effect.
+ * @returns {JSX.Element} The rendered Fade component.
+ *
+ * @example
+ * <Fade>
+ *   <p>This content will fade in when visible.</p>
+ * </Fade>
  */
-export const Fade = forwardRef<HTMLDivElement, ILibFade>(
-    ({ "data-testid": testid, as, children, className, ...rest }, ref) => {
-        const [isVisible, setVisible] = useState(true)
-        const fadeRef = useRef<Element>(null)
+export const Fade: FC<ILibFade> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    ...rest
+}) => {
+    const [isVisible, setVisible] = useState(true)
+    const fadeRef = useRef<Element>(null)
 
-        useEffect(() => {
-            const observer = new IntersectionObserver(entries => {
-                entries.forEach(entry => setVisible(entry.isIntersecting))
-            })
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => setVisible(entry.isIntersecting))
+        })
 
-            observer.observe((fadeRef as any).current)
-        }, [])
+        observer.observe((fadeRef as any).current)
+    }, [])
 
-        return (
-            <StyledFade
-                data-testid={testid}
-                ref={useMergeRefs([ref, fadeRef])}
-                as={as}
-                className={classNames(className, { Visible: isVisible })}
-                {...rest}
-            >
-                {children}
-            </StyledFade>
-        )
-    }
-)
+    return (
+        <StyledFade
+            data-testid={testid}
+            ref={useMergeRefs([ref, fadeRef])}
+            as={as}
+            className={classNames(className, { Visible: isVisible })}
+            {...rest}
+        >
+            {children}
+        </StyledFade>
+    )
+}

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

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

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

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

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

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

package/dist/lib/components/Fallback/Fallback.tsx

@@ -1,21 +1,24 @@
-/*=============================================== Fallback ===============================================*/
-
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { setDefaultTheme, Mixins } from "../../"
 import type { ILibRadius } from "../../types"
 
 /**
- * @description Returns a Fallback component. Use it for lazy loading in Image or Video components
+ * Fallback styled component for displaying a placeholder during lazy loading in Image or Video components.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop $width: string | number
- * @prop $height: string | number
- * @prop $borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop $aspectRatio?: string
+ * @param {Object} props - Fallback props.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string|number} props.$width - Width of the fallback.
+ * @param {string|number} props.$height - Height of the fallback.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.$borderRadius] - Border radius for the fallback.
+ * @param {string} [props.$aspectRatio] - Aspect ratio for the fallback.
+ *
+ * @example
+ * <Fallback $width={200} $height={120} $borderRadius="m" $aspectRatio="16/9" />
  */
-
 const Fallback = styled.div<{
     $width: string | number
     $height: string | number

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

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

package/dist/lib/components/Fieldset/Fieldset.tsx

@@ -1,107 +1,111 @@
-/*=============================================== Fieldset component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { InputContainer } from "../InputComponents"
 import { StyledFieldset, Legend } from "./styles"
 import type { ILibFieldset } from "./types"
 
 /**
- * @description Returns a Fieldset component
- * @link https://documentation-components-react.vercel.app/components/fieldset
+ * Fieldset component for grouping related form elements with a legend and flexible layout.
+ *
+ * @component
  * @extends HTMLFieldSetElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLFieldSetElement>
- * @prop legend: string
- * @prop flexDirection?: CssFlexDirection
- * @prop flexWrap?: CssFlexWrap
- * @prop justifyContent?: CssJustifyContent
- * @prop alignItems?: CssAlignItems
- * @prop justifyItems?: CssJustifyItems
- * @prop alignContent?: CssAlignContent
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop columnGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop rowGap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @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 border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library }
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop containerStyle?: CSSProperties
- * @prop validation?: { status: boolean | undefined; message?: string; iconNotPassed?: string | JSX.Element; iconNotPassedSize?: number; iconPassed?: string | JSX.Element; iconPassedSize?: number; iconBaseUrl?: string }
+ * @param {Object} props - Fieldset props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLFieldSetElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {string} props.legend - Legend text for the fieldset.
+ * @param {CssFlexDirection} [props.flexDirection="row"] - Flex direction.
+ * @param {CssFlexWrap} [props.flexWrap="wrap"] - Flex wrap.
+ * @param {CssJustifyContent} [props.justifyContent="flex-start"] - Justify content.
+ * @param {CssAlignItems} [props.alignItems="flex-start"] - Align items.
+ * @param {CssJustifyItems} [props.justifyItems] - Justify items.
+ * @param {CssAlignContent} [props.alignContent] - Align content.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="m"] - Gap between children.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.columnGap] - Column gap.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.rowGap] - Row gap.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="s"] - Padding for the fieldset.
+ * @param {Object} [props.border={ color: "gray-200" }] - Border style, width, and color.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="m"] - Border radius for the fieldset.
+ * @param {CSSProperties} [props.containerStyle] - Style for the outer container.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {ReactNode} [props.children] - Fieldset content.
+ * @returns {JSX.Element} The rendered Fieldset component.
+ *
+ * @example
+ * <Fieldset legend="Personal info" gap="l" padding="m">
+ *   <Input label="First name" />
+ *   <Input label="Last name" />
+ * </Fieldset>
  */
-export const Fieldset = forwardRef<HTMLFieldSetElement, ILibFieldset>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            className,
-            legend,
-            flexDirection = "row",
-            flexWrap = "wrap",
-            justifyContent = "flex-start",
-            justifyItems,
-            alignContent,
-            alignItems = "flex-start",
-            gap = "m",
-            columnGap,
-            rowGap,
-            padding = "s",
-            border = { color: "gray-200" },
-            borderRadius = "m",
-            containerStyle,
-            validation,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <InputContainer
-                validation={validation}
-                id={undefined}
-                label={undefined}
-                labelComment={undefined}
-                helper={undefined}
-                helperBottom={undefined}
-                counter={undefined}
-                maxLength={undefined}
-                value={undefined}
-                className={className}
-                hasListOpen={undefined}
-                iconBaseUrl={undefined}
-                style={containerStyle}
+export const Fieldset: FC<ILibFieldset> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    className,
+    legend,
+    flexDirection = "row",
+    flexWrap = "wrap",
+    justifyContent = "flex-start",
+    justifyItems,
+    alignContent,
+    alignItems = "flex-start",
+    gap = "m",
+    columnGap,
+    rowGap,
+    padding = "s",
+    border = { color: "gray-200" },
+    borderRadius = "m",
+    containerStyle,
+    validation,
+    ...rest
+}) => {
+    return (
+        <InputContainer
+            validation={validation}
+            id={undefined}
+            label={undefined}
+            labelComment={undefined}
+            helper={undefined}
+            helperBottom={undefined}
+            counter={undefined}
+            maxLength={undefined}
+            value={undefined}
+            className={className}
+            hasListOpen={undefined}
+            iconBaseUrl={undefined}
+            style={containerStyle}
+        >
+            <StyledFieldset
+                data-testid={
+                    validation && testid ? `${testid}.Fieldset` : testid
+                }
+                ref={ref}
+                as={as}
+                className={validation && className ? "Fieldset" : className}
+                $alignContent={alignContent}
+                $alignItems={alignItems}
+                $columnGap={columnGap}
+                $flexDirection={flexDirection}
+                $flexWrap={flexWrap}
+                $gap={gap}
+                $justifyContent={justifyContent}
+                $justifyItems={justifyItems}
+                $padding={padding}
+                $rowGap={rowGap}
+                $border={border}
+                $borderRadius={borderRadius}
+                $validationStatus={validation?.status}
+                {...rest}
             >
-                <StyledFieldset
-                    data-testid={
-                        validation && testid ? `${testid}.Fieldset` : testid
-                    }
-                    ref={ref}
-                    as={as}
-                    className={validation && className ? "Fieldset" : className}
-                    $alignContent={alignContent}
-                    $alignItems={alignItems}
-                    $columnGap={columnGap}
-                    $flexDirection={flexDirection}
-                    $flexWrap={flexWrap}
-                    $gap={gap}
-                    $justifyContent={justifyContent}
-                    $justifyItems={justifyItems}
-                    $padding={padding}
-                    $rowGap={rowGap}
-                    $border={border}
-                    $borderRadius={borderRadius}
-                    $validationStatus={validation?.status}
-                    {...rest}
+                <Legend
+                    data-testid={testid && `${testid}.Legend`}
+                    className={className && "Legend"}
                 >
-                    <Legend
-                        data-testid={testid && `${testid}.Legend`}
-                        className={className && "Legend"}
-                    >
-                        {legend}
-                    </Legend>
+                    {legend}
+                </Legend>
 
-                    {children}
-                </StyledFieldset>
-            </InputContainer>
-        )
-    }
-)
+                {children}
+            </StyledFieldset>
+        </InputContainer>
+    )
+}

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

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

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Fieldset types ===============================================*/
-
 import type {
     CssAlignContent,
     CssAlignItems,