@toolpath/ui 0.1.0

package/src/callout/callout.tsx

@@ -0,0 +1,202 @@
+import React, {
+  ReactNode,
+  SyntheticEvent,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from 'react'
+import { Popover, type PopoverRootChangeEventDetails } from '@base-ui/react/popover'
+import { cn } from '../helpers'
+import { XIcon } from '@phosphor-icons/react'
+import { useDismissedCallouts } from './use-dismissed-callouts'
+
+type CalloutContextValue = {
+  open: boolean
+  show: boolean
+  dismissed: boolean
+  side: 'top' | 'bottom' | 'left' | 'right'
+  sideOffset: number
+  align: 'start' | 'center' | 'end'
+  highlight: boolean
+}
+
+const CalloutContext = createContext<CalloutContextValue | null>(null)
+
+const useCalloutContext = () => {
+  const ctx = useContext(CalloutContext)
+  if (!ctx) {
+    throw new Error('Callout sub-components must be used inside <Callout>')
+  }
+  return ctx
+}
+
+export type CalloutProps = {
+  id: string
+  children: ReactNode
+  show?: boolean
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  sideOffset?: number
+  align?: 'start' | 'center' | 'end'
+  highlight?: boolean
+  /** When false, dismiss state is local only and not persisted to localStorage. Defaults to true. */
+  rememberDismissed?: boolean
+}
+
+export const Callout = ({
+  id,
+  children,
+  show = true,
+  highlight = false,
+  side = 'bottom',
+  sideOffset = 8,
+  align = 'center',
+  rememberDismissed = true,
+}: CalloutProps) => {
+  const { isDismissed, dismiss } = useDismissedCallouts()
+  const persistedDismissed = rememberDismissed && isDismissed(id)
+  const [open, setOpen] = useState(!persistedDismissed)
+
+  const dismissed = rememberDismissed ? persistedDismissed : !open
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean, event: PopoverRootChangeEventDetails) => {
+      if (nextOpen) {
+        setOpen(true)
+        return
+      }
+      const intentional =
+        event.reason === 'close-press' ||
+        event.reason === 'escape-key' ||
+        event.reason === 'trigger-press'
+      if (!intentional) {
+        return
+      }
+      if (rememberDismissed) {
+        dismiss(id)
+      }
+      setOpen(false)
+    },
+    [dismiss, id, rememberDismissed],
+  )
+
+  return (
+    <CalloutContext.Provider value={{ open, show, dismissed, side, sideOffset, align, highlight }}>
+      <Popover.Root open={show && open && !dismissed} onOpenChange={handleOpenChange}>
+        {children}
+      </Popover.Root>
+    </CalloutContext.Provider>
+  )
+}
+
+type CalloutTriggerProps = {
+  children: ReactNode
+  className?: string
+  /** Set to -1 to remove the trigger from the tab order and suppress focus styling. */
+  tabIndex?: number
+}
+
+const CalloutTrigger = ({ children, className, tabIndex }: CalloutTriggerProps) => {
+  const { highlight, show, open, dismissed } = useCalloutContext()
+
+  return (
+    <Popover.Trigger
+      render={<span />}
+      nativeButton={false}
+      tabIndex={tabIndex}
+      className={cn(
+        'rounded outline-none focus-visible:ring-2 focus-visible:ring-info/75',
+        highlight &&
+          show &&
+          open &&
+          !dismissed &&
+          'bg-info-lighten/50 dark:bg-info/5 rounded-sm shadow-[0_0_2px_2px_theme(colors.info/0.3)] dark: ring-1 dark:ring-info/40',
+        className,
+      )}
+    >
+      {children}
+    </Popover.Trigger>
+  )
+}
+
+type CalloutContentProps = {
+  children: ReactNode
+  className?: string
+}
+
+const stopCalloutPointerBubbling = (e: SyntheticEvent) => {
+  e.stopPropagation()
+}
+
+const CalloutContent = ({ children, className }: CalloutContentProps) => {
+  const { side, sideOffset, align } = useCalloutContext()
+
+  return (
+    <Popover.Portal>
+      <Popover.Positioner
+        className={cn(
+          'z-50 outline-none',
+          // Base UI + Floating UI `hide` middleware sets `data-anchor-hidden` when the
+          // trigger is clipped or scrolled out of view; hide the portaled popup to match.
+          'data-[anchor-hidden]:invisible data-[anchor-hidden]:pointer-events-none',
+        )}
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+      >
+        <Popover.Popup
+          initialFocus={false}
+          onClick={stopCalloutPointerBubbling}
+          onPointerDown={stopCalloutPointerBubbling}
+          className={cn(
+            'bg-white dark:bg-zinc-900 ring-1 ring-gray-200 dark:ring-zinc-800 rounded-lg shadow-lg',
+            'font-normal font-body text-xs tracking-normal text-gray-700 dark:text-zinc-100',
+            'px-3 py-2.5 pr-8 max-w-72',
+            'transition duration-200 ease-in-out',
+            'data-[side=top]:origin-bottom',
+            'data-[side=bottom]:origin-top',
+            'data-[side=left]:origin-right',
+            'data-[side=right]:origin-left',
+            className,
+          )}
+        >
+          <Popover.Arrow className="flex data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180 data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90">
+            <ArrowSvg />
+          </Popover.Arrow>
+          <Popover.Close
+            className={cn(
+              'absolute top-1.5 right-1.5 p-0.5 rounded',
+              'text-gray-400 dark:text-zinc-400',
+              'hover:text-gray-600 dark:hover:text-zinc-100',
+              'hover:bg-gray-100 dark:hover:bg-zinc-800',
+              'transition-colors cursor-pointer',
+            )}
+          >
+            <XIcon className="size-3.5" />
+          </Popover.Close>
+          {children}
+        </Popover.Popup>
+      </Popover.Positioner>
+    </Popover.Portal>
+  )
+}
+
+Callout.Trigger = CalloutTrigger
+Callout.Content = CalloutContent
+
+const ArrowSvg = (props: React.ComponentProps<'svg'>) => (
+  <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+    <path
+      d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+      className="fill-white dark:fill-zinc-900"
+    />
+    <path
+      d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+      className="fill-gray-200 dark:fill-zinc-800"
+    />
+    <path
+      d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+      className="fill-none"
+    />
+  </svg>
+)

