@toolpath/ui 0.1.0

package/src/icon-button/icon-button.tsx

@@ -0,0 +1,126 @@
+import React, { ButtonHTMLAttributes, createContext, ReactNode, Ref, useContext } from 'react'
+import { cn } from '../helpers'
+
+type IconButtonSize = 'sm' | 'md' | 'lg' | 'xl'
+
+const IconButtonContext = createContext<{ size: IconButtonSize }>({
+  size: 'md',
+})
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'muted' | 'secondary'
+  size?: IconButtonSize
+  children: ReactNode
+  toggled?: boolean
+  invalid?: boolean
+  deemphasize?: boolean
+  ref?: Ref<HTMLButtonElement>
+}
+
+export interface IconButtonIndicatorProps {
+  variant?: 'info' | 'success' | 'primary' | 'danger' | 'warning'
+  children?: ReactNode
+}
+
+const IconButtonIndicator = ({ variant = 'info', children }: IconButtonIndicatorProps) => {
+  const { size } = useContext(IconButtonContext)
+  const hasText = children !== undefined && children !== null && size !== 'sm'
+
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'absolute flex items-center justify-center rounded-full font-bold text-white select-none',
+        {
+          'bg-info': variant === 'info',
+          'bg-success': variant === 'success',
+          'bg-primary': variant === 'primary',
+          'bg-danger': variant === 'danger',
+          'bg-warning': variant === 'warning',
+        },
+        hasText
+          ? {
+              '-right-2 -top-2 h-4 min-w-4 px-1 text-2xs': size === 'xl',
+              '-right-1.5 -top-1.5 h-3.5 min-w-3.5 px-0.5 text-3xs': size === 'lg',
+              '-right-1 -top-1 h-3 min-w-3 px-0.5 text-3xs': size === 'md',
+            }
+          : {
+              '-right-0.5 -top-0.5 size-2.5': size === 'xl',
+              '-right-0.5 -top-0.5 size-2': size === 'lg',
+              '-right-0.5 -top-0.5 size-1.5': size === 'md',
+              '-right-px -top-px size-1': size === 'sm',
+            },
+      )}
+    >
+      {hasText && children}
+    </span>
+  )
+}
+
+const IconButtonRoot = ({
+  variant = 'default',
+  size = 'md',
+  disabled = false,
+  children,
+  className,
+  toggled = false,
+  invalid = false,
+  deemphasize = false,
+  ref,
+  ...props
+}: IconButtonProps) => {
+  return (
+    <IconButtonContext.Provider value={{ size }}>
+      <button
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        data-disabled={disabled}
+        data-toggled={toggled || undefined}
+        data-invalid={invalid || undefined}
+        {...props}
+        className={cn(
+          'flex justify-center items-center rounded-sm shrink-0',
+          'transition-transform duraiton-150 ease-in-out',
+          'outline-none focus-visible:ring-2 ring-info/75',
+          {
+            'bg-[#FFD4E0]/50 border border-[#FFD4E0]': invalid && !disabled,
+            '!bg-info-lighten text-gray-500 dark:!bg-info/20 dark:ring-1 dark:ring-info/40 dark:text-zinc-50':
+              toggled && !invalid,
+            'hover:bg-gray-100 dark:hover:bg-zinc-900 active:bg-gray-100 dark:active:bg-zinc-900 active:scale-95':
+              !toggled && !disabled && !invalid && variant !== 'secondary',
+            'border border-gray-100 bg-white dark:border-zinc-800 dark:bg-zinc-900':
+              variant === 'secondary' && !invalid,
+            'text-gray-400 dark:text-zinc-200 hover:bg-gray-50 dark:hover:bg-zinc-800 active:bg-gray-50 dark:active:bg-zinc-800 active:scale-95':
+              variant === 'secondary' && !disabled && !toggled,
+            'hover:!bg-info-lighten/80 dark:hover:!bg-info/25 active:!bg-info-lighten/90 dark:active:!bg-info/30 active:scale-95':
+              toggled && !disabled && !invalid,
+            'text-gray-500 active:text-gray-700 dark:text-zinc-400 dark:hover:text-zinc-100 dark:active:text-zinc-100':
+              variant === 'default' && !deemphasize && !disabled && !toggled,
+            'text-gray-300 hover:text-gray-400 active:text-gray-500 dark:text-zinc-400 dark:hover:text-zinc-100 dark:active:text-zinc-100':
+              variant === 'default' && deemphasize && !disabled && !toggled,
+            'text-gray-300 hover:text-gray-400 active:text-gray-400 dark:text-zinc-400 dark:hover:text-zinc-100 dark:active:text-zinc-100':
+              variant === 'muted' && !deemphasize && !disabled && !toggled,
+            'text-gray-200 hover:text-gray-300 active:text-gray-400 dark:text-zinc-400 dark:hover:text-zinc-100 dark:active:text-zinc-100':
+              variant === 'muted' && deemphasize && !disabled && !toggled,
+            'text-gray-200 hover:bg-transparent active:bg-transparent active:scale-100 active:text-gray-200 cursor-not-allowed dark:text-zinc-400 dark:hover:bg-transparent dark:active:bg-transparent dark:active:scale-100 dark:active:text-zinc-400':
+              disabled,
+            'hover:bg-white active:bg-white dark:hover:bg-zinc-900 dark:active:bg-zinc-900':
+              variant === 'secondary' && disabled,
+            'size-8 [&_svg]:size-6 rounded': size === 'xl',
+            'size-6 [&_svg]:size-4': size === 'lg',
+            'size-5 [&_svg]:size-3.5': size === 'md',
+            'size-4 [&_svg]:size-2.5': size === 'sm',
+          },
+          className,
+        )}
+      >
+        {children}
+      </button>
+    </IconButtonContext.Provider>
+  )
+}
+
+export const IconButton = Object.assign(IconButtonRoot, {
+  Indicator: IconButtonIndicator,
+})

