@a2v2ai/uikit 0.0.37 → 0.0.38

package/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,179 @@
+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" | "lightGrey"
+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 leading-normal max-w-[85%]",
+  {
+    variants: {
+      color: {
+        blue: "bg-blue-500",
+        grey: "",
+        green: "bg-green-500",
+        lightGrey: "",
+      },
+      theme: {
+        dark: "",
+        light: "",
+      },
+      side: {
+        left: "rounded-t-2xl rounded-br-2xl rounded-bl-md",
+        right: "rounded-t-2xl rounded-bl-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-[#3F3F46] text-[#F4F4F5]",
+      },
+      {
+        color: "grey",
+        theme: "light",
+        className: "bg-main-100 text-[#52525B]",
+      },
+      // Green variants
+      {
+        color: "green",
+        theme: "dark",
+        className: "bg-green-500 text-white",
+      },
+      {
+        color: "green",
+        theme: "light",
+        className: "bg-green-500 text-white",
+      },
+      // Light-grey variants
+      {
+        color: "lightGrey",
+        theme: "dark",
+        className: "bg-background-neutral-100 text-main-600",
+      },
+      {
+        color: "lightGrey",
+        theme: "light",
+        className: "bg-background-neutral-100 text-main-600",
+      },
+    ],
+    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 direction="row" 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 direction="row" align="center" gap={2}>
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </Flex>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Flex gap={3}>
+      <Flex direction="row" align="center" gap={2}>
+        <Checkbox id="disabled" disabled />
+        <Label htmlFor="disabled" className="opacity-50">Disabled</Label>
+      </Flex>
+      <Flex direction="row" 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 direction="row" 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 gap={6}>
+      <Typography variant="h4" className="text-white">Checkbox States</Typography>
+
+      <Flex gap={4}>
+        <Flex direction="row" align="center" gap={2}>
+          <Checkbox id="unchecked" />
+          <Label htmlFor="unchecked">Unchecked</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Checkbox id="checked" defaultChecked />
+          <Label htmlFor="checked">Checked</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Checkbox id="disabled-state" disabled />
+          <Label htmlFor="disabled-state" className="opacity-50">Disabled</Label>
+        </Flex>
+
+        <Flex direction="row" 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 gap={4}>
+        <Flex direction="row" align="center" gap={2}>
+          <Checkbox id="small-size" size="small" defaultChecked />
+          <Label htmlFor="small-size" className="text-sm">Small</Label>
+        </Flex>
+
+        <Flex direction="row" align="center" gap={2}>
+          <Checkbox id="regular-size" size="regular" defaultChecked />
+          <Label htmlFor="regular-size">Regular</Label>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}

package/Checkbox/Checkbox.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check, Minus } from "lucide-react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+type CheckboxSize = "small" | "regular"
+
+const checkboxVariants = cva(
+  "peer shrink-0 border border-grey-300 bg-white ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-600 data-[state=checked]:border-accent-600 data-[state=checked]:text-white data-[state=indeterminate]:bg-accent-600 data-[state=indeterminate]:border-accent-600 data-[state=indeterminate]:text-white",
+  {
+    variants: {
+      size: {
+        small: "size-4 rounded-[4px]",
+        regular: "size-5 rounded-md",
+      },
+    },
+    defaultVariants: {
+      size: "regular",
+    },
+  }
+)
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  size?: CheckboxSize
+}
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, size, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(checkboxVariants({ size }), className)}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      {props.checked === "indeterminate" ? (
+        <Minus className={cn(size === "small" ? "size-3" : "size-3.5")} />
+      ) : (
+        <Check className={cn(size === "small" ? "size-3" : "size-3.5")} />
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox, checkboxVariants }
+export type { CheckboxSize }