From 2198aacbb31e24e620bb51737c219c255b459f39 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Sat, 22 Feb 2025 14:01:55 -0700
Subject: [PATCH] app button take 1

---
 .../ui/buttons/AppButton.stories.tsx          | 57 +++++++++++++++++++
 web/src/components/ui/buttons/AppButton.tsx   | 42 +++++++++++++-
 web/src/styles/tailwind.css                   |  8 +--
 3 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/ui/buttons/AppButton.stories.tsx

diff --git a/web/src/components/ui/buttons/AppButton.stories.tsx b/web/src/components/ui/buttons/AppButton.stories.tsx
new file mode 100644
index 000000000..00e0105ca
--- /dev/null
+++ b/web/src/components/ui/buttons/AppButton.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppButton } from './AppButton';
+
+const meta: Meta<typeof AppButton> = {
+  title: 'Base/AppButton',
+  component: AppButton,
+  tags: ['autodocs'],
+  args: {
+    children: 'Button'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof AppButton>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    size: 'default'
+  }
+};
+
+export const Black: Story = {
+  args: {
+    variant: 'black',
+    size: 'default'
+  }
+};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    size: 'default'
+  }
+};
+
+export const Tall: Story = {
+  args: {
+    variant: 'default',
+    size: 'tall'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: true
+  }
+};
+
+export const AsChild: Story = {
+  args: {
+    asChild: true,
+    children: <a href="/">Link Button</a>
+  }
+};
diff --git a/web/src/components/ui/buttons/AppButton.tsx b/web/src/components/ui/buttons/AppButton.tsx
index c2ce1d1d4..5f79914c5 100644
--- a/web/src/components/ui/buttons/AppButton.tsx
+++ b/web/src/components/ui/buttons/AppButton.tsx
@@ -1,4 +1,44 @@
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../';
+import { cn } from '@/lib/classMerge';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed px-2.5 py-1.5',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white text-gray-900 border  hover:bg-item-hover',
+        black: 'bg-black text-white hover:bg-gray-900',
+        primary: 'bg-blue-600 text-white hover:bg-blue-700'
+      },
+      size: {
+        default: 'h-6',
+        tall: 'h-8'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const AppButton = 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} />
+    );
+  }
+);
+
+AppButton.displayName = 'AppButton';
+
+export { AppButton, buttonVariants };
diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css
index 9ae0a90b8..e27f22943 100644
--- a/web/src/styles/tailwind.css
+++ b/web/src/styles/tailwind.css
@@ -30,10 +30,10 @@
   --text-4xl--line-height: 1;
 
   /* radius */
-  --radius: 0.6rem;
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
+  --radius: 6px;
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) - 1px);
+  --radius-lg: calc(var(--radius) + 2px);
   --radius-xl: calc(var(--radius) + 4px);
 
   /* base color */