@invopop/popui 0.1.34 → 0.1.40

package/dist/data-table/render-helpers.js

@@ -0,0 +1,99 @@
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig {
+    component;
+    props;
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
+}
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig {
+    snippet;
+    params;
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent(component, props = {}) {
+    return new RenderComponentConfig(component, props);
+}
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet(snippet, params = {}) {
+    return new RenderSnippetConfig(snippet, params);
+}

package/dist/data-table/table-setup.d.ts

@@ -0,0 +1,39 @@
+import type { ColumnSizingState, ColumnSizingInfoState, ColumnOrderState, PaginationState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/table-core';
+import type { DataTableColumn } from './data-table-types.js';
+import type { Snippet } from 'svelte';
+import type { Row } from '@tanstack/table-core';
+/**
+ * Build TanStack columns from configuration
+ */
+export declare function buildColumns<TData>(columnConfig: DataTableColumn<TData>[], enableSelection: boolean, rowActionsSnippet: Snippet<[{
+    row: Row<TData>;
+}]> | null, hasRowActions: boolean): any[];
+interface TableSetupOptions<TData> {
+    enableSelection: boolean;
+    enablePagination: boolean;
+    manualPagination?: boolean;
+    manualSorting?: boolean;
+    pageCount?: number;
+    getRowCount?: () => number | undefined;
+    getData?: () => TData[];
+    getColumns?: () => any[];
+    getRowSelection: () => RowSelectionState;
+    getColumnVisibility: () => VisibilityState;
+    getSorting: () => SortingState;
+    getPagination: () => PaginationState;
+    getColumnSizing: () => ColumnSizingState;
+    getColumnSizingInfo: () => ColumnSizingInfoState;
+    getColumnOrder: () => ColumnOrderState;
+    setRowSelection: (value: RowSelectionState) => void;
+    setColumnVisibility: (value: VisibilityState) => void;
+    setSorting: (value: SortingState) => void;
+    setPagination: (value: PaginationState) => void;
+    setColumnSizing: (value: ColumnSizingState) => void;
+    setColumnSizingInfo: (value: ColumnSizingInfoState) => void;
+    setColumnOrder: (value: ColumnOrderState) => void;
+}
+/**
+ * Create the TanStack table instance with all configuration
+ */
+export declare function setupTable<TData>(options: TableSetupOptions<TData>): import("@tanstack/table-core").Table<TData>;
+export {};

package/dist/data-table/table-setup.js

@@ -0,0 +1,151 @@
+import { getCoreRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/table-core';
+import { createSvelteTable } from './data-table-svelte.svelte.js';
+import { createColumns } from './create-columns.js';
+import { createSelectionColumn, createActionsColumn } from './column-definitions.js';
+/**
+ * Build TanStack columns from configuration
+ */
+export function buildColumns(columnConfig, enableSelection, rowActionsSnippet, hasRowActions) {
+    const cols = [];
+    // Add selection column if enabled
+    if (enableSelection) {
+        cols.push(createSelectionColumn());
+    }
+    // Add user-defined columns
+    cols.push(...createColumns(columnConfig));
+    // Add actions column if row actions are defined
+    if (hasRowActions && rowActionsSnippet) {
+        cols.push(createActionsColumn(rowActionsSnippet));
+    }
+    return cols;
+}
+/**
+ * Create state updater function
+ */
+function createStateUpdater(setState) {
+    return (updater) => {
+        setState(typeof updater === 'function' ? updater(undefined) : updater);
+    };
+}
+/**
+ * Create the TanStack table instance with all configuration
+ */
+export function setupTable(options) {
+    const tableOptions = {
+        state: {
+            get sorting() {
+                return options.getSorting();
+            },
+            get columnVisibility() {
+                return options.getColumnVisibility();
+            },
+            get rowSelection() {
+                return options.getRowSelection();
+            },
+            get pagination() {
+                return options.getPagination();
+            },
+            get columnSizing() {
+                return options.getColumnSizing();
+            },
+            get columnSizingInfo() {
+                return options.getColumnSizingInfo();
+            },
+            get columnOrder() {
+                return options.getColumnOrder();
+            }
+        },
+        get data() {
+            return options.getData?.() ?? [];
+        },
+        get columns() {
+            return options.getColumns?.() ?? [];
+        },
+        enableRowSelection: options.enableSelection,
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        columnResizeDirection: 'ltr',
+        onRowSelectionChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setRowSelection(updater(options.getRowSelection()));
+            }
+            else {
+                options.setRowSelection(updater);
+            }
+        },
+        onSortingChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setSorting(updater(options.getSorting()));
+            }
+            else {
+                options.setSorting(updater);
+            }
+        },
+        onColumnVisibilityChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setColumnVisibility(updater(options.getColumnVisibility()));
+            }
+            else {
+                options.setColumnVisibility(updater);
+            }
+        },
+        onPaginationChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setPagination(updater(options.getPagination()));
+            }
+            else {
+                options.setPagination(updater);
+            }
+        },
+        onColumnSizingChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setColumnSizing(updater(options.getColumnSizing()));
+            }
+            else {
+                options.setColumnSizing(updater);
+            }
+        },
+        onColumnSizingInfoChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setColumnSizingInfo(updater(options.getColumnSizingInfo()));
+            }
+            else {
+                options.setColumnSizingInfo(updater);
+            }
+        },
+        onColumnOrderChange: (updater) => {
+            if (typeof updater === 'function') {
+                options.setColumnOrder(updater(options.getColumnOrder()));
+            }
+            else {
+                options.setColumnOrder(updater);
+            }
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: options.enablePagination && !options.manualPagination ? getPaginationRowModel() : undefined,
+        getSortedRowModel: !options.manualSorting ? getSortedRowModel() : undefined,
+        // Manual pagination configuration
+        manualPagination: options.manualPagination,
+        // Manual sorting configuration
+        manualSorting: options.manualSorting
+    };
+    // Only provide pageCount/rowCount for manual pagination
+    // When manualPagination is false, TanStack Table calculates it automatically
+    if (options.manualPagination) {
+        Object.assign(tableOptions, {
+            get pageCount() {
+                // Calculate pageCount from rowCount and current pageSize
+                const rowCount = options.getRowCount?.();
+                if (rowCount !== undefined) {
+                    const pageSize = options.getPagination().pageSize;
+                    return Math.ceil(rowCount / pageSize);
+                }
+                return options.pageCount ?? -1;
+            },
+            get rowCount() {
+                return options.getRowCount?.();
+            }
+        });
+    }
+    return createSvelteTable(tableOptions);
+}

