Icon Components

interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
  icon: React.ElementType; // Required
  variant?: "simple" | "light" | "shadow" | "solid" | "outlined";
  tooltip?: string;
  size?: Size; // "xs" | "sm" | "md" | "lg" | "xl"
  color?: Color;
}

import { Icon } from '@tremor/react';
import { UserIcon, BellIcon } from '@heroicons/react/24/outline';

// Basic
<Icon icon={UserIcon} />

// Variants
<Icon icon={BellIcon} variant="simple" />
<Icon icon={BellIcon} variant="light" />
<Icon icon={BellIcon} variant="solid" />
<Icon icon={BellIcon} variant="outlined" />

// Colored
<Icon icon={UserIcon} color="blue" />
<Icon icon={UserIcon} color="emerald" variant="solid" />

// Sizes
<Icon icon={UserIcon} size="xs" />
<Icon icon={UserIcon} size="lg" />

// With tooltip
<Icon icon={BellIcon} tooltip="Notifications" variant="solid" color="blue" />

// In layouts
<Flex alignItems="center" className="gap-2">
  <Icon icon={UserIcon} color="gray" />
  <Text>John Doe</Text>
</Flex>

interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  color?: Color;
  size?: Size;
  icon?: React.ElementType;
  tooltip?: string;
  children?: React.ReactNode;
}

import { Badge, Card, Title, Flex } from '@tremor/react';
import { CheckCircleIcon, ClockIcon, XCircleIcon } from '@heroicons/react/24/outline';

// Basic
<Badge>New</Badge>

// Status badges
<Badge color="emerald">Active</Badge>
<Badge color="amber">Pending</Badge>
<Badge color="red">Inactive</Badge>
<Badge color="blue">In Progress</Badge>

// With icons
<Badge icon={CheckCircleIcon} color="emerald">Completed</Badge>
<Badge icon={ClockIcon} color="amber">Pending</Badge>
<Badge icon={XCircleIcon} color="red">Failed</Badge>

// Sizes
<Badge size="xs">Tiny</Badge>
<Badge size="lg">Large</Badge>

// In cards
<Card>
  <Flex justifyContent="between" alignItems="center">
    <Title>Project Status</Title>
    <Badge icon={CheckCircleIcon} color="emerald">On Track</Badge>
  </Flex>
</Card>

// Multiple badges (tags)
<Flex className="gap-2">
  <Badge color="blue">React</Badge>
  <Badge color="violet">TypeScript</Badge>
  <Badge color="emerald">Tailwind</Badge>
</Flex>

interface BadgeDeltaProps extends React.HTMLAttributes<HTMLSpanElement> {
  deltaType?: "increase" | "moderateIncrease" | "decrease" | "moderateDecrease" | "unchanged";
  isIncreasePositive?: boolean; // default: true
  size?: Size;
  tooltip?: string;
  children?: React.ReactNode; // Delta value text (e.g., "+12%")
}

import { BadgeDelta, Card, Metric, Text, Flex } from '@tremor/react';

// Delta types
<BadgeDelta deltaType="increase">+23.5%</BadgeDelta>
<BadgeDelta deltaType="moderateIncrease">+5.2%</BadgeDelta>
<BadgeDelta deltaType="unchanged">0%</BadgeDelta>
<BadgeDelta deltaType="moderateDecrease">-2.1%</BadgeDelta>
<BadgeDelta deltaType="decrease">-15.8%</BadgeDelta>

// Negative is positive (e.g., cost reduction)
<BadgeDelta deltaType="decrease" isIncreasePositive={false}>-12% costs</BadgeDelta>

// Metric card with delta
<Card>
  <Flex justifyContent="between" alignItems="start">
    <div>
      <Text>Total Revenue</Text>
      <Metric>$45,231</Metric>
    </div>
    <BadgeDelta deltaType="increase">+12.3%</BadgeDelta>
  </Flex>
  <Text className="mt-4" color="gray">Compared to last month</Text>
</Card>

// Sizes
<BadgeDelta deltaType="increase" size="xs">+5%</BadgeDelta>
<BadgeDelta deltaType="increase" size="lg">+5%</BadgeDelta>

// With tooltip
<BadgeDelta
  deltaType="increase"
  tooltip="Increased by $5,420 from last month"
>
  +12.3%
</BadgeDelta>

import type { DeltaType } from '@tremor/react';

function getDeltaType(changePercent: number): DeltaType {
  if (changePercent === 0) return 'unchanged';
  if (changePercent > 0) {
    return changePercent >= 10 ? 'increase' : 'moderateIncrease';
  }
  return changePercent <= -10 ? 'decrease' : 'moderateDecrease';
}

// Usage
const change = 15.5;
<BadgeDelta deltaType={getDeltaType(change)}>
  {change > 0 ? '+' : ''}{change}%
</BadgeDelta>

// Status
<Badge color="emerald">Success/Active/Completed</Badge>
<Badge color="blue">Info/In Progress/Default</Badge>
<Badge color="amber">Warning/Pending/Review</Badge>
<Badge color="red">Error/Failed/Inactive</Badge>
<Badge color="gray">Neutral/Disabled/Draft</Badge>

// Priority
<Badge color="red">High Priority</Badge>
<Badge color="amber">Medium Priority</Badge>
<Badge color="blue">Low Priority</Badge>

// Heroicons (recommended)
import { UserIcon } from '@heroicons/react/24/outline';
<Icon icon={UserIcon} />

// Lucide React
import { User } from 'lucide-react';
<Icon icon={User} />

// Custom SVG
function CustomIcon(props: React.SVGProps<SVGSVGElement>) {
  return <svg {...props} viewBox="0 0 24 24"><path d="..." /></svg>;
}
<Icon icon={CustomIcon} />

// Decorative icons
<Icon icon={UserIcon} aria-hidden="true" />

// Semantic icons
<Icon
  icon={BellIcon}
  tooltip="3 new notifications"
  role="img"
  aria-label="3 new notifications"
/>

// Badges with screen reader text
<Badge color="emerald">
  <span className="sr-only">Status: </span>
  Active
</Badge>