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

package/dist/storybook/HoverCard.stories.tsx

@@ -1,99 +1,99 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Button,
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../shadcn";
-import { CloseIcon } from "@ac-assets/icons";
-
-export default {
-  title: "Shadcn/Components/HoverCard",
-  component: HoverCard,
-  parameters: {
-    layout: "centered",
-  },
-} as Meta;
-
-const Template: StoryFn = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="link">@nextjs</Button>
-    </HoverCardTrigger>
-    <HoverCardContent className="al-w-80">
-      <div className="al-flex al-justify-between al-space-x-4">
-        <Avatar>
-          <AvatarImage src="https://github.com/vercel.png" />
-          <AvatarFallback>VC</AvatarFallback>
-        </Avatar>
-        <div className="al-space-y-1">
-          <h4 className="al-text-sm al-font-semibold">@nextjs</h4>
-          <p className="al-text-sm">The React Framework – created and maintained by @vercel.</p>
-          <div className="al-flex al-items-center al-pt-2">
-            <CloseIcon className="al-mr-2 al-h-4 al-w-4 al-opacity-70" />{" "}
-            <span className="al-text-xs al-text-muted-foreground">Joined December 2021</span>
-          </div>
-        </div>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);
-
-export const Default = Template.bind({});
-
-export const WithCustomAlignment: StoryFn = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="outline">Hover (Right Aligned)</Button>
-    </HoverCardTrigger>
-    <HoverCardContent align="end" className="al-w-80">
-      <div className="al-space-y-2">
-        <h4 className="al-text-sm al-font-semibold">Right Aligned Content</h4>
-        <p className="al-text-sm">
-          This hover card&apos;s content is aligned to the end (right) of the trigger element. It
-          also has a custom width of 80 units.
-        </p>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);
-
-export const WithCustomOffset: StoryFn = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="outline">Hover (Custom Offset)</Button>
-    </HoverCardTrigger>
-    <HoverCardContent sideOffset={10}>
-      <div className="al-space-y-2">
-        <h4 className="al-text-sm al-font-semibold">Custom Offset Content</h4>
-        <p className="al-text-sm">
-          This hover card has a larger offset from the trigger element (10 units instead of the
-          default 4).
-        </p>
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);
-
-export const WithRichContent: StoryFn = () => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <Button variant="outline">User Profile</Button>
-    </HoverCardTrigger>
-    <HoverCardContent className="al-w-80">
-      <div className="al-flex al-justify-between al-space-x-4">
-        <div className="al-space-y-1">
-          <h4 className="al-text-sm al-font-semibold">@johndoe</h4>
-          <p className="al-text-sm">Staff Engineer at Acme Corp</p>
-          <div className="al-flex al-items-center al-pt-2">
-            <span className="al-text-xs al-text-muted-foreground">Joined December 2021</span>
-          </div>
-        </div>
-        <div className="al-w-12 al-h-12 al-rounded-full al-bg-secondary" />
-      </div>
-    </HoverCardContent>
-  </HoverCard>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../shadcn";
+import { CloseIcon } from "@ac-assets/icons";
+
+export default {
+  title: "Shadcn/Components/HoverCard",
+  component: HoverCard,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta;
+
+const Template: StoryFn = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="link">@nextjs</Button>
+    </HoverCardTrigger>
+    <HoverCardContent className="al-w-80">
+      <div className="al-flex al-justify-between al-space-x-4">
+        <Avatar>
+          <AvatarImage src="https://github.com/vercel.png" />
+          <AvatarFallback>VC</AvatarFallback>
+        </Avatar>
+        <div className="al-space-y-1">
+          <h4 className="al-text-sm al-font-semibold">@nextjs</h4>
+          <p className="al-text-sm">The React Framework – created and maintained by @vercel.</p>
+          <div className="al-flex al-items-center al-pt-2">
+            <CloseIcon className="al-mr-2 al-h-4 al-w-4 al-opacity-70" />{" "}
+            <span className="al-text-xs al-text-muted-foreground">Joined December 2021</span>
+          </div>
+        </div>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+export const Default = Template.bind({});
+
+export const WithCustomAlignment: StoryFn = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="outline">Hover (Right Aligned)</Button>
+    </HoverCardTrigger>
+    <HoverCardContent align="end" className="al-w-80">
+      <div className="al-space-y-2">
+        <h4 className="al-text-sm al-font-semibold">Right Aligned Content</h4>
+        <p className="al-text-sm">
+          This hover card&apos;s content is aligned to the end (right) of the trigger element. It
+          also has a custom width of 80 units.
+        </p>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+export const WithCustomOffset: StoryFn = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="outline">Hover (Custom Offset)</Button>
+    </HoverCardTrigger>
+    <HoverCardContent sideOffset={10}>
+      <div className="al-space-y-2">
+        <h4 className="al-text-sm al-font-semibold">Custom Offset Content</h4>
+        <p className="al-text-sm">
+          This hover card has a larger offset from the trigger element (10 units instead of the
+          default 4).
+        </p>
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);
+
+export const WithRichContent: StoryFn = () => (
+  <HoverCard>
+    <HoverCardTrigger asChild>
+      <Button variant="outline">User Profile</Button>
+    </HoverCardTrigger>
+    <HoverCardContent className="al-w-80">
+      <div className="al-flex al-justify-between al-space-x-4">
+        <div className="al-space-y-1">
+          <h4 className="al-text-sm al-font-semibold">@johndoe</h4>
+          <p className="al-text-sm">Staff Engineer at Acme Corp</p>
+          <div className="al-flex al-items-center al-pt-2">
+            <span className="al-text-xs al-text-muted-foreground">Joined December 2021</span>
+          </div>
+        </div>
+        <div className="al-w-12 al-h-12 al-rounded-full al-bg-secondary" />
+      </div>
+    </HoverCardContent>
+  </HoverCard>
+);

