@customafk/lunas-ui 0.1.21 → 0.1.22

package/dist/features/tables/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["UITableNameDisplay: React.FC<NameDisplayProps>","Tooltip","UITablePhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>>","Tooltip","UITableUserDataDisplay: React.FC<Props>","Avatar","Checkbox","CheckboxPrimitive","UITableWrapper: React.FC<React.PropsWithChildren<React.ComponentProps<'div'>>>","UITableHeader: React.FC<React.PropsWithChildren>","UITableHeaderRow: React.FC<React.PropsWithChildren>","UITableHeaderCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'th'> & {\n      header: Header<unknown, unknown>;\n      isPinned: ColumnPinningPosition;\n      isResizing: boolean;\n      isAllRowsSelected: boolean;\n    }\n  >\n>","Checkbox","UITableHeaderCellOption: React.FC<{\n  isPinned: ColumnPinningPosition;\n  className?: string;\n  isVisible?: boolean;\n  onLeftPin: (pos: 'left' | 'right' | false) => void;\n  onRightPin: (pos: 'left' | 'right' | false) => void;\n  onUnpin: (pos: 'left' | 'right' | false) => void;\n  onToggleVisibilityHandler: (visible: AnyEntity) => void;\n}>","DropdownMenu","UITableBody: React.FC<React.PropsWithChildren<React.ComponentProps<'tbody'> & { height: number }>>","UITableRow: React.FC<\n  React.ComponentProps<'tr'> & {\n    row: Row<unknown>;\n    virtualRow: VirtualItem;\n    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;\n  }\n>","UITableCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'td'> & {\n      cell: Cell<unknown, unknown>;\n    }\n  >\n>","EmptyDisplay: React.FC","UITableFooter: React.FC<React.PropsWithChildren>","UITableContainer: React.FC<React.PropsWithChildren>","colSizes: { [key: string]: number | undefined }","ColumnVisibility: React.FC<{\n  checked: boolean;\n  title: string;\n  onCheckedChange?: (checked: boolean) => void;\n}>","Checkbox","Separator","INITIAL_STATE: InitialTableState","UITableTooltipFilter: React.FC<React.ComponentProps<typeof Input>>","ActionButton: React.FC<React.PropsWithChildren>","UITableTooltipActions: React.FC","UITableTooltip: React.FC<React.PropsWithChildren>"],"sources":["../../../packages/components/features/tables/components/atoms/name-display.tsx","../../../packages/components/features/tables/components/atoms/phone-number.tsx","../../../packages/components/features/tables/components/atoms/user.tsx","../../../packages/components/ui/checkbox.tsx","../../../packages/components/features/tables/hooks/use-table-context.ts","../../../packages/components/features/tables/hooks/use-table-rows-context.ts","../../../packages/components/features/tables/components/table.tsx","../../../packages/components/features/tables/components/table/filter.tsx","../../../packages/components/features/tables/components/table/provider.tsx","../../../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\n\ntype NameDisplayProps = {\n  name: string;\n};\n\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"max-w-80 whitespace-pre-line text-wrap break-keep\">\n        {name}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nexport const UITablePhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-secondary-foreground text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n","import { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { Paragraph } from '@/components/typography/paragraph';\n\ntype Props = {\n  uuid: string;\n  username: string;\n  email: string;\n};\n\nexport const UITableUserDataDisplay: React.FC<Props> = ({ uuid, username, email }) => {\n  return (\n    <Flex wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"font-medium text-sm text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-text-positive-weak text-xs\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n","'use client';\n\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer border-border',\n        'size-4 shrink-0 cursor-pointer rounded border shadow-xs outline-none transition-shadow',\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:text-text-negative-strong',\n        'data-[state=checked]:border-primary',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-3',\n        'aria-invalid:ring-danger-weak',\n        'aria-invalid:border-danger',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"flex items-center justify-center text-current transition-none\">\n        <CheckIcon size={14} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n","import { createContext, use } from 'react';\n\nimport type { RowData } from '@tanstack/react-table';\n\nimport type { TTableContext } from '../types';\n\nexport const TableContext = createContext<TTableContext<RowData> | null>(null);\n\nexport const useUITableContext = <TData extends RowData>() => {\n  const context = use(TableContext) as TTableContext<TData>;\n  if (!context) {\n    throw new Error('useTableContext must be used within a TableProvider');\n  }\n  return context;\n};\n","import { createContext, use } from 'react';\n\nimport type { Row, RowData } from '@tanstack/react-table';\n\nexport type TTableRowsContext<TData extends RowData> = {\n  rowsLength: number;\n  rows: Row<TData>[];\n};\n\nexport const TableRowsContext = createContext<TTableRowsContext<RowData> | null>(null);\nexport const useUITableRowsContext = <TData extends RowData>() => {\n  const ctx = use(TableRowsContext) as TTableRowsContext<TData>;\n  if (!ctx) {\n    throw new Error('useTableRowContext must be used within a TableRowProvider');\n  }\n  return ctx;\n};\n","'use client';\nimport { Activity, memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { type Cell, type Column, type ColumnPinningPosition, flexRender, type Header, type Row } from '@tanstack/react-table';\nimport { useVirtualizer, type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';\n\nimport { BoxIcon, EllipsisVerticalIcon, EyeOffIcon, MoveLeftIcon, MoveRightIcon, PinOffIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';\n\nimport type { ImperativePanelGroupHandle } from 'react-resizable-panels';\nimport type { AnyEntity } from '@/types';\nimport { useUITableContext } from '../hooks/use-table-context';\nimport { useUITableRowsContext } from '../hooks/use-table-rows-context';\n\nconst SELECT_WIDTH = 60;\nconst TABLE_HEADER_Z_INDEX = 20;\nconst PINNED_COLUMN_Z_INDEX = 20;\n\n//These are the important styles to make sticky column pinning work!\n//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.\n//View the index.css file for more needed styles such as border-collapse: separate\nconst getCommonPinningStyles = (column: Column<unknown>): React.CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    zIndex: isPinned ? PINNED_COLUMN_Z_INDEX : undefined,\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    position: isPinned ? 'sticky' : 'relative',\n  };\n};\n\nexport const UITableWrapper: React.FC<React.PropsWithChildren<React.ComponentProps<'div'>>> = ({ className, children, ...props }) => {\n  return (\n    <div data-slot=\"table-wrapper\" className=\"relative m-0 flex size-full flex-col flex-nowrap items-start justify-start gap-2 py-2.5 text-sm\" {...props}>\n      {children}\n    </div>\n  );\n};\n\nconst UITableHeader: React.FC<React.PropsWithChildren> = memo(({ children }) => {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      style={{ zIndex: TABLE_HEADER_Z_INDEX }}\n      className={cn(\n        'sticky top-0 grid bg-muted-bg-subtle text-sm text-text-positive',\n        '[&_tr:not(:last-child)_td]:border-b',\n        '[&_th]:flex',\n        '[&_th]:h-10',\n        '[&_th]:select-none',\n        '[&_th]:items-center',\n        '[&_th]:whitespace-nowrap',\n        '[&_th]:border-border',\n        '[&_th]:font-normal',\n        '[&_th]:border-r',\n        '[&_th]:border-b-border',\n        '[&_th]:text-left',\n        '[&_th]:align-middle',\n        '[&_th]:last:border-r-0',\n        '[&_th]:first:border-l-0',\n        '[&_th]:data-[pinned=right]:border-l',\n        '[&_th]:data-[pinned=right]:border-r-0',\n        '[&_th]:data-[pinned=left]:border-r',\n        '[&_tr_th:not([data-pinned=false])]:bg-muted-bg-subtle'\n      )}\n    >\n      {children}\n    </thead>\n  );\n});\nUITableHeader.displayName = 'TableHeader';\n\nconst UITableHeaderRow: React.FC<React.PropsWithChildren> = memo(({ children }) => {\n  return (\n    <tr data-slot=\"table-header-row\" className=\"flex w-full border-border border-b shadow\">\n      {children}\n    </tr>\n  );\n});\nUITableHeaderRow.displayName = 'TableHeaderRow';\n\nconst UITableHeaderCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'th'> & {\n      header: Header<unknown, unknown>;\n      isPinned: ColumnPinningPosition;\n      isResizing: boolean;\n      isAllRowsSelected: boolean;\n    }\n  >\n> = ({ header, isPinned, isResizing, isAllRowsSelected, children, ...props }) => {\n  const style = getCommonPinningStyles(header.column);\n  const width = `calc(var(--header-${header.id}-size) * 1px)`;\n\n  if (header.id === 'select') {\n    return (\n      <th data-slot=\"table-header-cell\" style={{ ...style, width: SELECT_WIDTH }} className=\"relative\" {...props}>\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <Checkbox\n            aria-label=\"Select All Rows\"\n            checked={isAllRowsSelected}\n            onCheckedChange={value => {\n              header.getContext().table.toggleAllRowsSelected(!!value);\n            }}\n          />\n        </div>\n      </th>\n    );\n  }\n  return (\n    <th data-slot=\"table-header-cell\" data-pinned={isPinned} style={{ ...style, width }} colSpan={header.colSpan} className={cn('group relative')} {...props}>\n      <div className=\"absolute inset-0 gap-1 truncate\">\n        <div className=\"flex h-full flex-1 cursor-pointer select-none items-center justify-between\">\n          <div className=\"flex size-full flex-1 items-center truncate pl-4\">{flexRender(header.column.columnDef.header, header.getContext())}</div>\n        </div>\n      </div>\n      {!['select', 'actions'].includes(header.id) && (\n        <UITableHeaderCellOption\n          isPinned={isPinned}\n          isVisible={header.column.getIsVisible()}\n          className=\"invisible absolute right-2 z-10 group-hover:visible\"\n          onLeftPin={header.column.pin}\n          onRightPin={header.column.pin}\n          onUnpin={header.column.pin}\n          onToggleVisibilityHandler={header.column.toggleVisibility}\n        />\n      )}\n      <Activity mode={isPinned ? 'hidden' : 'visible'}>\n        <div\n          onDoubleClick={header.column.resetSize}\n          onMouseDown={header.getResizeHandler()}\n          onTouchStart={header.getResizeHandler()}\n          className={cn('absolute inset-y-0 -right-0.5 w-1 cursor-e-resize bg-transparent hover:bg-border', isResizing && 'bg-border')}\n        />\n      </Activity>\n    </th>\n  );\n};\n\nconst UITableHeaderCellOption: React.FC<{\n  isPinned: ColumnPinningPosition;\n  className?: string;\n  isVisible?: boolean;\n  onLeftPin: (pos: 'left' | 'right' | false) => void;\n  onRightPin: (pos: 'left' | 'right' | false) => void;\n  onUnpin: (pos: 'left' | 'right' | false) => void;\n  onToggleVisibilityHandler: (visible: AnyEntity) => void;\n}> = ({ isPinned, className, onLeftPin, onRightPin, onUnpin, onToggleVisibilityHandler }) => {\n  const handleLeftPin = useCallback(() => {\n    onLeftPin('left');\n  }, [onLeftPin]);\n\n  const handleRightPin = useCallback(() => {\n    onRightPin('right');\n  }, [onRightPin]);\n\n  const handleUnpin = useCallback(() => {\n    onUnpin(false);\n  }, [onUnpin]);\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          className={cn('cursor-pointer rounded-full p-0.5 text-text-positive-weak hover:bg-muted-muted hover:text-text-positive [&>svg]:size-4', className)}\n        >\n          <EllipsisVerticalIcon />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-64 p-4\">\n        <DropdownMenuGroup className=\"*:data-[slot=dropdown-menu-item]:rounded-xs *:data-[slot=dropdown-menu-item]:p-2\">\n          <Activity mode={isPinned ? 'visible' : 'hidden'}>\n            <DropdownMenuItem onClick={handleUnpin}>\n              {!!isPinned && 'Unpin'}\n              <DropdownMenuShortcut>\n                <PinOffIcon className=\"size-4\" />\n              </DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </Activity>\n          <Activity mode={!isPinned ? 'visible' : 'hidden'}>\n            <DropdownMenuItem onClick={handleLeftPin}>\n              {isPinned ? 'Unpin' : 'Pin to Left'}\n              <DropdownMenuShortcut>\n                <MoveLeftIcon className=\"size-4\" />\n              </DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={handleRightPin}>\n              {isPinned ? 'Unpin' : 'Pin to Right'}\n              <DropdownMenuShortcut>\n                <MoveRightIcon className=\"size-4\" />\n              </DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </Activity>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup className=\"*:data-[slot=dropdown-menu-item]:rounded-xs *:data-[slot=dropdown-menu-item]:p-2\">\n          <DropdownMenuItem onClick={() => onToggleVisibilityHandler(false)}>\n            Hide Field\n            <DropdownMenuShortcut>\n              <EyeOffIcon className=\"size-4\" />\n            </DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n\nconst UITableBody: React.FC<React.PropsWithChildren<React.ComponentProps<'tbody'> & { height: number }>> = ({ height, children, ...props }) => {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      style={{ height: `${height}px` }}\n      className={cn(\n        'relative grid w-full',\n        '[&_tr]:absolute [&_tr]:flex [&_tr]:w-full [&_tr]:cursor-pointer [&_tr]:border-b [&_tr]:border-b-border [&_tr]:focus:outline-none',\n        '[&_td]:z-10',\n        '[&_td]:flex',\n        '[&_td]:overflow-hidden',\n        '[&_td]:whitespace-nowrap',\n        '[&_td]:px-4',\n        '[&_td]:py-2.5',\n        '[&_td]:align-middle',\n        '[&_td]:border-border',\n        '[&_td]:data-[pinned=right]:border-l',\n        '[&_td]:data-[pinned=left]:border-r',\n        '[&_td:not([data-pinned=false])]:bg-card',\n        '[&_td:not([data-pinned=false])]:shadow-xs'\n      )}\n      {...props}\n    >\n      {children}\n    </tbody>\n  );\n};\n\nconst UITableRow: React.FC<\n  React.ComponentProps<'tr'> & {\n    row: Row<unknown>;\n    virtualRow: VirtualItem;\n    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;\n  }\n> = memo(({ children, row, virtualRow, rowVirtualizer, className, ...props }) => {\n  const { columnPinning: _ } = useUITableContext();\n  return (\n    <tr\n      data-slot=\"table-row\"\n      data-index={virtualRow.index}\n      ref={node => rowVirtualizer.measureElement(node)}\n      style={{\n        transform: `translateY(${virtualRow.start}px)`,\n      }}\n      className={cn('group', className)}\n      {...props}\n    >\n      {row.getVisibleCells().map(cell => {\n        return <UITableCell key={cell.id} cell={cell} className=\"group-hover:bg-muted-bg-subtle!\" />;\n      })}\n    </tr>\n  );\n});\nUITableRow.displayName = 'TableRow';\n\nconst UITableCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'td'> & {\n      cell: Cell<unknown, unknown>;\n    }\n  >\n> = memo(({ cell, children, className, ...props }) => {\n  const { rowSelection: _ } = useUITableContext();\n  const isPinned = cell.column.getIsPinned();\n  const style = getCommonPinningStyles(cell.column);\n  const width = `calc(var(--col-${cell.column.id}-size) * 1px)`;\n  if (isPinned) {\n    console.log('Pinned Cell Rendered:', cell.column.getPinnedIndex());\n  }\n\n  if (cell.column.id === 'select') {\n    return (\n      <td data-slot=\"table-cell\" style={{ ...style, width: SELECT_WIDTH }} className={cn('border-none! bg-transparent! shadow-none!', className)} {...props}>\n        <div className=\"absolute inset-0 flex items-center justify-center bg-transparent\">\n          <Checkbox\n            aria-label=\"Select Row\"\n            checked={cell.row.getIsSelected()}\n            onCheckedChange={value => {\n              cell.row.toggleSelected(!!value);\n            }}\n          />\n        </div>\n      </td>\n    );\n  }\n\n  return (\n    <td\n      data-slot=\"table-cell\"\n      data-pinned={isPinned}\n      style={{ ...style, width }}\n      className={cn(isPinned && cell.column.getPinnedIndex() === 0 && 'shadow!', className)}\n      {...props}\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </td>\n  );\n});\nUITableCell.displayName = 'TableCell';\n\nconst EmptyDisplay: React.FC = () => {\n  return (\n    <div className=\"sticky left-0 flex flex-1 items-center justify-center bg-transparent text-text-positive-weak opacity-100\">\n      <div className=\"flex flex-col items-center gap-1\">\n        <BoxIcon strokeWidth={1} size={48} />\n        <p>No data available</p>\n      </div>\n    </div>\n  );\n};\n\nexport const UITableFooter: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <tfoot data-slot=\"table-footer\" className=\"flex w-full justify-center border-border-weak border-t py-2 font-medium [&>tr]:last:border-b-0\">\n      {children}\n    </tfoot>\n  );\n};\n\nexport const UITableContainer: React.FC<React.PropsWithChildren> = ({ children }) => {\n  const { table, isEmpty, isFetching, totalRows, fetchMoreData } = useUITableContext();\n  const { rows, rowsLength } = useUITableRowsContext();\n\n  const tableContainerRef = useRef<ImperativePanelGroupHandle | null>(null);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <table> element.\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders();\n    const colSizes: { [key: string]: number | undefined } = {};\n    headers.forEach(header => {\n      colSizes[`--header-${header.id}-size`] = header.getSize() || 0;\n      colSizes[`--col-${header.column.id}-size`] = header.column.getSize() || 0;\n    });\n    return colSizes;\n  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n  // Important: Keep the row virtualizer in the lowest component possible to avoid unnecessary re-renders.\n  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n    count: rowsLength,\n    getScrollElement: () => tableRef.current,\n    estimateSize: () => 40, // estimated row height\n    measureElement: element => element?.getBoundingClientRect().height,\n    overscan: 2, // Render additional rows beyond viewport for smoother scrolling\n  });\n\n  //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table\n  const fetchMoreOnButtonReached = useCallback(\n    async (containerRefEl?: HTMLTableElement | null) => {\n      if (!containerRefEl) return null;\n      const { scrollHeight, scrollTop, clientHeight } = containerRefEl;\n      //once the user has scrolled within 500px of the bottom of the table, fetch more data if we can\n      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalRows && rowsLength < totalRows) {\n        await fetchMoreData?.();\n      }\n    },\n    [isFetching, rowsLength, totalRows, fetchMoreData]\n  );\n\n  //a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data\n  useEffect(() => {\n    fetchMoreOnButtonReached(tableRef.current);\n  }, [fetchMoreOnButtonReached]);\n\n  return (\n    <ResizablePanelGroup\n      ref={tableContainerRef}\n      direction=\"horizontal\"\n      style={{ direction: table.options.columnResizeDirection }}\n      className=\"relative flex w-full max-w-full flex-1 gap-1 overflow-auto border-t border-t-border bg-slate-50 p-0 text-sm\"\n    >\n      <ResizablePanel className=\"overflow-auto\">\n        <table\n          ref={tableRef}\n          data-slot=\"table\"\n          style={{\n            ...columnSizeVars,\n            width: table.getTotalSize(),\n          }}\n          className=\"grid size-full max-w-full caption-bottom border-collapse border-spacing-0 flex-col content-start overflow-auto bg-card text-sm tabular-nums [&_tfoot_td]:border-t\"\n        >\n          <UITableHeader>\n            {table.getHeaderGroups().map(headerGroup => (\n              <UITableHeaderRow key={headerGroup.id}>\n                {headerGroup.headers.map(header => (\n                  <UITableHeaderCell\n                    key={header.id}\n                    header={header}\n                    isPinned={header.column.getIsPinned()}\n                    isResizing={header.column.getIsResizing()}\n                    isAllRowsSelected={table.getIsAllRowsSelected()}\n                  />\n                ))}\n              </UITableHeaderRow>\n            ))}\n          </UITableHeader>\n          <UITableBody data-slot=\"table-body\" height={rowVirtualizer.getTotalSize()}>\n            {rowVirtualizer.getVirtualItems().map(virtualRow => {\n              const row = rows[virtualRow.index] as Row<AnyEntity>;\n              return <UITableRow key={row.id} data-index={virtualRow.index} row={row} virtualRow={virtualRow} rowVirtualizer={rowVirtualizer} />;\n            })}\n          </UITableBody>\n        </table>\n        {isEmpty && <EmptyDisplay />}\n      </ResizablePanel>\n      <ResizableHandle />\n      {children}\n    </ResizablePanelGroup>\n  );\n};\n","import { Activity, useState } from 'react';\n\nimport { Columns4Icon, ListFilterIcon, ListFilterPlus } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { ResizablePanel } from '@/components/ui/resizable';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useUITableContext } from '../../hooks/use-table-context';\n\nconst ColumnVisibility: React.FC<{\n  checked: boolean;\n  title: string;\n  onCheckedChange?: (checked: boolean) => void;\n}> = ({ checked, title, onCheckedChange }) => {\n  return (\n    <div className=\"flex h-fit items-center gap-2\">\n      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />\n      <p className=\"text-sm\">{title}</p>\n    </div>\n  );\n};\n\nexport const UITableFilter = () => {\n  const { table } = useUITableContext();\n  const [tab, setTab] = useState<'columns' | 'filters' | null>(null);\n\n  return (\n    <ResizablePanel defaultSize={25} className={cn('bg-card', tab === null ? 'max-w-8!' : 'min-w-64')}>\n      <div className=\"relative z-20 flex size-full bg-muted-bg-subtle\">\n        <div className=\"flex-1\">\n          <Activity mode={tab === 'columns' ? 'visible' : 'hidden'}>\n            <div className=\"flex size-full flex-col gap-2 p-4\">\n              <p className=\"px-2 font-medium\">Columns Visibility</p>\n              <Separator />\n              <div className=\"flex flex-col gap-4 pt-4\">\n                {table.getAllColumns().map(column => {\n                  if (['select', 'actions'].includes(column.id)) return null;\n                  return (\n                    <ColumnVisibility\n                      key={column.id}\n                      checked={column.getIsVisible()}\n                      title={String(column.columnDef.header)}\n                      onCheckedChange={value => column.toggleVisibility(!!value)}\n                    />\n                  );\n                })}\n              </div>\n            </div>\n          </Activity>\n          <Activity mode={tab === 'filters' ? 'visible' : 'hidden'}>\n            <div className=\"flex size-full flex-col p-2\">\n              <Button variant=\"outline\" color=\"muted\">\n                <ListFilterPlus />\n                Add Filter\n              </Button>\n            </div>\n          </Activity>\n        </div>\n        <div className=\"flex h-full flex-col border-border border-l bg-muted-bg-subtle text-sm\">\n          <button\n            className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'columns' && 'bg-card')}\n            onClick={() => setTab(tab === 'columns' ? null : 'columns')}\n          >\n            <Columns4Icon size={18} />\n            <span className=\"text-nowrap [writing-mode:vertical-lr]\">Columns</span>\n          </button>\n          <Separator />\n          <button\n            className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'filters' && 'bg-card')}\n            onClick={() => setTab(tab === 'filters' ? null : 'filters')}\n          >\n            <ListFilterIcon size={18} />\n            <span className=\"text-nowrap [writing-mode:vertical-lr]\">Filters</span>\n          </button>\n          <Separator />\n        </div>\n      </div>\n    </ResizablePanel>\n  );\n};\n","import { useMemo, useState } from 'react';\n\nimport type { ColumnPinningState, InitialTableState, RowData, RowSelectionState, VisibilityState } from '@tanstack/react-table';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { TableContext } from '../../hooks/use-table-context';\nimport { TableRowsContext, type TTableRowsContext } from '../../hooks/use-table-rows-context';\nimport type { TableProviderProps, TTableContext } from '../../types';\n\nconst INITIAL_STATE: InitialTableState = {\n  columnPinning: { right: ['actions'] },\n};\n\nexport const UITableProvider = <TData extends RowData>({\n  title,\n  isFetching = false,\n  data,\n  columns,\n  totalRows,\n\n  fetchMoreData,\n  children,\n}: React.PropsWithChildren<TableProviderProps<TData>>) => {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({ right: ['actions'] });\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n\n  const table = useReactTable<TData>({\n    initialState: INITIAL_STATE,\n    data: data,\n    columns,\n    state: {\n      rowSelection,\n      columnPinning,\n      columnVisibility,\n    },\n    defaultColumn: {\n      minSize: 40,\n      size: 150,\n      maxSize: 800,\n    },\n    columnResizeMode: 'onChange',\n    columnResizeDirection: 'ltr',\n\n    enableRowSelection: true,\n    enableColumnResizing: true,\n    enableMultiRowSelection: true,\n\n    getCoreRowModel: getCoreRowModel(),\n\n    onRowSelectionChange: setRowSelection,\n    onColumnPinningChange: setColumnPinning,\n    onColumnVisibilityChange: setColumnVisibility,\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: rows\n  const rows = useMemo(() => {\n    return table.getRowModel().rows;\n  }, [table.getState().columnPinning]);\n\n  const isEmpty = useMemo<boolean>(() => {\n    return !isFetching && table.getRowModel().rows.length === 0;\n  }, [table, isFetching]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: table get state\n  const value = useMemo<TTableContext<TData>>(\n    () => ({\n      table,\n      title,\n      isEmpty,\n      isFetching,\n\n      totalRows,\n\n      rowSelection: table.getState().rowSelection,\n\n      columnPinning: table.getState().columnPinning,\n\n      fetchMoreData,\n    }),\n    [\n      table,\n      data,\n      title,\n\n      isEmpty,\n      isFetching,\n\n      totalRows,\n\n      fetchMoreData,\n\n      table.getState().columnVisibility,\n\n      table.getState().rowSelection,\n      table.getState().columnPinning,\n    ]\n  );\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: rows\n  const rowsValue = useMemo<TTableRowsContext<TData>>(\n    () => ({\n      rowsLength: rows.length,\n      rows,\n    }),\n    [rows, table.getState().rowSelection, table.getState().columnPinning, table.getState().columnSizing]\n  );\n\n  return (\n    <TableContext.Provider value={value as TTableContext<unknown>}>\n      <TableRowsContext.Provider value={rowsValue as TTableRowsContext<unknown>}>{children}</TableRowsContext.Provider>\n    </TableContext.Provider>\n  );\n};\n","import { ArrowRightIcon, CirclePlus, DownloadIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableContext } from '../../hooks/use-table-context';\n\nexport const UITableTooltipFilter: React.FC<React.ComponentProps<typeof Input>> = ({ className: _, ...props }) => {\n  return (\n    <div className=\"relative\">\n      <Input {...props} size=\"lg\" type=\"search\" placeholder=\"Search records...\" className=\"ps-9 pe-9\" />\n      <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <button className=\"flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive [&_svg]:size-3.5\">\n      {children}\n    </button>\n  );\n};\n\nexport const UITableTooltipActions: React.FC = () => {\n  return (\n    <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n      <ActionButton>\n        <CirclePlus />\n      </ActionButton>\n      <ActionButton>\n        <RefreshCwIcon />\n      </ActionButton>\n      <ActionButton>\n        <DownloadIcon />\n      </ActionButton>\n    </div>\n  );\n};\n\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n  const { title } = useUITableContext();\n  return (\n    <div data-slot=\"table-tooltip\" className=\"relative m-0 flex w-full flex-0 flex-col flex-wrap items-start space-y-2 p-0 px-2 text-sm\">\n      <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n      <div className=\"flex w-full flex-1 justify-between\">{children}</div>\n    </div>\n  );\n};\nUITableTooltip.displayName = 'TableTooltip';\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["UITableNameDisplay: React.FC<NameDisplayProps>","Tooltip","UITablePhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>>","Tooltip","UITableUserDataDisplay: React.FC<Props>","Avatar","Checkbox","CheckboxPrimitive","UITableWrapper: React.FC<React.PropsWithChildren<React.ComponentProps<'div'>>>","UITableHeader: React.FC<React.PropsWithChildren>","UITableHeaderRow: React.FC<React.PropsWithChildren>","UITableHeaderCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'th'> & {\n      header: Header<unknown, unknown>;\n      isPinned: ColumnPinningPosition;\n      isResizing: boolean;\n      isAllRowsSelected: boolean;\n    }\n  >\n>","Checkbox","UITableHeaderCellOption: React.FC<{\n  isPinned: ColumnPinningPosition;\n  className?: string;\n  isVisible?: boolean;\n  onLeftPin: (pos: 'left' | 'right' | false) => void;\n  onRightPin: (pos: 'left' | 'right' | false) => void;\n  onUnpin: (pos: 'left' | 'right' | false) => void;\n  onToggleVisibilityHandler: (visible: AnyEntity) => void;\n}>","DropdownMenu","UITableBody: React.FC<React.PropsWithChildren<React.ComponentProps<'tbody'> & { height: number }>>","UITableRow: React.FC<\n  React.ComponentProps<'tr'> & {\n    row: Row<unknown>;\n    virtualRow: VirtualItem;\n    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;\n  }\n>","UITableCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'td'> & {\n      cell: Cell<unknown, unknown>;\n    }\n  >\n>","EmptyDisplay: React.FC","UITableFooter: React.FC<React.PropsWithChildren>","UITableContainer: React.FC<React.PropsWithChildren>","colSizes: { [key: string]: number | undefined }","ColumnVisibility: React.FC<{\n  checked: boolean;\n  title: string;\n  onCheckedChange?: (checked: boolean) => void;\n}>","Checkbox","Separator","INITIAL_STATE: InitialTableState","UITableTooltipFilter: React.FC<React.ComponentProps<typeof Input>>","ActionButton: React.FC<React.PropsWithChildren>","UITableTooltipActions: React.FC","UITableTooltip: React.FC<React.PropsWithChildren>"],"sources":["../../../packages/components/features/tables/components/atoms/name-display.tsx","../../../packages/components/features/tables/components/atoms/phone-number.tsx","../../../packages/components/features/tables/components/atoms/user.tsx","../../../packages/components/ui/checkbox.tsx","../../../packages/components/features/tables/hooks/use-table-context.ts","../../../packages/components/features/tables/hooks/use-table-rows-context.ts","../../../packages/components/features/tables/components/table.tsx","../../../packages/components/features/tables/components/table/filter.tsx","../../../packages/components/features/tables/components/table/provider.tsx","../../../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\n\ntype NameDisplayProps = {\n  name: string;\n};\n\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"max-w-80 whitespace-pre-line text-wrap break-keep\">\n        {name}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nexport const UITablePhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-secondary-foreground text-sm tabular-nums\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p className=\"tabular-nums\">{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n","import { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { Paragraph } from '@/components/typography/paragraph';\n\ntype Props = {\n  uuid: string;\n  username: string;\n  email: string;\n};\n\nexport const UITableUserDataDisplay: React.FC<Props> = ({ uuid, username, email }) => {\n  return (\n    <Flex wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"font-medium text-sm text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-text-positive-weak text-xs\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n","'use client';\n\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer border-border',\n        'size-4 shrink-0 cursor-pointer rounded border shadow-xs outline-none transition-shadow',\n        'data-[state=checked]:bg-primary',\n        'data-[state=checked]:text-text-negative-strong',\n        'data-[state=checked]:border-primary',\n        'focus-visible:border-primary-strong',\n        'focus-visible:ring-primary-weak',\n        'focus-visible:ring-3',\n        'aria-invalid:ring-danger-weak',\n        'aria-invalid:border-danger',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator data-slot=\"checkbox-indicator\" className=\"flex items-center justify-center text-current transition-none\">\n        <CheckIcon size={14} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n","import { createContext, use } from 'react';\n\nimport type { RowData } from '@tanstack/react-table';\n\nimport type { TTableContext } from '../types';\n\nexport const TableContext = createContext<TTableContext<RowData> | null>(null);\n\nexport const useUITableContext = <TData extends RowData>() => {\n  const context = use(TableContext) as TTableContext<TData>;\n  if (!context) {\n    throw new Error('useTableContext must be used within a TableProvider');\n  }\n  return context;\n};\n","import { createContext, use } from 'react';\n\nimport type { Row, RowData } from '@tanstack/react-table';\n\nexport type TTableRowsContext<TData extends RowData> = {\n  rowsLength: number;\n  rows: Row<TData>[];\n};\n\nexport const TableRowsContext = createContext<TTableRowsContext<RowData> | null>(null);\nexport const useUITableRowsContext = <TData extends RowData>() => {\n  const ctx = use(TableRowsContext) as TTableRowsContext<TData>;\n  if (!ctx) {\n    throw new Error('useTableRowContext must be used within a TableRowProvider');\n  }\n  return ctx;\n};\n","'use client';\nimport { Activity, memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { type Cell, type Column, type ColumnPinningPosition, flexRender, type Header, type Row } from '@tanstack/react-table';\nimport { useVirtualizer, type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';\n\nimport { BoxIcon, EllipsisVerticalIcon, EyeOffIcon, MoveLeftIcon, MoveRightIcon, PinOffIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Checkbox } from '@/components/ui/checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';\n\nimport type { ImperativePanelGroupHandle } from 'react-resizable-panels';\nimport type { AnyEntity } from '@/types';\nimport { useUITableContext } from '../hooks/use-table-context';\nimport { useUITableRowsContext } from '../hooks/use-table-rows-context';\n\nconst SELECT_WIDTH = 60;\nconst TABLE_HEADER_Z_INDEX = 20;\nconst PINNED_COLUMN_Z_INDEX = 20;\n\n//These are the important styles to make sticky column pinning work!\n//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc.\n//View the index.css file for more needed styles such as border-collapse: separate\nconst getCommonPinningStyles = (column: Column<unknown>): React.CSSProperties => {\n  const isPinned = column.getIsPinned();\n  return {\n    zIndex: isPinned ? PINNED_COLUMN_Z_INDEX : undefined,\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    position: isPinned ? 'sticky' : 'relative',\n  };\n};\n\nexport const UITableWrapper: React.FC<React.PropsWithChildren<React.ComponentProps<'div'>>> = ({ className, children, ...props }) => {\n  return (\n    <div data-slot=\"table-wrapper\" className=\"relative m-0 flex size-full flex-col flex-nowrap items-start justify-start gap-2 py-2.5 text-sm\" {...props}>\n      {children}\n    </div>\n  );\n};\n\nconst UITableHeader: React.FC<React.PropsWithChildren> = memo(({ children }) => {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      style={{ zIndex: TABLE_HEADER_Z_INDEX }}\n      className={cn(\n        'sticky top-0 grid bg-muted-bg-subtle text-sm text-text-positive',\n        '[&_tr:not(:last-child)_td]:border-b',\n        '[&_th]:flex',\n        '[&_th]:h-10',\n        '[&_th]:select-none',\n        '[&_th]:items-center',\n        '[&_th]:whitespace-nowrap',\n        '[&_th]:border-border',\n        '[&_th]:font-normal',\n        '[&_th]:border-r',\n        '[&_th]:border-b-border',\n        '[&_th]:text-left',\n        '[&_th]:align-middle',\n        '[&_th]:last:border-r-0',\n        '[&_th]:first:border-l-0',\n        '[&_th]:data-[pinned=right]:border-l',\n        '[&_th]:data-[pinned=right]:border-r-0',\n        '[&_th]:data-[pinned=left]:border-r',\n        '[&_tr_th:not([data-pinned=false])]:bg-muted-bg-subtle'\n      )}\n    >\n      {children}\n    </thead>\n  );\n});\nUITableHeader.displayName = 'TableHeader';\n\nconst UITableHeaderRow: React.FC<React.PropsWithChildren> = memo(({ children }) => {\n  return (\n    <tr data-slot=\"table-header-row\" className=\"flex w-full border-border border-b shadow\">\n      {children}\n    </tr>\n  );\n});\nUITableHeaderRow.displayName = 'TableHeaderRow';\n\nconst UITableHeaderCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'th'> & {\n      header: Header<unknown, unknown>;\n      isPinned: ColumnPinningPosition;\n      isResizing: boolean;\n      isAllRowsSelected: boolean;\n    }\n  >\n> = ({ header, isPinned, isResizing, isAllRowsSelected, children, ...props }) => {\n  const style = getCommonPinningStyles(header.column);\n  const width = `calc(var(--header-${header.id}-size) * 1px)`;\n\n  if (header.id === 'select') {\n    return (\n      <th data-slot=\"table-header-cell\" style={{ ...style, width: SELECT_WIDTH }} className=\"relative\" {...props}>\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <Checkbox\n            aria-label=\"Select All Rows\"\n            checked={isAllRowsSelected}\n            onCheckedChange={value => {\n              header.getContext().table.toggleAllRowsSelected(!!value);\n            }}\n          />\n        </div>\n      </th>\n    );\n  }\n  return (\n    <th data-slot=\"table-header-cell\" data-pinned={isPinned} style={{ ...style, width }} colSpan={header.colSpan} className={cn('group relative')} {...props}>\n      <div className=\"absolute inset-0 gap-1 truncate\">\n        <div className=\"flex h-full flex-1 cursor-pointer select-none items-center justify-between\">\n          <div className=\"flex size-full flex-1 items-center truncate pl-4\">{flexRender(header.column.columnDef.header, header.getContext())}</div>\n        </div>\n      </div>\n      {!['select', 'actions'].includes(header.id) && (\n        <UITableHeaderCellOption\n          isPinned={isPinned}\n          isVisible={header.column.getIsVisible()}\n          className=\"invisible absolute right-2 z-10 group-hover:visible\"\n          onLeftPin={header.column.pin}\n          onRightPin={header.column.pin}\n          onUnpin={header.column.pin}\n          onToggleVisibilityHandler={header.column.toggleVisibility}\n        />\n      )}\n      <Activity mode={isPinned ? 'hidden' : 'visible'}>\n        <div\n          onDoubleClick={header.column.resetSize}\n          onMouseDown={header.getResizeHandler()}\n          onTouchStart={header.getResizeHandler()}\n          className={cn('absolute inset-y-0 -right-0.5 w-1 cursor-e-resize bg-transparent hover:bg-border', isResizing && 'bg-border')}\n        />\n      </Activity>\n    </th>\n  );\n};\n\nconst UITableHeaderCellOption: React.FC<{\n  isPinned: ColumnPinningPosition;\n  className?: string;\n  isVisible?: boolean;\n  onLeftPin: (pos: 'left' | 'right' | false) => void;\n  onRightPin: (pos: 'left' | 'right' | false) => void;\n  onUnpin: (pos: 'left' | 'right' | false) => void;\n  onToggleVisibilityHandler: (visible: AnyEntity) => void;\n}> = ({ isPinned, className, onLeftPin, onRightPin, onUnpin, onToggleVisibilityHandler }) => {\n  const handleLeftPin = useCallback(() => {\n    onLeftPin('left');\n  }, [onLeftPin]);\n\n  const handleRightPin = useCallback(() => {\n    onRightPin('right');\n  }, [onRightPin]);\n\n  const handleUnpin = useCallback(() => {\n    onUnpin(false);\n  }, [onUnpin]);\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          className={cn('cursor-pointer rounded-full p-0.5 text-text-positive-weak hover:bg-muted-muted hover:text-text-positive [&>svg]:size-4', className)}\n        >\n          <EllipsisVerticalIcon />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-64 p-4\">\n        <DropdownMenuGroup className=\"*:data-[slot=dropdown-menu-item]:rounded-xs *:data-[slot=dropdown-menu-item]:p-2\">\n          <Activity mode={isPinned ? 'visible' : 'hidden'}>\n            <DropdownMenuItem onClick={handleUnpin}>\n              {!!isPinned && 'Unpin'}\n              <DropdownMenuShortcut>\n                <PinOffIcon className=\"size-4\" />\n              </DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </Activity>\n          <Activity mode={!isPinned ? 'visible' : 'hidden'}>\n            <DropdownMenuItem onClick={handleLeftPin}>\n              {isPinned ? 'Unpin' : 'Pin to Left'}\n              <DropdownMenuShortcut>\n                <MoveLeftIcon className=\"size-4\" />\n              </DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={handleRightPin}>\n              {isPinned ? 'Unpin' : 'Pin to Right'}\n              <DropdownMenuShortcut>\n                <MoveRightIcon className=\"size-4\" />\n              </DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </Activity>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup className=\"*:data-[slot=dropdown-menu-item]:rounded-xs *:data-[slot=dropdown-menu-item]:p-2\">\n          <DropdownMenuItem onClick={() => onToggleVisibilityHandler(false)}>\n            Hide Field\n            <DropdownMenuShortcut>\n              <EyeOffIcon className=\"size-4\" />\n            </DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n\nconst UITableBody: React.FC<React.PropsWithChildren<React.ComponentProps<'tbody'> & { height: number }>> = ({ height, children, ...props }) => {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      style={{ height: `${height}px` }}\n      className={cn(\n        'relative grid w-full',\n        '[&_tr]:absolute [&_tr]:flex [&_tr]:w-full [&_tr]:cursor-pointer [&_tr]:border-b [&_tr]:border-b-border [&_tr]:focus:outline-none',\n        '[&_td]:z-10',\n        '[&_td]:flex',\n        '[&_td]:overflow-hidden',\n        '[&_td]:whitespace-nowrap',\n        '[&_td]:px-4',\n        '[&_td]:py-2.5',\n        '[&_td]:align-middle',\n        '[&_td]:border-border',\n        '[&_td]:data-[pinned=right]:border-l',\n        '[&_td]:data-[pinned=left]:border-r',\n        '[&_td:not([data-pinned=false])]:bg-card',\n        '[&_td:not([data-pinned=false])]:shadow-xs'\n      )}\n      {...props}\n    >\n      {children}\n    </tbody>\n  );\n};\n\nconst UITableRow: React.FC<\n  React.ComponentProps<'tr'> & {\n    row: Row<unknown>;\n    virtualRow: VirtualItem;\n    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;\n  }\n> = memo(({ children, row, virtualRow, rowVirtualizer, className, ...props }) => {\n  const { columnPinning: _ } = useUITableContext();\n  return (\n    <tr\n      data-slot=\"table-row\"\n      data-index={virtualRow.index}\n      ref={node => rowVirtualizer.measureElement(node)}\n      style={{\n        transform: `translateY(${virtualRow.start}px)`,\n      }}\n      className={cn('group', className)}\n      {...props}\n    >\n      {row.getVisibleCells().map(cell => {\n        return <UITableCell key={cell.id} cell={cell} className=\"group-hover:bg-muted-bg-subtle!\" />;\n      })}\n    </tr>\n  );\n});\nUITableRow.displayName = 'TableRow';\n\nconst UITableCell: React.FC<\n  React.PropsWithChildren<\n    React.ComponentProps<'td'> & {\n      cell: Cell<unknown, unknown>;\n    }\n  >\n> = memo(({ cell, children, className, ...props }) => {\n  const { rowSelection: _ } = useUITableContext();\n  const isPinned = cell.column.getIsPinned();\n  const style = getCommonPinningStyles(cell.column);\n  const width = `calc(var(--col-${cell.column.id}-size) * 1px)`;\n  if (isPinned) {\n    console.log('Pinned Cell Rendered:', cell.column.getPinnedIndex());\n  }\n\n  if (cell.column.id === 'select') {\n    return (\n      <td data-slot=\"table-cell\" style={{ ...style, width: SELECT_WIDTH }} className={cn('border-none! bg-transparent! shadow-none!', className)} {...props}>\n        <div className=\"absolute inset-0 flex items-center justify-center bg-transparent\">\n          <Checkbox\n            aria-label=\"Select Row\"\n            checked={cell.row.getIsSelected()}\n            onCheckedChange={value => {\n              cell.row.toggleSelected(!!value);\n            }}\n          />\n        </div>\n      </td>\n    );\n  }\n\n  return (\n    <td\n      data-slot=\"table-cell\"\n      data-pinned={isPinned}\n      style={{ ...style, width }}\n      className={cn(isPinned && cell.column.getPinnedIndex() === 0 && 'shadow!', className)}\n      {...props}\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </td>\n  );\n});\nUITableCell.displayName = 'TableCell';\n\nconst EmptyDisplay: React.FC = () => {\n  return (\n    <div className=\"sticky left-0 flex flex-1 items-center justify-center bg-transparent text-text-positive-weak opacity-100\">\n      <div className=\"flex flex-col items-center gap-1\">\n        <BoxIcon strokeWidth={1} size={48} />\n        <p>No data available</p>\n      </div>\n    </div>\n  );\n};\n\nexport const UITableFooter: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <tfoot data-slot=\"table-footer\" className=\"flex w-full justify-center border-border-weak border-t py-2 font-medium [&>tr]:last:border-b-0\">\n      {children}\n    </tfoot>\n  );\n};\n\nexport const UITableContainer: React.FC<React.PropsWithChildren> = ({ children }) => {\n  const { table, isEmpty, isFetching, totalRows, fetchMoreData } = useUITableContext();\n  const { rows, rowsLength } = useUITableRowsContext();\n\n  const tableContainerRef = useRef<ImperativePanelGroupHandle | null>(null);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <table> element.\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders();\n    const colSizes: { [key: string]: number | undefined } = {};\n    headers.forEach(header => {\n      colSizes[`--header-${header.id}-size`] = header.getSize() || 0;\n      colSizes[`--col-${header.column.id}-size`] = header.column.getSize() || 0;\n    });\n    return colSizes;\n  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n  // Important: Keep the row virtualizer in the lowest component possible to avoid unnecessary re-renders.\n  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n    count: rowsLength,\n    getScrollElement: () => tableRef.current,\n    estimateSize: () => 40, // estimated row height\n    measureElement: element => element?.getBoundingClientRect().height,\n    overscan: 2, // Render additional rows beyond viewport for smoother scrolling\n  });\n\n  //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table\n  const fetchMoreOnButtonReached = useCallback(\n    async (containerRefEl?: HTMLTableElement | null) => {\n      if (!containerRefEl) return null;\n      const { scrollHeight, scrollTop, clientHeight } = containerRefEl;\n      //once the user has scrolled within 500px of the bottom of the table, fetch more data if we can\n      if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && totalRows && rowsLength < totalRows) {\n        await fetchMoreData?.();\n      }\n    },\n    [isFetching, rowsLength, totalRows, fetchMoreData]\n  );\n\n  //a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data\n  useEffect(() => {\n    fetchMoreOnButtonReached(tableRef.current);\n  }, [fetchMoreOnButtonReached]);\n\n  return (\n    <ResizablePanelGroup\n      ref={tableContainerRef}\n      direction=\"horizontal\"\n      style={{ direction: table.options.columnResizeDirection }}\n      className=\"relative flex w-full max-w-full flex-1 gap-1 overflow-auto border-t border-t-border bg-slate-50 p-0 text-sm\"\n    >\n      <ResizablePanel className=\"overflow-auto\">\n        <table\n          ref={tableRef}\n          data-slot=\"table\"\n          style={{\n            ...columnSizeVars,\n            width: table.getTotalSize(),\n          }}\n          className=\"grid size-full max-w-full caption-bottom border-collapse border-spacing-0 flex-col content-start overflow-auto bg-card text-sm tabular-nums [&_tfoot_td]:border-t\"\n        >\n          <UITableHeader>\n            {table.getHeaderGroups().map(headerGroup => (\n              <UITableHeaderRow key={headerGroup.id}>\n                {headerGroup.headers.map(header => (\n                  <UITableHeaderCell\n                    key={header.id}\n                    header={header}\n                    isPinned={header.column.getIsPinned()}\n                    isResizing={header.column.getIsResizing()}\n                    isAllRowsSelected={table.getIsAllRowsSelected()}\n                  />\n                ))}\n              </UITableHeaderRow>\n            ))}\n          </UITableHeader>\n          <UITableBody data-slot=\"table-body\" height={rowVirtualizer.getTotalSize()}>\n            {rowVirtualizer.getVirtualItems().map(virtualRow => {\n              const row = rows[virtualRow.index] as Row<AnyEntity>;\n              return <UITableRow key={row.id} data-index={virtualRow.index} row={row} virtualRow={virtualRow} rowVirtualizer={rowVirtualizer} />;\n            })}\n          </UITableBody>\n        </table>\n        {isEmpty && <EmptyDisplay />}\n      </ResizablePanel>\n      <ResizableHandle />\n      {children}\n    </ResizablePanelGroup>\n  );\n};\n","import { Activity, useState } from 'react';\n\nimport { Columns4Icon, ListFilterIcon, ListFilterPlus } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { ResizablePanel } from '@/components/ui/resizable';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useUITableContext } from '../../hooks/use-table-context';\n\nconst ColumnVisibility: React.FC<{\n  checked: boolean;\n  title: string;\n  onCheckedChange?: (checked: boolean) => void;\n}> = ({ checked, title, onCheckedChange }) => {\n  return (\n    <div className=\"flex h-fit items-center gap-2\">\n      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />\n      <p className=\"text-sm\">{title}</p>\n    </div>\n  );\n};\n\nexport const UITableFilter = () => {\n  const { table } = useUITableContext();\n  const [tab, setTab] = useState<'columns' | 'filters' | null>(null);\n\n  return (\n    <ResizablePanel defaultSize={25} className={cn('bg-card', tab === null ? 'max-w-8!' : 'min-w-64')}>\n      <div className=\"relative z-20 flex size-full bg-muted-bg-subtle\">\n        <div className=\"flex-1\">\n          <Activity mode={tab === 'columns' ? 'visible' : 'hidden'}>\n            <div className=\"flex size-full flex-col gap-2 p-4\">\n              <p className=\"px-2 font-medium\">Columns Visibility</p>\n              <Separator />\n              <div className=\"flex flex-col gap-4 pt-4\">\n                {table.getAllColumns().map(column => {\n                  if (['select', 'actions'].includes(column.id)) return null;\n                  return (\n                    <ColumnVisibility\n                      key={column.id}\n                      checked={column.getIsVisible()}\n                      title={String(column.columnDef.header)}\n                      onCheckedChange={value => column.toggleVisibility(!!value)}\n                    />\n                  );\n                })}\n              </div>\n            </div>\n          </Activity>\n          <Activity mode={tab === 'filters' ? 'visible' : 'hidden'}>\n            <div className=\"flex size-full flex-col p-2\">\n              <Button variant=\"outline\" color=\"muted\">\n                <ListFilterPlus />\n                Add Filter\n              </Button>\n            </div>\n          </Activity>\n        </div>\n        <div className=\"flex h-full flex-col border-border border-l bg-muted-bg-subtle text-sm\">\n          <button\n            className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'columns' && 'bg-card')}\n            onClick={() => setTab(tab === 'columns' ? null : 'columns')}\n          >\n            <Columns4Icon size={18} />\n            <span className=\"text-nowrap [writing-mode:vertical-lr]\">Columns</span>\n          </button>\n          <Separator />\n          <button\n            className={cn('flex h-32 cursor-pointer flex-col items-center gap-y-2 p-2 py-4', tab === 'filters' && 'bg-card')}\n            onClick={() => setTab(tab === 'filters' ? null : 'filters')}\n          >\n            <ListFilterIcon size={18} />\n            <span className=\"text-nowrap [writing-mode:vertical-lr]\">Filters</span>\n          </button>\n          <Separator />\n        </div>\n      </div>\n    </ResizablePanel>\n  );\n};\n","import { useMemo, useState } from 'react';\n\nimport type { ColumnPinningState, InitialTableState, RowData, RowSelectionState, VisibilityState } from '@tanstack/react-table';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { TableContext } from '../../hooks/use-table-context';\nimport { TableRowsContext, type TTableRowsContext } from '../../hooks/use-table-rows-context';\nimport type { TableProviderProps, TTableContext } from '../../types';\n\nconst INITIAL_STATE: InitialTableState = {\n  columnPinning: { right: ['actions'] },\n};\n\nexport const UITableProvider = <TData extends RowData>({\n  title,\n  isFetching = false,\n  data,\n  columns,\n  totalRows,\n\n  fetchMoreData,\n  children,\n}: React.PropsWithChildren<TableProviderProps<TData>>) => {\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({ right: ['actions'] });\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});\n\n  const table = useReactTable<TData>({\n    initialState: INITIAL_STATE,\n    data: data,\n    columns,\n    state: {\n      rowSelection,\n      columnPinning,\n      columnVisibility,\n    },\n    defaultColumn: {\n      minSize: 40,\n      size: 150,\n      maxSize: 800,\n    },\n    columnResizeMode: 'onChange',\n    columnResizeDirection: 'ltr',\n\n    enableRowSelection: true,\n    enableColumnResizing: true,\n    enableMultiRowSelection: true,\n\n    getCoreRowModel: getCoreRowModel(),\n\n    onRowSelectionChange: setRowSelection,\n    onColumnPinningChange: setColumnPinning,\n    onColumnVisibilityChange: setColumnVisibility,\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: rows\n  const rows = useMemo(() => {\n    return table.getRowModel().rows;\n  }, [table.getState().columnPinning]);\n\n  const isEmpty = useMemo<boolean>(() => {\n    return !isFetching && table.getRowModel().rows.length === 0;\n  }, [table, isFetching]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: table get state\n  const value = useMemo<TTableContext<TData>>(\n    () => ({\n      table,\n      title,\n      isEmpty,\n      isFetching,\n\n      totalRows,\n\n      rowSelection: table.getState().rowSelection,\n\n      columnPinning: table.getState().columnPinning,\n\n      fetchMoreData,\n    }),\n    [\n      table,\n      title,\n\n      isEmpty,\n      isFetching,\n\n      totalRows,\n\n      fetchMoreData,\n\n      table.getState().columnVisibility,\n\n      table.getState().rowSelection,\n      table.getState().columnPinning,\n    ]\n  );\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: rows\n  const rowsValue = useMemo<TTableRowsContext<TData>>(\n    () => ({\n      rowsLength: rows.length,\n      rows,\n    }),\n    [rows, table, table.getState().rowSelection, table.getState().columnPinning, table.getState().columnSizing]\n  );\n\n  return (\n    <TableContext.Provider value={value as TTableContext<unknown>}>\n      <TableRowsContext.Provider value={rowsValue as TTableRowsContext<unknown>}>{children}</TableRowsContext.Provider>\n    </TableContext.Provider>\n  );\n};\n","import { ArrowRightIcon, CirclePlus, DownloadIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableContext } from '../../hooks/use-table-context';\n\nexport const UITableTooltipFilter: React.FC<React.ComponentProps<typeof Input>> = ({ className: _, ...props }) => {\n  return (\n    <div className=\"relative\">\n      <Input {...props} size=\"lg\" type=\"search\" placeholder=\"Search records...\" className=\"ps-9 pe-9\" />\n      <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <button className=\"flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive [&_svg]:size-3.5\">\n      {children}\n    </button>\n  );\n};\n\nexport const UITableTooltipActions: React.FC = () => {\n  return (\n    <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n      <ActionButton>\n        <CirclePlus />\n      </ActionButton>\n      <ActionButton>\n        <RefreshCwIcon />\n      </ActionButton>\n      <ActionButton>\n        <DownloadIcon />\n      </ActionButton>\n    </div>\n  );\n};\n\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n  const { title } = useUITableContext();\n  return (\n    <div data-slot=\"table-tooltip\" className=\"relative m-0 flex w-full flex-0 flex-col flex-wrap items-start space-y-2 p-0 px-2 text-sm\">\n      <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n      <div className=\"flex w-full flex-1 justify-between\">{children}</div>\n    </div>\n  );\n};\nUITableTooltip.displayName = 'TableTooltip';\n"],"mappings":"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"}

