@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/Sheet.stories.tsx

@@ -1,69 +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>
-  );
-};

package/dist/storybook/Slider.stories.tsx

@@ -1,79 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Slider } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Slider",
-  component: Slider,
-  argTypes: {
-    defaultValue: {
-      control: "object",
-    },
-    min: {
-      control: "number",
-    },
-    max: {
-      control: "number",
-    },
-    step: {
-      control: "number",
-    },
-    disabled: {
-      control: "boolean",
-    },
-  },
-} as Meta<typeof Slider>;
-
-const Template: StoryFn = args => (
-  <div className="al-w-[60%] al-space-y-4">
-    <Slider {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  defaultValue: [50],
-  max: 100,
-  step: 1,
-};
-
-export const WithSteps = Template.bind({});
-WithSteps.args = {
-  defaultValue: [0],
-  max: 100,
-  step: 10,
-};
-
-export const Range = Template.bind({});
-Range.args = {
-  defaultValue: [25, 75],
-  max: 100,
-  step: 1,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  defaultValue: [50],
-  max: 100,
-  step: 1,
-  disabled: true,
-};
-
-export const CustomRange = Template.bind({});
-CustomRange.args = {
-  defaultValue: [40],
-  min: -50,
-  max: 50,
-  step: 5,
-};
-
-export const WithLabels: StoryFn = () => (
-  <div className="al-w-[60%] al-space-y-4">
-    <div className="al-grid al-gap-4 al-pt-4">
-      <div className="al-flex al-items-center al-justify-between">
-        <label className="al-text-sm al-font-medium">Volume</label>
-        <span className="al-w-12 al-rounded-md al-text-right al-text-sm">50%</span>
-      </div>
-      <Slider defaultValue={[50]} max={100} step={1} />
-    </div>
-  </div>
-);

package/dist/storybook/Switch.stories.tsx

@@ -1,90 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Switch } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Switch",
-  component: Switch,
-  argTypes: {
-    checked: {
-      control: "boolean",
-    },
-    disabled: {
-      control: "boolean",
-    },
-    defaultChecked: {
-      control: "boolean",
-    },
-    onCheckedChange: { action: "checked changed" },
-  },
-} as Meta;
-
-const Template: StoryFn = args => <Switch {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  "aria-label": "Switch demo",
-};
-
-export const Checked = Template.bind({});
-Checked.args = {
-  defaultChecked: true,
-  "aria-label": "Switch demo",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  "aria-label": "Switch demo",
-};
-
-export const DisabledChecked = Template.bind({});
-DisabledChecked.args = {
-  disabled: true,
-  defaultChecked: true,
-  "aria-label": "Switch demo",
-};
-
-export const WithLabel: StoryFn = () => (
-  <div className="al-flex al-items-center al-space-x-2">
-    <Switch id="airplane-mode" />
-    <label
-      htmlFor="airplane-mode"
-      className="al-text-sm al-font-medium al-leading-none al-peer-disabled:al-cursor-not-allowed al-peer-disabled:al-opacity-70"
-    >
-      Airplane Mode
-    </label>
-  </div>
-);
-
-export const WithDescription: StoryFn = () => (
-  <div className="al-flex al-flex-col al-space-y-2">
-    <div className="al-flex al-items-center al-space-x-2">
-      <Switch id="notifications" />
-      <label htmlFor="notifications" className="al-text-sm al-font-medium al-leading-none">
-        Enable Notifications
-      </label>
-    </div>
-    <p className="al-text-sm al-text-muted-foreground">
-      You will receive notifications when someone mentions you in a comment.
-    </p>
-  </div>
-);
-
-export const InForm: StoryFn = () => (
-  <form className="al-w-full al-max-w-sm">
-    <div className="al-flex al-flex-col al-space-y-4">
-      <div className="al-flex al-items-center al-justify-between">
-        <label htmlFor="marketing" className="al-text-sm al-font-medium al-leading-none">
-          Marketing emails
-        </label>
-        <Switch id="marketing" />
-      </div>
-      <div className="al-flex al-items-center al-justify-between">
-        <label htmlFor="newsletter" className="al-text-sm al-font-medium al-leading-none">
-          Weekly newsletter
-        </label>
-        <Switch id="newsletter" defaultChecked />
-      </div>
-    </div>
-  </form>
-);

package/dist/storybook/Tabs.stories.tsx

