@julseb-lib/react 0.0.85 → 0.0.86

package/dist/lib/Mixins.tsx

@@ -1,5 +1,3 @@
-/*=============================================== Mixins ===============================================*/
-
 import { css, type DefaultTheme } from "styled-components"
 import type { Property } from "csstype"
 import { stringifyPx } from "@julseb-lib/utils"
@@ -15,7 +13,7 @@ import {
     FONT_WEIGHTS,
 } from "./Variables"
 import {
-    typeValues,
+    designTokens,
     type LibAllColors,
     type LibColorsShort,
     type LibColorsHover,
@@ -68,94 +66,95 @@ const getColorMixinFromTheme = (
     }
 
     const colorsShortMap = new Map<LibColorsShort, keyof typeof THEME>([
-        ["primary", THEME.PRIMARY_500],
-        ["secondary", THEME.SECONDARY_500],
-        ["success", THEME.SUCCESS_500],
-        ["danger", THEME.DANGER_500],
-        ["warning", THEME.WARNING_500],
-        ["gray", THEME.GRAY_500],
-        ["black", THEME.BLACK],
-        ["white", THEME.WHITE],
+        ["primary", "PRIMARY_500"],
+        ["secondary", "SECONDARY_500"],
+        ["success", "SUCCESS_500"],
+        ["danger", "DANGER_500"],
+        ["warning", "WARNING_500"],
+        ["gray", "GRAY_500"],
+        ["black", "BLACK"],
+        ["white", "WHITE"],
     ])
 
     const allColorsMap = new Map<LibAllColors, keyof typeof THEME>([
-        ...colorsShortMap,
-        ["gray-50", THEME.GRAY_50],
-        ["gray-100", THEME.GRAY_100],
-        ["gray-200", THEME.GRAY_200],
-        ["gray-300", THEME.GRAY_300],
-        ["gray-400", THEME.GRAY_400],
-        ["gray-500", THEME.GRAY_500],
-        ["gray-600", THEME.GRAY_600],
-        ["gray-700", THEME.GRAY_700],
-        ["gray-800", THEME.GRAY_800],
-        ["gray-900", THEME.GRAY_900],
-        ["primary-50", THEME.PRIMARY_50],
-        ["primary-100", THEME.PRIMARY_100],
-        ["primary-200", THEME.PRIMARY_200],
-        ["primary-300", THEME.PRIMARY_300],
-        ["primary-400", THEME.PRIMARY_400],
-        ["primary-500", THEME.PRIMARY_500],
-        ["primary-600", THEME.PRIMARY_600],
-        ["primary-700", THEME.PRIMARY_700],
-        ["primary-800", THEME.PRIMARY_800],
-        ["primary-900", THEME.PRIMARY_900],
-        ["secondary-50", THEME.SECONDARY_50],
-        ["secondary-100", THEME.SECONDARY_100],
-        ["secondary-200", THEME.SECONDARY_200],
-        ["secondary-300", THEME.SECONDARY_300],
-        ["secondary-400", THEME.SECONDARY_400],
-        ["secondary-500", THEME.SECONDARY_500],
-        ["secondary-600", THEME.SECONDARY_600],
-        ["secondary-700", THEME.SECONDARY_700],
-        ["secondary-800", THEME.SECONDARY_800],
-        ["secondary-900", THEME.SECONDARY_900],
-        ["success-50", THEME.SUCCESS_50],
-        ["success-100", THEME.SUCCESS_100],
-        ["success-200", THEME.SUCCESS_200],
-        ["success-300", THEME.SUCCESS_300],
-        ["success-400", THEME.SUCCESS_400],
-        ["success-500", THEME.SUCCESS_500],
-        ["success-600", THEME.SUCCESS_600],
-        ["success-700", THEME.SUCCESS_700],
-        ["success-800", THEME.SUCCESS_800],
-        ["success-900", THEME.SUCCESS_900],
-        ["danger-50", THEME.DANGER_50],
-        ["danger-100", THEME.DANGER_100],
-        ["danger-200", THEME.DANGER_200],
-        ["danger-300", THEME.DANGER_300],
-        ["danger-400", THEME.DANGER_400],
-        ["danger-500", THEME.DANGER_500],
-        ["danger-600", THEME.DANGER_600],
-        ["danger-700", THEME.DANGER_700],
-        ["danger-800", THEME.DANGER_800],
-        ["danger-900", THEME.DANGER_900],
-        ["warning-50", THEME.WARNING_50],
-        ["warning-100", THEME.WARNING_100],
-        ["warning-200", THEME.WARNING_200],
-        ["warning-300", THEME.WARNING_300],
-        ["warning-400", THEME.WARNING_400],
-        ["warning-500", THEME.WARNING_500],
-        ["warning-600", THEME.WARNING_600],
-        ["warning-700", THEME.WARNING_700],
-        ["warning-800", THEME.WARNING_800],
-        ["warning-900", THEME.WARNING_900],
-        ["background", THEME.BACKGROUND],
-        ["font", THEME.FONT],
-        ["currentColor", THEME.CURRENT_COLOR],
-        ["transparent", THEME.TRANSPARENT],
+        ...Array.from(colorsShortMap.entries()),
+        ["gray-50", "GRAY_50"],
+        ["gray-100", "GRAY_100"],
+        ["gray-200", "GRAY_200"],
+        ["gray-300", "GRAY_300"],
+        ["gray-400", "GRAY_400"],
+        ["gray-500", "GRAY_500"],
+        ["gray-600", "GRAY_600"],
+        ["gray-700", "GRAY_700"],
+        ["gray-800", "GRAY_800"],
+        ["gray-900", "GRAY_900"],
+        ["primary-50", "PRIMARY_50"],
+        ["primary-100", "PRIMARY_100"],
+        ["primary-200", "PRIMARY_200"],
+        ["primary-300", "PRIMARY_300"],
+        ["primary-400", "PRIMARY_400"],
+        ["primary-500", "PRIMARY_500"],
+        ["primary-600", "PRIMARY_600"],
+        ["primary-700", "PRIMARY_700"],
+        ["primary-800", "PRIMARY_800"],
+        ["primary-900", "PRIMARY_900"],
+        ["secondary-50", "SECONDARY_50"],
+        ["secondary-100", "SECONDARY_100"],
+        ["secondary-200", "SECONDARY_200"],
+        ["secondary-300", "SECONDARY_300"],
+        ["secondary-400", "SECONDARY_400"],
+        ["secondary-500", "SECONDARY_500"],
+        ["secondary-600", "SECONDARY_600"],
+        ["secondary-700", "SECONDARY_700"],
+        ["secondary-800", "SECONDARY_800"],
+        ["secondary-900", "SECONDARY_900"],
+        ["success-50", "SUCCESS_50"],
+        ["success-100", "SUCCESS_100"],
+        ["success-200", "SUCCESS_200"],
+        ["success-300", "SUCCESS_300"],
+        ["success-400", "SUCCESS_400"],
+        ["success-500", "SUCCESS_500"],
+        ["success-600", "SUCCESS_600"],
+        ["success-700", "SUCCESS_700"],
+        ["success-800", "SUCCESS_800"],
+        ["success-900", "SUCCESS_900"],
+        ["danger-50", "DANGER_50"],
+        ["danger-100", "DANGER_100"],
+        ["danger-200", "DANGER_200"],
+        ["danger-300", "DANGER_300"],
+        ["danger-400", "DANGER_400"],
+        ["danger-500", "DANGER_500"],
+        ["danger-600", "DANGER_600"],
+        ["danger-700", "DANGER_700"],
+        ["danger-800", "DANGER_800"],
+        ["danger-900", "DANGER_900"],
+        ["warning-50", "WARNING_50"],
+        ["warning-100", "WARNING_100"],
+        ["warning-200", "WARNING_200"],
+        ["warning-300", "WARNING_300"],
+        ["warning-400", "WARNING_400"],
+        ["warning-500", "WARNING_500"],
+        ["warning-600", "WARNING_600"],
+        ["warning-700", "WARNING_700"],
+        ["warning-800", "WARNING_800"],
+        ["warning-900", "WARNING_900"],
+        ["background", "BACKGROUND"],
+        ["font", "FONT"],
+        ["currentColor", "CURRENT_COLOR"],
+        ["transparent", "TRANSPARENT"],
     ])
 
     const ColorsShort = ($color: LibColorsShort = "primary") =>
-        colorsShortMap.get($color)
+        THEME[colorsShortMap.get($color) as keyof typeof THEME]
 
-    const AllColors = ($color: LibAllColors) => allColorsMap.get($color)
+    const AllColors = ($color: LibAllColors) =>
+        THEME[allColorsMap.get($color) as keyof typeof THEME]
 
     const ColorsAndOverlays = ($color: LibAllColorsAndOverlays | undefined) => {
         if (!$color) return null as any
 
         const overlayColors = Object.keys(
-            typeValues.overlays
+            designTokens.overlays
         ) as Array<LibOverlays>
 
         if (overlayColors.find(c => c === $color)) {
@@ -170,6 +169,7 @@ const getColorMixinFromTheme = (
     ) => {
         if ($color === "currentColor") return "currentColor"
 
+        // @ts-ignore
         const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_500],
             ["secondary", THEME.SECONDARY_500],
@@ -188,6 +188,7 @@ const getColorMixinFromTheme = (
     const ColorsHoverHover = ($color: LibColorsHoverAndCurrent = "primary") => {
         if ($color === "currentColor") return "currentColor"
 
+        // @ts-ignore
         const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_300],
             ["secondary", THEME.SECONDARY_300],
@@ -207,7 +208,7 @@ const getColorMixinFromTheme = (
         $color: LibColorsHoverAndCurrent = "primary"
     ) => {
         if ($color === "currentColor") return "currentColor"
-
+        // @ts-ignore
         const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_600],
             ["secondary", THEME.SECONDARY_600],
@@ -228,6 +229,7 @@ const getColorMixinFromTheme = (
     ) => {
         if ($color === "currentColor") return "currentColor"
 
+        // @ts-ignore
         const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_50],
             ["secondary", THEME.SECONDARY_50],
@@ -246,6 +248,7 @@ const getColorMixinFromTheme = (
     const ColorsGhostHover = ($color: LibColorsHoverAndCurrent = "primary") => {
         if ($color === "currentColor") return "currentColor"
 
+        // @ts-ignore
         const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_200],
             ["secondary", THEME.SECONDARY_200],
@@ -266,6 +269,7 @@ const getColorMixinFromTheme = (
     ) => {
         if ($color === "currentColor") return "currentColor"
 
+        // @ts-ignore
         const colorsMap = new Map<LibColorsHover, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_100],
             ["secondary", THEME.SECONDARY_100],
@@ -284,6 +288,7 @@ const getColorMixinFromTheme = (
     const Colors50 = (
         $color: Exclude<LibColorsShort, "black" | "white"> = "primary"
     ) => {
+        // @ts-ignore
         const colorsMap = new Map<LibColorsShort, keyof typeof THEME>([
             ["primary", THEME.PRIMARY_50],
             ["secondary", THEME.SECONDARY_50],

package/dist/lib/Variables.ts

@@ -1,7 +1,3 @@
-/*=============================================== Variables ===============================================*/
-
-/*====================== Colors ======================*/
-
 export enum COLORS_LIGHT {
     /** #000000 */ BLACK = "var(--color-black)",
     /** #FFFFFF */ WHITE = "var(--color-white)",
@@ -168,26 +164,20 @@ export enum COLORS_DARK {
     CURRENT_COLOR = "currentColor",
 }
 
-/*====================== Overlays ======================*/
-
 export enum OVERLAYS {
     /** rgba(0, 0, 0, 0.5) */ BLACK_50 = "var(--overlay-black-50)",
     /** rgba(0, 0, 0, 0.8) */ BLACK_80 = "var(--overlay-black-80)",
     /** rgba(255, 255, 255, 0.5) */ WHITE_50 = "var(--overlay-white-50)",
-    /** rgba(255, 255, 255, 0.8) */ WHITE_80 = "var(--overlay-white-80)",
+    /** rgba(69, 35, 35, 0.8) */ WHITE_80 = "var(--overlay-white-80)",
     /** linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) */ GRADIENT_BLACK = "var(--overlay-gradient-black)",
     /** linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) */ GRADIENT_WHITE = "var(--overlay-gradient-white)",
 }
 
-/*====================== Font families ======================*/
-
 export enum FONT_FAMILIES {
     /** "Lato", sans-serif */ BODY = "var(--font-family-body)",
     /** monospace */ CODE = "var(--font-family-code)",
 }
 
-/*====================== Font sizes ======================*/
-
 export enum FONT_SIZES {
     /** 5rem */ DISPLAY_H1 = "var(--font-size-display-h1)",
     /** 4rem */ DISPLAY_H2 = "var(--font-size-display-h2)",
@@ -204,23 +194,17 @@ export enum FONT_SIZES {
     /** 0.875rem */ SMALL = "var(--font-size-small)",
 }
 
-/*====================== Font weights ======================*/
-
 export enum FONT_WEIGHTS {
     /** 400 */ REGULAR = "var(--font-weight-regular)",
     /** 700 */ BOLD = "var(--font-weight-bold)",
     /** 900 */ BLACK = "var(--font-weight-black)",
 }
 
-/*====================== Line heights ======================*/
-
 export enum LINE_HEIGHTS {
     /** 1.5 */ BODY = "var(--line-height-body)",
     /** 1.8 */ CODE = "var(--line-height-code)",
 }
 
-/*====================== Shadows ======================*/
-
 export enum SHADOWS {
     /** 0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3) */ XXL = "var(--shadow-xxl)",
     /** 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3) */ XL = "var(--shadow-xl)",
@@ -230,8 +214,6 @@ export enum SHADOWS {
     /** 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) */ XS = "var(--shadow-xs)",
 }
 
-/*====================== Spacers ======================*/
-
 export enum SPACERS {
     /** 48px */ XXL = "var(--spacer-xxl)",
     /** 32px */ XL = "var(--spacer-xl)",
@@ -242,8 +224,6 @@ export enum SPACERS {
     /** 4px */ XXS = "var(--spacer-xxs)",
 }
 
-/*====================== Radiuses ======================*/
-
 export enum RADIUSES {
     /** 24px */ XXL = "var(--radius-xxl)",
     /** 16px */ XL = "var(--radius-xl)",
@@ -255,8 +235,6 @@ export enum RADIUSES {
     /** 50% */ CIRCLE = "var(--radius-circle)",
 }
 
-/*====================== Layouts ======================*/
-
 export enum LAYOUTS {
     /** 600px */ MAIN_DEFAULT = "var(--main-default)",
     /** 800px */ MAIN_LARGE = "var(--main-large)",
@@ -266,8 +244,6 @@ export enum LAYOUTS {
     /** 200px */ ASIDE_SMALL = "var(--aside-small)",
 }
 
-/*====================== Transitions ======================*/
-
 export enum TRANSITIONS {
     /** all 200ms ease */ SHORT = "var(--transition-short)",
     /** all 500ms ease */ LONG = "var(--transition-long)",
@@ -275,8 +251,6 @@ export enum TRANSITIONS {
     /** all 1000ms ease */ PROGRESS_CIRCLE = "var(--transition-progress-circle)",
 }
 
-/*====================== Breakpoints ======================*/
-
 export enum MEDIA {
     BREAKPOINT_TABLET_LARGE = "(max-width: 1024px)",
     BREAKPOINT_TABLET_SMALL = "(max-width: 768px)",
@@ -287,10 +261,6 @@ export enum MEDIA {
     PREFERS_DARK = "(prefers-color-scheme: dark)",
 }
 
-/*====================== Icon multiplier ======================*/
-
 export const ICON_MULTIPLIER = 0.6 as const
 
-/*====================== Input constants ======================*/
-
 export const INPUT_HEIGHT = 32 as const

package/dist/lib/components/Accordion/Accordion.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Accordion component ===============================================*/
-
-import { forwardRef } from "react"
+import { type FC } from "react"
 import classNames from "classnames"
 import { uuid, capitalize } from "@julseb-lib/utils"
 import { Text } from "../../"
@@ -9,78 +7,77 @@ import { StyledAccordion } from "./styles"
 import type { ILibAccordion } from "./types"
 
 /**
- * @description Returns a Accordion component
- * @link https://documentation-components-react.vercel.app/components/accordion
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop items: Array<LibAccordionItem> => only if children is not defined
- * @prop children?: ReactChildren => only if items is not defined
- * @prop variant?: "basic" | "rounded"
- * @prop icon?: "plus" | "chevron" | JSX.Element
+ * Accordion component for displaying collapsible content panels.
+ *
+ * @component
+ * @param {Object} props - Accordion props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactNode} [props.children] - Accordion items as children (used if `items` is not provided).
+ * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the accordion.
+ * @param {"plus" | "chevron" | JSX.Element} [props.icon="plus"] - Icon to display in each item.
+ * @param {Array<LibAccordionItem>} [props.items] - Array of item objects (used if `children` is not provided).
+ * @param {Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @returns {JSX.Element} The rendered Accordion component.
  *
- * @type LibAccordionItem
- * @prop data-testid?: string
- * @prop className?: string
- * @prop id?: string
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop title: string
- * @prop isOpen?: boolean
- * @prop content?: ReactChildren
+ * @example
+ * <Accordion
+ *   items={[
+ *     { title: "Section 1", content: "Content 1" },
+ *     { title: "Section 2", content: <CustomComponent /> }
+ *   ]}
+ *   variant="rounded"
+ *   icon="chevron"
+ * />
  */
-export const Accordion = forwardRef<HTMLDivElement, ILibAccordion>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            children,
-            variant = "basic",
-            icon = "plus",
-            items,
-            ...rest
-        },
-        ref
-    ) => {
-        const variantClass = capitalize(variant)
+export const Accordion: FC<ILibAccordion> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    children,
+    variant = "basic",
+    icon = "plus",
+    items,
+    ...rest
+}) => {
+    const variantClass = capitalize(variant)
 
-        return (
-            <StyledAccordion
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                className={classNames(className, variantClass)}
-                {...rest}
-            >
-                {items
-                    ? items.map(item => (
-                          <AccordionItem
-                              data-testid={
-                                  item["data-testid"] ||
-                                  (testid && `${testid}.AccordionItem`)
-                              }
-                              ref={item.ref}
-                              className={
-                                  item.className ||
-                                  (className && "AccordionItem")
-                              }
-                              id={item.id}
-                              title={item.title}
-                              icon={icon}
-                              variant={variant}
-                              defaultOpen={item.defaultOpen}
-                              key={uuid()}
-                          >
-                              {typeof item.content === "string" ? (
-                                  <Text>{item.content}</Text>
-                              ) : (
-                                  item.content
-                              )}
-                          </AccordionItem>
-                      ))
-                    : children}
-            </StyledAccordion>
-        )
-    }
-)
+    return (
+        <StyledAccordion
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            className={classNames(className, variantClass)}
+            {...rest}
+        >
+            {items
+                ? items.map(item => (
+                      <AccordionItem
+                          data-testid={
+                              item["data-testid"] ||
+                              (testid && `${testid}.AccordionItem`)
+                          }
+                          ref={item.ref}
+                          className={
+                              item.className || (className && "AccordionItem")
+                          }
+                          id={item.id}
+                          title={item.title}
+                          icon={icon}
+                          variant={variant}
+                          defaultOpen={item.defaultOpen}
+                          key={uuid()}
+                      >
+                          {typeof item.content === "string" ? (
+                              <Text>{item.content}</Text>
+                          ) : (
+                              item.content
+                          )}
+                      </AccordionItem>
+                  ))
+                : children}
+        </StyledAccordion>
+    )
+}

package/dist/lib/components/Accordion/AccordionButton.tsx

@@ -1,6 +1,4 @@
-/*=============================================== AccordionButton component ===============================================*/
-
-import { useCallback } from "react"
+import { useCallback, type FC } from "react"
 import classNames from "classnames"
 import { capitalize } from "@julseb-lib/utils"
 import { LibIcon } from "../LibIcon"
@@ -8,7 +6,7 @@ import { Plus, ChevronDown } from "../../icons"
 import { StyledAccordionButton, StyledAccordionIcon } from "./styles"
 import type { ILibAccordionButton } from "./subtypes"
 
-export const AccordionButton = ({
+export const AccordionButton: FC<ILibAccordionButton> = ({
     "data-testid": testid,
     className,
     variant = "basic",
@@ -16,7 +14,7 @@ export const AccordionButton = ({
     isOpen,
     setIsOpen,
     title,
-}: ILibAccordionButton) => {
+}) => {
     const iconProps = {
         "data-testid":
             testid &&

package/dist/lib/components/Accordion/AccordionContent.tsx

@@ -1,17 +1,16 @@
-/*=============================================== AccordionContent component ===============================================*/
-
+import type { FC } from "react"
 import classNames from "classnames"
 import { capitalize } from "@julseb-lib/utils"
 import { StyledAccordionContent } from "./styles"
 import type { ILibAccordionContent } from "./subtypes"
 
-export const AccordionContent = ({
+export const AccordionContent: FC<ILibAccordionContent> = ({
     "data-testid": testid,
     className,
     children,
     isOpen,
     variant = "basic",
-}: ILibAccordionContent) => {
+}) => {
     return (
         <StyledAccordionContent
             data-testid={testid && `${testid}.AccordionContent`}