@arkyn/components 3.0.1-beta.153 → 3.0.1-beta.155

package/dist/components/alert/alertContent/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertContent — text/content area inside an `AlertContainer`. Wraps `AlertTitle` and `AlertDescription`.
- *
- * Accepts all standard `<div>` HTML attributes.
- *
- * @returns AlertContent JSX element.
- *
- * @example
- * ```tsx
- * <AlertContainer schema="warning">
- *   <AlertIcon />
- *   <AlertContent>
- *     <AlertTitle>Session expiring</AlertTitle>
- *     <AlertDescription>You will be logged out in 5 minutes.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-function AlertContent(props) {
-    const { className: baseClassName, ...rest } = props;
-    const className = `arkynAlertContent ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { AlertContent };

package/dist/components/alert/alertDescription/index.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertDescription — body text for an alert. Place inside `AlertContent`.
- *
- * Accepts all standard `<div>` HTML attributes.
- *
- * @returns AlertDescription JSX element.
- *
- * @example
- * ```tsx
- * <AlertContainer schema="info">
- *   <AlertContent>
- *     <AlertTitle>Maintenance scheduled</AlertTitle>
- *     <AlertDescription>The service will be unavailable on Sunday from 2–4 AM UTC.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-function AlertDescription(props) {
-    const { className: baseClassName, ...rest } = props;
-    const className = `arkynAlertDescription ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { AlertDescription };

