Icons

interface IconHandle {
  startAnimation: () => void;
  stopAnimation: () => void;
}

interface IconProps extends HTMLAttributes<HTMLDivElement> {
  size?: number;   // default 28
}

bunx shadcn@latest add @9am/icon-box @9am/icon-truck

import { BoxIcon } from "@/components/ui/box";

<BoxIcon size={24} className="text-primary" />

import { useRef } from "react";
import { BoxIcon } from "@/components/ui/box";

type IconHandle = { startAnimation: () => void; stopAnimation: () => void };

function StockTab() {
  const iconRef = useRef<IconHandle>(null);

  return (
    <TabsTrigger
      value="Stock"
      onMouseEnter={() => iconRef.current?.startAnimation()}
      onMouseLeave={() => iconRef.current?.stopAnimation()}
    >
      <BoxIcon ref={iconRef} size={24} />
      Stock
    </TabsTrigger>
  );
}

import { ThemeToggleIcon } from "@/components/ui/theme-toggle";
import { useTheme } from "@/hooks/useTheme";

const { theme, toggleTheme } = useTheme();

<Button variant="default2" className="h-9 px-3" onClick={toggleTheme}>
  <ThemeToggleIcon theme={theme} size={16} />
</Button>

const iconColor = (tab) => {
  if (currentTab === tab) return theme === "dark" ? "#F6E371" : "var(--color-primary)";
  if (hoveredTab === tab) return theme === "dark" ? "#ffffff" : "#18181b";
  return "#6b7280";
};

<BoxIcon size={24} style={{ color: iconColor("Stock") }} />