@julseb-lib/react 0.0.88 → 0.0.89

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/Youtube/types.ts

@@ -2,8 +2,9 @@ import type { IframeHTMLAttributes } from "react"
 import type { LibComponentBase } from "../../types"
 
 export interface ILibYoutube
-    extends Exclude<LibComponentBase<HTMLIFrameElement>, "as">,
-        IframeHTMLAttributes<HTMLIFrameElement> {
-    aspectRatio?: string
-    children?: never
+	extends Exclude<LibComponentBase<HTMLIFrameElement>, "as">,
+		IframeHTMLAttributes<HTMLIFrameElement> {
+	src: string
+	aspectRatio?: string
+	children?: never
 }

package/dist/lib/index.ts

@@ -3,68 +3,69 @@
 export { ThemeProvider } from "styled-components"
 // import {} from "styled-components/cssprop"
 export * from "./utils"
+export * from "./design-tokens"
 export {
-    addDay,
-    addMonth,
-    addYear,
-    calculateAverage,
-    calculateTotalSum,
-    capitalize,
-    convertDate,
-    convertDateShort,
-    convertPrice,
-    convertToEmail,
-    convertYoutube,
-    deleteDuplicates,
-    detectLanguage,
-    disableScroll,
-    enableScroll,
-    filterObject,
-    formatDate,
-    formatHour,
-    generateNumbers,
-    getFirstName,
-    getInitials,
-    getLastName,
-    getNextDay,
-    getPercentage,
-    getRandom,
-    getRandomAvatar,
-    getRandomDate,
-    getRandomNumber,
-    getRandomString,
-    getRandomTime,
-    getTimeNow,
-    getToday,
-    getTomorrow,
-    getYesterday,
-    hexToRgb,
-    emailRegex,
-    passwordRegex,
-    rgbToHex,
-    scrollToTop,
-    slugify,
-    sortByFrequency,
-    stringifyPx,
-    toCamelCase,
-    toConstantCase,
-    toDotCase,
-    toKebabCase,
-    toPascalCase,
-    toPathCase,
-    toSentenceCase,
-    toSnakeCase,
-    toTitleCase,
-    unslugify,
-    uuid,
+	addDay,
+	addMonth,
+	addYear,
+	calculateAverage,
+	calculateTotalSum,
+	capitalize,
+	convertDate,
+	convertDateShort,
+	convertPrice,
+	convertToEmail,
+	convertYoutube,
+	deleteDuplicates,
+	detectLanguage,
+	disableScroll,
+	enableScroll,
+	filterObject,
+	formatDate,
+	formatHour,
+	generateNumbers,
+	getFirstName,
+	getInitials,
+	getLastName,
+	getNextDay,
+	getPercentage,
+	getRandom,
+	getRandomAvatar,
+	getRandomDate,
+	getRandomNumber,
+	getRandomString,
+	getRandomTime,
+	getTimeNow,
+	getToday,
+	getTomorrow,
+	getYesterday,
+	hexToRgb,
+	emailRegex,
+	passwordRegex,
+	rgbToHex,
+	scrollToTop,
+	slugify,
+	sortByFrequency,
+	stringifyPx,
+	toCamelCase,
+	toConstantCase,
+	toDotCase,
+	toKebabCase,
+	toPascalCase,
+	toPathCase,
+	toSentenceCase,
+	toSnakeCase,
+	toTitleCase,
+	unslugify,
+	uuid,
 } from "@julseb-lib/utils"
 
 export * from "./Variables"
 export * from "./Mixins"
 
 export {
-    optionsMarkdown,
-    markdownEditorOptions,
+	optionsMarkdown,
+	markdownEditorOptions,
 } from "./utils/options-markdown"
 
 export * from "./hooks"