@toolpath/ui 0.1.0

package/src/pagination/pagination.tsx

@@ -0,0 +1,136 @@
+import React, { FC } from 'react'
+import { cn } from '../helpers'
+import { CaretRightIcon } from '@phosphor-icons/react'
+
+export type PaginationMetadata = {
+  totalPages: number
+  perPage: number
+}
+
+export type PaginationProps = {
+  pagination: PaginationMetadata
+  page: number
+  onClick: (page: number) => void
+  className?: string
+}
+
+export const Pagination: FC<PaginationProps> = ({ pagination, page, onClick, className }) => {
+  const isDisabled = pagination.totalPages <= 1
+
+  const paginationLink = (linkedPage: number, ellipses: boolean = false) => (
+    <li
+      key={ellipses ? `ellipsis-${linkedPage}` : linkedPage}
+      className="inline-block text-xs tracking-tight text-gray-300 dark:text-zinc-400"
+    >
+      <button
+        disabled={page === linkedPage || isDisabled}
+        className={cn(
+          'select-none rounded-sm',
+          'hover:bg-gray-50 hover:text-gray dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-info/75',
+          'font-bold transition-colors duration-200',
+          {
+            'bg-gray-300 text-white hover:bg-gray-300 hover:text-white dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800 dark:hover:text-zinc-50':
+              page === linkedPage && !isDisabled,
+            'hidden sm:block': page !== linkedPage,
+            'bg-gray-100 text-white hover:bg-gray-100 hover:text-white dark:bg-zinc-900 dark:text-zinc-500 dark:hover:bg-zinc-900 dark:hover:text-zinc-500':
+              isDisabled,
+          },
+        )}
+        onClick={() => onClick(linkedPage)}
+      >
+        <div className="min-w-4 px-1 py-px">{ellipses ? '…' : linkedPage}</div>
+      </button>
+    </li>
+  )
+
+  return (
+    <div className={cn('flex whitespace-nowrap', className)}>
+      <button
+        disabled={page === 1}
+        className={cn(
+          'mt-px flex items-center rounded-sm font-semibold',
+          'text-gray-300 hover:bg-gray-50',
+          'dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-info/75',
+          {
+            'cursor-not-allowed text-gray-100 hover:bg-transparent dark:text-zinc-600 dark:hover:bg-transparent':
+              page === 1,
+          },
+        )}
+        onClick={() => onClick(page - 1)}
+      >
+        <CaretRightIcon className="size-5 rotate-180" />
+        <span className="sr-only">Previous</span>
+      </button>
+      <nav className="text-sm text-gray-400 dark:text-zinc-300">
+        <ul>
+          {paginationLink(1)}
+          {pagination.totalPages >= 2 &&
+            (pagination.totalPages <= 5 || page < 4) &&
+            paginationLink(2)}
+          {pagination.totalPages >= 3 &&
+            (pagination.totalPages <= 5 || page < 4) &&
+            paginationLink(3)}
+          {pagination.totalPages === 5 && paginationLink(4)}
+          {page > 3 &&
+            pagination.totalPages > 5 &&
+            paginationLink(
+              page >= pagination.totalPages - 2 ? pagination.totalPages - 3 : page - 2,
+              true,
+            )}
+          {pagination.totalPages > 6 &&
+            page >= 4 &&
+            page < pagination.totalPages - 2 &&
+            paginationLink(page - 1)}
+          {pagination.totalPages > 6 &&
+            page >= 4 &&
+            page < pagination.totalPages - 2 &&
+            paginationLink(page)}
+          {pagination.totalPages > 6 &&
+            page >= 4 &&
+            page < pagination.totalPages - 2 &&
+            paginationLink(page + 1)}
+
+          {pagination.totalPages > 5 &&
+            page < pagination.totalPages - 2 &&
+            paginationLink(
+              page < 3
+                ? 4
+                : page === 3
+                  ? page + 1
+                  : page <= pagination.totalPages - 3
+                    ? page + 2
+                    : pagination.totalPages - 4,
+              true,
+            )}
+
+          {pagination.totalPages > 5 &&
+            page >= pagination.totalPages - 2 &&
+            paginationLink(pagination.totalPages - 2)}
+          {pagination.totalPages > 5 &&
+            page >= pagination.totalPages - 2 &&
+            paginationLink(pagination.totalPages - 1)}
+          {pagination.totalPages > 3 && paginationLink(pagination.totalPages)}
+        </ul>
+      </nav>
+      <button
+        disabled={page >= pagination.totalPages}
+        className={cn(
+          'mt-px flex items-center rounded-sm font-semibold',
+          'text-gray-300 hover:bg-gray-50',
+          'dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-info/75',
+          {
+            'cursor-not-allowed text-gray-100 hover:bg-transparent dark:text-zinc-600 dark:hover:bg-transparent':
+              page >= pagination.totalPages,
+          },
+        )}
+        onClick={() => onClick(page + 1)}
+      >
+        <span className="sr-only">Next</span>
+        <CaretRightIcon className="size-5" />
+      </button>
+    </div>
+  )
+}