package/dist/features/tanstack-form/index.d.cts

@@ -31,7 +31,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       showClearButton?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       maxLength?: number;
     }>;
@@ -59,7 +59,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       counter?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       maxLength?: number;
     }>;
@@ -99,7 +99,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       unit?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
       required?: boolean;
       allowNegative?: boolean;
     }>;
@@ -119,14 +119,14 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       showErrorMessage?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
       maxLength?: number;
     }>;
     readonly PasswordField: react26.FC<{
       description?: string | undefined;
       label: string;
-      orientation?: "vertical" | "horizontal" | "responsive" | undefined;
       placeholder?: string | undefined;
+      orientation?: "vertical" | "horizontal" | "responsive" | undefined;
       tooltip?: string | undefined;
       helperText?: string | undefined;
       showErrorMessage?: boolean | undefined;
@@ -156,7 +156,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       defaultValue?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "defaultValue" | "tooltip" | "options" | "helperText" | "clearable"> & {
+    }, "description" | "label" | "placeholder" | "defaultValue" | "orientation" | "tooltip" | "options" | "helperText" | "clearable"> & {
       required?: boolean;
     }>;
     readonly DateField: react26.FC<Pick<{
@@ -177,7 +177,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       defaultValue?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       minDate?: Date;
       maxDate?: Date;
@@ -271,7 +271,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       showClearButton?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       maxLength?: number;
     }>;
@@ -299,7 +299,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       counter?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       maxLength?: number;
     }>;