package/dist/data-table/table-styles.d.ts

@@ -0,0 +1,17 @@
+import type { Header, Cell } from '@tanstack/table-core';
+/**
+ * Calculate inline styles for table headers
+ */
+export declare function getHeaderStyle<TData>(header: Header<TData, unknown>, isLastScrollable: boolean, isFrozen?: boolean, leftOffset?: number): string;
+/**
+ * Calculate CSS classes for table headers
+ */
+export declare function getHeaderClasses<TData>(header: Header<TData, unknown>, isLastScrollable: boolean, isFirstHeader?: boolean, isLastHeader?: boolean, isFrozen?: boolean, isLastFrozen?: boolean): string;
+/**
+ * Calculate inline styles for table cells
+ */
+export declare function getCellStyle<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean, isFrozen?: boolean, leftOffset?: number): string;
+/**
+ * Calculate CSS classes for table cells
+ */
+export declare function getCellClasses<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean, isFirstDataColumn?: boolean, isFirstCell?: boolean, isLastCell?: boolean, isFrozen?: boolean): string;

package/dist/data-table/table-styles.js

@@ -0,0 +1,70 @@
+import clsx from 'clsx';
+/**
+ * Calculate inline styles for table headers
+ */
+export function getHeaderStyle(header, isLastScrollable, isFrozen = false, leftOffset = 0) {
+    const size = header.getSize();
+    if (header.id === 'actions' || header.id === 'select') {
+        return `width: ${size}px; min-width: ${size}px; max-width: ${size}px;`;
+    }
+    if (isFrozen) {
+        return `min-width: ${size}px; max-width: ${size}px; left: ${leftOffset}px;`;
+    }
+    if (isLastScrollable) {
+        return `min-width: ${size}px;`;
+    }
+    return `min-width: ${size}px; max-width: ${size}px;`;
+}
+/**
+ * Calculate CSS classes for table headers
+ */
+export function getHeaderClasses(header, isLastScrollable, isFirstHeader = false, isLastHeader = false, isFrozen = false, isLastFrozen = false) {
+    const isSticky = header.id === 'actions' || header.id === 'select' || isFrozen;
+    const isResizable = header.column.getCanResize();
+    return clsx('relative whitespace-nowrap overflow-hidden before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-border', {
+        'sticky right-0 text-right bg-background before:z-20': header.id === 'actions',
+        'sticky left-0 bg-background z-10 before:z-20': header.id === 'select' || isFrozen,
+        'z-0': !isSticky,
+        'after:content-[""] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-background-default-tertiary after:z-20': isResizable && (header.id !== 'actions' && header.id !== 'select') && !isLastFrozen,
+        'w-full': isLastScrollable,
+        '!pr-4': isLastHeader && !isSticky,
+        'px-3': isSticky,
+        'pl-4': isSticky && isFirstHeader,
+        'pr-4': isSticky && isLastHeader
+    });
+}
+/**
+ * Calculate inline styles for table cells
+ */
+export function getCellStyle(cell, isLastScrollable, isFrozen = false, leftOffset = 0) {
+    const size = cell.column.getSize();
+    if (cell.column.id === 'actions' || cell.column.id === 'select') {
+        return `width: ${size}px; min-width: ${size}px; max-width: ${size}px;`;
+    }
+    if (isFrozen) {
+        return `min-width: ${size}px; max-width: ${size}px; left: ${leftOffset}px;`;
+    }
+    if (isLastScrollable) {
+        return `min-width: ${size}px;`;
+    }
+    return `min-width: ${size}px; max-width: ${size}px;`;
+}
+/**
+ * Calculate CSS classes for table cells
+ */
+export function getCellClasses(cell, isLastScrollable, isFirstDataColumn = false, isFirstCell = false, isLastCell = false, isFrozen = false) {
+    const isSticky = cell.column.id === 'actions' || cell.column.id === 'select' || isFrozen;
+    const isCurrency = cell.column.columnDef.meta?.cellType === 'currency';
+    return clsx('whitespace-nowrap overflow-hidden', {
+        'sticky right-0 text-right': cell.column.id === 'actions',
+        'sticky left-0 z-10': cell.column.id === 'select' || isFrozen,
+        'z-0': !isSticky,
+        'bg-background': isSticky,
+        '!p-0': isSticky,
+        'w-full': isLastScrollable,
+        'font-medium': isFirstDataColumn,
+        '!pl-4': isFirstCell && !isSticky,
+        '!pr-4': isLastCell && !isSticky,
+        'text-right': isCurrency
+    });
+}

