@julseb-lib/react 0.0.85 → 0.0.86

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

@@ -1,6 +1,4 @@
-/*=============================================== AccordionItem component ===============================================*/
-
-import { forwardRef, useState } from "react"
+import { useState, type FC } from "react"
 import classNames from "classnames"
 import { capitalize } from "@julseb-lib/utils"
 import { AccordionButton } from "./AccordionButton"
@@ -9,62 +7,66 @@ import { StyledAccordionItem } from "./styles"
 import type { ILibAccordionItem } from "./types"
 
 /**
- * @description Returns an item for 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 title: string
- * @prop icon?: "plus" | "chevron" | JSX.Element
- * @prop variant?: "basic" | "rounded"
- * @prop defaultOpen?: boolean
+ * AccordionItem represents a single collapsible section within an Accordion.
+ *
+ * @component
+ * @param {Object} props - AccordionItem 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.title - Title for the accordion item.
+ * @param {"plus" | "chevron" | JSX.Element} [props.icon="plus"] - Icon to display in the item header.
+ * @param {"basic" | "rounded"} [props.variant="basic"] - Visual variant of the accordion item.
+ * @param {boolean} [props.defaultOpen=false] - Whether the item is open by default.
+ * @param {ReactNode} [props.children] - Content to display inside the item.
+ * @returns {JSX.Element} The rendered AccordionItem component.
+ *
+ * @example
+ * <AccordionItem title="Section 1" icon="chevron" variant="rounded">
+ *   Content goes here
+ * </AccordionItem>
  */
-export const AccordionItem = forwardRef<HTMLDivElement, ILibAccordionItem>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            as,
-            children,
-            title,
-            icon = "plus",
-            defaultOpen = false,
-            variant = "basic",
-            ...rest
-        },
-        ref
-    ) => {
-        const [isOpen, setIsOpen] = useState(defaultOpen)
+export const AccordionItem: FC<ILibAccordionItem> = ({
+    "data-testid": testid,
+    className,
+    as,
+    ref,
+    children,
+    title,
+    icon = "plus",
+    defaultOpen = false,
+    variant = "basic",
+    ...rest
+}) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen)
 
-        return (
-            <StyledAccordionItem
+    return (
+        <StyledAccordionItem
+            data-testid={testid}
+            as={as}
+            ref={ref}
+            className={classNames(className, capitalize(variant))}
+            $variant={variant}
+            {...rest}
+        >
+            <AccordionButton
                 data-testid={testid}
-                as={as}
-                ref={ref}
-                className={classNames(className, capitalize(variant))}
-                $variant={variant}
-                {...rest}
-            >
-                <AccordionButton
-                    data-testid={testid}
-                    className={className}
-                    icon={icon}
-                    title={title}
-                    isOpen={isOpen}
-                    setIsOpen={setIsOpen}
-                    variant={variant}
-                />
+                className={className}
+                icon={icon}
+                title={title}
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
+                variant={variant}
+            />
 
-                <AccordionContent
-                    data-testid={testid}
-                    className={className}
-                    isOpen={isOpen}
-                    variant={variant}
-                >
-                    {children}
-                </AccordionContent>
-            </StyledAccordionItem>
-        )
-    }
-)
+            <AccordionContent
+                data-testid={testid}
+                className={className}
+                isOpen={isOpen}
+                variant={variant}
+            >
+                {children}
+            </AccordionContent>
+        </StyledAccordionItem>
+    )
+}

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

@@ -1,4 +1,2 @@
-/*=============================================== Accordion exports ===============================================*/
-
 export * from "./Accordion"
 export * from "./AccordionItem"

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

