@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/InputSlider/InputSlider.tsx

@@ -1,6 +1,4 @@
-/*=============================================== InputSlider component ===============================================*/
-
-import { forwardRef, type ForwardedRef, useState, useCallback } from "react"
+import { useState, useCallback, type FC } from "react"
 import classNames from "classnames"
 import { Flexbox, Text } from "../../"
 import type { ILibText } from "../../types/components-props"
@@ -10,175 +8,186 @@ import { SliderContainer, Tooltip } from "./styles"
 import type { ILibInputSlider } from "./types"
 
 /**
- * @description Returns a InputSlider component
- * @link https://documentation-components-react.vercel.app/components/input-slider
+ * InputSlider component for rendering a slider input with optional min/max labels, value tooltip, and flexible styling.
+ *
+ * @component
  * @extends HTMLInputElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLInputElement>
- * @prop showMinMax?: boolean
- * @prop showValue?: "hover" | "always" | "never"
- * @prop min?: number
- * @prop max?: number
- * @prop value?: number
- * @prop label?: string
- * @prop labelComment?: string
- * @prop helper?: string
- * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- * @prop iconBaseUrl?: string
- * @prop inputBackground?: "light" | "dark"
- * @prop containerStyle?: CSSProperties
+ * @param {Object} props - InputSlider props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ *  * @param {Ref<HTMLInputElement>} [props.ref] - Ref forwarded to the input element.
+ * @param {boolean} [props.showMinMax] - Show min and max values beside the slider.
+ * @param {"hover" | "always" | "never"} [props.showValue] - When to show the slider value tooltip.
+ * @param {number} [props.min=0] - Minimum slider value.
+ * @param {number} [props.max=100] - Maximum slider value.
+ * @param {number} [props.value=50] - Current slider value.
+ * @param {string} [props.label] - Label for the slider.
+ * @param {string} [props.labelComment] - Additional comment for the label.
+ * @param {string} [props.helper] - Helper text above the slider.
+ * @param {string|Object} [props.helperBottom] - Helper text or element below the slider.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style.
+ *  * @param {CSSProperties} [props.containerStyle] - Style for the input container.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the slider.
+ * @returns {JSX.Element} The rendered InputSlider component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/input-slider
+ * @example
+ * <InputSlider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   showMinMax
+ *   showValue="hover"
+ * />
  */
-export const InputSlider = forwardRef<HTMLInputElement, ILibInputSlider>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            id,
-            value = 50,
-            min = 0,
-            max = 100,
-            showMinMax,
-            showValue = value ? "hover" : "never",
-            inputBackground,
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation
-        )
-        const hasWrapper: boolean = !!(showValue !== "never" || showMinMax)
-
-        const sliderProps: ILibInputSlider & {
-            ref: ForwardedRef<HTMLInputElement>
-            hasContainer: boolean
-            hasWrapper: boolean
-        } = {
-            "data-testid": testid,
-            className,
-            ref,
-            id,
-            min,
-            max,
-            validation,
-            hasContainer,
-            hasWrapper,
-            inputBackground,
-            value,
-            ...rest,
-        }
-        const textProps: Pick<ILibText, "color" | "tag"> = {
-            tag: "small",
-            color: "gray",
-        }
+export const InputSlider: FC<ILibInputSlider> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    id,
+    value = 50,
+    min = 0,
+    max = 100,
+    showMinMax,
+    showValue = value ? "hover" : "never",
+    inputBackground,
+    containerStyle,
+    ...rest
+}) => {
+    const hasContainer: boolean = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation
+    )
+    const hasWrapper: boolean = !!(showValue !== "never" || showMinMax)
 
-        const [isTooltipVisible, setIsTooltipVisible] = useState(
-            !!(showValue === "always")
-        )
+    const sliderProps: ILibInputSlider & {
+        hasContainer: boolean
+        hasWrapper: boolean
+    } = {
+        "data-testid": testid,
+        className,
+        ref,
+        id,
+        min,
+        max,
+        validation,
+        hasContainer,
+        hasWrapper,
+        inputBackground,
+        value,
+        ...rest,
+    }
+    const textProps: Pick<ILibText, "color" | "tag"> = {
+        tag: "small",
+        color: "gray",
+    }
 
-        const handleMouseEnter = useCallback(() => {
-            if (showValue === "hover") setIsTooltipVisible(true)
-        }, [showValue])
-        const handleMouseLeave = useCallback(() => {
-            if (showValue === "hover") setIsTooltipVisible(false)
-        }, [showValue])
+    const [isTooltipVisible, setIsTooltipVisible] = useState(
+        !!(showValue === "always")
+    )
 