package/dist/components/alert/alertIcon/index.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AlertTriangle, CheckCircle2, Info, XCircle, } from "lucide-react";
-import { useAlertContainer } from "../alertContainer";
-import "./styles.css";
-/**
- * AlertIcon — renders a schema-appropriate icon from `AlertContainer` context.
- *
- * - `success` → `CheckCircle2`
- * - `danger` → `XCircle`
- * - `warning` → `AlertTriangle`
- * - `info` → `Info`
- *
- * Must be placed inside an `AlertContainer`. Accepts all Lucide icon props.
- *
- * @returns The schema-matched Lucide icon element.
- *
- * @example
- * ```tsx
- * <AlertContainer schema="danger">
- *   <AlertIcon />
- *   <AlertContent>
- *     <AlertTitle>Payment failed</AlertTitle>
- *     <AlertDescription>Please check your card details.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-function AlertIcon(props) {
-    const { className: baseClassName, ...rest } = props;
-    const { schema } = useAlertContainer();
-    const className = `arkynAlertIcon ${schema} ${baseClassName}`;
-    switch (schema) {
-        case "success":
-            return _jsx(CheckCircle2, { className: className, ...rest });
-        case "danger":
-            return _jsx(XCircle, { className: className, ...rest });
-        case "warning":
-            return _jsx(AlertTriangle, { className: className, ...rest });
-        case "info":
-            return _jsx(Info, { className: className, ...rest });
-    }
-}
-export { AlertIcon };

package/dist/components/alert/alertTitle/index.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/**
- * AlertTitle — bold heading for an alert. Place inside `AlertContent`.
- *
- * Its presence is detected by `AlertContainer` to switch the layout from centered to left-aligned.
- * Accepts all standard `<div>` HTML attributes.
- *
- * @returns AlertTitle JSX element.
- *
- * @example
- * ```tsx
- * <AlertContainer schema="danger">
- *   <AlertIcon />
- *   <AlertContent>
- *     <AlertTitle>Access denied</AlertTitle>
- *     <AlertDescription>You don't have permission to view this page.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-function AlertTitle(props) {
-    const { className: baseClassName, ...rest } = props;
-    const className = `arkynAlertTitle ${baseClassName}`;
-    return _jsx("div", { className: className.trim(), ...rest });
-}
-export { AlertTitle };

package/dist/components/audioPlayer/index.js

@@ -1,112 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pause, Play } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useSlider } from "../../hooks/useSlider";
-import { Slider } from "../slider";
-import "./styles.css";
-/**
- * AudioPlayer — play/pause controls, a scrubable progress bar, and elapsed/total time display.
- *
- * @param props.src - Audio file URL. Required.
- * @param props.disabled - Disables controls. Default: false
- * @param props.onPlayAudio - Callback fired when playback starts.
- * @param props.onPauseAudio - Callback fired when playback is paused.
- *
- * **...Other valid HTML properties for `<audio>` (except `onEnded` and `src`)**
- *
- * @returns AudioPlayer JSX element.
- *
- * @example
- * ```tsx
- * // Basic
- * <AudioPlayer src="/audio/episode.mp3" />
- *
- * // With play/pause callbacks
- * <AudioPlayer
- *   src="/audio/episode.mp3"
- *   onPlayAudio={(info) => console.log("Playing at", info.formattedCurrentTime)}
- *   onPauseAudio={(info) => console.log("Paused at", info.formattedCurrentTime)}
- * />
- * ```
- */
-function AudioPlayer(props) {
-    const { onPlayAudio, onPauseAudio, disabled, style, ...rest } = props;
-    const [sliderValue, setSliderValue] = useSlider(0);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [isDragging, setIsDragging] = useState(false);
-    const audioReference = useRef(null);
-    const currentTime = audioReference.current?.currentTime || 0;
-    const totalTime = audioReference.current?.duration || 0;
-    const formattedCurrentTime = formatTime(currentTime);
-    const formattedTotalTime = formatTime(totalTime);
-    const audioInformation = {
-        totalTime,
-        currentTime,
-        formattedCurrentTime,
-        formattedTotalTime,
-    };
-    function formatTime(time) {
-        if (!time)
-            return "00:00";
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60);
-        const formattedMinutes = String(minutes).padStart(2, "0");
-        const formattedSeconds = String(seconds).padStart(2, "0");
-        return `${formattedMinutes}:${formattedSeconds}`;
-    }
-    function handlePlayAudio() {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        if (props.onPlayAudio)
-            props.onPlayAudio(audioInformation);
-        audioElement.play();
-        setIsPlaying(true);
-    }
-    function handlePauseAudio() {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        if (props.onPauseAudio)
-            props.onPauseAudio(audioInformation);
-        audioElement.pause();
-        setIsPlaying(false);
-    }
-    function handleToggleAudio() {
-        if (isPlaying)
-            handlePauseAudio();
-        else
-            handlePlayAudio();
-    }
-    function handleSliderChange(value) {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        const totalTime = audioElement.duration;
-        const currentTime = (value / 100) * totalTime;
-        audioElement.currentTime = currentTime;
-    }
-    if (isDragging || !isPlaying) {
-        audioReference.current?.pause();
-    }
-    else if (isPlaying) {
-        audioReference.current?.play();
-    }
-    useEffect(() => {
-        const audioElement = audioReference.current;
-        if (!audioElement)
-            return;
-        const handleTimeUpdate = () => {
-            const totalTime = audioElement.duration;
-            const currentTime = audioElement.currentTime;
-            const value = (currentTime / totalTime) * 100;
-            setSliderValue(value);
-        };
-        audioElement.addEventListener("timeupdate", handleTimeUpdate);
-        return () => {
-            audioElement.removeEventListener("timeupdate", handleTimeUpdate);
-        };
-    }, []);
-    return (_jsxs("div", { className: "arkynAudioPlayer", style: style, children: [_jsx("audio", { ...rest, ref: audioReference, src: props.src, onEnded: handlePauseAudio }), _jsxs("button", { type: "button", disabled: disabled, onClick: handleToggleAudio, children: [isPlaying && _jsx(Pause, {}), !isPlaying && _jsx(Play, {})] }), _jsx("p", { children: formattedCurrentTime }), _jsx(Slider, { value: sliderValue, onChange: handleSliderChange, onDragging: setIsDragging, disabled: disabled }), _jsx("p", { children: formattedTotalTime })] }));
-}
-export { AudioPlayer };

