@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/TagsInput.stories.tsx

@@ -1,261 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import {
-  TagsInput,
-  TagsInputLabel,
-  TagsInputList,
-  TagsInputInput,
-  TagsInputItem,
-  TagsInputClear,
-} from "../shadcn";
-
-const meta = {
-  title: "Shadcn/Components/TagsInput",
-  component: TagsInput,
-  argTypes: {
-    className: {
-      control: "text",
-      description: "Additional CSS classes",
-    },
-  },
-} satisfies Meta<typeof TagsInput>;
-
-export default meta;
-type Story = StoryObj<typeof TagsInput>;
-
-// Helper component for controlled stories
-const TagsInputDemo = ({
-  initialTags = [],
-  placeholder = "Add a tag...",
-  label,
-  showClear = false,
-  disabled = false,
-  maxTags,
-}: {
-  initialTags?: string[];
-  placeholder?: string;
-  label?: string;
-  showClear?: boolean;
-  disabled?: boolean;
-  maxTags?: number;
-}) => {
-  const [tags, setTags] = useState<string[]>(initialTags);
-
-  return (
-    <TagsInput value={tags} onValueChange={setTags} disabled={disabled} max={maxTags}>
-      {label && <TagsInputLabel>{label}</TagsInputLabel>}
-      <TagsInputList>
-        {tags.map(tag => (
-          <TagsInputItem key={tag} value={tag}>
-            {tag}
-          </TagsInputItem>
-        ))}
-        <TagsInputInput placeholder={placeholder} />
-        {showClear && <TagsInputClear />}
-      </TagsInputList>
-    </TagsInput>
-  );
-};
-
-export const Default: Story = {
-  render: () => <TagsInputDemo />,
-};
-
-export const WithLabel: Story = {
-  render: () => <TagsInputDemo label="Skills" placeholder="Add your skills..." />,
-};
-
-export const WithInitialTags: Story = {
-  render: () => (
-    <TagsInputDemo
-      initialTags={["React", "TypeScript", "JavaScript"]}
-      label="Technologies"
-      placeholder="Add more technologies..."
-    />
-  ),
-};
-
-export const WithClearButton: Story = {
-  render: () => (
-    <TagsInputDemo
-      initialTags={["Design", "Development", "Testing"]}
-      label="Categories"
-      placeholder="Add categories..."
-      showClear={true}
-    />
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <TagsInputDemo
-      initialTags={["Read-only", "Disabled"]}
-      label="Disabled Tags"
-      placeholder="Cannot add more..."
-      disabled={true}
-    />
-  ),
-};
-
-export const MaxTags: Story = {
-  render: () => (
-    <TagsInputDemo
-      initialTags={["Tag 1", "Tag 2"]}
-      label="Limited to 3 tags"
-      placeholder="Add up to 3 tags..."
-      maxTags={3}
-    />
-  ),
-};
-
-export const LongTags: Story = {
-  render: () => (
-    <TagsInputDemo
-      initialTags={[
-        "Very Long Tag Name That Might Overflow",
-        "Another Extremely Long Tag Name",
-        "Short",
-        "Medium Length Tag",
-      ]}
-      label="Long Tag Names"
-      placeholder="Add more tags..."
-    />
-  ),
-};
-
-export const ManyTags: Story = {
-  render: () => (
-    <TagsInputDemo
-      initialTags={[
-        "React",
-        "Vue",
-        "Angular",
-        "Svelte",
-        "TypeScript",
-        "JavaScript",
-        "Python",
-        "Java",
-        "Go",
-        "Rust",
-        "C++",
-        "C#",
-        "PHP",
-        "Ruby",
-        "Swift",
-      ]}
-      label="Programming Languages"
-      placeholder="Add more languages..."
-    />
-  ),
-};
-
-export const CustomWidth: Story = {
-  render: () => (
-    <div className="al-w-[600px]">
-      <TagsInputDemo
-        initialTags={["Wide", "Container", "Example"]}
-        label="Custom Width Container"
-        placeholder="Add tags in wide container..."
-      />
-    </div>
-  ),
-};
-
-export const FormExample: Story = {
-  render: () => (
-    <div className="al-space-y-4 al-p-4 al-border al-rounded-lg al-max-w-md">
-      <div>
-        <TagsInputDemo
-          label="Required Skills *"
-          placeholder="e.g., React, TypeScript..."
-          initialTags={["React"]}
-        />
-        <p className="al-text-sm al-text-muted-foreground al-mt-1">
-          Add the skills required for this position
-        </p>
-      </div>
-
-      <div>
-        <TagsInputDemo label="Nice to Have" placeholder="e.g., Docker, AWS..." />
-        <p className="al-text-sm al-text-muted-foreground al-mt-1">
-          Optional skills that would be beneficial
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-export const Interactive: Story = {
-  render: () => {
-    const [tags, setTags] = useState<string[]>(["Interactive", "Example"]);
-
-    return (
-      <div className="al-space-y-4">
-        <TagsInput value={tags} onValueChange={setTags}>
-          <TagsInputLabel>Interactive Demo</TagsInputLabel>
-          <TagsInputList>
-            {tags.map(tag => (
-              <TagsInputItem key={tag} value={tag}>
-                {tag}
-              </TagsInputItem>
-            ))}
-            <TagsInputInput placeholder="Type and press Enter..." />
-            <TagsInputClear />
-          </TagsInputList>
-        </TagsInput>
-
-        <div className="al-text-sm al-text-muted-foreground">
-          <strong>Current tags:</strong> {tags.length > 0 ? tags.join(", ") : "None"}
-        </div>
-
-        <div className="al-flex al-gap-2">
-          <button
-            className="al-px-3 al-py-1 al-text-xs al-bg-blue-500 al-text-white al-rounded hover:al-bg-blue-600"
-            onClick={() => setTags([...tags, `Tag ${tags.length + 1}`])}
-          >
-            Add Random Tag
-          </button>
-          <button
-            className="al-px-3 al-py-1 al-text-xs al-bg-red-500 al-text-white al-rounded hover:al-bg-red-600"
-            onClick={() => setTags([])}
-          >
-            Clear All
-          </button>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithSuggestions: Story = {
-  render: () => {
-    const [tags, setTags] = React.useState<string[]>([]);
-    return (
-      <div className="al-space-y-4 al-p-2">
-        <TagsInput
-          value={tags}
-          onValueChange={setTags}
-          suggestions={["React", "Vue", "Angular", "Svelte", "TypeScript", "JavaScript"]}
-          onSuggestionSelect={suggestion => {
-            setTags([...tags, suggestion]);
-          }}
-        >
-          <TagsInputLabel>With Suggestions Demo</TagsInputLabel>
-          <TagsInputList>
-            {tags.map(tag => (
-              <TagsInputItem key={tag} value={tag}>
-                {tag}
-              </TagsInputItem>
-            ))}
-            <TagsInputInput placeholder="Type and press Enter..." />
-            <TagsInputClear />
-          </TagsInputList>
-        </TagsInput>
-
-        <div className="al-text-sm al-text-muted-foreground">
-          <strong>Current tags:</strong> {tags.length > 0 ? tags.join(", ") : "None"}
-        </div>
-      </div>
-    );
-  },
-};

package/dist/storybook/Textarea.stories.tsx

@@ -1,50 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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/Toggle.stories.tsx

@@ -1,106 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Toggle } from "../shadcn";
-import { IconBold, IconItalic, IconUnderline, IconAlignLeft } from "@tabler/icons-react";
-
-const meta: Meta<typeof Toggle> = {
-  title: "Shadcn/Components/Toggle",
-  component: Toggle,
-  args: {
-    "aria-label": "Toggle demo",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = {
-  render: () => (
-    <Toggle>
-      <IconBold className="al-size-4" />
-    </Toggle>
-  ),
-};
-
-export const WithText: Story = {
-  render: () => (
-    <Toggle>
-      <IconBold className="al-size-4" />
-      <span>Bold</span>
-    </Toggle>
-  ),
-};
-
-export const Outline: Story = {
-  render: () => (
-    <Toggle variant="outline">
-      <IconItalic className="al-size-4" />
-    </Toggle>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Toggle disabled>
-      <IconUnderline className="al-size-4" />
-    </Toggle>
-  ),
-};
-
-export const DisabledPressed: Story = {
-  render: () => (
-    <Toggle disabled defaultPressed>
-      <IconBold className="al-size-4" />
-    </Toggle>
-  ),
-};
-
-export const Small: Story = {
-  render: () => (
-    <Toggle size="sm">
-      <IconBold className="al-size-4" />
-    </Toggle>
-  ),
-};
-
-export const Large: Story = {
-  render: () => (
-    <Toggle size="lg">
-      <IconBold className="al-size-4" />
-    </Toggle>
-  ),
-};
-
-export const FormattingToolbar: Story = {
-  render: () => (
-    <div className="al-flex al-gap-2">
-      <Toggle aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </Toggle>
-      <Toggle aria-label="Toggle italic">
-        <IconItalic className="al-size-4" />
-      </Toggle>
-      <Toggle aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </Toggle>
-      <Toggle aria-label="Toggle align left">
-        <IconAlignLeft className="al-size-4" />
-      </Toggle>
-    </div>
-  ),
-};
-
-export const OutlineVariants: Story = {
-  render: () => (
-    <div className="al-flex al-gap-2">
-      <Toggle variant="outline" size="sm" aria-label="Toggle bold small">
-        <IconBold className="al-size-4" />
-      </Toggle>
-      <Toggle variant="outline" aria-label="Toggle bold default">
-        <IconBold className="al-size-4" />
-      </Toggle>
-      <Toggle variant="outline" size="lg" aria-label="Toggle bold large">
-        <IconBold className="al-size-4" />
-      </Toggle>
-    </div>
-  ),
-};

package/dist/storybook/ToggleGroup.stories.tsx

@@ -1,178 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ToggleGroup, ToggleGroupItem } from "../shadcn";
-import {
-  IconBold,
-  IconItalic,
-  IconUnderline,
-  IconAlignLeft,
-  IconAlignCenter,
-  IconAlignRight,
-} from "@tabler/icons-react";
-
-const meta: Meta<typeof ToggleGroup> = {
-  title: "Shadcn/Components/ToggleGroup",
-  component: ToggleGroup,
-};
-
-export default meta;
-type Story = StoryObj<typeof ToggleGroup>;
-
-export const Default: Story = {
-  render: () => (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <IconItalic className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Multiple: Story = {
-  render: () => (
-    <ToggleGroup type="multiple">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <IconItalic className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Outline: Story = {
-  render: () => (
-    <ToggleGroup type="single" variant="outline">
-      <ToggleGroupItem value="left" aria-label="Align left">
-        <IconAlignLeft className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="center" aria-label="Align center">
-        <IconAlignCenter className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="right" aria-label="Align right">
-        <IconAlignRight className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Small: Story = {
-  render: () => (
-    <ToggleGroup type="single" size="sm">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <IconItalic className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Large: Story = {
-  render: () => (
-    <ToggleGroup type="single" size="lg">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <IconItalic className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const WithText: Story = {
-  render: () => (
-    <ToggleGroup type="single" variant="outline">
-      <ToggleGroupItem value="left" aria-label="Align left">
-        <IconAlignLeft className="al-size-4" />
-        <span>Left</span>
-      </ToggleGroupItem>
-      <ToggleGroupItem value="center" aria-label="Align center">
-        <IconAlignCenter className="al-size-4" />
-        <span>Center</span>
-      </ToggleGroupItem>
-      <ToggleGroupItem value="right" aria-label="Align right">
-        <IconAlignRight className="al-size-4" />
-        <span>Right</span>
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic" disabled>
-        <IconItalic className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const DefaultValue: Story = {
-  render: () => (
-    <ToggleGroup type="single" defaultValue="italic" variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <IconBold className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <IconItalic className="al-size-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <IconUnderline className="al-size-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const FormattingToolbar: Story = {
-  render: () => (
-    <div className="al-flex al-flex-col al-gap-4">
-      <ToggleGroup type="multiple" variant="outline">
-        <ToggleGroupItem value="bold" aria-label="Toggle bold">
-          <IconBold className="al-size-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="italic" aria-label="Toggle italic">
-          <IconItalic className="al-size-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="underline" aria-label="Toggle underline">
-          <IconUnderline className="al-size-4" />
-        </ToggleGroupItem>
-      </ToggleGroup>
-      <ToggleGroup type="single" variant="outline">
-        <ToggleGroupItem value="left" aria-label="Align left">
-          <IconAlignLeft className="al-size-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="center" aria-label="Align center">
-          <IconAlignCenter className="al-size-4" />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="right" aria-label="Align right">
-          <IconAlignRight className="al-size-4" />
-        </ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  ),
-};