package/dist/storybook/Input.stories.tsx

@@ -1,53 +1,53 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Input } from "../shadcn";
-import { InputHTMLAttributes } from "react";
-
-type InputProps = InputHTMLAttributes<HTMLInputElement>;
-
-export default {
-  title: "Shadcn/Components/Input",
-  component: Input,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    type: {
-      control: "select",
-      options: ["text", "password", "email", "number"],
-    },
-  },
-} as Meta<typeof Input>;
-
-const Template: StoryFn<InputProps> = (args: InputProps) => <Input {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: "Enter text...",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  placeholder: "Disabled input",
-  disabled: true,
-};
-
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  placeholder: "Enter email",
-  type: "email",
-  id: "email",
-  "aria-label": "Email",
-};
-
-export const Password = Template.bind({});
-Password.args = {
-  type: "password",
-  placeholder: "Enter password",
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  placeholder: "Error state",
-  className: "border-red-500",
-  "aria-invalid": true,
-};
+import { Meta, StoryFn } from "@storybook/react";
+import { Input } from "../shadcn";
+import { InputHTMLAttributes } from "react";
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export default {
+  title: "Shadcn/Components/Input",
+  component: Input,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    type: {
+      control: "select",
+      options: ["text", "password", "email", "number"],
+    },
+  },
+} as Meta<typeof Input>;
+
+const Template: StoryFn<InputProps> = (args: InputProps) => <Input {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: "Enter text...",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: "Disabled input",
+  disabled: true,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  placeholder: "Enter email",
+  type: "email",
+  id: "email",
+  "aria-label": "Email",
+};
+
+export const Password = Template.bind({});
+Password.args = {
+  type: "password",
+  placeholder: "Enter password",
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  placeholder: "Error state",
+  className: "border-red-500",
+  "aria-invalid": true,
+};

package/dist/storybook/Label.stories.tsx

@@ -1,42 +1,42 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Label, Input } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Label",
-  component: Label,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-  },
-} as Meta;
-
-const Template: StoryFn = args => <Label {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  children: "Label Text",
-};
-
-export const WithInput = () => (
-  <div className="grid w-full max-w-sm items-center gap-1.5">
-    <Label htmlFor="email">Email</Label>
-    <Input type="email" id="email" placeholder="Enter your email" />
-  </div>
-);
-
-export const Required = Template.bind({});
-Required.args = {
-  children: (
-    <span>
-      Label Text <span className="text-red-500">*</span>
-    </span>
-  ),
-};
-
-export const Disabled = () => (
-  <div className="grid w-full max-w-sm items-center gap-1.5">
-    <Label htmlFor="disabled">Disabled Label</Label>
-    <Input id="disabled" disabled />
-  </div>
-);
+import { Meta, StoryFn } from "@storybook/react";
+import { Label, Input } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Label",
+  component: Label,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => <Label {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "Label Text",
+};
+
+export const WithInput = () => (
+  <div className="grid w-full max-w-sm items-center gap-1.5">
+    <Label htmlFor="email">Email</Label>
+    <Input type="email" id="email" placeholder="Enter your email" />
+  </div>
+);
+
+export const Required = Template.bind({});
+Required.args = {
+  children: (
+    <span>
+      Label Text <span className="text-red-500">*</span>
+    </span>
+  ),
+};
+
+export const Disabled = () => (
+  <div className="grid w-full max-w-sm items-center gap-1.5">
+    <Label htmlFor="disabled">Disabled Label</Label>
+    <Input id="disabled" disabled />
+  </div>
+);