@altimateai/ui-components 0.0.1-beta.3 → 0.0.1-beta.4

package/dist/storybook/Form.stories.tsx

@@ -1,120 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { useForm } from "react-hook-form";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Form",
-  component: Form,
-} as Meta;
-
-const Template: StoryFn = () => {
-  const form = useForm({
-    defaultValues: {
-      username: "",
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form className="al-space-y-8">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <input
-                  {...field}
-                  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"
-                />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-};
-
-export const Default = Template.bind({});
-
-export const WithValidation: StoryFn = () => {
-  const form = useForm({
-    defaultValues: {
-      username: "",
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form className="al-space-y-8">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <input
-                  {...field}
-                  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"
-                />
-              </FormControl>
-              <FormDescription>
-                Username must be at least 2 characters.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-};
-
-export const WithError: StoryFn = () => {
-  const form = useForm({
-    defaultValues: {
-      username: "a",
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <form className="al-space-y-8">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <input
-                  {...field}
-                  className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-destructive al-bg-background al-px-3 al-py-2 al-text-sm"
-                />
-              </FormControl>
-              <FormDescription>
-                Username must be at least 2 characters.
-              </FormDescription>
-              <FormMessage>Username is too short</FormMessage>
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-};

package/dist/storybook/HoverCard.stories.tsx

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

package/dist/storybook/Menubar.stories.tsx

@@ -1,159 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSubTrigger,
-  MenubarSubContent,
-  MenubarLabel,
-  MenubarSub,
-} from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Menubar",
-  component: Menubar,
-} as Meta;
-
-export const Default: StoryFn = () => (
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          New Window <MenubarShortcut>⌘N</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem disabled>New Incognito Window</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>
-          Share <MenubarShortcut>⌘S</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>
-          Print... <MenubarShortcut>⌘P</MenubarShortcut>
-        </MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);
-
-export const WithSubmenus: StoryFn = () => (
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>Edit</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarSub>
-          <MenubarSubTrigger>Find</MenubarSubTrigger>
-          <MenubarSubContent>
-            <MenubarItem>Search the web</MenubarItem>
-            <MenubarItem>Find in page</MenubarItem>
-            <MenubarItem>Find in files</MenubarItem>
-          </MenubarSubContent>
-        </MenubarSub>
-        <MenubarSeparator />
-        <MenubarItem>Cut</MenubarItem>
-        <MenubarItem>Copy</MenubarItem>
-        <MenubarItem>Paste</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);
-
-export const WithCheckboxItems: StoryFn = () => (
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>View</MenubarTrigger>
-      <MenubarContent>
-        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-        <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
-        <MenubarSeparator />
-        <MenubarItem inset>Reload</MenubarItem>
-        <MenubarItem disabled inset>
-          Force Reload
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);
-
-export const WithRadioItems: StoryFn = () => (
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger>Zoom</MenubarTrigger>
-      <MenubarContent>
-        <MenubarRadioGroup value="100%">
-          <MenubarRadioItem value="50%">50%</MenubarRadioItem>
-          <MenubarRadioItem value="75%">75%</MenubarRadioItem>
-          <MenubarRadioItem value="100%">100%</MenubarRadioItem>
-          <MenubarRadioItem value="150%">150%</MenubarRadioItem>
-          <MenubarRadioItem value="200%">200%</MenubarRadioItem>
-        </MenubarRadioGroup>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);
-
-export const CompleteExample: StoryFn = () => (
-  <Menubar className="al-w-[600px]">
-    <MenubarMenu>
-      <MenubarTrigger>File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>New Window</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Share</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Print</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>Edit</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>Undo</MenubarItem>
-        <MenubarItem>Redo</MenubarItem>
-        <MenubarSeparator />
-        <MenubarSub>
-          <MenubarSubTrigger>Find</MenubarSubTrigger>
-          <MenubarSubContent>
-            <MenubarItem>Search Web</MenubarItem>
-            <MenubarItem>Find in Page</MenubarItem>
-          </MenubarSubContent>
-        </MenubarSub>
-      </MenubarContent>
-    </MenubarMenu>
-    <MenubarMenu>
-      <MenubarTrigger>View</MenubarTrigger>
-      <MenubarContent>
-        <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
-        <MenubarCheckboxItem checked>Show Statusbar</MenubarCheckboxItem>
-        <MenubarSeparator />
-        <MenubarRadioGroup value="medium">
-          <MenubarLabel inset>Zoom</MenubarLabel>
-          <MenubarRadioItem value="small">Small</MenubarRadioItem>
-          <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
-          <MenubarRadioItem value="large">Large</MenubarRadioItem>
-        </MenubarRadioGroup>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);

package/dist/storybook/Pagination.stories.tsx

@@ -1,155 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Pagination",
-  component: Pagination,
-} as Meta;
-
-export const Default: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const WithEllipsis: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationEllipsis />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">10</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const ManyPages: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious href="#" />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">1</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          3
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">4</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">5</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const WithDisabledControls: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious
-          href="#"
-          className="pointer-events-none opacity-50"
-        />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">2</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext href="#" />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);
-
-export const CustomStyling: StoryFn = () => (
-  <Pagination>
-    <PaginationContent>
-      <PaginationItem>
-        <PaginationPrevious
-          href="#"
-          className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
-        />
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink
-          href="#"
-          className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
-        >
-          1
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#" isActive>
-          2
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink href="#">3</PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationNext
-          href="#"
-          className="al-bg-primary al-text-primary-foreground hover:al-bg-primary/90"
-        />
-      </PaginationItem>
-    </PaginationContent>
-  </Pagination>
-);

package/dist/storybook/Popover.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Popover, PopoverContent, PopoverTrigger, Button } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/Popover",
-  component: Popover,
-} as Meta;
-
-const Template: StoryFn = () => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button variant="outline">Open Popover</Button>
-    </PopoverTrigger>
-    <PopoverContent>
-      <div className="al-space-y-2">
-        <h4 className="al-font-medium al-leading-none">Popover Content</h4>
-        <p className="al-text-sm al-text-muted-foreground">
-          This is the popover content.
-        </p>
-      </div>
-    </PopoverContent>
-  </Popover>
-);
-
-export const Default = Template.bind({});