@toolpath/ui 0.1.0

package/src/table/use-keyboard-navigation.ts

@@ -0,0 +1,274 @@
+import { isNull } from 'lodash-es'
+import { RefObject, useCallback, useEffect, useRef } from 'react'
+import { getRowHeight } from './table'
+import { useTable } from './table-context'
+
+export const useKeyboardNavigation = (
+  indexes: Array<[number, number | string]>,
+  containerRef?: RefObject<HTMLElement | null>,
+  data?: Array<any>,
+) => {
+  const {
+    cursor,
+    setCursor,
+    setSelectedRows,
+    selectedRows,
+    editingCell,
+    setEditingCell,
+    multiselect,
+    keyboardNavigation,
+    density,
+    onBeforeSelectionChange,
+  } = useTable()
+
+  const rowHeight = getRowHeight(density)
+
+  // Keep data ref for onBeforeSelectionChange lookups
+  const dataRef = useRef(data)
+  useEffect(() => {
+    dataRef.current = data
+  }, [data])
+
+  // Use refs to access current values in event handlers without re-registering
+  const cursorRef = useRef(cursor)
+  const indexesRef = useRef(indexes)
+  const selectedRowsRef = useRef(selectedRows)
+  const multiselectRef = useRef(multiselect)
+  const editingCellRef = useRef(editingCell)
+  useEffect(() => {
+    cursorRef.current = cursor
+  }, [cursor])
+  useEffect(() => {
+    indexesRef.current = indexes
+  }, [indexes])
+  useEffect(() => {
+    selectedRowsRef.current = selectedRows
+  }, [selectedRows])
+  useEffect(() => {
+    multiselectRef.current = multiselect
+  }, [multiselect])
+  useEffect(() => {
+    editingCellRef.current = editingCell
+  }, [editingCell])
+
+  const isFocusWithinContainer = useCallback(() => {
+    if (!containerRef?.current) {
+      return true // If no container ref provided, allow navigation everywhere (backwards compatible)
+    }
+    return containerRef.current.contains(document.activeElement)
+  }, [containerRef])
+
+  const scrollRowIntoView = useCallback(
+    (rowIndex: number) => {
+      if (!containerRef?.current) {
+        return
+      }
+
+      // Access the virtualized table's scroll container
+      const scrollContainer = containerRef.current.querySelector(
+        '[data-table-library_table] > div > div',
+      ) as HTMLElement | null
+
+      if (!scrollContainer) {
+        return
+      }
+
+      const scrollTop = scrollContainer.scrollTop
+      const containerHeight = scrollContainer.clientHeight
+      const rowTop = rowIndex * rowHeight
+      const rowBottom = rowTop + rowHeight
+
+      // Check if row is outside the visible area
+      if (rowTop < scrollTop || rowBottom > scrollTop + containerHeight) {
+        // Scroll to center the row in the container
+        const rowCenter = rowTop + rowHeight / 2
+        const targetScrollTop = rowCenter - containerHeight / 2
+        scrollContainer.scrollTop = Math.max(0, targetScrollTop)
+      }
+      // Otherwise row is already visible, don't scroll
+    },
+    [containerRef, rowHeight],
+  )
+
+  const getNewSelectionState = useCallback((newId: number | string, addToSelection: boolean) => {
+    if (!addToSelection || !multiselectRef.current) {
+      return { ids: [], id: newId }
+    }
+
+    // When ctrl/cmd is held and multiselect is enabled, preserve existing selections
+    const currentSelected = selectedRowsRef.current
+    const existingIds: Array<number | string> = []
+
+    // Collect all currently selected IDs
+    if (currentSelected?.id != null) {
+      existingIds.push(currentSelected.id)
+    }
+    if (currentSelected?.ids?.length) {
+      existingIds.push(...currentSelected.ids)
+    }
+
+    // Add new ID if not already selected, or toggle it off if it is
+    const newIdIndex = existingIds.indexOf(newId)
+    if (newIdIndex === -1) {
+      existingIds.push(newId)
+    }
+
+    // Deduplicate
+    const uniqueIds = Array.from(new Set(existingIds))
+    // When using ids for multi-select, id should be null (they're mutually exclusive)
+    return { ids: uniqueIds, id: null }
+  }, [])
+
+  // Keep onBeforeSelectionChange ref to avoid re-registering callbacks
+  const onBeforeSelectionChangeRef = useRef(onBeforeSelectionChange)
+  useEffect(() => {
+    onBeforeSelectionChangeRef.current = onBeforeSelectionChange
+  }, [onBeforeSelectionChange])
+
+  // Helper to check if selection change is allowed (e.g., dirty state confirmation)
+  // Pass null for newId/newRowIndex when clearing selection (e.g., Escape key)
+  const isSelectionChangeAllowed = useCallback(
+    (newId: number | string | null, newRowIndex: number | null): boolean => {
+      if (!onBeforeSelectionChangeRef.current) {
+        return true
+      }
+      const item = newId != null ? dataRef.current?.find((d) => d.id === newId) : null
+      return onBeforeSelectionChangeRef.current(item, newRowIndex) !== false
+    },
+    [],
+  )
+
+  const increaseCursor = useCallback(
+    (addToSelection = false) => {
+      const currentIndexes = indexesRef.current
+      const currentCursor = cursorRef.current
+      if (currentIndexes.length === 0) {
+        return
+      }
+      const currentPosition = currentIndexes.findIndex((item) => item[0] === currentCursor)
+      const newPosition = currentPosition + 1 >= currentIndexes.length ? 0 : currentPosition + 1
+      const newRowIndex = currentIndexes[newPosition][0]
+      const newId = currentIndexes[newPosition][1]
+
+      if (!isSelectionChangeAllowed(newId, newRowIndex)) {
+        return
+      }
+
+      setSelectedRows(getNewSelectionState(newId, addToSelection))
+      scrollRowIntoView(newRowIndex)
+    },
+    [setSelectedRows, scrollRowIntoView, getNewSelectionState, isSelectionChangeAllowed],
+  )
+
+  const decreaseCursor = useCallback(
+    (addToSelection = false) => {
+      const currentIndexes = indexesRef.current
+      const currentCursor = cursorRef.current
+      if (currentIndexes.length === 0) {
+        return
+      }
+      const currentPosition = currentIndexes.findIndex((item) => item[0] === currentCursor)
+      const newPosition = currentPosition - 1 < 0 ? currentIndexes.length - 1 : currentPosition - 1
+      const newRowIndex = currentIndexes[newPosition][0]
+      const newId = currentIndexes[newPosition][1]
+
+      if (!isSelectionChangeAllowed(newId, newRowIndex)) {
+        return
+      }
+
+      setSelectedRows(getNewSelectionState(newId, addToSelection))
+      scrollRowIntoView(newRowIndex)
+    },
+    [setSelectedRows, scrollRowIntoView, getNewSelectionState, isSelectionChangeAllowed],
+  )
+
+  // Handle arrow key navigation with preventDefault to stop page scroll
+  useEffect(() => {
+    if (keyboardNavigation === false) {
+      return
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isFocusWithinContainer() || isNull(cursorRef.current)) {
+        return
+      }
+
+      const addToSelection = event.ctrlKey || event.metaKey || event.shiftKey
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        decreaseCursor(addToSelection)
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        increaseCursor(addToSelection)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [keyboardNavigation, isFocusWithinContainer, increaseCursor, decreaseCursor])
+
+  // Handle Escape key via event listener to avoid state-based re-renders
+  useEffect(() => {
+    if (keyboardNavigation === false) {
+      return
+    }
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || !isFocusWithinContainer()) {
+        return
+      }
+
+      if (editingCellRef.current) {
+        setEditingCell(null)
+      } else if (selectedRowsRef.current && isSelectionChangeAllowed(null, null)) {
+        setSelectedRows({ ids: [], id: null })
+      }
+    }
+
+    window.addEventListener('keydown', handleEscapeKey)
+    return () => window.removeEventListener('keydown', handleEscapeKey)
+  }, [
+    keyboardNavigation,
+    isFocusWithinContainer,
+    setEditingCell,
+    setSelectedRows,
+    isSelectionChangeAllowed,
+  ])
+
+  const setCursorOnRowSelectionChange = useCallback(() => {
+    if (selectedRows && selectedRows.id) {
+      // Find all rows with matching ID
+      const matchingRows = indexes.filter((item) => selectedRows.id === item[1])
+
+      if (matchingRows.length > 0) {
+        // If we have a current cursor, prefer the row at that position if it matches
+        if (!isNull(cursor)) {
+          const currentRow = indexes.find((item) => item[0] === cursor)
+          if (currentRow && currentRow[1] === selectedRows.id) {
+            // Current cursor position matches the selected ID, keep it
+            return
+          }
+
+          // Find the matching row closest to the current cursor position
+          const closest = matchingRows.reduce((prev, curr) => {
+            const prevDiff = Math.abs(prev[0] - cursor)
+            const currDiff = Math.abs(curr[0] - cursor)
+            return currDiff < prevDiff ? curr : prev
+          })
+
+          if (cursor !== closest[0]) {
+            setCursor(closest[0])
+          }
+        } else {
+          // No cursor, use the first match
+          if (cursor !== matchingRows[0][0]) {
+            setCursor(matchingRows[0][0])
+          }
+        }
+      }
+    } else {
+      setCursor(null)
+    }
+  }, [cursor, selectedRows, indexes])
+
+  useEffect(setCursorOnRowSelectionChange, [selectedRows, indexes])
+}

