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

package/dist/storybook/Progress.stories.tsx

@@ -1,89 +1,89 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Progress } from "../shadcn";
-import { useEffect, useState } from "react";
-
-export default {
-  title: "Shadcn/Components/Progress",
-  component: Progress,
-  argTypes: {
-    value: {
-      control: { type: "number", min: 0, max: 100 },
-    },
-  },
-} as Meta;
-
-const Template: StoryFn = args => <Progress {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  value: 40,
-};
-
-export const Empty = Template.bind({});
-Empty.args = {
-  value: 0,
-};
-
-export const Full = Template.bind({});
-Full.args = {
-  value: 100,
-};
-
-export const CustomStyles: StoryFn = () => (
-  <div className="al-space-y-4">
-    <Progress value={40} className="al-h-2" />
-    <Progress value={60} className="al-h-3 al-bg-secondary/20" />
-    <Progress value={80} className="al-h-4 [&>div]:al-bg-green-500" />
-  </div>
-);
-
-export const WithLabel: StoryFn = () => (
-  <div className="al-space-y-2">
-    <div className="al-flex al-justify-between al-text-sm">
-      <span>Progress</span>
-      <span>40%</span>
-    </div>
-    <Progress value={40} />
-  </div>
-);
-
-export const Animated: StoryFn = () => {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress(prevProgress => {
-        if (prevProgress === 100) {
-          return 0;
-        }
-        return Math.min(prevProgress + 10, 100);
-      });
-    }, 500);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return <Progress value={progress} />;
-};
-
-export const WithCustomMaxValue: StoryFn = () => (
-  <div className="al-space-y-2">
-    <div className="al-flex al-justify-between al-text-sm">
-      <span>Score</span>
-      <span>7/10</span>
-    </div>
-    <Progress value={7} max={10} />
-  </div>
-);
-
-export const Loading: StoryFn = () => (
-  <div className="al-space-y-2">
-    <div className="al-flex al-justify-between al-text-sm">
-      <span>Loading...</span>
-      <span className="al-text-muted-foreground">Please wait</span>
-    </div>
-    <Progress value={null} />
-  </div>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { Progress } from "../shadcn";
+import { useEffect, useState } from "react";
+
+export default {
+  title: "Shadcn/Components/Progress",
+  component: Progress,
+  argTypes: {
+    value: {
+      control: { type: "number", min: 0, max: 100 },
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => <Progress {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 40,
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  value: 0,
+};
+
+export const Full = Template.bind({});
+Full.args = {
+  value: 100,
+};
+
+export const CustomStyles: StoryFn = () => (
+  <div className="al-space-y-4">
+    <Progress value={40} className="al-h-2" />
+    <Progress value={60} className="al-h-3 al-bg-secondary/20" />
+    <Progress value={80} className="al-h-4 [&>div]:al-bg-green-500" />
+  </div>
+);
+
+export const WithLabel: StoryFn = () => (
+  <div className="al-space-y-2">
+    <div className="al-flex al-justify-between al-text-sm">
+      <span>Progress</span>
+      <span>40%</span>
+    </div>
+    <Progress value={40} />
+  </div>
+);
+
+export const Animated: StoryFn = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(prevProgress => {
+        if (prevProgress === 100) {
+          return 0;
+        }
+        return Math.min(prevProgress + 10, 100);
+      });
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <Progress value={progress} />;
+};
+
+export const WithCustomMaxValue: StoryFn = () => (
+  <div className="al-space-y-2">
+    <div className="al-flex al-justify-between al-text-sm">
+      <span>Score</span>
+      <span>7/10</span>
+    </div>
+    <Progress value={7} max={10} />
+  </div>
+);
+
+export const Loading: StoryFn = () => (
+  <div className="al-space-y-2">
+    <div className="al-flex al-justify-between al-text-sm">
+      <span>Loading...</span>
+      <span className="al-text-muted-foreground">Please wait</span>
+    </div>
+    <Progress value={null} />
+  </div>
+);

package/dist/storybook/RadioGroup.stories.tsx

@@ -1,58 +1,58 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { RadioGroup, RadioGroupItem } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/RadioGroup",
-  component: RadioGroup,
-} as Meta;
-
-const Template: StoryFn = args => (
-  <RadioGroup defaultValue="option-1" {...args}>
-    {["option-1", "option-2", "option-3"].map(option => (
-      <div key={option} className="al-flex al-items-center al-space-x-2">
-        <RadioGroupItem value={option} id={option} />
-        <label htmlFor={option} className="al-text-sm al-font-medium">
-          {option.charAt(0).toUpperCase() + option.slice(1)}
-        </label>
-      </div>
-    ))}
-  </RadioGroup>
-);
-
-export const Default = Template.bind({});
-
-export const WithDisabledOption = () => (
-  <RadioGroup defaultValue="option-1">
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-1" id="option-1" />
-      <label htmlFor="option-1" className="text-sm font-medium">
-        Option 1
-      </label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-2" id="option-2" disabled />
-      <label htmlFor="option-2" className="text-sm font-medium text-muted-foreground">
-        Option 2 (Disabled)
-      </label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option-3" id="option-3" />
-      <label htmlFor="option-3" className="text-sm font-medium">
-        Option 3
-      </label>
-    </div>
-  </RadioGroup>
-);
-
-export const Horizontal = () => (
-  <RadioGroup defaultValue="option-1" className="al-flex al-space-x-4">
-    {["option-1", "option-2", "option-3"].map(option => (
-      <div key={option} className="al-flex al-items-center al-space-x-2">
-        <RadioGroupItem value={option} id={`h-${option}`} />
-        <label htmlFor={`h-${option}`} className="al-text-sm al-font-medium">
-          {option.charAt(0).toUpperCase() + option.slice(1)}
-        </label>
-      </div>
-    ))}
-  </RadioGroup>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { RadioGroup, RadioGroupItem } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/RadioGroup",
+  component: RadioGroup,
+} as Meta;
+
+const Template: StoryFn = args => (
+  <RadioGroup defaultValue="option-1" {...args}>
+    {["option-1", "option-2", "option-3"].map(option => (
+      <div key={option} className="al-flex al-items-center al-space-x-2">
+        <RadioGroupItem value={option} id={option} />
+        <label htmlFor={option} className="al-text-sm al-font-medium">
+          {option.charAt(0).toUpperCase() + option.slice(1)}
+        </label>
+      </div>
+    ))}
+  </RadioGroup>
+);
+
+export const Default = Template.bind({});
+
+export const WithDisabledOption = () => (
+  <RadioGroup defaultValue="option-1">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-1" id="option-1" />
+      <label htmlFor="option-1" className="text-sm font-medium">
+        Option 1
+      </label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-2" id="option-2" disabled />
+      <label htmlFor="option-2" className="text-sm font-medium text-muted-foreground">
+        Option 2 (Disabled)
+      </label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-3" id="option-3" />
+      <label htmlFor="option-3" className="text-sm font-medium">
+        Option 3
+      </label>
+    </div>
+  </RadioGroup>
+);
+
+export const Horizontal = () => (
+  <RadioGroup defaultValue="option-1" className="al-flex al-space-x-4">
+    {["option-1", "option-2", "option-3"].map(option => (
+      <div key={option} className="al-flex al-items-center al-space-x-2">
+        <RadioGroupItem value={option} id={`h-${option}`} />
+        <label htmlFor={`h-${option}`} className="al-text-sm al-font-medium">
+          {option.charAt(0).toUpperCase() + option.slice(1)}
+        </label>
+      </div>
+    ))}
+  </RadioGroup>
+);

package/dist/storybook/Resizable.stories.tsx

@@ -1,119 +1,119 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Resizable",
-  component: ResizablePanelGroup,
-} as Meta;
-
-export const HorizontalLayout: StoryFn = () => (
-  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={25}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Sidebar</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Content</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </div>
-);
-
-export const VerticalLayout: StoryFn = () => (
-  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
-    <ResizablePanelGroup direction="vertical">
-      <ResizablePanel defaultSize={25}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Header</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Content</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </div>
-);
-
-export const ThreePanels: StoryFn = () => (
-  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={20}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Navigation</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={60}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Content</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={20}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Properties</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </div>
-);
-
-export const NestedPanels: StoryFn = () => (
-  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={30}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Sidebar</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={70}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={70}>
-            <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-              <span className="al-font-semibold">Main Content</span>
-            </div>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={30}>
-            <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-              <span className="al-font-semibold">Console</span>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </div>
-);
-
-export const WithMinSize: StoryFn = () => (
-  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={25} minSize={20}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Min 20%</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={50}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Flexible</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={25} minSize={15}>
-        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
-          <span className="al-font-semibold">Min 15%</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </div>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Resizable",
+  component: ResizablePanelGroup,
+} as Meta;
+
+export const HorizontalLayout: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={25}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const VerticalLayout: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="vertical">
+      <ResizablePanel defaultSize={25}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const ThreePanels: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={20}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Navigation</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={60}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={20}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Properties</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const NestedPanels: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={30}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={70}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={70}>
+            <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+              <span className="al-font-semibold">Main Content</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={30}>
+            <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+              <span className="al-font-semibold">Console</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const WithMinSize: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={25} minSize={20}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Min 20%</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Flexible</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={25} minSize={15}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Min 15%</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);