add radix icons and heroicons

.storybook/main.ts

@@ -31,6 +31,8 @@ const config: StorybookConfig = {
       resolve: {
         alias: [
           { find: /^@\/components\/(.*)/, replacement: path.resolve(__dirname, "../lib/components/$1") },
+          { find: /^@\/utils\/(.*)/, replacement: path.resolve(__dirname, "../lib/utils/$1") },
+          { find: /^@\/ui\/(.*)/, replacement: path.resolve(__dirname, "../lib/components/ui/$1") },
           { find: /^@\/assets\/(.*)/, replacement: path.resolve(__dirname, "../lib/assets/$1") }
         ] 
       }

components.json

@@ -12,7 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "lib/utils/utils",
+    "utils": "@/utils/utils",
     "ui": "@/components/ui"
   }
 }

lib/components/button/Button.tsx

@@ -1,59 +1,48 @@
-import { twMerge } from "tailwind-merge";
-import {
-  primary as primaryStyles,
-  secondary as secondaryStyles,
-} from "./Button.styles";
-
+import { Button as ShadcnButton } from "@/ui/button";
 // import { primary as primaryStyles, secondary as secondaryStyles } from "@/components/button/Button.styles";
 
 export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
    */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
   /**
    * How large should the button be?
    */
-  size?: "small" | "medium" | "large";
+  size?: "sm" | "default" | "lg" | "icon";
   /**
-   * Button contents
+   * Button contents. Can be a string or a React node (e.g. an icon)
    */
-  label: string;
+  label: string | React.ReactNode;
   /**
    * Optional click handler
    */
   onClick?: () => void;
+
+  /**
+   * Optional tailwindcss classes
+   */
+  className?: string;
 }
 
 /**
- * Primary UI component for user interaction
+ * Button component
  */
 export const Button = ({
-  primary = false,
-  size = "medium",
+  variant = "default",
+  size = "default",
   label,
   ...props
 }: ButtonProps) => {
-  const classes = [];
-  const mode = primary ? primaryStyles : secondaryStyles;
-  classes.push(mode);
-  if (size === "small") {
-    classes.push("text-sm");
-  }
-  if (size === "medium") {
-    classes.push("text-base");
-  }
-  if (size === "large") {
-    classes.push("text-xl");
-  }
-
   return (
-    <button type="button" className={twMerge(classes)} {...props}>
-      {primary ? "Primary" : "Secondary"} {label}: {size}
-    </button>
+    <ShadcnButton variant={variant} size={size} {...props}>
+      {label}
+    </ShadcnButton>
   );
 };

lib/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/utils/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive:
+          "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary:
+          "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost:
+          "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

lib/tailwind/config.ts

@@ -8,50 +8,36 @@ const theme = {
   extend: {
     colors: {
       brand: {
-        100: "#E1F5FE",
-        200: "#B3E5FC",
-        300: "#81D4FA",
-        400: "#4FC3F7",
-        500: "#29B6F6",
-        600: "#03A9F4",
-        700: "#039BE5",
-        800: "#0288D1",
-        900: "#01579B",
+        100: "#e0f2fe",
+        200: "#bae6fd",
+        300: "#7dd3fc",
+        400: "#38bdf8",
+        500: "#0ea5e9",
+        600: "#0284c7",
+        700: "#0369a1",
+        800: "#075985",
+        900: "#0c4a6e",
+        950: "#082f49",
       },
       accent: {
-        100: "#FF80AB",
-        200: "#FF4081",
-        300: "#F50057",
-        400: "#C51162",
-        500: "#880E4F",
-        600: "#AD1457",
-        700: "#C2185B",
-        800: "#D81B60",
-        900: "#E91E63",
-      },
-      text: {
-        primary: "#FFF",
+        primary: "#f8fafc",
         secondary: "#757575",
-        disabled: "#BDBDBD",
-        hint: "#9E9E9E",
-        inverted: "#000000", // Changed from white to black
-      },
-      supporting: {
-        success: "#4CAF50", // Green
-        error: "#F44336", // Red
-        warning: "#FFC107", // Yellow
-        info: "#2196F3", // Blue
+        inverted: "#000000",
+        success: "#065f46", // Green
+        error: "#991b1b", // Red
+        warning: "#ca8a04", // Yellow
+        info: "#075985", // Blue
       },
       neutral: {
-        100: "#F5F5F5",
-        200: "#EEEEEE",
-        300: "#E0E0E0",
-        400: "#BDBDBD",
-        500: "#9E9E9E",
-        600: "#757575",
-        700: "#616161",
-        800: "#424242",
-        900: "#212121",
+        100: "#f1f5f9",
+        200: "#e2e8f0",
+        300: "#cbd5e1",
+        400: "#94a3b8",
+        500: "#64748b",
+        600: "#475569",
+        700: "#334155",
+        800: "#1e293b",
+        900: "#0f172a",
       },
     },
   },

package.json

@@ -92,6 +92,9 @@
     "vitest": "^1.2.2"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.372.0",