@toolpath/ui 0.1.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@toolpath/ui",
+  "version": "0.1.0",
+  "description": "Toolpath React and Tailwind UI primitives",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/toolpath/toolpath.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://developers.toolpath.com",
+  "bugs": {
+    "url": "https://github.com/toolpath/toolpath/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "theme.css",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.2.0",
+    "@phosphor-icons/react": "2.1.10",
+    "@table-library/react-table-library": "^4.1.15",
+    "clsx": "^2.1.1",
+    "lodash-es": "^4.18.1",
+    "react-resizable-panels": "4.9.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^30.0.1",
+    "tsup": "^8.5.1",
+    "typescript": "5.9.3",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external react --external react-dom",
+    "check-types": "tsc --noEmit",
+    "test": "pnpm build && vitest run"
+  }
+}

package/src/attribution/action.tsx

@@ -0,0 +1,13 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '../helpers'
+import { capitalize } from 'lodash-es'
+
+export type AttributionActionProps = HTMLAttributes<HTMLSpanElement> & {
+  children?: ReactNode
+}
+
+export const Action = ({ className, children = 'created', ...props }: AttributionActionProps) => (
+  <span className={cn(className)} {...props}>
+    {typeof children === 'string' ? capitalize(children) : children}
+  </span>
+)

package/src/attribution/at.tsx

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes, useMemo } from 'react'
+import { cn } from '../helpers'
+import { Tooltip } from '../tooltip/tooltip'
+import { formatFullDate, formatRelativeTime } from './format-time'
+
+export type AttributionAtProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+  date: string | Date
+  hideTime?: boolean
+}
+
+export const At = ({ date, hideTime = false, className, ...props }: AttributionAtProps) => {
+  const parsed = useMemo(() => new Date(date), [date])
+
+  const formattedTime = useMemo(() => formatRelativeTime(parsed, hideTime), [parsed, hideTime])
+
+  const fullDate = useMemo(() => formatFullDate(parsed), [parsed])
+
+  return (
+    <>
+      {' '}
+      <Tooltip tip={fullDate}>
+        <span className={cn('inline-block', className)} {...props}>
+          {formattedTime}
+        </span>
+      </Tooltip>
+    </>
+  )
+}

