@arkyn/components 3.0.1-beta.99 → 3.0.3

package/dist/components/tab/tabButton/index.d.ts

@@ -1,72 +1,34 @@
-import { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
 import "./styles.css";
 type TabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "type"> & {
+    /** Content displayed inside the tab button. */
     children: ReactNode;
+    /** Unique identifier for this tab; matched against the container's active value. */
     value: string;
 };
 /**
- * TabButton component - used as interactive buttons within a TabContainer for tab navigation
+ * TabButton — individual tab button inside a `TabContainer`.
  *
- * @param props - TabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by TabContainer's disabled state
+ * Reads active state and disabled state from `TabContainer` context.
+ * The button's own `disabled` prop is ORed with the container's `disabled`.
  *
- * **...Other valid HTML button properties except children, value, and type**
+ * @param props.children - Tab label content. Required.
+ * @param props.value - Tab identifier. Required.
+ * @param props.disabled - Disables this tab individually (container can also disable all tabs).
  *
- * @returns TabButton JSX element
+ * **...Other valid HTML `<button>` properties except `type`**
  *
- * @example
- * ```tsx
- * // Basic tab buttons within TabContainer
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <TabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </TabButton>
- *   <TabButton value="settings">Settings</TabButton>
- * </TabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <TabContainer>
- *   <TabButton value="available">Available</TabButton>
- *   <TabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </TabButton>
- * </TabContainer>
- * ```
+ * @returns TabButton JSX element.
  *
  * @example
  * ```tsx
- * // Tab buttons with custom styling and default value
- * <TabContainer defaultValue="dashboard">
- *   <TabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </TabButton>
- *   <TabButton value="analytics">Analytics</TabButton>
- *   <TabButton value="reports">Reports</TabButton>
+ * <TabContainer defaultValue="overview" onChange={setTab}>
+ *   <TabButton value="overview">Overview</TabButton>
+ *   <TabButton value="activity">Activity</TabButton>
+ *   <TabButton value="settings" disabled>Settings</TabButton>
  * </TabContainer>
  * ```
  */
-declare function TabButton(props: TabButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function TabButton(props: TabButtonProps): import("react").JSX.Element;
 export { TabButton };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tab/tabButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACxB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACzB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC7B,GAAG;IACH,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,+BAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/tab/tabContainer/index.d.ts

@@ -1,83 +1,41 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import "./styles.css";
 type TabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onChange" | "children" | "ref" | "onClick"> & {
+    /** `TabButton` components to render as tabs. Required. */
     children: ReactNode;
+    /** Disables all tab buttons at once. @default false */
     disabled?: boolean;
+    /** Initially selected tab value. */
     defaultValue?: string;
+    /** Callback fired when the active tab changes, receiving the new value. */
     onChange?: (index: string) => void;
 };
 /**
- * TabContainer component - used as a wrapper for TabButton components to create tabbed navigation
+ * TabContainer — wrapper that manages active state for a group of `TabButton` components.
  *
- * @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
+ * Renders as a `<nav>` element. Provides context consumed by each `TabButton`.
  *
- * **...Other valid HTML nav properties except onClick, children, and ref**
+ * @param props.children - `TabButton` elements. Required.
+ * @param props.defaultValue - Initially selected tab value.
+ * @param props.disabled - Disables all buttons. Default: false
+ * @param props.onChange - Called with the new value whenever the active tab changes.
  *
- * @returns TabContainer JSX element
+ * **...Other valid HTML `<nav>` properties**
  *
- * @example
- * ```tsx
- * // Basic tab container
- * <TabContainer>
- *   <TabButton value="home">Home</TabButton>
- *   <TabButton value="about">About</TabButton>
- *   <TabButton value="contact">Contact</TabButton>
- * </TabContainer>
- * ```
+ * @returns TabContainer JSX element.
  *
  * @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>
+ * <TabContainer defaultValue="overview" onChange={setActiveTab}>
+ *   <TabButton value="overview">Overview</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>
- *   );
- * }
+ * {activeTab === 'overview' && <OverviewPanel />}
+ * {activeTab === 'analytics' && <AnalyticsPanel />}
  * ```
  */
-declare function TabContainer(props: TabContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function TabContainer(props: TabContainerProps): import("react").JSX.Element;
 export { TabContainer };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tab/tabContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,IAAI,CAC3B,cAAc,CAAC,WAAW,CAAC,EAC3B,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,CAC5C,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA8B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGtE,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,IAAI,CAC5B,cAAc,CAAC,WAAW,CAAC,EAC3B,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,CAC3C,GAAG;IACH,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BA8B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"tabContext.d.ts","sourceRoot":"","sources":["../../../src/components/tab/tabContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE3E,KAAK,eAAe,GAAG;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAIF,iBAAS,MAAM,oBAEd;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAW3C;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC"}

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

@@ -1,67 +1,33 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 import "./styles.css";
 type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
+    /** Text displayed in a full-width row when no children are present. @default "Nenhum dado adicionado." */
     emptyMessage?: string;
 };
 /**
- * TableBody component - used to render the main content section of a table with empty state handling
+ * TableBody — `<tbody>` section with built-in empty state handling.
  *
- * @param props - TableBody component properties
- * @param props.emptyMessage - Message to display when no children are provided. Default: "Nenhum dado adicionado."
+ * When `children` is empty, renders a full-width row with `emptyMessage`.
+ * Accepts all standard HTML `<tbody>` attributes.
  *
- * **...All valid HTML properties for tbody element**
+ * @param props.emptyMessage - Empty state text. Default: `"Nenhum dado adicionado."`
  *
- * @returns TableBody JSX element
+ * **...Other valid HTML `<tbody>` properties**
+ *
+ * @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>
+ * <TableBody emptyMessage="No orders found">
+ *   {orders.map(o => (
+ *     <tr key={o.id}>
+ *       <td>{o.number}</td>
+ *       <td>{o.status}</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;
+declare function TableBody(props: TableBodyProps): import("react").JSX.Element;
 export { TableBody };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableBody/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAC/D,0GAA0G;IAC1G,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,+BAyBvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -1,62 +1,22 @@
-import { HTMLAttributes } from "react";
+import type { 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
+ * TableCaption — title / description placed above a table. Renders as a `<caption>` element.
  *
- * @param props - TableCaption component properties
+ * Accepts all standard HTML element attributes.
  *
- * **...All valid HTML properties for caption element**
- *
- * @returns TableCaption JSX 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>
+ *   <TableCaption>Orders — Q2 2025</TableCaption>
+ *   <TableHeader>...</TableHeader>
+ *   <TableBody>...</TableBody>
  * </TableContainer>
  * ```
  */
-declare function TableCaption(props: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption(props: TableCaptionProps): import("react").JSX.Element;
 export { TableCaption };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableCaption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;GAeG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAS7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -1,64 +1,35 @@
-import { TableHTMLAttributes } from "react";
+import type { TableHTMLAttributes } from "react";
 import "./styles.css";
 type TableContainerProps = TableHTMLAttributes<HTMLTableElement>;
 /**
- * TableContainer component - wraps table content in a styled container with responsive behavior
+ * TableContainer — root wrapper for the Table component set. Renders a responsive scrollable container around a `<table>`.
  *
- * @param props - TableContainer component properties
+ * Accepts all standard HTML `<table>` attributes.
  *
- * **...All valid HTML properties for table element**
- *
- * @returns TableContainer JSX element
+ * @returns TableContainer JSX element.
  *
  * @example
  * ```tsx
- * // Basic table container
  * <TableContainer>
+ *   <TableCaption>Users</TableCaption>
  *   <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...
+ *     {users.map(u => (
+ *       <tr key={u.id}>
+ *         <td>{u.name}</td>
+ *         <td>{u.email}</td>
+ *         <td>{u.status}</td>
+ *       </tr>
+ *     ))}
  *   </TableBody>
+ *   <TableFooter><Pagination /></TableFooter>
  * </TableContainer>
  * ```
  */
-declare function TableContainer(props: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function TableContainer(props: TableContainerProps): import("react").JSX.Element;
 export { TableContainer };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,+BASjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,45 +1,21 @@
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 import "./styles.css";
 type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
 /**
- * TableFooter component - used to render the footer section of a table with content container
+ * TableFooter — `<tfoot>` section with an automatic spacing row above the content.
  *
- * @param props - TableFooter component properties
+ * Children span all columns via `colSpan={100}`. Commonly used for `Pagination`.
+ * Accepts all standard HTML `<tfoot>` attributes.
  *
- * **...All valid HTML properties for tfoot element**
- *
- * @returns TableFooter JSX 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>
+ *   <Pagination currentPage={page} totalPages={totalPages} onChange={setPage} />
  * </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;
+declare function TableFooter(props: TableFooterProps): import("react").JSX.Element;
 export { TableFooter };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableFooter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;GAcG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAc3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,44 +1,23 @@
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 import "./styles.css";
 type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
 /**
- * TableHeader component - used to render the header section of a table with automatic spacing
+ * TableHeader — `<thead>` section with an automatic spacing row below the header row.
  *
- * @param props - TableHeader component properties
+ * Pass `<th>` elements as children — they are wrapped in a `<tr>` automatically.
+ * Accepts all standard HTML `<thead>` attributes.
  *
- * **...All valid HTML properties for thead element**
- *
- * @returns TableHeader JSX 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;
+declare function TableHeader(props: TableHeaderProps): import("react").JSX.Element;
 export { TableHeader };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/tableHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEhE;;;;;;;;;;;;;;;;GAgBG;AAEH,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAU3C;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}