@@ -339,7 +339,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       unit?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
       required?: boolean;
       allowNegative?: boolean;
     }>;
@@ -359,14 +359,14 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       showErrorMessage?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
       maxLength?: number;
     }>;
     readonly PasswordField: react26.FC<{
       description?: string | undefined;
       label: string;
-      orientation?: "vertical" | "horizontal" | "responsive" | undefined;
       placeholder?: string | undefined;
+      orientation?: "vertical" | "horizontal" | "responsive" | undefined;
       tooltip?: string | undefined;
       helperText?: string | undefined;
       showErrorMessage?: boolean | undefined;
@@ -396,7 +396,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       defaultValue?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "defaultValue" | "tooltip" | "options" | "helperText" | "clearable"> & {
+    }, "description" | "label" | "placeholder" | "defaultValue" | "orientation" | "tooltip" | "options" | "helperText" | "clearable"> & {
       required?: boolean;
     }>;
     readonly DateField: react26.FC<Pick<{
@@ -417,7 +417,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       defaultValue?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       minDate?: Date;
       maxDate?: Date;
@@ -509,7 +509,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         showClearButton?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         maxLength?: number;
       }>;
@@ -537,7 +537,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         counter?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         maxLength?: number;
       }>;
@@ -577,7 +577,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         unit?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
         required?: boolean;
         allowNegative?: boolean;
       }>;
