@invopop/popui 0.1.4-beta.2 → 0.1.4-beta.20

package/dist/DatePicker.svelte

@@ -3,13 +3,16 @@
   import RangeCalendar from './range-calendar/range-calendar.svelte'
   import { parseDate, type DateValue } from '@internationalized/date'
   import type { DateRange } from 'bits-ui'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import { Calendar } from '@invopop/ui-icons'
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
   import Transition from 'svelte-transition'
   import type { DatePickerProps } from './types'
   import { clickOutside } from './clickOutside'
   import BaseButton from './BaseButton.svelte'
-  import { datesFromToday, toCalendarDate } from './helpers'
+  import { datesFromToday, toCalendarDate, resolveIcon } from './helpers'
+  import { buttonVariants } from './button/button.svelte'
+  import { offset, flip, shift } from 'svelte-floating-ui/dom'
+  import { createFloatingActions } from 'svelte-floating-ui'
+  import { portal } from 'svelte-portal'
 
   const {
     startOfThisWeek,
@@ -109,23 +112,47 @@
 
   let {
     label = 'Date',
-    position = 'left',
+    placement = 'bottom-start',
     from = '',
     to = '',
-    onSelect
+    onSelect,
+    stackLeft = false,
+    stackRight = false,
+    icon = undefined,
+    iconTheme = 'default'
   }: DatePickerProps = $props()
 
+  const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    placement,
+    middleware: [offset(8), flip(), shift()]
+  })
+
+  let resolvedIcon: IconSource | undefined = $state()
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
   let selectedPeriod = $state('custom')
   let value = $state<DateRange>({
     start: undefined,
     end: undefined
   })
   let isOpen = $state(false)
+  let isStacked = $derived(stackLeft || stackRight)
+  let hasSelectedDates = $derived(value.start !== undefined)
   let styles = $derived(
-    clsx({
-      'border-border-selected-bold shadow-active': isOpen,
-      'border-border-secondary hover:border-border-default-secondary-hover': !isOpen
-    })
+    isStacked
+      ? buttonVariants({
+          variant: 'ghost',
+          stackedLeft: stackLeft,
+          stackedRight: stackRight
+        })
+      : clsx('border backdrop-blur-sm backdrop-filter', {
+          'border-border-selected-bold shadow-active': isOpen,
+          'border-border-default-secondary hover:border-border-default-secondary-hover': !isOpen
+        })
   )
   let selectedLabel = $state(label)
 
@@ -137,9 +164,19 @@
 
   $effect(() => {
     if (from) {
+      const startDate = parseDate(from)
+      const endDate = to ? parseDate(to) : undefined
+
       value = {
-        start: parseDate(from),
-        end: to ? parseDate(to) : undefined
+        start: startDate,
+        end: endDate
+      }
+
+      // Update label directly without calling getLabel() to avoid circular dependency
+      if (startDate === endDate) {
+        selectedLabel = getDisplayFromValue(startDate)
+      } else {
+        selectedLabel = `${getDisplayFromValue(startDate)} → ${getDisplayFromValue(endDate)}`
       }
       return
     }
@@ -183,19 +220,34 @@
 </script>
 
 <div>
-  <div class="relative">
-    <button
-      onclick={() => {
-        isOpen = !isOpen
-      }}
-      class="{styles} datepicker-trigger w-full py-1.25 pl-7 pr-2 text-left border border-border-default-secondary rounded-lg text-foreground placeholder-foreground text-base cursor-pointer"
+  <button
+    use:floatingRef
+    onclick={() => {
+      isOpen = !isOpen
+    }}
+    class="{styles} {isStacked
+      ? 'h-7 py-1.5'
+      : 'py-1.5'} datepicker-trigger flex items-center w-full {resolvedIcon
+      ? 'pl-7'
+      : 'pl-2'} pr-2 text-left rounded-lg bg-background cursor-pointer relative overflow-hidden"
+  >
+    {#if resolvedIcon}
+      <Icon
+        src={resolvedIcon}
+        theme={iconTheme}
+        class="h-4 w-4 absolute top-1.5 left-2 text-foreground-default-secondary"
+      />
+    {/if}
+    <span
+      class="flex-1 text-base truncate {hasSelectedDates
+        ? 'text-foreground'
+        : 'text-foreground-default-secondary'}"
     >
       {selectedLabel}
-    </button>
-    <Icon src={Calendar} class="h-4 w-4 absolute top-2 left-2 text-foreground-default-secondary" />
-  </div>
+    </span>
+  </button>
 
-  <div class="relative">
+  {#if isOpen}
     <Transition
       show={isOpen}
       enter="transition ease-out duration-100"
@@ -207,9 +259,9 @@
     >
       <!-- @ts-ignore -->
       <div
-        class:left-0={position === 'left'}
-        class:right-0={position === 'right'}
-        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute right-0 top-2 z-40 border border-border"
+        use:portal
+        use:floatingContent
+        class="bg-background inline-flex flex-col shadow-lg rounded-xl absolute z-1001 border border-border"
         use:clickOutside
         onclick_outside={() => {
           if (!isOpen) return
@@ -239,5 +291,5 @@
         </div>
       </div>
     </Transition>
-  </div>
+  {/if}
 </div>

package/dist/DropdownSelect.svelte

@@ -76,10 +76,9 @@
   function handleClick(val: AnyProp) {
     value = val
 
-    onSelect?.(value)
-
     if (multiple) return
 
+    onSelect?.(value)
     selectDropdown?.toggle()
   }
 
@@ -90,6 +89,7 @@
     if (isEqual(value, val)) return
 
     value = val
+    onSelect?.(value)
   }
 </script>
 

package/dist/InputText.svelte

@@ -13,6 +13,9 @@
     disabled = false,
     value = $bindable(''),
     focusOnLoad = false,
+    stackLeft = false,
+    stackRight = false,
+    widthClass = '',
     oninput,
     onkeydown,
     onfocus,
@@ -30,21 +33,30 @@
     }, 750)
   }
 
