Initial commit

src/components/ds/IconButton.jsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+/**
+ * IconButton — a square Button carrying only an icon.
+ *
+ * It delegates entirely to Button so the two can never diverge, and requires a
+ * `label`: an icon-only control with no accessible name is a bug, so the API
+ * makes it impossible to omit. The label doubles as the tooltip.
+ */
+export const IconButton = React.forwardRef(
+  ({ icon: Icon, label, tooltip = true, size = 'default', side = 'top', ...props }, ref) => {
+    const sizeMap = {
+      xs: 'icon-xs',
+      sm: 'icon-sm',
+      default: 'icon',
+      lg: 'icon-lg',
+    };
+
+    const button = (
+      <Button ref={ref} size={sizeMap[size] || 'icon'} aria-label={label} {...props}>
+        <Icon aria-hidden="true" />
+      </Button>
+    );
+
+    if (!tooltip) return button;
+
+    return (
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent side={side}>{label}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
+IconButton.displayName = 'IconButton';