@julseb-lib/react 0.0.85 → 0.0.87

package/dist/lib/components/Select/SelectButton.tsx

@@ -1,58 +1,52 @@
-/*=============================================== Select Button component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { StyledSelectButton } from "./styles"
 import type { ILibSelectButton } from "./subtypes"
 
-export const SelectButton = forwardRef<HTMLButtonElement, ILibSelectButton>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            options,
-            isOpen,
-            id,
-            tabIndex,
-            disabled,
-            icons,
-            inputBackground,
-            inputVariant,
-            validation,
-            value,
-            hasWrapper,
-            hasContainer,
-            onClick,
-        },
-        ref
-    ) => {
-        return (
-            <StyledSelectButton
-                data-testid={
-                    (hasContainer || hasWrapper || icons?.left) && testid
-                        ? `${testid}.SelectContainer.SelectButton`
-                        : testid
-                }
-                ref={ref}
-                className={classNames(
-                    (hasContainer || hasWrapper || icons?.left) && className
-                        ? "SelectButton"
-                        : className,
-                    { WithListOpen: isOpen }
-                )}
-                onClick={onClick}
-                id={id}
-                tabIndex={tabIndex}
-                disabled={disabled}
-                aria-disabled={disabled && "true"}
-                $disabled={disabled}
-                $inputBackground={inputBackground}
-                $inputVariant={inputVariant}
-                $validationStatus={validation?.status}
-                $hasOptions={!!options}
-            >
-                {value}
-            </StyledSelectButton>
-        )
-    }
-)
+export const SelectButton: FC<ILibSelectButton> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    options,
+    isOpen,
+    id,
+    tabIndex,
+    disabled,
+    icons,
+    inputBackground,
+    inputVariant,
+    validation,
+    value,
+    hasWrapper,
+    hasContainer,
+    onClick,
+}) => {
+    return (
+        <StyledSelectButton
+            data-testid={
+                (hasContainer || hasWrapper || icons?.left) && testid
+                    ? `${testid}.SelectContainer.SelectButton`
+                    : testid
+            }
+            ref={ref as any}
+            className={classNames(
+                (hasContainer || hasWrapper || icons?.left) && className
+                    ? "SelectButton"
+                    : className,
+                { WithListOpen: isOpen }
+            )}
+            onClick={onClick}
+            id={id}
+            tabIndex={tabIndex}
+            disabled={disabled}
+            aria-disabled={disabled && "true"}
+            $disabled={disabled}
+            $inputBackground={inputBackground}
+            $inputVariant={inputVariant}
+            $validationStatus={validation?.status}
+            $hasOptions={!!options}
+        >
+            {value}
+        </StyledSelectButton>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Select styles ===============================================*/
-
 import styled from "styled-components"
 import { FONT_WEIGHTS, setDefaultTheme } from "../../"
 import { InputBaseMixin } from "../ComponentsMixins"

package/dist/lib/components/Select/subtypes.ts

@@ -1,5 +1,3 @@
-/*=============================================== Select sub components types ===============================================*/
-
 import type { MouseEventHandler } from "react"
 import type { ILibSelect } from "./types"
 import type { ILibInputBaseMixin } from "../ComponentsMixins"
@@ -20,6 +18,7 @@ export interface ILibSelectButton
         | "inputBackground"
         | "validation"
         | "options"
