@carbonid1/design-system 5.0.3 → 5.2.0

package/src/ContextMenu/ContextMenu.tsx

@@ -1,159 +0,0 @@
-'use client'
-
-import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu'
-import { ChevronRight } from 'lucide-react'
-import type { ComponentPropsWithoutRef, Ref } from 'react'
-import { cn } from '../helpers/cn/cn'
-
-type BasePopupProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>
-type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>
-type BaseItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Item>
-type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseContextMenu.Separator>
-type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>
-type BaseSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>
-type BaseCheckboxItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>
-type BaseRadioItemProps = ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>
-
-type ItemVariant = 'default' | 'destructive'
-
-type PositionerProps = BasePositionerProps & { ref?: Ref<HTMLDivElement> }
-type PopupProps = BasePopupProps & { ref?: Ref<HTMLDivElement> }
-type SeparatorProps = BaseSeparatorProps & { ref?: Ref<HTMLDivElement> }
-type GroupLabelProps = BaseGroupLabelProps & { ref?: Ref<HTMLDivElement> }
-type ItemProps = BaseItemProps & { ref?: Ref<HTMLDivElement>; variant?: ItemVariant }
-type CheckboxItemProps = BaseCheckboxItemProps & { ref?: Ref<HTMLDivElement> }
-type RadioItemProps = BaseRadioItemProps & { ref?: Ref<HTMLDivElement> }
-type SubmenuTriggerProps = BaseSubmenuTriggerProps & { ref?: Ref<HTMLDivElement> }
-
-const popupClasses =
-  'bg-popover text-popover-foreground border-border z-50 min-w-45 origin-[var(--transform-origin)] rounded-lg border py-1 shadow-lg outline-hidden transition-[transform,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0'
-
-const itemBaseClasses =
-  'relative flex h-7 cursor-default items-center gap-1.5 px-2.5 text-[0.8rem] outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
-
-const itemVariantClasses: Record<ItemVariant, string> = {
-  default:
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
-  destructive:
-    'text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive',
-}
-
-const Positioner = ({ className, sideOffset = 4, ...props }: PositionerProps) => (
-  <BaseContextMenu.Positioner
-    sideOffset={sideOffset}
-    className={cn('z-50 outline-hidden', className)}
-    {...props}
-  />
-)
-
-const Popup = ({ className, ...props }: PopupProps) => (
-  <BaseContextMenu.Popup className={cn(popupClasses, className)} {...props} />
-)
-
-const Item = ({ className, variant = 'default', ...props }: ItemProps) => (
-  <BaseContextMenu.Item
-    className={cn(itemBaseClasses, itemVariantClasses[variant], className)}
-    {...props}
-  />
-)
-
-const Separator = ({ className, ...props }: SeparatorProps) => (
-  <BaseContextMenu.Separator
-    className={cn('bg-border my-1 h-px', className)}
-    {...props}
-  />
-)
-
-const GroupLabel = ({ className, ...props }: GroupLabelProps) => (
-  <BaseContextMenu.GroupLabel
-    className={cn('text-muted-foreground px-2.5 py-1 text-xs', className)}
-    {...props}
-  />
-)
-
-const CheckboxItem = ({ className, children, ...props }: CheckboxItemProps) => (
-  <BaseContextMenu.CheckboxItem
-    className={cn(itemBaseClasses, itemVariantClasses.default, 'pl-7', className)}
-    {...props}
-  >
-    <span
-      aria-hidden
-      className="absolute left-2 flex size-3.5 items-center justify-center"
-    >
-      <BaseContextMenu.CheckboxItemIndicator className="size-3.5">
-        <CheckIcon />
-      </BaseContextMenu.CheckboxItemIndicator>
-    </span>
-    {children}
-  </BaseContextMenu.CheckboxItem>
-)
-
-const RadioItem = ({ className, children, ...props }: RadioItemProps) => (
-  <BaseContextMenu.RadioItem
-    className={cn(itemBaseClasses, itemVariantClasses.default, 'pl-7', className)}
-    {...props}
-  >
-    <span
-      aria-hidden
-      className="absolute left-2 flex size-3.5 items-center justify-center"
-    >
-      <BaseContextMenu.RadioItemIndicator className="size-3.5">
-        <DotIcon />
-      </BaseContextMenu.RadioItemIndicator>
-    </span>
-    {children}
-  </BaseContextMenu.RadioItem>
-)
-
-const SubmenuTrigger = ({ className, children, ...props }: SubmenuTriggerProps) => (
-  <BaseContextMenu.SubmenuTrigger
-    className={cn(
-      itemBaseClasses,
-      itemVariantClasses.default,
-      'data-popup-open:bg-accent data-popup-open:text-accent-foreground pr-2',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto size-4 opacity-60" aria-hidden />
-  </BaseContextMenu.SubmenuTrigger>
-)
-
-const CheckIcon = () => (
-  <svg viewBox="0 0 14 14" fill="none" className="size-3.5">
-    <path
-      d="M3 7.5 6 10.5 11 4.5"
-      stroke="currentColor"
-      strokeWidth="1.75"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-)
-
-const DotIcon = () => (
-  <svg viewBox="0 0 14 14" className="size-3.5">
-    <circle cx="7" cy="7" r="3" fill="currentColor" />
-  </svg>
-)
-
-export const ContextMenu = {
-  Root: BaseContextMenu.Root,
-  Trigger: BaseContextMenu.Trigger,
-  Portal: BaseContextMenu.Portal,
-  Backdrop: BaseContextMenu.Backdrop,
-  Positioner,
-  Popup,
-  Arrow: BaseContextMenu.Arrow,
-  Group: BaseContextMenu.Group,
-  GroupLabel,
-  Separator,
-  Item,
-  LinkItem: BaseContextMenu.LinkItem,
-  CheckboxItem,
-  RadioGroup: BaseContextMenu.RadioGroup,
-  RadioItem,
-  SubmenuRoot: BaseContextMenu.SubmenuRoot,
-  SubmenuTrigger,
-}

package/src/Kbd/Kbd.tsx

@@ -1,56 +0,0 @@
-'use client'
-
-import { getModKey } from '../helpers/getModKey/getModKey'
-import { cn } from '../helpers/cn/cn'
-import { cva } from 'class-variance-authority'
-import type { KbdProps } from './Kbd.types'
-
-const MOD_SYMBOLS: Record<string, string> = { Cmd: '⌘', Ctrl: 'Ctrl' }
-
-const KEY_SYMBOLS: Record<string, string> = {
-  shift: '⇧',
-  alt: '⌥',
-  enter: '↵',
-  backspace: '⌫',
-  escape: 'Esc',
-  space: '␣',
-  left: '←',
-  right: '→',
-  up: '↑',
-  down: '↓',
-}
-
-const resolveKey = (key: string): string => {
-  const lower = key.toLowerCase()
-  if (lower === 'mod') return MOD_SYMBOLS[getModKey()] ?? 'Ctrl'
-  return KEY_SYMBOLS[lower] ?? key
-}
-
-const kbdVariants = cva(
-  'inline-flex items-center justify-center rounded-sm border font-mono leading-none select-none',
-  {
-    variants: {
-      size: {
-        sm: 'min-w-4 px-1 py-0.5 text-[10px] border-foreground/10 bg-foreground/10',
-        default: 'min-w-5 px-1.5 py-1 text-[11px] border-border bg-muted',
-      },
-    },
-    defaultVariants: { size: 'default' },
-  },
-)
-
-const Kbd = ({ keys, size, className }: KbdProps) => {
-  const keyList = Array.isArray(keys) ? keys : [keys]
-
-  return (
-    <span className="inline-flex items-center gap-0.5" role="presentation">
-      {keyList.map((key, i) => (
-        <kbd key={i} className={cn(kbdVariants({ size }), className)}>
-          {resolveKey(key)}
-        </kbd>
-      ))}
-    </span>
-  )
-}
-
-export { Kbd, kbdVariants }

package/src/Kbd/Kbd.types.ts

@@ -1,10 +0,0 @@
-import type { VariantProps } from 'class-variance-authority'
-import type { kbdVariants } from './Kbd'
-
-type KbdProps = {
-  /** Single key or array of keys for combos. 'mod' auto-resolves to Cmd/Ctrl. */
-  keys: string | string[]
-  className?: string
-} & VariantProps<typeof kbdVariants>
-
-export type { KbdProps }

package/src/ProgressRing/ProgressRing.consts.ts

@@ -1,4 +0,0 @@
-export const RING_SIZE = 16
-export const STROKE_WIDTH = 2
-export const RADIUS = (RING_SIZE - STROKE_WIDTH) / 2
-export const CIRCUMFERENCE = 2 * Math.PI * RADIUS

package/src/ProgressRing/ProgressRing.tsx

@@ -1,68 +0,0 @@
-import { CIRCUMFERENCE, RADIUS, RING_SIZE, STROKE_WIDTH } from './ProgressRing.consts'
-
-type ProgressRingProps = {
-  progress: number
-  colorClass: string
-  label: string
-  animate?: boolean
-  pendingStyle?: 'none' | 'dashed'
-  testId?: string
-}
-
-const DASH_SEGMENT = CIRCUMFERENCE / 8
-
-export const ProgressRing = ({
-  progress,
-  colorClass,
-  label,
-  animate = false,
-  pendingStyle = 'none',
-  testId,
-}: ProgressRingProps) => {
-  const MIN_VISIBLE = 0.08
-  const visibleProgress = animate ? Math.max(progress, MIN_VISIBLE) : progress
-  const dashoffset = CIRCUMFERENCE * (1 - visibleProgress)
-
-  const shouldSpin = animate && progress < 0.15
-  const isDashed = !animate && pendingStyle === 'dashed'
-  const center = RING_SIZE / 2
-
-  return (
-    <svg
-      width={RING_SIZE}
-      height={RING_SIZE}
-      viewBox={`0 0 ${RING_SIZE} ${RING_SIZE}`}
-      role="img"
-      aria-label={label}
-      className={animate && !shouldSpin ? 'animate-buffer-pulse motion-reduce:animate-none' : ''}
-    >
-      {/* Track */}
-      <circle
-        cx={center}
-        cy={center}
-        r={RADIUS}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={STROKE_WIDTH}
-        className={`text-border ${isDashed ? 'animate-ring-drift motion-reduce:animate-none' : ''}`}
-        strokeDasharray={isDashed ? `${DASH_SEGMENT * 0.6} ${DASH_SEGMENT * 0.4}` : undefined}
-        style={isDashed ? { transformOrigin: `${center}px ${center}px` } : undefined}
-      />
-      {/* Fill */}
-      <circle
-        data-testid={testId}
-        cx={center}
-        cy={center}
-        r={RADIUS}
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={STROKE_WIDTH}
-        strokeDasharray={CIRCUMFERENCE}
-        strokeDashoffset={dashoffset}
-        strokeLinecap="round"
-        className={`${colorClass} transition-[stroke-dashoffset,color] duration-500 ${shouldSpin ? 'animate-ring-spin motion-reduce:animate-none' : ''}`}
-        style={{ transformOrigin: `${center}px ${center}px` }}
-      />
-    </svg>
-  )
-}

package/src/Select/Select.test.tsx

@@ -1,129 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { StrictMode } from 'react'
-import { describe, expect, it, vi } from 'vitest'
-import { Select } from './Select'
-import type { SelectGroup } from './Select.types'
-
-const options = [
-  { value: 'a', label: 'Alpha' },
-  { value: 'b', label: 'Bravo' },
-  { value: 'c', label: 'Charlie' },
-]
-
-const groups: SelectGroup[] = [
-  {
-    label: 'Letters',
-    options: [
-      { value: 'a', label: 'Alpha' },
-      { value: 'b', label: 'Bravo' },
-    ],
-  },
-  {
-    label: 'Numbers',
-    options: [
-      { value: '1', label: 'One' },
-      { value: '2', label: 'Two' },
-    ],
-  },
-]
-
-const renderWith = (ui: React.ReactElement) => render(<StrictMode>{ui}</StrictMode>)
-
-describe('Select', () => {
-  it('renders selected label and chevron in button', () => {
-    renderWith(<Select options={options} value="b" onChange={vi.fn()} />)
-
-    const button = screen.getByRole('button', { name: /bravo/i })
-    expect(button).toBeInTheDocument()
-    expect(button.querySelector('svg')).toBeInTheDocument()
-  })
-
-  it('opens menu on click showing all options', () => {
-    renderWith(<Select options={options} value="a" onChange={vi.fn()} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /alpha/i })).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /bravo/i })).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /charlie/i })).toBeInTheDocument()
-  })
-
-  it('calls onChange and closes menu when an option is selected', () => {
-    const onChange = vi.fn()
-    renderWith(<Select options={options} value="a" onChange={onChange} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-    fireEvent.click(screen.getByRole('option', { name: /charlie/i }))
-
-    expect(onChange).toHaveBeenCalledWith('c')
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-  })
-
-  it('closes on Escape key', () => {
-    renderWith(<Select options={options} value="a" onChange={vi.fn()} />)
-
-    const button = screen.getByRole('button', { name: /alpha/i })
-    fireEvent.click(button)
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-
-    fireEvent.keyDown(button, { key: 'Escape' })
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-  })
-
-  it('closes on click outside', () => {
-    renderWith(<Select options={options} value="a" onChange={vi.fn()} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-
-    fireEvent.mouseDown(document.body)
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-  })
-
-  it('navigates with arrow keys and selects with Enter', () => {
-    const onChange = vi.fn()
-    renderWith(<Select options={options} value="a" onChange={onChange} />)
-
-    const button = screen.getByRole('button', { name: /alpha/i })
-    fireEvent.click(button)
-
-    fireEvent.keyDown(button, { key: 'ArrowDown' })
-    fireEvent.keyDown(button, { key: 'ArrowDown' })
-    fireEvent.keyDown(button, { key: 'Enter' })
-
-    expect(onChange).toHaveBeenCalledWith('b')
-  })
-
-  it('renders groups with headers', () => {
-    renderWith(<Select groups={groups} value="a" onChange={vi.fn()} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-
-    expect(screen.getByText('Letters')).toBeInTheDocument()
-    expect(screen.getByText('Numbers')).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /one/i })).toBeInTheDocument()
-  })
-
-  it('uses renderOption for custom item rendering', () => {
-    renderWith(
-      <Select
-        options={options}
-        value="a"
-        onChange={vi.fn()}
-        renderOption={option => <span data-testid="custom">{option.label.toUpperCase()}</span>}
-      />,
-    )
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-
-    expect(screen.getAllByTestId('custom')).toHaveLength(3)
-    expect(screen.getByText('BRAVO')).toBeInTheDocument()
-  })
-
-  it('shows placeholder when value does not match any option', () => {
-    renderWith(<Select options={options} value="x" onChange={vi.fn()} placeholder="Pick one" />)
-
-    expect(screen.getByRole('button', { name: /pick one/i })).toBeInTheDocument()
-  })
-})

