@shipfox/react-ui 0.17.0 → 0.18.0

package/dist/components/dashboard/components/kpi-card.d.ts

@@ -1,15 +1,14 @@
-export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info';
-export interface KpiCardProps {
+import type { ComponentProps, ReactNode } from 'react';
+export type KpiVariant = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'purple';
+export interface KpiCardProps extends Omit<ComponentProps<'div'>, 'title'> {
     label: string;
-    value: string | number;
+    value: string | number | ReactNode;
     variant?: KpiVariant;
-    className?: string;
+    isLoading?: boolean;
 }
-export declare function KpiCard({ label, value, variant, className }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
-export interface KpiCardsGroupProps {
+export declare function KpiCard({ label, value, variant, isLoading, className, ...props }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export interface KpiCardsGroupProps extends ComponentProps<'div'> {
     cards: KpiCardProps[];
-    className?: string;
 }
-export declare function KpiCardsGroup({ cards, className }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare const defaultKpiCards: KpiCardProps[];
+export declare function KpiCardsGroup({ cards, className, ...props }: KpiCardsGroupProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=kpi-card.d.ts.map

package/dist/components/dashboard/components/kpi-card.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../../../components/card/index.js';
+import { Skeleton } from '../../../components/skeleton/index.js';
 import { Text } from '../../../components/typography/index.js';
 import { cn } from '../../../utils/cn.js';
 const variantDotStyles = {
@@ -6,23 +8,28 @@ const variantDotStyles = {
     success: 'bg-green-500',
     warning: 'bg-orange-500',
     error: 'bg-red-500',
-    info: 'bg-blue-500'
+    info: 'bg-blue-500',
+    purple: 'bg-purple-500'
 };
-export function KpiCard({ label, value, variant = 'neutral', className }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn('flex flex-col gap-4 p-12 rounded-8', 'bg-background-neutral-base border border-border-neutral-base', 'min-w-120 flex-1', className),
+export function KpiCard({ label, value, variant = 'neutral', isLoading, className, ...props }) {
+    return /*#__PURE__*/ _jsxs(Card, {
+        className: cn('flex flex-col gap-4 p-12 min-w-120 flex-1', className),
+        ...props,
         children: [
-            /*#__PURE__*/ _jsx("p", {
-                className: "text-xs text-foreground-neutral-subtle",
+            /*#__PURE__*/ _jsx(Text, {
+                size: "xs",
+                className: "text-foreground-neutral-subtle",
                 children: label
             }),
             /*#__PURE__*/ _jsxs("div", {
                 className: "flex items-center gap-6",
                 children: [
                     /*#__PURE__*/ _jsx("span", {
-                        className: cn('size-8 rounded-2 shrink-0', variantDotStyles[variant])
+                        className: cn('shrink-0 size-8 rounded-2', variantDotStyles[variant])
                     }),
-                    /*#__PURE__*/ _jsx(Text, {
+                    isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
+                        className: "w-48 h-20 rounded-4"
+                    }) : /*#__PURE__*/ _jsx(Text, {
                         size: "sm",
                         className: "font-medium text-foreground-neutral-base",
                         children: value
@@ -32,46 +39,21 @@ export function KpiCard({ label, value, variant = 'neutral', className }) {
         ]
     });
 }
-export function KpiCardsGroup({ cards, className }) {
+export function KpiCardsGroup({ cards, className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
-        className: cn(// Base layout
-        'flex gap-12 md:gap-16', // Mobile: Swipeable with scroll-snap
-        'overflow-x-auto scrollbar-none pb-4 md:pb-0', // Scroll snap for smooth swiping
-        'snap-x snap-mandatory', // Hide scrollbar but allow scrolling
-        '[&::-webkit-scrollbar]:hidden', // Smooth scrolling
-        'scroll-smooth', className),
+        className: cn('flex gap-12 md:gap-16 overflow-x-auto pb-4 md:pb-0 snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] scroll-smooth', className),
+        ...props,
         children: /*#__PURE__*/ _jsx("div", {
-            className: "flex gap-16 pl-12 md:pl-0 md:w-full",
-            children: cards.map((card, index)=>/*#__PURE__*/ _jsx(KpiCard, {
-                    ...card,
-                    className: cn(// Mobile: Show ~2 cards per view with peek of next
-                    'shrink-0 w-[calc((100vw-56px)/2)] md:w-auto', 'snap-start', // Desktop: Flex grow
-                    'md:flex-1')
-                }, `${card.label}-${index}`))
+            className: "flex gap-16 pl-0 w-full",
+            children: cards.map((card, index)=>{
+                const { key: _key, ...cardProps } = card;
+                return /*#__PURE__*/ _jsx(KpiCard, {
+                    ...cardProps,
+                    className: cn('shrink-0 w-[calc((100vw-56px)/2)] snap-start md:flex-1 md:w-0', card.className)
+                }, `${card.label}-${index}`);
+            })
         })
     });
 }
-export const defaultKpiCards = [
-    {
-        label: 'Total',
-        value: '1211',
-        variant: 'neutral'
-    },
-    {
-        label: 'Success',
-        value: '1200',
-        variant: 'success'
-    },
-    {
-        label: 'Neutral',
-        value: '11',
-        variant: 'neutral'
-    },
-    {
-        label: 'Failure rate',
-        value: '0%',
-        variant: 'success'
-    }
-];
 
 //# sourceMappingURL=kpi-card.js.map

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

@@ -1,12 +1,7 @@
-/**
- * Dashboard Component Exports
- *
- * Comprehensive export file for all dashboard-related components and utilities.
- */
 export type { BarChartProps, ChartColor, LineChartProps } from './components/charts';
 export { BarChart, LineChart } from './components/charts';
 export { DashboardAlert } from './components/dashboard-alert';
-export type { KpiCardProps } from './components/kpi-card';
+export type { KpiCardProps, KpiCardsGroupProps, KpiVariant } from './components/kpi-card';
 export { KpiCard, KpiCardsGroup } from './components/kpi-card';
 export type { MobileSidebarProps } from './components/mobile-sidebar';
 export { MobileSidebar } from './components/mobile-sidebar';

package/dist/components/dashboard/index.js

@@ -1,24 +1,13 @@
-/**
- * Dashboard Component Exports
- *
- * Comprehensive export file for all dashboard-related components and utilities.
- */ // Chart Components
 export { BarChart, LineChart } from './components/charts/index.js';
-// Shared Components
 export { DashboardAlert } from './components/dashboard-alert.js';
 export { KpiCard, KpiCardsGroup } from './components/kpi-card.js';
 export { MobileSidebar } from './components/mobile-sidebar.js';
 export { defaultSidebarItems, Sidebar } from './components/sidebar.js';
-// Context API
 export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState } from './context/index.js';
-// Main Dashboard Component
 export { Dashboard } from './dashboard.js';
-// Filter Components
 export { ExpressionFilterBar } from './filters/index.js';
-// Page Components
 export { AnalyticsPage, JobsPage } from './pages/index.js';
 export { TableWrapper } from './table/index.js';
-// Generic Reusable Components
 export { FilterButton, PageToolbar, ToolbarActions, ToolbarSearch, ViewDropdown } from './toolbar/index.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/dashboard/pages/analytics-page.d.ts

@@ -1,20 +1,2 @@
-/**
- * Analytics Page Component
- *
- * Refactored analytics page using DashboardContext and generic components.
- */
-/**
- * Analytics Page
- *
- * Main analytics page with KPI cards, charts, and jobs table.
- * Uses DashboardContext for state management and generic reusable components.
- *
- * @example
- * ```tsx
- * <DashboardProvider>
- *   <AnalyticsPage />
- * </DashboardProvider>
- * ```
- */
 export declare function AnalyticsPage(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=analytics-page.d.ts.map

package/dist/components/dashboard/pages/analytics-page.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Analytics Page Component
- *
- * Refactored analytics page using DashboardContext and generic components.
- */ import { jobColumns } from '../../../components/table/table.stories.columns.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { CountUp } from '../../../components/count-up/count-up.js';
+import { Icon } from '../../../components/icon/index.js';
+import { SearchInline } from '../../../components/search/search-inline.js';
+import { jobColumns } from '../../../components/table/table.stories.columns.js';
 import { jobsData } from '../../../components/table/table.stories.data.js';
 import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
 import { useMemo } from 'react';
@@ -17,7 +17,6 @@ import { useDashboardContext } from '../context/index.js';
 import { ExpressionFilterBar } from '../filters/index.js';
 import { TableWrapper } from '../table/index.js';
 import { PageToolbar, ToolbarActions } from '../toolbar/index.js';
-// Sample data for the performance chart
 const performanceData = [
     {
         label: '1',
@@ -62,7 +61,6 @@ const performanceData = [
         dataD: 160
     }
 ];
-// Generate sample data for duration distribution
 function generateDurationData() {
     const count = 40;
     const data = [];
@@ -77,54 +75,85 @@ function generateDurationData() {
     return data;
 }
 const durationData = generateDurationData();
-/**
- * KPI Cards configuration
- */ const kpiCards = [
+const KPI_VALUE_REGEX = /^([^\d]*)([\d.,]+)([^\d]*)$/;
+function parseKpiValue(value) {
+    if (typeof value === 'number') {
+        return {
+            prefix: '',
+            numericValue: value,
+            suffix: '',
+            isNumeric: true
+        };
+    }
+    const match = value.match(KPI_VALUE_REGEX);
+    if (match) {
+        const [, prefix, numericStr, suffix] = match;
+        const numericValue = parseFloat(numericStr.replace(/,/g, ''));
+        if (!Number.isNaN(numericValue)) {
+            return {
+                prefix,
+                numericValue,
+                suffix,
+                isNumeric: true
+            };
+        }
+    }
+    return {
+        prefix: '',
+        numericValue: 0,
+        suffix: '',
+        isNumeric: false
+    };
+}
+function renderKpiValue(value) {
+    const parsed = parseKpiValue(value);
+    if (parsed.isNumeric) {
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                parsed.prefix,
+                /*#__PURE__*/ _jsx(CountUp, {
+                    to: parsed.numericValue,
+                    from: 0,
+                    duration: 0.5,
+                    className: "inline"
+                }),
+                parsed.suffix
+            ]
+        });
+    }
+    return value;
+}
+const kpiCards = [
     {
         label: 'Total',
-        value: '1211',
-        variant: 'neutral'
+        value: renderKpiValue('1211'),
+        variant: 'info'
     },
     {
         label: 'Success',
-        value: '1200',
+        value: renderKpiValue('1200'),
         variant: 'success'
     },
     {
         label: 'Neutral',
-        value: '11',
+        value: renderKpiValue('11'),
         variant: 'neutral'
     },
     {
         label: 'Failure rate',
-        value: '0%',
+        value: renderKpiValue('0%'),
         variant: 'success'
     }
 ];
-/**
- * Analytics Page
- *
- * Main analytics page with KPI cards, charts, and jobs table.
- * Uses DashboardContext for state management and generic reusable components.
- *
- * @example
- * ```tsx
- * <DashboardProvider>
- *   <AnalyticsPage />
- * </DashboardProvider>
- * ```
- */ export function AnalyticsPage() {
+export function AnalyticsPage() {
     const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility, activeSidebarItem, setActiveSidebarItem, resourceType, setResourceType } = useDashboardContext();
-    // Responsive breakpoints
     const isDesktop = useMediaQuery('(min-width: 1024px)');
-    // Get the active sidebar item label for the title
     const pageTitle = useMemo(()=>{
         const activeItem = defaultSidebarItems.find((item)=>item.id === activeSidebarItem);
-        return activeItem?.label || 'Reliability'; // Default to Reliability
+        return activeItem?.label || 'Reliability';
     }, [
         activeSidebarItem
     ]);
-    // Filter data based on search query
     const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
         searchQuery
     ]);
@@ -143,7 +172,7 @@ const durationData = generateDurationData();
                 })
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-1 overflow-hidden bg-background-neutral-base",
+                className: "flex flex-1 overflow-hidden",
                 children: [
                     isDesktop && /*#__PURE__*/ _jsx(Sidebar, {
                         items: defaultSidebarItems,
@@ -241,9 +270,26 @@ const durationData = generateDurationData();
                                 title: "Analytics breakdown",
                                 columns: jobColumns,
                                 data: filteredData,
-                                searchQuery: searchQuery,
-                                onSearchChange: setSearchQuery,
-                                onSearchClear: ()=>setSearchQuery(''),
+                                headerActions: /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            placeholder: "Search...",
+                                            value: searchQuery,
+                                            onChange: (e)=>setSearchQuery(e.target.value),
+                                            onClear: ()=>setSearchQuery(''),
+                                            className: "flex-1 md:w-240"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            variant: "secondary",
+                                            "aria-label": "Insert column left",
+                                            className: "shrink-0",
+                                            children: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "insertColumnLeft",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            })
+                                        })
+                                    ]
+                                }),
                                 columnVisibility: columnVisibility,
                                 onColumnVisibilityChange: updateColumnVisibility
                             })

package/dist/components/dashboard/pages/jobs-page.d.ts

@@ -1,20 +1,2 @@
-/**
- * Jobs Page Component
- *
- * Refactored jobs page using DashboardContext and generic components.
- */
-/**
- * Jobs Page
- *
- * Simple jobs page with table showing job breakdown.
- * Uses DashboardContext for state management and generic reusable components.
- *
- * @example
- * ```tsx
- * <DashboardProvider>
- *   <JobsPage />
- * </DashboardProvider>
- * ```
- */
 export declare function JobsPage(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=jobs-page.d.ts.map

package/dist/components/dashboard/pages/jobs-page.js

@@ -1,29 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Jobs Page Component
- *
- * Refactored jobs page using DashboardContext and generic components.
- */ import { jobColumns } from '../../../components/table/table.stories.columns.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { SearchInline } from '../../../components/search/search-inline.js';
+import { jobColumns } from '../../../components/table/table.stories.columns.js';
 import { jobsData } from '../../../components/table/table.stories.data.js';
 import { useMemo } from 'react';
 import { useDashboardContext } from '../context/index.js';
 import { TableWrapper } from '../table/index.js';
 import { PageToolbar } from '../toolbar/index.js';
-/**
- * Jobs Page
- *
- * Simple jobs page with table showing job breakdown.
- * Uses DashboardContext for state management and generic reusable components.
- *
- * @example
- * ```tsx
- * <DashboardProvider>
- *   <JobsPage />
- * </DashboardProvider>
- * ```
- */ export function JobsPage() {
+export function JobsPage() {
     const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility } = useDashboardContext();
-    // Filter data based on search query
     const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
         searchQuery
     ]);
@@ -37,14 +23,31 @@ import { PageToolbar } from '../toolbar/index.js';
                 lastUpdated: lastUpdated
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: "flex-1 px-12 pb-12 pt-4 md:px-24 md:pb-24 bg-background-neutral-base overflow-auto",
+                className: "flex-1 px-12 pb-12 pt-4 md:px-24 md:pb-24 overflow-auto",
                 children: /*#__PURE__*/ _jsx(TableWrapper, {
                     title: "Jobs breakdown",
                     columns: jobColumns,
                     data: filteredData,
-                    searchQuery: searchQuery,
-                    onSearchChange: setSearchQuery,
-                    onSearchClear: ()=>setSearchQuery(''),
+                    headerActions: /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SearchInline, {
+                                placeholder: "Search...",
+                                value: searchQuery,
+                                onChange: (e)=>setSearchQuery(e.target.value),
+                                onClear: ()=>setSearchQuery(''),
+                                className: "flex-1 md:w-240"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                "aria-label": "Insert column left",
+                                className: "shrink-0",
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "insertColumnLeft",
+                                    className: "size-16 text-foreground-neutral-subtle"
+                                })
+                            })
+                        ]
+                    }),
                     columnVisibility: columnVisibility,
                     onColumnVisibilityChange: updateColumnVisibility
                 })

package/dist/components/dashboard/table/table-wrapper.d.ts

@@ -18,23 +18,6 @@ export interface TableWrapperProps<TData, TValue> extends Omit<ComponentProps<'d
      * Data to display in the table
      */
     data: TData[];
-    /**
-     * Search query value
-     */
-    searchQuery?: string;
-    /**
-     * Search input change handler
-     */
-    onSearchChange?: (value: string) => void;
-    /**
-     * Search clear handler
-     */
-    onSearchClear?: () => void;
-    /**
-     * Search placeholder text
-     * @default 'Search...'
-     */
-    searchPlaceholder?: string;
     /**
      * Column visibility state
      */
@@ -72,14 +55,20 @@ export interface TableWrapperProps<TData, TValue> extends Omit<ComponentProps<'d
      */
     emptyState?: ReactNode;
     /**
-     * Additional header actions
+     * Header actions to display in the card header
      */
     headerActions?: ReactNode;
     /**
-     * Show default search and column action
-     * @default true
+     * Loading state - displays skeleton when true
+     */
+    isLoading?: boolean;
+    /**
+     * Optional scoped container element for dropdown portals.
+     *
+     * When provided, dropdowns (like pagination select) will be rendered inside this container
+     * instead of the document body. This is useful for scoped CSS styling.
      */
-    showDefaultActions?: boolean;
+    scopedContainer?: HTMLElement | null;
 }
 /**
  * Generic Table Wrapper
@@ -93,12 +82,20 @@ export interface TableWrapperProps<TData, TValue> extends Omit<ComponentProps<'d
  *   title="Jobs breakdown"
  *   columns={jobColumns}
  *   data={jobsData}
- *   searchQuery={searchQuery}
- *   onSearchChange={setSearchQuery}
+ *   headerActions={
+ *     <>
+ *       <SearchInline
+ *         placeholder="Search..."
+ *         value={searchQuery}
+ *         onChange={(e) => setSearchQuery(e.target.value)}
+ *       />
+ *       <Button variant="secondary">Action</Button>
+ *     </>
+ *   }
  *   columnVisibility={columnVisibility}
  *   onColumnVisibilityChange={updateColumnVisibility}
  * />
  * ```
  */