+        | "ref"
     > {
     onClick?: MouseEventHandler<HTMLButtonElement>
     isOpen: boolean

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

@@ -1,5 +1,3 @@
-/*=============================================== Select types ===============================================*/
-
 import type {
     LibComponentBase,
     LibIcon,

package/dist/lib/components/Skeleton/Skeleton.tsx

@@ -1,60 +1,62 @@
-/*=============================================== Skeleton component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledSkeleton } from "./styles"
 import type { ILibSkeleton } from "./types"
 
 /**
- * @description Returns a Skeleton component
- * @link https://documentation-components-react.vercel.app/components/skeleton
+ * Skeleton component for displaying a loading placeholder with customizable size, color, border radius, and animation.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop width?: string | number
- * @prop maxWidth?: string | number
- * @prop height?: string | number
- * @prop backgroundColor?: Any color from the library
- * @prop aspectRatio?: string
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop flex?: string | number
- * @prop flexGrow?: string | number
- * @prop animation?: "pulse" | "shine"
+ * @param {Object} props - Skeleton 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|number} [props.width=100] - Width of the skeleton.
+ * @param {string|number} [props.maxWidth="100%"] - Maximum width of the skeleton.
+ * @param {string|number} [props.height=100] - Height of the skeleton.
+ * @param {string} [props.backgroundColor="gray-100"] - Background color of the skeleton.
+ * @param {string} [props.aspectRatio] - Aspect ratio of the skeleton.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }} [props.borderRadius] - Border radius of the skeleton.
+ * @param {string|number} [props.flex] - Flex property for the skeleton.
+ * @param {string|number} [props.flexGrow] - Flex grow property for the skeleton.
+ * @param {"pulse" | "shine"} [props.animation] - Animation type for the skeleton.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Skeleton component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/skeleton
+ * @example
+ * <Skeleton width={200} height={24} animation="pulse" />
  */
-export const Skeleton = forwardRef<HTMLDivElement, ILibSkeleton>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            width = 100,
-            maxWidth = "100%",
-            height = 100,
-            backgroundColor = "gray-100",
-            aspectRatio,
-            borderRadius,
-            flex,
-            flexGrow,
-            animation,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledSkeleton
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $width={width}
-                $maxWidth={maxWidth}
-                $height={height}
-                $backgroundColor={backgroundColor}
-                $aspectRatio={aspectRatio}
-                $borderRadius={borderRadius}
-                $flex={flex}
-                $flexGrow={flexGrow}
-                $animation={animation}
-                {...rest}
-            />
-        )
-    }
-)
+export const Skeleton: FC<ILibSkeleton> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    width = 100,
+    maxWidth = "100%",
+    height = 100,
+    backgroundColor = "gray-100",
+    aspectRatio,
+    borderRadius,
+    flex,
+    flexGrow,
+    animation,
+    ...rest
+}) => {
+    return (
+        <StyledSkeleton
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $width={width}
+            $maxWidth={maxWidth}
+            $height={height}
+            $backgroundColor={backgroundColor}
+            $aspectRatio={aspectRatio}
+            $borderRadius={borderRadius}
+            $flex={flex}
+            $flexGrow={flexGrow}
+            $animation={animation}
+            {...rest}
+        />
+    )
+}

package/dist/lib/components/Skeleton/SkeletonCard.tsx

@@ -1,78 +1,81 @@
-/*=============================================== SkeletonCard component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { SkeletonShine } from "./SkeletonShine"
 import { StyledSkeletonCard } from "./styles"
 import type { ILibSkeletonCard } from "./types"
 
 /**
- * @description Returns a SkeletonCard component
- * @link https://documentation-components-react.vercel.app/components/skeleton
+ * SkeletonCard component for displaying a card-shaped skeleton placeholder with customizable size, color, border, padding, and optional shine animation.
+ *
+ * @component
  * @extends ILibFlexbox
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop width?: string | number
- * @prop maxWidth?: string | number
- * @prop height?: string | number
- * @prop backgroundColor?: Any color from the library
- * @prop aspectRatio?: string
- * @prop borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop flex?: string | number
- * @prop flexGrow?: string | number
- * @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 isShiny?: boolean
+ * @param {Object} props - SkeletonCard 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|number} [props.width] - Width of the skeleton card.
+ * @param {string|number} [props.maxWidth="100%"] - Maximum width of the skeleton card.
+ * @param {string|number} [props.height] - Height of the skeleton card.
+ * @param {string} [props.backgroundColor] - Background color of the skeleton card.
+ * @param {string} [props.aspectRatio] - Aspect ratio of the skeleton card.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }} [props.borderRadius] - Border radius of the skeleton card.
+ * @param {string|number} [props.flex] - Flex property for the skeleton card.
+ * @param {string|number} [props.flexGrow] - Flex grow property for the skeleton card.
+ * @param {{ style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: string }} [props.border] - Border style for the skeleton card.
+ * @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 skeleton card.
+ * @param {boolean} [props.isShiny] - Whether to display a shine animation.
+ * @param {ReactNode} [props.children] - Content to display inside the skeleton card.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered SkeletonCard component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/skeleton
+ * @example
+ * <SkeletonCard width={300} height={180} isShiny />
  */
