@a2v2ai/uikit 0.0.38 → 0.0.39

package/Switch/Switch.tsx

@@ -1,59 +0,0 @@
-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

@@ -1,510 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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,
-}