package/src/attribution/attribution.tsx

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react'
+import { cn } from '../helpers'
+
+export type AttributionProps = HTMLAttributes<HTMLDivElement>
+
+export const Attribution = ({ className, children, ...props }: AttributionProps) => (
+  <div
+    className={cn(
+      'truncate break-words text-xs leading-4 font-semibold tracking-normal text-gray-300 dark:text-zinc-400 md:line-clamp-2 md:whitespace-normal',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+)

package/src/attribution/by.tsx

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '../helpers'
+
+export type AttributionByProps = HTMLAttributes<HTMLSpanElement> & {
+  children?: ReactNode
+}
+
+export const By = ({ className, children, ...props }: AttributionByProps) => {
+  if (children == null) {
+    return null
+  }
+
+  return (
+    <>
+      {' by '}
+      <span className={cn(className)} {...props}>
+        {children}
+      </span>
+    </>
+  )
+}

package/src/attribution/format-time.ts

@@ -0,0 +1,48 @@
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const formatHour = (date: Date): string => {
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+  const ampm = hours >= 12 ? 'PM' : 'AM'
+  const h = hours % 12 || 12
+  const mm = minutes.toString().padStart(2, '0')
+  return `${h}:${mm} ${ampm}`
+}
+
+export const formatFullDate = (date: Date): string =>
+  `${MONTHS[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()} at ${formatHour(date)}`
+
+export const formatRelativeTime = (
+  date: Date,
+  hideTime: boolean,
+  now: Date = new Date(),
+): string => {
+  const diffMs = now.getTime() - date.getTime()
+  const diffMinutes = Math.floor(diffMs / 60_000)
+  const diffHours = Math.floor(diffMs / 3_600_000)
+  const diffDays = Math.floor(diffMs / 86_400_000)
+
+  if (diffMinutes < 1) {
+    return 'Just now'
+  }
+
+  if (diffHours < 1) {
+    return `${diffMinutes}m ago`
+  }
+
+  if (diffDays < 1) {
+    return `${diffHours}h ago`
+  }
+
+  if (diffDays < 2) {
+    return `Yesterday${!hideTime ? ` at ${formatHour(date)}` : ''}`
+  }
+
+  const isWithinYear = Math.floor(diffMs / (365.25 * 86_400_000)) < 1
+
+  if (isWithinYear) {
+    return `${MONTHS[date.getMonth()]} ${date.getDate()}${!hideTime ? ` at ${formatHour(date)}` : ''}`
+  }
+
+  return `${MONTHS[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`
+}

package/src/attribution/index.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { Action, AttributionActionProps } from './action'
+import { At, AttributionAtProps } from './at'
+import { AttributionProps, Attribution as AttributionRoot } from './attribution'
+import { AttributionByProps, By } from './by'
+
+type AttributionCompoundType = {
+  (props: AttributionProps): ReactElement
+  Action: typeof Action
+  At: typeof At
+  By: typeof By
+}
+
+export const Attribution: AttributionCompoundType = Object.assign(AttributionRoot, {
+  Action,
+  At,
+  By,
+})
+
+export type { AttributionProps, AttributionActionProps, AttributionAtProps, AttributionByProps }

package/src/badge/badge.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+
+export type BadgeProps = {
+  children: ReactNode
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'default' | 'secondary' | 'success' | 'primary' | 'info' | 'danger'
+  className?: string
+}
+
+export const Badge = ({ children, size = 'md', variant = 'default', className }: BadgeProps) => {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap border font-semibold tracking-wide',
+        {
+          'h-3 px-1 text-3xs rounded-sm': size === 'sm',
+          'h-4 px-1.5 text-2xs rounded': size === 'md',
+          'h-6 px-2 text-xs rounded': size === 'lg',
+        },
+        {
+          'border-gray bg-gray/25 text-gray dark:border-zinc-800 dark:bg-zinc-800/50 dark:text-zinc-100':
+            variant === 'default',
+          'border-gray-300 bg-gray-300/25 text-gray-400 dark:border-zinc-700 dark:bg-zinc-700/25 dark:text-zinc-200':
+            variant === 'secondary',
+          'border-success bg-success/25 text-success dark:text-success': variant === 'success',
+          'border-primary bg-primary/25 text-primary dark:text-primary': variant === 'primary',
+          'border-info bg-info/25 text-info dark:text-info': variant === 'info',
+          'border-danger bg-danger/25 text-danger dark:text-danger': variant === 'danger',
+        },
+        'data-[content]:leading-none',
+        className,
+      )}
+    >
+      <span data-content>{children}</span>
+    </span>
+  )
+}

package/src/badge/index.ts

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

package/src/breadcrumbs/breadcrumbs-context.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, ReactNode, useContext } from 'react'
+
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl'
+
+export type BreadcrumbsContextValue = {
+  breakpoint: Breakpoint
+}
+
+const BreadcrumbsContext = createContext<BreadcrumbsContextValue>({
+  breakpoint: 'md',
+})
+
+export const useBreadcrumbs = () => {
+  return useContext(BreadcrumbsContext)
+}
+
+export type BreadcrumbsProviderProps = {
+  children: ReactNode
+  breakpoint?: Breakpoint
+}
+
+export const BreadcrumbsProvider = ({ children, breakpoint = 'md' }: BreadcrumbsProviderProps) => {
+  return (
+    <BreadcrumbsContext.Provider value={{ breakpoint }}>{children}</BreadcrumbsContext.Provider>
+  )
+}

