@altimateai/ui-components 0.0.1-beta.5 → 0.0.1-beta.6

package/dist/storybook/Avatar.stories.tsx

@@ -1,58 +1,58 @@
-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>
-);
+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,36 +1,36 @@
-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",
-  },
-};
+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",
+  },
+};

package/dist/storybook/Button.stories.tsx

@@ -1,109 +1,109 @@
-import { Meta, StoryFn } 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 Template: StoryFn<ButtonProps> = args => <Button {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  children: "Button",
-};
-
-export const Destructive = Template.bind({});
-Destructive.args = {
-  variant: "destructive",
-  children: "Delete",
-};
-
-export const Outline = Template.bind({});
-Outline.args = {
-  variant: "outline",
-  children: "Outline",
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  variant: "secondary",
-  children: "Secondary",
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: "sm",
-  children: "Small",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: "lg",
-  children: "Large",
-};
-
-export const Icon = Template.bind({});
-Icon.args = {
-  size: "icon",
-  children: "🔍",
-};
-
-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"
-            className="al-align-bottom"
-          >
-            <CloseIcon />
-          </Button>
-          <Button
-            variant={v.toLowerCase() as ButtonProps["variant"]}
-            size="lg"
-            className="al-align-bottom"
-          >
-            {v} lg
-          </Button>
-        </div>
-      ))}
-    </div>
-  ),
-};
+import { Meta, StoryFn } 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 Template: StoryFn<ButtonProps> = args => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "Button",
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  variant: "destructive",
+  children: "Delete",
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  variant: "outline",
+  children: "Outline",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: "secondary",
+  children: "Secondary",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "sm",
+  children: "Small",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: "lg",
+  children: "Large",
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  size: "icon",
+  children: "🔍",
+};
+
+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"
+            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/Card.stories.tsx

@@ -1,69 +1,69 @@
-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 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="w-full">Subscribe</Button>
-    </CardFooter>
-  </Card>
-);
+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 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="w-full">Subscribe</Button>
+    </CardFooter>
+  </Card>
+);