@arkyn/components 3.0.1-beta.22 → 3.0.1-beta.23

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../button";
+import "./styles.css";
+function NoFileContent(props) {
+    const { dropFileText, isLoading, acceptFile, handleSelectFile, selectFileButtonText, 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 = acceptFile;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    return (_jsxs("div", { onDrop: handleDrop, className: "arkynFileUploadNoFileContent", children: [_jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "ghost", size: "sm", type: "button", disabled: disabled, children: selectFileButtonText }), _jsx("p", { children: dropFileText })] }));
+}
+export { NoFileContent };

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/index.js

@@ -0,0 +1,24 @@
+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 "./styles.css";
+function HasFileContent(props) {
+    const { disabled, filePath, isLoading, acceptImage, changeImageButtonText, handleSelectFile, reSendImage, } = props;
+    function handleClick() {
+        if (disabled)
+            return;
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = acceptImage;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    return (_jsxs("div", { className: "arkynImageUploadHasFileContent", style: { backgroundImage: `url("${filePath}")` }, children: [reSendImage && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar imagem", children: _jsx(IconButton, { type: "button", "aria-label": "resend image", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendImage, icon: RefreshCw, disabled: disabled }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", disabled: disabled, children: changeImageButtonText })] }));
+}
+export { HasFileContent };

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/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../button";
+import "./styles.css";
+function NoFileContent(props) {
+    const { dropImageText, isLoading, acceptImage, handleSelectFile, selectImageButtonText, 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 = acceptImage;
+        input.onchange = (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+                handleSelectFile(file);
+        };
+        input.click();
+    }
+    return (_jsxs("div", { onDrop: handleDrop, className: "arkynImageUploadNoFileContent", children: [_jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "ghost", size: "sm", type: "button", disabled: disabled, children: selectImageButtonText }), _jsx("p", { children: dropImageText })] }));
+}
+export { NoFileContent };

