@a2v2ai/uikit 0.0.1 → 0.0.3

package/Card/Card.tsx

@@ -0,0 +1,96 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type CardVariant = "default" | "outline"
+
+const cardVariants = cva(
+  "rounded-xl border bg-white text-main-950 shadow-sm",
+  {
+    variants: {
+      variant: {
+        default: "border-grey-200",
+        outline: "border-grey-300 shadow-none",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant }), className)}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-grey-500", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants }
+export type { CardVariant }

package/ChatBubble/ChatBubble.stories.tsx

@@ -0,0 +1,307 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { ChatBubble } from "./ChatBubble"
+
+const meta: Meta<typeof ChatBubble> = {
+  title: "Components/ChatBubble",
+  component: ChatBubble,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "dark",
+      values: [
+        { name: "dark", value: "#1a1a1a" },
+        { name: "light", value: "#ffffff" },
+      ],
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["left", "right"],
+      description: "The side of the chat bubble",
+    },
+    color: {
+      control: "select",
+      options: ["blue", "grey", "green"],
+      description: "The color variant of the bubble",
+    },
+    theme: {
+      control: "select",
+      options: ["dark", "light"],
+      description: "The theme variant",
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large", "xlarge"],
+      description: "The text size of the bubble",
+    },
+    label: {
+      control: "text",
+      description: "Label shown above the bubble",
+    },
+    showLabel: {
+      control: "boolean",
+      description: "Whether to show the label",
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ChatBubble>
+
+export const Default: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const RightSide: Story = {
+  args: {
+    side: "right",
+    color: "blue",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const Grey: Story = {
+  args: {
+    side: "left",
+    color: "grey",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const Green: Story = {
+  args: {
+    side: "left",
+    color: "green",
+    theme: "dark",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const LightTheme: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "light",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const GreyLight: Story = {
+  args: {
+    side: "left",
+    color: "grey",
+    theme: "light",
+    label: "Your name",
+    children: "Your message goes here",
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const NoLabel: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "dark",
+    showLabel: false,
+    children: "Message without a label",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const LongMessage: Story = {
+  args: {
+    side: "left",
+    color: "blue",
+    theme: "dark",
+    label: "Your name",
+    children:
+      "This is a longer message that demonstrates how the chat bubble handles multiple lines of text. The bubble should expand to accommodate the content while maintaining proper padding and border radius.",
+  },
+  decorators: [
+    (Story) => (
+      <Flex className="w-[400px]">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+// Conversation example
+export const Conversation: Story = {
+  render: () => (
+    <Flex direction="column" gap={4} className="w-[400px]">
+      <ChatBubble side="left" color="grey" theme="dark" label="Alice">
+        Hey! How are you doing?
+      </ChatBubble>
+      <ChatBubble side="right" color="blue" theme="dark" label="You">
+        I'm doing great, thanks for asking!
+      </ChatBubble>
+      <ChatBubble side="left" color="grey" theme="dark" label="Alice">
+        That's wonderful to hear. Want to grab lunch later?
+      </ChatBubble>
+      <ChatBubble side="right" color="green" theme="dark" label="You">
+        Sounds perfect! See you at noon.
+      </ChatBubble>
+    </Flex>
+  ),
+}
+
+// All Variants
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      {/* Dark Theme */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4" className="text-white">Dark Theme</Typography>
+        <Flex gap={4}>
+          {/* Left side variants */}
+          <Flex direction="column" gap={4}>
+            <ChatBubble side="left" color="blue" theme="dark" label="Blue Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="grey" theme="dark" label="Grey Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="green" theme="dark" label="Green Left">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+          {/* Right side variants */}
+          <Flex direction="column" gap={4}>
+            <ChatBubble side="right" color="blue" theme="dark" label="Blue Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="grey" theme="dark" label="Grey Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="green" theme="dark" label="Green Right">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Light Theme */}
+      <Flex direction="column" gap={4} className="bg-white p-6 rounded-lg">
+        <Typography variant="h4">Light Theme</Typography>
+        <Flex gap={4}>
+          {/* Left side variants */}
+          <Flex direction="column" gap={4}>
+            <ChatBubble side="left" color="blue" theme="light" label="Blue Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="grey" theme="light" label="Grey Left">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="left" color="green" theme="light" label="Green Left">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+          {/* Right side variants */}
+          <Flex direction="column" gap={4}>
+            <ChatBubble side="right" color="blue" theme="light" label="Blue Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="grey" theme="light" label="Grey Right">
+              Your message goes here
+            </ChatBubble>
+            <ChatBubble side="right" color="green" theme="light" label="Green Right">
+              Your message goes here
+            </ChatBubble>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      {/* Sizes */}
+      <Flex direction="column" gap={4}>
+        <Typography variant="h4" className="text-white">Sizes</Typography>
+        <Flex direction="column" gap={2} className="w-[400px]">
+          <ChatBubble side="left" color="blue" theme="dark" size="small" label="Small">
+            Small text size
+          </ChatBubble>
+          <ChatBubble side="left" color="blue" theme="dark" size="medium" label="Medium">
+            Medium text size
+          </ChatBubble>
+          <ChatBubble side="left" color="blue" theme="dark" size="large" label="Large">
+            Large text size
+          </ChatBubble>
+          <ChatBubble side="left" color="blue" theme="dark" size="xlarge" label="XLarge">
+            Extra large text size
+          </ChatBubble>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+}

package/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,167 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type ChatBubbleSide = "left" | "right"
+type ChatBubbleColor = "blue" | "grey" | "green"
+type ChatBubbleTheme = "dark" | "light"
+type ChatBubbleSize = "small" | "medium" | "large" | "xlarge"
+
+const chatBubbleVariants = cva(
+  "flex flex-col gap-1.5 w-full",
+  {
+    variants: {
+      side: {
+        left: "items-start",
+        right: "items-end",
+      },
+    },
+    defaultVariants: {
+      side: "left",
+    },
+  }
+)
+
+const bubbleContentVariants = cva(
+  "px-4 py-3 font-medium leading-normal max-w-[85%]",
+  {
+    variants: {
+      color: {
+        blue: "bg-blue-500",
+        grey: "",
+        green: "bg-green-500",
+      },
+      theme: {
+        dark: "",
+        light: "",
+      },
+      side: {
+        left: "rounded-2xl rounded-bl-md",
+        right: "rounded-2xl rounded-br-md",
+      },
+      size: {
+        small: "text-sm px-3 py-2",
+        medium: "text-base px-4 py-3",
+        large: "text-lg px-4 py-3",
+        xlarge: "text-xl px-5 py-4",
+      },
+    },
+    compoundVariants: [
+      // Blue variants
+      {
+        color: "blue",
+        theme: "dark",
+        className: "bg-blue-500 text-white",
+      },
+      {
+        color: "blue",
+        theme: "light",
+        className: "bg-[#2e9dfb] text-white",
+      },
+      // Grey variants
+      {
+        color: "grey",
+        theme: "dark",
+        className: "bg-[#232323] text-white",
+      },
+      {
+        color: "grey",
+        theme: "light",
+        className: "bg-[#e7e7e7] text-neutral-900",
+      },
+      // Green variants
+      {
+        color: "green",
+        theme: "dark",
+        className: "bg-green-500 text-white",
+      },
+      {
+        color: "green",
+        theme: "light",
+        className: "bg-green-500 text-white",
+      },
+    ],
+    defaultVariants: {
+      color: "blue",
+      theme: "dark",
+      side: "left",
+      size: "small",
+    },
+  }
+)
+
+const labelVariants = cva(
+  "text-sm text-neutral-400 mb-0.5",
+  {
+    variants: {
+      side: {
+        left: "ml-3",
+        right: "mr-3",
+      },
+    },
+    defaultVariants: {
+      side: "left",
+    },
+  }
+)
+
+export interface ChatBubbleProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** The side of the chat bubble (left for received, right for sent) */
+  side?: ChatBubbleSide
+  /** The color variant of the bubble */
+  color?: ChatBubbleColor
+  /** The theme variant */
+  theme?: ChatBubbleTheme
+  /** The text size of the bubble */
+  size?: ChatBubbleSize
+  /** The message content */
+  children: React.ReactNode
+  /** Optional label shown above the bubble (e.g., sender name) */
+  label?: string
+  /** Whether to show the label */
+  showLabel?: boolean
+}
+
+const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
+  (
+    {
+      className,
+      side = "left",
+      color = "blue",
+      theme = "dark",
+      size = "small",
+      children,
+      label,
+      showLabel = true,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(chatBubbleVariants({ side, className }))}
+        {...props}
+      >
+        {showLabel && label && (
+          <span className={cn(labelVariants({ side }))}>
+            {label}
+          </span>
+        )}
+        <div
+          className={cn(
+            bubbleContentVariants({ color, theme, side, size })
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+ChatBubble.displayName = "ChatBubble"
+
+export { ChatBubble, chatBubbleVariants, bubbleContentVariants }
+export type { ChatBubbleSide, ChatBubbleColor, ChatBubbleTheme, ChatBubbleSize }

package/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+
+import { Label } from "../Label/Label"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "../Typography/Typography"
+import { Checkbox } from "./Checkbox"
+
+function IndeterminateExample() {
+  const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate")
+  return (
+    <Flex align="center" gap={2}>
+      <Checkbox
+        id="indeterminate"
+        checked={checked}
+        onCheckedChange={(value) => setChecked(value)}
+      />
+      <Label htmlFor="indeterminate">Indeterminate</Label>
+    </Flex>
+  )
+}
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["small", "regular"],
+      description: "The size of the checkbox",
+    },
+    checked: {
+      control: "boolean",
+      description: "The checked state",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the checkbox is disabled",
+    },
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Checkbox />,
+}
+
+export const Checked: Story = {
+  render: () => <Checkbox defaultChecked />,
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <Flex align="center" gap={2}>
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </Flex>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Flex direction="column" gap={3}>
+      <Flex align="center" gap={2}>
+        <Checkbox id="disabled" disabled />
+        <Label htmlFor="disabled" className="opacity-50">Disabled</Label>
+      </Flex>
+      <Flex align="center" gap={2}>
+        <Checkbox id="disabled-checked" disabled defaultChecked />
+        <Label htmlFor="disabled-checked" className="opacity-50">Disabled checked</Label>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const Indeterminate: Story = {
+  render: () => <IndeterminateExample />,
+}
+
+export const Small: Story = {
+  render: () => (
+    <Flex align="center" gap={2}>
+      <Checkbox id="small" size="small" />
+      <Label htmlFor="small" className="text-sm">Small checkbox</Label>
+    </Flex>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h4" className="text-white">Checkbox States</Typography>
+
+      <Flex direction="column" gap={4}>
+        <Flex align="center" gap={2}>
+          <Checkbox id="unchecked" />
+          <Label htmlFor="unchecked">Unchecked</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Checkbox id="checked" defaultChecked />
+          <Label htmlFor="checked">Checked</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Checkbox id="disabled-state" disabled />
+          <Label htmlFor="disabled-state" className="opacity-50">Disabled</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Checkbox id="disabled-checked-state" disabled defaultChecked />
+          <Label htmlFor="disabled-checked-state" className="opacity-50">Disabled Checked</Label>
+        </Flex>
+      </Flex>
+
+      <Typography variant="h4" className="text-white mt-4">Sizes</Typography>
+
+      <Flex direction="column" gap={4}>
+        <Flex align="center" gap={2}>
+          <Checkbox id="small-size" size="small" defaultChecked />
+          <Label htmlFor="small-size" className="text-sm">Small</Label>
+        </Flex>
+
+        <Flex align="center" gap={2}>
+          <Checkbox id="regular-size" size="regular" defaultChecked />
+          <Label htmlFor="regular-size">Regular</Label>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}