@carbonid1/design-system 5.1.0 → 5.2.1

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+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';
+export { Kbd, kbdVariants } from './Kbd/Kbd';
+export type { KbdProps } from './Kbd/Kbd.types';
+export { ProgressRing } from './ProgressRing/ProgressRing';
+export { Slider } from './Slider/Slider';
+export { ContextMenu } from './ContextMenu/ContextMenu';
+export { Select } from './Select/Select';
+export type { SelectOption, SelectGroup, SelectOptionState, SelectProps, } from './Select/Select.types';
+export { Tooltip } from './Tooltip/Tooltip';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider';
+export { ThemeCycler } from './ThemeCycler/ThemeCycler';
+export { Toaster } from './Toaster/Toaster';
+export { toast } from 'sonner';
+export { useTheme } from 'next-themes';
+export { cn } from './helpers/cn/cn';
+export { getModKey } from './helpers/getModKey/getModKey';
+export { cva } from 'class-variance-authority';
+export type { VariantProps } from 'class-variance-authority';

package/dist/index.js

@@ -0,0 +1,16 @@
+export { Badge, badgeVariants } from './Badge/Badge';
+export { Button, buttonVariants } from './Button/Button';
+export { Kbd, kbdVariants } from './Kbd/Kbd';
+export { ProgressRing } from './ProgressRing/ProgressRing';
+export { Slider } from './Slider/Slider';
+export { ContextMenu } from './ContextMenu/ContextMenu';
+export { Select } from './Select/Select';
+export { Tooltip } from './Tooltip/Tooltip';
+export { ThemeProvider } from './ThemeProvider/ThemeProvider';
+export { ThemeCycler } from './ThemeCycler/ThemeCycler';
+export { Toaster } from './Toaster/Toaster';
+export { toast } from 'sonner';
+export { useTheme } from 'next-themes';
+export { cn } from './helpers/cn/cn';
+export { getModKey } from './helpers/getModKey/getModKey';
+export { cva } from 'class-variance-authority';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",
@@ -14,13 +14,16 @@
     "**/*.css"
   ],
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
     "./themes/reader": "./themes/reader.css",
     "./themes/dashboard": "./themes/dashboard.css",
     "./postcss": "./postcss.mjs"
   },
   "files": [
-    "src",
+    "dist",
     "themes",
     "postcss.mjs",
     "skills",
@@ -28,43 +31,26 @@
   ],
   "dependencies": {
     "@tailwindcss/postcss": "^4.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
+    "react-hotkeys-hook": "^5.2.4",
     "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.0"
   },
   "peerDependencies": {
-    "@base-ui/react": "^1.0.0-alpha",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "lucide-react": ">=0.400.0",
+    "@base-ui/react": "^1.4.0",
     "postcss": "^8.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "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
-    }
+    "react-dom": "^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@base-ui/react": "^1.4.0",
+    "@base-ui/react": "^1.4.1",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-themes": "^10.3.5",
     "@storybook/addon-vitest": "^10.3.5",
@@ -76,24 +62,20 @@
     "@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",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "sonner": "^2.0.7",
     "storybook": "^10.3.5",
-    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
     "vite": "^8.0.8",
     "vitest": "^4.1.4",
     "@carbonid1/tsconfig": "0.3.0"
   },
   "scripts": {
+    "build": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest --run",

package/themes/dashboard.css

@@ -18,8 +18,10 @@
 @import 'tailwindcss';
 
 /* Scan design-system components so consumers pick up classes used inside
- * Button/Kbd/etc. — Tailwind v4 skips node_modules by default. */
-@source "../src/**/*.{ts,tsx}";
+ * Button/Kbd/etc. — Tailwind v4 skips node_modules by default. Point at the
+ * shipped `dist/` (the only source that lands in installed `node_modules`),
+ * not `src/` which isn't in the published `files`. */
+@source "../dist/**/*.js";
 
 @custom-variant dark (&:is(.dark *));
 

package/themes/reader.css

@@ -40,8 +40,10 @@
 @import 'tailwindcss';
 
 /* Scan design-system components so consumers pick up classes used inside
- * Button/Kbd/etc. — Tailwind v4 skips node_modules by default. */
-@source "../src/**/*.{ts,tsx}";
+ * Button/Kbd/etc. — Tailwind v4 skips node_modules by default. Point at the
+ * shipped `dist/` (the only source that lands in installed `node_modules`),
+ * not `src/` which isn't in the published `files`. */
+@source "../dist/**/*.js";
 
 @custom-variant dark (&:is(.dark *));
 

package/src/Badge/Badge.tsx

@@ -1,53 +0,0 @@
-'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/Button/Button.tsx

@@ -1,67 +0,0 @@
-'use client'
-
-import { cn } from '../helpers/cn/cn'
-import { Button as ButtonPrimitive } from '@base-ui/react/button'
-import { cva } from 'class-variance-authority'
-import { Loader2 } from 'lucide-react'
-import type { ButtonProps } from './Button.types'
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-hidden select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        ghost: 'hover:bg-accent aria-expanded:bg-accent dark:hover:bg-accent/50',
-        primary: 'bg-primary text-primary-foreground font-medium hover:bg-primary/90',
-        outline:
-          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
-        destructive:
-          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
-        attention: 'text-attention-foreground hover:bg-attention-muted',
-        subtle: 'text-muted-foreground hover:text-primary',
-        danger: 'text-muted-foreground hover:text-destructive',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        small: 'h-7 gap-1 px-2.5 text-[0.8rem]',
-        default: 'h-8 gap-1.5 px-2.5',
-        large: 'h-9 gap-1.5 px-3',
-        icon: 'size-8 rounded-full',
-        smallIcon: 'size-6 rounded-full',
-        largeIcon: 'size-12 rounded-full',
-      },
-    },
-    defaultVariants: {
-      variant: 'ghost',
-      size: 'default',
-    },
-  },
-)
-
-const Button = ({
-  className,
-  variant,
-  size,
-  fullWidth,
-  loading,
-  disabled,
-  children,
-  ...props
-}: ButtonProps) => (
-  <ButtonPrimitive
-    data-slot="button"
-    className={cn(
-      buttonVariants({ variant, size }),
-      fullWidth && 'w-full justify-start',
-      className,
-    )}
-    disabled={disabled ?? loading}
-    aria-busy={loading ?? undefined}
-    {...props}
-  >
-    {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
-    {children}
-  </ButtonPrimitive>
-)
-
-export { Button, buttonVariants }

package/src/Button/Button.types.ts

@@ -1,11 +0,0 @@
-import type { Button as ButtonPrimitive } from '@base-ui/react/button'
-import type { VariantProps } from 'class-variance-authority'
-import type { buttonVariants } from './Button'
-
-type ButtonProps = ButtonPrimitive.Props &
-  VariantProps<typeof buttonVariants> & {
-    fullWidth?: boolean
-    loading?: boolean
-  }
-
-export type { ButtonProps }

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