package/src/callout/index.ts

@@ -0,0 +1,2 @@
+export * from './callout'
+export * from './use-dismissed-callouts'

package/src/callout/use-dismissed-callouts.ts

@@ -0,0 +1,78 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+const STORAGE_KEY = 'dismissed-callouts'
+
+const getSnapshot = (): Array<string> => {
+  if (typeof window === 'undefined') {
+    return []
+  }
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+const getServerSnapshot = (): Array<string> => []
+
+const listeners = new Set<() => void>()
+
+const subscribe = (callback: () => void) => {
+  listeners.add(callback)
+  return () => {
+    listeners.delete(callback)
+  }
+}
+
+const notifyListeners = () => {
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+let cachedSnapshot: Array<string> | null = null
+
+const getStableSnapshot = (): Array<string> => {
+  const next = getSnapshot()
+  if (
+    cachedSnapshot !== null &&
+    cachedSnapshot.length === next.length &&
+    cachedSnapshot.every((id, i) => id === next[i])
+  ) {
+    return cachedSnapshot
+  }
+  cachedSnapshot = next
+  return next
+}
+
+export const useDismissedCallouts = () => {
+  const dismissed = useSyncExternalStore(subscribe, getStableSnapshot, getServerSnapshot)
+
+  const isDismissed = useCallback((id: string) => dismissed.includes(id), [dismissed])
+
+  const dismiss = useCallback((id: string) => {
+    const current = getSnapshot()
+    if (current.includes(id)) {
+      return
+    }
+    const next = [...current, id]
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+    cachedSnapshot = null
+    notifyListeners()
+  }, [])
+
+  const reset = useCallback((id?: string) => {
+    if (id) {
+      const current = getSnapshot()
+      const next = current.filter((d) => d !== id)
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+    } else {
+      localStorage.removeItem(STORAGE_KEY)
+    }
+    cachedSnapshot = null
+    notifyListeners()
+  }, [])
+
+  return { isDismissed, dismiss, reset }
+}

package/src/card/card.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+import { cn } from '../helpers'
+
+export interface CardProps {
+  children: ReactNode
+  className?: string
+}
+
+/** A standard Toolpath application surface. */
+export const Card = ({ children, className }: CardProps) => (
+  <div
+    className={cn(
+      'rounded-xl border border-gray-100 bg-white dark:border-zinc-800 dark:bg-zinc-900',
+      className,
+    )}
+  >
+    {children}
+  </div>
+)

package/src/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './card'
+export type { CardProps } from './card'

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react'
+import { Checkbox as BaseCheckbox, CheckboxRootProps } from '@base-ui/react'
+import { cn } from '../helpers'
+import { CheckIcon, MinusIcon } from '@phosphor-icons/react'
+
+export interface CheckboxChangeEvent {
+  shiftKey: boolean
+}
+
+export type CheckboxProps = CheckboxRootProps & {
+  checked: boolean
+  onChange: (checked: boolean, event: CheckboxChangeEvent) => void
+  name: string
+  className?: string
+  disabled?: boolean
+  indeterminate?: boolean
+  tabIndex?: number
+  variant?: 'default' | 'muted'
+  size?: 'md' | 'sm'
+}
+
+export const Checkbox = ({
+  checked,
+  onChange,
+  name,
+  className,
+  disabled = false,
+  indeterminate = false,
+  variant = 'default',
+  size = 'md',
+  ...props
+}: CheckboxProps) => {
+  if (checked && indeterminate) {
+    throw new Error('Checkbox cannot be both checked & indeterminate.')
+  }
+
+  const isActive = checked || indeterminate
+  const shiftKeyRef = useRef(false)
+
+  return (
+    <BaseCheckbox.Root
+      name={name}
+      checked={checked}
+      indeterminate={indeterminate}
+      onClick={(e) => {
+        shiftKeyRef.current = e.shiftKey
+      }}
+      onCheckedChange={(newChecked) => {
+        onChange(newChecked, { shiftKey: shiftKeyRef.current })
+      }}
+      disabled={disabled}
+      className={cn(
+        'flex cursor-pointer items-center justify-center bg-white outline-none focus-visible:ring-2 ring-info/75 ring-offset-1 dark:bg-zinc-900 dark:ring-offset-zinc-950',
+        'border dark:border-zinc-500',
+        {
+          'size-4 rounded': size === 'md',
+          'size-3 rounded-sm': size === 'sm',
+          'bg-gray-300 dark:bg-zinc-800': variant === 'muted' && isActive,
+          'bg-info': variant === 'default' && isActive,
+          'bg-transparent': !isActive,
+          'border-none text-white': isActive,
+          'cursor-not-allowed saturate-50': disabled,
+          'bg-gray-50 dark:bg-zinc-950': !isActive && disabled,
+          'text-white/65': isActive && disabled,
+        },
+        className,
+      )}
+      {...props}
+    >
+      <BaseCheckbox.Indicator className="flex items-center justify-center text-white" keepMounted>
+        {checked && <CheckIcon className="w-full h-full" />}
+        {indeterminate && <MinusIcon className="w-full h-full" />}
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  )
+}

package/src/checkbox/index.ts

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

package/src/combobox/button.tsx

@@ -0,0 +1,99 @@
+import React, { FC, ReactNode, SVGProps } from 'react'
+import { cn } from '../helpers'
+import { ArrowsOutLineVerticalIcon } from '@phosphor-icons/react'
+import { useCombobox } from './combobox-context'
+import { Icon } from './icon'
+import { Trigger } from './trigger'
+import { Value } from './value'
+
+export type ComboboxButtonProps = {
+  placeholder?: string
+  icon?: FC<SVGProps<SVGSVGElement>>
+  children?: ReactNode
+}
+
+export const Button = ({
+  placeholder = 'Select Option',
+  icon: IconComponent,
+  children,
+}: ComboboxButtonProps) => {
+  const { size, variant, disabled, invalid } = useCombobox()
+
+  return (
+    <Trigger
+      nativeButton={true}
+      render={undefined}
+      tabIndex={0}
+      className={cn(
+        'group [&:has(~[data-input])]:data-[popup-open]:hidden',
+        'w-full rounded flex gap-1 items-center text-left',
+        'outline-none font-medium',
+        'data-[popup-open]:data-[popup-side="top"]:rounded-t-none',
+        'data-[popup-open]:data-[popup-side="bottom"]:rounded-b-none',
+        {
+          'px-1': variant !== 'ghost',
+          'focus-visible:ring-2 ring-info/75': !invalid,
+          'border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 focus-visible:ring-1 focus-visible:border-info':
+            variant === 'secondary' && !invalid,
+          'bg-gray-50 dark:bg-zinc-800':
+            (variant === 'default' || (disabled && variant === 'secondary')) && !invalid,
+          'bg-gray-100 dark:bg-zinc-800': variant === 'muted' && !invalid,
+          'border border-[#FFD4E0] bg-[#FFD4E0]/25 focus-visible:border-[#FFD4E0] focus-visible:ring-2 ring-[#FFD4E0] dark:border-danger/50 dark:bg-danger/25 dark:ring-danger/50 dark:focus-visible:border-danger/50':
+            invalid && !disabled,
+          'h-9': size === 'xl' && variant !== 'ghost',
+          'h-7': size === 'lg' && variant !== 'ghost',
+          'h-6': size === 'md' && variant !== 'ghost',
+          'h-5': size === 'sm' && variant !== 'ghost',
+          'text-lg': size === 'xl',
+          'text-sm': size === 'lg',
+          'text-xs': size === 'md',
+          'text-2xs': size === 'sm',
+          'cursor-not-allowed': disabled,
+        },
+      )}
+    >
+      {IconComponent && (
+        <IconComponent
+          data-icon
+          className={cn('text-gray-300 dark:text-zinc-400 shrink-0', {
+            'group-hover:text-gray-400 dark:group-hover:text-zinc-100': !disabled,
+            'text-gray-200 dark:text-zinc-500': disabled,
+            'size-2.5': size === 'sm',
+            'size-3.5': size === 'md' || size === 'lg',
+            'size-4': size === 'xl',
+          })}
+        />
+      )}
+      <div
+        className={cn('truncate dark:text-zinc-100', {
+          'text-gray-400': variant === 'secondary',
+          'text-gray-500': variant !== 'secondary' && variant !== 'ghost',
+          'text-inherit': variant === 'ghost',
+          'group-hover:text-gray-500 dark:group-hover:text-zinc-50': !disabled,
+          'text-gray-200 dark:text-zinc-400': disabled,
+          'pl-1': !IconComponent && variant !== 'ghost',
+        })}
+      >
+        <Value
+          placeholder={placeholder}
+          className={cn('truncate dark:text-zinc-100', {
+            'text-gray-400': variant === 'secondary',
+            'text-gray-500': variant !== 'secondary' && variant !== 'ghost',
+            'text-inherit': variant === 'ghost',
+            'group-hover:text-gray-500 dark:group-hover:text-zinc-50': !disabled,
+            'text-gray-200 dark:text-zinc-400': disabled,
+          })}
+        />
+      </div>
+      {Boolean(children) && children}
+      <Icon
+        className={cn('ml-auto', {
+          'opacity-0 group-hover:opacity-100 group-data-[popup-open]:opacity-100':
+            variant === 'ghost',
+        })}
+      >
+        <ArrowsOutLineVerticalIcon className="size-3.5 text-gray-200 dark:text-zinc-400" />
+      </Icon>
+    </Trigger>
+  )
+}

package/src/combobox/combobox-context.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react'
+
+export interface ComboboxContextInterface {
+  size: 'xl' | 'lg' | 'md' | 'sm'
+  variant: 'default' | 'secondary' | 'muted' | 'ghost'
+  disabled: boolean
+  invalid: boolean
+  itemToStringLabel?: (item: any) => string
+}
+
+const ComboboxContext = createContext<Partial<ComboboxContextInterface>>(
+  {} as ComboboxContextInterface,
+)
+
+interface ProviderProps {
+  size: 'xl' | 'lg' | 'md' | 'sm'
+  variant: 'default' | 'secondary' | 'muted' | 'ghost'
+  disabled: boolean
+  invalid: boolean
+  itemToStringLabel?: (item: any) => string
+  children: ReactNode
+}
+
+const ComboboxProvider: FC<ProviderProps> = ({
+  size = 'md',
+  variant = 'default',
+  disabled = false,
+  invalid = false,
+  itemToStringLabel,
+  children,
+}) => {
+  const value = useMemo(
+    () => ({ size, variant, disabled, invalid, itemToStringLabel }),
+    [size, variant, disabled, invalid, itemToStringLabel],
+  )
+
+  return <ComboboxContext.Provider value={value}>{children}</ComboboxContext.Provider>
+}
+
+const useCombobox = () => useContext(ComboboxContext)
+const ComboboxConsumer = ComboboxContext.Consumer
+export { useCombobox, ComboboxProvider, ComboboxContext, ComboboxConsumer }

package/src/combobox/combobox.tsx

@@ -0,0 +1,60 @@
+import React, { memo, useCallback, useState } from 'react'
+import { Combobox as BaseCombobox, ComboboxRootProps } from '@base-ui/react'
+import { ComboboxProvider } from './combobox-context'
+
+export type ComboboxProps<T> = ComboboxRootProps<T> & {
+  size?: 'xl' | 'lg' | 'md' | 'sm'
+  variant?: 'default' | 'secondary' | 'muted' | 'ghost'
+  invalid?: boolean
+}
+
+// Use a type assertion for the generic memo
+export const Combobox = memo(
+  <T,>({
+    children,
+    size = 'md',
+    variant = 'default',
+    invalid = false,
+    onOpenChange,
+    ...props
+  }: ComboboxProps<T>) => {
+    if (!props.items) {
+      throw new Error('Combobox requires an `items` prop.')
+    }
+
+    const [inputValue, setInputValue] = useState('')
+
+    const handleOpenChange = useCallback<NonNullable<typeof onOpenChange>>(
+      (open, eventDetails) => {
+        if (open) {
+          // Clear input value when combobox opens
+          setInputValue('')
+        }
+        onOpenChange?.(open, eventDetails)
+      },
+      [onOpenChange],
+    )
+
+    return (
+      <ComboboxProvider
+        disabled={Boolean(props.disabled)}
+        size={size}
+        variant={variant}
+        invalid={invalid}
+        itemToStringLabel={props.itemToStringLabel}
+      >
+        <BaseCombobox.Root
+          data-variant={variant}
+          data-size={size}
+          data-invalid={invalid || undefined}
+          inputValue={inputValue}
+          onInputValueChange={setInputValue}
+          onOpenChange={handleOpenChange}
+          {...props}
+        >
+          {children}
+        </BaseCombobox.Root>
+      </ComboboxProvider>
+    )
+  },
+) as <T>(props: ComboboxProps<T>) => React.ReactElement

package/src/combobox/empty.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+import { Combobox as BaseCombobox } from '@base-ui/react'
+import { cn } from '../helpers'
+
+export type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode
+}
+
+export const Empty = ({ className, children = 'No matches', ...props }: ComboboxEmptyProps) => {
+  return (
+    <BaseCombobox.Empty
+      className={cn(
+        'w-full [[data-empty]_&]:py-4 text-center text-gray-300 text-xs dark:text-zinc-400',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </BaseCombobox.Empty>
+  )
+}

package/src/combobox/group-label.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxGroupLabelProps as BaseComboboxGroupLabelProps,
+} from '@base-ui/react'
+import { cn } from '../helpers'
+
+export type ComboboxGroupLabelProps = BaseComboboxGroupLabelProps
+
+export const GroupLabel = ({ className, children, ...props }: ComboboxGroupLabelProps) => (
+  <BaseCombobox.GroupLabel
+    className={cn(
+      'px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-300 font-body dark:text-zinc-500',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </BaseCombobox.GroupLabel>
+)

package/src/combobox/group.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxGroupProps as BaseComboboxGroupProps,
+} from '@base-ui/react'
+
+export type ComboboxGroupProps = BaseComboboxGroupProps
+
+export const Group = ({ children, ...props }: ComboboxGroupProps) => (
+  <BaseCombobox.Group {...props}>{children}</BaseCombobox.Group>
+)

package/src/combobox/icon.tsx

@@ -0,0 +1,11 @@
+import React, { RefAttributes } from 'react'
+import {
+  Combobox as BaseCombobox,
+  ComboboxIconProps as BaseComboboxIconProps,
+} from '@base-ui/react'
+
+export type ComboboxIconProps = BaseComboboxIconProps & RefAttributes<HTMLDivElement>
+
+export const Icon = ({ children, ...props }: ComboboxIconProps) => {
+  return <BaseCombobox.Icon {...props}>{children}</BaseCombobox.Icon>
+}