package/src/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+import { BreadcrumbsProvider } from './breadcrumbs-context'
+
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl'
+
+export type BreadcrumbsProps = {
+  children: ReactNode
+  breakpoint?: Breakpoint
+  className?: string
+}
+
+export const BreadcrumbsRoot = ({ children, breakpoint = 'md', className }: BreadcrumbsProps) => (
+  <BreadcrumbsProvider breakpoint={breakpoint}>
+    <ul
+      className={cn(
+        'flex whitespace-nowrap text-sm font-medium text-gray-300 dark:text-zinc-500',
+        className,
+      )}
+    >
+      {children}
+    </ul>
+  </BreadcrumbsProvider>
+)

package/src/breadcrumbs/index.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react'
+import { BreadcrumbsRoot, BreadcrumbsProps } from './breadcrumbs'
+import { Item, BreadcrumbsItemProps } from './item'
+
+type BreadcrumbsCompoundType = {
+  (props: BreadcrumbsProps): ReactElement
+  Item: typeof Item
+}
+
+export const Breadcrumbs: BreadcrumbsCompoundType = Object.assign(BreadcrumbsRoot, { Item })
+
+export type { BreadcrumbsProps, BreadcrumbsItemProps }

package/src/breadcrumbs/item.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+import { CaretRightIcon } from '@phosphor-icons/react'
+import { Link } from '../link'
+import { useBreadcrumbs } from './breadcrumbs-context'
+
+export type BreadcrumbsItemProps = {
+  to: string
+  children: ReactNode
+  current?: boolean
+  previous?: boolean
+  className?: string
+}
+
+export const Item = ({
+  to,
+  children,
+  current = false,
+  previous = false,
+  className,
+}: BreadcrumbsItemProps) => {
+  const { breakpoint } = useBreadcrumbs()
+
+  return (
+    <li
+      className={cn(
+        'hidden items-center',
+        {
+          'sm:flex': breakpoint === 'sm',
+          'md:flex': breakpoint === 'md',
+          'lg:flex': breakpoint === 'lg',
+          'xl:flex': breakpoint === 'xl',
+          flex: previous,
+          hidden: !previous,
+        },
+        className,
+      )}
+    >
+      {current ? (
+        <span data-content className="flex truncate pl-2 text-gray-300 dark:text-zinc-500">
+          {children}
+        </span>
+      ) : (
+        <>
+          <Link
+            href={to}
+            data-content
+            className={cn(
+              'no-underline hover:no-underline',
+              'flex items-center rounded px-2 text-gray-300 dark:text-zinc-500',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-info/75',
+            )}
+          >
+            <>
+              {previous && (
+                <CaretRightIcon
+                  data-previous
+                  className={cn(
+                    'flex size-5 rotate-180 truncate text-gray-300 dark:text-zinc-500',
+                    {
+                      'sm:hidden': breakpoint === 'sm',
+                      'md:hidden': breakpoint === 'md',
+                      'lg:hidden': breakpoint === 'lg',
+                      'xl:hidden': breakpoint === 'xl',
+                    },
+                  )}
+                />
+              )}
+              {children}
+            </>
+          </Link>
+          <CaretRightIcon
+            data-separator
+            className={cn('hidden size-5 text-gray-300 dark:text-zinc-500', {
+              'sm:flex': breakpoint === 'sm',
+              'md:flex': breakpoint === 'md',
+              'lg:flex': breakpoint === 'lg',
+              'xl:flex': breakpoint === 'xl',
+            })}
+          />
+        </>
+      )}
+    </li>
+  )
+}

