@toolpath/ui 0.1.0

package/src/combobox/index.tsx

@@ -0,0 +1,64 @@
+import { ReactElement } from 'react'
+import { Button, ComboboxButtonProps } from './button'
+import { ComboboxProps, Combobox as ComboboxRoot } from './combobox'
+import { useCombobox } from './combobox-context'
+import { ComboboxEmptyProps, Empty } from './empty'
+import { ComboboxGroupProps, Group } from './group'
+import { ComboboxGroupLabelProps, GroupLabel } from './group-label'
+import { ComboboxIconProps, Icon } from './icon'
+import { ComboboxInputProps, Input } from './input'
+import { ComboboxItemProps, Item } from './item'
+import { ComboboxItemIndicatorProps, ItemIndicator } from './item-indicator'
+import { ComboboxListProps, List } from './list'
+import { ComboboxPopoverProps, Popover } from './popover'
+import { ComboboxTriggerProps, Trigger } from './trigger'
+import { ComboboxValueProps, Value } from './value'
+
+type ComboboxCompoundType = {
+  <T>(props: ComboboxProps<T>): ReactElement
+  Empty: typeof Empty
+  Group: typeof Group
+  GroupLabel: typeof GroupLabel
+  Input: typeof Input
+  Item: typeof Item
+  ItemIndicator: typeof ItemIndicator
+  List: typeof List
+  Popover: typeof Popover
+  Trigger: typeof Trigger
+  Button: typeof Button
+  Value: typeof Value
+  Icon: typeof Icon
+  useCombobox: typeof useCombobox
+}
+
+export const Combobox: ComboboxCompoundType = Object.assign(ComboboxRoot, {
+  Empty,
+  Group,
+  GroupLabel,
+  Input,
+  Item,
+  ItemIndicator,
+  List,
+  Popover,
+  Trigger,
+  Button,
+  Value,
+  Icon,
+  useCombobox,
+})
+
+export type {
+  ComboboxProps,
+  ComboboxEmptyProps,
+  ComboboxGroupProps,
+  ComboboxGroupLabelProps,
+  ComboboxInputProps,
+  ComboboxItemProps,
+  ComboboxItemIndicatorProps,
+  ComboboxListProps,
+  ComboboxPopoverProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+  ComboboxIconProps,
+  ComboboxButtonProps,
+}

