@altimateai/ui-components 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/storybook/Progress.stories.tsx

@@ -1,89 +0,0 @@
-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,61 +0,0 @@
-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 +0,0 @@
-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>
-);

package/dist/storybook/ScrollArea.stories.tsx

@@ -1,120 +0,0 @@
-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 +0,0 @@
-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,75 +0,0 @@
-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>
-);

package/dist/storybook/Sidebar.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryFn } from "@storybook/react";
-import { Sidebar, SidebarProvider } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Sidebar",
-  component: Sidebar,
-  decorators: [
-    (Story) => (
-      <SidebarProvider>
-        <Story />
-      </SidebarProvider>
-    ),
-  ],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as Meta<typeof Sidebar>;
-
-const Template: StoryFn<typeof Sidebar> = (args) => (
-  <div className="al-h-screen">
-    <Sidebar {...args}>
-      <div className="al-p-4">
-        <h2 className="al-text-lg al-font-semibold">Sidebar Content</h2>
-        <p className="al-mt-2">This is an example of sidebar content.</p>
-        <ul className="al-mt-4 al-space-y-2">
-          <li>Menu Item 1</li>
-          <li>Menu Item 2</li>
-          <li>Menu Item 3</li>
-        </ul>
-      </div>
-    </Sidebar>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const RightSide = Template.bind({});
-RightSide.args = {
-  side: "right",
-};
-
-export const FloatingVariant = Template.bind({});
-FloatingVariant.args = {
-  variant: "floating",
-};
-
-export const InsetVariant = Template.bind({});
-InsetVariant.args = {
-  variant: "inset",
-};
-
-export const IconCollapsible = Template.bind({});
-IconCollapsible.args = {
-  collapsible: "icon",
-};
-
-export const NonCollapsible = Template.bind({});
-NonCollapsible.args = {
-  collapsible: "none",
-};
-
-// Example with custom content and styling
-export const CustomStyling = Template.bind({});
-CustomStyling.args = {
-  className: "al-bg-primary al-text-primary-foreground",
-};
-
-// Example with controlled state
-export const ControlledState: StoryFn<typeof Sidebar> = (args) => {
-  return (
-    <div className="al-h-screen">
-      <SidebarProvider defaultOpen={false}>
-        <Sidebar {...args}>
-          <div className="al-p-4">
-            <h2 className="al-text-lg al-font-semibold">Controlled Sidebar</h2>
-            <p className="al-mt-2">This sidebar starts in a collapsed state.</p>
-          </div>
-        </Sidebar>
-      </SidebarProvider>
-    </div>
-  );
-};
-
-// Example with mobile view
-export const MobileView: StoryFn<typeof Sidebar> = (args) => {
-  return (
-    <div className="al-h-screen al-w-screen md:al-hidden">
-      <Sidebar {...args}>
-        <div className="al-p-4">
-          <h2 className="al-text-lg al-font-semibold">Mobile Sidebar</h2>
-          <p className="al-mt-2">This sidebar is optimized for mobile view.</p>
-        </div>
-      </Sidebar>
-    </div>
-  );
-};