@julseb-lib/react 0.1.10 → 0.1.12

package/dist/lib/components/IconMenu/IconMenu.module.css

@@ -1,239 +0,0 @@
-:root {
-	--open-position: calc(
-		var(--button-position) * 48px + var(--spacer-xs) *
-			var(--button-position)
-	);
-}
-
-@keyframes anim-left-close {
-	0% {
-		right: 0;
-	}
-
-	100% {
-		right: var(--open-position);
-	}
-}
-
-@keyframes anim-left {
-	0% {
-		right: var(--open-position);
-	}
-
-	100% {
-		right: 0;
-	}
-}
-
-@keyframes anim-right-close {
-	0% {
-		left: 0;
-	}
-
-	100% {
-		left: var(--open-position);
-	}
-}
-
-@keyframes anim-right {
-	0% {
-		left: var(--open-position);
-	}
-
-	100% {
-		left: 0;
-	}
-}
-
-.icon-menu-item {
-	position: absolute;
-	--open-position: calc(
-		var(--button-position) * 48px + var(--spacer-xs) *
-			var(--button-position)
-	);
-}
-
-.right {
-	top: 0;
-	left: 0;
-
-	&.open {
-		left: var(--open-position);
-	}
-}
-
-.left {
-	top: 0;
-	right: 0;
-
-	animation: anim-left 200ms ease forwards;
-
-	&.open {
-		animation: anim-left-close 200ms ease forwards;
-	}
-}
-
-.icon-menu {
-	.icon-menu-item {
-		position: absolute;
-		left: 0;
-		--open-position: calc(
-			var(--button-position) * 48px + var(--spacer-xs) *
-				var(--button-position)
-		);
-
-		/* &.open {
-				position: relative;
-				left: unset;
-			} */
-		/* position: absolute;
-			
-			z-index: var(--button-position);
-
-			&.dir-right {
-				top: 0;
-				left: 0;
-				transform: translateX(0);
-				transition: transform 300ms ease !important;
-
-				&.open {
-					transform: translateX(var(--open-position)) !important;
-					left: unset;
-				}
-			} */
-
-		&.dir-right {
-			animation: anim-right 200ms ease forwards;
-
-			&.open {
-				animation: anim-right-close 200ms ease forwards;
-			}
-		}
-
-		&.dir-left {
-			animation: anim-left 200ms ease forwards;
-
-			&.open {
-				animation: anim-left-close 200ms ease forwards;
-			}
-		}
-
-		&.dir-up {
-			/* left: 0;
-				bottom: 0; */
-		}
-
-		&.dir-down {
-			/* left: 0;
-				top: 0; */
-		}
-		/* position: absolute;
-    transition: left 200ms ease, top 200ms ease, right 200ms ease,
-        bottom 200ms ease;
-    display: block;
-    overflow: hidden;
-    width: ${DEFAULT_BUTTON_SIZE}px;
-    height: ${DEFAULT_BUTTON_SIZE}px;
-    z-index: 0;
-
-    &.Open {
-        z-index: calc(var(--button-position) + 1);
-        overflow: visible;
-    }
-
-    ${({ $direction }) => {
-        const POSITION = `calc(var(--button-position) * ${DEFAULT_BUTTON_SIZE}px + ${SPACERS.XS} * var(--button-position))`
-
-        switch ($direction) {
-            case "left":
-                return css`
-                    top: 0;
-                    right: 0;
-
-                    &.Open {
-                        right: ${POSITION};
-                    }
-                `
-            case "up":
-                return css`
-                    left: 0;
-                    bottom: 0;
-
-                    &.Open {
-                        bottom: ${POSITION};
-                    }
-                `
-            case "right":
-                return css`
-                    top: 0;
-                    left: 0;
-
-                    &.Open {
-                        left: ${POSITION};
-                    }
-                `
-            case "down":
-                return css`
-                    left: 0;
-                    top: 0;
-
-                    &.Open {
-                        top: ${POSITION};
-                    }
-                `
-        }
-    }} */
-	}
-
-	/* .icon-menu-item {
-			position: absolute;
-			z-index: calc(var(--button-position));
-			top: 0;
-			left: 0;
-			transition:
-				left 200ms ease,
-				top 200ms ease,
-				right 200ms ease,
-				bottom 200ms ease;
-		} */
-
-	/* &.dir-left .icon-menu-item {
-			top: 0;
-			left: 0;
-			transition: left 200ms ease;
-
-			&.open {
-				left: calc(
-					var(--button-position) * 48px + var(--spacer-xs) *
-						var(--button-position)
-				);
-			}
-		}
-
-		&.dir-right .icon-menu-item {
-			top: 0;
-			left: 0;
-
-			&.open {
-				right: calc(
-					var(--button-position) * 48px + var(--spacer-xs) *
-						var(--button-position)
-				);
-			}
-		} */
-
-	/* &.open {
-			overflow: visible;
-			--open-position: calc(
-				var(--button-position) * 48px + var(--spacer-xs) *
-					var(--button-position)
-			);
-
-			&.dir-rigt .icon-menu-item {
-				right: calc(
-					var(--button-position) * 48px + var(--spacer-xs) *
-						var(--button-position)
-				);
-			}
-		} */
-}