package/src/combobox/input.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useRef } from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxInputProps as BaseComboboxInputProps,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+import { useCombobox } from './combobox-context'
+
+export type ComboboxInputProps = BaseComboboxInputProps
+
+export const Input = ({ className, ...props }: ComboboxInputProps) => {
+  const { size } = useCombobox()
+  const observerRef = useRef<MutationObserver | null>(null)
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null)
+
+  const inputRefCallback = useCallback((node: HTMLInputElement | null) => {
+    // Clean up previous observer
+    if (observerRef.current) {
+      observerRef.current.disconnect()
+      observerRef.current = null
+    }
+
+    if (!node) {
+      return
+    }
+
+    // Focus immediately if already open
+    if (node.hasAttribute('data-popup-open')) {
+      previouslyFocusedRef.current = document.activeElement as HTMLElement
+      node.focus()
+    }
+
+    // Watch for attribute changes to detect when popup opens/closes
+    observerRef.current = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-popup-open') {
+          if (node.hasAttribute('data-popup-open')) {
+            // Popup opened - store current focus and focus input
+            previouslyFocusedRef.current = document.activeElement as HTMLElement
+            node.focus()
+          } else {
+            // Popup closed - restore focus to previous element
+            previouslyFocusedRef.current?.focus()
+            previouslyFocusedRef.current = null
+          }
+        }
+      }
+    })
+
+    observerRef.current.observe(node, { attributes: true })
+  }, [])
+
+  return (
+    <BaseCombobox.Input
+      ref={inputRefCallback}
+      data-input
+      className={cn(
+        'w-full rounded border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 font-body font-medium text-gray-400 dark:text-zinc-100 outline-none',
+        'placeholder:text-gray-200 dark:placeholder:text-zinc-300 px-1.5',
+        'focus-visible:border-info focus-visible:ring-2 focus-visible:ring-info/60',
+        'hidden data-[popup-open]:block',
+        'data-[popup-open]:ring-0 data-[popup-open]:border-gray-200 dark:data-[popup-open]:border-zinc-500',
+        'data-[popup-open]:data-[popup-side="top"]:rounded-t-none',
+        'data-[popup-open]:data-[popup-side="bottom"]:rounded-b-none',
+        'disabled:bg-gray-50 disabled:text-gray-200 dark:disabled:bg-zinc-950 dark:disabled:text-zinc-400',
+        {
+          'h-5 text-2xs': size === 'sm',
+          'h-6 text-xs': size === 'md',
+          'h-7 text-xs': size === 'lg',
+          'h-9 text-base': size === 'xl',
+        },
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/combobox/item-indicator.tsx

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxItemIndicatorProps as BaseComboboxItemIndicatorProps,
+} from '@base-ui/react'
+
+export type ComboboxItemIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> &
+  BaseComboboxItemIndicatorProps
+
+export const ItemIndicator = ({ children, ...props }: ComboboxItemIndicatorProps) => {
+  return (
+    <BaseCombobox.ItemIndicator {...(props as BaseComboboxItemIndicatorProps)}>
+      {children}
+    </BaseCombobox.ItemIndicator>
+  )
+}

package/src/combobox/item.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxItemProps as BaseComboboxItemProps,
+} from '@base-ui/react'
+import { useCombobox } from './combobox-context'
+import { cn } from '../helpers'
+import { ArrowBendUpLeftIcon } from '@phosphor-icons/react'
+import { Tooltip } from '../tooltip/tooltip'
+
+export type ComboboxItemProps = BaseComboboxItemProps
+
+export const Item = ({ className, children, value, ...props }: ComboboxItemProps) => {
+  const { itemToStringLabel } = useCombobox()
+  const ref = useRef<HTMLDivElement>(null)
+  const [isTruncated, setIsTruncated] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) {
+      return
+    }
+    const check = () => {
+      const nodes = [el, ...el.querySelectorAll<HTMLElement>('*')]
+      setIsTruncated(nodes.some((node) => node.scrollWidth > node.clientWidth))
+    }
+    check()
+    const observer = new ResizeObserver(check)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [children])
+
+  const label = typeof value === 'string' ? value : (itemToStringLabel?.(value) ?? null)
+  const tip = isTruncated ? label : null
+
+  return (
+    <BaseCombobox.Item
+      className={cn(
+        'group flex w-full items-center px-2 py-1 text-left gap-1 text-xs',
+        'font-body font-medium text-gray-400 dark:text-zinc-300 outline-none',
+        'hover:bg-gray-50 hover:text-gray-500 dark:hover:bg-zinc-800 dark:hover:text-zinc-100',
+        'data-[highlighted]:bg-gray-50 data-[highlighted]:text-gray-500 dark:data-[highlighted]:bg-zinc-900 dark:data-[highlighted]:text-zinc-100',
+        'data-[selected]:text-gray-500 dark:data-[selected]:text-zinc-500 dark:data-[selected]:text-white cursor-pointer',
+        'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+        className,
+      )}
+      value={value}
+      {...props}
+    >
+      <div ref={ref} className="flex-1 truncate">
+        <Tooltip tip={tip} side="right" sideOffset={12} delay={500}>
+          <>{children}</>
+        </Tooltip>
+      </div>
+      <ArrowBendUpLeftIcon className="size-4 text-gray-300 dark:text-zinc-400 hidden group-data-[highlighted]:block group-hover:hidden group-data-[highlighted]:group-hover:hidden group-data-[selected]:hidden" />
+    </BaseCombobox.Item>
+  )
+}