-        return (
-            <InputContainer
-                data-testid={testid}
-                className={className}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                id={id}
-                validation={validation}
-                value={value}
-                counter={false}
-                maxLength={undefined}
-                iconBaseUrl={undefined}
-                style={containerStyle}
-                hasListOpen={undefined}
-            >
-                {showMinMax || showValue !== "never" ? (
-                    <Flexbox
-                        data-testid={
-                            hasContainer ? `${testid}.SliderWrapper` : testid
-                        }
-                        className={hasContainer ? "SliderWrapper" : className}
-                        alignItems="center"
-                        gap="xs"
-                    >
-                        {showMinMax && (
-                            <Text
-                                data-testid={
-                                    testid && `${testid}.SliderWrapper.Min`
-                                }
-                                className={className && "SliderMin"}
-                                {...textProps}
-                            >
-                                {min}
-                            </Text>
-                        )}
+    const handleMouseEnter = useCallback(() => {
+        if (showValue === "hover") setIsTooltipVisible(true)
+    }, [showValue])
+    const handleMouseLeave = useCallback(() => {
+        if (showValue === "hover") setIsTooltipVisible(false)
+    }, [showValue])
 
-                        {showValue ? (
-                            <SliderContainer
-                                data-testid={
-                                    testid &&
-                                    `${testid}.SliderWrapper.SliderContainer`
-                                }
-                                className={className && "SliderContainer"}
-                                onMouseEnter={handleMouseEnter}
-                                onMouseLeave={handleMouseLeave}
-                            >
-                                <Slider {...sliderProps} />
+    return (
+        <InputContainer
+            data-testid={testid}
+            className={className}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            id={id}
+            validation={validation}
+            value={value}
+            counter={false}
+            maxLength={undefined}
+            iconBaseUrl={undefined}
+            style={containerStyle}
+            hasListOpen={undefined}
+        >
+            {showMinMax || showValue !== "never" ? (
+                <Flexbox
+                    data-testid={
+                        hasContainer ? `${testid}.SliderWrapper` : testid
+                    }
+                    className={hasContainer ? "SliderWrapper" : className}
+                    alignItems="center"
+                    gap="xs"
+                >
+                    {showMinMax && (
+                        <Text
+                            data-testid={
+                                testid && `${testid}.SliderWrapper.Min`
+                            }
+                            className={className && "SliderMin"}
+                            {...textProps}
+                        >
+                            {min}
+                        </Text>
+                    )}
 
-                                <Tooltip
-                                    data-testid={
-                                        testid &&
-                                        `${testid}.SliderWrapper.SliderContainer.Tooltip`
-                                    }
-                                    className={classNames(
-                                        { SliderTooltip: className },
-                                        { Visible: isTooltipVisible }
-                                    )}
-                                    $value={value || 0}
-                                    $max={max}
-                                >
-                                    {value}
-                                </Tooltip>
-                            </SliderContainer>
-                        ) : (
+                    {showValue ? (
+                        <SliderContainer
+                            data-testid={
+                                testid &&
+                                `${testid}.SliderWrapper.SliderContainer`
+                            }
+                            className={className && "SliderContainer"}
+                            onMouseEnter={handleMouseEnter}
+                            onMouseLeave={handleMouseLeave}
+                        >
                             <Slider {...sliderProps} />
-                        )}
 
-                        {showMinMax && (
-                            <Text
+                            <Tooltip
                                 data-testid={
-                                    testid && `${testid}.SliderWrapper.Max`
+                                    testid &&
+                                    `${testid}.SliderWrapper.SliderContainer.Tooltip`
                                 }
-                                className={className && "SliderMax"}
-                                {...textProps}
+                                className={classNames(
+                                    { SliderTooltip: className },
+                                    { Visible: isTooltipVisible }
+                                )}
+                                $value={value || 0}
+                                $max={max}
                             >
-                                {max}
-                            </Text>
-                        )}
-                    </Flexbox>
-                ) : (
-                    <Slider {...sliderProps} />
-                )}
-            </InputContainer>
-        )
-    }
-)
+                                {value}
+                            </Tooltip>
+                        </SliderContainer>
+                    ) : (
+                        <Slider {...sliderProps} />
+                    )}
+
+                    {showMinMax && (
+                        <Text
+                            data-testid={
+                                testid && `${testid}.SliderWrapper.Max`
+                            }
+                            className={className && "SliderMax"}
+                            {...textProps}
+                        >
+                            {max}
+                        </Text>
+                    )}
+                </Flexbox>
+            ) : (
+                <Slider {...sliderProps} />
+            )}
+        </InputContainer>
+    )
+}

package/dist/lib/components/InputSlider/Slider.tsx

