@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/Pagination.stories.tsx

@@ -1,152 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Pagination",
-  component: Pagination,
-} as Meta;
-
-export const Default: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const WithEllipsis: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationEllipsis />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">10</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const ManyPages: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">1</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          3
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">4</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">5</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const WithDisabledControls: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" className="pointer-events-none opacity-50" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const CustomStyling: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious
-          href="#"
-          className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
-        />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink
-          href="#"
-          className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
-        >
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          2
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext
-          href="#"
-          className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
-        />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);

package/dist/storybook/Popover.stories.tsx

@@ -1,23 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Popover, PopoverContent, PopoverTrigger, Button } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Popover",
-  component: Popover,
-} as Meta;
-
-const Template: StoryFn = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button variant="outline">Open Popover</Button>
-    </PopoverTrigger>
-    <PopoverContent>
-      <div className="al-space-y-2">
-        <h4 className="al-font-medium al-leading-none">Popover Content</h4>
-        <p className="al-text-sm al-text-muted-foreground">This is the popover content.</p>
-      </div>
-    </PopoverContent>
-  </Popover>
-);
-
-export const Default = Template.bind({});

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,58 +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,101 +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,145 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectValue,
-  SelectGroup,
-  SelectLabel,
-  SelectSeparator,
-  NativeSelect,
-} from "../shadcn";
-import { DatabaseIcon } from "@ac-assets/icons";
-
-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>
-);
-
-export const NativeSelectExample: StoryFn = () => {
-  const options = [
-    { value: "apple", label: "Apple" },
-    { value: "banana", label: "Banana" },
-    { value: "orange", label: "Orange" },
-  ];
-
-  return (
-    <div className="al-flex al-flex-col al-gap-4">
-      <NativeSelect
-        options={options}
-        placeholder="Default variant"
-        onChange={value => console.log("Selected:", value)}
-        icon={<DatabaseIcon />}
-      />
-
-      <NativeSelect
-        options={options}
-        placeholder="Outline variant"
-        variant="outline"
-        onChange={value => console.log("Selected:", value)}
-      />
-
-      <NativeSelect
-        options={options}
-        placeholder="Secondary variant (small)"
-        variant="secondary"
-        size="sm"
-      />
-
-      <NativeSelect
-        options={options}
-        placeholder="Success variant (large)"
-        variant="success"
-        size="lg"
-      />
-
-      <NativeSelect options={options} placeholder="Destructive variant" variant="destructive" />
-
-      <NativeSelect options={options} placeholder="Ghost variant" variant="ghost" />
-
-      <NativeSelect options={options} placeholder="Disabled select" disabled />
-
-      <NativeSelect options={options} placeholder="With default value" value="banana" />
-    </div>
-  );
-};