package/src/combobox/list.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxListProps as BaseComboboxListProps,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+
+export type ComboboxListProps = BaseComboboxListProps
+
+export const List = ({ className, children, ...props }: ComboboxListProps) => {
+  return (
+    <BaseCombobox.List
+      className={cn('hide-scrollbar max-h-32 overflow-auto outline-none', className)}
+      {...props}
+    >
+      {children}
+    </BaseCombobox.List>
+  )
+}

package/src/combobox/popover.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxPopupProps,
+  ComboboxPositionerProps,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+
+export type ComboboxPopoverProps = ComboboxPopupProps & Omit<ComboboxPositionerProps, 'children'>
+
+export const Popover = ({
+  className,
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  children,
+  ...props
+}: ComboboxPopoverProps) => {
+  const positionerProps = {
+    className: 'outline-none z-50',
+    side: side || 'bottom',
+    align: align || 'start',
+    sideOffset: sideOffset ?? -1,
+    anchor,
+    positionMethod,
+    alignOffset,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    arrowPadding,
+    disableAnchorTracking,
+    collisionAvoidance,
+  } as const
+
+  const popupClassName = cn(
+    'w-[var(--anchor-width)] font-body divide-gray-100 dark:divide-zinc-800 rounded-b border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 py-1',
+    'transition duration-300 ease-in-out',
+    'focus:outline-none',
+    'data-[side=bottom]:rounded-t-none data-[side=bottom]:rounded-b',
+    'data-[side=top]:rounded-b-none data-[side=top]:rounded-t',
+    className,
+  )
+
+  return (
+    <BaseCombobox.Portal>
+      <BaseCombobox.Positioner {...positionerProps}>
+        <BaseCombobox.Popup className={popupClassName} {...props}>
+          {children}
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  )
+}

package/src/combobox/trigger.tsx

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes, RefAttributes } from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxTriggerProps as BaseComboboxTriggerProps,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+
+export type ComboboxTriggerProps = BaseComboboxTriggerProps & RefAttributes<HTMLElement>
+
+export const Trigger = ({
+  className,
+  children,
+  nativeButton = false,
+  render,
+  ...props
+}: ComboboxTriggerProps) => {
+  const defaultRender = (renderProps: HTMLAttributes<HTMLElement>) => (
+    <div {...renderProps} tabIndex={-1} className={cn('block outline-none w-full', className)}>
+      {renderProps.children}
+    </div>
+  )
+
+  return (
+    <BaseCombobox.Trigger
+      nativeButton={nativeButton}
+      render={!nativeButton ? defaultRender : render}
+      className={!nativeButton ? '' : className}
+      {...(props as BaseComboboxTriggerProps)}
+    >
+      {children}
+    </BaseCombobox.Trigger>
+  )
+}

package/src/combobox/value.tsx

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxValueProps as BaseComboboxValueProps,
+} from '@base-ui/react'
+
+export type ComboboxValueProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
+  BaseComboboxValueProps
+
+export const Value = ({ children, ...props }: ComboboxValueProps) => {
+  return <BaseCombobox.Value {...(props as BaseComboboxValueProps)}>{children}</BaseCombobox.Value>
+}

package/src/common/index.ts

@@ -0,0 +1 @@
+export { default as Svg } from './svg'

package/src/common/svg.tsx

@@ -0,0 +1,17 @@
+import React, { ReactNode, SVGProps } from 'react'
+import { cn } from '../helpers'
+
+interface Props extends SVGProps<SVGSVGElement> {
+  className?: string
+  children: ReactNode
+}
+
+function Svg({ children, className = '', ...props }: Props) {
+  return (
+    <svg className={cn('pointer-events-none fill-current', className)} {...props}>
+      {children}
+    </svg>
+  )
+}
+
+export default Svg

package/src/dialog/actions.tsx