package/src/panels/collapsed.tsx

@@ -0,0 +1,32 @@
+import React, { FC, KeyboardEvent } from 'react'
+import { DotsSixVerticalIcon } from '@phosphor-icons/react'
+import { useOrientation } from './orientation-context'
+
+export interface CollapsedProps {
+  onExpand: () => void
+}
+
+export const Collapsed: FC<CollapsedProps> = ({ onExpand }) => {
+  const orientation = useOrientation()
+  const isVertical = orientation === 'vertical'
+
+  return (
+    <button
+      type="button"
+      data-handle
+      onMouseDown={onExpand}
+      onKeyDown={(e: KeyboardEvent) => {
+        if (e.key === ' ') {
+          e.preventDefault()
+          onExpand()
+        }
+      }}
+      className={`flex h-full relative w-full items-center justify-center group outline-none focus-visible:ring-2 ring-info/75 ring-inset ${isVertical ? 'cursor-row-resize' : 'cursor-col-resize'}`}
+    >
+      <DotsSixVerticalIcon
+        data-handle-icon
+        className={`size-4 text-gray-200 dark:text-zinc-500 group-hover:text-gray-300 dark:group-hover:text-zinc-400 ${isVertical ? 'rotate-90' : ''}`}
+      />
+    </button>
+  )
+}

package/src/panels/group.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react'
+import { Group as BaseGroup, type GroupProps, useGroupRef } from 'react-resizable-panels'
+import { LayoutContext } from './layout-context'
+import { OrientationContext } from './orientation-context'
+
+export const Group = ({ orientation = 'horizontal', onLayoutChanged, ...props }: GroupProps) => {
+  const groupRef = useGroupRef()
+
+  const notifyLayoutChanged = useCallback(() => {
+    if (onLayoutChanged && groupRef.current) {
+      onLayoutChanged(groupRef.current.getLayout())
+    }
+  }, [onLayoutChanged, groupRef])
+
+  return (
+    <OrientationContext.Provider value={orientation}>
+      <LayoutContext.Provider value={notifyLayoutChanged}>
+        <BaseGroup
+          orientation={orientation}
+          groupRef={groupRef}
+          onLayoutChanged={onLayoutChanged}
+          {...props}
+        />
+      </LayoutContext.Provider>
+    </OrientationContext.Provider>
+  )
+}

package/src/panels/index.ts

@@ -0,0 +1,57 @@
+import {
+  isCoarsePointer as _isCoarsePointer,
+  useDefaultLayout as _useDefaultLayout,
+  useGroupCallbackRef as _useGroupCallbackRef,
+  useGroupRef as _useGroupRef,
+  usePanelCallbackRef as _usePanelCallbackRef,
+  usePanelRef as _usePanelRef,
+} from 'react-resizable-panels'
+import type {
+  GroupImperativeHandle as _GroupImperativeHandle,
+  GroupProps as _GroupProps,
+  Layout as _Layout,
+  LayoutStorage as _LayoutStorage,
+  OnGroupLayoutChange as _OnGroupLayoutChange,
+  OnPanelResize as _OnPanelResize,
+  Orientation as _Orientation,
+  PanelImperativeHandle as _PanelImperativeHandle,
+  PanelProps as _PanelProps,
+  PanelSize as _PanelSize,
+  SeparatorProps as _SeparatorProps,
+  SizeUnit as _SizeUnit,
+} from 'react-resizable-panels'
+import { Collapsed as _Collapsed } from './collapsed'
+import type { CollapsedProps as _CollapsedProps } from './collapsed'
+import { useOrientation as _useOrientation } from './orientation-context'
+import { Group as _Group } from './group'
+import { Panel as _Panel } from './panel'
+import { Separator as _Separator } from './separator'
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace Panels {
+  export const Group = _Group
+  export const Panel = _Panel
+  export const Separator = _Separator
+  export const Collapsed = _Collapsed
+  export const isCoarsePointer = _isCoarsePointer
+  export const useDefaultLayout = _useDefaultLayout
+  export const useGroupCallbackRef = _useGroupCallbackRef
+  export const useGroupRef = _useGroupRef
+  export const usePanelCallbackRef = _usePanelCallbackRef
+  export const useOrientation = _useOrientation
+  export const usePanelRef = _usePanelRef
+
+  export type GroupImperativeHandle = _GroupImperativeHandle
+  export type GroupProps = _GroupProps
+  export type Layout = _Layout
+  export type LayoutStorage = _LayoutStorage
+  export type OnGroupLayoutChange = _OnGroupLayoutChange
+  export type OnPanelResize = _OnPanelResize
+  export type Orientation = _Orientation
+  export type PanelImperativeHandle = _PanelImperativeHandle
+  export type PanelProps = _PanelProps
+  export type PanelSize = _PanelSize
+  export type SeparatorProps = _SeparatorProps
+  export type SizeUnit = _SizeUnit
+  export type CollapsedProps = _CollapsedProps
+}

