@arkyn/components 3.0.1-beta.5 → 3.0.1-beta.50

package/dist/components/iconButton/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import "./styles.css";
+/**
+ * IconButton component - compact button that renders only an icon
+ *
+ * @param props - IconButton component properties
+ * @param props.icon - Icon to render inside the button (LucideIcon). Required
+ * @param props.aria-label - Accessible label for screen readers. Required
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @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"
+ *
+ * **...Other valid HTML properties for button element (children not supported)**
+ *
+ * @returns IconButton JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic icon button
+ * <IconButton icon={Plus} aria-label="Add" />
+ *
+ * // Different color scheme and variant
+ * <IconButton icon={Trash2} aria-label="Delete" scheme="danger" variant="outline" />
+ *
+ * // Loading state
+ * <IconButton icon={Save} aria-label="Saving" isLoading />
+ *
+ * // Sizes
+ * <IconButton icon={MoreVertical} aria-label="More options" size="sm" />
+ * ```
+ */
+function IconButton(props) {
+    const { isLoading = false, scheme = "primary", variant = "solid", size = "md", icon: Icon, disabled, className: baseClassName = "", ...rest } = props;
+    const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
+    const loading = isLoading ? "loadingTrue" : "loadingFalse";
+    const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
+    return (_jsxs("button", { disabled: disabled || isLoading, className: className.trim(), ...rest, children: [_jsx("div", { className: "arkynIconButtonSpinner", children: _jsx(Loader2, { size: iconSize[size], strokeWidth: 2.5 }) }), _jsx("div", { className: "arkynIconButtonContent", children: _jsx(Icon, { size: iconSize[size], strokeWidth: 2.5 }) })] }));
+}
+export { IconButton };

package/dist/components/imageUpload/hasFileContent/index.d.ts

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

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

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