@@ -1,147 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Tabs",
-  component: Tabs,
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["default", "underlined"],
-    },
-  },
-} as Meta;
-
-export const Default: StoryFn = args => (
-  <Tabs defaultValue="tab1" {...args}>
-    <TabsList>
-      <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-      <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-      <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-    </TabsList>
-    <TabsContent value="tab1">Content for Tab 1</TabsContent>
-    <TabsContent value="tab2">Content for Tab 2</TabsContent>
-    <TabsContent value="tab3">Content for Tab 3</TabsContent>
-  </Tabs>
-);
-Default.args = {
-  variant: "default",
-};
-
-export const Underlined: StoryFn = args => (
-  <Tabs defaultValue="overview" variant="underlined" {...args}>
-    <TabsList>
-      <TabsTrigger value="overview">Overview</TabsTrigger>
-      <TabsTrigger value="analytics">Analytics</TabsTrigger>
-      <TabsTrigger value="reports">Reports</TabsTrigger>
-    </TabsList>
-    <TabsContent value="overview">
-      <div className="al-p-4">
-        <h3 className="al-text-lg al-font-semibold al-mb-2">Overview</h3>
-        <p className="al-text-gray-600">Overview content goes here with detailed information.</p>
-      </div>
-    </TabsContent>
-    <TabsContent value="analytics">
-      <div className="al-p-4">
-        <h3 className="al-text-lg al-font-semibold al-mb-2">Analytics</h3>
-        <p className="al-text-gray-600">Analytics content with charts and data.</p>
-      </div>
-    </TabsContent>
-    <TabsContent value="reports">
-      <div className="al-p-4">
-        <h3 className="al-text-lg al-font-semibold al-mb-2">Reports</h3>
-        <p className="al-text-gray-600">Reports content with downloadable files.</p>
-      </div>
-    </TabsContent>
-  </Tabs>
-);
-
-export const WithRichContent: StoryFn = args => (
-  <Tabs defaultValue="profile" variant="underlined" {...args}>
-    <TabsList>
-      <TabsTrigger value="profile">Profile</TabsTrigger>
-      <TabsTrigger value="settings">Settings</TabsTrigger>
-      <TabsTrigger value="security">Security</TabsTrigger>
-    </TabsList>
-    <TabsContent value="profile">
-      <div className="al-p-4">
-        <h3 className="al-text-lg al-font-semibold al-mb-2">User Profile</h3>
-        <p className="al-text-gray-600 al-mb-4">Manage your profile information</p>
-        <div className="al-space-y-2">
-          <div className="al-flex al-items-center al-gap-2">
-            <span className="al-font-medium">Name:</span>
-            <span>John Doe</span>
-          </div>
-          <div className="al-flex al-items-center al-gap-2">
-            <span className="al-font-medium">Email:</span>
-            <span>john.doe@example.com</span>
-          </div>
-        </div>
-      </div>
-    </TabsContent>
-    <TabsContent value="settings">
-      <div className="al-p-4">
-        <h3 className="al-text-lg al-font-semibold al-mb-2">Settings</h3>
-        <div className="al-space-y-4">
-          <div className="al-flex al-items-center al-justify-between">
-            <span>Notifications</span>
-            <span className="al-text-sm al-text-gray-500">Enabled</span>
-          </div>
-          <div className="al-flex al-items-center al-justify-between">
-            <span>Dark Mode</span>
-            <span className="al-text-sm al-text-gray-500">Disabled</span>
-          </div>
-        </div>
-      </div>
-    </TabsContent>
-    <TabsContent value="security">
-      <div className="al-p-4">
-        <h3 className="al-text-lg al-font-semibold al-mb-2">Security</h3>
-        <p className="al-text-gray-600">Manage your security settings</p>
-      </div>
-    </TabsContent>
-  </Tabs>
-);
-
-export const ManyTabs: StoryFn = args => (
-  <Tabs defaultValue="home" variant="underlined" {...args}>
-    <TabsList>
-      <TabsTrigger value="home">Home</TabsTrigger>
-      <TabsTrigger value="about">About</TabsTrigger>
-      <TabsTrigger value="services">Services</TabsTrigger>
-      <TabsTrigger value="portfolio">Portfolio</TabsTrigger>
-      <TabsTrigger value="contact">Contact</TabsTrigger>
-    </TabsList>
-    <TabsContent value="home">Home content</TabsContent>
-    <TabsContent value="about">About content</TabsContent>
-    <TabsContent value="services">Services content</TabsContent>
-    <TabsContent value="portfolio">Portfolio content</TabsContent>
-    <TabsContent value="contact">Contact content</TabsContent>
-  </Tabs>
-);
-
-export const LongLabels: StoryFn = args => (
-  <Tabs defaultValue="dashboard" variant="underlined" {...args}>
-    <TabsList>
-      <TabsTrigger value="dashboard">Dashboard Overview</TabsTrigger>
-      <TabsTrigger value="analytics">Analytics & Reports</TabsTrigger>
-      <TabsTrigger value="users">User Management</TabsTrigger>
-    </TabsList>
-    <TabsContent value="dashboard">Dashboard overview content</TabsContent>
-    <TabsContent value="analytics">Analytics and reports content</TabsContent>
-    <TabsContent value="users">User management content</TabsContent>
-  </Tabs>
-);
-
-export const MinimalContent: StoryFn = args => (
-  <Tabs defaultValue="a" variant="underlined" {...args}>
-    <TabsList>
-      <TabsTrigger value="a">Tab A</TabsTrigger>
-      <TabsTrigger value="b">Tab B</TabsTrigger>
-      <TabsTrigger value="c">Tab C</TabsTrigger>
-    </TabsList>
-    <TabsContent value="a">A</TabsContent>
-    <TabsContent value="b">B</TabsContent>
-    <TabsContent value="c">C</TabsContent>
-  </Tabs>
-);