From e2455c26be5aa2cad30825ebd6d557b4f06c5d70 Mon Sep 17 00:00:00 2001
From: Brian Richter <brian@aviary.tech>
Date: Thu, 30 Jan 2025 22:52:12 -0800
Subject: [PATCH] feat(c): update some, add badge

---
 src/components/badge/Badge.tsx          | 12 ++--
 src/components/table/Table.tsx          |  4 +-
 src/docs/App.tsx                        |  3 +
 src/docs/components/Navigation.tsx      |  3 +-
 src/docs/pages/components/BadgePage.tsx | 89 +++++++++++++++++++++++++
 src/docs/pages/components/TablePage.tsx | 19 +++---
 6 files changed, 112 insertions(+), 18 deletions(-)
 create mode 100644 src/docs/pages/components/BadgePage.tsx

diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 2958458..2a44884 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -7,12 +7,12 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100",
-        secondary: "bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-100",
-        success: "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300",
-        warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300",
-        destructive: "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300",
-        outline: "border border-gray-200 dark:border-gray-700",
+        default: "bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-100",
+        secondary: "bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-100",
+        success: "bg-green-200 text-green-700 dark:bg-green-500/20 dark:text-green-300",
+        warning: "bg-yellow-200 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-300",
+        destructive: "bg-red-200 text-red-700 dark:bg-red-500/20 dark:text-red-300",
+        outline: "border-2 border-gray-400 text-gray-700 dark:border-gray-600 dark:text-gray-200",
       },
     },
     defaultVariants: {
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index 007aa6a..d0db5a5 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -42,7 +42,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b border-gray-700 transition-colors hover:bg-gray-800/50",
+      "border-b transition-colors hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800",
       className
     )}
     {...props}
@@ -57,7 +57,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-gray-400 [&:has([role=checkbox])]:pr-0",
+      "h-12 px-4 text-left align-middle font-medium text-gray-500 dark:text-gray-400 [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}
diff --git a/src/docs/App.tsx b/src/docs/App.tsx
index 89f65e0..87bfd91 100644
--- a/src/docs/App.tsx
+++ b/src/docs/App.tsx
@@ -32,6 +32,7 @@ import { CodeEditorPage } from "./pages/components/CodeEditorPage";
 import { FeaturesPage } from "./pages/FeaturesPage";
 import { Toaster } from 'react-hot-toast';
 import { SchemaEditorPage } from "./pages/features/SchemaEditorPage";
