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

package/dist/storybook/Sidebar.stories.tsx

@@ -1,97 +1,97 @@
-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>
-  );
-};
+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 +1,79 @@
-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>
-);
+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 +1,90 @@
-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>
-);
+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/Textarea.stories.tsx

@@ -1,50 +1,50 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Textarea } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Textarea",
-  component: Textarea,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    placeholder: {
-      control: "text",
-    },
-    rows: {
-      control: "number",
-    },
-  },
-} as Meta;
-
-const Template: StoryFn = args => <Textarea {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: "Type your message here.",
-};
-
-export const WithRows = Template.bind({});
-WithRows.args = {
-  placeholder: "Type your message here.",
-  rows: 10,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  placeholder: "This textarea is disabled",
-  disabled: true,
-};
-
-export const WithValue = Template.bind({});
-WithValue.args = {
-  value:
-    "This is a pre-filled textarea with some content that demonstrates how the component handles longer text.",
-  rows: 5,
-};
-
-export const WithCustomClass = Template.bind({});
-WithCustomClass.args = {
-  placeholder: "Custom styled textarea",
-  className: "al-border-2 al-border-primary",
-};
+import { Meta, StoryFn } from "@storybook/react";
+import { Textarea } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Textarea",
+  component: Textarea,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    placeholder: {
+      control: "text",
+    },
+    rows: {
+      control: "number",
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => <Textarea {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: "Type your message here.",
+};
+
+export const WithRows = Template.bind({});
+WithRows.args = {
+  placeholder: "Type your message here.",
+  rows: 10,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: "This textarea is disabled",
+  disabled: true,
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  value:
+    "This is a pre-filled textarea with some content that demonstrates how the component handles longer text.",
+  rows: 5,
+};
+
+export const WithCustomClass = Template.bind({});
+WithCustomClass.args = {
+  placeholder: "Custom styled textarea",
+  className: "al-border-2 al-border-primary",
+};