@a2v2ai/uikit 0.0.38 → 0.0.39

package/Carousel/Carousel.tsx

@@ -1,301 +0,0 @@
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { cva } from "class-variance-authority"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "../lib/utils"
-import { Button } from "../Button/Button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselOrientation = "horizontal" | "vertical"
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const carouselVariants = cva("relative", {
-  variants: {
-    orientation: {
-      horizontal: "",
-      vertical: "",
-    },
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-  },
-})
-
-const carouselContentVariants = cva("flex", {
-  variants: {
-    orientation: {
-      horizontal: "-ml-4",
-      vertical: "-mt-4 flex-col",
-    },
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-  },
-})
-
-const carouselItemVariants = cva("min-w-0 shrink-0 grow-0 basis-full", {
-  variants: {
-    orientation: {
-      horizontal: "pl-4",
-      vertical: "pt-4",
-    },
-  },
-  defaultVariants: {
-    orientation: "horizontal",
-  },
-})
-
-interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: CarouselOrientation
-  setApi?: (api: CarouselApi) => void
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn(carouselVariants({ orientation }), className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(carouselContentVariants({ orientation }), className)}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(carouselItemVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "small", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      roundness="round"
-      className={cn(
-        "absolute h-8 w-8 p-0",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "small", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      roundness="round"
-      className={cn(
-        "absolute h-8 w-8 p-0",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  carouselVariants,
-  carouselContentVariants,
-  carouselItemVariants,
-  useCarousel,
-  type CarouselApi,
-  type CarouselProps,
-  type CarouselOptions,
-  type CarouselPlugin,
-  type CarouselOrientation,
-}

package/ChatBubble/ChatBubble.stories.tsx

@@ -1,339 +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", "lightGrey"],
-      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 LightGrey: Story = {
-  args: {
-    side: "left",
-    color: "lightGrey",
-    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 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 gap={8}>
-      {/* Dark Theme */}
-      <Flex gap={4}>
-        <Typography variant="h4" className="text-white">Dark Theme</Typography>
-        <Flex direction="row" gap={4}>
-          {/* Left side variants */}
-          <Flex 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>
-            <ChatBubble side="left" color="lightGrey" theme="dark" label="Light Grey Left">
-              Your message goes here
-            </ChatBubble>
-          </Flex>
-          {/* Right side variants */}
-          <Flex 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>
-            <ChatBubble side="right" color="lightGrey" theme="dark" label="Light Grey Right">
-              Your message goes here
-            </ChatBubble>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/* Light Theme */}
-      <Flex gap={4} className="bg-white p-6 rounded-lg">
-        <Typography variant="h4">Light Theme</Typography>
-        <Flex direction="row" gap={4}>
-          {/* Left side variants */}
-          <Flex 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>
-            <ChatBubble side="left" color="lightGrey" theme="light" label="Light Grey Left">
-              Your message goes here
-            </ChatBubble>
-          </Flex>
-          {/* Right side variants */}
-          <Flex 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>
-            <ChatBubble side="right" color="lightGrey" theme="light" label="Light Grey Right">
-              Your message goes here
-            </ChatBubble>
-          </Flex>
-        </Flex>
-      </Flex>
-
-      {/* Sizes */}
-      <Flex gap={4}>
-        <Typography variant="h4" className="text-white">Sizes</Typography>
-        <Flex 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",
-  },
-}