@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/Avatar.stories.tsx

@@ -1,58 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Avatar, AvatarImage, AvatarFallback } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Avatar",
-  component: Avatar,
-} as Meta<typeof Avatar>;
-
-const Template: StoryFn = () => (
-  <div className="flex gap-4">
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-export const WithFallback = () => (
-  <div className="flex gap-4">
-    <Avatar>
-      <AvatarImage src="invalid-image.jpg" alt="@invalid" />
-      <AvatarFallback>IN</AvatarFallback>
-    </Avatar>
-  </div>
-);
-
-export const Sizes = () => (
-  <div className="flex gap-4 items-center">
-    <Avatar className="h-6 w-6">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@small" />
-      <AvatarFallback>SM</AvatarFallback>
-    </Avatar>
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@medium" />
-      <AvatarFallback>MD</AvatarFallback>
-    </Avatar>
-    <Avatar className="h-14 w-14">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@large" />
-      <AvatarFallback>LG</AvatarFallback>
-    </Avatar>
-  </div>
-);
-
-export const CustomColors = () => (
-  <div className="flex gap-4">
-    <Avatar>
-      <AvatarFallback className="bg-blue-500 text-white">BL</AvatarFallback>
-    </Avatar>
-    <Avatar>
-      <AvatarFallback className="bg-green-500 text-white">GR</AvatarFallback>
-    </Avatar>
-    <Avatar>
-      <AvatarFallback className="bg-red-500 text-white">RD</AvatarFallback>
-    </Avatar>
-  </div>
-);

package/dist/storybook/Badge.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Badge",
-  component: Badge,
-} as Meta<typeof Badge>;
-
-type Story = StoryObj<typeof Badge>;
-
-export const Default: Story = {
-  args: {
-    children: "Badge",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary",
-  },
-};
-
-export const Destructive: Story = {
-  args: {
-    variant: "destructive",
-    children: "Destructive",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: "outline",
-    children: "Outline",
-  },
-};
-
-export const Success: Story = {
-  args: {
-    variant: "success",
-    children: "Success",
-  },
-};

package/dist/storybook/Button.stories.tsx