package/src/panels/layout-context.ts

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react'
+
+export const LayoutContext = createContext<(() => void) | null>(null)
+
+export const useLayoutChanged = () => useContext(LayoutContext)

package/src/panels/orientation-context.tsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react'
+
+export const OrientationContext = createContext<'horizontal' | 'vertical'>('horizontal')
+
+export const useOrientation = () => useContext(OrientationContext)

package/src/panels/panel.tsx

@@ -0,0 +1,95 @@
+import React, { ReactNode, useCallback, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
+import {
+  Panel as BasePanel,
+  type PanelProps as BasePanelProps,
+  type PanelSize,
+  usePanelRef,
+} from 'react-resizable-panels'
+import { Collapsed } from './collapsed'
+import { useLayoutChanged } from './layout-context'
+
+type PanelProps = BasePanelProps & {
+  children?: ReactNode
+  onExpand?: () => void
+  onCollapse?: () => void
+}
+
+const DEFAULT_COLLAPSED_SIZE = 20
+
+export const Panel = ({
+  collapsible,
+  collapsedSize = collapsible ? DEFAULT_COLLAPSED_SIZE : undefined,
+  panelRef: panelRefProp,
+  onResize: onResizeProp,
+  onExpand: onExpandProp,
+  onCollapse: onCollapseProp,
+  defaultSize,
+  children,
+  ...props
+}: PanelProps) => {
+  const internalRef = usePanelRef()
+  const panelRef = panelRefProp ?? (collapsible ? internalRef : undefined)
+
+  const collapsedPx = typeof collapsedSize === 'number' ? collapsedSize : 0
+  const [width, setWidth] = useState(
+    typeof defaultSize === 'number' ? defaultSize : collapsedPx + 1,
+  )
+  const wasCollapsedRef = useRef(false)
+
+  const notifyLayoutChanged = useLayoutChanged()
+
+  const handleResize = useCallback(
+    (size: PanelSize, id: string | number | undefined, prevSize: PanelSize | undefined) => {
+      const isCollapsed = Boolean(collapsible && size.inPixels <= collapsedPx)
+      const wasCollapsed = wasCollapsedRef.current
+      if (isCollapsed !== wasCollapsed) {
+        wasCollapsedRef.current = isCollapsed
+        flushSync(() => setWidth(size.inPixels))
+        if (isCollapsed) {
+          onCollapseProp?.()
+        } else {
+          onExpandProp?.()
+        }
+        if (props.id) {
+          notifyLayoutChanged?.()
+        }
+      } else {
+        setWidth(size.inPixels)
+      }
+      onResizeProp?.(size, id, prevSize)
+    },
+    [
+      collapsible,
+      collapsedPx,
+      onResizeProp,
+      onExpandProp,
+      onCollapseProp,
+      props.id,
+      notifyLayoutChanged,
+    ],
+  )
+
+  const handleExpand = useCallback(() => {
+    if (panelRef && 'current' in panelRef) {
+      panelRef.current?.expand()
+    }
+    onExpandProp?.()
+    if (props.id) {
+      notifyLayoutChanged?.()
+    }
+  }, [panelRef, onExpandProp, props.id, notifyLayoutChanged])
+
+  return (
+    <BasePanel
+      collapsible={collapsible}
+      collapsedSize={collapsedSize}
+      panelRef={panelRef}
+      onResize={collapsible ? handleResize : onResizeProp}
+      defaultSize={defaultSize}
+      {...props}
+    >
+      {collapsible && width <= collapsedPx ? <Collapsed onExpand={handleExpand} /> : children}
+    </BasePanel>
+  )
+}

package/src/panels/separator.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react'
+import {
+  Separator as BaseSeparator,
+  type SeparatorProps as BaseSeparatorProps,
+} from 'react-resizable-panels'
+import { cn } from '../helpers'
+import { useOrientation } from './orientation-context'
+
+type SeparatorProps = Omit<BaseSeparatorProps, 'elementRef'> & {
+  elementRef?: BaseSeparatorProps['elementRef']
+}
+
+export const Separator = ({ elementRef, className, ...props }: SeparatorProps) => {
+  const orientation = useOrientation()
+
+  const ref = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el) {
+        el.tabIndex = -1
+      }
+      if (typeof elementRef === 'function') {
+        elementRef(el)
+      } else if (elementRef) {
+        elementRef.current = el
+      }
+    },
+    [elementRef],
+  )
+
+  return (
+    <BaseSeparator
+      elementRef={ref}
+      className={cn(
+        'border-gray-100 dark:border-zinc-800 outline-none',
+        {
+          'border-r': orientation === 'horizontal',
+          'border-t': orientation === 'vertical',
+        },
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/pin/index.ts

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

package/src/pin/pin.tsx

@@ -0,0 +1,99 @@
+import React, { useRef } from 'react'
+import { cn } from '../helpers'
+import { PushPinIcon } from '@phosphor-icons/react'
+
+export interface PinChangeEvent {
+  shiftKey: boolean
+}
+
+export type PinProps = {
+  checked: boolean
+  onChange: (checked: boolean, event: PinChangeEvent) => void
+  name: string
+  className?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  tabIndex?: number
+}
+
+export const Pin = ({
+  checked,
+  onChange,
+  name,
+  className,
+  disabled = false,
+  size = 'md',
+  tabIndex = 0,
+}: PinProps) => {
+  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,
+      )}
+    >
+      <PushPinIcon
+        weight="fill"
+        className={cn(
+          sizeClasses[size],
+          'col-start-1 row-start-1 transition-opacity duration-150 pointer-event-none',
+          {
+            'text-gray-200 dark:text-zinc-100': checked,
+            'text-transparent': !checked,
+            'group-hover:text-gray-200 dark:group-hover:text-zinc-400': !disabled && !checked,
+          },
+        )}
+      />
+      <PushPinIcon
+        weight="regular"
+        className={cn(sizeClasses[size], 'col-start-1 row-start-1 pointer-event-none', {
+          'text-gray-200 dark:text-zinc-100': checked,
+          'text-gray-200 group-hover:text-gray-200 dark:text-zinc-400 group-hover:dark:text-zinc-400':
+            !checked && !disabled,
+          'text-gray-200 dark:text-zinc-400': !checked && disabled,
+        })}
+      />
+    </button>
+  )
+}