package/src/Select/Select.tsx

@@ -1,156 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { SelectOption, SelectProps } from './Select.types'
-
-export const Select = ({
-  value,
-  onChange,
-  options,
-  groups,
-  placeholder,
-  id,
-  className,
-  menuClassName,
-  renderOption,
-  onOpenChange,
-  'aria-label': ariaLabel,
-}: SelectProps) => {
-  const [open, setOpen] = useState(false)
-  const [highlightedIndex, setHighlightedIndex] = useState(-1)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const changeOpen = useCallback(
-    (next: boolean) => {
-      setOpen(next)
-      onOpenChange?.(next)
-    },
-    [onOpenChange],
-  )
-
-  // Build flat items list with group metadata
-  const { items, groupStartIndices } = useMemo(() => {
-    const flat: SelectOption[] = [...(options ?? [])]
-    const starts: { index: number; label: string }[] = []
-
-    for (const group of groups ?? []) {
-      starts.push({ index: flat.length, label: group.label })
-      flat.push(...group.options)
-    }
-
-    return { items: flat, groupStartIndices: starts }
-  }, [options, groups])
-
-  const selectedOption = items.find(o => o.value === value)
-  const displayText = selectedOption?.label ?? placeholder ?? value
-
-  // Click outside to close
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        changeOpen(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [changeOpen])
-
-  const selectItem = (itemValue: string) => {
-    onChange(itemValue)
-    changeOpen(false)
-    setHighlightedIndex(-1)
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      changeOpen(false)
-      setHighlightedIndex(-1)
-      return
-    }
-
-    if (!open) {
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        changeOpen(true)
-        setHighlightedIndex(0)
-      }
-      return
-    }
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setHighlightedIndex(prev => (prev + 1) % items.length)
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setHighlightedIndex(prev => (prev - 1 + items.length) % items.length)
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      const highlighted = items[highlightedIndex]
-      if (highlighted) {
-        selectItem(highlighted.value)
-      }
-    }
-  }
-
-  const itemClassName = (index: number, itemValue: string) => {
-    const base = 'px-3 py-2.5 cursor-pointer'
-    const highlight = index === highlightedIndex ? 'bg-primary-muted' : 'hover:bg-primary-muted'
-    const selected = itemValue === value ? 'font-medium' : ''
-    return `${base} ${highlight} ${selected}`
-  }
-
-  return (
-    <div className="relative" ref={containerRef} onKeyDown={handleKeyDown}>
-      <button
-        type="button"
-        id={id}
-        className={`flex items-center justify-between gap-2 ${className ?? ''}`}
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        aria-label={ariaLabel}
-        onClick={() => changeOpen(!open)}
-      >
-        <span className="truncate">{displayText}</span>
-        <ChevronDown
-          className={`size-4 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`}
-        />
-      </button>
-
-      {open && (
-        <ul
-          role="listbox"
-          className={`border-border bg-background absolute z-50 mt-1 max-h-60 w-max min-w-full overflow-y-auto rounded-lg border shadow-lg ${menuClassName ?? ''}`}
-        >
-          {items.map((item, index) => {
-            const groupHeader = groupStartIndices.find(g => g.index === index)
-
-            return (
-              <li key={item.value} role="presentation">
-                {groupHeader && (
-                  <div className="text-muted-foreground px-3 pt-2 pb-1 text-xs font-medium uppercase">
-                    {groupHeader.label}
-                  </div>
-                )}
-                <div
-                  role="option"
-                  aria-selected={value === item.value}
-                  className={itemClassName(index, item.value)}
-                  onClick={() => selectItem(item.value)}
-                  onMouseEnter={() => setHighlightedIndex(index)}
-                >
-                  {renderOption
-                    ? renderOption(item, {
-                        highlighted: index === highlightedIndex,
-                        selected: value === item.value,
-                      })
-                    : item.label}
-                </div>
-              </li>
-            )
-          })}
-        </ul>
-      )}
-    </div>
-  )
-}