package/dist/components/{ImageUpload/HasFileContent → imageUpload/hasFileContent}/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RefreshCw } from "lucide-react";
-import { Button } from "../../Button";
-import { IconButton } from "../../IconButton";
-import { Tooltip } from "../../Tooltip";
+import { Button } from "../../button";
+import { IconButton } from "../../iconButton";
+import { Tooltip } from "../../tooltip";
 import "./styles.css";
 function HasFileContent(props) {
     const { disabled, filePath, isLoading, acceptImage, changeImageButtonText, handleSelectFile, reSendImage, } = props;

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

@@ -0,0 +1,114 @@
+import "./styles.css";
+type ImageUploadProps = {
+    name: string;
+    action: string;
+    defaultValue?: string | null;
+    disabled?: boolean;
+    label?: string;
+    showAsterisk?: boolean;
+    changeImageButtonText?: string;
+    selectImageButtonText?: string;
+    dropImageText?: string;
+    method?: string;
+    fileName?: string;
+    fileResponseName?: string;
+    acceptImage?: string;
+    onChange?: (url?: string) => void;
+};
+/**
+ * ImageUpload component - specialized file upload component for image files with preview functionality
+ *
+ * @param props - ImageUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.defaultValue - Initial image URL to display as preview. Default: ""
+ * @param props.disabled - Whether the image upload is disabled. Default: false
+ * @param props.label - Optional label text to display above the image upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.changeImageButtonText - Text for the button to change/replace an uploaded image. Default: "Alterar imagem"
+ * @param props.selectImageButtonText - Text for the button to select an image. Default: "Selecionar imagem"
+ * @param props.dropImageText - Text displayed in the drop zone area. Default: "Ou arraste e solte a imagem aqui"
+ * @param props.action - Required endpoint URL where the image will be uploaded
+ * @param props.method - HTTP method for the upload request. Default: "POST"
+ * @param props.fileName - Form data field name for the image file. Default: "file"
+ * @param props.fileResponseName - Property name in the response object containing the image URL. Default: "url"
+ * @param props.acceptImage - Image file types accepted by the input (e.g., "image/*", ".jpg,.png"). Default: "image/*"
+ * @param props.onChange - Callback function called when image upload completes successfully, receives the image URL
+ *
+ * @returns ImageUpload JSX element wrapped in FieldGroup with optional label, image preview, and error handling
+ *
+ * @example
+ * ```tsx
+ * // Basic image upload
+ * <ImageUpload
+ *   name="avatar"
+ *   action="/api/upload/image"
+ * />
+ *
+ * // Image upload with label and custom text
+ * <ImageUpload
+ *   name="profilePicture"
+ *   action="/api/upload/avatar"
+ *   label="Profile Picture"
+ *   showAsterisk
+ *   selectImageButtonText="Choose Photo"
+ *   changeImageButtonText="Change Photo"
+ *   dropImageText="Drop your photo here"
+ * />
+ *
+ * // Image upload with default value and restrictions
+ * <ImageUpload
+ *   name="productImage"
+ *   action="/api/upload/product"
+ *   label="Product Image"
+ *   defaultValue="https://example.com/default-image.jpg"
+ *   acceptImage=".jpg,.jpeg,.png,.webp"
+ *   fileName="productImage"
+ *   fileResponseName="imageUrl"
+ *   onChange={(url) => console.log('Image uploaded:', url)}
+ * />
+ *
+ * // Disabled image upload with existing image
+ * <ImageUpload
+ *   name="banner"
+ *   action="/api/upload/banner"
+ *   label="Banner Image"
+ *   defaultValue="https://example.com/banner.jpg"
+ *   disabled
+ * />
+ *
+ * // Image upload with custom HTTP method and response handling
+ * <ImageUpload
+ *   name="gallery"
+ *   action="/api/images"
+ *   method="PUT"
+ *   fileName="galleryImage"
+ *   fileResponseName="imageUrl"
+ *   label="Gallery Image"
+ *   acceptImage="image/jpeg,image/png"
+ *   onChange={(url) => {
+ *     if (url) {
+ *       setImageUrl(url);
+ *       console.log('Upload successful:', url);
+ *     }
+ *   }}
+ * />
+ *
+ * // Image upload for user avatar with form integration
+ * <ImageUpload
+ *   name="userAvatar"
+ *   action="/api/users/avatar"
+ *   label="User Avatar"
+ *   showAsterisk
+ *   defaultValue={user?.avatarUrl}
+ *   selectImageButtonText="Select Avatar"
+ *   changeImageButtonText="Update Avatar"
+ *   dropImageText="Drop avatar image here"
+ *   onChange={(avatarUrl) => {
+ *     updateUserProfile({ avatarUrl });
+ *   }}
+ * />
+ * ```
+ */
+declare function ImageUpload(props: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+export { ImageUpload };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/imageUpload/index.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAoG3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/imageUpload/index.js

@@ -0,0 +1,148 @@
+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";
+/**
+ * ImageUpload component - specialized file upload component for image files with preview functionality
+ *
+ * @param props - ImageUpload component properties
+ * @param props.name - Required field name for form handling
+ * @param props.defaultValue - Initial image URL to display as preview. Default: ""
+ * @param props.disabled - Whether the image upload is disabled. Default: false
+ * @param props.label - Optional label text to display above the image upload area
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields. Default: false
+ * @param props.changeImageButtonText - Text for the button to change/replace an uploaded image. Default: "Alterar imagem"
+ * @param props.selectImageButtonText - Text for the button to select an image. Default: "Selecionar imagem"
+ * @param props.dropImageText - Text displayed in the drop zone area. Default: "Ou arraste e solte a imagem aqui"
+ * @param props.action - Required endpoint URL where the image will be uploaded
+ * @param props.method - HTTP method for the upload request. Default: "POST"
+ * @param props.fileName - Form data field name for the image file. Default: "file"
+ * @param props.fileResponseName - Property name in the response object containing the image URL. Default: "url"
+ * @param props.acceptImage - Image file types accepted by the input (e.g., "image/*", ".jpg,.png"). Default: "image/*"
+ * @param props.onChange - Callback function called when image upload completes successfully, receives the image URL
+ *
+ * @returns ImageUpload JSX element wrapped in FieldGroup with optional label, image preview, and error handling
+ *
+ * @example
+ * ```tsx
+ * // Basic image upload
+ * <ImageUpload
+ *   name="avatar"
+ *   action="/api/upload/image"
+ * />
+ *
+ * // Image upload with label and custom text
+ * <ImageUpload
+ *   name="profilePicture"
+ *   action="/api/upload/avatar"
+ *   label="Profile Picture"
+ *   showAsterisk
+ *   selectImageButtonText="Choose Photo"
+ *   changeImageButtonText="Change Photo"
+ *   dropImageText="Drop your photo here"
+ * />
+ *
+ * // Image upload with default value and restrictions
+ * <ImageUpload
+ *   name="productImage"
+ *   action="/api/upload/product"
+ *   label="Product Image"
+ *   defaultValue="https://example.com/default-image.jpg"
+ *   acceptImage=".jpg,.jpeg,.png,.webp"
+ *   fileName="productImage"
+ *   fileResponseName="imageUrl"
+ *   onChange={(url) => console.log('Image uploaded:', url)}
+ * />
+ *
+ * // Disabled image upload with existing image
+ * <ImageUpload
+ *   name="banner"
+ *   action="/api/upload/banner"
+ *   label="Banner Image"
+ *   defaultValue="https://example.com/banner.jpg"
+ *   disabled
+ * />
+ *
+ * // Image upload with custom HTTP method and response handling
+ * <ImageUpload
+ *   name="gallery"
+ *   action="/api/images"
+ *   method="PUT"
+ *   fileName="galleryImage"
+ *   fileResponseName="imageUrl"
+ *   label="Gallery Image"
+ *   acceptImage="image/jpeg,image/png"
+ *   onChange={(url) => {
+ *     if (url) {
+ *       setImageUrl(url);
+ *       console.log('Upload successful:', url);
+ *     }
+ *   }}
+ * />
+ *
+ * // Image upload for user avatar with form integration
+ * <ImageUpload
+ *   name="userAvatar"
+ *   action="/api/users/avatar"
+ *   label="User Avatar"
+ *   showAsterisk
+ *   defaultValue={user?.avatarUrl}
+ *   selectImageButtonText="Select Avatar"
+ *   changeImageButtonText="Update Avatar"
+ *   dropImageText="Drop avatar image here"
+ *   onChange={(avatarUrl) => {
+ *     updateUserProfile({ avatarUrl });
+ *   }}
+ * />
+ * ```
+ */
+function ImageUpload(props) {
+    const { name, defaultValue = "", label, showAsterisk = false, action, fileName = "file", method = "POST", acceptImage = "image/*", fileResponseName = "url", changeImageButtonText = "Alterar imagem", selectImageButtonText = "Selecionar imagem", dropImageText = "Ou arraste e solte a imagem aqui", onChange, 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 handleUploadImage(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 imagem");
+        })
+            .finally(() => setIsLoading(false));
+    }
+    function handleSelectFile(file) {
+        if (disabled)
+            return;
+        setFilePath(URL.createObjectURL(file));
+        handleUploadImage(file);
+    }
+    const errorMessage = fieldError || error;
+    const hasErrorClassName = errorMessage ? "hasError" : "noHasError";
+    const hasImageClassName = filePath ? "hasImage" : "noHasImage";
+    const className = `arkynImageUpload ${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, acceptImage: acceptImage, dropImageText: dropImageText, handleSelectFile: handleSelectFile, selectImageButtonText: selectImageButtonText })), filePath && (_jsx(HasFileContent, { disabled: disabled, isLoading: isLoading, acceptImage: acceptImage, filePath: filePath, handleSelectFile: handleSelectFile, changeImageButtonText: changeImageButtonText, reSendImage: !!errorMessage && file ? () => handleUploadImage(file) : undefined }))] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { ImageUpload };

package/dist/components/imageUpload/noFileContent/index.d.ts

@@ -0,0 +1,12 @@
+import "./styles.css";
+type NoFileContentProps = {
+    disabled: boolean;
+    acceptImage: string;
+    isLoading: boolean;
+    selectImageButtonText: string;
+    dropImageText: 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/imageUpload/noFileContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/imageUpload/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/{ImageUpload/NoFileContent → imageUpload/noFileContent}/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "../../Button";
+import { Button } from "../../button";
 import "./styles.css";
 function NoFileContent(props) {
     const { dropImageText, isLoading, acceptImage, handleSelectFile, selectImageButtonText, disabled, } = props;

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

@@ -0,0 +1,81 @@
+import { LucideIcon } from "lucide-react";
+import { InputHTMLAttributes } from "react";
+import "./style.css";
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name"> & {
+    name: string;
+    label?: string;
+    errorMessage?: string;
+    isLoading?: boolean;
+    size?: "md" | "lg";
+    variant?: "solid" | "outline" | "underline";
+    prefix?: string | LucideIcon;
+    suffix?: string | LucideIcon;
+    showAsterisk?: boolean;
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+};
+/**
+ * Input component - used for text input fields with support for labels, validation, icons, and loading states
+ *
+ * @param props - Input component properties
+ * @param props.name - Required field name for form handling
+ * @param props.label - Optional label text to display above the input
+ * @param props.errorMessage - Error message to display below the input
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.size - Input size. Default: "md"
+ * @param props.variant - Visual variant of the input. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the input
+ * @param props.suffix - Text or icon to display at the end of the input
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.leftIcon - Optional icon to display on the left side
+ * @param props.rightIcon - Optional icon to display on the right side
+ *
+ * **...Other valid HTML properties for input element**
+ *
+ * @returns Input JSX element wrapped in FieldGroup with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input name="username" placeholder="Enter username" />
+ *
+ * // Input with label and validation
+ * <Input
+ *   name="email"
+ *   label="Email Address"
+ *   type="email"
+ *   showAsterisk
+ *   errorMessage="Please enter a valid email"
+ * />
+ *
+ * // Input with icons and loading state
+ * <Input
+ *   name="search"
+ *   label="Search"
+ *   leftIcon={SearchIcon}
+ *   rightIcon={FilterIcon}
+ *   isLoading
+ * />
+ *
+ * // Input with prefix/suffix
+ * <Input
+ *   name="website"
+ *   label="Website"
+ *   prefix="https://"
+ *   suffix=".com"
+ *   variant="outline"
+ * />
+ *
+ * // Large input with underline variant
+ * <Input
+ *   name="title"
+ *   label="Article Title"
+ *   size="lg"
+ *   variant="underline"
+ *   placeholder="Enter article title"
+ * />
+ * ```
+ */
+declare function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
+export { Input };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EACL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AASf,OAAO,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,IAAI,CACpB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,QAAQ,GAAG,MAAM,CAC3B,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAE5C,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAEH,iBAAS,KAAK,CAAC,KAAK,EAAE,UAAU,2CAkI/B;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import { useId, useRef, useState, } from "react";
+import { useForm } from "../../hooks/useForm";
+import { IconRenderer } from "../../services/iconRenderer";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import "./style.css";
+/**
+ * Input component - used for text input fields with support for labels, validation, icons, and loading states
+ *
+ * @param props - Input component properties
+ * @param props.name - Required field name for form handling
+ * @param props.label - Optional label text to display above the input
+ * @param props.errorMessage - Error message to display below the input
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.size - Input size. Default: "md"
+ * @param props.variant - Visual variant of the input. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the input
+ * @param props.suffix - Text or icon to display at the end of the input
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.leftIcon - Optional icon to display on the left side
+ * @param props.rightIcon - Optional icon to display on the right side
+ *
+ * **...Other valid HTML properties for input element**
+ *
+ * @returns Input JSX element wrapped in FieldGroup with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input name="username" placeholder="Enter username" />
+ *
+ * // Input with label and validation
+ * <Input
+ *   name="email"
+ *   label="Email Address"
+ *   type="email"
+ *   showAsterisk
+ *   errorMessage="Please enter a valid email"
+ * />
+ *
+ * // Input with icons and loading state
+ * <Input
+ *   name="search"
+ *   label="Search"
+ *   leftIcon={SearchIcon}
+ *   rightIcon={FilterIcon}
+ *   isLoading
+ * />
+ *
+ * // Input with prefix/suffix
+ * <Input
+ *   name="website"
+ *   label="Website"
+ *   prefix="https://"
+ *   suffix=".com"
+ *   variant="outline"
+ * />
+ *
+ * // Large input with underline variant
+ * <Input
+ *   name="title"
+ *   label="Article Title"
+ *   size="lg"
+ *   variant="underline"
+ *   placeholder="Enter article title"
+ * />
+ * ```
+ */
+function Input(props) {
+    const { name, disabled, title, style, variant = "solid", label, className: baseClassName = "", prefix, suffix, isLoading = false, leftIcon, readOnly, onFocus, onBlur, errorMessage: baseErrorMessage, showAsterisk, rightIcon, type = "text", size = "md", id, ...rest } = props;
+    const { fieldErrors } = useForm();
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const inputId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const isDisabled = disabled || isLoading;
+    const iconSizes = { md: 20, lg: 20 };
+    const iconSize = iconSizes[size];
+    const loadingPosition = rightIcon ? "right" : "left";
+    const showLeftSpinner = loadingPosition === "left" && isLoading;
+    const showRightSpinner = loadingPosition === "right" && isLoading;
+    function handleSectionClick() {
+        if (isDisabled || !inputRef?.current)
+            return;
+        setIsFocused(true);
+        inputRef.current.focus();
+    }
+    function handleFocus(e) {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus(e);
+    }
+    function handleBlur(e) {
+        setIsFocused(false);
+        if (onBlur)
+            onBlur(e);
+    }
+    if (type === "hidden") {
+        return (_jsx("input", { style: { display: "none" }, readOnly: true, type: "text", ref: inputRef, ...rest }));
+    }
+    const hasPrefix = !!prefix ? "hasPrefix" : "";
+    const hasSuffix = !!suffix ? "hasSuffix" : "";
+    const errored = isError ? "errored" : "";
+    const opacity = isDisabled || readOnly || isLoading ? "opacity" : "";
+    const focused = isFocused ? "focused" : "";
+    const className = `arkynInput ${hasPrefix} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, htmlFor: inputId, children: label })), _jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [_jsx(IconRenderer, { iconSize: iconSize, icon: prefix, className: "prefix" }), _jsx(IconRenderer, { show: showLeftSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { show: !isLoading, icon: leftIcon, iconSize: iconSize }), _jsx("input", { disabled: isDisabled, readOnly: readOnly, ref: inputRef, onFocus: handleFocus, onBlur: handleBlur, type: type, id: inputId, name: name, ...rest }), _jsx(IconRenderer, { show: !isLoading, icon: rightIcon, iconSize: iconSize }), _jsx(IconRenderer, { show: showRightSpinner, iconSize: iconSize, className: "spinner", icon: Loader2 }), _jsx(IconRenderer, { iconSize: iconSize, icon: suffix, className: "suffix" })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { Input };

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

@@ -0,0 +1,103 @@
+import { type Replacement } from "@react-input/mask";
+import { LucideIcon } from "lucide-react";
+import { InputHTMLAttributes } from "react";
+import "./style.css";
+type MaskedInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "name" | "type"> & {
+    name: string;
+    mask: string;
+    replacement: string | Replacement;
+    separate?: boolean;
+    showMask?: boolean;
+    label?: string;
+    errorMessage?: string;
+    isLoading?: boolean;
+    size?: "md" | "lg";
+    variant?: "solid" | "outline" | "underline";
+    prefix?: string | LucideIcon;
+    suffix?: string | LucideIcon;
+    showAsterisk?: boolean;
+    leftIcon?: LucideIcon;
+    rightIcon?: LucideIcon;
+};
+/**
+ * MaskedInput component - used for text input fields with input masking support, labels, validation, icons, and loading states
+ *
+ * @param props - MaskedInput component properties
+ * @param props.name - Required field name for form handling
+ * @param props.mask - Input mask pattern (e.g., "___.___.___-__" for CPF)
+ * @param props.replacement - Character or replacement configuration for mask positions
+ * @param props.separate - Whether to separate mask characters from input value. Default: undefined
+ * @param props.showMask - Whether to show the mask placeholder. Default: undefined
+ * @param props.label - Optional label text to display above the input
+ * @param props.errorMessage - Error message to display below the input
+ * @param props.isLoading - Controls loading state with spinner. Default: false
+ * @param props.size - Input size. Default: "md"
+ * @param props.variant - Visual variant of the input. Default: "solid"
+ * @param props.prefix - Text or icon to display at the beginning of the input
+ * @param props.suffix - Text or icon to display at the end of the input
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.leftIcon - Optional icon to display on the left side
+ * @param props.rightIcon - Optional icon to display on the right side
+ *
+ * **...Other valid HTML properties for input element (except 'type' which is controlled by the mask)**
+ *
+ * @returns MaskedInput JSX element wrapped in FieldGroup with optional label and error
+ *
+ * @example
+ * ```tsx
+ * // Basic masked input for phone number
+ * <MaskedInput
+ *   name="phone"
+ *   mask="(__) _____-____"
+ *   replacement={{ _: /\d/ }}
+ *   placeholder="(00) 00000-0000"
+ * />
+ *
+ * // CPF input with label and validation
+ * <MaskedInput
+ *   name="cpf"
+ *   label="CPF"
+ *   mask="___.___.___-__"
+ *   replacement="_"
+ *   showAsterisk
+ *   errorMessage="Please enter a valid CPF"
+ *   showMask
+ * />
+ *
+ * // Credit card input with icons and loading state
+ * <MaskedInput
+ *   name="creditCard"
+ *   label="Credit Card"
+ *   mask="____ ____ ____ ____"
+ *   replacement={{ _: /\d/ }}
+ *   leftIcon={CreditCardIcon}
+ *   rightIcon={ShieldIcon}
+ *   isLoading
+ * />
+ *
+ * // Date input with prefix/suffix
+ * <MaskedInput
+ *   name="birthDate"
+ *   label="Birth Date"
+ *   mask="__/__/____"
+ *   replacement="_"
+ *   prefix="📅"
+ *   variant="outline"
+ *   separate
+ * />
+ *
+ * // Large masked input with underline variant
+ * <MaskedInput
+ *   name="zipCode"
+ *   label="ZIP Code"
+ *   mask="_____-___"
+ *   replacement={{ _: /\d/ }}
+ *   size="lg"
+ *   variant="underline"
+ *   placeholder="00000-000"
+ * />
+ * ```
+ */
+declare function MaskedInput(props: MaskedInputProps): import("react/jsx-runtime").JSX.Element;
+export { MaskedInput };
+//# sourceMappingURL=index.d.ts.map