@carbonid1/design-system 5.0.3 → 5.2.0

package/src/Slider/Slider.tsx

@@ -1,53 +0,0 @@
-'use client'
-
-import { cn } from '../helpers/cn/cn'
-import { Slider as SliderPrimitive } from '@base-ui/react/slider'
-
-type SliderProps = {
-  value: number
-  onChange: (value: number) => void
-  onCommit?: (value: number) => void
-  min: number
-  max: number
-  step?: number
-  disabled?: boolean
-  'aria-label'?: string
-  className?: string
-}
-
-export const Slider = ({
-  value,
-  onChange,
-  onCommit,
-  min,
-  max,
-  step = 1,
-  disabled,
-  'aria-label': ariaLabel,
-  className,
-}: SliderProps) => (
-  <SliderPrimitive.Root
-    value={value}
-    onValueChange={v => onChange(v as number)}
-    onValueCommitted={v => onCommit?.(v as number)}
-    min={min}
-    max={max}
-    step={step}
-    disabled={disabled}
-    aria-label={ariaLabel}
-    className={cn('relative flex w-full touch-none items-center py-2', className)}
-  >
-    <SliderPrimitive.Control className="relative flex h-1.5 w-full items-center">
-      <SliderPrimitive.Track className="bg-input h-full w-full overflow-hidden rounded-full">
-        <SliderPrimitive.Indicator className="bg-primary h-full rounded-full" />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb
-        className={cn(
-          'bg-primary border-background block size-4 rounded-full border-2 shadow-sm',
-          'focus-visible:ring-ring/50 focus-visible:ring-3 focus-visible:outline-hidden',
-          disabled && 'pointer-events-none opacity-50',
-        )}
-      />
-    </SliderPrimitive.Control>
-  </SliderPrimitive.Root>
-)

package/src/ThemeCycler/ThemeCycler.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { useCallback, useSyncExternalStore } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
-import { toast } from 'sonner'
-
-const THEME_CYCLE = ['system', 'light', 'dark'] as const
-
-const THEME_LABELS: Record<string, string> = {
-  system: 'System',
-  light: 'Light',
-  dark: 'Dark',
-}
-
-const emptySubscribe = () => () => {}
-const getSnapshot = () => true
-const getServerSnapshot = () => false
-
-export const ThemeCycler = () => {
-  const { theme, setTheme } = useTheme()
-  const mounted = useSyncExternalStore(emptySubscribe, getSnapshot, getServerSnapshot)
-
-  const cycleTheme = useCallback(() => {
-    if (!mounted) return
-    const current = theme ?? 'system'
-    const currentIndex = THEME_CYCLE.indexOf(current as (typeof THEME_CYCLE)[number])
-    const nextIndex = (currentIndex + 1) % THEME_CYCLE.length
-    const next = THEME_CYCLE[nextIndex] ?? 'system'
-    setTheme(next)
-    toast(`Theme: ${THEME_LABELS[next]}`, { duration: 2000 })
-  }, [theme, setTheme, mounted])
-
-  useHotkeys('shift+t', cycleTheme, { preventDefault: true })
-
-  return null
-}

package/src/ThemeProvider/ThemeProvider.tsx

@@ -1,18 +0,0 @@
-'use client'
-
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-
-type Props = {
-  children: React.ReactNode
-}
-
-export const ThemeProvider = ({ children }: Props) => (
-  <NextThemesProvider
-    attribute="class"
-    defaultTheme="system"
-    enableSystem
-    disableTransitionOnChange
-  >
-    {children}
-  </NextThemesProvider>
-)

package/src/Toaster/Toaster.tsx

@@ -1,7 +0,0 @@
-'use client'
-
-import { Toaster as Sonner, type ToasterProps } from 'sonner'
-
-export const Toaster = (props: ToasterProps) => (
-  <Sonner theme="system" className="toaster group" position="bottom-right" {...props} />
-)

package/src/Tooltip/Tooltip.tsx

@@ -1,107 +0,0 @@
-'use client'
-
-import { Kbd } from '../Kbd/Kbd'
-import { type ReactElement, cloneElement, useCallback, useEffect, useRef, useState } from 'react'
-
-type TooltipProps = {
-  label: string
-  shortcut?: string | string[]
-  position?: 'top' | 'bottom'
-  delay?: number
-  maxWidth?: number
-  disabled?: boolean
-  className?: string
-  children: ReactElement<{ 'aria-label'?: string }>
-}
-
-const DEFAULT_DELAY = 200
-
-export const Tooltip = ({
-  label,
-  shortcut,
-  position = 'top',
-  delay = DEFAULT_DELAY,
-  maxWidth,
-  disabled,
-  className,
-  children,
-}: TooltipProps) => {
-  const [visible, setVisible] = useState(false)
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-
-  const show = useCallback(() => {
-    if (disabled) return
-    timeoutRef.current = setTimeout(() => setVisible(true), delay)
-  }, [disabled, delay])
-
-  const hide = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-      timeoutRef.current = null
-    }
-    setVisible(false)
-  }, [])
-
-  useEffect(() => {
-    if (disabled && timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-      timeoutRef.current = null
-    }
-  }, [disabled])
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!visible) return
-    let lastCheck = 0
-    const handlePointerMove = (e: PointerEvent) => {
-      if (e.timeStamp - lastCheck < 100) return
-      lastCheck = e.timeStamp
-      const rect = wrapperRef.current?.getBoundingClientRect()
-      if (!rect) return
-      const inside =
-        e.clientX >= rect.left &&
-        e.clientX <= rect.right &&
-        e.clientY >= rect.top &&
-        e.clientY <= rect.bottom
-      if (!inside) hide()
-    }
-    document.addEventListener('pointermove', handlePointerMove, { passive: true })
-    return () => document.removeEventListener('pointermove', handlePointerMove)
-  }, [visible, hide])
-
-  const positionClasses = position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'
-
-  return (
-    <div
-      ref={wrapperRef}
-      className={`relative inline-flex${className ? ` ${className}` : ''}`}
-      onMouseEnter={show}
-      onMouseLeave={hide}
-      onPointerDown={hide}
-      onFocus={show}
-      onBlur={hide}
-    >
-      {cloneElement(children, {
-        'aria-label': children.props['aria-label'] ?? label,
-      })}
-      {visible && !disabled && (
-        <div
-          role="tooltip"
-          style={maxWidth ? { maxWidth } : undefined}
-          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 && (
-            <Kbd keys={shortcut} size="sm" className="bg-background/15 border-transparent" />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/helpers/cn/cn.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/helpers/getModKey/getModKey.test.ts

@@ -1,23 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { getModKey } from './getModKey'
-
-describe('getModKey', () => {
-  afterEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('returns "Cmd" on Mac', () => {
-    vi.stubGlobal('navigator', { userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)' })
-    expect(getModKey()).toBe('Cmd')
-  })
-
-  it('returns "Ctrl" on Windows', () => {
-    vi.stubGlobal('navigator', { userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)' })
-    expect(getModKey()).toBe('Ctrl')
-  })
-
-  it('returns "Ctrl" when navigator is undefined', () => {
-    vi.stubGlobal('navigator', undefined)
-    expect(getModKey()).toBe('Ctrl')
-  })
-})

package/src/helpers/getModKey/getModKey.ts

@@ -1,2 +0,0 @@
-export const getModKey = (): string =>
-  typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? 'Cmd' : 'Ctrl'

package/src/index.ts

@@ -1,36 +0,0 @@
-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'