package/src/icon-button/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button'
+export type { IconButtonProps, IconButtonIndicatorProps } from './icon-button'

package/src/index.ts

@@ -0,0 +1,32 @@
+export * from './attribution'
+export * from './button'
+export * from './callout'
+export * from './checkbox'
+export * from './combobox'
+export * from './dialog'
+export * from './editable-cell'
+export * from './badge'
+export * from './breadcrumbs'
+export * from './card'
+export * from './field'
+export * from './icon-button'
+export * from './input'
+export * from './link'
+export * from './menu'
+export * from './notification'
+export * from './quantity-input'
+export * from './slider'
+export * from './pin'
+export * from './progress-bar'
+export * from './star'
+export * from './switch'
+export * from './table'
+export * from './textarea'
+export * from './tabs'
+export * from './toggle'
+export * from './toast'
+export * from './tooltip'
+export * from './panels'
+export * from './scroll-area'
+export * from './pagination'
+export * from './page-header'

package/src/input/index.ts

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

package/src/input/input.tsx

@@ -0,0 +1,276 @@
+import React, {
+  ChangeEvent,
+  ComponentType,
+  FocusEvent,
+  InputHTMLAttributes,
+  ReactNode,
+  Ref,
+  SVGProps,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { cn } from '../helpers'
+import { IconButton } from '../icon-button'
+import { CheckIcon, CopyIcon, MagnifyingGlassIcon } from '@phosphor-icons/react'
+import { Tooltip } from '../tooltip'
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> & {
+  name: string
+  id: string
+  size?: 'md' | 'lg' | 'xl'
+  variant?: 'default' | 'secondary' | 'muted' | 'ghost'
+  icon?: ComponentType<SVGProps<SVGSVGElement>>
+  iconPosition?: 'left' | 'right'
+  prefix?: ReactNode
+  suffix?: ReactNode
+  textEnd?: boolean
+  invalid?: boolean
+  showSpinner?: boolean
+  copyable?: boolean
+  onCopyError?: () => void
+  onValueChange?: (value: string | null) => void
+  ref?: Ref<HTMLInputElement>
+}
+
+export const Input = ({
+  type = 'text',
+  name,
+  id,
+  value,
+  className,
+  disabled = false,
+  variant = 'default',
+  icon: IconComponent,
+  iconPosition = 'left',
+  suffix,
+  prefix,
+  size = 'lg',
+  textEnd = false,
+  invalid = false,
+  showSpinner = false,
+  copyable = false,
+  onCopyError,
+  onValueChange,
+  ref,
+  ...props
+}: InputProps) => {
+  const [copied, setCopied] = useState(false)
+  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const copyToClipboard = () =>
+    navigator.clipboard.writeText(typeof value === 'string' ? value : String(value ?? ''))
+
+  const scheduleCopiedReset = () => {
+    if (copyTimeoutRef.current) {
+      clearTimeout(copyTimeoutRef.current)
+    }
+    copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500)
+  }
+
+  const handleCopy = async () => {
+    try {
+      await copyToClipboard()
+      setCopied(true)
+      scheduleCopiedReset()
+    } catch {
+      onCopyError?.()
+    }
+  }
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    if (type === 'number') {
+      if (value === '') {
+        onValueChange?.(null)
+        return
+      }
+
+      if (isNaN(Number(value))) {
+        return
+      }
+    }
+
+    onValueChange?.(value)
+    props?.onChange?.(event)
+  }
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    const { min, max } = props
+    const value = event.target.value
+    if (min && Number(value) < Number(min)) {
+      onValueChange?.(String(min))
+    }
+
+    if (max && Number(value) > Number(max)) {
+      onValueChange?.(String(max))
+    }
+
+    props?.onBlur?.(event)
+  }
+
+  const iconClassName = cn(
+    {
+      'text-gray-400 dark:text-zinc-400':
+        (variant === 'muted' || variant === 'default') && !disabled,
+      'text-gray-200 dark:text-zinc-400': variant === 'secondary' || disabled,
+    },
+    iconPosition === 'left'
+      ? {
+          'ml-1 w-3': size === 'md',
+          '-mr-1 ml-1.5 w-4': size === 'lg',
+          '-mr-1 ml-2 w-5': size === 'xl',
+        }
+      : {
+          'mr-1 w-3': size === 'md',
+          '-ml-1 mr-1.5 w-4': size === 'lg',
+          '-ml-1 mr-2 w-5': size === 'xl',
+        },
+  )
+
+  const iconElement =
+    type === 'search' && !IconComponent ? (
+      <MagnifyingGlassIcon data-icon className={iconClassName} />
+    ) : IconComponent ? (
+      <IconComponent data-icon className={iconClassName} />
+    ) : null
+
+  let placeholder = props.placeholder
+  if (!props.placeholder && type === 'search') {
+    placeholder = 'Search'
+  }
+
+  const numberInputProps: InputHTMLAttributes<HTMLInputElement> & {
+    'data-lpignore': boolean
+  } = {
+    inputMode: 'numeric' as const,
+    step: 'any',
+    autoComplete: 'off',
+    autoCorrect: 'off',
+    spellCheck: false,
+    'data-lpignore': true,
+    'aria-roledescription': 'Number field',
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative flex w-full flex-nowrap items-stretch font-medium',
+        { 'group/input': copyable },
+        {
+          'focus-within:ring-2 ring-info/50 dark:ring-info/75': !invalid,
+          'text-gray-400 dark:text-zinc-100 border border-gray-200 bg-white focus-within:border-info dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-info':
+            variant === 'secondary',
+          'bg-gray-50 dark:bg-zinc-800': variant === 'default',
+          'bg-gray-100 dark:bg-zinc-800': variant === 'muted',
+          'bg-transparent': variant === 'ghost',
+          'text-gray-500 dark:text-zinc-100':
+            (variant === 'default' || variant === 'muted') && !disabled,
+          'text-inherit': variant === 'ghost' && !disabled,
+          'text-gray-200 dark:text-zinc-400': disabled,
+          'h-6 rounded text-xs': size === 'md',
+          'h-7 rounded-md text-sm': size === 'lg',
+          'h-9 rounded-md text-lg': size === 'xl',
+          '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}
+    >
+      {prefix && (
+        <div
+          data-prefix
+          className={cn('flex items-center text-white font-medium', {
+            'bg-gray-200': variant === 'secondary' || variant === 'muted',
+            'dark:bg-zinc-800': variant === 'secondary',
+            'dark:bg-zinc-700/50': variant === 'muted',
+            'bg-gray-100 dark:bg-zinc-800/50': variant === 'default',
+            'bg-[#FFD4E0]': invalid && !disabled,
+            'rounded-l-sm px-1.5 text-xs': size === 'md',
+            'rounded-l px-1.5 text-sm': size === 'lg',
+            'rounded-l px-2': size === 'xl',
+          })}
+        >
+          {prefix}
+        </div>
+      )}
+      {iconPosition === 'left' && iconElement}
+      <input
+        ref={ref}
+        type={type}
+        data-testid={id}
+        data-input
+        data-1p-ignore
+        id={id}
+        placeholder={placeholder}
+        name={name}
+        value={value}
+        autoComplete="off"
+        className={cn('w-px flex-1 grow bg-transparent leading-normal', 'outline-none', {
+          'search-close-icon': type === 'search',
+          'cursor-not-allowed select-none': disabled,
+          'text-end': textEnd,
+          'placeholder-gray-200 dark:placeholder-zinc-400': variant === 'secondary',
+          'placeholder-gray-300 dark:placeholder-zinc-400':
+            variant === 'default' || variant === 'muted' || variant === 'ghost',
+          'px-1': size === 'md' && variant !== 'ghost',
+          'pl-2 pr-1.5': size === 'lg' && variant !== 'ghost',
+          'px-2': size === 'xl' && variant !== 'ghost',
+          'px-0': variant === 'ghost',
+          'appearance-none': type === 'number' && !showSpinner,
+        })}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        disabled={disabled}
+        {...(type === 'number' ? numberInputProps : {})}
+        {...props}
+      />
+      {iconPosition === 'right' && iconElement}
+      {copyable && (
+        <div className="flex items-center">
+          <Tooltip tip="Copy to clipboard" disabled={!value}>
+            <IconButton
+              size="sm"
+              variant="muted"
+              aria-label="Copy to clipboard"
+              onClick={handleCopy}
+              className={cn(
+                'transition-opacity group-hover/input:opacity-100 focus:opacity-100',
+                value ? 'opacity-0' : 'invisible',
+              )}
+            >
+              {copied ? <CheckIcon /> : <CopyIcon />}
+            </IconButton>
+          </Tooltip>
+        </div>
+      )}
+      {suffix && (
+        <div
+          data-suffix
+          className={cn('flex items-center text-white font-medium', {
+            'bg-gray-200': variant === 'secondary' || variant === 'muted',
+            'dark:bg-zinc-800': variant === 'secondary',
+            'dark:bg-zinc-700/50': variant === 'muted',
+            'bg-gray-100 dark:bg-zinc-800/50': variant === 'default',
+            'bg-[#FFD4E0]': invalid && !disabled,
+            'rounded-r-sm px-1.5 text-xs': size === 'md',
+            'rounded-r px-1.5': size === 'lg',
+            'rounded-r px-2': size === 'xl',
+          })}
+        >
+          {suffix}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/link/index.ts

@@ -0,0 +1,4 @@
+export { Link } from './link'
+export type { LinkProps } from './link'
+export { LinkProvider, useLinkContext } from './link-context'
+export type { LinkComponentProps, LinkProviderProps } from './link-context'

package/src/link/link-context.tsx

@@ -0,0 +1,33 @@
+import React, {
+  AnchorHTMLAttributes,
+  ComponentType,
+  createContext,
+  ReactNode,
+  Ref,
+  useContext,
+} from 'react'
+
+export type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  ref?: Ref<HTMLAnchorElement>
+}
+
+export type LinkContextValue = {
+  LinkComponent: ComponentType<LinkComponentProps>
+}
+
+const LinkContext = createContext<LinkContextValue | null>(null)
+
+export const useLinkContext = () => {
+  return useContext(LinkContext)
+}
+
+export type LinkProviderProps = {
+  children: ReactNode
+  component: ComponentType<LinkComponentProps>
+}
+
+export const LinkProvider = ({ children, component }: LinkProviderProps) => {
+  return (
+    <LinkContext.Provider value={{ LinkComponent: component }}>{children}</LinkContext.Provider>
+  )
+}

package/src/link/link.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode, Ref } from 'react'
+import { cn } from '../helpers'
+import { LinkComponentProps, useLinkContext } from './link-context'
+
+export type LinkProps = LinkComponentProps & {
+  children: ReactNode
+  className?: string
+  ref?: Ref<HTMLAnchorElement>
+}
+
+export const Link = ({ children, className, ref, ...props }: LinkProps) => {
+  const context = useLinkContext()
+  const Component = context?.LinkComponent ?? 'a'
+
+  return (
+    <Component
+      ref={ref}
+      className={cn('cursor-pointer text-info underline-offset-2 hover:underline', className)}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/menu/divider.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Menu as BaseMenu, ContextMenu, SeparatorProps } from '@base-ui/react'
+import { cn } from '../helpers'
+import { useMenu } from './menu-context'
+
+export type MenuDividerProps = SeparatorProps
+
+export const Divider = ({ className, ...props }: MenuDividerProps) => {
+  const { context } = useMenu()
+  const dividerClass = cn('mx-1 border-t border-gray-100 dark:border-zinc-800', className)
+
+  if (context) {
+    return <ContextMenu.Separator className={dividerClass} {...props} />
+  }
+
+  return <BaseMenu.Separator className={dividerClass} {...props} />
+}

package/src/menu/index.ts

@@ -0,0 +1,40 @@
+import { ReactElement } from 'react'
+import { Divider, MenuDividerProps } from './divider'
+import { Item, MenuItemProps } from './item'
+import { MenuProps, Menu as MenuRoot } from './menu'
+import { useMenu } from './menu-context'
+import { MenuPopoverProps, Popover } from './popover'
+import { MenuSubmenuRootProps, Submenu } from './submenu'
+import { MenuSubmenuTriggerProps, SubmenuTrigger } from './submenu-trigger'
+import { MenuTriggerProps, Trigger } from './trigger'
+
+type MenuCompoundType = {
+  (props: MenuProps): ReactElement
+  Divider: typeof Divider
+  Item: typeof Item
+  Popover: typeof Popover
+  SubmenuTrigger: typeof SubmenuTrigger
+  Submenu: typeof Submenu
+  Trigger: typeof Trigger
+  useMenu: typeof useMenu
+}
+
+export const Menu: MenuCompoundType = Object.assign(MenuRoot, {
+  Divider,
+  Item,
+  Popover,
+  SubmenuTrigger,
+  Submenu,
+  Trigger,
+  useMenu,
+})
+
+export type {
+  MenuProps,
+  MenuDividerProps,
+  MenuItemProps,
+  MenuPopoverProps,
+  MenuSubmenuTriggerProps,
+  MenuSubmenuRootProps,
+  MenuTriggerProps,
+}