Skip to main content
sunpeak API

​
cn

Merges class names using clsx and tailwind-merge. Handles conditional classes, arrays, and deduplicates conflicting Tailwind utilities.

​
Import

import { cn } from 'sunpeak';

​
Signature

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

​
Usage

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

​
prefersReducedMotion

Returns true if the user has enabled the “reduce motion” accessibility setting.

​
Import

import { prefersReducedMotion } from 'sunpeak';

​
Signature

function prefersReducedMotion(): boolean

​
Usage

import { prefersReducedMotion } from 'sunpeak';

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

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

​
isPrimarilyTouchDevice

Returns true if the primary input mechanism is coarse (touch). Checks the (pointer: coarse) media query.

​
Import

import { isPrimarilyTouchDevice } from 'sunpeak';

​
Signature

function isPrimarilyTouchDevice(): boolean

​
Usage

import { isPrimarilyTouchDevice } from 'sunpeak';

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

  return (
    <div onPointerDown={touchMode ? handleTouchStart : handleMouseStart}>
      ...
    </div>
  );
}
For host-reported device capabilities, use useDeviceCapabilities which reads the touch and hover values from the host context.

​
isHoverAvailable

Returns true if the primary input mechanism supports hover. Checks the (hover: hover) media query.

​
Import

import { isHoverAvailable } from 'sunpeak';

​
Signature

function isHoverAvailable(): boolean

​
Usage

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