-export const SkeletonCard = forwardRef<HTMLDivElement, ILibSkeletonCard>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            width,
-            maxWidth = "100%",
-            height,
-            backgroundColor,
-            aspectRatio,
-            border,
-            borderRadius,
-            flex,
-            flexGrow,
-            padding,
-            isShiny,
-            children,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledSkeletonCard
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={className}
-                $width={width}
-                $maxWidth={maxWidth}
-                $height={height}
-                $backgroundColor={backgroundColor}
-                $aspectRatio={aspectRatio}
-                $border={border}
-                $borderRadius={borderRadius}
-                $flex={flex}
-                $flexGrow={flexGrow}
-                $padding={padding}
-                {...rest}
-            >
-                {children}
+export const SkeletonCard: FC<ILibSkeletonCard> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    width,
+    maxWidth = "100%",
+    height,
+    backgroundColor,
+    aspectRatio,
+    border,
+    borderRadius,
+    flex,
+    flexGrow,
+    padding,
+    isShiny,
+    children,
+    ...rest
+}) => {
+    return (
+        <StyledSkeletonCard
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={className}
+            $width={width}
+            $maxWidth={maxWidth}
+            $height={height}
+            $backgroundColor={backgroundColor}
+            $aspectRatio={aspectRatio}
+            $border={border}
+            $borderRadius={borderRadius}
+            $flex={flex}
+            $flexGrow={flexGrow}
+            $padding={padding}
+            {...rest}
+        >
+            {children}
 
-                {isShiny && (
-                    <SkeletonShine
-                        data-testid={testid && `${testid}.Shine`}
-                        className={className && "Shine"}
-                    />
-                )}
-            </StyledSkeletonCard>
-        )
-    }
-)
+            {isShiny && (
+                <SkeletonShine
+                    data-testid={testid && `${testid}.Shine`}
+                    className={className && "Shine"}
+                />
+            )}
+        </StyledSkeletonCard>
+    )
+}

package/dist/lib/components/Skeleton/SkeletonShine.tsx

@@ -1,26 +1,30 @@
-/*=============================================== SkeletonShine component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledSkeletonShine } from "./styles"
 import type { ILibSkeletonShine } from "./types"
 
 /**
- * @description Returns a Shine component. Add it inside a component with `position: relative`
- * @link https://documentation-components-react.vercel.app/components/skeleton
+ * SkeletonShine component for displaying a shine animation, typically used inside a skeleton placeholder.
+ *
+ * @component
  * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
+ * @param {Object} props - SkeletonShine 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 span element.
+ * @param {any} [props.rest] - Additional props passed to the span element.
+ * @returns {JSX.Element} The rendered SkeletonShine component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/skeleton
+ * @example
+ * <SkeletonShine />
  */
-export const SkeletonShine = forwardRef<HTMLSpanElement, ILibSkeletonShine>(
-    ({ "data-testid": testid, as, ...rest }, ref) => {
-        return (
-            <StyledSkeletonShine
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                {...rest}
-            />
-        )
-    }
-)
+export const SkeletonShine: FC<ILibSkeletonShine> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    ...rest
+}) => {
+    return (
+        <StyledSkeletonShine data-testid={testid} ref={ref} as={as} {...rest} />
+    )
+}

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

@@ -1,5 +1,3 @@
-/*=============================================== Skeleton exports ===============================================*/
-
 export * from "./Skeleton"
 export * from "./SkeletonCard"
 export * from "./SkeletonShine"

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

@@ -1,13 +1,9 @@
-/*=============================================== Skeleton styles ===============================================*/
-
 import styled, { css, keyframes } from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
-import { setDefaultTheme, Flexbox, Mixins } from "../../"
+import { setDefaultTheme, Flexbox, Mixins } from "../.."
 import type { ILibBorder, ILibPadding, LibSkeletonAnimation } from "../../types"
 import type { ILibSkeletonCommonStyles } from "./subtypes"
 
-/*====================== Keyframes ======================*/
-
 const ShineLoad = keyframes`
     from {
         left: -150px;
@@ -28,8 +24,6 @@ const Pulse = keyframes`
     }
 `
 
-/*====================== Mixins ======================*/
-
 const Common = ({
     $width = "100%",
     $maxWidth,
@@ -65,8 +59,6 @@ const Shine = css`
     opacity: 0.7;
 `
 
-/*====================== Components ======================*/
-
 const StyledSkeletonCard = styled(Flexbox)<
     ILibSkeletonCommonStyles & { $border?: ILibBorder; $padding?: ILibPadding }
 >`

package/dist/lib/components/Skeleton/subtypes.ts

@@ -1,5 +1,3 @@
-/*=============================================== Skeleton sub components types ===============================================*/
-
 import type { LibAllColors, ILibRadius } from "../../types"
 
 // ! DO NOT EXPORT THOSE TYPES, ONLY USE THEM IN SKELETON COMPONENTS

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

@@ -1,5 +1,3 @@
-/*=============================================== Skeleton types ===============================================*/
-
 import type {
     LibAllColors,
     ILibBorder,