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

package/dist/storybook/ScrollArea.stories.tsx

@@ -1,101 +1,101 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { ScrollArea } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/ScrollArea",
-  component: ScrollArea,
-} as Meta;
-
-const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-
-export const Default: StoryFn = () => (
-  <ScrollArea className="al-h-72 al-w-48 al-rounded-md al-border">
-    <div className="al-p-4">
-      <h4 className="al-mb-4 al-text-sm al-font-medium al-leading-none">Tags</h4>
-      {tags.map(tag => (
-        <div key={tag} className="al-text-sm">
-          {tag}
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const HorizontalScroll: StoryFn = () => (
-  <ScrollArea className="al-w-96 al-whitespace-nowrap al-rounded-md al-border">
-    <div className="al-flex al-w-max al-space-x-4 al-p-4">
-      {Array.from({ length: 50 }, (_, i) => (
-        <div key={i} className="al-w-40 al-shrink-0 al-rounded-md al-border al-p-4">
-          <div className="al-text-sm">Item {i + 1}</div>
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const WithContent: StoryFn = () => (
-  <ScrollArea className="al-h-[300px] al-w-[350px] al-rounded-md al-border al-p-4">
-    <div className="al-space-y-4">
-      <h4 className="al-text-sm al-font-medium al-leading-none">Documentation</h4>
-      {Array.from({ length: 20 }, (_, i) => (
-        <div key={i} className="al-text-sm">
-          <h5 className="al-mb-1 al-font-medium">Section {i + 1}</h5>
-          <p className="al-text-muted-foreground">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua.
-          </p>
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const WithCard: StoryFn = () => (
-  <ScrollArea className="al-h-[300px] al-w-[600px] al-rounded-lg al-border">
-    <div className="al-p-6">
-      <h4 className="al-mb-4 al-text-xl al-font-bold">Recent Activity</h4>
-      {Array.from({ length: 20 }, (_, i) => (
-        <div key={i} className="al-mb-4 al-rounded-lg al-border al-p-4 last:al-mb-0">
-          <div className="al-flex al-items-center al-justify-between">
-            <div className="al-space-y-1">
-              <p className="al-text-sm al-font-medium al-leading-none">Activity {i + 1}</p>
-              <p className="al-text-sm al-text-muted-foreground">
-                This is a description of the activity that occurred.
-              </p>
-            </div>
-            <div className="al-text-sm al-text-muted-foreground">
-              {new Date().toLocaleDateString()}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  </ScrollArea>
-);
-
-export const WithNestedContent: StoryFn = () => (
-  <ScrollArea className="al-h-[400px] al-w-[600px] al-rounded-lg al-border">
-    <div className="al-p-6">
-      <h4 className="al-mb-4 al-text-xl al-font-bold">Nested Content Example</h4>
-      <div className="al-grid al-gap-4">
-        {Array.from({ length: 5 }, (_, i) => (
-          <div key={i} className="al-space-y-2">
-            <h5 className="al-text-lg al-font-semibold">Section {i + 1}</h5>
-            <ScrollArea className="al-h-[150px] al-w-full al-rounded-md al-border">
-              <div className="al-p-4">
-                {Array.from({ length: 10 }, (_, j) => (
-                  <div key={j} className="al-mb-2 al-rounded al-border al-p-2 last:al-mb-0">
-                    <p className="al-text-sm">Subsection {j + 1}</p>
-                    <p className="al-text-xs al-text-muted-foreground">
-                      Nested scrollable content example.
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </ScrollArea>
-          </div>
-        ))}
-      </div>
-    </div>
-  </ScrollArea>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { ScrollArea } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/ScrollArea",
+  component: ScrollArea,
+} as Meta;
+
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
+
+export const Default: StoryFn = () => (
+  <ScrollArea className="al-h-72 al-w-48 al-rounded-md al-border">
+    <div className="al-p-4">
+      <h4 className="al-mb-4 al-text-sm al-font-medium al-leading-none">Tags</h4>
+      {tags.map(tag => (
+        <div key={tag} className="al-text-sm">
+          {tag}
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const HorizontalScroll: StoryFn = () => (
+  <ScrollArea className="al-w-96 al-whitespace-nowrap al-rounded-md al-border">
+    <div className="al-flex al-w-max al-space-x-4 al-p-4">
+      {Array.from({ length: 50 }, (_, i) => (
+        <div key={i} className="al-w-40 al-shrink-0 al-rounded-md al-border al-p-4">
+          <div className="al-text-sm">Item {i + 1}</div>
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const WithContent: StoryFn = () => (
+  <ScrollArea className="al-h-[300px] al-w-[350px] al-rounded-md al-border al-p-4">
+    <div className="al-space-y-4">
+      <h4 className="al-text-sm al-font-medium al-leading-none">Documentation</h4>
+      {Array.from({ length: 20 }, (_, i) => (
+        <div key={i} className="al-text-sm">
+          <h5 className="al-mb-1 al-font-medium">Section {i + 1}</h5>
+          <p className="al-text-muted-foreground">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const WithCard: StoryFn = () => (
+  <ScrollArea className="al-h-[300px] al-w-[600px] al-rounded-lg al-border">
+    <div className="al-p-6">
+      <h4 className="al-mb-4 al-text-xl al-font-bold">Recent Activity</h4>
+      {Array.from({ length: 20 }, (_, i) => (
+        <div key={i} className="al-mb-4 al-rounded-lg al-border al-p-4 last:al-mb-0">
+          <div className="al-flex al-items-center al-justify-between">
+            <div className="al-space-y-1">
+              <p className="al-text-sm al-font-medium al-leading-none">Activity {i + 1}</p>
+              <p className="al-text-sm al-text-muted-foreground">
+                This is a description of the activity that occurred.
+              </p>
+            </div>
+            <div className="al-text-sm al-text-muted-foreground">
+              {new Date().toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const WithNestedContent: StoryFn = () => (
+  <ScrollArea className="al-h-[400px] al-w-[600px] al-rounded-lg al-border">
+    <div className="al-p-6">
+      <h4 className="al-mb-4 al-text-xl al-font-bold">Nested Content Example</h4>
+      <div className="al-grid al-gap-4">
+        {Array.from({ length: 5 }, (_, i) => (
+          <div key={i} className="al-space-y-2">
+            <h5 className="al-text-lg al-font-semibold">Section {i + 1}</h5>
+            <ScrollArea className="al-h-[150px] al-w-full al-rounded-md al-border">
+              <div className="al-p-4">
+                {Array.from({ length: 10 }, (_, j) => (
+                  <div key={j} className="al-mb-2 al-rounded al-border al-p-2 last:al-mb-0">
+                    <p className="al-text-sm">Subsection {j + 1}</p>
+                    <p className="al-text-xs al-text-muted-foreground">
+                      Nested scrollable content example.
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        ))}
+      </div>
+    </div>
+  </ScrollArea>
+);

package/dist/storybook/Select.stories.tsx

@@ -1,95 +1,95 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectValue,
-  SelectGroup,
-  SelectLabel,
-  SelectSeparator,
-} from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Select",
-  component: Select,
-} as Meta;
-
-const Template: StoryFn = args => (
-  <Select {...args}>
-    <SelectTrigger>
-      <SelectValue placeholder="Select an option" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option1">Option 1</SelectItem>
-      <SelectItem value="option2">Option 2</SelectItem>
-      <SelectItem value="option3">Option 3</SelectItem>
-    </SelectContent>
-  </Select>
-);
-
-export const Default = Template.bind({});
-
-export const WithGroups: StoryFn = () => (
-  <Select>
-    <SelectTrigger className="al-w-[280px]">
-      <SelectValue placeholder="Select a fruit" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup>
-        <SelectLabel>Fruits</SelectLabel>
-        <SelectItem value="apple">Apple</SelectItem>
-        <SelectItem value="banana">Banana</SelectItem>
-        <SelectItem value="orange">Orange</SelectItem>
-      </SelectGroup>
-      <SelectSeparator />
-      <SelectGroup>
-        <SelectLabel>Vegetables</SelectLabel>
-        <SelectItem value="carrot">Carrot</SelectItem>
-        <SelectItem value="potato">Potato</SelectItem>
-        <SelectItem value="tomato">Tomato</SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
-);
-
-export const Disabled: StoryFn = () => (
-  <Select disabled>
-    <SelectTrigger className="al-w-[280px]">
-      <SelectValue placeholder="Select an option" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option1">Option 1</SelectItem>
-      <SelectItem value="option2">Option 2</SelectItem>
-      <SelectItem value="option3">Option 3</SelectItem>
-    </SelectContent>
-  </Select>
-);
-
-export const WithDisabledOptions: StoryFn = () => (
-  <Select>
-    <SelectTrigger className="al-w-[280px]">
-      <SelectValue placeholder="Select an option" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option1">Option 1</SelectItem>
-      <SelectItem value="option2" disabled>
-        Option 2 (Disabled)
-      </SelectItem>
-      <SelectItem value="option3">Option 3</SelectItem>
-    </SelectContent>
-  </Select>
-);
-
-export const WithDefaultValue: StoryFn = () => (
-  <Select defaultValue="option2">
-    <SelectTrigger className="al-w-[280px]">
-      <SelectValue />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option1">Option 1</SelectItem>
-      <SelectItem value="option2">Option 2</SelectItem>
-      <SelectItem value="option3">Option 3</SelectItem>
-    </SelectContent>
-  </Select>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Select",
+  component: Select,
+} as Meta;
+
+const Template: StoryFn = args => (
+  <Select {...args}>
+    <SelectTrigger>
+      <SelectValue placeholder="Select an option" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);
+
+export const Default = Template.bind({});
+
+export const WithGroups: StoryFn = () => (
+  <Select>
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue placeholder="Select a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectGroup>
+      <SelectSeparator />
+      <SelectGroup>
+        <SelectLabel>Vegetables</SelectLabel>
+        <SelectItem value="carrot">Carrot</SelectItem>
+        <SelectItem value="potato">Potato</SelectItem>
+        <SelectItem value="tomato">Tomato</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+);
+
+export const Disabled: StoryFn = () => (
+  <Select disabled>
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue placeholder="Select an option" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);
+
+export const WithDisabledOptions: StoryFn = () => (
+  <Select>
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue placeholder="Select an option" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2" disabled>
+        Option 2 (Disabled)
+      </SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);
+
+export const WithDefaultValue: StoryFn = () => (
+  <Select defaultValue="option2">
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);

package/dist/storybook/Sheet.stories.tsx

@@ -1,69 +1,69 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Button } from "../shadcn";
-import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Sheet",
-  component: Sheet,
-  argTypes: {
-    side: {
-      control: "select",
-      options: ["top", "right", "bottom", "left"],
-    },
-  },
-} as Meta;
-
-const Template: StoryFn = ({ side = "right" }) => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Open Sheet</Button>
-    </SheetTrigger>
-    <SheetContent side={side}>
-      <SheetHeader>
-        <SheetTitle>Sheet Title</SheetTitle>
-      </SheetHeader>
-      <div className="al-py-4">
-        <p>This is the sheet content.</p>
-      </div>
-    </SheetContent>
-  </Sheet>
-);
-
-export const Default = Template.bind({});
-
-export const LeftSide = Template.bind({});
-LeftSide.args = {
-  side: "left",
-};
-
-export const TopSide = Template.bind({});
-TopSide.args = {
-  side: "top",
-};
-
-export const BottomSide = Template.bind({});
-BottomSide.args = {
-  side: "bottom",
-};
-
-export const WithForm = () => (
-  <Sheet>
-    <SheetTrigger asChild>
-      <Button variant="outline">Edit Profile</Button>
-    </SheetTrigger>
-    <SheetContent>
-      <SheetHeader>
-        <SheetTitle>Edit Profile</SheetTitle>
-      </SheetHeader>
-      <div className="al-grid al-gap-4 al-py-4">
-        <div className="al-grid al-gap-2">
-          <label htmlFor="name">Name</label>
-          <input id="name" className="al-border al-rounded al-p-2" />
-        </div>
-      </div>
-      <div className="al-flex al-justify-end">
-        <Button>Save Changes</Button>
-      </div>
-    </SheetContent>
-  </Sheet>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { Button } from "../shadcn";
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Sheet",
+  component: Sheet,
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["top", "right", "bottom", "left"],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = ({ side = "right" }) => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Open Sheet</Button>
+    </SheetTrigger>
+    <SheetContent side={side}>
+      <SheetHeader>
+        <SheetTitle>Sheet Title</SheetTitle>
+      </SheetHeader>
+      <div className="al-py-4">
+        <p>This is the sheet content.</p>
+      </div>
+    </SheetContent>
+  </Sheet>
+);
+
+export const Default = Template.bind({});
+
+export const LeftSide = Template.bind({});
+LeftSide.args = {
+  side: "left",
+};
+
+export const TopSide = Template.bind({});
+TopSide.args = {
+  side: "top",
+};
+
+export const BottomSide = Template.bind({});
+BottomSide.args = {
+  side: "bottom",
+};
+
+export const WithForm = () => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Edit Profile</Button>
+    </SheetTrigger>
+    <SheetContent>
+      <SheetHeader>
+        <SheetTitle>Edit Profile</SheetTitle>
+      </SheetHeader>
+      <div className="al-grid al-gap-4 al-py-4">
+        <div className="al-grid al-gap-2">
+          <label htmlFor="name">Name</label>
+          <input id="name" className="al-border al-rounded al-p-2" />
+        </div>
+      </div>
+      <div className="al-flex al-justify-end">
+        <Button>Save Changes</Button>
+      </div>
+    </SheetContent>
+  </Sheet>
+);