@toolpath/ui 0.1.0

package/src/textarea/textarea.tsx

@@ -0,0 +1,88 @@
+import React, { ChangeEvent, TextareaHTMLAttributes, forwardRef } from 'react'
+import { cn } from '../helpers'
+
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
+  name: string
+  id: string
+  size?: 'md' | 'lg' | 'xl'
+  variant?: 'default' | 'secondary' | 'muted'
+  invalid?: boolean
+  onValueChange?: (value: string) => void
+  textAreaClassName?: string
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      name,
+      id,
+      value,
+      rows = 3,
+      className,
+      textAreaClassName,
+      disabled = false,
+      variant = 'default',
+      size = 'lg',
+      invalid = false,
+      onValueChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      onValueChange?.(event.target.value)
+      props.onChange?.(event)
+    }
+
+    return (
+      <div
+        className={cn(
+          'relative flex w-full rounded-md font-medium',
+          {
+            'focus-within:ring-2 ring-info/50 dark:ring-info/75': !invalid,
+            'text-gray-400 dark:text-zinc-200 border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 focus-within:border-info dark:focus-within:border-info':
+              variant === 'secondary',
+            'bg-gray-50 dark:bg-zinc-800 text-gray-500 dark:text-zinc-100': variant === 'default',
+            'bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-zinc-100':
+              variant === 'muted' || disabled,
+            'bg-gray-200 dark:bg-zinc-800': variant === 'muted' && disabled,
+            'border border-[#FFD4E0] dark:border-danger/50 bg-[#FFD4E0]/25 dark:bg-danger/25 focus-within:border-[#FFD4E0] dark:focus-within:border-danger focus-within:ring-2 ring-[#FFD4E0] dark:ring-danger/50':
+              invalid && !disabled,
+          },
+          className,
+        )}
+        data-disabled={disabled || undefined}
+        data-invalid={invalid || undefined}
+      >
+        <textarea
+          ref={ref}
+          id={id}
+          name={name}
+          data-testid={id}
+          data-textarea
+          value={value}
+          rows={rows}
+          disabled={disabled}
+          onChange={handleChange}
+          className={cn(
+            'w-full bg-transparent leading-normal outline-none',
+            'resize-y',
+            {
+              'cursor-not-allowed select-none': disabled,
+              'placeholder-gray-200 dark:placeholder-zinc-400': variant === 'secondary',
+              'placeholder-gray-300 dark:placeholder-zinc-400':
+                variant === 'default' || variant === 'muted',
+              'px-1 py-1 text-xs': size === 'md',
+              'px-2 py-1.5 text-sm': size === 'lg',
+              'px-2 py-2 text-base': size === 'xl',
+            },
+            textAreaClassName,
+          )}
+          {...props}
+        />
+      </div>
+    )
+  },
+)
+
+TextArea.displayName = 'TextArea'

package/src/toast/index.ts

@@ -0,0 +1,19 @@
+import { UseToastManagerReturnValue } from '@base-ui/react'
+import { CustomToastData, List } from './list'
+import { Provider, ToastProviderProps, useToastManager } from './provider'
+
+type ToastCompoundType = {
+  List: typeof List
+  Provider: typeof Provider
+  useToastManager: typeof useToastManager
+}
+
+export const Toast: ToastCompoundType = Object.assign({
+  List,
+  Provider,
+  useToastManager,
+})
+
+type ToastManager = UseToastManagerReturnValue
+
+export type { ToastProviderProps, ToastManager, CustomToastData }

package/src/toast/list.tsx