package/dist/lib/components/IconMenu/IconMenu.tsx

@@ -1,101 +0,0 @@
-import { useState, type FC } from "react"
-import { uuid } from "@julseb-lib/utils"
-import { IconMenuItem } from "./IconMenuItem"
-import { ButtonIcon } from "../ButtonIcon"
-import { Burger } from "../Burger"
-import { clsx } from "../../utils"
-import styles from "./IconMenu.module.css"
-import type { ILibIconMenu } from "./types"
-import { BiPlus } from "react-icons/bi"
-
-/*
-	Generate JSDoc with:
-	* <short description of the component>
-	*
-	* @component
-	*
-	* @example
-	* <an example of the component>
-	* 
-	* @extends <type the component is extending (check in ./types.ts)>
-	*
-	for each prop, generate:
-	* @prop {type} [props.<prop name>] <prop with the possible values, and default values> - <short description of the prop>
-	* 
-	* @returns <what the component returns>
-	*
-	* @see https://doc-julseb-lib-react.vercel.app/components/<name of the component>
-*/
-export const IconMenu: FC<ILibIconMenu> = ({
-	className,
-	element = "nav",
-	ref,
-	children,
-	direction = "right",
-	color,
-	buttonsVariant,
-	openButtonVariant = "plain",
-	iconOpen = "plus",
-	items,
-	// ...rest
-}) => {
-	const Element = element
-
-	const [isOpen, setIsOpen] = useState(false)
-
-	return (
-		<Element
-			ref={ref}
-			className={clsx(
-				"relative w-12 h-12",
-				"icon-menu",
-				isOpen && "open",
-				`dir-${direction}`,
-				className,
-			)}
-			// {...rest}
-		>
-			<ButtonIcon
-				icon={
-					iconOpen === "burger" ? (
-						<Burger
-							isOpen={isOpen}
-							color="white"
-							className="w-6 h-4"
-							noHover
-							element="span"
-						/>
-					) : iconOpen === "plus" ? (
-						<BiPlus
-							size={24}
-							className={clsx(
-								"transition-all duration-200 ease-in-out",
-								isOpen && "rotate-45",
-							)}
-						/>
-					) : isOpen ? (
-						iconOpen?.open
-					) : (
-						iconOpen?.close
-					)
-				}
-				onClick={() => setIsOpen(!isOpen)}
-				color={color}
-				variant={openButtonVariant}
-				className={clsx("z-10 relative", "open-button")}
-			/>
-
-			{items?.map((item, i) => (
-				<IconMenuItem
-					key={uuid()}
-					indexPosition={i + 1}
-					isOpen={isOpen}
-					direction={direction}
-					variant={buttonsVariant}
-					color={color}
-					{...(item as any)}
-				/>
-			)) ?? children}
-		</Element>
-	)
-}

package/dist/lib/components/IconMenu/IconMenuItem.tsx