@@ -0,0 +1,17 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '../helpers'
+
+export interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+export const Actions = ({ children, className, ...props }: DialogActionsProps) => {
+  return (
+    <div
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end p-2 pt-4', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/dialog/confirm-button.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react'
+import { Button, ButtonProps } from '../button'
+import { cn } from '../helpers'
+import { useDialog } from './dialog-context'
+
+export interface DialogConfirmProps extends Omit<ButtonProps, 'onClick'> {
+  children: ReactNode
+}
+
+export const Confirm = ({ children, className, variant, ...props }: DialogConfirmProps) => {
+  const { onConfirm, variant: contextVariant } = useDialog()
+
+  return (
+    <Button
+      variant={variant ?? contextVariant}
+      size="md"
+      className={cn('w-full flex-1 sm:w-auto sm:flex-none font-medium', className)}
+      onClick={onConfirm}
+      data-testid="confirm-dialog-confirm-button"
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}

package/src/dialog/dialog-context.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext } from 'react'
+
+export type DialogVariant = 'danger' | 'success'
+
+export interface DialogContextValue {
+  onConfirm: () => void
+  onDismiss: () => void
+  variant: DialogVariant
+}
+
+export const DialogContext = createContext<DialogContextValue | null>(null)
+
+export const useDialog = (): DialogContextValue => {
+  const context = useContext(DialogContext)
+
+  if (!context) {
+    throw new Error('Dialog compound components must be used within a Dialog.Provider')
+  }
+
+  return context
+}

package/src/dialog/dialog.tsx

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes, ReactNode, useContext } from 'react'
+import { cn } from '../helpers'
+import { DialogContext, DialogContextValue, DialogVariant } from './dialog-context'
+
+export interface DialogRootProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+  variant: DialogVariant
+}
+
+export const Dialog = ({ children, variant, className, ...props }: DialogRootProps) => {
+  const parentContext = useContext(DialogContext)
+
+  const contextValue: DialogContextValue = {
+    onConfirm: parentContext?.onConfirm ?? (() => {}),
+    onDismiss: parentContext?.onDismiss ?? (() => {}),
+    variant,
+  }
+
+  return (
+    <DialogContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          'fixed left-1/2 top-[15vh] z-[1001] -translate-x-1/2',
+          'flex w-[calc(100%-2rem)] max-w-sm flex-col rounded-xl bg-white shadow-xl outline-none',
+          'dark:bg-zinc-900 dark:text-zinc-100 p-1.5',
+          'transition-all duration-100',
+          'data-[starting-style]:scale-50 data-[starting-style]:opacity-0',
+          'data-[ending-style]:scale-50 data-[ending-style]:opacity-0',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </DialogContext.Provider>
+  )
+}

package/src/dialog/dismiss-button.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react'
+import { Button, ButtonProps } from '../button'
+import { cn } from '../helpers'
+import { useDialog } from './dialog-context'
+
+export interface DialogDismissProps extends Omit<ButtonProps, 'onClick'> {
+  children: ReactNode
+}
+
+export const Dismiss = ({
+  children,
+  className,
+  variant = 'secondary',
+  ...props
+}: DialogDismissProps) => {
+  const { onDismiss } = useDialog()
+
+  return (
+    <Button
+      variant={variant}
+      size="md"
+      className={cn('w-full flex-1 sm:w-auto sm:flex-none font-medium', className)}
+      onClick={onDismiss}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}

package/src/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Actions, DialogActionsProps } from './actions'
+import { Confirm, DialogConfirmProps } from './confirm-button'
+import { Dismiss, DialogDismissProps } from './dismiss-button'
+import { Message, DialogMessageProps } from './message'
+import { Provider, DialogProviderProps, useDialog } from './provider'
+import { DialogRootProps, Dialog as DialogRoot } from './dialog'
+import { DialogTitleProps, Title } from './title'
+
+type DialogCompoundType = typeof DialogRoot & {
+  Provider: typeof Provider
+  Title: typeof Title
+  Message: typeof Message
+  Actions: typeof Actions
+  Confirm: typeof Confirm
+  Dismiss: typeof Dismiss
+  useDialog: typeof useDialog
+}
+
+export const Dialog: DialogCompoundType = Object.assign(DialogRoot, {
+  Provider,
+  Title,
+  Message,
+  Actions,
+  Confirm,
+  Dismiss,
+  useDialog,
+})
+
+export type {
+  DialogRootProps,
+  DialogProviderProps,
+  DialogTitleProps,
+  DialogMessageProps,
+  DialogActionsProps,
+  DialogConfirmProps,
+  DialogDismissProps,
+}