@@ -0,0 +1,133 @@
+import React, { ReactNode } from 'react'
+import { Toast } from '@base-ui/react'
+import { Button } from '../button'
+import { cn } from '../helpers'
+import { IconButton } from '../icon-button'
+import { SpinnerGapIcon, XIcon } from '@phosphor-icons/react'
+import { useToastManager } from './provider'
+
+export interface CustomToastData {
+  content: ReactNode
+  /** When true, the toast cannot be dismissed by swiping. Only programmatic close is allowed. */
+  persistent?: boolean
+  /** Optional classes applied to the toast shell. */
+  className?: string
+}
+
+export const List = () => {
+  // Use the separate toast context - all toasts here are regular toasts
+  const { toasts: regularToasts } = useToastManager()
+
+  return (
+    <Toast.Portal data-foo>
+      <Toast.Viewport
+        className={cn(
+          'font-body text-base font-medium tracking-normal fixed bottom-6 right-6 z-[100]',
+          {
+            'flex w-full max-w-sm flex-col pt-8': regularToasts.length,
+            'pointer-events-none': !regularToasts.length,
+          },
+        )}
+      >
+        {regularToasts.map((toast) => {
+          const isLoading = toast?.type === 'loading'
+          const customData = toast.data as CustomToastData | undefined
+          const customContent = customData?.content
+          const persistent = customData?.persistent
+          const customClassName = customData?.className
+
+          return (
+            <Toast.Root
+              key={toast.id}
+              toast={toast}
+              tabIndex={-1}
+              swipeDirection={persistent ? [] : ['down', 'left', 'right']}
+              onKeyDown={
+                persistent
+                  ? (e) => {
+                      if (e.key === 'Escape') {
+                        e.stopPropagation()
+                      }
+                    }
+                  : undefined
+              }
+              className={cn(
+                // Base styles - white background with border like frontend notification
+                'relative flex w-full flex-col rounded-lg border bg-white dark:bg-zinc-900 border-gray-200 dark:border-zinc-800 shadow-md outline-none',
+                // Animation: transition properties
+                'transition-all duration-300 ease-out',
+                // Stacking: absolute positioning to overlap (bottom-aligned for upward stacking)
+                'absolute bottom-0 left-0 right-0',
+                // Stacking: z-index based on --toast-index (lower index = front)
+                '[z-index:calc(1000-var(--toast-index))]',
+                // Stacking: scale down and offset each toast behind the front one (upward)
+                '[transform:scale(calc(1-0.05*var(--toast-index)))_translateY(calc(var(--toast-index)*-12px))_translateX(var(--toast-swipe-movement-x,0px))]',
+                // Stacking: reduce brightness for toasts behind
+                '[filter:brightness(calc(1-0.08*var(--toast-index)))]',
+                // Expanded state: spread out when hovering the viewport (with 8px gap between each, going upward)
+                'data-[expanded]:[transform:translateY(calc(-1*var(--toast-offset-y)-var(--toast-index)*8px))_translateX(var(--toast-swipe-movement-x,0px))]',
+                'data-[expanded]:[filter:brightness(1)]',
+                // Entry animation (starting style) - slide up from bottom
+                'data-[starting-style]:[transform:scale(calc(1-0.05*var(--toast-index)))_translateY(150%)]',
+                'data-[starting-style]:opacity-0',
+                // Exit animation (ending style)
+                'data-[ending-style]:opacity-0',
+                'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y,0px)+150%))]',
+                'data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x,0px)-150%))]',
+                'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x,0px)+150%))]',
+                customClassName,
+              )}
+            >
+              {customContent ? (
+                customContent
+              ) : (
+                <>
+                  <div className="flex w-full flex-col gap-1 rounded-lg px-2 py-3">
+                    {/* Title row with optional spinner */}
+                    <div className="flex items-center gap-2 px-2">
+                      {isLoading && (
+                        <SpinnerGapIcon className="size-4 shrink-0 animate-spin text-gray-300 dark:text-zinc-200" />
+                      )}
+                      <Toast.Title className="flex-1 whitespace-pre-line break-words text-sm font-bold text-gray-500 dark:text-zinc-200" />
+                    </div>
+
+                    {/* Description/message */}
+                    <Toast.Content className="flex flex-col px-2 transition-opacity duration-300 data-[behind]:opacity-0 data-[expanded]:opacity-100">
+                      <Toast.Description className="flex-1 whitespace-pre-line break-words text-sm font-medium text-gray-500 dark:text-zinc-200" />
+                    </Toast.Content>
+
+                    {/* Action button area */}
+                    <div className="mt-1 flex flex-wrap items-center justify-end gap-2 px-1">
+                      <Toast.Action
+                        nativeButton={true}
+                        render={(renderProps) => (
+                          <Button className="rounded-lg py-2" variant="success" {...renderProps}>
+                            {renderProps.children}
+                          </Button>
+                        )}
+                      />
+                    </div>
+                  </div>
+
+                  <Toast.Close
+                    aria-label="Close"
+                    nativeButton={true}
+                    render={(renderProps) => {
+                      return (
+                        <div className="absolute right-2 top-2">
+                          <IconButton size="lg" {...renderProps}>
+                            <XIcon className="text-gray-300 dark:text-zinc-400" />
+                          </IconButton>
+                        </div>
+                      )
+                    }}
+                  />
+                </>
+              )}
+            </Toast.Root>
+          )
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  )
+}

package/src/toast/provider.tsx

@@ -0,0 +1,36 @@
+import {
+  Toast as BaseToast,
+  ToastProviderProps as BaseToastProviderProps,
+  UseToastManagerReturnValue,
+} from '@base-ui/react'
+import React, { createContext, ReactNode, useContext } from 'react'
+
+// Create a separate context for the toast manager
+// This prevents it from being shadowed by Notification.Provider's internal Toast.Provider
+const ToastContext = createContext<UseToastManagerReturnValue | null>(null)
+
+export type ToastProviderProps = BaseToastProviderProps & {
+  children?: ReactNode
+}
+
+export const Provider = ({ children, ...props }: ToastProviderProps) => (
+  <BaseToast.Provider {...props}>
+    <ToastContextProvider>{children}</ToastContextProvider>
+  </BaseToast.Provider>
+)
+
+// Internal component that captures and provides the toast manager
+const ToastContextProvider = ({ children }: { children?: ReactNode }) => {
+  const toastManager = BaseToast.useToastManager()
+  return <ToastContext.Provider value={toastManager}>{children}</ToastContext.Provider>
+}
+
+export const useToastManager = (): UseToastManagerReturnValue => {
+  const toastManager = useContext(ToastContext)
+
+  if (!toastManager) {
+    throw new Error('useToastManager must be used within a Toast.Provider')
+  }
+
+  return toastManager
+}

package/src/toggle/index.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react'
+import { Item, ToggleItemProps } from './item'
+import { ToggleProps, Toggle as ToggleRoot } from './toggle'
+import { useToggle } from './toggle-context'
+
+type ToggleCompoundType = {
+  (props: ToggleProps): ReactElement
+  Item: typeof Item
+  useToggle: typeof useToggle
+}
+
+export const Toggle: ToggleCompoundType = Object.assign(ToggleRoot, {
+  Item,
+  useToggle,
+})
+
+export type { ToggleProps, ToggleItemProps }

package/src/toggle/indicator.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { cn } from '../helpers'
+import { useToggle } from './toggle-context'
+import { useIndicator } from './use-indicator'
+
+export const Indicator = () => {
+  const { size } = useToggle()
+  const { width, left, animationsEnabled } = useIndicator()
+
+  if (width === null || left === null) {
+    return null
+  }
+
+  return (
+    <span
+      aria-hidden="true"
+      data-indicator
+      className={cn('absolute top-0.5 z-0 bg-white dark:bg-zinc-700 shadow-sm', {
+        'h-[calc(100%-4px)] rounded-sm': size === 'sm',
+        'h-[calc(100%-4px)] rounded': size === 'md',
+        'h-[calc(100%-4px)] rounded-md': size === 'lg',
+        'transition-[left,width] duration-200 ease-out': animationsEnabled,
+      })}
+      style={{ width, left }}
+    />
+  )
+}

package/src/toggle/item.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode, useCallback } from 'react'
+import { Toggle as BaseToggle } from '@base-ui/react'
+import { cn } from '../helpers'
+import { useToggle } from './toggle-context'
+
+export type ToggleItemProps = {
+  value: string
+  className?: string
+  children: ReactNode
+}
+
+export const Item = ({ value, className, children }: ToggleItemProps) => {
+  const { value: selectedValue, disabled, size, isBinaryToggle, registerItem } = useToggle()
+
+  const isSelected = value === selectedValue
+
+  const refCallback = useCallback(
+    (el: HTMLButtonElement | null) => {
+      registerItem(value, el)
+    },
+    [registerItem, value],
+  )
+
+  // For binary toggles, all items are not focusable (container handles focus)
+  // For multi-item toggles, selected item is not focusable
+  const tabIndex = isBinaryToggle || isSelected ? -1 : undefined
+
+  return (
+    <BaseToggle
+      ref={refCallback}
+      value={value}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      aria-label={typeof children === 'string' ? children : undefined}
+      data-selected={isSelected || undefined}
+      data-unselected={!isSelected || undefined}
+      className={cn(
+        'relative z-10 inline-flex items-center justify-center font-semibold',
+        'outline-none transition-colors duration-150 whitespace-nowrap',
+        'text-gray-400 dark:text-zinc-400 data-[pressed]:text-gray-600 dark:data-[pressed]:text-zinc-100 dark:hover:text-zinc-100',
+        {
+          'h-5 px-2 text-3xs rounded-sm': size === 'sm',
+          'h-6 px-3 text-2xs rounded': size === 'md',
+          'h-8 px-4 text-xs rounded-md': size === 'lg',
+          'focus-visible:text-gray-600 dark:focus-visible:text-zinc-400': !isBinaryToggle,
+          'cursor-not-allowed': disabled,
+        },
+        className,
+      )}
+    >
+      {children}
+    </BaseToggle>
+  )
+}

package/src/toggle/toggle-context.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import React, { ReactNode, RefObject, createContext, useCallback, useContext, useRef } from 'react'
+
+export interface ToggleContextValue {
+  value: string
+  onValueChange: (value: string) => void
+  disabled: boolean
+  size: 'sm' | 'md' | 'lg'
+  isBinaryToggle: boolean
+  registerItem: (value: string, el: HTMLButtonElement | null) => void
+  containerRef: RefObject<HTMLDivElement | null>
+  itemRefs: RefObject<Map<string, HTMLButtonElement>>
+}
+
+export const ToggleContext = createContext<ToggleContextValue | null>(null)
+
+export const ToggleConsumer = ToggleContext.Consumer
+
+export const useToggle = () => {
+  const context = useContext(ToggleContext)
+  if (!context) {
+    throw new Error('Toggle.Item must be used within a Toggle component')
+  }
+  return context
+}
+
+interface ToggleProviderProps {
+  children: ReactNode
+  value: string
+  onValueChange: (value: string) => void
+  disabled: boolean
+  size: 'sm' | 'md' | 'lg'
+  isBinaryToggle: boolean
+}
+
+export const ToggleProvider = ({
+  children,
+  value,
+  onValueChange,
+  disabled,
+  size,
+  isBinaryToggle,
+}: ToggleProviderProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const itemRefs = useRef<Map<string, HTMLButtonElement>>(new Map())
+
+  const registerItem = useCallback((itemValue: string, el: HTMLButtonElement | null) => {
+    if (el) {
+      itemRefs.current.set(itemValue, el)
+    } else {
+      itemRefs.current.delete(itemValue)
+    }
+  }, [])
+
+  const contextValue: ToggleContextValue = {
+    value,
+    onValueChange,
+    disabled,
+    size,
+    isBinaryToggle,
+    registerItem,
+    containerRef,
+    itemRefs,
+  }
+
+  return <ToggleContext.Provider value={contextValue}>{children}</ToggleContext.Provider>
+}

package/src/toggle/toggle.tsx

@@ -0,0 +1,124 @@
+import React, { Children, ReactElement, ReactNode, isValidElement } from 'react'
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react'
+import { cn } from '../helpers'
+import { Indicator } from './indicator'
+import { Item, ToggleItemProps } from './item'
+import { ToggleConsumer, ToggleProvider } from './toggle-context'
+
+export type ToggleProps = {
+  value: string
+  onValueChange: (value: string) => void
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  children: ReactNode
+}
+
+export const Toggle = ({
+  value,
+  onValueChange,
+  disabled = false,
+  size = 'md',
+  className,
+  children,
+}: ToggleProps) => {
+  // Count the number of Toggle.Item children
+  const itemCount = Children.toArray(children).filter(
+    (child) => isValidElement(child) && child.type === Item,
+  ).length
+
+  // Collect item values for binary toggle keyboard handling
+  const itemValues = Children.toArray(children)
+    .filter((child) => isValidElement(child) && child.type === Item)
+    .map((child) => (child as ReactElement<ToggleItemProps>).props.value)
+
+  const isBinaryToggle = itemCount === 2
+
+  return (
+    <ToggleProvider
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      size={size}
+      isBinaryToggle={isBinaryToggle}
+    >
+      <ToggleConsumer>
+        {(context) => {
+          if (!context) {
+            return null
+          }
+
+          const { containerRef } = context
+
+          const handleValueChange = (newValues: string[]) => {
+            // For binary toggles, clicking either item toggles to the other value
+            if (isBinaryToggle) {
+              const otherValue = itemValues.find((v) => v !== value)
+              if (otherValue) {
+                onValueChange(otherValue)
+              }
+              return
+            }
+
+            // For multi-item toggles, only change if clicking a different item
+            if (newValues.length > 0 && newValues[0] !== value) {
+              onValueChange(newValues[0])
+            }
+          }
+
+          const handleKeyDown = (e: React.KeyboardEvent) => {
+            if (disabled || !isBinaryToggle) {
+              return
+            }
+            if (e.key === ' ' || e.key === 'Enter') {
+              e.preventDefault()
+              const otherValue = itemValues.find((v) => v !== value)
+              if (otherValue) {
+                onValueChange(otherValue)
+              }
+            }
+          }
+
+          // Build props conditionally based on toggle type
+          const accessibilityProps = isBinaryToggle
+            ? {
+                tabIndex: disabled ? undefined : 0,
+                onKeyDown: handleKeyDown,
+                role: 'switch' as const,
+                'aria-checked': value === itemValues[1],
+              }
+            : {
+                role: 'group' as const,
+              }
+
+          return (
+            <BaseToggleGroup
+              ref={containerRef}
+              value={[value]}
+              onValueChange={handleValueChange}
+              disabled={disabled}
+              {...accessibilityProps}
+              className={cn(
+                'relative inline-flex items-center bg-gray-100 dark:bg-zinc-900 px-0.5',
+                'outline outline-0.5 outline-offset-0 outline-gray-200 dark:outline-zinc-800',
+                {
+                  'h-5 rounded': size === 'sm',
+                  'h-6 rounded-md': size === 'md',
+                  'h-8 rounded-lg': size === 'lg',
+                  'focus-visible:ring-2 focus-visible:ring-info/75 focus-visible:outline-none':
+                    isBinaryToggle,
+                  'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-info/75': !isBinaryToggle,
+                  'cursor-not-allowed opacity-60': disabled,
+                },
+                className,
+              )}
+            >
+              <Indicator />
+              {children}
+            </BaseToggleGroup>
+          )
+        }}
+      </ToggleConsumer>
+    </ToggleProvider>
+  )
+}

package/src/toggle/use-indicator.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useToggle } from './toggle-context'
+
+export const useIndicator = () => {
+  const { value, containerRef, itemRefs } = useToggle()
+
+  const [width, setWidth] = useState<number | null>(null)
+  const [left, setLeft] = useState<number | null>(null)
+  // Track if we've done the first render - use a ref so it doesn't cause re-render
+  const hasRenderedOnce = useRef(false)
+  // Track if animations should be enabled (after first paint)
+  const [animationsEnabled, setAnimationsEnabled] = useState(false)
+
+  const updateIndicator = useCallback(() => {
+    const container = containerRef.current
+    const selectedButton = itemRefs.current?.get(value)
+
+    if (!container || !selectedButton) {
+      return
+    }
+
+    // Use offsetWidth/offsetLeft instead of getBoundingClientRect
+    // to avoid zoom-related sizing issues
+    setWidth(selectedButton.offsetWidth)
+    setLeft(selectedButton.offsetLeft)
+  }, [value, containerRef, itemRefs])
+
+  // Update indicator when value changes or on mount
+  useEffect(() => {
+    updateIndicator()
+  }, [updateIndicator])
+
+  // Enable animations only after the first render cycle completes
+  useEffect(() => {
+    if (width !== null && left !== null && !hasRenderedOnce.current) {
+      hasRenderedOnce.current = true
+      // Use requestAnimationFrame to ensure the initial position is painted first
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setAnimationsEnabled(true)
+        })
+      })
+    }
+  }, [width, left])
+
+  // Handle resize events
+  useEffect(() => {
+    const observer = new ResizeObserver(() => {
+      updateIndicator()
+    })
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    // Also observe each item for content changes
+    itemRefs.current?.forEach((button) => {
+      observer.observe(button)
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [updateIndicator, containerRef, itemRefs])
+
+  return { width, left, animationsEnabled }
+}

package/src/tooltip/index.ts

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