package/dist/drawer-dnd-helpers.d.ts

@@ -0,0 +1,30 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+export type DndItem = {
+    id: string;
+    locked?: boolean;
+    [key: string]: any;
+};
+export type DropIndicatorState = {
+    itemId: string;
+    edge: Edge;
+} | null;
+/**
+ * Checks if dropping an item would result in no position change
+ * (i.e., dropping right next to its current position)
+ */
+export declare function shouldShowDropIndicator(sourceId: string, targetId: string, sourceGroup: string, targetGroup: string, edge: Edge, items: DndItem[]): boolean;
+/**
+ * Calculates the new index where a dragged item should be inserted
+ */
+export declare function calculateInsertIndex(sourceIndex: number, targetIndex: number, edge: Edge): number;
+/**
+ * Reorders items within the same group
+ */
+export declare function reorderItems<T extends DndItem>(items: T[], sourceId: string, targetId: string, edge: Edge): T[];
+/**
+ * Moves an item from one group to another
+ */
+export declare function moveItemBetweenGroups<T extends DndItem>(sourceItems: T[], targetItems: T[], sourceId: string, targetId?: string, edge?: Edge): {
+    newSourceItems: T[];
+    newTargetItems: T[];
+};

package/dist/drawer-dnd-helpers.js

@@ -0,0 +1,72 @@
+/**
+ * Checks if dropping an item would result in no position change
+ * (i.e., dropping right next to its current position)
+ */
+export function shouldShowDropIndicator(sourceId, targetId, sourceGroup, targetGroup, edge, items) {
+    // Always show for cross-group drops
+    if (sourceGroup !== targetGroup) {
+        return true;
+    }
+    // Check if dropping would result in no position change
+    const sourceIndex = items.findIndex((item) => item.id === sourceId);
+    const targetIndex = items.findIndex((item) => item.id === targetId);
+    // Don't show indicator if dropping adjacent to current position
+    const isAdjacentTop = edge === 'top' && targetIndex === sourceIndex + 1;
+    const isAdjacentBottom = edge === 'bottom' && targetIndex === sourceIndex - 1;
+    return !isAdjacentTop && !isAdjacentBottom;
+}
+/**
+ * Calculates the new index where a dragged item should be inserted
+ */
+export function calculateInsertIndex(sourceIndex, targetIndex, edge) {
+    let insertIndex = targetIndex;
+    // Adjust target index if source was before target (array shifts after removal)
+    if (sourceIndex < targetIndex) {
+        insertIndex = targetIndex - 1;
+    }
+    // If dropping on bottom edge, insert after
+    if (edge === 'bottom') {
+        insertIndex = insertIndex + 1;
+    }
+    return insertIndex;
+}
+/**
+ * Reorders items within the same group
+ */
+export function reorderItems(items, sourceId, targetId, edge) {
+    const sourceIndex = items.findIndex((item) => item.id === sourceId);
+    const targetIndex = items.findIndex((item) => item.id === targetId);
+    if (sourceIndex === -1 || targetIndex === -1) {
+        return items;
+    }
+    const newItems = [...items];
+    const [draggedItem] = newItems.splice(sourceIndex, 1);
+    const insertIndex = calculateInsertIndex(sourceIndex, targetIndex, edge);
+    newItems.splice(insertIndex, 0, draggedItem);
+    return newItems;
+}
+/**
+ * Moves an item from one group to another
+ */
+export function moveItemBetweenGroups(sourceItems, targetItems, sourceId, targetId, edge) {
+    const draggedItem = sourceItems.find((item) => item.id === sourceId);
+    if (!draggedItem) {
+        return { newSourceItems: sourceItems, newTargetItems: targetItems };
+    }
+    const newSourceItems = sourceItems.filter((item) => item.id !== sourceId);
+    // If no target specified, append to end
+    if (!targetId || !edge) {
+        const newTargetItems = [...targetItems, draggedItem];
+        return { newSourceItems, newTargetItems };
+    }
+    // Insert at specific position based on target and edge
+    const targetIndex = targetItems.findIndex((item) => item.id === targetId);
+    if (targetIndex === -1) {
+        const newTargetItems = [...targetItems, draggedItem];
+        return { newSourceItems, newTargetItems };
+    }
+    const newTargetItems = [...targetItems];
+    const insertIndex = edge === 'bottom' ? targetIndex + 1 : targetIndex;
+    newTargetItems.splice(insertIndex, 0, draggedItem);
+    return { newSourceItems, newTargetItems };
+}