package/src/table/use-sort-functions.ts

@@ -0,0 +1,90 @@
+import { isNumber, mapValues, reduce } from 'lodash-es'
+import { Children, ReactElement, ReactNode, isValidElement } from 'react'
+import { TableNode } from '@table-library/react-table-library/types/table'
+import { isGroupHeader } from './is-group-header'
+import { useTable } from './table-context'
+
+interface ColumnProps {
+  sortKey?: string
+  sortFn?: (array: Array<TableNode>) => Array<TableNode>
+}
+
+interface HeaderProps {
+  children?: ReactNode
+}
+
+export const useSortFunctions = (header: ReactElement<HeaderProps>, grouped?: boolean) => {
+  const sortFunctions: Record<number, (array: Array<TableNode>) => Array<TableNode>> = {}
+  const { select } = useTable()
+
+  const defaultSort = (sortKey: string) => {
+    return (array: Array<TableNode>) => {
+      // If an array of numbers then sort numerically.
+      if (isNumber(array[0][sortKey])) {
+        return array.sort((a, b) => a[sortKey] - b[sortKey])
+      }
+
+      // Otherwise, sort alphabetically.
+      return array.sort((a, b) => {
+        if (a[sortKey] < b[sortKey]) {
+          return -1
+        }
+
+        if (a[sortKey] > b[sortKey]) {
+          return 1
+        }
+
+        return 0
+      })
+    }
+  }
+
+  Children.toArray(header.props.children).forEach((child, index) => {
+    if (!isValidElement<ColumnProps>(child)) {
+      return
+    }
+
+    const sortKey = child.props.sortKey
+    sortFunctions[select ? index + 1 : index] = !child.props.sortFn
+      ? defaultSort(sortKey!)
+      : child.props.sortFn
+  })
+
+  const groupSort = (sortFunction: (tableList: Array<TableNode>) => Array<TableNode>) => {
+    return (tableList: Array<TableNode>) => {
+      const splitLists = reduce(
+        tableList,
+        (acc, item) => {
+          if (isGroupHeader(item)) {
+            acc.push([])
+          } else {
+            acc[acc.length - 1].push(item)
+          }
+          return acc
+        },
+        [] as Array<Array<TableNode>>,
+      )
+
+      splitLists.map((list) => (list.length ? sortFunction(list) : list))
+
+      const combineLists: Array<TableNode | Array<TableNode>> = []
+      const headers = tableList.filter((item) => isGroupHeader(item))
+      for (let i = 0; i < headers.length; i++) {
+        combineLists.push(headers[i])
+        combineLists.push(splitLists[i])
+      }
+
+      // The library tolerates the nested sub-lists this produces; keep the
+      // vendored runtime shape and only assert the declared type.
+      return combineLists as Array<TableNode>
+    }
+  }
+
+  // If table items are grouped, then split them by headers before sorting
+  // and then stitch back together after sorting.
+  if (grouped) {
+    return mapValues(sortFunctions, groupSort)
+  }
+
+  return sortFunctions
+}