@@ -1,67 +0,0 @@
-import { Meta } from "@storybook/react";
-import { Button, ButtonProps } from "../shadcn";
-import { CloseIcon } from "@ac-assets/icons";
-
-export default {
-  title: "Shadcn/Components/Button",
-  component: Button,
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
-    },
-    size: {
-      control: "select",
-      options: ["default", "sm", "lg", "icon"],
-    },
-  },
-} as Meta;
-
-const buttonVariants = ["Default", "Secondary", "Destructive", "Success", "Ghost", "Link"];
-
-export const Buttons = {
-  render: () => (
-    <div className="al-space-y-4">
-      {buttonVariants.map(v => (
-        <div className="al-space-x-4" key={v}>
-          <Button variant={v.toLowerCase() as ButtonProps["variant"]} className="al-align-bottom">
-            {v}
-          </Button>
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            size="sm"
-            className="al-align-bottom"
-          >
-            {v} sm
-          </Button>
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            disabled
-            className="al-align-bottom"
-          >
-            {v} disabled
-          </Button>
-          <Button variant={v.toLowerCase() as ButtonProps["variant"]} className="al-align-bottom">
-            <CloseIcon />
-            {v} with icon
-          </Button>
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            size="icon"
-            title={`${v} icon button`}
-            className="al-align-bottom"
-          >
-            <CloseIcon />
-          </Button>
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            size="lg"
-            className="al-align-bottom"
-          >
-            {v} lg
-          </Button>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/dist/storybook/Calendar.stories.tsx

@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { addDays } from "date-fns";
-import { TZDate } from "react-day-picker";
-
-import { Calendar } from "../shadcn";
-import { action } from "@storybook/addon-actions";
-
-/**
- * A date field component that allows users to enter and edit date.
- */
-const meta = {
-  title: "Shadcn/Components/Calendar",
-  component: Calendar,
-  argTypes: {
-    mode: {
-      control: { type: "select" },
-      options: ["single", "multiple", "range"],
-    },
-    showOutsideDays: { control: "boolean" },
-    captionLayout: {
-      control: { type: "select" },
-      options: ["label", "dropdown"],
-    },
-    buttonVariant: {
-      control: { type: "select" },
-      options: ["ghost", "outline", "solid"],
-    },
-    numberOfMonths: {
-      control: { type: "number" },
-      description: "Number of months to display in the calendar.",
-    },
-    timeZone: {
-      control: { type: "text" },
-      description: "The time zone for the calendar. Default is 'Asia/Kolkata'.",
-    },
-    onSelect: { action: "date selected" },
-  },
-  args: {
-    mode: "single",
-    numberOfMonths: 2,
-    selected: new Date(),
-    showOutsideDays: true,
-    captionLayout: "label",
-    buttonVariant: "ghost",
-    timeZone: "Asia/Kolkata", // Default time zone
-    onSelect: action("onDayClick"),
-  },
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Calendar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/**
- * The default form of the calendar.
- */
-export const Default: Story = {};
-
-/**
- * Use the `multiple` mode to select multiple dates.
- */
-export const Multiple: Story = {
-  args: {
-    mode: "multiple",
-    selected: [new Date(), addDays(new Date(), 2), addDays(new Date(), 8)],
-    numberOfMonths: 2,
-  },
-};
-
-/**
- * Use the `range` mode to select a range of dates.
- */
-export const Range: Story = {
-  args: {
-    mode: "range",
-    selected: { from: new Date(), to: addDays(new Date(), 5) },
-    numberOfMonths: 2, // Number of months displayed for range selection
-  },
-};
-
-/**
- * Customize the button variant and caption layout.
- */
-export const CustomStyle: Story = {
-  args: {
-    buttonVariant: "outline",
-    captionLayout: "dropdown",
-  },
-};
-
-/**
- * Use timezone-specific dates for the calendar.
- */
-export const TimeZone: Story = {
-  args: {
-    mode: "single",
-    selected: new TZDate(new Date(), "Pacific/Kiritimati"), // TZDate for Pacific/Kiritimati
-    timeZone: "Pacific/Kiritimati",
-  },
-};

package/dist/storybook/Card.stories.tsx

@@ -1,69 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Button } from "../shadcn";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Card",
-  component: Card,
-} as Meta;
-
-const Template: StoryFn = () => (
-  <Card className="w-[350px]">
-    <CardHeader>
-      <CardTitle>Card Title</CardTitle>
-      <CardDescription>Card Description</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <p>Card Content</p>
-    </CardContent>
-    <CardFooter>
-      <Button>Action</Button>
-    </CardFooter>
-  </Card>
-);
-
-export const Default = Template.bind({});
-
-export const WithForm = () => (
-  <Card className="w-[350px]">
-    <CardHeader>
-      <CardTitle>Create Account</CardTitle>
-      <CardDescription>Enter your details below.</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <div className="grid al-w-full items-center gap-4">
-        <div className="flex flex-col space-y-1.5">
-          <label htmlFor="name">Name</label>
-          <input id="name" className="border rounded p-2" />
-        </div>
-        <div className="flex flex-col space-y-1.5">
-          <label htmlFor="email">Email</label>
-          <input id="email" className="border rounded p-2" />
-        </div>
-      </div>
-    </CardContent>
-    <CardFooter className="flex justify-between">
-      <Button variant="outline">Cancel</Button>
-      <Button>Create</Button>
-    </CardFooter>
-  </Card>
-);
-
-export const Pricing = () => (
-  <Card className="w-[350px]">
-    <CardHeader>
-      <CardTitle>Pro Plan</CardTitle>
-      <CardDescription>$29/month</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <ul className="space-y-2">
-        <li>✓ Feature 1</li>
-        <li>✓ Feature 2</li>
-        <li>✓ Feature 3</li>
-      </ul>
-    </CardContent>
-    <CardFooter>
-      <Button className="al-w-full">Subscribe</Button>
-    </CardFooter>
-  </Card>
-);

package/dist/storybook/Carousel.stories.tsx

@@ -1,274 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../shadcn";
-import { Card, CardContent } from "../shadcn";
-
-const meta: Meta<typeof Carousel> = {
-  title: "Shadcn/Components/Carousel",
-  component: Carousel,
-};
-
-export default meta;
-type Story = StoryObj<typeof Carousel>;
-
-export const Default: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-xs">
-        <Carousel>
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index}>
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
-                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const WithMultipleItems: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-sm">
-        <Carousel
-          opts={{
-            align: "start",
-          }}
-        >
-          <CarouselContent>
-            {Array.from({ length: 10 }).map((_, index) => (
-              <CarouselItem key={index} className="al-basis-1/3">
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
-                      <span className="al-text-2xl al-font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const WithLoop: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-xs">
-        <Carousel
-          opts={{
-            loop: true,
-          }}
-        >
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index}>
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
-                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <Carousel orientation="vertical" className="al-w-full al-max-w-xs">
-        <CarouselContent className="al-h-[200px]">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <div className="al-p-1">
-                <Card>
-                  <CardContent className="al-flex al-items-center al-justify-center al-p-6">
-                    <span className="al-text-3xl al-font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  ),
-};
-
-export const WithVariableWidths: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-md">
-        <Carousel
-          opts={{
-            align: "start",
-          }}
-        >
-          <CarouselContent>
-            {Array.from({ length: 8 }).map((_, index) => (
-              <CarouselItem
-                key={index}
-                className={index % 2 === 0 ? "al-basis-1/2" : "al-basis-1/3"}
-              >
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
-                      <span className="al-text-2xl al-font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const Images: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-lg">
-        <Carousel>
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index}>
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-video al-items-center al-justify-center al-p-0">
-                      <div className="al-flex al-h-full al-w-full al-items-center al-justify-center al-bg-muted">
-                        <span className="al-text-2xl al-font-semibold al-text-muted-foreground">
-                          Image {index + 1}
-                        </span>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const WithContent: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-md">
-        <Carousel>
-          <CarouselContent>
-            {[
-              { title: "First Slide", description: "This is the first slide content" },
-              { title: "Second Slide", description: "This is the second slide content" },
-              { title: "Third Slide", description: "This is the third slide content" },
-              { title: "Fourth Slide", description: "This is the fourth slide content" },
-              { title: "Fifth Slide", description: "This is the fifth slide content" },
-            ].map((slide, index) => (
-              <CarouselItem key={index}>
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-flex-col al-items-center al-justify-center al-space-y-2 al-p-6">
-                      <h3 className="al-text-2xl al-font-bold">{slide.title}</h3>
-                      <p className="al-text-center al-text-muted-foreground">{slide.description}</p>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const CustomButtonVariant: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-xs">
-        <Carousel>
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index}>
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
-                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious variant="default" />
-          <CarouselNext variant="default" />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};
-
-export const AutoplayExample: Story = {
-  render: () => (
-    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
-      <div className="al-w-full al-max-w-xs">
-        <Carousel
-          opts={{
-            align: "start",
-            loop: true,
-          }}
-        >
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index}>
-                <div className="al-p-1">
-                  <Card>
-                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
-                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </div>
-    </div>
-  ),
-};

package/dist/storybook/Checkbox.stories.tsx

@@ -1,65 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Checkbox } from "../shadcn";
-
-const meta: Meta<typeof Checkbox> = {
-  title: "Shadcn/Components/Checkbox",
-  component: Checkbox,
-  args: {
-    "aria-label": "Checkbox demo",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-
-export const Default: Story = {
-  render: args => (
-    <div className="al-flex al-items-center al-space-x-2">
-      <Checkbox {...args} id="terms" />
-      <label
-        htmlFor="terms"
-        className="al-text-sm al-font-medium al-leading-none al-peer-disabled:al-cursor-not-allowed al-peer-disabled:al-opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
-  ),
-};
-
-export const Checked: Story = {
-  render: args => (
-    <div className="al-flex al-items-center al-space-x-2">
-      <Checkbox {...args} id="checked" defaultChecked />
-      <label htmlFor="checked" className="al-text-sm al-font-medium al-leading-none">
-        Checked by default
-      </label>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  render: args => (
-    <div className="al-flex al-items-center al-space-x-2">
-      <Checkbox {...args} id="disabled" disabled />
-      <label htmlFor="disabled" className="al-text-sm al-font-medium al-leading-none al-opacity-70">
-        Disabled checkbox
-      </label>
-    </div>
-  ),
-};
-
-export const WithDescription: Story = {
-  render: args => (
-    <div className="al-items-top al-flex al-space-x-2">
-      <Checkbox {...args} id="description" />
-      <div className="al-grid al-gap-1.5 al-leading-none">
-        <label htmlFor="description" className="al-text-sm al-font-medium al-leading-none">
-          Accept terms
-        </label>
-        <p className="al-text-sm al-text-muted-foreground">
-          You agree to our Terms of Service and Privacy Policy.
-        </p>
-      </div>
-    </div>
-  ),
-};