package/src/progress-bar/index.ts

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

package/src/progress-bar/progress-bar.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { cn } from '../helpers'
+
+export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg'
+
+export type ProgressBarProps = {
+  progress: number
+  size?: ProgressBarSize
+  className?: string
+}
+
+export const ProgressBar = ({ progress, size = 'lg', className }: ProgressBarProps) => {
+  return (
+    <div
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={Math.round(progress)}
+      aria-valuetext={`${Math.round(progress)}%`}
+      role="progressbar"
+      className={cn('relative', className)}
+    >
+      <div
+        data-track
+        data-complete={progress >= 100}
+        className={cn(
+          'flex overflow-hidden rounded-full',
+          'border border-gray-200 dark:border-zinc-800 bg-gray-100 dark:bg-zinc-900',
+          {
+            'h-1': size === 'xs',
+            'h-1.5': size === 'sm',
+            'h-2': size === 'md',
+            'h-4': size === 'lg',
+          },
+        )}
+      >
+        <div
+          data-indicator
+          data-complete={progress >= 100}
+          style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }}
+          className={cn(
+            'rounded-r-full transition-[width] duration-300 ease-out',
+            'bg-white dark:bg-zinc-600',
+          )}
+        />
+      </div>
+    </div>
+  )
+}

package/src/quantity-input/index.ts

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