@invopop/popui 0.1.2 → 0.1.3-6.beta.1

package/dist/data-table/render-helpers.d.ts

@@ -0,0 +1,90 @@
+import type { Component, ComponentProps, Snippet } from "svelte";
+/**
+ * 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 declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
+}
+/**
+ * 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 declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, params: TProps);
+}
+/**
+ * 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 declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
+/**
+ * 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 declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

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,36 @@
+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;
+    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> & {
+    data?: TData[];
+    columns?: any[];
+}): import("@tanstack/table-core").Table<unknown>;
+export {};

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

@@ -0,0 +1,130 @@
+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();
+            }
+        },
+        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 ? getPaginationRowModel() : undefined,
+        getSortedRowModel: getSortedRowModel()
+    };
+    // Add data and columns as getters if provided
+    if (options.data !== undefined) {
+        tableOptions.data = options.data;
+    }
+    if (options.columns !== undefined) {
+        tableOptions.columns = options.columns;
+    }
+    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): string;
+/**
+ * Calculate CSS classes for table headers
+ */
+export declare function getHeaderClasses<TData>(header: Header<TData, unknown>, isLastScrollable: boolean): string;
+/**
+ * Calculate inline styles for table cells
+ */
+export declare function getCellStyle<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean): string;
+/**
+ * Calculate CSS classes for table cells
+ */
+export declare function getCellClasses<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean): string;

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