package/src/tabs/index.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { List, TabsListProps } from './list'
+import { Tab, TabProps } from './tab'
+import { Tabs as TabsRoot, TabsProps } from './tabs'
+import { TabsSize, useTabs } from './tabs-context'
+
+type TabsCompoundType = {
+  (props: TabsProps): ReactElement
+  List: typeof List
+  Tab: typeof Tab
+  useTabs: typeof useTabs
+}
+
+export const Tabs: TabsCompoundType = Object.assign(TabsRoot, {
+  List,
+  Tab,
+  useTabs,
+})
+
+export type { TabsProps, TabsListProps, TabProps, TabsSize }

package/src/tabs/list.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+import { useTabs } from './tabs-context'
+
+export type TabsListProps = {
+  className?: string
+  children: ReactNode
+}
+
+export const List = ({ className, children }: TabsListProps) => {
+  const { size } = useTabs()
+
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        'flex flex-nowrap',
+        {
+          'items-start gap-6': size === 'lg',
+          'h-10 items-center gap-0.5 shrink-0 px-1.5 overflow-x-scroll hide-scrollbar':
+            size === 'md',
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/src/tabs/tab.tsx

@@ -0,0 +1,141 @@
+import React, { HTMLAttributes, ReactNode, Ref } from 'react'
+import { cn } from '../helpers'
+import { Link } from '../link'
+import { useTabs } from './tabs-context'
+
+export type TabProps = HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+  value: string
+  className?: string
+  children: ReactNode
+  asLink?: boolean
+  href?: string
+  type?: 'button' | 'submit' | 'reset'
+  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>
+}
+
+export const Tab = ({
+  value,
+  className,
+  children,
+  onClick,
+  asLink = false,
+  href,
+  type = 'button',
+  ref,
+  ...restProps
+}: TabProps) => {
+  const { value: selectedValue, onValueChange, size } = useTabs()
+  const isActive = value === selectedValue
+
+  const scrollToCenter = (el: HTMLElement) => {
+    el.scrollIntoView?.({
+      behavior: 'smooth',
+      inline: 'center',
+      block: 'nearest',
+    })
+  }
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    onValueChange(value)
+    scrollToCenter(e.currentTarget)
+    onClick?.(e as React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>)
+  }
+
+  const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
+    if (e.currentTarget.matches(':focus-visible')) {
+      scrollToCenter(e.currentTarget)
+    }
+  }
+
+  const sharedProps = {
+    role: 'tab' as const,
+    tabIndex: isActive ? -1 : 0,
+    'aria-selected': isActive,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    ...restProps,
+  }
+
+  if (size === 'md') {
+    const tabClassName = cn(
+      'whitespace-nowrap text-xs text-gray-300 dark:text-zinc-400 font-medium select-none',
+      'rounded p-1 px-2 hover:text-gray-700 hover:bg-gray-50 dark:hover:text-zinc-100 dark:hover:bg-zinc-800',
+      'outline-none focus-visible:ring-2 ring-info/75',
+      {
+        'text-gray-700 bg-gray-50 dark:text-zinc-100 dark:bg-zinc-800': isActive,
+      },
+      className,
+    )
+
+    if (asLink) {
+      return (
+        <Link
+          ref={ref as Ref<HTMLAnchorElement>}
+          href={href}
+          className={cn('text-inherit no-underline hover:no-underline', tabClassName)}
+          {...sharedProps}
+        >
+          {children}
+        </Link>
+      )
+    }
+
+    return (
+      <button
+        ref={ref as Ref<HTMLButtonElement>}
+        type={type}
+        className={tabClassName}
+        {...sharedProps}
+      >
+        {children}
+      </button>
+    )
+  }
+
+  const wrapperClassName = cn(
+    '-mb-px rounded py-2 px-0 text-sm font-bold text-gray-300 dark:text-zinc-400 text-center',
+    'whitespace-nowrap',
+    {
+      'rounded-b-none border-b-4 border-info text-gray-500 dark:text-zinc-100': isActive,
+    },
+  )
+
+  const innerClassName = cn(
+    'rounded-xl px-3 py-1 outline-none',
+    'focus-visible:ring-2 focus-visible:ring-info/75',
+    'transition-all duration-200 ease-in-out',
+    {
+      'hover:text-gray-500 hover:bg-gray-100/50 dark:hover:text-zinc-100 dark:hover:bg-zinc-800/50':
+        !isActive,
+    },
+    className,
+  )
+
+  if (asLink) {
+    return (
+      <div data-wrapper className={wrapperClassName}>
+        <Link
+          ref={ref as Ref<HTMLAnchorElement>}
+          href={href}
+          className={cn('text-inherit no-underline hover:no-underline', innerClassName)}
+          {...sharedProps}
+        >
+          {children}
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div data-wrapper className={wrapperClassName}>
+      <button
+        ref={ref as Ref<HTMLButtonElement>}
+        type={type}
+        className={innerClassName}
+        {...sharedProps}
+      >
+        {children}
+      </button>
+    </div>
+  )
+}