@@ -1,53 +0,0 @@
-import { useState, type FC } from "react"
-import { ButtonIcon } from "../ButtonIcon"
-import { clsx } from "../../utils"
-import styles from "./IconMenu.module.css"
-import type { ILibIconMenuItem } from "./types"
-
-export const IconMenuItem: FC<ILibIconMenuItem> = ({
-	ref,
-	label,
-	icon,
-	indexPosition,
-	isOpen,
-	direction,
-	variant = "ghost",
-	role = "button",
-	// ...rest
-}) => {
-	const menuDirection = () => {
-		switch (direction) {
-			case "left":
-				return styles.left
-			case "right":
-				return styles.right
-			case "up":
-				return styles.up
-			case "down":
-				return styles.down
-			default:
-				return null
-		}
-	}
-
-	return (
-		<ButtonIcon
-			ref={ref}
-			className={clsx(
-				menuDirection(),
-				"absolute",
-				isOpen && styles.open,
-				styles["icon-menu-item"],
-			)}
-			icon={icon}
-			aria-label={label}
-			role={role}
-			variant={variant}
-			style={{
-				["--button-position" as any]: indexPosition,
-			}}
-
-			// {...rest}
-		/>
-	)
-}

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

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

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

@@ -1,48 +0,0 @@
-import type {
-	LibButtonVariant,
-	LibColorsHover,
-	LibComponentBase,
-	LibIconMenuDirection,
-	LibIconMenuIcon,
-	ReactElement,
-	LibIconMenuItem,
-	ReactChildren,
-} from "../../types"
-import type { ILibButtonIcon } from "../ButtonIcon/types"
-
-/*====================== IconMenu ======================*/
-
-interface ILibIconMenuBase extends LibComponentBase<HTMLDivElement> {
-	direction?: LibIconMenuDirection
-	color?: LibColorsHover
-	openButtonVariant?: LibButtonVariant
-	buttonsVariant?: LibButtonVariant
-	iconOpen?:
-		| LibIconMenuIcon
-		| {
-				open: ReactElement
-				close: ReactElement
-		  }
-}
-
-interface IconMenuWithItems extends ILibIconMenuBase {
-	items: Array<LibIconMenuItem>
-	children?: never
-}
-
-interface IconMenuWithChildren extends ILibIconMenuBase {
-	items?: never
-	children: ReactChildren
-}
-
-export type ILibIconMenu = IconMenuWithItems | IconMenuWithChildren
-
-/*====================== IconMenuItem ======================*/
-
-export type ILibIconMenuItem = Pick<ILibButtonIcon, "color" | "variant"> &
-	LibIconMenuItem & {
-		indexPosition: number
-		isOpen: boolean
-		direction?: LibIconMenuDirection
-		variant?: LibButtonVariant
-	}

package/dist/react.css

@@ -1 +0,0 @@
-:root{--open-position: calc( var(--button-position) * 48px + var(--spacer-xs) * var(--button-position) )}@keyframes _anim-left-close_12v5r_1{0%{right:0}to{right:var(--open-position)}}@keyframes _anim-left_12v5r_1{0%{right:var(--open-position)}to{right:0}}@keyframes _anim-right-close_12v5r_1{0%{left:0}to{left:var(--open-position)}}@keyframes _anim-right_12v5r_1{0%{left:var(--open-position)}to{left:0}}._icon-menu-item_12v5r_48{position:absolute;--open-position: calc( var(--button-position) * 48px + var(--spacer-xs) * var(--button-position) )}._right_12v5r_56{top:0;left:0}._right_12v5r_56._open_12v5r_60{left:var(--open-position)}._left_12v5r_65{top:0;right:0;animation:_anim-left_12v5r_1 .2s ease forwards}._left_12v5r_65._open_12v5r_60{animation:_anim-left-close_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48{position:absolute;left:0;--open-position: calc( var(--button-position) * 48px + var(--spacer-xs) * var(--button-position) )}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-right_12v5r_93{animation:_anim-right_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-right_12v5r_93._open_12v5r_60{animation:_anim-right-close_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-left_12v5r_113{animation:_anim-left_12v5r_1 .2s ease forwards}._icon-menu_12v5r_48 ._icon-menu-item_12v5r_48._dir-left_12v5r_113._open_12v5r_60{animation:_anim-left-close_12v5r_1 .2s ease forwards}