@julseb-lib/react 0.0.87 → 0.0.89

package/dist/lib/components/TextIcon/TextIcon.tsx

@@ -36,65 +36,65 @@ import type { ILibTextIcon } from "./types"
  * <TextIcon icon="star" tag="h2" color="primary">Featured</TextIcon>
  */
 export const TextIcon: FC<ILibTextIcon> = ({
-    "data-testid": testid,
-    as,
-    ref,
-    textAs,
-    className,
-    children,
-    icon,
-    iconColor,
-    iconSize,
-    iconBaseUrl,
-    tag = "p",
-    display,
-    gap,
-    containerStyle,
-    ...rest
+	"data-testid": testid,
+	as,
+	ref,
+	textAs,
+	className,
+	children,
+	icon,
+	iconColor,
+	iconSize,
+	iconBaseUrl,
+	tag = "p",
+	display,
+	gap = "xs",
+	containerStyle,
+	...rest
 }) => {
-    const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
-        "data-testid": testid && `${testid}.Text`,
-        as: textAs,
-        className: "Text",
-        children,
-        ...rest,
-    }
+	const textProps: Partial<Omit<ILibTextIcon, "tag" | "display">> = {
+		"data-testid": testid && `${testid}.Text`,
+		as: textAs,
+		className: "Text",
+		children,
+		...rest,
+	}
 
-    return (
-        <StyledTextIcon
-            data-testid={testid}
-            ref={ref}
-            as={as}
-            className={className}
-            style={containerStyle}
-            $gap={gap}
-        >
-            <IconContainer
-                data-testid={testid && `${testid}.IconContainer`}
-                className={className && "IconContainer"}
-                $tag={tag}
-                $display={display}
-                $iconSize={iconSize}
-            >
-                <LibIcon
-                    data-testid={testid && `${testid}.IconContainer.Icon`}
-                    className={className && "Icon"}
-                    icon={icon}
-                    size={iconSize || getIconHeight(tag, display)}
-                    color={iconColor}
-                    baseUrl={iconBaseUrl}
-                />
-            </IconContainer>
+	return (
+		<StyledTextIcon
+			data-testid={testid}
+			ref={ref}
+			as={as}
+			className={className}
+			style={containerStyle}
+			$gap={gap}
+		>
+			<IconContainer
+				data-testid={testid && `${testid}.IconContainer`}
+				className={className && "IconContainer"}
+				$tag={tag}
+				$display={display}
+				$iconSize={iconSize}
+			>
+				<LibIcon
+					data-testid={testid && `${testid}.IconContainer.Icon`}
+					className={className && "Icon"}
+					icon={icon}
+					size={iconSize || getIconHeight(tag, display)}
+					color={iconColor}
+					baseUrl={iconBaseUrl}
+				/>
+			</IconContainer>
 
-            {tag === "h1" ||
-            tag === "h2" ||
-            tag === "h3" ||
-            tag === "h4" ||
-            tag === "h5" ? (
-                <Text display={display} tag={tag} {...textProps} />
-            ) : (
-                <Text tag={tag} {...textProps} />
-            )}
-        </StyledTextIcon>
-    )
+			{tag === "h1" ||
+			tag === "h2" ||
+			tag === "h3" ||
+			tag === "h4" ||
+			tag === "h5" ? (
+				<Text display={display} tag={tag} {...textProps} />
+			) : (
+				<Text tag={tag} {...textProps} />
+			)}
+		</StyledTextIcon>
+	)
 }

package/dist/lib/components/Timepicker/Timepicker.tsx

@@ -1,21 +1,20 @@
 import { useRef, type ChangeEvent, type FC } from "react"
-import { useClickOutside } from "../../"
+import { useClickOutside, designTokens } from "../../"
 import {
-    InputContainer,
-    InputAndListContainer,
-    InputWrapper,
-    InputLeftContainer,
-    InputPrefix,
-    InputIcon,
-    InputRightContainer,
-    InputButton,
-    InputValidationIcon,
-    ListInput,
-    ListInputItem,
+	InputContainer,
+	InputAndListContainer,
+	InputWrapper,
+	InputLeftContainer,
+	InputPrefix,
+	InputIcon,
+	InputRightContainer,
+	InputButton,
+	InputValidationIcon,
+	ListInput,
+	ListInputItem,
 } from "../InputComponents"
 import { Clock } from "../../icons"
 import { useKeyboardNavigation } from "../ComponentsMixins"
-import { designTokens } from "../../types"
 import { InputTime } from "./styles"
 import type { ILibTimepicker } from "./types"
 