package/src/button/animated-ellipsis.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Svg } from '../common'
+import { cn } from '../helpers'
+
+export type AnimatedEllipsisProps = {
+  className?: string
+}
+
+export const AnimatedEllipsis = ({ className }: AnimatedEllipsisProps) => (
+  <div className="mx-auto inline-block">
+    <div className="flex items-center">
+      <Svg
+        viewBox="0 0 24 24"
+        className={cn(
+          'opacity-85 mx-1 h-3 w-3',
+          className,
+          'animate-[pulse_1.5s_ease-in-out_infinite]',
+        )}
+      >
+        <circle cx="12" cy="12" r="12" />
+      </Svg>
+      <Svg
+        viewBox="0 0 24 24"
+        className={cn(
+          'opacity-85 mx-1 h-3 w-3',
+          className,
+          'animate-[pulse_1.5s_ease-in-out_0.5s_infinite]',
+        )}
+      >
+        <circle cx="12" cy="12" r="12" />
+      </Svg>
+      <Svg
+        viewBox="0 0 24 24"
+        className={cn(
+          'opacity-85 mx-1 h-3 w-3',
+          className,
+          'animate-[pulse_1.5s_ease-in-out_1.5s_infinite]',
+        )}
+      >
+        <circle cx="12" cy="12" r="12" />
+      </Svg>
+    </div>
+  </div>
+)

package/src/button/button.tsx