@@ -1,52 +1,43 @@
-/*=============================================== Slider component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import type { ILibInputSlider } from "./types"
 import { StyledInputSlider } from "./styles"
 
-export const Slider = forwardRef<
-    HTMLInputElement,
+export const Slider: FC<
     ILibInputSlider & { hasContainer: boolean; hasWrapper: boolean }
->(
-    (
-        {
-            "data-testid": testid,
-            className,
-            id,
-            min = 0,
-            max = 100,
-            validation,
-            hasContainer,
-            hasWrapper,
-            inputBackground,
-            value,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledInputSlider
-                data-testid={
-                    (hasContainer || hasWrapper) && testid
-                        ? `${testid}.Input`
-                        : testid
-                }
-                ref={ref}
-                className={
-                    (hasContainer || hasWrapper) && className
-                        ? "Input"
-                        : className
-                }
-                id={id}
-                min={min}
-                max={max}
-                type="range"
-                $validationStatus={validation?.status}
-                $inputBackground={inputBackground}
-                $value={value ?? 0}
-                $max={max}
-                {...rest}
-            />
-        )
-    }
-)
+> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    id,
+    min = 0,
+    max = 100,
+    validation,
+    hasContainer,
+    hasWrapper,
+    inputBackground,
+    value,
+    ...rest
+}) => {
+    return (
+        <StyledInputSlider
+            data-testid={
+                (hasContainer || hasWrapper) && testid
+                    ? `${testid}.Input`
+                    : testid
+            }
+            ref={ref}
+            className={
+                (hasContainer || hasWrapper) && className ? "Input" : className
+            }
+            id={id}
+            min={min}
+            max={max}
+            type="range"
+            $validationStatus={validation?.status}
+            $inputBackground={inputBackground}
+            $value={value ?? 0}
+            $max={max}
+            {...rest}
+        />
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== InputSlider styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import { getPercentage } from "@julseb-lib/utils"
 import {

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

@@ -1,10 +1,9 @@
-/*=============================================== InputSlider types ===============================================*/
-
-import type { InputHTMLAttributes } from "react"
+import type { InputHTMLAttributes, Ref } from "react"
 import type { ILibInputBase } from "../InputComponents/types"
 
 export type ILibInputSlider = InputHTMLAttributes<HTMLInputElement> &
     Omit<ILibInputBase, "inputVariant" | "iconBaseUrl"> & {
+        ref?: Ref<HTMLInputElement>
         type?: never
         showMinMax?: boolean
         showValue?: "hover" | "always" | "never"

package/dist/lib/components/Key/Key.tsx

@@ -1,45 +1,46 @@
-/*=============================================== Key component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledKey } from "./styles"
 import type { ILibKey } from "./types"
 
 /**
- * @description Returns a Key component
- * @link https://documentation-components-react.vercel.app/components/key
+ * Key component for displaying keyboard keys or shortcuts, with optional separator, size, and accent color.
+ *
+ * @component
  * @extends HTMLSpanElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLSpanElement>
- * @prop keys: Array<string>
- * @prop size?: "large" | "small"
- * @prop accentColor?: Exclude<"primary" | "secondary" | "success" | "danger" | "warning" | "gray">
- * @prop withSeparator?: boolean
+ * @param {Object} props - Key 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 {Array<string>} props.keys - Array of key names to display.
+ * @param {"large" | "small"} [props.size="small"] - Size of the key display.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "gray"} [props.accentColor="primary"] - Accent color for the key.
+ * @param {boolean} [props.withSeparator] - Display a separator (e.g., " + ") between keys.
+ * @returns {JSX.Element} The rendered Key component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/key
+ * @example
+ * <Key keys={["Ctrl", "C"]} withSeparator size="large" accentColor="secondary" />
  */
-export const Key = forwardRef<HTMLSpanElement, ILibKey>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            keys,
-            size = "small",
-            accentColor = "primary",
-            withSeparator,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledKey
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $accentColor={accentColor}
-                {...rest}
-            >
-                {keys.join(withSeparator ? " + " : "")}
-            </StyledKey>
-        )
-    }
-)
+export const Key: FC<ILibKey> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    keys,
+    size = "small",
+    accentColor = "primary",
+    withSeparator,
+    ...rest
+}) => {
+    return (
+        <StyledKey
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $size={size}
+            $accentColor={accentColor}
+            {...rest}
+        >
+            {keys.join(withSeparator ? " + " : "")}
+        </StyledKey>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Key styles ===============================================*/
-
 import styled from "styled-components"
 import { setDefaultTheme, RADIUSES, FONT_SIZES, SPACERS, Mixins } from "../../"
 import type { LibKeySize, LibColorsShort } from "../../types"

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

@@ -1,5 +1,3 @@
-/*=============================================== Key types ===============================================*/
-
 import type { LibComponentBase, LibKeySize, LibColorsShort } from "../../types"
 
 export interface ILibKey extends LibComponentBase<HTMLSpanElement> {

package/dist/lib/components/LibIcon/LibIcon.tsx

@@ -1,5 +1,4 @@
-/*=============================================== LibIcon component ===============================================*/
-
+import type { FC } from "react"
 import { Icon } from "../../"
 import type { ILibLibIcon } from "./types"
 
@@ -12,14 +11,14 @@ import type { ILibLibIcon } from "./types"
  * @prop color?: Any color from the library
  * @prop className?: string
  */
-export const LibIcon = ({
+export const LibIcon: FC<ILibLibIcon> = ({
     "data-testid": testid,
     icon,
     size,
     color,
     className,
     baseUrl,
-}: ILibLibIcon) => {
+}) => {
     if (typeof icon !== "string") return icon
 
     return (

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== LibIcon types ===============================================*/
-
 import type { ILibIcon } from "../Icon/types"
 import type { LibIcon as LibIconType } from "../../types"