@@ -65,243 +64,243 @@ import type { ILibTimepicker } from "./types"
  * />
  */
 export const Timepicker: FC<ILibTimepicker> = ({
-    "data-testid": testid,
-    ref,
-    className,
-    icon,
-    iconSize,
-    iconBaseUrl,
-    iconClockSize = 16,
-    iconClock = (
-        <Clock
-            data-testid={testid && `${testid}.RightContainer.IconClock`}
-            className={className && "IconClock"}
-            size={iconClockSize}
-        />
-    ),
-    id,
-    label,
-    labelComment,
-    helper,
-    helperBottom,
-    validation,
-    inputBackground,
-    inputVariant,
-    containerStyle,
-    inputAndListContainerStyle,
-    listDirection,
-    step = "1h",
-    minTime,
-    maxTime,
-    value,
-    setValue,
-    prefix,
-    disabled,
-    tabIndex,
-    ...rest
+	"data-testid": testid,
+	ref,
+	className,
+	icon,
+	iconSize,
+	iconBaseUrl,
+	iconClockSize = 16,
+	iconClock = (
+		<Clock
+			data-testid={testid && `${testid}.RightContainer.IconClock`}
+			className={className && "IconClock"}
+			size={iconClockSize}
+		/>
+	),
+	id,
+	label,
+	labelComment,
+	helper,
+	helperBottom,
+	validation,
+	inputBackground,
+	inputVariant,
+	containerStyle,
+	inputAndListContainerStyle,
+	listDirection,
+	step = "1h",
+	minTime,
+	maxTime,
+	value,
+	setValue,
+	prefix,
+	disabled,
+	tabIndex,
+	...rest
 }) => {
-    const hasContainer: boolean = !!(
-        label ||
-        labelComment ||
-        helper ||
-        helperBottom ||
-        validation
-    )
+	const hasContainer: boolean = !!(
+		label ||
+		labelComment ||
+		helper ||
+		helperBottom ||
+		validation
+	)
 
-    const el = useRef<HTMLDivElement>(null)
+	const el = useRef<HTMLDivElement>(null)
 
-    let times: Array<string> =
-        step === "30min"
-            ? Object.keys(designTokens.halfHours)
-            : step === "15min"
-            ? Object.keys(designTokens.quarterHours)
-            : step === "1min"
-            ? Object.keys(designTokens.minutes)
-            : Object.keys(designTokens.hours)
+	let times: Array<string> =
+		step === "30min"
+			? Object.keys(designTokens.halfHours)
+			: step === "15min"
+			? Object.keys(designTokens.quarterHours)
+			: step === "1min"
+			? Object.keys(designTokens.minutes)
+			: Object.keys(designTokens.hours)
 
-    if (minTime) {
-        times = times.splice(
-            times.indexOf(times.find(found => found === minTime)!),
-            times.length - 1
-        )
-    }
+	if (minTime) {
+		times = times.splice(
+			times.indexOf(times.find(found => found === minTime)!),
+			times.length - 1
+		)
+	}
 
-    if (maxTime) {
-        times = times.splice(0, times.indexOf(maxTime) + 1)
-    }
+	if (maxTime) {
+		times = times.splice(0, times.indexOf(maxTime) + 1)
+	}
 
-    const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
-        typeof times
-    >({
-        data: times,
-        value,
-        setValue,
-    })
+	const { isOpen, setIsOpen, cursor, listRef } = useKeyboardNavigation<
+		typeof times
+	>({
+		data: times,
+		value,
+		setValue,
+	})
 
-    const handleClick = () => {
-        if (isOpen) setIsOpen(false)
-        setIsOpen(true)
-    }
+	const handleClick = () => {
+		if (isOpen) setIsOpen(false)
+		setIsOpen(true)
+	}
 
-    const handleOpen = () => setIsOpen(true)
-    const handleClose = () => setIsOpen(false)
+	const handleOpen = () => setIsOpen(true)
+	const handleClose = () => setIsOpen(false)
 
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
-        setValue(
-            e.target.value as keyof typeof designTokens.hours &
-                keyof typeof designTokens.halfHours &
-                keyof typeof designTokens.quarterHours &
-                keyof typeof designTokens.minutes
-        )
+	const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
+		setValue(
+			e.target.value as keyof typeof designTokens.hours &
+				keyof typeof designTokens.halfHours &
+				keyof typeof designTokens.quarterHours &
+				keyof typeof designTokens.minutes
+		)
 
-    const handleSelectTime = (time: string) => {
-        setValue(time as any)
-        handleClose()
-    }
+	const handleSelectTime = (time: string) => {
+		setValue(time as any)
+		handleClose()
+	}
 
-    useClickOutside(listRef, handleClose)
+	useClickOutside(listRef, handleClose)
 
-    return (
-        <InputContainer
-            data-testid={testid}
-            id={id}
-            label={label}
-            labelComment={labelComment}
-            helper={helper}
-            helperBottom={helperBottom}
-            validation={validation}
-            value={value}
-            className={className}
-            iconBaseUrl={iconBaseUrl}
-            style={containerStyle}
-            hasListOpen={isOpen}
-            counter={undefined}
-            maxLength={undefined}
-        >
-            <InputAndListContainer
-                data-testid={testid}
-                className={className}
-                hasListOpen={isOpen}
-                isParent={!hasContainer}
-                ref={el}
-                inputAndListContainerStyle={inputAndListContainerStyle}
-            >
-                <InputWrapper
-                    data-testid={testid}
-                    className={className}
-                    isTextArea={false}
-                    inputBackground={inputBackground}
-                    inputVariant={inputVariant}
-                    validationStatus={validation?.status}
-                    hasListOpen={isOpen}
-                    hasContainer
-                >
-                    {(icon || prefix) && (
-                        <InputLeftContainer
-                            data-testid={testid}
-                            className={className}
-                            disabled={disabled}
-                        >
-                            {prefix && (
-                                <InputPrefix
-                                    data-testid={testid}
-                                    className={className}
-                                    prefix={prefix}
-                                    inputBackground={inputBackground}
-                                />
-                            )}
+	return (
+		<InputContainer
+			data-testid={testid}
+			id={id}
+			label={label}
+			labelComment={labelComment}
+			helper={helper}
+			helperBottom={helperBottom}
+			validation={validation}
+			value={value}
+			className={className}
+			iconBaseUrl={iconBaseUrl}
+			style={containerStyle}
+			hasListOpen={isOpen}
+			counter={undefined}
+			maxLength={undefined}
+		>
+			<InputAndListContainer
+				data-testid={testid}
+				className={className}
+				hasListOpen={isOpen}
+				isParent={!hasContainer}
+				ref={el}
+				inputAndListContainerStyle={inputAndListContainerStyle}
+			>
+				<InputWrapper
+					data-testid={testid}
+					className={className}
+					isTextArea={false}
+					inputBackground={inputBackground}
+					inputVariant={inputVariant}
+					validationStatus={validation?.status}
+					hasListOpen={isOpen}
+					hasContainer
+				>
+					{(icon || prefix) && (
+						<InputLeftContainer
+							data-testid={testid}
+							className={className}
+							disabled={disabled}
+						>
+							{prefix && (
+								<InputPrefix
+									data-testid={testid}
+									className={className}
+									prefix={prefix}
+									inputBackground={inputBackground}
+								/>
+							)}
 
-                            {icon && (
-                                <InputIcon
-                                    data-testid={testid}
-                                    className={className}
-                                    icon={icon}
-                                    iconSize={iconSize}
-                                    validationStatus={validation?.status}
-                                    disabled={disabled}
-                                    inputBackground={inputBackground}
-                                    inputVariant={inputVariant}
-                                    iconBaseUrl={iconBaseUrl}
-                                />
-                            )}
-                        </InputLeftContainer>
-                    )}
+							{icon && (
+								<InputIcon
+									data-testid={testid}
+									className={className}
+									icon={icon}
+									iconSize={iconSize}
+									validationStatus={validation?.status}
+									disabled={disabled}
+									inputBackground={inputBackground}
+									inputVariant={inputVariant}
+									iconBaseUrl={iconBaseUrl}
+								/>
+							)}
+						</InputLeftContainer>
+					)}
 
-                    <InputTime
-                        data-testid={
-                            testid && `${testid}.InputWrapper.InputTime`
-                        }
-                        className={className && "InputTime"}
-                        ref={ref}
-                        onClick={handleClick}
-                        onFocus={handleOpen}
-                        tabIndex={tabIndex}
-                        value={value}
-                        onChange={handleChange}
-                        disabled={disabled}
-                        $disabled={disabled}
-                        $validationStatus={validation?.status}
-                        $inputBackground={inputBackground}
-                        $inputVariant={inputVariant}
-                        {...rest}
-                    />
+					<InputTime
+						data-testid={
+							testid && `${testid}.InputWrapper.InputTime`
+						}
+						className={className && "InputTime"}
+						ref={ref}
+						onClick={handleClick}
+						onFocus={handleOpen}
+						tabIndex={tabIndex}
+						value={value}
+						onChange={handleChange}
+						disabled={disabled}
+						$disabled={disabled}
+						$validationStatus={validation?.status}
+						$inputBackground={inputBackground}
+						$inputVariant={inputVariant}
+						{...rest}
+					/>
 
-                    <InputRightContainer
-                        data-testid={testid}
-                        className={className}
-                        disabled={disabled}
-                        withBorder={false}
-                        withPadding
-                    >
-                        <InputButton
-                            data-testid={testid}
-                            className={className}
-                            icon={iconClock}
-                            iconSize={iconClockSize}
-                            onClick={handleClick}
-                            aria-label="Calendar"
-                            disabled={disabled}
-                            inputBackground={inputBackground}
-                            validationStatus={validation?.status}
-                        />
+					<InputRightContainer
+						data-testid={testid}
+						className={className}
+						disabled={disabled}
+						withBorder={false}
+						withPadding
+					>
+						<InputButton
+							data-testid={testid}
+							className={className}
+							icon={iconClock}
+							iconSize={iconClockSize}
+							onClick={handleClick}
+							aria-label="Calendar"
+							disabled={disabled}
+							inputBackground={inputBackground}
+							validationStatus={validation?.status}
+						/>
 
-                        {validation && (
-                            <InputValidationIcon
-                                data-testid={testid}
-                                className={className}
-                                validation={validation}
-                                inputBackground={inputBackground}
-                            />
-                        )}
-                    </InputRightContainer>
-                </InputWrapper>
+						{validation && (
+							<InputValidationIcon
+								data-testid={testid}
+								className={className}
+								validation={validation}
+								inputBackground={inputBackground}
+							/>
+						)}
+					</InputRightContainer>
+				</InputWrapper>
 
-                <ListInput
-                    data-testid={testid}
-                    className={className}
-                    direction={listDirection}
-                    inputBackground={inputBackground}
-                    inputVariant={inputVariant}
-                    validationStatus={validation?.status}
-                    isOpen={!!(value && isOpen)}
-                    ref={listRef}
-                >
-                    {times.map((time, i) => (
-                        <ListInputItem
-                            key={time}
-                            data-testid={testid}
-                            className={className}
-                            validationStatus={validation?.status}
-                            inputBackground={inputBackground}
-                            onClick={() => handleSelectTime(time)}
-                            isActive={i === cursor}
-                            isHovered={value === time}
-                        >
-                            {time}
-                        </ListInputItem>
-                    ))}
-                </ListInput>
-            </InputAndListContainer>
-        </InputContainer>
-    )
+				<ListInput
+					data-testid={testid}
+					className={className}
+					direction={listDirection}
+					inputBackground={inputBackground}
+					inputVariant={inputVariant}
+					validationStatus={validation?.status}
+					isOpen={!!(value && isOpen)}
+					ref={listRef}
+				>
+					{times.map((time, i) => (
+						<ListInputItem
+							key={time}
+							data-testid={testid}
+							className={className}
+							validationStatus={validation?.status}
+							inputBackground={inputBackground}
+							onClick={() => handleSelectTime(time)}
+							isActive={i === cursor}
+							isHovered={value === time}
+						>
+							{time}
+						</ListInputItem>
+					))}
+				</ListInput>
+			</InputAndListContainer>
+		</InputContainer>
+	)
 }

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

@@ -1,20 +1,21 @@
 import type { CSSProperties } from "react"
 import type {
-    LibComponentBase,
-    LibAllColorsAndOverlays,
-    LibAllColors,
-    LibTooltipPosition,
-    LibSpacers,
-    LibTooltipTrigger,
+	LibComponentBase,
+	LibAllColorsAndOverlays,
+	LibAllColors,
+	LibTooltipPosition,
+	LibSpacers,
+	LibTooltipTrigger,
+	ReactChildren,
 } from "../../types"
 
 export interface ILibTooltip extends LibComponentBase<HTMLDivElement> {
-    tooltip: string | JSX.Element
-    position?: LibTooltipPosition
-    hideArrow?: boolean
-    trigger?: LibTooltipTrigger
-    backgroundColor?: LibAllColorsAndOverlays
-    textColor?: LibAllColors
-    offset?: LibSpacers
-    tooltipStyles?: CSSProperties
+	tooltip: string | ReactChildren
+	position?: LibTooltipPosition
+	hideArrow?: boolean
+	trigger?: LibTooltipTrigger
+	backgroundColor?: LibAllColorsAndOverlays
+	textColor?: LibAllColors
+	offset?: LibSpacers
+	tooltipStyles?: CSSProperties
 }