package/dist/helpers.d.ts

@@ -2,6 +2,7 @@ import type { IconSource } from '@steeze-ui/svelte-icon';
 import type { DatesFromToday, FeedItemStatus } from './types.js';
 import { type DateValue } from '@internationalized/date';
 export declare function toPascalCase(text: string): string;
+export declare function capitalize(text: string): string;
 export declare function resolveIcon(icon?: IconSource | string | undefined): Promise<IconSource | undefined>;
 export declare function getCountryName(code: string): string | undefined;
 export declare function getStatusType(status: string): FeedItemStatus;

package/dist/helpers.js

@@ -3,6 +3,9 @@ import { startOfWeek, endOfWeek, subWeeks, endOfMonth, startOfMonth, subMonths,
 export function toPascalCase(text) {
     return text.replace(/(^\w|-\w)/g, (text) => text.replace(/-/, '').toUpperCase());
 }
+export function capitalize(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
 export async function resolveIcon(icon = undefined) {
     if (!icon)
         return undefined;

package/dist/index.d.ts

@@ -4,11 +4,10 @@ import BaseCard from './BaseCard.svelte';
 import BaseCounter from './BaseCounter.svelte';
 import BaseDropdown from './BaseDropdown.svelte';
 import BaseFlag from './BaseFlag.svelte';
-import BaseTable from './BaseTable.svelte';
 import BaseTableActions from './BaseTableActions.svelte';
-import BaseTableHeaderContent from './BaseTableHeaderContent.svelte';
 import Breadcrumbs from './Breadcrumbs.svelte';
 import ButtonFile from './ButtonFile.svelte';
+import ButtonSearch from './ButtonSearch.svelte';
 import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
@@ -20,6 +19,7 @@ import DrawerContext from './DrawerContext.svelte';
 import DrawerContextItem from './DrawerContextItem.svelte';
 import DrawerContextSeparator from './DrawerContextSeparator.svelte';
 import DropdownSelect from './DropdownSelect.svelte';
+import DropdownSelectGroup from './DropdownSelectGroup.svelte';
 import EmptyState from './EmptyState.svelte';
 import FeedEvents from './FeedEvents.svelte';
 import FeedIconEvent from './FeedIconEvent.svelte';
@@ -45,7 +45,12 @@ import ProgressBar from './ProgressBar.svelte';
 import ProgressBarCircle from './ProgressBarCircle.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
+import { Skeleton } from './skeleton';
+import { SkeletonAvatar } from './skeleton';
+import { SkeletonCard } from './skeleton';
+import { SkeletonList } from './skeleton';
 import StatusLabel from './StatusLabel.svelte';
+import StepIcon from './StepIcon.svelte';
 import StepIconList from './StepIconList.svelte';
 import { Table } from './table';
 import { TableBody } from './table';
@@ -74,4 +79,11 @@ import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
 import { buttonVariants } from './button/button.svelte';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants };
+import { DataTable } from './data-table';
+import { DataTableToolbar } from './data-table';
+import { DataTableViewOptions } from './data-table';
+import { FlexRender } from './data-table';
+import { createSvelteTable } from './data-table';
+import { renderComponent } from './data-table';
+import { renderSnippet } from './data-table';
+export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTableActions, Breadcrumbs, ButtonFile, ButtonSearch, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWidget, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, DropdownSelectGroup, EmptyState, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProgressBar, ProgressBarCircle, SeparatorHorizontal, ShortcutWrapper, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList, StatusLabel, StepIcon, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagProgress, TagSearch, TagStatus, TitleMain, TitleSection, Toaster, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, resolveIcon, getCountryName, getStatusType, buttonVariants, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -4,11 +4,10 @@ import BaseCard from './BaseCard.svelte'
 import BaseCounter from './BaseCounter.svelte'
 import BaseDropdown from './BaseDropdown.svelte'
 import BaseFlag from './BaseFlag.svelte'
-import BaseTable from './BaseTable.svelte'
 import BaseTableActions from './BaseTableActions.svelte'
-import BaseTableHeaderContent from './BaseTableHeaderContent.svelte'
 import Breadcrumbs from './Breadcrumbs.svelte'
 import ButtonFile from './ButtonFile.svelte'
+import ButtonSearch from './ButtonSearch.svelte'
 import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
@@ -20,6 +19,7 @@ import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
 import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
+import DropdownSelectGroup from './DropdownSelectGroup.svelte'
 import EmptyState from './EmptyState.svelte'
 import FeedEvents from './FeedEvents.svelte'
 import FeedIconEvent from './FeedIconEvent.svelte'
@@ -45,7 +45,9 @@ import ProgressBar from './ProgressBar.svelte'
 import ProgressBarCircle from './ProgressBarCircle.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
+import { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList } from './skeleton'
 import StatusLabel from './StatusLabel.svelte'
+import StepIcon from './StepIcon.svelte'
 import StepIconList from './StepIconList.svelte'
 import {
   Table,
@@ -69,6 +71,15 @@ import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
 import UuidCopy from './UuidCopy.svelte'
 import { resolveIcon, getCountryName, getStatusType } from './helpers.js'
 import { buttonVariants } from './button/button.svelte' // Ensure button styles are included
+import {
+  DataTable,
+  DataTableToolbar,
+  DataTableViewOptions,
+  FlexRender,
+  createSvelteTable,
+  renderComponent,
+  renderSnippet
+} from './data-table'
 
 export {
   AlertDialog,
@@ -77,11 +88,10 @@ export {
   BaseCounter,
   BaseDropdown,
   BaseFlag,
-  BaseTable,
   BaseTableActions,
-  BaseTableHeaderContent,
   Breadcrumbs,
   ButtonFile,
+  ButtonSearch,
   ButtonUuidCopy,
   CardCheckbox,
   CardRelation,
@@ -93,6 +103,7 @@ export {
   DrawerContextItem,
   DrawerContextSeparator,
   DropdownSelect,
+  DropdownSelectGroup,
   EmptyState,
   FeedEvents,
   FeedIconEvent,
@@ -118,7 +129,12 @@ export {
   ProgressBarCircle,
   SeparatorHorizontal,
   ShortcutWrapper,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonCard,
+  SkeletonList,
   StatusLabel,
+  StepIcon,
   StepIconList,
   Table,
   TableBody,
@@ -146,5 +162,12 @@ export {
   resolveIcon,
   getCountryName,
   getStatusType,
-  buttonVariants
+  buttonVariants,
+  DataTable,
+  DataTableToolbar,
+  DataTableViewOptions,
+  FlexRender,
+  createSvelteTable,
+  renderComponent,
+  renderSnippet
 }

package/dist/skeleton/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './skeleton.svelte';
+import SkeletonAvatar from './skeleton-avatar.svelte';
+import SkeletonCard from './skeleton-card.svelte';
+import SkeletonList from './skeleton-list.svelte';
+export { Root, Root as Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList };

package/dist/skeleton/index.js

@@ -0,0 +1,7 @@
+import Root from './skeleton.svelte';
+import SkeletonAvatar from './skeleton-avatar.svelte';
+import SkeletonCard from './skeleton-card.svelte';
+import SkeletonList from './skeleton-list.svelte';
+export { Root, 
+//
+Root as Skeleton, SkeletonAvatar, SkeletonCard, SkeletonList };

package/dist/skeleton/skeleton-avatar.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { cn } from '../utils'
+  import Skeleton from './skeleton.svelte'
+
+  let {
+    class: className = '',
+    size = 48
+  }: {
+    class?: string
+    size?: number
+  } = $props()
+</script>
+
+<Skeleton class={cn('rounded-lg flex-shrink-0', className)} style="height: {size}px; width: {size}px" />