@a2v2ai/uikit 0.0.3 → 0.0.5

package/Card/Card.tsx

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

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

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

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