@altimateai/ui-components 0.0.1-beta.10

package/dist/storybook/Slider.stories.tsx

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

package/dist/storybook/Switch.stories.tsx

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

package/dist/storybook/Textarea.stories.tsx

@@ -0,0 +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",
+};

package/dist/storybook/Toast.stories.tsx

@@ -0,0 +1,107 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Toast,
+  ToastProvider,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  ToastViewport,
+  Toaster,
+  Button,
+  toast,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Toast",
+  component: Toast,
+  decorators: [
+    Story => (
+      <ToastProvider>
+        <Story />
+        <Toaster />
+        <ToastViewport />
+      </ToastProvider>
+    ),
+  ],
+} as Meta;
+
+const Template: StoryFn = args => (
+  <Toast {...args}>
+    <ToastTitle>Toast Title</ToastTitle>
+    <ToastDescription>Toast description goes here.</ToastDescription>
+    <ToastClose />
+  </Toast>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: "default",
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  variant: "destructive",
+};
+
+export const WithAction: StoryFn = () => (
+  <Toast>
+    <ToastTitle>Scheduled: Catch up</ToastTitle>
+    <ToastDescription>Friday, February 10, 2024 at 5:57 PM</ToastDescription>
+    <ToastAction altText="Goto schedule to undo" onClick={() => {}}>
+      Undo
+    </ToastAction>
+    <ToastClose />
+  </Toast>
+);
+
+export const WithLongContent: StoryFn = () => (
+  <Toast>
+    <ToastTitle>Long Content Example</ToastTitle>
+    <ToastDescription>
+      This is a toast with a very long description that might wrap to multiple lines. It
+      demonstrates how the toast component handles longer content while maintaining its layout and
+      readability.
+    </ToastDescription>
+    <ToastClose />
+  </Toast>
+);
+
+export const Success: StoryFn = () => (
+  <Toast>
+    <div className="al-flex al-items-center al-gap-2">
+      <div className="al-h-6 al-w-6 al-text-green-500">✓</div>
+      <ToastTitle>Successfully saved!</ToastTitle>
+    </div>
+    <ToastDescription>Your changes have been saved successfully.</ToastDescription>
+    <ToastClose />
+  </Toast>
+);
+
+export const Error: StoryFn = () => (
+  <Toast variant="destructive">
+    <div className="al-flex al-items-center al-gap-2">
+      <div className="al-h-6 al-w-6 al-text-red-500">✕</div>
+      <ToastTitle>Error occurred</ToastTitle>
+    </div>
+    <ToastDescription>There was a problem with your request. Please try again.</ToastDescription>
+    <ToastAction altText="Try again" onClick={() => {}}>
+      Try again
+    </ToastAction>
+    <ToastClose />
+  </Toast>
+);
+
+export const OnClick: StoryFn = () => (
+  <Button
+    variant="outline"
+    onClick={() => {
+      toast({
+        title: "Uh oh! Something went wrong.",
+        description: "There was a problem with your request.",
+      });
+    }}
+  >
+    Show Toast
+  </Button>
+);

package/dist/storybook/Tooltip.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../shadcn";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Shadcn/Components/Tooltip",
+  component: Tooltip,
+  decorators: [
+    Story => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger>Hover me</TooltipTrigger>
+      <TooltipContent>
+        <p>Tooltip content</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};

package/dist/storybook/Typography.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Typography as Component } from "../shadcn";
+
+const meta = {
+  title: "Shadcn/Theme/Typography",
+  component: Component,
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Typography: Story = {
+  args: {
+    variant: "h1",
+    weight: "regular",
+    size: "md",
+    children: "Heading 1",
+  },
+  render: () => (
+    <div className="space-y-8">
+      {/* Heading 1 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h1" weight="regular">
+          Heading 1
+          <br /> Regular
+        </Component>
+        <Component variant="h1" weight="medium">
+          Heading 1 <br />
+          Medium
+        </Component>
+        <Component variant="h1" weight="semibold">
+          Heading 1 <br />
+          Semibold
+        </Component>
+        <Component variant="h1" weight="bold">
+          Heading 1 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          48px / Line height: 60px
+        </Component>
+      </div>
+
+      {/* Heading 2 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h2" weight="regular">
+          Heading 2 <br />
+          Regular
+        </Component>
+        <Component variant="h2" weight="medium">
+          Heading 2 <br />
+          Medium
+        </Component>
+        <Component variant="h2" weight="semibold">
+          Heading 2 <br />
+          Semibold
+        </Component>
+        <Component variant="h2" weight="bold">
+          Heading 2 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          36px / Line height: 44px
+        </Component>
+      </div>
+
+      {/* Heading 3 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h3" weight="regular">
+          Heading 3 <br />
+          Regular
+        </Component>
+        <Component variant="h3" weight="medium">
+          Heading 3 <br />
+          Medium
+        </Component>
+        <Component variant="h3" weight="semibold">
+          Heading 3 <br />
+          Semibold
+        </Component>
+        <Component variant="h3" weight="bold">
+          Heading 3 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          30px / Line height: 38px
+        </Component>
+      </div>
+
+      {/* Heading 4 Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h4" weight="regular">
+          Heading 4 <br />
+          Regular
+        </Component>
+        <Component variant="h4" weight="medium">
+          Heading 4 <br />
+          Medium
+        </Component>
+        <Component variant="h4" weight="semibold">
+          Heading 4 <br />
+          Semibold
+        </Component>
+        <Component variant="h4" weight="bold">
+          Heading 4 <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          24px / Line height: 32px
+        </Component>
+      </div>
+
+      {/* Subheading Variations */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="subheading" weight="regular">
+          Sub heading <br />
+          Regular
+        </Component>
+        <Component variant="subheading" weight="medium">
+          Sub heading <br />
+          Medium
+        </Component>
+        <Component variant="subheading" weight="semibold">
+          Sub heading <br />
+          Semibold
+        </Component>
+        <Component variant="subheading" weight="bold">
+          Sub heading <br />
+          Bold
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          20px / Line height: 30px
+        </Component>
+      </div>
+
+      {/* Body/Paragraph Example */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="body" size="sm">
+          Body SM <br /> Regular
+        </Component>
+        <Component variant="body" size="md">
+          Body MD <br /> Regular
+        </Component>
+        <Component variant="body" size="lg">
+          Body LG <br /> Regular
+        </Component>
+        <Component variant="body" size="xl">
+          Body XL <br /> Regular
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          20px, 16px, 14px, 12px | Line height: 30px, 24px, 20px, 18px
+        </Component>
+      </div>
+
+      {/* Caption Example */}
+      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="caption" size="sm">
+          Caption SM <br /> Regular
+        </Component>
+        <Component variant="caption" weight="medium" size="sm">
+          Caption SM <br /> Medium
+        </Component>
+        <Component variant="caption" weight="medium" size="md">
+          Caption MD <br /> Medium
+        </Component>
+        <Component variant="caption" weight="medium" size="lg">
+          Caption LG <br /> Medium
+        </Component>
+        <Component variant="caption" className="al-text-gray-500">
+          12px, 14px, 16px | Line height: 24px, 20px, 18px
+        </Component>
+      </div>
+    </div>
+  ),
+};