@@ -0,0 +1,168 @@
+import React, { Dispatch, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react'
+import { cn } from '../helpers'
+import { Link } from '../link'
+import { AnimatedEllipsis } from './animated-ellipsis'
+
+export type ButtonProps = HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+  children: ReactNode
+  variant?: 'default' | 'primary' | 'secondary' | 'info' | 'muted' | 'danger' | 'success'
+  size?: 'sm' | 'md' | 'lg'
+  shape?: 'default' | 'pill'
+  disabled?: boolean
+  isLoading?: boolean
+  onClick?: Dispatch<MouseEvent>
+  type?: 'button' | 'submit' | 'reset'
+  className?: string
+  asLink?: boolean
+  href?: string
+  form?: string
+  target?: string
+  full?: boolean
+  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>
+}
+
+export const Button = ({
+  variant = 'default',
+  size = 'md',
+  shape = 'default',
+  type = 'button',
+  className,
+  isLoading = false,
+  children,
+  onClick,
+  asLink = false,
+  href,
+  form,
+  full = false,
+  disabled,
+  ref,
+  ...props
+}: ButtonProps) => {
+  const isMuted = variant === 'muted' && !disabled
+  const isPrimary = variant === 'primary' && !disabled
+  const isSuccess = variant === 'success' && !disabled
+  const isSecondary = variant === 'secondary' && !disabled
+  const isInfo = variant === 'info' && !disabled
+  const isDanger = variant === 'danger' && !disabled
+  const isColoredVariant =
+    variant === 'primary' || variant === 'success' || variant === 'info' || variant === 'danger'
+
+  const isPill = shape === 'pill'
+
+  const buttonClasses = cn(
+    'flex flex-col items-center group rounded outline-none font-semibold',
+    'cursor-pointer select-none transition duration-200 ease-in-out',
+    'focus-visible:ring-2 focus-visible:ring-info/75',
+    'text-gray dark:text-zinc-50 focus-visible:bg-gray-100 dark:focus-visible:bg-zinc-800',
+    {
+      'text-white focus-visible:bg-success': isSuccess,
+      'text-white focus-visible:bg-primary': isPrimary,
+      'text-white focus-visible:bg-info': isInfo,
+      'focus-visible:bg-gray-50': isMuted,
+      'text-white focus-visible:bg-danger': isDanger,
+      'text-gray-400 dark:text-zinc-200 focus-visible:bg-white dark:focus-visible:bg-zinc-800 focus-visible:rounded-md':
+        isSecondary,
+      'text-gray-300 dark:text-zinc-400 cursor-not-allowed': disabled && !isColoredVariant,
+      'text-white/90 dark:text-zinc-100 cursor-not-allowed': disabled && isColoredVariant,
+      'text-gray-200 dark:text-zinc-500': variant === 'muted' && disabled,
+      'block text-center': asLink,
+      'rounded-lg': size === 'lg' && !isPill,
+      'rounded-full focus-visible:rounded-full': isPill,
+      'w-full': full,
+    },
+  )
+
+  const clickHandler = (event: React.MouseEvent): void => {
+    if (typeof onClick === 'function') {
+      if (!asLink) {
+        event.preventDefault()
+      }
+
+      onClick(event)
+    }
+  }
+
+  const ContentWrapper = ({ children }: { children: ReactNode }) => (
+    <div
+      className={cn(
+        'whitespace-nowrap rounded px-3 py-1 font-body text-xs font-semibold tracking-normal',
+        'bg-gray-100 group-hover:bg-gray-200/75 dark:bg-zinc-800 dark:group-hover:bg-zinc-900',
+        'transition duration-200 ease-in-out',
+        {
+          'bg-primary group-hover:bg-primary-darken group-active:bg-primary-darken dark:bg-primary dark:group-hover:bg-primary-darken dark:group-active:bg-primary-darken':
+            isPrimary,
+          'bg-success group-hover:bg-success-darken group-active:bg-success-darken dark:bg-success dark:group-hover:bg-success-darken dark:group-active:bg-success-darken':
+            isSuccess,
+          'bg-info group-hover:bg-info group-active:bg-info dark:bg-info dark:group-hover:bg-info dark:group-active:bg-info':
+            isInfo,
+          'bg-gray-50 group-hover:bg-gray-100 group-active:bg-gray-100 dark:bg-zinc-800 dark:group-hover:bg-zinc-900 dark:group-active:bg-zinc-900':
+            isMuted,
+          'bg-danger group-hover:bg-danger-darken group-active:bg-danger-darken dark:bg-danger dark:group-hover:bg-danger-darken dark:group-active:bg-danger-darken':
+            isDanger,
+          'border border-gray-100 bg-white dark:bg-zinc-900 dark:border-zinc-800 group-hover:bg-gray-50 dark:group-hover:bg-zinc-800 group-active:bg-gray-50 dark:group-active:bg-zinc-800 dark:group-hover:border-zinc-800':
+            isSecondary,
+          'bg-primary/50 dark:bg-primary/45': disabled && variant === 'primary',
+          'bg-success/50 dark:bg-success/45': disabled && variant === 'success',
+          'bg-info/50 dark:bg-info/45': disabled && variant === 'info',
+          'bg-danger/50 dark:bg-danger/45': disabled && variant === 'danger',
+          'dark:bg-zinc-900 group-hover:bg-gray-100 dark:group-hover:bg-zinc-900 dark:group-active:bg-zinc-900':
+            disabled && !isColoredVariant,
+          'group-active:scale-95': !disabled,
+          'px-1.5 py-px text-2xs': size === 'sm',
+          'px-4 py-2 text-base': size === 'lg',
+          'rounded-lg': size === 'lg' && !isPill,
+          'rounded-full': isPill,
+          'px-8': isPill && size === 'lg',
+          'w-full': full,
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+
+  const content = !isLoading ? (
+    <ContentWrapper>{children}</ContentWrapper>
+  ) : (
+    <ContentWrapper>
+      <AnimatedEllipsis
+        className={cn({
+          'h-2 w-1': size === 'sm',
+          'h-2 w-1.5': size === 'md',
+          'h-3 w-2': size === 'lg',
+        })}
+      />
+    </ContentWrapper>
+  )
+
+  if (asLink) {
+    return (
+      <Link
+        ref={ref as Ref<HTMLAnchorElement>}
+        href={disabled ? '#' : href}
+        aria-disabled={disabled}
+        onClick={clickHandler}
+        className={cn('text-inherit no-underline hover:no-underline', buttonClasses)}
+        {...props}
+      >
+        {content}
+      </Link>
+    )
+  }
+
+  return (
+    <button
+      ref={ref as Ref<HTMLButtonElement>}
+      aria-label={isLoading ? 'Loading...' : ''}
+      type={type}
+      form={type === 'submit' ? form : undefined}
+      onClick={clickHandler}
+      className={buttonClasses}
+      {...props}
+      disabled={disabled}
+    >
+      {content}
+    </button>
+  )
+}

package/src/button/index.ts

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