package/dist/components/audioUpload/hasFileContent/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { RefreshCw } from "lucide-react";
-import { AudioPlayer } from "../../audioPlayer";
-import { Button } from "../../button";
-import { Divider } from "../../divider";
-import { IconButton } from "../../iconButton";
-import { Tooltip } from "../../tooltip";
-import "./styles.css";
-function HasFileContent(props) {
-    const { filePath, disabled, acceptAudio, handleSelectFile, isLoading, reSendAudio, changeAudioButtonText, } = props;
-    function handleClick() {
-        if (disabled)
-            return;
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = acceptAudio;
-        input.onchange = (event) => {
-            const file = event.target.files?.[0];
-            if (file)
-                handleSelectFile(file);
-        };
-        input.click();
-    }
-    return (_jsxs("div", { className: "arkynAudioUploadHasFileContentContainer", children: [_jsx(AudioPlayer, { src: filePath }), _jsx(Divider, {}), _jsxs("div", { className: "arkynAudioUploadButtonsContainer", children: [!!reSendAudio && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar \u00E1udio", children: _jsx(IconButton, { type: "button", "aria-label": "resend image", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendAudio, icon: RefreshCw, disabled: disabled }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", disabled: disabled, children: changeAudioButtonText })] })] }));
-}
-export { HasFileContent };

package/dist/components/audioUpload/index.js

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import { FieldWrapper } from "../fieldWrapper";
-import { HasFileContent } from "./hasFileContent";
-import { NoFileContent } from "./noFileContent";
-import "./styles.css";
-/**
- * AudioUpload — drag-and-drop audio file uploader with server upload and playback preview.
- *
- * Sends the file via `fetch` as `multipart/form-data` and stores the returned URL
- * in a hidden `<input>` for form submission.
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.action - Upload endpoint URL. Required.
- * @param props.fileName - Form-data field name for the file. Default: "file"
- * @param props.method - HTTP method. Default: "POST"
- * @param props.acceptAudio - Accepted MIME types / extensions. Default: "audio/*"
- * @param props.onChange - Callback fired after a successful upload — receives the audio URL.
- * @param props.fileResponseName - Server response property containing the URL. Default: "url"
- * @param props.label - Label text displayed above the upload area.
- * @param props.showAsterisk - Appends `*` to the label. Default: false
- * @param props.disabled - Disables file selection and upload. Default: false
- * @param props.defaultValue - Pre-populated audio URL.
- *
- * @returns AudioUpload JSX element wrapped in `FieldWrapper`.
- *
- * @example
- * ```tsx
- * // Basic
- * <AudioUpload name="audio" action="/api/upload" />
- *
- * // With label and custom texts
- * <AudioUpload
- *   name="podcast"
- *   action="/api/upload/podcast"
- *   label="Podcast Episode"
- *   showAsterisk
- *   selectAudioButtonText="Choose audio file"
- *   onChange={(url) => setPodcastUrl(url)}
- * />
- * ```
- */
-function AudioUpload(props) {
-    const { name, label, fileName = "file", method = "POST", onChange, fileResponseName = "url", selectAudioButtonText = "Selecionar arquivo de áudio", dropAudioText = "Ou arraste e solte um arquivo de áudio aqui", changeAudioButtonText = "Trocar arquivo de áudio", acceptAudio = "audio/*", action, defaultValue = "", showAsterisk = false, disabled = false, } = props;
-    const { fieldErrors } = useForm();
-    const fieldError = fieldErrors?.[name];
-    const [value, setValue] = useState(defaultValue);
-    const [error, setError] = useState("");
-    const [file, setFile] = useState(null);
-    const [filePath, setFilePath] = useState(defaultValue);
-    const [isLoading, setIsLoading] = useState(false);
-    async function handleUploadAudio(file) {
-        if (disabled)
-            return;
-        setIsLoading(true);
-        setFile(file);
-        setError("");
-        const formData = new FormData();
-        formData.append(fileName, file);
-        await fetch(action, { method: method, body: formData })
-            .then(async (response) => await response.json())
-            .then((response) => {
-            if (!!response?.error)
-                setError(response.error);
-            else
-                setValue(response?.[fileResponseName]);
-            onChange && onChange(response?.[fileResponseName]);
-        })
-            .catch((error) => {
-            console.error(error);
-            setError("Erro ao enviar audio");
-        })
-            .finally(() => setIsLoading(false));
-    }
-    function handleSelectFile(file) {
-        if (disabled)
-            return;
-        if (file.type.indexOf("audio") === -1) {
-            setError("O arquivo selecionado não é um arquivo de áudio");
-            return;
-        }
-        setFilePath(URL.createObjectURL(file));
-        handleUploadAudio(file);
-    }
-    const errorMessage = fieldError || error;
-    const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
-    const hasImageClassName = filePath ? "hasAudio" : "noHasAudio";
-    const className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;
-    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs("div", { className: className, children: [_jsx("input", { type: "hidden", name: name, value: value || "" }), !filePath && (_jsx(NoFileContent, { disabled: disabled, isLoading: isLoading, acceptAudio: acceptAudio, dropAudioText: dropAudioText, handleSelectFile: handleSelectFile, selectAudioButtonText: selectAudioButtonText })), filePath && (_jsx(HasFileContent, { filePath: filePath, acceptAudio: acceptAudio, changeAudioButtonText: changeAudioButtonText, disabled: disabled, handleSelectFile: handleSelectFile, isLoading: isLoading, reSendAudio: !!errorMessage && file ? () => handleUploadAudio(file) : undefined }))] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
-}
-export { AudioUpload };

package/dist/components/audioUpload/noFileContent/index.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "../../button";
-import "./styles.css";
-function NoFileContent(props) {
-    const { dropAudioText, isLoading, acceptAudio, handleSelectFile, selectAudioButtonText, disabled, } = props;
-    function handleDrop(event) {
-        if (disabled)
-            return;
-        event.preventDefault();
-        const file = event.dataTransfer.files[0];
-        if (file)
-            handleSelectFile(file);
-    }
-    function handleClick() {
-        if (disabled)
-            return;
-        const input = document.createElement("input");
-        input.type = "file";
-        input.accept = acceptAudio;
-        input.onchange = (event) => {
-            const file = event.target.files?.[0];
-            if (file)
-                handleSelectFile(file);
-        };
-        input.click();
-    }
-    return (_jsxs("div", { onDrop: handleDrop, className: "arkynAudioUploadNoFileContent", children: [_jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "ghost", size: "sm", type: "button", disabled: disabled, children: selectAudioButtonText }), _jsx("p", { children: dropAudioText })] }));
-}
-export { NoFileContent };

