@a2v2ai/uikit 0.0.38 → 0.0.39

package/ChatBubble/ChatBubble.tsx

@@ -1,179 +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" | "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

@@ -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 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

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