package/src/Select/Select.types.ts

@@ -1,30 +0,0 @@
-import type { ReactNode } from 'react'
-
-export type SelectOption = {
-  value: string
-  label: string
-}
-
-export type SelectGroup = {
-  label: string
-  options: SelectOption[]
-}
-
-export type SelectOptionState = {
-  highlighted: boolean
-  selected: boolean
-}
-
-export type SelectProps = {
-  value: string
-  onChange: (value: string) => void
-  options?: SelectOption[]
-  groups?: SelectGroup[]
-  placeholder?: string
-  id?: string
-  className?: string
-  menuClassName?: string
-  renderOption?: (option: SelectOption, state: SelectOptionState) => ReactNode
-  onOpenChange?: (open: boolean) => void
-  'aria-label'?: string
-}

package/src/Slider/Slider.test.tsx

@@ -1,29 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { Slider } from './Slider'
-
-afterEach(cleanup)
-
-describe('Slider', () => {
-  it('renders a slider with the correct value', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />)
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuenow', '50')
-  })
-
-  it('calls onCommit when interaction ends', () => {
-    const onCommit = vi.fn()
-    render(
-      <Slider
-        value={50}
-        onChange={() => {}}
-        onCommit={onCommit}
-        min={0}
-        max={100}
-        aria-label="Volume"
-      />,
-    )
-    // Just verify it renders without error — slider drag testing is unreliable in jsdom
-    expect(screen.getByRole('slider')).toBeInTheDocument()
-  })
-})