@carbonid1/design-system 4.3.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "4.3.0",
+  "version": "5.0.1",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",
@@ -75,11 +75,13 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "jsdom": "^29.0.2",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
+    "playwright": "^1.59.1",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-hotkeys-hook": "^5.2.4",
@@ -96,6 +98,8 @@
     "build-storybook": "storybook build",
     "test": "vitest --run",
     "test:watch": "vitest",
+    "test:storybook": "vitest --project=storybook",
+    "test:run:storybook": "vitest run --project=storybook",
     "postinstall": "node scripts/install-skill.mjs"
   }
 }

package/src/Badge/Badge.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { cn } from '../helpers/cn/cn'
+import { cva } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import type { BadgeProps } from './Badge.types'
+
+const badgeVariants = cva(
+  'inline-flex max-w-full min-w-0 items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted text-muted-foreground',
+        primary: 'bg-primary-border/30 text-primary',
+        success: 'bg-success/15 text-success-foreground',
+        attention: 'bg-attention-muted text-attention-foreground',
+        destructive: 'bg-destructive/15 text-destructive',
+        highlight: 'bg-highlight-muted text-highlight-foreground',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  },
+)
+
+const Badge = ({
+  className,
+  variant,
+  onRemove,
+  removeLabel,
+  children,
+  ...props
+}: BadgeProps) => {
+  const resolvedRemoveLabel =
+    removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove')
+
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props}>
+      {onRemove ? <span className="truncate">{children}</span> : children}
+      {onRemove && (
+        <button
+          type="button"
+          aria-label={resolvedRemoveLabel}
+          onClick={onRemove}
+          className="-me-0.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full opacity-70 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-1 focus-visible:ring-offset-transparent focus-visible:outline-none"
+        >
+          <X className="size-3" aria-hidden="true" />
+        </button>
+      )}
+    </span>
+  )
+}
+
+export { Badge, badgeVariants }

package/src/Badge/Badge.types.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react'
+import type { VariantProps } from 'class-variance-authority'
+import type { badgeVariants } from './Badge'
+
+/**
+ * `variant` communicates emphasis, not meaning — always pair it with
+ * descriptive text content so the badge isn't relying on color alone.
+ */
+type BadgeProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof badgeVariants> & {
+    /** When set, renders an inline dismiss button after the label. */
+    onRemove?: () => void
+    /** A11y label for the dismiss button. Defaults to `Remove ${children}` when children is a string, otherwise `Remove`. */
+    removeLabel?: string
+  }
+
+export type { BadgeProps }

package/src/Tooltip/Tooltip.tsx