+  let isStacked = $derived(stackLeft || stackRight)
+
   let inputStyles = $derived(
     clsx(
-      'h-8 w-full rounded-lg border px-2 py-1 text-base tracking-tight bg-background-default-default backdrop-blur-[2px] caret-foreground-accent',
+      'px-2 py-1 text-base tracking-tight bg-background-default-default backdrop-blur-[2px] caret-foreground-accent',
       'placeholder:text-foreground-default-tertiary',
       'outline-none focus:ring-0',
+      widthClass,
       {
+        // Width defaults
+        'w-full': !isStacked && !widthClass,
+        // Stacked styles
+        'h-[26px] border-0 rounded-none hover:bg-background-default-secondary focus:bg-background-default-default':
+          isStacked,
+        'rounded-l-lg': isStacked && stackLeft && !stackRight,
+        'rounded-r-lg': isStacked && stackRight && !stackLeft,
+        // Non-stacked styles
+        'h-8 rounded-lg border': !isStacked,
         'pointer-events-none bg-background-default-secondary border-border-default-default':
-          disabled
-      },
-      {
-        'text-foreground-critical border-border-critical-bold caret-foreground-critical': errorText
-      },
-      {
+          !isStacked && disabled,
+        'text-foreground-critical border-border-critical-bold caret-foreground-critical':
+          !isStacked && errorText,
         'text-foreground border-border-default-secondary hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active':
-          !errorText && !disabled
+          !isStacked && !errorText && !disabled
       }
     )
   )

package/dist/StepIconList.svelte

@@ -14,14 +14,14 @@
 {/snippet}
 
 <TooltipProvider>