package/dist/components/badge/index.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconRenderer } from "../../services/iconRenderer";
-import "./styles.css";
-/**
- * Badge — displays labels, statuses, and categorization tags.
- *
- * @param props.size - Badge size (`md` | `lg`). Default: "lg"
- * @param props.variant - Visual style variant. Default: "ghost"
- * @param props.scheme - Color scheme. Default: "primary"
- * @param props.leftIcon - Lucide icon rendered to the left of the label.
- * @param props.rightIcon - Lucide icon rendered to the right of the label.
- *
- * **...Other valid HTML properties for `<div>`**
- *
- * @returns Badge JSX element.
- *
- * @example
- * ```tsx
- * // Basic badge
- * <Badge>New</Badge>
- *
- * // With color scheme
- * <Badge scheme="success">Approved</Badge>
- *
- * // With icon
- * <Badge leftIcon={CheckIcon} scheme="success">Completed</Badge>
- *
- * // Custom size, variant and scheme
- * <Badge size="lg" variant="solid" scheme="warning" rightIcon={AlertIcon}>
- *   Warning
- * </Badge>
- * ```
- */
-function Badge(props) {
-    const { variant = "ghost", scheme = "primary", size = "lg", leftIcon, rightIcon, className: baseClassName = "", children, ...rest } = props;
-    const iconSizes = { md: 12, lg: 14 };
-    const iconSize = iconSizes[size];
-    const className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;
-    return (_jsxs("div", { className: className.trim(), ...rest, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: leftIcon }), _jsx("p", { children: children }), _jsx(IconRenderer, { iconSize: iconSize, icon: rightIcon })] }));
-}
-export { Badge };