@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+/**
+ * Calculate inline styles for table headers
+ */
+export function getHeaderStyle(header, isLastScrollable) {
+    const size = header.getSize();
+    if (header.id === 'actions' || header.id === 'select') {
+        return `width: ${size}px; min-width: ${size}px; max-width: ${size}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) {
+    return clsx('relative whitespace-nowrap overflow-hidden', {
+        'sticky right-0 text-right bg-white': header.id === 'actions',
+        'sticky left-0 bg-white z-10': header.id === 'select',
+        'w-full': isLastScrollable,
+        'hover:!bg-transparent': !header.column.getCanSort()
+    });
+}
+/**
+ * Calculate inline styles for table cells
+ */
+export function getCellStyle(cell, isLastScrollable) {
+    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 (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) {
+    return clsx('whitespace-nowrap overflow-hidden', {
+        'sticky right-0 text-right !p-0': cell.column.id === 'actions',
+        'sticky left-0 !p-0 z-10': cell.column.id === 'select',
+        'w-full': isLastScrollable
+    });
+}

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

@@ -13,15 +13,14 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte';
 import CardCheckbox from './CardCheckbox.svelte';
 import CardRelation from './CardRelation.svelte';
 import CompanySelector from './CompanySelector.svelte';
-import CounterWorkflow from './CounterWorkflow.svelte';
+import CounterWidget from './CounterWidget.svelte';
 import DataListItem from './DataListItem.svelte';
 import DatePicker from './DatePicker.svelte';
 import DrawerContext from './DrawerContext.svelte';
 import DrawerContextItem from './DrawerContextItem.svelte';
 import DrawerContextSeparator from './DrawerContextSeparator.svelte';
 import DropdownSelect from './DropdownSelect.svelte';
-import EmptyStateIcon from './EmptyStateIcon.svelte';
-import EmptyStateIllustration from './EmptyStateIllustration.svelte';
+import EmptyState from './EmptyState.svelte';
 import FeedEvents from './FeedEvents.svelte';
 import FeedIconEvent from './FeedIconEvent.svelte';
 import FeedIconStatus from './FeedIconStatus.svelte';
@@ -42,8 +41,8 @@ import MenuItem from './MenuItem.svelte';
 import MenuItemCollapsible from './MenuItemCollapsible.svelte';
 import Notification from './Notification.svelte';
 import ProfileAvatar from './ProfileAvatar.svelte';
-import ProfileSelector from './ProfileSelector.svelte';
-import SectionLayout from './SectionLayout.svelte';
+import ProgressBar from './ProgressBar.svelte';
+import ProgressBarCircle from './ProgressBarCircle.svelte';
 import SeparatorHorizontal from './SeparatorHorizontal.svelte';
 import ShortcutWrapper from './ShortcutWrapper.svelte';
 import StatusLabel from './StatusLabel.svelte';
@@ -61,16 +60,25 @@ import { TabsContent } from './tabs';
 import { TabsList } from './tabs';
 import { TabsTrigger } from './tabs';
 import TagBeta from './TagBeta.svelte';
+import TagProgress from './TagProgress.svelte';
 import TagSearch from './TagSearch.svelte';
 import TagStatus from './TagStatus.svelte';
 import TitleMain from './TitleMain.svelte';
 import TitleSection from './TitleSection.svelte';
+import { Toaster } from './sonner';
 import { Tooltip } from './tooltip';
 import { TooltipContent } from './tooltip';
 import { TooltipTrigger } from './tooltip';
 import UuidCopy from './UuidCopy.svelte';
-import twTheme from './tw.theme.js';
 import { resolveIcon } from './helpers.js';
 import { getCountryName } from './helpers.js';
 import { getStatusType } from './helpers.js';
-export { AlertDialog, BaseButton, BaseCard, BaseCounter, BaseDropdown, BaseFlag, BaseTable, BaseTableActions, BaseTableHeaderContent, Breadcrumbs, ButtonFile, ButtonUuidCopy, CardCheckbox, CardRelation, CompanySelector, CounterWorkflow, DataListItem, DatePicker, DrawerContext, DrawerContextItem, DrawerContextSeparator, DropdownSelect, EmptyStateIcon, EmptyStateIllustration, FeedEvents, FeedIconEvent, FeedIconStatus, FeedItem, FeedItemDetail, FeedViewer, GlobalSearch, InputCheckbox, InputError, InputLabel, InputRadio, InputSearch, InputSelect, InputText, InputTextarea, InputToggle, MenuItem, MenuItemCollapsible, Notification, ProfileAvatar, ProfileSelector, SectionLayout, SeparatorHorizontal, ShortcutWrapper, StatusLabel, StepIconList, Table, TableBody, TableCaption, TableFooter, TableHeader, TableRow, TableHead, TableCell, Tabs, TabsContent, TabsList, TabsTrigger, TagBeta, TagSearch, TagStatus, TitleMain, TitleSection, Tooltip, TooltipContent, TooltipTrigger, UuidCopy, twTheme, resolveIcon, getCountryName, getStatusType };
+import { buttonVariants } from './button/button.svelte';
+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, 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, DataTable, DataTableToolbar, DataTableViewOptions, FlexRender, createSvelteTable, renderComponent, renderSnippet };

package/dist/index.js

@@ -13,15 +13,14 @@ import ButtonUuidCopy from './ButtonUuidCopy.svelte'
 import CardCheckbox from './CardCheckbox.svelte'
 import CardRelation from './CardRelation.svelte'
 import CompanySelector from './CompanySelector.svelte'
-import CounterWorkflow from './CounterWorkflow.svelte'
+import CounterWidget from './CounterWidget.svelte'
 import DataListItem from './DataListItem.svelte'
 import DatePicker from './DatePicker.svelte'
 import DrawerContext from './DrawerContext.svelte'
 import DrawerContextItem from './DrawerContextItem.svelte'
 import DrawerContextSeparator from './DrawerContextSeparator.svelte'
 import DropdownSelect from './DropdownSelect.svelte'
-import EmptyStateIcon from './EmptyStateIcon.svelte'
-import EmptyStateIllustration from './EmptyStateIllustration.svelte'
+import EmptyState from './EmptyState.svelte'
 import FeedEvents from './FeedEvents.svelte'
 import FeedIconEvent from './FeedIconEvent.svelte'
 import FeedIconStatus from './FeedIconStatus.svelte'
@@ -42,8 +41,8 @@ import MenuItem from './MenuItem.svelte'
 import MenuItemCollapsible from './MenuItemCollapsible.svelte'
 import Notification from './Notification.svelte'
 import ProfileAvatar from './ProfileAvatar.svelte'
-import ProfileSelector from './ProfileSelector.svelte'
-import SectionLayout from './SectionLayout.svelte'
+import ProgressBar from './ProgressBar.svelte'
+import ProgressBarCircle from './ProgressBarCircle.svelte'
 import SeparatorHorizontal from './SeparatorHorizontal.svelte'
 import ShortcutWrapper from './ShortcutWrapper.svelte'
 import StatusLabel from './StatusLabel.svelte'
@@ -60,15 +59,25 @@ import {
 } from './table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 import TagBeta from './TagBeta.svelte'
+import TagProgress from './TagProgress.svelte'
 import TagSearch from './TagSearch.svelte'
 import TagStatus from './TagStatus.svelte'
 import TitleMain from './TitleMain.svelte'
 import TitleSection from './TitleSection.svelte'
+import { Toaster } from './sonner'
 import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'
-
 import UuidCopy from './UuidCopy.svelte'
-import twTheme from './tw.theme.js'
 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,
@@ -86,15 +95,14 @@ export {
   CardCheckbox,
   CardRelation,
   CompanySelector,
-  CounterWorkflow,
+  CounterWidget,
   DataListItem,
   DatePicker,
   DrawerContext,
   DrawerContextItem,
   DrawerContextSeparator,
   DropdownSelect,
-  EmptyStateIcon,
-  EmptyStateIllustration,
+  EmptyState,
   FeedEvents,
   FeedIconEvent,
   FeedIconStatus,
@@ -115,8 +123,8 @@ export {
   MenuItemCollapsible,
   Notification,
   ProfileAvatar,
-  ProfileSelector,
-  SectionLayout,
+  ProgressBar,
+  ProgressBarCircle,
   SeparatorHorizontal,
   ShortcutWrapper,
   StatusLabel,
@@ -134,16 +142,25 @@ export {
   TabsList,
   TabsTrigger,
   TagBeta,
+  TagProgress,
   TagSearch,
   TagStatus,
   TitleMain,
   TitleSection,
+  Toaster,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
   UuidCopy,
-  twTheme,
   resolveIcon,
   getCountryName,
-  getStatusType
+  getStatusType,
+  buttonVariants,
+  DataTable,
+  DataTableToolbar,
+  DataTableViewOptions,
+  FlexRender,
+  createSvelteTable,
+  renderComponent,
+  renderSnippet
 }

package/dist/range-calendar/range-calendar-cell.svelte

@@ -11,7 +11,7 @@
 <RangeCalendarPrimitive.Cell
   bind:ref
   class={cn(
-    'size-(--cell-size) dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
+    'size-(--cell-size) [&:has([data-range-middle]:not([data-outside-month]))]:bg-background-default-secondary [&:has([data-selected]:not([data-outside-month]))]:bg-background-default-secondary relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md',
     className
   )}
   {...restProps}

package/dist/range-calendar/range-calendar-day.svelte

@@ -13,28 +13,27 @@
   bind:ref
   class={cn(
     buttonVariants({ variant: 'ghost' }),
-    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none',
+    'size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-medium leading-none rounded-lg text-foreground!',
     // today
-    '[&[data-today]:not([data-selected])]:border-b [&[data-today]:not([data-selected])]:border-workspace-accent [&[data-today]:not([data-selected])]:rounded-none',
+    '[&[data-today]:not([data-selected]):not([data-outside-month])]:border-b [&[data-today]:not([data-selected]):not([data-outside-month])]:border-background-accent [&[data-today]:not([data-selected]):not([data-outside-month])]:rounded-none',
     // range Start
-    'data-[range-start]:bg-workspace-accent data-[range-start]:text-white data-[range-start]:font-semibold data-[range-start]:shadow-active',
+    'data-[range-start]:bg-background-accent data-[range-start]:text-foreground-inverse! data-[range-start]:font-semibold data-[range-start]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
     // range middle
-    'data-[range-middle]:rounded-none data-[range-middle]:bg-neutral-100',
+    'data-[range-middle]:rounded-none data-[range-middle]:bg-background-default-secondary',
     // range End
-    'data-[range-end]:bg-workspace-accent data-[range-end]:text-white data-[range-end]:font-semibold data-[range-end]:shadow-active',
-    // Outside months
-    '[&[data-outside-month]]:text-transparent [&[data-outside-month]]:bg-transparent [&[data-outside-month]]:shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
+    'data-[range-end]:bg-background-accent data-[range-end]:text-foreground-inverse! data-[range-end]:font-semibold data-[range-end]:shadow-[0px_0px_0px_2px_rgba(22,153,88,0.12)]',
+    // Outside months - must come after range styles to override
+    '[&[data-outside-month]]:!text-transparent [&[data-outside-month]]:!bg-transparent [&[data-outside-month]]:!shadow-none [&[data-outside-month]:not([data-selected])]:pointer-events-none',
     // Disabled
-    'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[disabled]:text-foreground-default-tertiary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     // Unavailable
     'data-[unavailable]:line-through',
-    'dark:data-[range-middle]:hover:bg-accent/0',
-    // hover
-    'dark:hover:text-accent-foreground',
     // focus
     'focus:border-ring focus:ring-ring/50 focus:relative',
+    // Default text color
+    'text-foreground-default-primary',
     // inner spans
-    '[&>span]:text-xs [&>span]:opacity-70',
+    '[&>span]:text-sm [&>span]:opacity-70',
     className
   )}
   {...restProps}