-  <div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 items-center">
+  <div class="flex flex-col space-y-2 sm:flex-row sm:flex-nowrap sm:space-y-0 items-center">
     {#each mainIcons as icon, i (i)}
       <Tooltip>
         <TooltipTrigger class="shrink-0">
           <div
-            class="p-1.5 rounded-md border border-border flex items-center space-x-1 bg-background text-icon"
+            class="p-1.5 rounded-md border border-border flex items-center space-x-1 bg-background text-icon shrink-0"
           >
-            <img src={icon.url} alt={icon.name} class="size-4" />
+            <img src={icon.url} alt={icon.name} class="size-4 shrink-0" />
           </div>
         </TooltipTrigger>
         <TooltipContent>{icon.name}</TooltipContent>
@@ -35,7 +35,7 @@
       {@render separator()}
       <Tooltip>
         <TooltipTrigger class="shrink-0">
-          <div class="flex items-center justify-center text-icon font-medium text-base size-7">
+          <div class="flex items-center justify-center text-icon font-medium text-base size-7 shrink-0">
             +{restIcons.length}
           </div>
         </TooltipTrigger>

package/dist/data-table/cells/boolean-cell.svelte

@@ -11,6 +11,6 @@
 
 {#if shouldShow && config?.icon}
   <div class="flex justify-center">
-    <Icon src={config.icon} class={config.iconClass ?? 'size-4'} />
+    <Icon src={config.icon} class={config.iconClass ?? 'size-4 text-icon'} />
   </div>
 {/if}

package/dist/data-table/cells/uuid-cell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ButtonUuidCopy from '../../ButtonUuidCopy.svelte'
+  import type { UuidCellConfig } from '../data-table-types.js'
+
+  let { value, config }: { value: string; config?: UuidCellConfig } = $props()
+</script>
+
+<ButtonUuidCopy
+  uuid={value}
+  prefixLength={config?.prefixLength}
+  suffixLength={config?.suffixLength}
+  full={config?.full}
+  disabled={config?.disabled}
+  oncopied={config?.onCopy}
+/>

package/dist/data-table/cells/uuid-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { UuidCellConfig } from '../data-table-types.js';
+type $$ComponentProps = {
+    value: string;
+    config?: UuidCellConfig;
+};
+declare const UuidCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type UuidCell = ReturnType<typeof UuidCell>;
+export default UuidCell;

package/dist/data-table/create-columns.js

@@ -4,6 +4,8 @@ import BooleanCell from './cells/boolean-cell.svelte';
 import TagCell from './cells/tag-cell.svelte';
 import DateCell from './cells/date-cell.svelte';
 import CurrencyCell from './cells/currency-cell.svelte';
+import UuidCell from './cells/uuid-cell.svelte';
+import { renderSnippet } from './render-helpers.js';
 export function createColumns(columns) {
     return columns.map((col) => {
         const tanstackCol = {
@@ -19,10 +21,17 @@ export function createColumns(columns) {
         };
         // Cell renderer
         if (col.cell) {
-            // Custom cell renderer
+            // Custom cell renderer - can be a Snippet or a function
             tanstackCol.cell = ({ row }) => {
                 const value = col.accessorKey ? row.original[col.accessorKey] : undefined;
-                return col.cell(value, row.original);
+                // Check if it's a function or a Snippet
+                if (typeof col.cell === 'function') {
+                    return col.cell(value, row.original);
+                }
+                else {
+                    // It's a Snippet, render it with the row data
+                    return renderSnippet(col.cell, row.original);
+                }
             };
         }
         else if (col.cellType) {
@@ -40,6 +49,8 @@ export function createColumns(columns) {
                         return renderComponent(DateCell, { value: value, config: col.cellConfig });
                     case 'currency':
                         return renderComponent(CurrencyCell, { value: value, config: col.cellConfig });
+                    case 'uuid':
+                        return renderComponent(UuidCell, { value: value, config: col.cellConfig });
                     default:
                         return value;
                 }

package/dist/data-table/data-table-pagination.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from '../button/button.svelte'
   import InputSelect from '../InputSelect.svelte'
+  import InputText from '../InputText.svelte'
   import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
   import { cn } from '../utils.js'
   import type { DataTablePaginationProps } from './data-table-types.js'
@@ -16,26 +17,37 @@
     selectedSlot,
     unselectedSlot,
     onPageChange,
-    onPageSizeChange
+    onPageSizeChange,
+    data,
+    rowCount,
+    manualPagination
   }: DataTablePaginationProps<any> = $props()
 
   let currentPage = $derived(table.getState().pagination.pageIndex + 1)
-  let totalPages = $derived(table.getPageCount())
-  let totalItems = $derived(table.getFilteredRowModel().rows.length)
   let rowsPerPage = $derived(table.getState().pagination.pageSize)
+  let totalItems = $derived.by(() => {
+    // Use direct props for reactivity
+    if (manualPagination && rowCount !== undefined) {
+      return rowCount
+    }
+    // For client-side pagination, use data length directly
+    return data?.length ?? 0
+  })
+  // Calculate totalPages from reactive values instead of calling table.getPageCount()
+  let totalPages = $derived(Math.ceil(totalItems / rowsPerPage) || 1)
   let hasSelection = $derived(Object.keys(table.getState().rowSelection).length > 0)
 
   let pageInputValue = $derived(`${currentPage}`)
 
-  function handlePageInput(event: Event) {
-    const target = event.target as HTMLInputElement
-    const value = parseInt(target.value)
-    if (value >= 1 && value <= totalPages) {
-      table.setPageIndex(value - 1)
-      onPageChange?.(value)
-    } else if (target.value === '') {
-      // Allow empty input temporarily
-      pageInputValue = ''
+  function handlePageInput(value: string) {
+    const numValue = parseInt(value)
+    if (numValue >= 1 && numValue <= totalPages) {
+      if (manualPagination) {
+        table.setPagination({ pageIndex: numValue - 1, pageSize: rowsPerPage })
+      } else {
+        table.setPageIndex(numValue - 1)
+      }
+      onPageChange?.(numValue)
     }
   }
 
@@ -43,9 +55,14 @@
     const target = event.target as HTMLInputElement
     const value = parseInt(target.value)
     if (isNaN(value) || value < 1) {
-      pageInputValue = `${currentPage}`
+      target.value = `${currentPage}`
     } else if (value > totalPages) {
-      table.setPageIndex(totalPages - 1)
+      target.value = `${totalPages}`
+      if (manualPagination) {
+        table.setPagination({ pageIndex: totalPages - 1, pageSize: rowsPerPage })
+      } else {
+        table.setPageIndex(totalPages - 1)
+      }
       onPageChange?.(totalPages)
     }
   }
@@ -71,7 +88,11 @@
             size="md"
             icon={ScrollLeft}
             onclick={() => {
-              table.setPageIndex(0)
+              if (manualPagination) {
+                table.setPagination({ pageIndex: 0, pageSize: rowsPerPage })
+              } else {
+                table.setPageIndex(0)
+              }
               onPageChange?.(1)
             }}
             disabled={currentPage === 1}
@@ -84,7 +105,13 @@
             icon={ArrowLeft}
             onclick={() => {
               const newPage = currentPage - 1
-              table.previousPage()
+              if (manualPagination) {
+                // For manual pagination, bypass TanStack's navigation and use setPagination directly
+                // to avoid clamping issues with stale pageCount
+                table.setPagination({ pageIndex: newPage - 1, pageSize: rowsPerPage })
+              } else {
+                table.previousPage()
+              }
               onPageChange?.(newPage)
             }}
             disabled={currentPage === 1}
@@ -93,16 +120,19 @@
           />
         </div>
         <div class="flex items-center gap-1.5">
-          <input
-            type="number"
-            bind:value={pageInputValue}
-            min="1"
-            max={totalPages}
-            oninput={handlePageInput}
-            onblur={handlePageBlur}
-            class="w-12 h-8 px-2 py-1 text-base tracking-tight rounded-lg border border-border-default-secondary bg-background-default-default backdrop-blur-[2px] caret-foreground-accent text-foreground outline-none focus:ring-0 hover:border-border-default-secondary-hover focus:border-border-selected-bold focus:shadow-active [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-          />
-          <span class="text-sm text-foreground-default-secondary whitespace-nowrap">
+          <div
+            class="w-12 [&>div]:gap-0 [&_input]:!h-7 [&_input]:[appearance:textfield] [&_input]:[&::-webkit-outer-spin-button]:appearance-none [&_input]:[&::-webkit-inner-spin-button]:appearance-none"
+          >
+            <InputText
+              bind:value={pageInputValue}
+              type="number"
+              min="1"
+              max={totalPages}
+              oninput={handlePageInput}
+              onblur={handlePageBlur}
+            />
+          </div>
+          <span class="text-base text-foreground-default-secondary whitespace-nowrap">
             / {totalPages}
           </span>
         </div>
@@ -113,7 +143,13 @@
             icon={ArrowRight}
             onclick={() => {
               const newPage = currentPage + 1
-              table.nextPage()
+              if (manualPagination) {
+                // For manual pagination, bypass TanStack's navigation and use setPagination directly
+                // to avoid clamping issues with stale pageCount
+                table.setPagination({ pageIndex: newPage - 1, pageSize: rowsPerPage })
+              } else {
+                table.nextPage()
+              }
               onPageChange?.(newPage)
             }}
             disabled={currentPage === totalPages}
@@ -125,7 +161,11 @@
             size="md"
             icon={ScrollRight}
             onclick={() => {
-              table.setPageIndex(totalPages - 1)
+              if (manualPagination) {
+                table.setPagination({ pageIndex: totalPages - 1, pageSize: rowsPerPage })
+              } else {
+                table.setPageIndex(totalPages - 1)
+              }
               onPageChange?.(totalPages)
             }}
             disabled={currentPage === totalPages}
@@ -135,7 +175,7 @@
         </div>
       </div>
       {#if showRowsPerPage}
-        <div class="w-[105px]">
+        <div class="w-[105px] [&_select]:!h-7 [&_select]:!py-[4px]">
           <InputSelect
             value={`${rowsPerPage}`}
             options={rowsPerPageOptions.map((size) => ({
@@ -145,7 +185,9 @@
             onchange={(value) => {
               const size = Number(value)
               table.setPageSize(size)
+              table.setPageIndex(0)
               onPageSizeChange?.(size)
+              onPageChange?.(1)
             }}
             placeholder="Rows per page"
             disablePlaceholder={true}
@@ -155,7 +197,7 @@
       {/if}
     </div>
     {#if totalItems > 0}
-      <span class="text-sm text-foreground-default-secondary">
+      <span class="text-base text-foreground-default-secondary">
         {formatNumber(totalItems)}
         {itemsLabel}
       </span>

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

@@ -53,6 +53,10 @@ export function createSvelteTable(options) {
     }
     updateOptions();
     $effect.pre(() => {
+        // Access data and columns to track them - this reads but doesn't write
+        // so it won't cause infinite loops
+        void options.data;
+        void options.columns;
         updateOptions();
     });
     return table;

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

@@ -2,7 +2,7 @@ import type { Component, Snippet } from 'svelte';
 import type { StatusType, AnyProp, TableAction, EmptyStateProps } from '../types.js';
 import type { IconSource } from '@steeze-ui/svelte-icon';
 import type { Table } from '@tanstack/table-core';
-export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'custom';
+export type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'uuid' | 'custom';
 export interface TextCellConfig {
     className?: string;
 }
@@ -26,14 +26,21 @@ export interface DateCellConfig {
 export interface CurrencyCellConfig {
     className?: string;
 }
-export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig;
+export interface UuidCellConfig {
+    prefixLength?: number;
+    suffixLength?: number;
+    full?: boolean;
+    disabled?: boolean;
+    onCopy?: (value: string) => void;
+}
+export type CellConfig = TextCellConfig | BooleanCellConfig | TagCellConfig | DateCellConfig | CurrencyCellConfig | UuidCellConfig;
 export interface DataTableColumn<TData> {
     id: string;
     accessorKey?: keyof TData;
     header?: string;
     cellType?: CellType;
     cellConfig?: CellConfig;
-    cell?: (value: any, row: TData) => Snippet | Component | string;
+    cell?: Snippet<[TData]> | ((value: any, row: TData) => Snippet | Component | string);
     enableSorting?: boolean;
     enableHiding?: boolean;
     enableResizing?: boolean;
@@ -57,8 +64,13 @@ export interface DataTableProps<TData> {
     filters?: Snippet;
     paginationSelectedSlot?: Snippet;
     paginationUnselectedSlot?: Snippet;
+    manualPagination?: boolean;
+    pageCount?: number;
+    rowCount?: number;
     onPageChange?: (pageIndex: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
+    onSortingChange?: (columnId: string, direction: 'asc' | 'desc') => void;
+    getRowClassName?: (row: TData) => string;
 }
 export interface DataTablePaginationProps<T> {
     table: Table<T>;
@@ -72,4 +84,7 @@ export interface DataTablePaginationProps<T> {
     unselectedSlot?: Snippet;
     onPageChange?: (pageIndex: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
+    data?: T[];
+    rowCount?: number;
+    manualPagination?: boolean;
 }

package/dist/data-table/data-table.svelte

@@ -46,8 +46,13 @@
     filters,
     paginationSelectedSlot,
     paginationUnselectedSlot,
+    manualPagination = false,
+    pageCount,
+    rowCount,
     onPageChange,
-    onPageSizeChange
+    onPageSizeChange,
+    onSortingChange,
+    getRowClassName
   }: DataTableProps<TData> = $props()
 
   const enableSelection = !disableSelection
@@ -71,7 +76,12 @@
 
   // Build TanStack columns from config
   const columns = $derived.by(() =>
-    buildColumns<TData>(columnConfig, enableSelection, RowActions, getRowActions !== undefined || rowActions.length > 0)
+    buildColumns<TData>(
+      columnConfig,
+      enableSelection,
+      RowActions,
+      getRowActions !== undefined || rowActions.length > 0
+    )
   )
 
   // Calculate initial column sizes based on available width
@@ -96,14 +106,13 @@
   })
 
   const table = setupTable({
-    get data() {
-      return data
-    },
-    get columns() {
-      return columns
-    },
+    getData: () => data,
+    getColumns: () => columns,
     enableSelection,
     enablePagination,
+    manualPagination,
+    pageCount,
+    getRowCount: () => rowCount,
     getRowSelection: () => rowSelection,
     getColumnVisibility: () => columnVisibility,
     getSorting: () => sorting,
@@ -123,18 +132,23 @@
 
 {#snippet StickyCellWrapper({
   children,
-  align = 'left'
+  align = 'left',
+  isFirst = false,
+  isLast = false
 }: {
   children: any
   align?: 'left' | 'right'
+  isFirst?: boolean
+  isLast?: boolean
 })}
   <div
     class={cn(
-      'h-10 flex items-center relative group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected',
-      align === 'right' ? 'justify-end pl-3 pr-6' : 'pl-6 pr-3'
+      'absolute inset-0 flex items-center group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected px-3',
+      align === 'right' ? 'justify-end' : '',
+      { 'pl-6': isFirst, 'pr-6': isLast }
     )}
   >
-    <div class="relative z-10">
+    <div class="relative z-10 flex items-center">
       {@render children()}
     </div>
   </div>
@@ -181,7 +195,17 @@
         <BaseTableHeaderOrderBy
           sortDirection={column.getIsSorted() === 'asc' ? 'asc' : 'desc'}
           isActive={column.getIsSorted() !== false}
-          onOrderBy={(direction) => column.toggleSorting(direction === 'desc')}
+          onOrderBy={(direction) => {
+            column.toggleSorting(direction === 'desc')
+            // Reset to first page when sorting changes (same as page size change)
+            if (manualPagination) {
+              table.setPageIndex(0)
+              onPageChange?.(1)
+            }
+            if (onSortingChange) {
+              onSortingChange(column.id, direction)
+            }
+          }}
           onHide={() => column.toggleVisibility(false)}
         />
       </BaseDropdown>
@@ -189,20 +213,22 @@
   {/if}
 {/snippet}
 
-<div class="flex flex-col h-screen">
+<div class="flex flex-col h-full">
   <DataTableToolbar {table} {filters} />
   <div class="flex-1 overflow-hidden flex flex-col">
-    <div bind:this={containerRef} class="relative bg-background flex-1 overflow-auto">
-      <Table.Root>
+    <div bind:this={containerRef} class="relative bg-background flex-1 overflow-auto" style="overscroll-behavior-x: none;">
+      <Table.Root class={data.length === 0 ? 'h-full' : 'h-auto'}>
         <Table.Header>
           {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
             <Table.Row class="hover:!bg-transparent border-b border-border">
               {#each headerGroup.headers as header, index (header.id)}
                 {@const isLastScrollable = index === headerGroup.headers.length - 2}
+                {@const isFirstHeader = index === 0}
+                {@const isLastHeader = index === headerGroup.headers.length - 1}
                 <Table.Head
                   colspan={header.colSpan}
                   style={getHeaderStyle(header, isLastScrollable)}
-                  class={getHeaderClasses(header, isLastScrollable)}
+                  class={getHeaderClasses(header, isLastScrollable, isFirstHeader, isLastHeader)}
                 >
                   {#if !header.isPlaceholder}
                     {#if typeof header.column.columnDef.header === 'string'}
@@ -251,24 +277,28 @@
           {#each table.getRowModel().rows as row (row.id)}
             <Table.Row
               data-state={row.getIsSelected() ? 'selected' : undefined}
-              class="border-b border-border"
+              class={cn('border-b border-border', getRowClassName?.(row.original as TData))}
               onclick={() => onRowClick?.(row.original as TData)}
             >
               {#each row.getVisibleCells() as cell, index (cell.id)}
-                {@const isLastScrollable = index === row.getVisibleCells().length - 2}
                 {@const visibleCells = row.getVisibleCells()}
+                {@const isLastScrollable = index === visibleCells.length - 2}
                 {@const firstDataColumnIndex = visibleCells.findIndex(
                   (c) => c.column.id !== 'select' && c.column.id !== 'actions'
                 )}
                 {@const isFirstDataColumn = index === firstDataColumnIndex}
+                {@const isFirstCell = index === 0}
+                {@const isLastCell = index === visibleCells.length - 1}
                 <Table.Cell
                   style={getCellStyle(cell, isLastScrollable)}
-                  class={getCellClasses(cell, isLastScrollable, isFirstDataColumn)}
+                  class={getCellClasses(cell, isLastScrollable, isFirstDataColumn, isFirstCell, isLastCell)}
                 >
                   {#if cell.column.id === 'actions'}
                     {@render StickyCellWrapper({
                       align: 'right',
-                      children: CellContent
+                      children: CellContent,
+                      isFirst: isFirstCell,
+                      isLast: isLastCell
                     })}
                     {#snippet CellContent()}
                       <FlexRender
@@ -279,7 +309,9 @@
                   {:else if cell.column.id === 'select'}
                     {@render StickyCellWrapper({
                       align: 'left',
-                      children: CellContent
+                      children: CellContent,
+                      isFirst: isFirstCell,
+                      isLast: isLastCell
                     })}
                     {#snippet CellContent()}
                       <FlexRender
@@ -297,13 +329,15 @@
               {/each}
             </Table.Row>
           {:else}
-            <Table.Row>
-              <Table.Cell colspan={columns.length} class="h-48">
-                <EmptyState
-                  iconSource={emptyState.iconSource}
-                  title={emptyState.title}
-                  description={emptyState.description}
-                />
+            <Table.Row class="hover:!bg-transparent h-full">
+              <Table.Cell colspan={columns.length} class="h-full !p-0">
+                <div class="flex items-center justify-center h-full w-full">
+                  <EmptyState
+                    iconSource={emptyState.iconSource}
+                    title={emptyState.title}
+                    description={emptyState.description}
+                  />
+                </div>
               </Table.Cell>
             </Table.Row>
           {/each}
@@ -313,6 +347,9 @@
     {#if enablePagination}
       <DataTablePagination
         {table}
+        {data}
+        {rowCount}
+        {manualPagination}
         selectedSlot={paginationSelectedSlot}
         unselectedSlot={paginationUnselectedSlot}
         {onPageChange}

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

@@ -11,6 +11,11 @@ export declare function buildColumns<TData>(columnConfig: DataTableColumn<TData>
 interface TableSetupOptions<TData> {
     enableSelection: boolean;
     enablePagination: boolean;
+    manualPagination?: boolean;
+    pageCount?: number;
+    getRowCount?: () => number | undefined;
+    getData?: () => TData[];
+    getColumns?: () => any[];
     getRowSelection: () => RowSelectionState;
     getColumnVisibility: () => VisibilityState;
     getSorting: () => SortingState;
@@ -29,8 +34,5 @@ interface TableSetupOptions<TData> {
 /**
  * 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 declare function setupTable<TData>(options: TableSetupOptions<TData>): import("@tanstack/table-core").Table<unknown>;
 export {};

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

@@ -55,6 +55,12 @@ export function setupTable(options) {
                 return options.getColumnOrder();
             }
         },
+        get data() {
+            return options.getData?.() ?? [];
+        },
+        get columns() {
+            return options.getColumns?.() ?? [];
+        },
         enableRowSelection: options.enableSelection,
         enableColumnResizing: true,
         columnResizeMode: 'onChange',
@@ -116,15 +122,28 @@ export function setupTable(options) {
             }
         },
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: options.enablePagination ? getPaginationRowModel() : undefined,
-        getSortedRowModel: getSortedRowModel()
+        getPaginationRowModel: options.enablePagination && !options.manualPagination ? getPaginationRowModel() : undefined,
+        getSortedRowModel: getSortedRowModel(),
+        // Manual pagination configuration
+        manualPagination: options.manualPagination
     };
-    // Add data and columns as getters if provided
-    if (options.data !== undefined) {
-        tableOptions.data = options.data;
-    }
-    if (options.columns !== undefined) {
-        tableOptions.columns = options.columns;
+    // 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

@@ -6,7 +6,7 @@ export declare function getHeaderStyle<TData>(header: Header<TData, unknown>, is
 /**
  * Calculate CSS classes for table headers
  */
-export declare function getHeaderClasses<TData>(header: Header<TData, unknown>, isLastScrollable: boolean): string;
+export declare function getHeaderClasses<TData>(header: Header<TData, unknown>, isLastScrollable: boolean, isFirstHeader?: boolean, isLastHeader?: boolean): string;
 /**
  * Calculate inline styles for table cells
  */
@@ -14,4 +14,4 @@ export declare function getCellStyle<TData>(cell: Cell<TData, unknown>, isLastSc
 /**
  * Calculate CSS classes for table cells
  */
-export declare function getCellClasses<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean, isFirstDataColumn?: boolean): string;
+export declare function getCellClasses<TData>(cell: Cell<TData, unknown>, isLastScrollable: boolean, isFirstDataColumn?: boolean, isFirstCell?: boolean, isLastCell?: boolean): string;

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

@@ -15,12 +15,18 @@ export function getHeaderStyle(header, isLastScrollable) {
 /**
  * Calculate CSS classes for table headers
  */
-export function getHeaderClasses(header, isLastScrollable) {
+export function getHeaderClasses(header, isLastScrollable, isFirstHeader = false, isLastHeader = false) {
+    const isSticky = header.id === 'actions' || header.id === 'select';
     return clsx('relative whitespace-nowrap overflow-hidden', {
-        'sticky right-0 text-right bg-background pl-3 pr-6': header.id === 'actions',
-        'sticky left-0 bg-background z-10 pl-6 pr-3': header.id === 'select',
+        'sticky right-0 text-right bg-background': header.id === 'actions',
+        'sticky left-0 bg-background z-10': header.id === 'select',
         'w-full': isLastScrollable,
-        'hover:!bg-transparent': !header.column.getCanSort()
+        'hover:!bg-transparent': !header.column.getCanSort(),
+        '!pl-6': isFirstHeader && !isSticky,
+        '!pr-6': isLastHeader && !isSticky,
+        'px-3': isSticky,
+        'pl-6': isSticky && isFirstHeader,
+        'pr-6': isSticky && isLastHeader
     });
 }
 /**
@@ -39,11 +45,15 @@ export function getCellStyle(cell, isLastScrollable) {
 /**
  * Calculate CSS classes for table cells
  */
-export function getCellClasses(cell, isLastScrollable, isFirstDataColumn = false) {
+export function getCellClasses(cell, isLastScrollable, isFirstDataColumn = false, isFirstCell = false, isLastCell = false) {
+    const isSticky = cell.column.id === 'actions' || cell.column.id === 'select';
     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',
+        'sticky right-0 text-right': cell.column.id === 'actions',
+        'sticky left-0 z-10': cell.column.id === 'select',
+        '!p-0': isSticky,
         'w-full': isLastScrollable,
-        'font-medium': isFirstDataColumn
+        'font-medium': isFirstDataColumn,
+        '!pl-6': isFirstCell && !isSticky,
+        '!pr-6': isLastCell && !isSticky
     });
 }

package/dist/table/table-cell.svelte

@@ -16,7 +16,7 @@
   bind:this={ref}
   data-slot="table-cell"
   class={cn(
-    'py-[9px] [&:has([role=menu])]:py-0 [&:has([data-uuid-copy])]:py-0 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1 [&:has([role=menu])]:bg-white [&:has([type=checkbox])]:bg-white',
+    'py-[9px] [&:has([role=menu])]:py-0 [&:has([data-uuid-copy])]:py-0 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 [&:has([role=menu])]:bg-white [&:has([type=checkbox])]:bg-white',
     className
   )}
   {...restProps}

package/dist/table/table-head.svelte

@@ -13,7 +13,7 @@
   bind:this={ref}
   data-slot="table-head"
   class={cn(
-    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:pr-0 px-3 hover:bg-background-default-secondary transition-colors',
+    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:pr-0 px-3 hover:bg-background-default-secondary',
     className
   )}
   {...restProps}

package/dist/table/table-row.svelte

@@ -19,7 +19,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected transition-colors h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected',
+    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected',
     className
   )}
   {oncontextmenu}

package/dist/table/table.svelte

@@ -8,8 +8,8 @@
   }: WithElementRef<HTMLTableAttributes> = $props()
 </script>
 
-<div data-slot="table-container" class="relative w-full">
-  <table bind:this={ref} data-slot="table" class={cn('caption-bottom', className)}>
+<div data-slot="table-container" class="relative w-full h-full">
+  <table bind:this={ref} data-slot="table" class={cn('caption-bottom w-full', className)}>
     {@render children?.()}
   </table>
 </div>

package/dist/types.d.ts

@@ -368,13 +368,17 @@ export interface DataListItemProps {
 }
 export interface DatePickerProps {
     label?: string;
-    position?: 'left' | 'right';
+    placement?: Placement;
     from?: string;
     to?: string;
     onSelect?: (date: {
         from: string;
         to: string;
     }) => void;
+    stackLeft?: boolean;
+    stackRight?: boolean;
+    icon?: IconSource | string;
+    iconTheme?: IconTheme;
 }
 export interface DrawerContextProps {
     items?: DrawerOption[];
@@ -519,6 +523,9 @@ export interface InputTextProps {
     disabled?: boolean;
     value?: string | number;
     focusOnLoad?: boolean;
+    stackLeft?: boolean;
+    stackRight?: boolean;
+    widthClass?: string;
     oninput?: (value: string) => void;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.2",
+  "version": "0.1.4-beta.20",
   "repository": {
     "url":  "https://github.com/invopop/popui"
   },