@@ -94,7 +94,7 @@ export const Tooltip = ({
         <div
           role="tooltip"
           style={maxWidth ? { maxWidth } : undefined}
-          className={`absolute left-1/2 z-50 -translate-x-1/2 ${maxWidth ? 'whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`}
+          className={`absolute left-1/2 z-50 -translate-x-1/2 ${maxWidth ? 'w-max whitespace-normal' : 'whitespace-nowrap'} bg-foreground text-background pointer-events-none flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-lg ${positionClasses}`}
         >
           {label}
           {shortcut && (

package/src/index.ts

@@ -1,3 +1,6 @@
+export { Badge, badgeVariants } from './Badge/Badge'
+export type { BadgeProps } from './Badge/Badge.types'
+
 export { Button, buttonVariants } from './Button/Button'
 export type { ButtonProps } from './Button/Button.types'
 
@@ -8,8 +11,6 @@ export { ProgressRing } from './ProgressRing/ProgressRing'
 
 export { Slider } from './Slider/Slider'
 
-export { Switch } from './Switch/Switch'
-
 export { ContextMenu } from './ContextMenu/ContextMenu'
 
 export { Select } from './Select/Select'

package/src/ProgressRing/ProgressRing.test.tsx

@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import { ProgressRing } from './ProgressRing'
-import { CIRCUMFERENCE } from './ProgressRing.consts'
-
-describe('ProgressRing', () => {
-  it('renders zero dashoffset at 0% progress', () => {
-    render(<ProgressRing progress={0} colorClass="text-primary" label="Empty" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    const offset = Number(circle.getAttribute('stroke-dashoffset'))
-    expect(offset).toBeCloseTo(CIRCUMFERENCE, 1)
-  })
-
-  it('renders correct dashoffset at 50% progress', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="Half" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    const offset = Number(circle.getAttribute('stroke-dashoffset'))
-    expect(offset).toBeCloseTo(CIRCUMFERENCE * 0.5, 1)
-  })
-
-  it('renders zero dashoffset at 100% progress', () => {
-    render(<ProgressRing progress={1} colorClass="text-success" label="Full" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    const offset = Number(circle.getAttribute('stroke-dashoffset'))
-    expect(offset).toBeCloseTo(0, 1)
-  })
-
-  it('applies colorClass to fill circle', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-success" label="Test" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    expect(circle.classList.toString()).toContain('text-success')
-  })
-
-  it('applies pulse animation when animate is true', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="Pulsing" animate />)
-    const svg = screen.getByRole('img', { hidden: true })
-    expect(svg.classList.toString()).toContain('animate-buffer-pulse')
-  })
-
-  it('does not apply pulse animation when animate is false', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="Idle" />)
-    const svg = screen.getByRole('img', { hidden: true })
-    expect(svg.classList.toString()).not.toContain('animate-buffer-pulse')
-  })
-
-  it('sets aria-label from label prop', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="42 paragraphs ready" />)
-    const svg = screen.getByRole('img', { hidden: true })
-    expect(svg.getAttribute('aria-label')).toBe('42 paragraphs ready')
-  })
-})

package/src/Switch/Switch.test.tsx

@@ -1,31 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { Switch } from './Switch'
-
-afterEach(cleanup)
-
-describe('Switch', () => {
-  it('renders as a switch with the correct checked state', () => {
-    render(<Switch checked={true} onChange={() => {}} aria-label="Toggle" />)
-    expect(screen.getByRole('switch')).toBeChecked()
-  })
-
-  it('calls onChange when clicked', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(<Switch checked={false} onChange={onChange} aria-label="Toggle" />)
-
-    await user.click(screen.getByRole('switch'))
-    expect(onChange).toHaveBeenCalledWith(true)
-  })
-
-  it('does not call onChange when disabled', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(<Switch checked={false} onChange={onChange} disabled aria-label="Toggle" />)
-
-    await user.click(screen.getByRole('switch'))
-    expect(onChange).not.toHaveBeenCalled()
-  })
-})

package/src/Switch/Switch.tsx

@@ -1,41 +0,0 @@
-'use client'
-
-import { cn } from '../helpers/cn/cn'
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
-
-type SwitchProps = {
-  checked: boolean
-  onChange: (checked: boolean) => void
-  disabled?: boolean
-  'aria-label'?: string
-  className?: string
-}
-
-export const Switch = ({
-  checked,
-  onChange,
-  disabled,
-  'aria-label': ariaLabel,
-  className,
-}: SwitchProps) => (
-  <SwitchPrimitive.Root
-    checked={checked}
-    onCheckedChange={checked => onChange(checked)}
-    disabled={disabled}
-    aria-label={ariaLabel}
-    className={cn(
-      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors',
-      'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:outline-hidden',
-      checked ? 'bg-primary' : 'bg-input',
-      disabled && 'pointer-events-none opacity-50',
-      className,
-    )}
-  >
-    <SwitchPrimitive.Thumb
-      className={cn(
-        'bg-background pointer-events-none block size-[18px] rounded-full shadow-sm transition-transform',
-        checked ? 'translate-x-5.5' : 'translate-x-[3px]',
-      )}
-    />
-  </SwitchPrimitive.Root>
-)