package/src/dialog/message.tsx

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '../helpers'
+
+export interface DialogMessageProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+export const Message = ({ children, className, ...props }: DialogMessageProps) => {
+  return (
+    <div
+      className={cn(
+        'p-2 pt-4 font-body text-sm font-medium text-gray-400 dark:text-zinc-200',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/dialog/provider.tsx

@@ -0,0 +1,102 @@
+import React, {
+  ReactElement,
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from 'react'
+import { AlertDialog } from '@base-ui/react/alert-dialog'
+import { cn } from '../helpers'
+import { DialogContext, DialogContextValue } from './dialog-context'
+
+interface ProviderContextValue {
+  confirm: (dialog: ReactElement) => Promise<boolean>
+}
+
+const ProviderContext = createContext<ProviderContextValue | null>(null)
+
+export interface DialogProviderProps {
+  children: ReactNode
+}
+
+export const Provider = ({ children }: DialogProviderProps) => {
+  const [dialogElement, setDialogElement] = useState<ReactElement | null>(null)
+  const [open, setOpen] = useState(false)
+  const resolveRef = useRef<((confirmed: boolean) => void) | null>(null)
+  const resolvedRef = useRef(false)
+
+  const confirm = useCallback((element: ReactElement): Promise<boolean> => {
+    return new Promise((resolve) => {
+      resolvedRef.current = false
+      resolveRef.current = resolve
+      setDialogElement(element)
+      setOpen(true)
+    })
+  }, [])
+
+  const handleConfirm = useCallback(() => {
+    if (!resolvedRef.current) {
+      resolvedRef.current = true
+      resolveRef.current?.(true)
+    }
+    setOpen(false)
+  }, [])
+
+  const handleDismiss = useCallback(() => {
+    if (!resolvedRef.current) {
+      resolvedRef.current = true
+      resolveRef.current?.(false)
+    }
+    setOpen(false)
+  }, [])
+
+  const handleOpenChange = useCallback(
+    (isOpen: boolean) => {
+      if (!isOpen) {
+        handleDismiss()
+      }
+    },
+    [handleDismiss],
+  )
+
+  const dialogContextValue: DialogContextValue = {
+    onConfirm: handleConfirm,
+    onDismiss: handleDismiss,
+    variant: 'danger',
+  }
+
+  return (
+    <ProviderContext.Provider value={{ confirm }}>
+      {children}
+      <AlertDialog.Root open={open} onOpenChange={handleOpenChange}>
+        <AlertDialog.Portal>
+          <AlertDialog.Backdrop
+            className={cn(
+              'fixed inset-0 z-[1000] bg-gray-900/70 dark:bg-black/50 backdrop-blur',
+              'transition-opacity duration-200 ease-in-out',
+              'data-[starting-style]:opacity-0',
+              'data-[ending-style]:opacity-0',
+            )}
+          />
+          <AlertDialog.Popup>
+            <DialogContext.Provider value={dialogContextValue}>
+              {dialogElement}
+            </DialogContext.Provider>
+          </AlertDialog.Popup>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>
+    </ProviderContext.Provider>
+  )
+}
+
+export const useDialog = (): ProviderContextValue => {
+  const context = useContext(ProviderContext)
+
+  if (!context) {
+    throw new Error('useDialog must be used within a Dialog.Provider')
+  }
+
+  return context
+}

package/src/dialog/title.tsx

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '../helpers'
+
+export interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode
+}
+
+export const Title = ({ children, className, ...props }: DialogTitleProps) => {
+  return (
+    <div
+      className={cn(
+        'border-b border-gray-100 dark:border-zinc-800 px-3 py-2 text-base font-bold text-gray dark:text-zinc-100',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}