@@ -597,14 +597,14 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         showErrorMessage?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
         maxLength?: number;
       }>;
       readonly PasswordField: react26.FC<{
         description?: string | undefined;
         label: string;
-        orientation?: "vertical" | "horizontal" | "responsive" | undefined;
         placeholder?: string | undefined;
+        orientation?: "vertical" | "horizontal" | "responsive" | undefined;
         tooltip?: string | undefined;
         helperText?: string | undefined;
         showErrorMessage?: boolean | undefined;
@@ -634,7 +634,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         defaultValue?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "defaultValue" | "tooltip" | "options" | "helperText" | "clearable"> & {
+      }, "description" | "label" | "placeholder" | "defaultValue" | "orientation" | "tooltip" | "options" | "helperText" | "clearable"> & {
         required?: boolean;
       }>;
       readonly DateField: react26.FC<Pick<{
@@ -655,7 +655,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         defaultValue?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         minDate?: Date;
         maxDate?: Date;
@@ -751,7 +751,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       showClearButton?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       maxLength?: number;
     }>;
@@ -779,7 +779,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       counter?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       maxLength?: number;
     }>;
@@ -819,7 +819,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       unit?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
       required?: boolean;
       allowNegative?: boolean;
     }>;
@@ -839,14 +839,14 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       showErrorMessage?: boolean | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
       maxLength?: number;
     }>;
     readonly PasswordField: react26.FC<{
       description?: string | undefined;
       label: string;
-      orientation?: "vertical" | "horizontal" | "responsive" | undefined;
       placeholder?: string | undefined;
+      orientation?: "vertical" | "horizontal" | "responsive" | undefined;
       tooltip?: string | undefined;
       helperText?: string | undefined;
       showErrorMessage?: boolean | undefined;
@@ -876,7 +876,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       defaultValue?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "defaultValue" | "tooltip" | "options" | "helperText" | "clearable"> & {
+    }, "description" | "label" | "placeholder" | "defaultValue" | "orientation" | "tooltip" | "options" | "helperText" | "clearable"> & {
       required?: boolean;
     }>;
     readonly DateField: react26.FC<Pick<{
@@ -897,7 +897,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
       defaultValue?: string | undefined;
       description?: string | undefined;
       placeholder?: string | undefined;
-    }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+    }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
       required?: boolean;
       minDate?: Date;
       maxDate?: Date;