package/src/tabs/tabs-context.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import React, { createContext, ReactNode, useContext } from 'react'
+
+export type TabsSize = 'md' | 'lg'
+
+export interface TabsContextValue {
+  value: string
+  onValueChange: (value: string) => void
+  size: TabsSize
+}
+
+export const TabsContext = createContext<TabsContextValue | null>(null)
+
+export const useTabs = () => {
+  const context = useContext(TabsContext)
+  if (!context) {
+    throw new Error('Tabs.Tab must be used within a Tabs component')
+  }
+  return context
+}
+
+interface TabsProviderProps {
+  children: ReactNode
+  value: string
+  onValueChange: (value: string) => void
+  size: TabsSize
+}
+
+export const TabsProvider = ({ children, value, onValueChange, size }: TabsProviderProps) => {
+  const contextValue: TabsContextValue = {
+    value,
+    onValueChange,
+    size,
+  }
+
+  return <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>
+}

package/src/tabs/tabs.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+import { TabsProvider, TabsSize } from './tabs-context'
+
+export type TabsProps = {
+  value: string
+  onValueChange: (value: string) => void
+  size?: TabsSize
+  className?: string
+  children: ReactNode
+}
+
+export const Tabs = ({ value, onValueChange, size = 'lg', className, children }: TabsProps) => (
+  <TabsProvider value={value} onValueChange={onValueChange} size={size}>
+    <div
+      className={cn(
+        'border-b border-gray-100 dark:border-zinc-800',
+        {
+          'overflow-x-auto overflow-y-hidden hide-scrollbar': size === 'lg',
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  </TabsProvider>
+)

package/src/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea'