@toolpath/ui 0.1.0

package/src/quantity-input/quantity-input.tsx

@@ -0,0 +1,158 @@
+import React, { ChangeEvent, MouseEvent, Ref } from 'react'
+import { cn } from '../helpers'
+import { MinusIcon, PlusIcon } from '@phosphor-icons/react'
+
+export type QuantityInputProps = {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  variant?: 'default' | 'muted'
+  disabled?: boolean
+  className?: string
+  id?: string
+  ref?: Ref<HTMLInputElement>
+}
+
+export const QuantityInput = ({
+  value,
+  onValueChange,
+  min = 0,
+  max = Infinity,
+  step = 1,
+  size = 'md',
+  variant = 'default',
+  disabled = false,
+  className,
+  id,
+  ref,
+}: QuantityInputProps) => {
+  const handleDecrement = (e: MouseEvent) => {
+    e.preventDefault()
+    const next = value - step
+    if (next >= min) {
+      onValueChange(next)
+    }
+  }
+
+  const handleIncrement = (e: MouseEvent) => {
+    e.preventDefault()
+    const next = value + step
+    if (next <= max) {
+      onValueChange(next)
+    }
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value
+    if (raw === '') {
+      return
+    }
+    const parsed = Number(raw)
+    if (!isNaN(parsed)) {
+      onValueChange(Math.min(max, Math.max(min, parsed)))
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      const next = value + step
+      if (next <= max) {
+        onValueChange(next)
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      const next = value - step
+      if (next >= min) {
+        onValueChange(next)
+      }
+    }
+  }
+
+  const handleBlur = () => {
+    onValueChange(Math.min(max, Math.max(min, value)))
+  }
+
+  const atMin = value <= min
+  const atMax = value >= max
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-stretch overflow-hidden font-medium',
+        'focus-within:ring-2 ring-info/50 dark:ring-info/75',
+        {
+          'border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 focus-within:border-info dark:focus-within:border-info':
+            variant === 'default',
+          'bg-gray-50 dark:bg-zinc-800': variant === 'muted',
+          'h-5 rounded text-xs': size === 'sm',
+          'h-6 rounded text-xs': size === 'md',
+          'h-7 rounded text-sm': size === 'lg',
+          'h-9 rounded-md text-lg': size === 'xl',
+          'opacity-50 pointer-events-none': disabled,
+        },
+        className,
+      )}
+      data-disabled={disabled || undefined}
+    >
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled={disabled || atMin}
+        onClick={handleDecrement}
+        className={cn(
+          'flex shrink-0 items-center justify-center bg-gray-200 dark:bg-zinc-800 transition-colors cursor-pointer',
+          'hover:bg-gray-300 dark:hover:bg-zinc-900 active:bg-gray-400 dark:active:bg-zinc-900 disabled:opacity-40 disabled:pointer-events-none',
+          {
+            'w-5': size === 'sm',
+            'w-6': size === 'md',
+            'w-7': size === 'lg',
+            'w-9': size === 'xl',
+          },
+        )}
+      >
+        <MinusIcon className="size-3.5 text-white dark:text-zinc-100" />
+      </button>
+      <input
+        ref={ref}
+        id={id}
+        data-testid={id}
+        type="text"
+        inputMode="numeric"
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        disabled={disabled}
+        className={cn(
+          'min-w-0 flex-1 bg-transparent text-center text-gray-500 dark:text-zinc-100 outline-none',
+          {
+            'px-1': size === 'sm' || size === 'md',
+            'px-2': size === 'lg' || size === 'xl',
+          },
+        )}
+      />
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled={disabled || atMax}
+        onClick={handleIncrement}
+        className={cn(
+          'flex shrink-0 items-center justify-center bg-gray-200 dark:bg-zinc-800 transition-colors cursor-pointer',
+          'hover:bg-gray-300 dark:hover:bg-zinc-900 active:bg-gray-400 dark:active:bg-zinc-900 disabled:opacity-40 disabled:pointer-events-none',
+          {
+            'w-5': size === 'sm',
+            'w-6': size === 'md',
+            'w-7': size === 'lg',
+            'w-9': size === 'xl',
+          },
+        )}
+      >
+        <PlusIcon className="size-3.5 text-white dark:text-zinc-100" />
+      </button>
+    </div>
+  )
+}

package/src/scroll-area/index.ts

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

package/src/scroll-area/scroll-area.tsx

@@ -0,0 +1,82 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import { ScrollArea as BaseScrollArea } from '@base-ui/react'
+import { cn } from '../helpers'
+
+export interface ScrollAreaState {
+  hasOverflow: boolean
+}
+
+export type ScrollAreaSize = 'sm' | 'md'
+
+export interface ScrollAreaProps {
+  children: ReactNode | ((state: ScrollAreaState) => ReactNode)
+  className?: string
+  size?: ScrollAreaSize
+}
+
+export const ScrollArea = ({ children, className, size = 'md' }: ScrollAreaProps) => {
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (!viewport) {
+      return
+    }
+
+    const checkOverflow = () => {
+      setHasOverflow(viewport.scrollHeight > viewport.clientHeight)
+    }
+
+    checkOverflow()
+
+    const resizeObserver = new ResizeObserver(checkOverflow)
+    resizeObserver.observe(viewport)
+
+    const mutationObserver = new MutationObserver(checkOverflow)
+    mutationObserver.observe(viewport, { childList: true, subtree: true })
+
+    return () => {
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [])
+
+  const state: ScrollAreaState = { hasOverflow }
+
+  return (
+    <BaseScrollArea.Root className={cn('flex-1 min-h-0 w-full', className)}>
+      <BaseScrollArea.Viewport
+        ref={viewportRef}
+        tabIndex={-1}
+        data-viewport
+        className="h-full w-full overscroll-contain outline-none"
+      >
+        {typeof children === 'function' ? children(state) : children}
+      </BaseScrollArea.Viewport>
+      <BaseScrollArea.Scrollbar
+        data-scrollbar
+        className={cn(
+          'relative flex rounded bg-gray-100 dark:bg-zinc-700 opacity-0 pointer-events-none transition-opacity',
+          "before:absolute before:content-['']",
+          'data-[orientation=vertical]:m-2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:-translate-x-1/2',
+          'data-[orientation=horizontal]:m-2 data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:right-0 data-[orientation=horizontal]:before:-bottom-2',
+          // Reveal each scrollbar only when its orientation has overflow.
+          'data-[orientation=vertical]:data-[has-overflow-y]:opacity-100',
+          'data-[orientation=horizontal]:data-[has-overflow-x]:opacity-100',
+          'data-[hovering]:pointer-events-auto data-[hovering]:opacity-100 data-[hovering]:delay-0',
+          'data-[scrolling]:pointer-events-auto data-[scrolling]:opacity-100 data-[scrolling]:duration-0',
+          {
+            'data-[orientation=vertical]:w-1 data-[orientation=horizontal]:h-1': size === 'sm',
+            'data-[orientation=vertical]:w-2 data-[orientation=horizontal]:h-2': size === 'md',
+          },
+        )}
+      >
+        <BaseScrollArea.Thumb
+          data-thumb
+          className="w-full rounded bg-gray-500/50 dark:bg-zinc-400/50"
+        />
+      </BaseScrollArea.Scrollbar>
+    </BaseScrollArea.Root>
+  )
+}

package/src/slider/index.ts

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

package/src/slider/slider.tsx

@@ -0,0 +1,75 @@
+import { debounce } from 'lodash-es'
+import React, { useEffect, useMemo } from 'react'
+import {
+  Slider as BaseSlider,
+  SliderRoot,
+  SliderRootProps,
+  SliderThumbProps,
+} from '@base-ui/react/slider'
+import { cn } from '../helpers'
+
+export type SliderProps = Omit<SliderRootProps, 'onValueChange'> & {
+  variant?: 'default'
+  onFocus?: SliderThumbProps['onFocus'] | undefined
+  onBlur?: SliderThumbProps['onBlur'] | undefined
+  onValueChange?: (value: number, eventDetails: SliderRoot.ChangeEventDetails) => void
+}
+
+export const Slider = ({
+  variant = 'default',
+  onFocus,
+  onBlur,
+  onValueChange,
+  className = '',
+  ...props
+}: SliderProps) => {
+  const debouncedOnValueChange = useMemo(
+    () =>
+      debounce((value, eventDetails) => {
+        if (typeof onValueChange === 'function') {
+          onValueChange(Array.isArray(value) ? value[0] : value, eventDetails)
+        }
+      }, 10),
+    [onValueChange],
+  )
+
+  useEffect(() => {
+    return () => debouncedOnValueChange.cancel()
+  }, [debouncedOnValueChange])
+
+  return (
+    <BaseSlider.Root
+      thumbAlignment="edge"
+      className={cn('w-full data-[dragging]:cursor-ew-resize hover:cursor-ew-resize', className)}
+      onValueChange={debouncedOnValueChange}
+      {...props}
+    >
+      <BaseSlider.Control
+        data-control
+        className="flex w-full touch-none items-center select-none outline-none"
+      >
+        <BaseSlider.Track className="h-2 w-full rounded-full bg-gray-100 dark:bg-zinc-700 select-none hover:cursor-ew-resize">
+          <BaseSlider.Indicator
+            data-indicator
+            className={cn('rounded-full bg-gray-600 dark:bg-zinc-400 select-none', {
+              'bg-gray-200 dark:bg-zinc-700': props.disabled && variant === 'default',
+            })}
+          />
+          <BaseSlider.Thumb
+            data-thumb
+            onBlur={onBlur}
+            onFocus={onFocus}
+            className={cn(
+              'size-4 appearance-none rounded-full bg-white dark:bg-zinc-200 shadow-lg ring-1 ring-gray-200 dark:ring-zinc-800 outline-none',
+              'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-info/60 dark:has-[:focus-visible]:ring-info',
+              {
+                'cursor-ew-resize hover:ring-offset-2 transition ease-in-out': !props.disabled,
+              },
+              { 'cursor-not-allowed bg-gray-100': props.disabled },
+            )}
+          />
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  )
+}

package/src/star/index.ts

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

package/src/star/star.tsx

@@ -0,0 +1,99 @@
+import React, { useRef } from 'react'
+import { cn } from '../helpers'
+import { StarIcon } from '@phosphor-icons/react'
+
+export interface StarChangeEvent {
+  shiftKey: boolean
+}
+
+export type StarProps = {
+  checked: boolean
+  onChange: (checked: boolean, event: StarChangeEvent) => void
+  name: string
+  className?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  tabIndex?: number
+}
+
+export const Star = ({
+  checked,
+  onChange,
+  name,
+  className,
+  disabled = false,
+  size = 'md',
+  tabIndex = 0,
+}: StarProps) => {
+  const shiftKeyRef = useRef(false)
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (disabled) {
+      return
+    }
+    shiftKeyRef.current = e.shiftKey
+    onChange(!checked, { shiftKey: shiftKeyRef.current })
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) {
+      return
+    }
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      shiftKeyRef.current = e.shiftKey
+      onChange(!checked, { shiftKey: shiftKeyRef.current })
+    }
+  }
+
+  const sizeClasses = {
+    sm: 'size-3',
+    md: 'size-4',
+    lg: 'size-5',
+  }
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      name={name}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'group grid cursor-pointer outline-none',
+        'focus-visible:ring-2 ring-info/75 ring-offset-1 rounded-sm',
+        'transition-colors duration-150',
+        {
+          'cursor-not-allowed opacity-50': disabled,
+        },
+        className,
+      )}
+    >
+      <StarIcon
+        weight="fill"
+        className={cn(
+          sizeClasses[size],
+          'col-start-1 row-start-1 transition-opacity duration-150 pointer-event-none',
+          {
+            'text-warning': checked,
+            'text-transparent': !checked,
+            'group-hover:text-warning': !disabled && !checked,
+          },
+        )}
+      />
+      <StarIcon
+        weight="regular"
+        className={cn(sizeClasses[size], 'col-start-1 row-start-1 pointer-event-none', {
+          'text-[#F0D360]': checked,
+          'text-gray-200 group-hover:text-gray-200 dark:text-zinc-500 group-hover:dark:text-warning-darken/75':
+            !checked && !disabled,
+          'text-gray-200 dark:text-zinc-800': !checked && disabled,
+        })}
+      />
+    </button>
+  )
+}

package/src/switch/index.ts

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

package/src/switch/switch.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Switch as BaseSwitch, SwitchRootProps } from '@base-ui/react'
+import { cn } from '../helpers'
+
+export type SwitchProps = SwitchRootProps
+
+export const Switch = ({
+  checked,
+  onCheckedChange,
+  disabled = false,
+  className = '',
+  ...props
+}: SwitchProps) => {
+  return (
+    <BaseSwitch.Root
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      className={cn(
+        'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full bg-gray-200 dark:bg-zinc-700 transition-colors',
+        'focus:outline-none focus:ring-2 focus:ring-info/50 focus:ring-offset-1 ring-offset-white dark:ring-offset-zinc-800 dark:focus:ring-info/75',
+        'data-[checked]:bg-info dark:data-[checked]:bg-info/75 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60',
+        className,
+      )}
+      {...props}
+    >
+      <BaseSwitch.Thumb
+        data-thumb
+        className="inline-block h-4 w-4 bg-white dark:bg-zinc-100 translate-x-1 rounded-full transition-transform data-[checked]:translate-x-6"
+      />
+    </BaseSwitch.Root>
+  )
+}

package/src/table/body.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode, RefObject } from 'react'
+import { useKeyboardNavigation } from './use-keyboard-navigation'
+
+interface Props {
+  indexes: Array<[number, number | string]>
+  children: ReactNode
+  containerRef?: RefObject<HTMLElement | null>
+  data?: Array<any>
+}
+
+export const Body = ({ indexes, children, containerRef, data }: Props) => {
+  useKeyboardNavigation(indexes, containerRef, data)
+
+  return <>{children}</>
+}

package/src/table/cell-context.tsx

@@ -0,0 +1,48 @@
+import React, { FC, ReactElement, createContext, useCallback, useContext, useMemo } from 'react'
+import { useRow } from './row-context'
+import { useTable } from './table-context'
+
+export interface CellContextInterface {
+  index: number
+  isEditing: boolean
+  toggleIsEditing: () => void
+  isHovered: boolean
+}
+
+const CellContext = createContext<CellContextInterface>({} as CellContextInterface)
+
+interface ProviderProps {
+  index: number
+  isHovered: boolean
+  children: ReactElement
+}
+
+const CellProvider: FC<ProviderProps> = ({ index, isHovered, children }) => {
+  const { select, editingCell, setEditingCell } = useTable()
+  const { item, index: rowIndex } = useRow()
+  const isEditing =
+    editingCell !== null &&
+    editingCell[0] === rowIndex &&
+    editingCell[1] === item.id &&
+    editingCell[2] === index
+
+  const toggleIsEditing = useCallback(() => {
+    setEditingCell((prev) => (prev ? null : [rowIndex, item.id, index]))
+  }, [setEditingCell, rowIndex, item?.id, index])
+
+  const value = useMemo(
+    () => ({
+      index,
+      isEditing: select ? isEditing : false,
+      isHovered,
+      toggleIsEditing,
+    }),
+    [index, select, isEditing, isHovered, toggleIsEditing],
+  )
+
+  return <CellContext.Provider value={value}>{children}</CellContext.Provider>
+}
+
+const useCell = () => useContext(CellContext)
+const CellConsumer = CellContext.Consumer
+export { useCell, CellProvider, CellContext, CellConsumer }