package/dist/components/button/index.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Loader2 } from "lucide-react";
-import { IconRenderer } from "../../services/iconRenderer";
-import "./styles.css";
-/**
- * Button — used for user interactions and form submissions.
- *
- * @param props.isLoading - Shows a spinner and disables the button. Default: false
- * @param props.loadingText - Text displayed beside the spinner when loading.
- * @param props.size - Button size (`xs` | `sm` | `md` | `lg`). Default: "md"
- * @param props.variant - Visual style variant. Default: "solid"
- * @param props.scheme - Color scheme. Default: "primary"
- * @param props.leftIcon - Lucide icon rendered to the left of the label.
- * @param props.rightIcon - Lucide icon rendered to the right of the label.
- *
- * **...Other valid HTML properties for `<button>`**
- *
- * @returns Button JSX element.
- *
- * @example
- * ```tsx
- * // Basic button
- * <Button>Click me</Button>
- *
- * // With color scheme
- * <Button scheme="success">Save</Button>
- *
- * // With loading state
- * <Button isLoading loadingText="Saving...">Save</Button>
- *
- * // With icons
- * <Button leftIcon={SaveIcon} scheme="success">Save</Button>
- *
- * // Custom size, variant and scheme
- * <Button size="lg" variant="outline" scheme="danger" rightIcon={TrashIcon}>
- *   Delete
- * </Button>
- * ```
- */
-function Button(props) {
-    const { isLoading = false, scheme = "primary", variant = "solid", loadingText, size = "md", leftIcon, rightIcon, disabled, className: baseClassName = "", children, ...rest } = props;
-    const iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };
-    const iconSize = iconSizes[size];
-    const loadingClass = isLoading ? "loadingTrue" : "loadingFalse";
-    const loadingTextClass = !!loadingText
-        ? "loadingTextTrue"
-        : "loadingTextFalse";
-    const className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;
-    return (_jsxs("button", { className: className, disabled: disabled || isLoading, ...rest, children: [_jsxs("div", { className: "arkynButtonSpinner", children: [_jsx(Loader2, { size: iconSize, strokeWidth: 2.5 }), loadingText && loadingText] }), _jsxs("div", { className: "arkynButtonContent", children: [_jsx(IconRenderer, { iconSize: iconSize, icon: leftIcon }), children, _jsx(IconRenderer, { iconSize: iconSize, icon: rightIcon })] })] }));
-}
-export { Button };

package/dist/components/calendar/_calendarProvider.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
-import { ViewService } from "./_viewService";
-const CalendarContext = createContext({});
-function useCalendar() {
-    return useContext(CalendarContext);
-}
-function CalendarProvider(props) {
-    const { calendarType, children, defaultValue: rawDefaultValue, defaultViewValue = new Date(), language = "pt-BR", onChange, onChangeView, value, viewValue, } = props;
-    const defaultValue = calendarType === "single"
-        ? [rawDefaultValue || new Date(), rawDefaultValue || new Date()]
-        : rawDefaultValue || [new Date(), new Date()];
-    const [rawViewDate, rawSetViewDate] = useState(defaultViewValue);
-    const [rawValueDate, rawSetValueDate] = useState(defaultValue);
-    const viewDate = viewValue || rawViewDate;
-    const valueDate = value
-        ? calendarType === "single"
-            ? [value, value]
-            : value
-        : rawValueDate;
-    const viewService = new ViewService();
-    function setValueDate(value) {
-        const normalizedValue = [
-            new Date(value[0]),
-            new Date(value[1]),
-        ];
-        if (onChange && calendarType === "range") {
-            onChange(normalizedValue);
-        }
-        if (onChange && calendarType === "single") {
-            onChange(normalizedValue[0]);
-        }
-        rawSetValueDate(normalizedValue);
-    }
-    function setViewDate(date) {
-        if (onChangeView)
-            onChangeView(date);
-        rawSetViewDate(date);
-    }
-    return (_jsx(CalendarContext.Provider, { value: {
-            valueDate,
-            viewDate,
-            currentDate: viewDate.toLocaleDateString(language).slice(3),
-            currentDay: viewService.currentDay(viewDate),
-            currentMonth: viewService.currentMonth(viewDate),
-            currentYear: viewService.currentYear(viewDate),
-            listWeek: viewService.listWeek(language),
-            listMonths: viewService.listMonths(viewDate, language),
-            listYears: viewService.listYears(100),
-            listMatrix: viewService.listMatrix(viewDate, valueDate),
-            changeDay: (day, month, year) => viewService.changeDay(day, month, year, calendarType, valueDate, setValueDate, setViewDate),
-            changeMonth: (month) => viewService.changeMonth(month, viewDate, setViewDate),
-            changeYear: (year) => viewService.changeYear(year, viewDate, setViewDate),
-            nextMonth: () => viewService.nextMonth(viewDate, setViewDate),
-            previousMonth: () => viewService.previousMonth(viewDate, setViewDate),
-        }, children: children }));
-}
-export { CalendarProvider, useCalendar };