@carbonid1/design-system 4.2.0 → 5.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Andrew Korin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",
@@ -43,6 +43,23 @@
     "react-hotkeys-hook": "^5.0.0",
     "tailwind-merge": "^3.0.0"
   },
+  "peerDependenciesMeta": {
+    "@base-ui/react": {
+      "optional": true
+    },
+    "class-variance-authority": {
+      "optional": true
+    },
+    "clsx": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "tailwind-merge": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -72,7 +89,7 @@
     "tailwindcss": "^4.2.2",
     "vite": "^8.0.8",
     "vitest": "^4.1.4",
-    "@carbonid1/tsconfig": "0.2.1"
+    "@carbonid1/tsconfig": "0.3.0"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",

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/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>
-)