Utility Functions

import { cn } from 'sunpeak';

function cn(...inputs: ClassValue[]): string

import { cn } from 'sunpeak';

function Card({ active, className }: { active: boolean; className?: string }) {
  return (
    <div className={cn(
      'rounded-lg p-4 border',
      active && 'border-blue-500 bg-blue-50',
      className,
    )}>
      ...
    </div>
  );
}

import { prefersReducedMotion } from 'sunpeak';

function prefersReducedMotion(): boolean

import { prefersReducedMotion } from 'sunpeak';

function AnimatedCard() {
  const style = prefersReducedMotion()
    ? {}
    : { transition: 'transform 0.3s ease' };

  return <div style={style}>...</div>;
}

import { isPrimarilyTouchDevice } from 'sunpeak';

function isPrimarilyTouchDevice(): boolean

import { isPrimarilyTouchDevice } from 'sunpeak';

function InteractiveMap() {
  const touchMode = isPrimarilyTouchDevice();

  return (
    <div onPointerDown={touchMode ? handleTouchStart : handleMouseStart}>
      ...
    </div>
  );
}

import { isHoverAvailable } from 'sunpeak';

function isHoverAvailable(): boolean

import { isHoverAvailable } from 'sunpeak';

function Tooltip({ children, text }: { children: ReactNode; text: string }) {
  if (!isHoverAvailable()) {
    // On touch devices, show tooltip inline instead
    return <>{children}<span className="text-xs ml-1">{text}</span></>;
  }

  return (
    <div className="group relative">
      {children}
      <span className="hidden group-hover:block absolute ...">{text}</span>
    </div>
  );
}