+import { BadgePage } from "./pages/components/BadgePage";
 
 export const App = () => {
   const [currentPage, setCurrentPage] = React.useState(() => {
@@ -118,6 +119,8 @@ export const App = () => {
         return <CodeEditorPage />;
       case "schema-editor":
         return <SchemaEditorPage />;
+      case "badge":
+        return <BadgePage />;
       default:
         return <GettingStartedPage />;
     }
diff --git a/src/docs/components/Navigation.tsx b/src/docs/components/Navigation.tsx
index c27d28b..95b5234 100644
--- a/src/docs/components/Navigation.tsx
+++ b/src/docs/components/Navigation.tsx
@@ -51,7 +51,8 @@ export const Navigation: React.FC<NavigationProps> = ({ currentPage, onNavigate
         { id: "table", label: "Table" },
         { id: "tooltip", label: "Tooltip" },
         { id: "accordion", label: "Accordion" },
-        { id: "code-editor", label: "Code Editor" }
+        { id: "code-editor", label: "Code Editor" },
+        { id: "badge", label: "Badge" },
       ],
     },
     {
diff --git a/src/docs/pages/components/BadgePage.tsx b/src/docs/pages/components/BadgePage.tsx
new file mode 100644
index 0000000..18211c5
--- /dev/null
+++ b/src/docs/pages/components/BadgePage.tsx
@@ -0,0 +1,89 @@
+import * as React from "react";
+import { ComponentDemo } from "../../components/ComponentDemo";
+import { PropsTable } from "../../components/PropsTable";
+import { Badge } from "../../../components/badge/Badge";
+import { Title } from "../../../components/typography/Title";
+
+export const BadgePage = () => {
+  const badgeProps = [
+    {
+      name: "variant",
+      type: "'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline'",
+      defaultValue: "default",
+      description: "Controls the visual style of the badge",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes",
+    },
+  ];
+
+  return (
+    <div className="space-y-12">
+      <ComponentDemo
+        title="Badge"
+        description="A small visual indicator component for status, labels, and counts."
+        code={`import { Badge } from "av1-c";
+
+const MyComponent = () => (
+  <Badge variant="success">
+    Completed
+  </Badge>
+);`}
+      >
+        <div className="flex gap-4">
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="success">Success</Badge>
+        </div>
+      </ComponentDemo>
+
+      <section>
+        <Title level={3}>Properties</Title>
+        <div className="mt-4">
+          <PropsTable props={badgeProps} />
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <Title level={3}>Examples</Title>
+        <div className="grid grid-cols-2 gap-4">
+          <ComponentDemo
+            title="All Variants"
+            description="Available badge variants"
+            code={`<div className="space-x-2">
+  <Badge variant="default">Default</Badge>
+  <Badge variant="secondary">Secondary</Badge>
+  <Badge variant="success">Success</Badge>
+  <Badge variant="warning">Warning</Badge>
+  <Badge variant="destructive">Destructive</Badge>
+  <Badge variant="outline">Outline</Badge>
+</div>`}
+          >
+            <div className="space-x-2">
+              <Badge variant="default">Default</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="success">Success</Badge>
+              <Badge variant="warning">Warning</Badge>
+              <Badge variant="destructive">Destructive</Badge>
+              <Badge variant="outline">Outline</Badge>
+            </div>
+          </ComponentDemo>
+
+          <ComponentDemo
+            title="With Custom Styles"
+            description="Badge with custom styling"
+            code={`<Badge className="bg-purple-200 text-purple-800 dark:bg-purple-500/20 dark:text-purple-300">
+  Custom
+</Badge>`}
+          >
+            <Badge className="bg-purple-200 text-purple-800 dark:bg-purple-500/20 dark:text-purple-300">
+              Custom
+            </Badge>
+          </ComponentDemo>
+        </div>
+      </section>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/docs/pages/components/TablePage.tsx b/src/docs/pages/components/TablePage.tsx
index ed775b9..50b8068 100644
--- a/src/docs/pages/components/TablePage.tsx
+++ b/src/docs/pages/components/TablePage.tsx
@@ -3,6 +3,7 @@ import { ComponentDemo } from "../../components/ComponentDemo";
 import { PropsTable } from "../../components/PropsTable";
 import { Table } from "../../../components/table/Table";
 import { Title } from "../../../components/typography/Title";
+import { Badge } from "../../../components/badge/Badge";
 
 export const TablePage = () => {
   const tableProps = [
@@ -88,12 +89,16 @@ const MyComponent = () => (
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <span className="bg-green-500/20 text-green-300 px-2 py-1 rounded-full text-xs">
-          Active
-        </span>
+        <Badge variant="success">Active</Badge>
       </Table.Cell>
       <Table.Cell className="font-mono">$1,234.56</Table.Cell>
     </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Badge variant="warning">Pending</Badge>
+      </Table.Cell>
+      <Table.Cell className="font-mono">$567.89</Table.Cell>
+    </Table.Row>
   </Table.Body>
 </Table>`}
           >
@@ -107,17 +112,13 @@ const MyComponent = () => (
               <Table.Body>
                 <Table.Row>
                   <Table.Cell>
-                    <span className="bg-green-500/20 text-green-300 px-2 py-1 rounded-full text-xs">
-                      Active
-                    </span>
+                    <Badge variant="success">Active</Badge>
                   </Table.Cell>
                   <Table.Cell className="font-mono">$1,234.56</Table.Cell>
                 </Table.Row>
                 <Table.Row>
                   <Table.Cell>
-                    <span className="bg-amber-500/20 text-amber-300 px-2 py-1 rounded-full text-xs">
-                      Pending
-                    </span>
+                    <Badge variant="warning">Pending</Badge>
                   </Table.Cell>
                   <Table.Cell className="font-mono">$567.89</Table.Cell>
                 </Table.Row>