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

package/dist/components/tab/tabContainer/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TabProvider } from "../tabContext";
+import "./styles.css";
+/**
+ * TabContainer component - used as a wrapper for TabButton components to create tabbed navigation
+ *
+ * @param props - TabContainer component properties
+ * @param props.children - TabButton components and other content (required)
+ * @param props.disabled - Whether all tab buttons are disabled. Default: false
+ * @param props.defaultValue - Initial tab value to be selected
+ * @param props.onChange - Callback function called when tab changes, receives the tab value
+ *
+ * **...Other valid HTML nav properties except onClick, children, and ref**
+ *
+ * @returns TabContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tab container
+ * <TabContainer>
+ *   <TabButton value="home">Home</TabButton>
+ *   <TabButton value="about">About</TabButton>
+ *   <TabButton value="contact">Contact</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab container with default value and change handler
+ * <TabContainer
+ *   defaultValue="dashboard"
+ *   onChange={(value) => console.log('Active tab:', value)}
+ * >
+ *   <TabButton value="dashboard">Dashboard</TabButton>
+ *   <TabButton value="analytics">Analytics</TabButton>
+ *   <TabButton value="settings">Settings</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled all tabs
+ * <TabContainer disabled>
+ *   <TabButton value="tab1">Tab 1</TabButton>
+ *   <TabButton value="tab2">Tab 2</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab container with custom styling and state management
+ * function MyTabs() {
+ *   const [activeTab, setActiveTab] = useState('profile');
+ *
+ *   return (
+ *     <div>
+ *       <TabContainer
+ *         defaultValue={activeTab}
+ *         onChange={setActiveTab}
+ *         className="custom-tabs"
+ *         role="tablist"
+ *       >
+ *         <TabButton value="profile">Profile</TabButton>
+ *         <TabButton value="account">Account</TabButton>
+ *         <TabButton value="notifications">Notifications</TabButton>
+ *       </TabContainer>
+ *
+ *       {activeTab === 'profile' && <ProfileContent />}
+ *       {activeTab === 'account' && <AccountContent />}
+ *       {activeTab === 'notifications' && <NotificationsContent />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function TabContainer(props) {
+    const { children, onChange, defaultValue, disabled = false, className: baseClassName, ...rest } = props;
+    const [currentTab, setCurrentTab] = useState(defaultValue || "");
+    const className = `arkynTabContainer ${baseClassName || ""}`;
+    function changeCurrentTab(value) {
+        setCurrentTab(value);
+        if (onChange)
+            onChange(value);
+    }
+    return (_jsx(TabProvider, { disabled: disabled, currentTab: currentTab, changeCurrentTab: changeCurrentTab, children: _jsx("nav", { className: className.trim(), ...rest, children: children }) }));
+}
+export { TabContainer };

package/dist/components/tab/tabContext.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+type TabContextProps = {
+    disabled: boolean;
+    currentTab: string;
+    changeCurrentTab: (tab: string) => void;
+};
+type TabProviderProps = {
+    children: ReactNode;
+    disabled: boolean;
+    currentTab: string;
+    changeCurrentTab: (tab: string) => void;
+};
+declare function useTab(): TabContextProps;
+declare function TabProvider(props: TabProviderProps): import("react/jsx-runtime").JSX.Element;
+export { TabProvider, useTab };
+//# sourceMappingURL=tabContext.d.ts.map

package/dist/components/tab/tabContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabContext.d.ts","sourceRoot":"","sources":["../../../src/components/tab/tabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAc,MAAM,OAAO,CAAC;AAE7D,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAIF,iBAAS,MAAM,oBAEd;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAI3C;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/tab/tabContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const TabContext = createContext({});
+function useTab() {
+    return useContext(TabContext);
+}
+function TabProvider(props) {
+    return (_jsx(TabContext.Provider, { value: props, children: props.children }));
+}
+export { TabProvider, useTab };

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 };

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

@@ -0,0 +1,64 @@
+import { TableHTMLAttributes } from "react";
+import "./styles.css";
+type TableContainerProps = TableHTMLAttributes<HTMLTableElement>;
+/**
+ * TableContainer component - wraps table content in a styled container with responsive behavior
+ *
+ * @param props - TableContainer component properties
+ *
+ * **...All valid HTML properties for table element**
+ *
+ * @returns TableContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table container
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </tr>
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table container with custom styling
+ * <TableContainer className="custom-table">
+ *   <TableCaption>
+ *     User Management Table
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody emptyMessage="No users found">
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <Pagination />
+ *   </TableFooter>
+ * </TableContainer>
+ *
+ * // Responsive table with overflow handling
+ * <TableContainer style={{ maxWidth: '100%', overflowX: 'auto' }}>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Description</th>
+ *     <th>Price</th>
+ *     <th>Stock</th>
+ *     <th>Actions</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+declare function TableContainer(props: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+export { TableContainer };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CASjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableContainer component - wraps table content in a styled container with responsive behavior
+ *
+ * @param props - TableContainer component properties
+ *
+ * **...All valid HTML properties for table element**
+ *
+ * @returns TableContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table container
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </tr>
+ *   </TableBody>
+ * </TableContainer>
+ *
+ * // Table container with custom styling
+ * <TableContainer className="custom-table">
+ *   <TableCaption>
+ *     User Management Table
+ *   </TableCaption>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody emptyMessage="No users found">
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <Pagination />
+ *   </TableFooter>
+ * </TableContainer>
+ *
+ * // Responsive table with overflow handling
+ * <TableContainer style={{ maxWidth: '100%', overflowX: 'auto' }}>
+ *   <TableHeader>
+ *     <th>Product</th>
+ *     <th>Description</th>
+ *     <th>Price</th>
+ *     <th>Stock</th>
+ *     <th>Actions</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+function TableContainer(props) {
+    const { children, className: baseClassName, ...rest } = props;
+    const className = `arkynTableContainer ${baseClassName}`;
+    return (_jsx("div", { className: className.trim(), ...rest, children: _jsx("table", { children: children }) }));
+}
+export { TableContainer };

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

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableFooter component - used to render the footer section of a table with content container
+ *
+ * @param props - TableFooter component properties
+ *
+ * **...All valid HTML properties for tfoot element**
+ *
+ * @returns TableFooter JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table footer with pagination
+ * <TableFooter>
+ *   <div>Showing 1-10 of 100 results</div>
+ *   <Pagination />
+ * </TableFooter>
+ *
+ * // Table footer with custom styling
+ * <TableFooter className="custom-footer">
+ *   <Button>Load More</Button>
+ * </TableFooter>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <div className="pagination-info">
+ *       Total: 250 items
+ *     </div>
+ *   </TableFooter>
+ * </TableContainer>
+ * ```
+ */
+declare function TableFooter(props: TableFooterProps): import("react/jsx-runtime").JSX.Element;
+export { TableFooter };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAc3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+/**
+ * TableFooter component - used to render the footer section of a table with content container
+ *
+ * @param props - TableFooter component properties
+ *
+ * **...All valid HTML properties for tfoot element**
+ *
+ * @returns TableFooter JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table footer with pagination
+ * <TableFooter>
+ *   <div>Showing 1-10 of 100 results</div>
+ *   <Pagination />
+ * </TableFooter>
+ *
+ * // Table footer with custom styling
+ * <TableFooter className="custom-footer">
+ *   <Button>Load More</Button>
+ * </TableFooter>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>Name</th>
+ *     <th>Email</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ *   <TableFooter>
+ *     <div className="pagination-info">
+ *       Total: 250 items
+ *     </div>
+ *   </TableFooter>
+ * </TableContainer>
+ * ```
+ */
+function TableFooter(props) {
+    const { className: baseClassName, children, ...rest } = props;
+    const className = `arkynTableFooter ${baseClassName}`;
+    return (_jsxs("tfoot", { className: className.trim(), ...rest, children: [_jsx("tr", { className: "spacingRow" }), _jsx("tr", { children: _jsx("th", { colSpan: 100, children: _jsx("div", { className: "arkynTableFooterContent", children: children }) }) })] }));
+}
+export { TableFooter };

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

@@ -0,0 +1,44 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+/**
+ * TableHeader component - used to render the header section of a table with automatic spacing
+ *
+ * @param props - TableHeader component properties
+ *
+ * **...All valid HTML properties for thead element**
+ *
+ * @returns TableHeader JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic table header
+ * <TableHeader>
+ *   <th>Name</th>
+ *   <th>Email</th>
+ *   <th>Actions</th>
+ * </TableHeader>
+ *
+ * // Table header with custom styling
+ * <TableHeader className="custom-header">
+ *   <th>Product</th>
+ *   <th>Price</th>
+ *   <th>Stock</th>
+ * </TableHeader>
+ *
+ * // Complete table usage
+ * <TableContainer>
+ *   <TableHeader>
+ *     <th>ID</th>
+ *     <th>User</th>
+ *     <th>Status</th>
+ *   </TableHeader>
+ *   <TableBody>
+ *     // table rows...
+ *   </TableBody>
+ * </TableContainer>
+ * ```
+ */
+declare function TableHeader(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { TableHeader };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAU3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}