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

package/dist/storybook/Accordion.stories.tsx

@@ -1,52 +1,52 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../shadcn";
-
-const meta: Meta<typeof Accordion> = {
-  title: "Shadcn/Components/Accordion",
-  component: Accordion,
-};
-
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-
-export const Default: Story = {
-  render: () => (
-    <Accordion type="single" collapsible className="al-w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that matches the other components&apos; aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It&apos;s animated by default, but you can disable it if you prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const Multiple: Story = {
-  render: () => (
-    <Accordion type="multiple" className="al-w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
-        <AccordionContent>
-          Yes. Just set the type prop to &quot;multiple&quot; on the Accordion component.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Can I customize the styling?</AccordionTrigger>
-        <AccordionContent>
-          Yes. The component accepts className props for customization.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../shadcn";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Shadcn/Components/Accordion",
+  component: Accordion,
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="al-w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It&apos;s animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="al-w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
+        <AccordionContent>
+          Yes. Just set the type prop to &quot;multiple&quot; on the Accordion component.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Can I customize the styling?</AccordionTrigger>
+        <AccordionContent>
+          Yes. The component accepts className props for customization.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/dist/storybook/Alert.stories.tsx

@@ -1,61 +1,61 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Alert, AlertTitle, AlertDescription } from "../shadcn";
-import { InfoCircleIcon } from "@ac-assets/icons";
-
-export default {
-  title: "Shadcn/Components/Alert",
-  component: Alert,
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "destructive"],
-    },
-  },
-} as Meta;
-
-const Template: StoryFn = args => (
-  <Alert {...args}>
-    <AlertTitle>Heads up!</AlertTitle>
-    <AlertDescription>
-      You can add components and dependencies to your app using the cli.
-    </AlertDescription>
-  </Alert>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  variant: "default",
-};
-
-export const Destructive = Template.bind({});
-Destructive.args = {
-  variant: "destructive",
-};
-
-export const WithIcon: StoryFn = () => (
-  <Alert>
-    <InfoCircleIcon className="al-h-4 al-w-4" />
-    <AlertTitle>Info Alert</AlertTitle>
-    <AlertDescription>This is an informational alert with an icon.</AlertDescription>
-  </Alert>
-);
-
-export const DestructiveWithIcon: StoryFn = () => (
-  <Alert variant="destructive">
-    <InfoCircleIcon className="al-h-4 al-w-4" />
-    <AlertTitle>Error Alert</AlertTitle>
-    <AlertDescription>Something went wrong! Please try again later.</AlertDescription>
-  </Alert>
-);
-
-export const TitleOnly: StoryFn = () => (
-  <Alert>
-    <AlertTitle>Simple Alert with Title Only</AlertTitle>
-  </Alert>
-);
-
-export const DescriptionOnly: StoryFn = () => (
-  <Alert>
-    <AlertDescription>Simple Alert with Description Only</AlertDescription>
-  </Alert>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { Alert, AlertTitle, AlertDescription } from "../shadcn";
+import { InfoCircleIcon } from "@ac-assets/icons";
+
+export default {
+  title: "Shadcn/Components/Alert",
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive"],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => (
+  <Alert {...args}>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components and dependencies to your app using the cli.
+    </AlertDescription>
+  </Alert>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: "default",
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  variant: "destructive",
+};
+
+export const WithIcon: StoryFn = () => (
+  <Alert>
+    <InfoCircleIcon className="al-h-4 al-w-4" />
+    <AlertTitle>Info Alert</AlertTitle>
+    <AlertDescription>This is an informational alert with an icon.</AlertDescription>
+  </Alert>
+);
+
+export const DestructiveWithIcon: StoryFn = () => (
+  <Alert variant="destructive">
+    <InfoCircleIcon className="al-h-4 al-w-4" />
+    <AlertTitle>Error Alert</AlertTitle>
+    <AlertDescription>Something went wrong! Please try again later.</AlertDescription>
+  </Alert>
+);
+
+export const TitleOnly: StoryFn = () => (
+  <Alert>
+    <AlertTitle>Simple Alert with Title Only</AlertTitle>
+  </Alert>
+);
+
+export const DescriptionOnly: StoryFn = () => (
+  <Alert>
+    <AlertDescription>Simple Alert with Description Only</AlertDescription>
+  </Alert>
+);

package/dist/storybook/AlertDialog.stories.tsx

@@ -1,161 +1,161 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/AlertDialog",
-  component: AlertDialog,
-} as Meta;
-
-const Template: StoryFn = () => (
-  <AlertDialog>
-    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-        <AlertDialogDescription>
-          This action cannot be undone. This will permanently delete your account and remove your
-          data from our servers.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Continue</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const Default = Template.bind({});
-
-export const DestructiveAction: StoryFn = () => (
-  <AlertDialog>
-    <AlertDialogTrigger className="al-bg-destructive al-text-destructive-foreground hover:al-bg-destructive/90 al-h-10 al-px-4 al-py-2 al-rounded-md">
-      Delete Account
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Delete Account</AlertDialogTitle>
-        <AlertDialogDescription>
-          This will permanently delete your account and remove all your data. This action cannot be
-          undone.
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction className="al-bg-destructive al-text-destructive-foreground hover:al-bg-destructive/90">
-          Delete
-        </AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const WithCustomTrigger: StoryFn = () => (
-  <AlertDialog>
-    <AlertDialogTrigger asChild>
-      <button className="al-rounded-full al-bg-primary al-p-2">
-        <span className="al-sr-only">Open Dialog</span>
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <path d="M3 6h18" />
-          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-        </svg>
-      </button>
-    </AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Delete Item</AlertDialogTitle>
-        <AlertDialogDescription>Are you sure you want to delete this item?</AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Delete</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const WithForm: StoryFn = () => (
-  <AlertDialog>
-    <AlertDialogTrigger>Unsubscribe</AlertDialogTrigger>
-    <AlertDialogContent>
-      <AlertDialogHeader>
-        <AlertDialogTitle>Unsubscribe from Newsletter</AlertDialogTitle>
-        <AlertDialogDescription>
-          Please tell us why you&apos;re unsubscribing:
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <div className="al-grid al-gap-4 al-py-4">
-        <div className="al-grid al-gap-2">
-          <label htmlFor="reason" className="al-text-sm al-font-medium al-leading-none">
-            Reason
-          </label>
-          <select
-            id="reason"
-            className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-px-3 al-py-2 al-text-sm al-ring-offset-background"
-          >
-            <option>Too many emails</option>
-            <option>Content not relevant</option>
-            <option>Other</option>
-          </select>
-        </div>
-      </div>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Cancel</AlertDialogCancel>
-        <AlertDialogAction>Confirm</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
-
-export const LongContent: StoryFn = () => (
-  <AlertDialog>
-    <AlertDialogTrigger>Show Terms</AlertDialogTrigger>
-    <AlertDialogContent className="al-max-h-[90vh] al-overflow-y-auto">
-      <AlertDialogHeader>
-        <AlertDialogTitle>Terms of Service</AlertDialogTitle>
-        <AlertDialogDescription className="al-whitespace-pre-line">
-          {`Please read these terms carefully before using our service.
-          
-          1. Introduction
-          These terms and conditions govern your use of our service.
-          
-          2. Acceptance of Terms
-          By accessing or using our service, you agree to be bound by these terms.
-          
-          3. Privacy Policy
-          Your privacy is important to us. Please review our privacy policy.
-          
-          4. User Obligations
-          You agree to use our service in accordance with these terms.
-          
-          5. Termination
-          We reserve the right to terminate your access to our service.`}
-        </AlertDialogDescription>
-      </AlertDialogHeader>
-      <AlertDialogFooter>
-        <AlertDialogCancel>Decline</AlertDialogCancel>
-        <AlertDialogAction>Accept</AlertDialogAction>
-      </AlertDialogFooter>
-    </AlertDialogContent>
-  </AlertDialog>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/AlertDialog",
+  component: AlertDialog,
+} as Meta;
+
+const Template: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete your account and remove your
+          data from our servers.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const Default = Template.bind({});
+
+export const DestructiveAction: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger className="al-bg-destructive al-text-destructive-foreground hover:al-bg-destructive/90 al-h-10 al-px-4 al-py-2 al-rounded-md">
+      Delete Account
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Account</AlertDialogTitle>
+        <AlertDialogDescription>
+          This will permanently delete your account and remove all your data. This action cannot be
+          undone.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction className="al-bg-destructive al-text-destructive-foreground hover:al-bg-destructive/90">
+          Delete
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const WithCustomTrigger: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <button className="al-rounded-full al-bg-primary al-p-2">
+        <span className="al-sr-only">Open Dialog</span>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M3 6h18" />
+          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+        </svg>
+      </button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Item</AlertDialogTitle>
+        <AlertDialogDescription>Are you sure you want to delete this item?</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const WithForm: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger>Unsubscribe</AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Unsubscribe from Newsletter</AlertDialogTitle>
+        <AlertDialogDescription>
+          Please tell us why you&apos;re unsubscribing:
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <div className="al-grid al-gap-4 al-py-4">
+        <div className="al-grid al-gap-2">
+          <label htmlFor="reason" className="al-text-sm al-font-medium al-leading-none">
+            Reason
+          </label>
+          <select
+            id="reason"
+            className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-px-3 al-py-2 al-text-sm al-ring-offset-background"
+          >
+            <option>Too many emails</option>
+            <option>Content not relevant</option>
+            <option>Other</option>
+          </select>
+        </div>
+      </div>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Confirm</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const LongContent: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger>Show Terms</AlertDialogTrigger>
+    <AlertDialogContent className="al-max-h-[90vh] al-overflow-y-auto">
+      <AlertDialogHeader>
+        <AlertDialogTitle>Terms of Service</AlertDialogTitle>
+        <AlertDialogDescription className="al-whitespace-pre-line">
+          {`Please read these terms carefully before using our service.
+          
+          1. Introduction
+          These terms and conditions govern your use of our service.
+          
+          2. Acceptance of Terms
+          By accessing or using our service, you agree to be bound by these terms.
+          
+          3. Privacy Policy
+          Your privacy is important to us. Please review our privacy policy.
+          
+          4. User Obligations
+          You agree to use our service in accordance with these terms.
+          
+          5. Termination
+          We reserve the right to terminate your access to our service.`}
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Decline</AlertDialogCancel>
+        <AlertDialogAction>Accept</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);