@@ -989,7 +989,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         showClearButton?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         maxLength?: number;
       }>;
@@ -1017,7 +1017,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         counter?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         maxLength?: number;
       }>;
@@ -1057,7 +1057,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         unit?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
         required?: boolean;
         allowNegative?: boolean;
       }>;
@@ -1077,14 +1077,14 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         showErrorMessage?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
         maxLength?: number;
       }>;
       readonly PasswordField: react26.FC<{
         description?: string | undefined;
         label: string;
-        orientation?: "vertical" | "horizontal" | "responsive" | undefined;
         placeholder?: string | undefined;
+        orientation?: "vertical" | "horizontal" | "responsive" | undefined;
         tooltip?: string | undefined;
         helperText?: string | undefined;
         showErrorMessage?: boolean | undefined;
@@ -1114,7 +1114,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         defaultValue?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "defaultValue" | "tooltip" | "options" | "helperText" | "clearable"> & {
+      }, "description" | "label" | "placeholder" | "defaultValue" | "orientation" | "tooltip" | "options" | "helperText" | "clearable"> & {
         required?: boolean;
       }>;
       readonly DateField: react26.FC<Pick<{
@@ -1135,7 +1135,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         defaultValue?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         minDate?: Date;
         maxDate?: Date;
@@ -1226,7 +1226,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         showClearButton?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "showClearButton" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         maxLength?: number;
       }>;
@@ -1254,7 +1254,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         counter?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "counter" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         maxLength?: number;
       }>;