-export declare function TableWrapper<TData, TValue>({ title, columns, data, searchQuery, onSearchChange, onSearchClear, searchPlaceholder, columnVisibility, onColumnVisibilityChange, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, headerActions, showDefaultActions, className, ...props }: TableWrapperProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function TableWrapper<TData, TValue>({ title, columns, data, columnVisibility, onColumnVisibilityChange, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, headerActions, isLoading, scopedContainer, className, ...props }: TableWrapperProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=table-wrapper.d.ts.map

package/dist/components/dashboard/table/table-wrapper.js

@@ -2,12 +2,9 @@
  * Generic Table Wrapper Component
  *
  * A reusable wrapper for dashboard tables with header, search, and actions.
- */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/button/index.js';
-import { Icon } from '../../../components/icon/index.js';
-import { SearchInline } from '../../../components/search/search-inline.js';
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from '../../../components/card/index.js';
 import { DataTable } from '../../../components/table/data-table.js';
-import { Header as TypographyHeader } from '../../../components/typography/index.js';
 import { cn } from '../../../utils/cn.js';
 /**
  * Generic Table Wrapper
@@ -21,70 +18,60 @@ import { cn } from '../../../utils/cn.js';
  *   title="Jobs breakdown"
  *   columns={jobColumns}
  *   data={jobsData}
- *   searchQuery={searchQuery}
- *   onSearchChange={setSearchQuery}
+ *   headerActions={
+ *     <>
+ *       <SearchInline
+ *         placeholder="Search..."
+ *         value={searchQuery}
+ *         onChange={(e) => setSearchQuery(e.target.value)}
+ *       />
+ *       <Button variant="secondary">Action</Button>
+ *     </>
+ *   }
  *   columnVisibility={columnVisibility}
  *   onColumnVisibilityChange={updateColumnVisibility}
  * />
  * ```
- */ export function TableWrapper({ title, columns, data, searchQuery = '', onSearchChange, onSearchClear, searchPlaceholder = 'Search...', columnVisibility, onColumnVisibilityChange, pagination = true, pageSize = 10, pageSizeOptions = [
+ */ export function TableWrapper({ title, columns, data, columnVisibility, onColumnVisibilityChange, pagination = true, pageSize = 10, pageSizeOptions = [
     10,
     20,
     50,
     100
-], showSelectedCount = false, onRowClick, emptyState, headerActions, showDefaultActions = true, className, ...props }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn('rounded-t-8 overflow-hidden', className),
+], showSelectedCount = false, onRowClick, emptyState, headerActions, isLoading, scopedContainer, className, ...props }) {
+    return /*#__PURE__*/ _jsxs(Card, {
+        className: cn('rounded-t-8 overflow-hidden p-0 gap-0 border-none', className),
         ...props,
         children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 bg-background-neutral-base",
+            /*#__PURE__*/ _jsxs(CardHeader, {
+                className: "flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 rounded-t-8 border-t border-x border-border-neutral-base",
                 children: [
-                    typeof title === 'string' ? /*#__PURE__*/ _jsx(TypographyHeader, {
+                    typeof title === 'string' ? /*#__PURE__*/ _jsx(CardTitle, {
                         variant: "h3",
-                        className: "text-foreground-neutral-base",
                         children: title
                     }) : title,
-                    (showDefaultActions || headerActions) && /*#__PURE__*/ _jsxs("div", {
+                    headerActions && /*#__PURE__*/ _jsx(CardAction, {
                         className: "flex items-center gap-8 md:gap-16 w-full md:w-auto",
-                        children: [
-                            showDefaultActions && /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(SearchInline, {
-                                        placeholder: searchPlaceholder,
-                                        value: searchQuery,
-                                        onChange: (e)=>onSearchChange?.(e.target.value),
-                                        onClear: ()=>onSearchClear?.(),
-                                        className: "flex-1 md:w-240"
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "secondary",
-                                        "aria-label": "Insert column left",
-                                        className: "shrink-0",
-                                        children: /*#__PURE__*/ _jsx(Icon, {
-                                            name: "insertColumnLeft",
-                                            className: "size-16 text-foreground-neutral-subtle"
-                                        })
-                                    })
-                                ]
-                            }),
-                            headerActions
-                        ]
+                        children: headerActions
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx(DataTable, {
-                columns: columns,
-                data: data,
-                pagination: pagination,
-                pageSize: pageSize,
-                pageSizeOptions: pageSizeOptions,
-                showSelectedCount: showSelectedCount,
-                onRowClick: onRowClick,
-                emptyState: emptyState,
-                columnVisibility: columnVisibility,
-                onColumnVisibilityChange: onColumnVisibilityChange,
-                className: "rounded-t-none"
+            /*#__PURE__*/ _jsx(CardContent, {
+                className: "p-0",
+                children: /*#__PURE__*/ _jsx(DataTable, {
+                    columns: columns,
+                    data: data,
+                    isLoading: isLoading,
+                    pagination: pagination,
+                    pageSize: pageSize,
+                    pageSizeOptions: pageSizeOptions,
+                    showSelectedCount: showSelectedCount,
+                    onRowClick: onRowClick,
+                    emptyState: emptyState,
+                    columnVisibility: columnVisibility,
+                    onColumnVisibilityChange: onColumnVisibilityChange,
+                    scopedContainer: scopedContainer,
+                    className: "rounded-t-none"
+                })
             })
         ]
     });