@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.40

package/dist/components/audioPlayer/index.js

@@ -0,0 +1,130 @@
+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 component - used to play audio files with playback controls
+ *
+ * @param props - AudioPlayer component properties
+ * @param props.src - Audio source URL (required)
+ * @param props.disabled - Whether the audio player is disabled. Default: false
+ * @param props.onPlayAudio - Callback function called when audio starts playing
+ * @param props.onPauseAudio - Callback function called when audio is paused
+ *
+ * **...Other valid HTML audio properties**
+ *
+ * @returns AudioPlayer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic audio player
+ * <AudioPlayer src="/audio/sample.mp3" />
+ *
+ * // Audio player with callbacks
+ * <AudioPlayer
+ *   src="/audio/sample.mp3"
+ *   onPlayAudio={(info) => console.log('Playing:', info)}
+ *   onPauseAudio={(info) => console.log('Paused:', info)}
+ * />
+ *
+ * // Disabled audio player
+ * <AudioPlayer
+ *   src="/audio/sample.mp3"
+ *   disabled
+ * />
+ *
+ * // Audio player with additional HTML audio attributes
+ * <AudioPlayer
+ *   src="/audio/sample.mp3"
+ *   loop
+ *   preload="metadata"
+ *   onPlayAudio={(info) => {
+ *     console.log(`Current: ${info.formattedCurrentTime}`);
+ *     console.log(`Total: ${info.formattedTotalTime}`);
+ *   }}
+ * />
+ * ```
+ */
+function AudioPlayer(props) {
+    const { onPlayAudio, onPauseAudio, disabled, ...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;
+    const totalTime = audioReference.current?.duration;
+    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", 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.d.ts

@@ -0,0 +1,13 @@
+import "./styles.css";
+type HasFileContentProps = {
+    filePath: string;
+    disabled: boolean;
+    acceptAudio: string;
+    isLoading: boolean;
+    handleSelectFile: (file: File) => void;
+    reSendAudio?: () => void;
+    changeAudioButtonText: string;
+};
+declare function HasFileContent(props: HasFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { HasFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/hasFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audioUpload/hasFileContent/index.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA8DjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,26 @@
+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.d.ts

@@ -0,0 +1,82 @@
+import "./styles.css";
+type AudioUploadProps = {
+    name: string;
+    action: string;
+    fileName?: string;
+    method?: string;
+    acceptAudio?: string;
+    dropAudioText?: string;
+    selectAudioButtonText?: string;
+    changeAudioButtonText?: string;
+    onChange?: (url?: string) => void;
+    fileResponseName?: string;
+    label?: string;
+    showAsterisk?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+};
+/**
+ * AudioUpload component - handles audio file upload with drag & drop functionality and server upload
+ *
+ * @param props - AudioUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.action - Required server endpoint URL for file upload
+ * @param props.fileName - Name of the file field in FormData. Default: "file"
+ * @param props.method - HTTP method for upload request. Default: "POST"
+ * @param props.acceptAudio - Audio file types to accept. Default: "audio/*"
+ * @param props.dropAudioText - Text displayed in drop zone. Default: "Ou arraste e solte um arquivo de áudio aqui"
+ * @param props.selectAudioButtonText - Text for file selection button. Default: "Selecionar arquivo de áudio"
+ * @param props.changeAudioButtonText - Text for change file button. Default: "Trocar arquivo de áudio"
+ * @param props.onChange - Callback function called after successful upload with the file URL
+ * @param props.fileResponseName - Name of the URL field in server response. Default: "url"
+ * @param props.label - Optional label text to display above the upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.disabled - Whether the upload is disabled. Default: false
+ * @param props.defaultValue - Default audio URL value
+ *
+ * @returns AudioUpload JSX element with drag & drop zone or audio preview
+ *
+ * @example
+ * ```tsx
+ * // Basic audio upload
+ * <AudioUpload
+ *   name="audio"
+ *   action="/api/upload"
+ * />
+ *
+ * // Audio upload with label and custom texts
+ * <AudioUpload
+ *   name="podcast"
+ *   action="/api/upload/podcast"
+ *   label="Upload Podcast"
+ *   showAsterisk
+ *   selectAudioButtonText="Choose Audio File"
+ *   dropAudioText="Drop your audio file here"
+ *   changeAudioButtonText="Change Audio"
+ * />
+ *
+ * // Audio upload with callback and custom settings
+ * <AudioUpload
+ *   name="recording"
+ *   action="/api/upload"
+ *   label="Voice Recording"
+ *   acceptAudio="audio/mp3,audio/wav"
+ *   onChange={(url) => console.log('Uploaded:', url)}
+ *   fileResponseName="audioUrl"
+ *   fileName="recording"
+ *   method="PUT"
+ * />
+ *
+ * // Disabled audio upload with default value
+ * <AudioUpload
+ *   name="preview"
+ *   action="/api/upload"
+ *   disabled
+ *   defaultValue="/path/to/audio.mp3"
+ *   label="Audio Preview"
+ * />
+ * ```
+ */
+declare function AudioUpload(props: AudioUploadProps): import("react/jsx-runtime").JSX.Element;
+export { AudioUpload };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/audioUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyG3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/audioUpload/index.js

@@ -0,0 +1,120 @@
+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 component - handles audio file upload with drag & drop functionality and server upload
+ *
+ * @param props - AudioUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.action - Required server endpoint URL for file upload
+ * @param props.fileName - Name of the file field in FormData. Default: "file"
+ * @param props.method - HTTP method for upload request. Default: "POST"
+ * @param props.acceptAudio - Audio file types to accept. Default: "audio/*"
+ * @param props.dropAudioText - Text displayed in drop zone. Default: "Ou arraste e solte um arquivo de áudio aqui"
+ * @param props.selectAudioButtonText - Text for file selection button. Default: "Selecionar arquivo de áudio"
+ * @param props.changeAudioButtonText - Text for change file button. Default: "Trocar arquivo de áudio"
+ * @param props.onChange - Callback function called after successful upload with the file URL
+ * @param props.fileResponseName - Name of the URL field in server response. Default: "url"
+ * @param props.label - Optional label text to display above the upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.disabled - Whether the upload is disabled. Default: false
+ * @param props.defaultValue - Default audio URL value
+ *
+ * @returns AudioUpload JSX element with drag & drop zone or audio preview
+ *
+ * @example
+ * ```tsx
+ * // Basic audio upload
+ * <AudioUpload
+ *   name="audio"
+ *   action="/api/upload"
+ * />
+ *
+ * // Audio upload with label and custom texts
+ * <AudioUpload
+ *   name="podcast"
+ *   action="/api/upload/podcast"
+ *   label="Upload Podcast"
+ *   showAsterisk
+ *   selectAudioButtonText="Choose Audio File"
+ *   dropAudioText="Drop your audio file here"
+ *   changeAudioButtonText="Change Audio"
+ * />
+ *
+ * // Audio upload with callback and custom settings
+ * <AudioUpload
+ *   name="recording"
+ *   action="/api/upload"
+ *   label="Voice Recording"
+ *   acceptAudio="audio/mp3,audio/wav"
+ *   onChange={(url) => console.log('Uploaded:', url)}
+ *   fileResponseName="audioUrl"
+ *   fileName="recording"
+ *   method="PUT"
+ * />
+ *
+ * // Disabled audio upload with default value
+ * <AudioUpload
+ *   name="preview"
+ *   action="/api/upload"
+ *   disabled
+ *   defaultValue="/path/to/audio.mp3"
+ *   label="Audio Preview"
+ * />
+ * ```
+ */
+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.d.ts

@@ -0,0 +1,12 @@
+import "./styles.css";
+type NoFileContentProps = {
+    disabled: boolean;
+    acceptAudio: string;
+    isLoading: boolean;
+    selectAudioButtonText: string;
+    dropAudioText: string;
+    handleSelectFile: (file: File) => void;
+};
+declare function NoFileContent(props: NoFileContentProps): import("react/jsx-runtime").JSX.Element;
+export { NoFileContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/audioUpload/noFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/audioUpload/noFileContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAkD/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/{AudioUpload/NoFileContent → audioUpload/noFileContent}/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../button";
 import "./styles.css";
-import { Button } from "../../Button";
 function NoFileContent(props) {
     const { dropAudioText, isLoading, acceptAudio, handleSelectFile, selectAudioButtonText, disabled, } = props;
     function handleDrop(event) {

package/dist/components/badge/index.d.ts

@@ -0,0 +1,51 @@
+import { LucideIcon } from "lucide-react";
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type BadgeProps = HTMLAttributes<HTMLDivElement> & {
+    size?: "md" | "lg";
+    variant?: "solid" | "outline" | "ghost";
+    scheme?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+};
+/**
+ * Badge component - used to display labels, statuses, and categorizations
+ *
+ * @param props - Badge component properties
+ * @param props.size - Badge size. Default: "lg"
+ * @param props.variant - Visual variant of the badge. Default: "ghost"
+ * @param props.scheme - Badge color scheme. Default: "primary"
+ * @param props.leftIcon - Optional icon to display on the left
+ * @param props.rightIcon - Optional icon to display on the right
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns Badge JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * // Badge with color scheme
+ * <Badge scheme="success">Approved</Badge>
+ *
+ * // Badge with icons
+ * <Badge leftIcon={CheckIcon} scheme="success">
+ *  Completed
+ * </Badge>
+ *
+ * // Custom badge
+ * <Badge
+ *  size="lg"
+ *  variant="solid"
+ *  scheme="warning"
+ *  rightIcon={AlertIcon}
+ * >
+ *  Warning
+ * </Badge>
+ * ```
+ */
+declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,cAAc,CAAC;AAEtB,KAAK,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC7E,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAwB/B;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconRenderer } from "../../services/iconRenderer";
+import "./styles.css";
+/**
+ * Badge component - used to display labels, statuses, and categorizations
+ *
+ * @param props - Badge component properties
+ * @param props.size - Badge size. Default: "lg"
+ * @param props.variant - Visual variant of the badge. Default: "ghost"
+ * @param props.scheme - Badge color scheme. Default: "primary"
+ * @param props.leftIcon - Optional icon to display on the left
+ * @param props.rightIcon - Optional icon to display on the right
+ *
+ * **...Other valid HTML properties for div**
+ *
+ * @returns Badge JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * // Badge with color scheme
+ * <Badge scheme="success">Approved</Badge>
+ *
+ * // Badge with icons
+ * <Badge leftIcon={CheckIcon} scheme="success">
+ *  Completed
+ * </Badge>
+ *
+ * // Custom badge
+ * <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.d.ts

@@ -0,0 +1,60 @@
+import { LucideIcon } from "lucide-react";
+import { ButtonHTMLAttributes } from "react";
+import "./styles.css";
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    isLoading?: boolean;
+    loadingText?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "solid" | "outline" | "ghost" | "invisible";
+    scheme?: "primary" | "success" | "warning" | "danger" | "info";
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+};
+/**
+ * Button component - used for user interactions and form submissions
+ *
+ * @param props - Button component properties
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.loadingText - Text to display during loading state
+ * @param props.size - Button size. Default: "md"
+ * @param props.variant - Visual variant of the button. Default: "solid"
+ * @param props.scheme - Button color scheme. Default: "primary"
+ * @param props.leftIcon - Optional icon to display on the left
+ * @param props.rightIcon - Optional icon to display on the right
+ *
+ * **...Other valid HTML properties for button**
+ *
+ * @returns Button JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button>Click me</Button>
+ *
+ * // Button with color scheme
+ * <Button scheme="success">Save</Button>
+ *
+ * // Button with loading state
+ * <Button isLoading loadingText="Saving...">
+ *  Save
+ * </Button>
+ *
+ * // Button with icons
+ * <Button leftIcon={SaveIcon} scheme="success">
+ *  Save
+ * </Button>
+ *
+ * // Custom button
+ * <Button
+ *  size="lg"
+ *  variant="outline"
+ *  scheme="danger"
+ *  rightIcon={TrashIcon}
+ * >
+ *  Delete
+ * </Button>
+ * ```
+ */
+declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Button };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IACtD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuCjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,61 @@
+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 component - used for user interactions and form submissions
+ *
+ * @param props - Button component properties
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.loadingText - Text to display during loading state
+ * @param props.size - Button size. Default: "md"
+ * @param props.variant - Visual variant of the button. Default: "solid"
+ * @param props.scheme - Button color scheme. Default: "primary"
+ * @param props.leftIcon - Optional icon to display on the left
+ * @param props.rightIcon - Optional icon to display on the right
+ *
+ * **...Other valid HTML properties for button**
+ *
+ * @returns Button JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button>Click me</Button>
+ *
+ * // Button with color scheme
+ * <Button scheme="success">Save</Button>
+ *
+ * // Button with loading state
+ * <Button isLoading loadingText="Saving...">
+ *  Save
+ * </Button>
+ *
+ * // Button with icons
+ * <Button leftIcon={SaveIcon} scheme="success">
+ *  Save
+ * </Button>
+ *
+ * // Custom button
+ * <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 };