@@ -1294,7 +1294,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         unit?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage" | "rounding" | "decimalPlaces" | "percision" | "unit"> & {
         required?: boolean;
         allowNegative?: boolean;
       }>;
@@ -1314,14 +1314,14 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         showErrorMessage?: boolean | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
         maxLength?: number;
       }>;
       readonly PasswordField: react26.FC<{
         description?: string | undefined;
         label: string;
-        orientation?: "vertical" | "horizontal" | "responsive" | undefined;
         placeholder?: string | undefined;
+        orientation?: "vertical" | "horizontal" | "responsive" | undefined;
         tooltip?: string | undefined;
         helperText?: string | undefined;
         showErrorMessage?: boolean | undefined;
@@ -1351,7 +1351,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         defaultValue?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "defaultValue" | "tooltip" | "options" | "helperText" | "clearable"> & {
+      }, "description" | "label" | "placeholder" | "defaultValue" | "orientation" | "tooltip" | "options" | "helperText" | "clearable"> & {
         required?: boolean;
       }>;
       readonly DateField: react26.FC<Pick<{
@@ -1372,7 +1372,7 @@ declare const useTanStackForm: <TFormData, TOnMount extends _tanstack_form_core0
         defaultValue?: string | undefined;
         description?: string | undefined;
         placeholder?: string | undefined;
-      }, "description" | "label" | "orientation" | "placeholder" | "tooltip" | "helperText" | "showErrorMessage"> & {
+      }, "description" | "label" | "placeholder" | "orientation" | "tooltip" | "helperText" | "showErrorMessage"> & {
         required?: boolean;
         minDate?: Date;
         maxDate?: Date;