@julseb-lib/react 0.1.3 → 0.1.5

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

@@ -1,43 +0,0 @@
-import type { FC } from "react"
-import type { ILibInputSlider } from "./types"
-import { StyledInputSlider } from "./styles"
-
-export const Slider: FC<
-    ILibInputSlider & { hasContainer: boolean; hasWrapper: boolean }
-> = ({
-    "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/styles.tsx

@@ -1,290 +0,0 @@
-import styled, { css } from "styled-components"
-import { getPercentage } from "@julseb-lib/utils"
-import {
-    MEDIA,
-    OVERLAYS,
-    RADIUSES,
-    SHADOWS,
-    SPACERS,
-    TRANSITIONS,
-    setDefaultTheme,
-    COLORS_LIGHT,
-    COLORS_DARK,
-    Mixins,
-} from "../../"
-import type { LibInputBackground, LibValidationStatus } from "../../types"
-
-const SliderContainer = styled.div`
-    position: relative;
-    width: 100%;
-`
-
-const DOT_SIZE = 16
-
-const StyledInputSlider = styled.input<{
-    $validationStatus: LibValidationStatus
-    $inputBackground: LibInputBackground | undefined
-    $value: number
-    $max: number
-}>`
-    -webkit-appearance: none;
-    -moz-appearance: initial;
-    appearance: none;
-    width: 100%;
-    height: 8px;
-    background-color: ${({ $validationStatus, theme }) =>
-        $validationStatus === false ? theme.DANGER_50 : theme.GRAY_200};
-    border: none;
-    border-radius: ${RADIUSES.ROUND};
-    position: relative;
-
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        -moz-appearance: initial;
-        appearance: none;
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-        width: ${DOT_SIZE}px;
-        height: ${DOT_SIZE}px;
-        border-radius: ${RADIUSES.CIRCLE};
-        cursor: pointer;
-        transition: ${TRANSITIONS.SHORT};
-        box-shadow: ${SHADOWS.S};
-        position: relative;
-        z-index: 2;
-
-        @media ${MEDIA.HOVER} {
-            &:not(:disabled):hover {
-                background-color: ${({ theme, $validationStatus }) =>
-                    Mixins.ColorsHoverHover(
-                        $validationStatus === false ? "danger" : "primary",
-                        theme
-                    )};
-            }
-
-            &:not(:disabled):active {
-                background-color: ${({ theme, $validationStatus }) =>
-                    Mixins.ColorsHoverActive(
-                        $validationStatus === false ? "danger" : "primary",
-                        theme
-                    )};
-            }
-        }
-    }
-
-    &::-moz-range-thumb {
-        border: none;
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-    }
-
-    &:before,
-    &::before {
-        content: "";
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        background-color: ${({ theme, $validationStatus }) =>
-            Mixins.ColorsHoverDefault(
-                $validationStatus === false ? "danger" : "primary",
-                theme
-            )};
-        height: 100%;
-        width: ${({ $value, $max }) => getPercentage($value, $max)}%;
-        border-radius: ${RADIUSES.ROUND};
-    }
-
-    &:disabled {
-        background-color: ${({ theme }) => theme.GRAY_100};
-        cursor: not-allowed;
-
-        &::-webkit-slider-thumb {
-            background-color: ${({ theme }) => theme.GRAY_500};
-            cursor: not-allowed;
-        }
-
-        &::-moz-range-thumb {
-            background-color: ${({ theme }) => theme.GRAY_500};
-            cursor: not-allowed;
-        }
-
-        &:before,
-        &::before {
-            background-color: ${({ theme }) => theme.GRAY_500};
-        }
-    }
-
-    ${({ $inputBackground, $validationStatus }) => {
-        switch ($inputBackground) {
-            case "light":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_LIGHT.DANGER_50
-                        : COLORS_LIGHT.GRAY_200};
-
-                    &::-webkit-slider-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:not(:disabled):hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-
-                            &:not(:disabled):active {
-                                background-color: ${Mixins.ColorsHoverActive(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-                        }
-                    }
-
-                    &::-moz-range-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:before,
-                    &::before {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:disabled {
-                        background-color: ${COLORS_LIGHT.GRAY_100};
-
-                        &::-webkit-slider-thumb {
-                            background-color: ${COLORS_LIGHT.GRAY_500};
-                        }
-
-                        &::-moz-range-thumb {
-                            background-color: ${COLORS_LIGHT.GRAY_500};
-                        }
-
-                        &:before,
-                        &::before {
-                            background-color: ${COLORS_LIGHT.GRAY_500};
-                        }
-                    }
-                `
-            case "dark":
-                return css`
-                    background-color: ${$validationStatus === false
-                        ? COLORS_DARK.DANGER_50
-                        : COLORS_DARK.GRAY_200};
-
-                    &::-webkit-slider-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-
-                        @media ${MEDIA.HOVER} {
-                            &:not(:disabled):hover {
-                                background-color: ${Mixins.ColorsHoverHover(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-
-                            &:not(:disabled):active {
-                                background-color: ${Mixins.ColorsHoverActive(
-                                    $validationStatus === false
-                                        ? "danger"
-                                        : "primary"
-                                )};
-                            }
-                        }
-                    }
-
-                    &::-moz-range-thumb {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:before,
-                    &::before {
-                        background-color: ${Mixins.ColorsHoverDefault(
-                            $validationStatus === false ? "danger" : "primary"
-                        )};
-                    }
-
-                    &:disabled {
-                        background-color: ${COLORS_DARK.GRAY_100};
-
-                        &::-webkit-slider-thumb {
-                            background-color: ${COLORS_DARK.GRAY_500};
-                        }
-
-                        &::-moz-range-thumb {
-                            background-color: ${COLORS_DARK.GRAY_500};
-                        }
-
-                        &:before,
-                        &::before {
-                            background-color: ${COLORS_DARK.GRAY_500};
-                        }
-                    }
-                `
-            default:
-                return null
-        }
-    }}
-`
-
-const Tooltip = styled.span<{
-    $value: number
-    $max: number
-}>`
-    opacity: 0;
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    transform: translateY(-120%);
-    background-color: ${OVERLAYS.BLACK_50};
-    color: ${({ theme }) => theme.WHITE};
-    padding: ${SPACERS.XXS} ${SPACERS.S};
-    border-radius: ${RADIUSES.S};
-    transition: opacity 200ms ease;
-    left: ${({ $value, $max }) => {
-        const rangeWidth = getPercentage($value, $max)
-        return `calc(${rangeWidth}% + ${-8 - rangeWidth * 0.22}px)`
-    }};
-
-    &.Visible {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    &:after {
-        content: "";
-        position: absolute;
-        border-style: solid;
-        border-width: 4px;
-        border-color: ${OVERLAYS.BLACK_50} transparent transparent transparent;
-        left: 50%;
-        transform: translateX(-50%);
-        top: 100%;
-    }
-`
-
-setDefaultTheme([SliderContainer, StyledInputSlider, Tooltip])
-
-export { SliderContainer, StyledInputSlider, Tooltip }

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

@@ -1,13 +0,0 @@
-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"
-        min?: number
-        max?: number
-        value?: number
-    }

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

@@ -1,46 +0,0 @@
-import type { FC } from "react"
-import { StyledKey } from "./styles"
-import type { ILibKey } from "./types"
-
-/**
- * Key component for displaying keyboard keys or shortcuts, with optional separator, size, and accent color.
- *
- * @component
- * @extends HTMLSpanElement
- * @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: 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/styles.tsx

@@ -1,27 +0,0 @@
-import styled from "styled-components"
-import { setDefaultTheme, RADIUSES, FONT_SIZES, SPACERS, Mixins } from "../../"
-import type { LibKeySize, LibColorsShort } from "../../types"
-
-const StyledKey = styled.span<{
-    $size?: LibKeySize
-    $accentColor: Exclude<LibColorsShort, "black" | "white">
-}>`
-    border: 1px solid
-        ${({ theme, $accentColor }) => Mixins.AllColors($accentColor, theme)};
-    border-bottom-width: ${({ $size }) => ($size === "small" ? 2 : 3)}px;
-    border-radius: ${({ $size }) =>
-        $size === "small" ? RADIUSES.XS : RADIUSES.S};
-    font-size: ${({ $size }) =>
-        $size === "small" ? FONT_SIZES.SMALL : FONT_SIZES.BODY};
-    padding: ${({ $size }) =>
-        $size === "small"
-            ? `0 ${SPACERS.XXS}`
-            : `${SPACERS.XXS} ${SPACERS.XS}`};
-    background-color: ${({ theme, $accentColor }) =>
-        Mixins.Colors50($accentColor, theme)};
-    color: ${({ theme }) => theme.FONT};
-`
-
-setDefaultTheme([StyledKey])
-
-export { StyledKey }

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

@@ -1,9 +0,0 @@
-import type { LibComponentBase, LibKeySize, LibColorsShort } from "../../types"
-
-export interface ILibKey extends LibComponentBase<HTMLSpanElement> {
-    keys: Array<string>
-    size?: LibKeySize
-    accentColor?: Exclude<LibColorsShort, "black" | "white">
-    withSeparator?: boolean
-    children?: never
-}

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

@@ -1,34 +0,0 @@
-import type { FC } from "react"
-import { Icon } from "../../"
-import type { ILibLibIcon } from "./types"
-
-/**
- * @description Icon used to build components from library, use Icon component to build your app.
- * @access Only for building library, do not export
- * @prop icon: string | JSX.Element
- * @prop baseUrl: string | undefined
- * @prop size?: number
- * @prop color?: Any color from the library
- * @prop className?: string
- */
-export const LibIcon: FC<ILibLibIcon> = ({
-    "data-testid": testid,
-    icon,
-    size,
-    color,
-    className,
-    baseUrl,
-}) => {
-    if (typeof icon !== "string") return icon
-
-    return (
-        <Icon
-            data-testid={testid}
-            className={className}
-            src={icon}
-            size={size}
-            color={color}
-            baseURL={baseUrl}
-        />
-    )
-}

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

@@ -1 +0,0 @@
-export * from "./LibIcon"

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

@@ -1,7 +0,0 @@
-import type { ILibIcon } from "../Icon/types"
-import type { LibIcon as LibIconType } from "../../types"
-
-export interface ILibLibIcon extends Omit<ILibIcon, "src"> {
-    icon: LibIconType
-    baseUrl: string | undefined
-}

package/dist/lib/components/Link/Link.tsx

@@ -1,88 +0,0 @@
-import type { FC, Ref } from "react"
-import { Link as RouterLink, NavLink } from "react-router-dom"
-import type { ILibLink } from "./types"
-
-/**
- * Link component for rendering a button, anchor, NavLink, or RouterLink based on provided props.
- *
- * @component
- * @extends HTMLButtonElement | HTMLAnchorElement
- * @param {Object} props - Link props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- *  * @param {Ref<HTMLButtonElement | HTMLAnchorElement>} [props.ref] - Ref forwarded to the root element.
- * @param {boolean} [props.isNavLink] - Render as a NavLink (from react-router-dom).
- * @param {string} [props.to] - Target path for RouterLink or NavLink.
- * @param {string} [props.href] - Href for anchor element.
- * @param {() => void} [props.onClick] - Click handler for button element.
- * @param {boolean} [props.blank] - Open link in new tab.
- * @param {boolean} [props.end] - NavLink end prop.
- * @param {any} [props.rest] - Additional props passed to the rendered element.
- * @returns {JSX.Element|null} The rendered Link component.
- *
- * @see https://documentation-components-react.vercel.app/components/link
- * @example
- * <Link to="/about" isNavLink>About</Link>
- * <Link href="https://example.com" blank>External</Link>
- * <Link onClick={handleClick}>Button</Link>
- */
-export const Link: FC<ILibLink> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    isNavLink,
-    to,
-    href,
-    onClick,
-    blank,
-    end,
-    ...rest
-}) => {
-    if (onClick)
-        return (
-            <button
-                data-testid={testid}
-                ref={ref as Ref<HTMLButtonElement>}
-                onClick={onClick}
-                {...rest}
-            />
-        )
-
-    if (href)
-        return (
-            <a
-                data-testid={testid}
-                ref={ref as Ref<HTMLAnchorElement>}
-                href={href}
-                target={blank ? "_blank" : undefined}
-                rel={blank ? "noreferrer noopener" : undefined}
-                {...rest}
-            />
-        )
-
-    if (isNavLink && to)
-        return (
-            <NavLink
-                data-testid={testid}
-                ref={ref as Ref<HTMLAnchorElement>}
-                to={to}
-                target={blank ? "_blank" : undefined}
-                rel={blank ? "noreferrer noopener" : undefined}
-                end={end}
-                {...rest}
-            />
-        )
-
-    if (to)
-        return (
-            <RouterLink
-                data-testid={testid}
-                ref={ref as Ref<HTMLAnchorElement>}
-                to={to}
-                target={blank ? "_blank" : undefined}
-                rel={blank ? "noreferrer noopener" : undefined}
-                {...rest}
-            />
-        )
-
-    return null
-}

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

@@ -1 +0,0 @@
-export * from "./Link"

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

@@ -1,7 +0,0 @@
-import type { LibComponentBase, LibButtonLinkBlank } from "../../types"
-
-export type ILibLink = LibComponentBase<HTMLAnchorElement | HTMLButtonElement> &
-    LibButtonLinkBlank & {
-        isNavLink?: boolean
-        end?: boolean
-    }

package/dist/lib/components/Linkify/Linkify.tsx

@@ -1,58 +0,0 @@
-import { Fragment, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { Text } from "../../"
-import type { ILibLinkify } from "./types"
-
-const URL_REGEX =
-    /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm
-
-/**
- * Linkify component for transforming URLs in text into clickable anchor links.
- *
- * @component
- * @extends ILibText
- * @param {Object} props - Linkify props.
- * @param {string} [props.data-testid] - Test id for testing purposes.
- *  * @param {ElementType} [props.as] - Custom element type to render as.
- *  * @param {Ref<HTMLHeadingElement & HTMLParagraphElement & HTMLQuoteElement & HTMLUListElement & HTMLOListElement & HTMLDListElement>} [props.ref] - Ref forwarded to the root element.
- * @param {boolean} [props.blank] - Open links in a new tab.
- * @param {string} [props.className] - Additional class names.
- *  * @param {ReactNode} [props.children] - Text content to linkify.
- * @returns {JSX.Element} The rendered Linkify component.
- *
- * @see https://documentation-components-react.vercel.app/components/linkify
- * @example
- * <Linkify>
- *   Visit http://example.com for more info.
- * </Linkify>
- */
-export const Linkify: FC<ILibLinkify> = ({
-    children,
-    blank,
-    className,
-    ref,
-    ...rest
-}) => {
-    const words: Array<string> = children ? children.split(" ") : []
-
-    return (
-        <Text ref={ref} className={className} {...rest}>
-            {words?.map((word: string) =>
-                word.match(URL_REGEX) ? (
-                    <Fragment key={uuid()}>
-                        <a
-                            href={word}
-                            target={blank ? "_blank" : undefined}
-                            rel={blank ? "noreferrer noopener" : undefined}
-                            className={className && "Linkify"}
-                        >
-                            {word}
-                        </a>{" "}
-                    </Fragment>
-                ) : (
-                    word + " "
-                )
-            )}
-        </Text>
-    )
-}

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

@@ -1,6 +0,0 @@
-import type { ILibText } from "../Text/types"
-
-export type ILibLinkify = ILibText & {
-    blank?: boolean
-    children?: string
-}