@@ -1,5 +1,3 @@
-/*=============================================== Accordion styles ===============================================*/
-
 import styled from "styled-components"
 import {
     MEDIA,

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

@@ -1,5 +1,3 @@
-/*=============================================== Accordion sub components types ===============================================*/
-
 import type { DispatchState, ReactChildren } from "../../types"
 import type { ILibAccordion } from "./types"
 

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

@@ -1,5 +1,3 @@
-/*=============================================== Accordion types ===============================================*/
-
 import type {
     LibComponentBase,
     LibAccordionItem,

package/dist/lib/components/Alert/Alert.tsx

@@ -1,6 +1,4 @@
-/*=============================================== Alert component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import classNames from "classnames"
 import { stringifyPx, getRandomString } from "@julseb-lib/utils"
 import { Text } from "../../"
@@ -42,77 +40,81 @@ const alertStyles: {
 }
 
 /**
- * @description Returns a Alert component
- * @link https://documentation-components-react.vercel.app/components/alert
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop maxWidth?: number
- * @prop textColor?: 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 borderRadius?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | { topLeft?: LibRadiuses; topRight?: LibRadiuses; bottomLeft?: LibRadiuses; bottomRight?: LibRadiuses }
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop alertColor?: "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"
- * @prop backgroundColor?: Any color from the library => only if alertColor is not defined
- * @prop border?: { style?: CssBorderStyle; width?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"; color?: Any color from the library (only if alertColor is not defined) }
+ * Alert component for displaying important messages or notifications.
+ *
+ * @component
+ * @param {Object} props - Alert 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 {string} [props.id] - HTML id attribute.
+ * @param {ReactNode} [props.children] - Content of the alert.
+ * @param {number} [props.maxWidth] - Maximum width of the alert.
+ * @param {LibAllColors} [props.textColor="font"] - Text color.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px" | Object} [props.padding="s"] - Padding for the alert.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "round" | "circle" | number | Object} [props.borderRadius="m"] - Border radius for the alert.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="xs"] - Gap between alert content.
+ * @param {"primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white"} [props.alertColor="primary"] - Predefined alert color.
+ * @param {LibAllColors} [props.backgroundColor] - Custom background color (overrides alertColor).
+ * @param {Object} [props.border] - Border style, width, and color.
+ * @returns {JSX.Element} The rendered Alert component.
+ *
+ * @example
+ * <Alert alertColor="success" padding="m" borderRadius="l">
+ *   This is a success alert!
+ * </Alert>
  */
-export const Alert = forwardRef<HTMLDivElement, ILibAlert>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            className,
-            id,
-            children,
-            maxWidth,
-            textColor = "font",
-            padding = "s",
-            borderRadius = "m",
-            gap = "xs",
-            alertColor = "primary",
-            backgroundColor,
-            border,
-            ...rest
-        },
-        ref
-    ) => {
-        const styles = alertStyles[alertColor]
-        const randomClass = getRandomString(10, true)
-        const withClass = className?.split(" ")[0] || randomClass
+export const Alert: FC<ILibAlert> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    className,
+    id,
+    children,
+    maxWidth,
+    textColor = "font",
+    padding = "s",
+    borderRadius = "m",
+    gap = "xs",
+    alertColor = "primary",
+    backgroundColor,
+    border,
+    ...rest
+}) => {
+    const styles = alertStyles[alertColor]
+    const randomClass = getRandomString(10, true)
+    const withClass = className?.split(" ")[0] || randomClass
 
-        appendStyles(`
+    appendStyles(`
             ${id ? `#${id}` : `.${withClass}`} {
                 --alert-max-width: ${stringifyPx(maxWidth || "100%")};
             }
         `)
 
-        return (
-            <>
-                <StyledAlert
-                    data-testid={testid}
-                    ref={ref}
-                    as={as || typeof children === "string" ? Text : "div"}
-                    className={classNames(className, randomClass)}
-                    id={id}
-                    $backgroundColor={
-                        backgroundColor ||
-                        styles.backgroundColor ||
-                        "primary-50"
-                    }
-                    $border={{
-                        color: styles.borderColor || "primary",
-                        ...border,
-                    }}
-                    $borderRadius={borderRadius}
-                    $gap={gap}
-                    $padding={padding}
-                    $textColor={textColor}
-                    {...rest}
-                >
-                    {children}
-                </StyledAlert>
-            </>
-        )
-    }
-)
+    return (
+        <>
+            <StyledAlert
+                data-testid={testid}
+                ref={ref}
+                as={as || typeof children === "string" ? Text : "div"}
+                className={classNames(className, randomClass)}
+                id={id}
+                $backgroundColor={
+                    backgroundColor || styles.backgroundColor || "primary-50"
+                }
+                $border={{
+                    color: styles.borderColor || "primary",
+                    ...border,
+                }}
+                $borderRadius={borderRadius}
+                $gap={gap}
+                $padding={padding}
+                $textColor={textColor}
+                {...rest}
+            >
+                {children}
+            </StyledAlert>
+        </>
+    )
+}

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

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

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

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

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

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

package/dist/lib/components/Aside/Aside.tsx

@@ -1,42 +1,41 @@
-/*=============================================== Aside component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledAside } from "./styles"
 import type { ILibAside } from "./types"
 
 /**
- * @description Returns an Aside component
- * @link https://documentation-components-react.vercel.app/layouts/container
- * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop size?: "default" | "small" | number
- * @prop minHeight?: string | number
+ * Aside component for displaying complementary content.
+ *
+ * @component
+ * @param {Object} props - Aside 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 {"default" | "small" | number} [props.size] - Size of the aside.
+ * @param {ReactNode} [props.children] - Content of the aside.
+ * @returns {JSX.Element} The rendered Aside component.
+ *
+ * @example
+ * <Aside size="small" minHeight="50vh">
+ *   Sidebar content here
+ * </Aside>
  */
-export const Aside = forwardRef<HTMLDivElement, ILibAside>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            size,
-            minHeight = "100vh",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledAside
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $size={size}
-                $minHeight={minHeight}
-                {...rest}
-            >
-                {children}
-            </StyledAside>
-        )
-    }
-)
+export const Aside: FC<ILibAside> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    size,
+    ...rest
+}) => {
+    return (
+        <StyledAside
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $size={size}
+            {...rest}
+        >
+            {children}
+        </StyledAside>
+    )
+}

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

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

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

@@ -1,5 +1,3 @@
-/*=============================================== Aside styles ===============================================*/
-
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { setDefaultTheme, LAYOUTS, Mixins, SPACERS, MEDIA } from "../../"
@@ -18,11 +16,11 @@ const getAsideSize = (size: LibAsideSize) => {
 
 const StyledAside = styled.aside<{
     $size?: LibAsideSize
-    $minHeight: string | number
 }>`
     position: relative;
     width: 100%;
-    min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
+    height: 100%;
+    min-height: 100%;
     max-width: ${({ $size }) => getAsideSize($size || "default")};
     padding: ${SPACERS.XXL} 0;
     ${Mixins.Flexbox({
@@ -36,8 +34,12 @@ const StyledAside = styled.aside<{
         flex-shrink: 0;
     }
 
-    @media ${MEDIA.BREAKPOINT_TABLET_SMALL} {
-        height: inherit;
+    @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
+        width: 100%;
+        max-width: ${({ $size }) => getAsideSize($size || "default")};
+        height: unset;
+        min-height: unset;
+        padding: ${SPACERS.L} 0;
     }
 `
 

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

@@ -1,8 +1,5 @@
-/*=============================================== Aside types ===============================================*/
-
 import type { LibComponentBase, LibAsideSize } from "../../types"
 
 export interface ILibAside extends LibComponentBase<HTMLDivElement> {
     size?: LibAsideSize
-    minHeight?: string | number
 }