package/dist/components/table/tableBody/index.d.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
+    emptyMessage?: string;
+};
+/**
+ * TableBody component - used to render the main content section of a table with empty state handling
+ *
+ * @param props - TableBody component properties
+ * @param props.emptyMessage - Message to display when no children are provided. Default: "Nenhum dado adicionado."
+ *
+ * **...All valid HTML properties for tbody element**
+ *
+ * @returns TableBody JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table body with data
+ * <TableBody>
+ *   <tr>
+ *     <td>John Doe</td>
+ *     <td>john@example.com</td>
+ *   </tr>
+ *   <tr>
+ *     <td>Jane Smith</td>
+ *     <td>jane@example.com</td>
+ *   </tr>
+ * </TableBody>
+ *
+ * // Empty table body with custom message
+ * <TableBody emptyMessage="No users found. Please add some users to get started." />
+ *
+ * // Table body with dynamic content and custom styling
+ * <TableBody className="striped-rows" emptyMessage="No products available">
+ *   {products.map(product => (
+ *     <tr key={product.id}>
+ *       <td>{product.name}</td>
+ *       <td>{product.price}</td>
+ *       <td>{product.stock}</td>
+ *     </tr>
+ *   ))}
+ * </TableBody>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Status</th>
+ *     <th>Actions</th>
+ *   </TableHeader>
+ *   <TableBody emptyMessage="No data to display">
+ *     {data.map(item => (
+ *       <tr key={item.id}>
+ *         <td>{item.name}</td>
+ *         <td>{item.status}</td>
+ *         <td>
+ *           <Button>Edit</Button>
+ *         </td>
+ *       </tr>
+ *     ))}
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+declare function TableBody(props: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+export { TableBody };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/tableBody/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableBody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAwBvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/table/tableBody/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import "./styles.css";
+/**
+ * TableBody component - used to render the main content section of a table with empty state handling
+ *
+ * @param props - TableBody component properties
+ * @param props.emptyMessage - Message to display when no children are provided. Default: "Nenhum dado adicionado."
+ *
+ * **...All valid HTML properties for tbody element**
+ *
+ * @returns TableBody JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table body with data
+ * <TableBody>
+ *   <tr>
+ *     <td>John Doe</td>
+ *     <td>john@example.com</td>
+ *   </tr>
+ *   <tr>
+ *     <td>Jane Smith</td>
+ *     <td>jane@example.com</td>
+ *   </tr>
+ * </TableBody>
+ *
+ * // Empty table body with custom message
+ * <TableBody emptyMessage="No users found. Please add some users to get started." />
+ *
+ * // Table body with dynamic content and custom styling
+ * <TableBody className="striped-rows" emptyMessage="No products available">
+ *   {products.map(product => (
+ *     <tr key={product.id}>
+ *       <td>{product.name}</td>
+ *       <td>{product.price}</td>
+ *       <td>{product.stock}</td>
+ *     </tr>
+ *   ))}
+ * </TableBody>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Status</th>
+ *     <th>Actions</th>
+ *   </TableHeader>
+ *   <TableBody emptyMessage="No data to display">
+ *     {data.map(item => (
+ *       <tr key={item.id}>
+ *         <td>{item.name}</td>
+ *         <td>{item.status}</td>
+ *         <td>
+ *           <Button>Edit</Button>
+ *         </td>
+ *       </tr>
+ *     ))}
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+function TableBody(props) {
+    const { emptyMessage = "Nenhum dado adicionado.", className: baseClassName, children, ...rest } = props;
+    const className = `arkynTableBody ${baseClassName}`;
+    const isEmpty = Children.count(children) === 0;
+    return (_jsx("tbody", { className: className.trim(), ...rest, children: isEmpty ? (_jsx("tr", { className: "arkynTableBodyEmptyLine", children: _jsx("td", { colSpan: 100, children: _jsx("div", { children: emptyMessage }) }) })) : (children) }));
+}
+export { TableBody };

package/dist/components/table/tableCaption/index.d.ts

@@ -0,0 +1,62 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type TableCaptionProps = HTMLAttributes<HTMLElement>;
+/**
+ * TableCaption component - used to provide a title or description for a table with proper styling
+ *
+ * @param props - TableCaption component properties
+ *
+ * **...All valid HTML properties for caption element**
+ *
+ * @returns TableCaption JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table caption
+ * <TableContainer>
+ *   <TableCaption>
+ *     User Management
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table caption with custom styling
+ * <TableContainer>
+ *   <TableCaption className="highlighted-caption">
+ *     Sales Report - Q4 2024
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Revenue</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Caption with rich content
+ * <TableContainer>
+ *   <TableCaption>
+ *     <h3>Employee Directory</h3>
+ *     <p>Updated: {new Date().toLocaleDateString()}</p>
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Employee ID</th>
+ *     <th>Name</th>
+ *     <th>Department</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+declare function TableCaption(props: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
+export { TableCaption };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/tableCaption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableCaption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAS7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/table/tableCaption/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableCaption component - used to provide a title or description for a table with proper styling
+ *
+ * @param props - TableCaption component properties
+ *
+ * **...All valid HTML properties for caption element**
+ *
+ * @returns TableCaption JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table caption
+ * <TableContainer>
+ *   <TableCaption>
+ *     User Management
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table caption with custom styling
+ * <TableContainer>
+ *   <TableCaption className="highlighted-caption">
+ *     Sales Report - Q4 2024
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Revenue</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Caption with rich content
+ * <TableContainer>
+ *   <TableCaption>
+ *     <h3>Employee Directory</h3>
+ *     <p>Updated: {new Date().toLocaleDateString()}</p>
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>Employee ID</th>
+ *     <th>Name</th>
+ *     <th>Department</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+function TableCaption(props) {
+    const { className: baseClassName, children, ...rest } = props;
+    const className = `arkynTableCaption ${baseClassName}`;
+    return (_jsx("caption", { className: className.trim(), ...rest, children: _jsx("div", { className: "arkynTableCaptionContent", children: children }) }));
+}
+export { TableCaption };