@a2v2ai/uikit 0.0.39 → 0.0.40

package/Switch/Switch.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type SwitchSize = "small" | "regular"
+
+const switchVariants = cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-600 data-[state=unchecked]:bg-grey-200",
+  {
+    variants: {
+      size: {
+        small: "h-5 w-9",
+        regular: "h-6 w-11",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+const switchThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+  {
+    variants: {
+      size: {
+        small: "size-4 data-[state=checked]:translate-x-4",
+        regular: "size-5 data-[state=checked]:translate-x-5",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  size?: SwitchSize
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(switchVariants({ size }), className)}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb className={cn(switchThumbVariants({ size }))} />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+export { Switch, switchVariants }
+export type { SwitchSize }

package/Table/Table.stories.tsx

@@ -0,0 +1,510 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Checkbox } from "../Checkbox/Checkbox"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./Table"
+
+const meta: Meta<typeof Table> = {
+  title: "Components/Table",
+  component: Table,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Table>
+
+// Sample data for stories
+const invoices = [
+  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
+  { invoice: "INV004", status: "Paid", method: "Credit Card", amount: "$450.00" },
+  { invoice: "INV005", status: "Paid", method: "PayPal", amount: "$550.00" },
+  { invoice: "INV006", status: "Pending", method: "Bank Transfer", amount: "$200.00" },
+  { invoice: "INV007", status: "Unpaid", method: "Credit Card", amount: "$300.00" },
+]
+
+const users = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "Active" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor", status: "Active" },
+  { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "Viewer", status: "Inactive" },
+  { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor", status: "Active" },
+  { id: 5, name: "Charlie Wilson", email: "charlie@example.com", role: "Viewer", status: "Pending" },
+]
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.status}</TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const WithCaption: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.slice(0, 5).map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.status}</TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const WithFooter: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.status}</TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,250.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+}
+
+export const Striped: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+          <TableHead>Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user, index) => (
+          <TableRow
+            key={user.id}
+            className={index % 2 === 0 ? "bg-grey-50" : ""}
+          >
+            <TableCell className="font-medium">{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+            <TableCell>{user.status}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const Compact: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="py-2 px-2">Name</TableHead>
+          <TableHead className="py-2 px-2">Email</TableHead>
+          <TableHead className="py-2 px-2">Role</TableHead>
+          <TableHead className="py-2 px-2">Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell className="py-1.5 px-2 font-medium">{user.name}</TableCell>
+            <TableCell className="py-1.5 px-2">{user.email}</TableCell>
+            <TableCell className="py-1.5 px-2">{user.role}</TableCell>
+            <TableCell className="py-1.5 px-2">{user.status}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const WithCheckboxes: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-12">
+            <Checkbox />
+          </TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+          <TableHead>Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell>
+              <Checkbox />
+            </TableCell>
+            <TableCell className="font-medium">{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+            <TableCell>{user.status}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const SelectedRows: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-12">
+            <Checkbox />
+          </TableHead>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map((user, index) => (
+          <TableRow
+            key={user.id}
+            data-state={index === 1 || index === 3 ? "selected" : undefined}
+          >
+            <TableCell>
+              <Checkbox checked={index === 1 || index === 3} />
+            </TableCell>
+            <TableCell className="font-medium">{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>{user.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const EmptyState: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell colSpan={4} className="h-24 text-center text-grey-500">
+            No invoices found.
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const LongContent: Story = {
+  render: () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[80px]">ID</TableHead>
+          <TableHead className="w-[200px]">Title</TableHead>
+          <TableHead>Description</TableHead>
+          <TableHead className="w-[100px]">Status</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell className="font-medium">1</TableCell>
+          <TableCell className="truncate max-w-[200px]">
+            This is a very long title that should be truncated
+          </TableCell>
+          <TableCell className="truncate max-w-[300px]">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">2</TableCell>
+          <TableCell className="truncate max-w-[200px]">
+            Another very long title example here
+          </TableCell>
+          <TableCell className="truncate max-w-[300px]">
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </TableCell>
+          <TableCell>Pending</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell className="font-medium">3</TableCell>
+          <TableCell>Short title</TableCell>
+          <TableCell>Short description</TableCell>
+          <TableCell>Draft</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+}
+
+export const Bordered: Story = {
+  render: () => (
+    <div className="border border-grey-200 rounded-lg overflow-hidden">
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-grey-50">
+            <TableHead>Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className="text-right">Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {invoices.slice(0, 5).map((invoice) => (
+            <TableRow key={invoice.invoice}>
+              <TableCell className="font-medium">{invoice.invoice}</TableCell>
+              <TableCell>{invoice.status}</TableCell>
+              <TableCell>{invoice.method}</TableCell>
+              <TableCell className="text-right">{invoice.amount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+}
+
+export const Showcase: Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: () => (
+    <Flex style={{ padding: "32px", backgroundColor: "#ffffff", minHeight: "100vh" }}>
+      <Flex style={{ borderBottom: "1px solid #e5e7eb", paddingBottom: "24px", marginBottom: "32px" }}>
+        <Typography variant="h3" color="main-950">Table</Typography>
+        <Typography variant="body2" color="main-500" style={{ marginTop: "8px" }}>
+          A responsive table component with semantic HTML structure.
+        </Typography>
+      </Flex>
+
+      <Flex gap={12}>
+        {/* Basic Table */}
+        <Flex gap={4}>
+          <Typography variant="subtitle1" color="main-700">Basic Table</Typography>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[100px]">Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Method</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invoices.slice(0, 3).map((invoice) => (
+                <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
+                  <TableCell>{invoice.status}</TableCell>
+                  <TableCell>{invoice.method}</TableCell>
+                  <TableCell className="text-right">{invoice.amount}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Flex>
+
+        {/* With Footer */}
+        <Flex gap={4}>
+          <Typography variant="subtitle1" color="main-700">With Footer</Typography>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invoices.slice(0, 3).map((invoice) => (
+                <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
+                  <TableCell>{invoice.status}</TableCell>
+                  <TableCell className="text-right">{invoice.amount}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableRow>
+                <TableCell colSpan={2}>Total</TableCell>
+                <TableCell className="text-right">$750.00</TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+        </Flex>
+
+        {/* With Caption */}
+        <Flex gap={4}>
+          <Typography variant="subtitle1" color="main-700">With Caption</Typography>
+          <Table>
+            <TableCaption>A list of your recent invoices.</TableCaption>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invoices.slice(0, 3).map((invoice) => (
+                <TableRow key={invoice.invoice}>
+                  <TableCell className="font-medium">{invoice.invoice}</TableCell>
+                  <TableCell>{invoice.status}</TableCell>
+                  <TableCell className="text-right">{invoice.amount}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Flex>
+
+        {/* With Selection */}
+        <Flex gap={4}>
+          <Typography variant="subtitle1" color="main-700">With Selection</Typography>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12">
+                  <Checkbox />
+                </TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Role</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.slice(0, 3).map((user, index) => (
+                <TableRow
+                  key={user.id}
+                  data-state={index === 1 ? "selected" : undefined}
+                >
+                  <TableCell>
+                    <Checkbox checked={index === 1} />
+                  </TableCell>
+                  <TableCell className="font-medium">{user.name}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell>{user.role}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Flex>
+
+        {/* Striped */}
+        <Flex gap={4}>
+          <Typography variant="subtitle1" color="main-700">Striped Rows</Typography>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.slice(0, 4).map((user, index) => (
+                <TableRow
+                  key={user.id}
+                  className={index % 2 === 0 ? "bg-grey-50" : ""}
+                >
+                  <TableCell className="font-medium">{user.name}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell>{user.status}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Flex>
+
+        {/* Empty State */}
+        <Flex gap={4}>
+          <Typography variant="subtitle1" color="main-700">Empty State</Typography>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell colSpan={3} className="h-24 text-center text-grey-500">
+                  No results found.
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}

package/Table/Table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <table
+    ref={ref}
+    className={cn("w-full caption-bottom text-sm", className)}
+    {...props}
+  />
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("bg-background-neutral-200 [&_tr]:border-b [&_tr]:hover:bg-background-neutral-200", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-background-neutral-200 font-medium text-main-900 [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b border-grey-200 transition-colors hover:bg-grey-50 data-[state=selected]:bg-grey-100",
+      className,
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-3 text-left align-middle font-normal text-main-900 [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-3 align-middle text-main-700 [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-main-700", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}