package/src/table/cell.tsx

@@ -0,0 +1,83 @@
+import React, { memo, useState } from 'react'
+import { Cell as BaseCell } from '@table-library/react-table-library/table'
+import { CellTree } from '@table-library/react-table-library/tree'
+import { CellProps as BaseCellProps } from '@table-library/react-table-library/types/table'
+import { cn } from '../helpers'
+import { CellConsumer, CellProvider } from './cell-context'
+import { useRow } from './row-context'
+import { useRowDisabled } from './row-disabled-context'
+import { useTable } from './table-context'
+
+const Divider = () => {
+  const { isSelected, isHovered } = useRow()
+  return (
+    <div className="absolute top-0 right-0 w-1 h-full py-1 shrink-0">
+      <div
+        className={cn('w-1 h-full border-r border-gray-50 dark:border-zinc-800', {
+          'border-gray-100 dark:border-zinc-800': isSelected || isHovered,
+        })}
+      ></div>
+    </div>
+  )
+}
+
+export interface CellProps extends BaseCellProps {
+  divider?: boolean
+  tree?: boolean
+}
+
+export const Cell = memo(function Cell({
+  children,
+  className,
+  divider = true,
+  tree = false,
+  ...props
+}: CellProps) {
+  const { columns, select, editingCell, density } = useTable()
+  const { isSelected: isRowSelected, isHovered: isRowHovered, item, index: rowIndex } = useRow()
+  const isRowDisabled = useRowDisabled()
+  const [isHovered, setIsHovered] = useState(false)
+  const isLastColumn = props.index === columns
+  const cellIndex = props.index - (select ? 1 : 0)
+  const nextCellIsEditing =
+    editingCell !== null &&
+    editingCell[0] === rowIndex &&
+    editingCell[1] === item.id &&
+    editingCell[2] === cellIndex + 1
+  const Wrapper = tree ? CellTree : BaseCell
+
+  return (
+    <Wrapper
+      item={tree ? item : undefined}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className="border-b border-gray-50 dark:border-zinc-800 relative"
+      {...props}
+    >
+      <CellProvider isHovered={isHovered} index={cellIndex}>
+        <CellConsumer>
+          {({ isEditing }) => {
+            return (
+              <>
+                <div
+                  className={cn(
+                    'flex flex-row items-center text-xs font-medium px-1.5 flex-1',
+                    density === 'roomy' ? 'h-11' : 'h-8',
+                    {
+                      'bg-gray-50 dark:bg-zinc-800': isRowSelected || isRowHovered,
+                      'text-gray-300 dark:text-zinc-500': isRowDisabled,
+                    },
+                    className,
+                  )}
+                >
+                  {children}
+                </div>
+                {divider && !isLastColumn && !isEditing && !nextCellIsEditing && <Divider />}
+              </>
+            )
+          }}
+        </CellConsumer>
+      </CellProvider>
+    </Wrapper>
+  )
+})

package/src/table/group-empty-state.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+import { getRowHeight } from './table'
+import { useTable } from './table-context'
+
+interface GroupEmptyStateProps {
+  children: ReactNode
+  className?: string
+}
+
+export const GroupEmptyState = ({ children, className }: GroupEmptyStateProps) => {
+  const { columns, select, density } = useTable()
+
+  return (
+    <div
+      className={cn(
+        'w-full bg-white dark:bg-zinc-950 flex flex-row items-center justify-center px-2 text-xs text-gray-300 dark:text-zinc-200 font-normal border-b border-gray-100 dark:border-zinc-800',
+        className,
+      )}
+      style={{
+        gridColumn: `span ${columns + (select ? 1 : 0)}`,
+        height: getRowHeight(density) * 2,
+      }}
+    >
+      {children}
+    </div>
+  )
+}