@a2v2ai/uikit 0.0.38 → 0.0.39

package/Card/Card.stories.tsx

@@ -1,136 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { Button } from "../Button/Button"
-import { Input } from "../Input/Input"
-import { Label } from "../Label/Label"
-import { Flex } from "../Flex/Flex"
-import { Typography } from "../Typography/Typography"
-import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "./Card"
-
-const meta: Meta<typeof Card> = {
-  title: "Components/Card",
-  component: Card,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "outline"],
-      description: "The visual variant of the card",
-    },
-  },
-  tags: ["autodocs"],
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card Description</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card Content</p>
-      </CardContent>
-      <CardFooter>
-        <p>Card Footer</p>
-      </CardFooter>
-    </Card>
-  ),
-}
-
-export const Outline: Story = {
-  render: () => (
-    <Card variant="outline" className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Outline Card</CardTitle>
-        <CardDescription>This card has no shadow</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card content goes here.</p>
-      </CardContent>
-    </Card>
-  ),
-}
-
-export const WithForm: Story = {
-  render: () => (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form>
-          <Flex gap={4}>
-            <Flex gap={2}>
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </Flex>
-            <Flex gap={2}>
-              <Label htmlFor="framework">Framework</Label>
-              <Input id="framework" placeholder="Select a framework" />
-            </Flex>
-          </Flex>
-        </form>
-      </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
-      </CardFooter>
-    </Card>
-  ),
-}
-
-export const SimpleCard: Story = {
-  render: () => (
-    <Card className="w-[350px] p-6">
-      <Flex gap={2}>
-        <Typography variant="h4">Notifications</Typography>
-        <Typography variant="body2" color="grey-500">
-          You have 3 unread messages.
-        </Typography>
-      </Flex>
-    </Card>
-  ),
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <Flex gap={6}>
-      <Typography variant="h4" className="text-white">Card Variants</Typography>
-
-      <Flex direction="row" gap={4} wrap="wrap">
-        <Card className="w-[300px]">
-          <CardHeader>
-            <CardTitle>Default Card</CardTitle>
-            <CardDescription>With shadow</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p>This is the default card style with a subtle shadow.</p>
-          </CardContent>
-          <CardFooter>
-            <Button size="small">Action</Button>
-          </CardFooter>
-        </Card>
-
-        <Card variant="outline" className="w-[300px]">
-          <CardHeader>
-            <CardTitle>Outline Card</CardTitle>
-            <CardDescription>Without shadow</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <p>This card has an outline border but no shadow.</p>
-          </CardContent>
-          <CardFooter>
-            <Button size="small" variant="outline">Action</Button>
-          </CardFooter>
-        </Card>
-      </Flex>
-    </Flex>
-  ),
-}

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/Carousel/Carousel.stories.tsx

@@ -1,256 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Flex } from "../Flex/Flex"
-import { Card, CardContent } from "../Card/Card"
-import { Typography } from "../Typography/Typography"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "./Carousel"
-
-const meta: Meta<typeof Carousel> = {
-  title: "Components/Carousel",
-  component: Carousel,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    orientation: {
-      control: "select",
-      options: ["horizontal", "vertical"],
-      description: "The orientation of the carousel",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof Carousel>
-
-export const Default: Story = {
-  render: () => (
-    <div className="w-full max-w-xs">
-      <Carousel className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <Typography variant="h3">{index + 1}</Typography>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="w-full max-w-sm">
-      <Carousel
-        opts={{
-          align: "start",
-        }}
-        className="w-full max-w-sm"
-      >
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <Typography variant="h3">{index + 1}</Typography>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  ),
-}
-
-export const Vertical: Story = {
-  render: () => (
-    <Carousel
-      opts={{
-        align: "start",
-      }}
-      orientation="vertical"
-      className="w-full max-w-xs"
-    >
-      <CarouselContent className="-mt-1 h-[200px]">
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index} className="pt-1 md:basis-1/2">
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex items-center justify-center p-6">
-                  <Typography variant="h3">{index + 1}</Typography>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  ),
-}
-
-export const Loop: Story = {
-  render: () => (
-    <div className="w-full max-w-xs">
-      <Carousel
-        opts={{
-          loop: true,
-        }}
-        className="w-full max-w-xs"
-      >
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <Typography variant="h3">{index + 1}</Typography>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  ),
-}
-
-export const WithoutNavigation: Story = {
-  render: () => (
-    <div className="w-full max-w-xs">
-      <Carousel className="w-full max-w-xs">
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <Typography variant="h3">{index + 1}</Typography>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-      </Carousel>
-    </div>
-  ),
-}
-
-export const AllVariants: Story = {
-  parameters: {
-    layout: "padded",
-  },
-  render: () => (
-    <Flex gap={12} className="p-8">
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">
-          Default Carousel
-        </Typography>
-        <div className="w-full max-w-xs">
-          <Carousel className="w-full max-w-xs">
-            <CarouselContent>
-              {Array.from({ length: 5 }).map((_, index) => (
-                <CarouselItem key={index}>
-                  <div className="p-1">
-                    <Card>
-                      <CardContent className="flex aspect-square items-center justify-center p-6">
-                        <Typography variant="h3">{index + 1}</Typography>
-                      </CardContent>
-                    </Card>
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
-          </Carousel>
-        </div>
-      </Flex>
-
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">
-          Multiple Items Per View
-        </Typography>
-        <div className="w-full max-w-lg">
-          <Carousel
-            opts={{
-              align: "start",
-            }}
-            className="w-full"
-          >
-            <CarouselContent>
-              {Array.from({ length: 8 }).map((_, index) => (
-                <CarouselItem key={index} className="basis-1/3">
-                  <div className="p-1">
-                    <Card>
-                      <CardContent className="flex aspect-square items-center justify-center p-6">
-                        <Typography variant="h4">{index + 1}</Typography>
-                      </CardContent>
-                    </Card>
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
-          </Carousel>
-        </div>
-      </Flex>
-
-      <Flex gap={4}>
-        <Typography variant="subtitle1" color="main-700">
-          With Loop Enabled
-        </Typography>
-        <div className="w-full max-w-xs">
-          <Carousel
-            opts={{
-              loop: true,
-            }}
-            className="w-full max-w-xs"
-          >
-            <CarouselContent>
-              {Array.from({ length: 5 }).map((_, index) => (
-                <CarouselItem key={index}>
-                  <div className="p-1">
-                    <Card variant="secondary">
-                      <CardContent className="flex aspect-square items-center justify-center p-6">
-                        <Typography variant="h3">{index + 1}</Typography>
-                      </CardContent>
-                    </Card>
-                  </div>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <CarouselPrevious />
-            <CarouselNext />
-          </Carousel>
-        </div>
-      </Flex>
-    </Flex>
-  ),
-}