@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/InputGroup.stories.tsx

@@ -1,352 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-} from "../shadcn";
-import {
-  IconSearch,
-  IconMail,
-  IconUser,
-  IconCreditCard,
-  IconCopy,
-  IconX,
-  IconGlobe,
-  IconLoader2,
-  IconCornerDownLeft,
-  IconBrandJavascript,
-  IconRefresh,
-  IconInfoCircle,
-  IconPlus,
-  IconCheck,
-  IconArrowUp,
-} from "@tabler/icons-react";
-import { Tooltip } from "../shadcn";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../shadcn";
-import { Separator } from "../shadcn";
-
-export default {
-  title: "Shadcn/Components/InputGroup",
-  component: InputGroup,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    className: {
-      control: "text",
-    },
-  },
-} as Meta<typeof InputGroup>;
-
-export const Default: StoryFn = () => (
-  <div className="al-grid al-w-full al-max-w-sm al-gap-6 al-p-4">
-    <InputGroup>
-      <InputGroupInput placeholder="Search..." />
-      <InputGroupAddon>
-        <IconSearch />
-      </InputGroupAddon>
-      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-    </InputGroup>
-    <InputGroup>
-      <InputGroupInput placeholder="example.com" className="!al-pl-1" />
-      <InputGroupAddon>
-        <InputGroupText>https://</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupAddon align="inline-end">
-        <Tooltip title="This is content in a tooltip.">
-          <InputGroupButton className="!al-rounded-full" size="icon">
-            <IconInfoCircle />
-          </InputGroupButton>
-        </Tooltip>
-      </InputGroupAddon>
-    </InputGroup>
-    <InputGroup>
-      <InputGroupInput placeholder="Card number" />
-      <InputGroupAddon>
-        <IconCreditCard />
-      </InputGroupAddon>
-      <InputGroupAddon align="inline-end">
-        <IconCheck />
-      </InputGroupAddon>
-    </InputGroup>
-    <InputGroup>
-      <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-      <InputGroupAddon align="block-end">
-        <InputGroupButton variant="outline" className="!al-rounded-full" size="icon">
-          <IconPlus />
-        </InputGroupButton>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <InputGroupButton variant="ghost">Auto</InputGroupButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent side="top" align="start" className="[--radius:0.95rem]">
-            <DropdownMenuItem>Auto</DropdownMenuItem>
-            <DropdownMenuItem>Agent</DropdownMenuItem>
-            <DropdownMenuItem>Manual</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <InputGroupText className="al-ml-auto">52% used</InputGroupText>
-        <Separator orientation="vertical" className="!al-h-4" />
-        <InputGroupButton variant="default" className="!al-rounded-full" size="icon" disabled>
-          <IconArrowUp />
-          <span className="al-sr-only">Send</span>
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-    <InputGroup>
-      <InputGroupInput placeholder="@shadcn" />
-      <InputGroupAddon align="inline-end">
-        <div className="al-bg-primary al-text-primary-foreground al-flex al-size-4 al-items-center al-justify-center al-rounded-full">
-          <IconCheck className="al-size-3" />
-        </div>
-      </InputGroupAddon>
-    </InputGroup>
-  </div>
-);
-
-// Alignment Variations
-export const AlignmentVariations: StoryFn = () => (
-  <div className="al-w-96 al-space-y-6 al-p-4">
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Inline Start</label>
-      <InputGroup>
-        <InputGroupAddon align="inline-start">
-          <IconSearch className="al-size-4" />
-        </InputGroupAddon>
-        <InputGroupInput placeholder="Search..." />
-      </InputGroup>
-    </div>
-
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Inline End</label>
-      <InputGroup>
-        <InputGroupInput placeholder="Search..." />
-        <InputGroupAddon align="inline-end">
-          <IconSearch className="al-size-4" />
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Block Start</label>
-      <InputGroup>
-        <InputGroupAddon align="block-start">
-          <IconUser className="al-size-4" />
-          <InputGroupText>Profile Information</InputGroupText>
-        </InputGroupAddon>
-        <InputGroupInput placeholder="Enter your name" />
-      </InputGroup>
-    </div>
-
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Block End</label>
-      <InputGroup>
-        <InputGroupInput placeholder="Enter description" />
-        <InputGroupAddon align="block-end">
-          <InputGroupText>Additional details</InputGroupText>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  </div>
-);
-
-// Button Variations
-export const ButtonVariations: StoryFn = () => (
-  <div className="al-w-96 al-space-y-4 al-p-4">
-    <InputGroup>
-      <InputGroupInput placeholder="Enter text to copy" defaultValue="https://example.com" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton>
-          <IconCopy className="al-size-4" />
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-
-    <InputGroup>
-      <InputGroupAddon>
-        <IconSearch className="al-size-4" />
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Search..." />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton variant="secondary" className="!al-border-none" size="xs">
-          Search
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-  </div>
-);
-
-// Text Variations
-export const TextVariations: StoryFn = () => (
-  <div className="al-w-96 al-space-y-4 al-p-4">
-    <InputGroup>
-      <InputGroupAddon>
-        <InputGroupText>$</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput type="number" placeholder="0.00" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupText>USD</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-
-    <InputGroup>
-      <InputGroupAddon>
-        <InputGroupText>https://</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="example.com" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupText>.com</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-
-    <InputGroup>
-      <InputGroupInput placeholder="Username" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupText>@example.com</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-
-    <InputGroup>
-      <InputGroupAddon>
-        <InputGroupText>+1</InputGroupText>
-      </InputGroupAddon>
-      <InputGroupInput type="tel" placeholder="(555) 123-4567" />
-    </InputGroup>
-  </div>
-);
-
-// Complex Interactions
-export const ComplexInteractions: StoryFn = () => (
-  <div className="al-w-96 al-space-y-4 al-p-4">
-    <InputGroup>
-      <InputGroupAddon>
-        <IconGlobe className="al-size-4" />
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Enter website URL" />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton variant="outline" size="xs">
-          Validate
-        </InputGroupButton>
-        <InputGroupButton size="icon">
-          <IconCopy className="al-size-3" />
-        </InputGroupButton>
-      </InputGroupAddon>
-    </InputGroup>
-
-    <InputGroup>
-      <InputGroupAddon>
-        <InputGroupText>Search</InputGroupText>
-        <IconSearch className="al-size-4" />
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Type to search..." />
-      <InputGroupAddon align="inline-end">
-        <InputGroupButton variant="ghost" size="icon">
-          <IconX className="al-size-3" />
-        </InputGroupButton>
-        <InputGroupText>⌘K</InputGroupText>
-      </InputGroupAddon>
-    </InputGroup>
-
-    <InputGroup>
-      <InputGroupAddon>
-        <InputGroupButton variant="ghost" size="xs">
-          <IconLoader2 className="al-size-4 al-animate-spin" />
-        </InputGroupButton>
-      </InputGroupAddon>
-      <InputGroupInput placeholder="Processing..." disabled />
-    </InputGroup>
-  </div>
-);
-
-// Textarea Variations
-export const TextareaVariations: StoryFn = () => (
-  <div className="al-w-96 al-space-y-4 al-p-4">
-    <div className="al-grid al-w-full al-max-w-md al-gap-4">
-      <InputGroup>
-        <InputGroupTextarea
-          id="textarea-code-32"
-          placeholder="console.log('Hello, world!');"
-          className="al-min-h-[200px]"
-        />
-        <InputGroupAddon align="block-end" className="al-border-t">
-          <InputGroupText>Line 1, Column 1</InputGroupText>
-          <InputGroupButton size="sm" className="al-ml-auto" variant="default">
-            Run <IconCornerDownLeft />
-          </InputGroupButton>
-        </InputGroupAddon>
-        <InputGroupAddon align="block-start" className="al-border-b">
-          <InputGroupText className="al-font-mono al-font-medium">
-            <IconBrandJavascript />
-            script.js
-          </InputGroupText>
-          <InputGroupButton className="al-ml-auto" size="icon">
-            <IconRefresh />
-          </InputGroupButton>
-          <InputGroupButton variant="ghost" size="icon">
-            <IconCopy />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  </div>
-);
-
-// State Variations
-export const StateVariations: StoryFn = () => (
-  <div className="al-w-96 al-space-y-4 al-p-4">
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Normal State</label>
-      <InputGroup>
-        <InputGroupAddon>
-          <IconMail className="al-size-4" />
-        </InputGroupAddon>
-        <InputGroupInput placeholder="Normal input" />
-      </InputGroup>
-    </div>
-
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Disabled State</label>
-      <InputGroup data-disabled="true">
-        <InputGroupAddon>
-          <IconMail className="al-size-4" />
-        </InputGroupAddon>
-        <InputGroupInput placeholder="Disabled input" disabled />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton disabled>
-            <IconCopy className="al-size-4" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Error State</label>
-      <InputGroup>
-        <InputGroupAddon>
-          <IconMail className="al-size-4" />
-        </InputGroupAddon>
-        <InputGroupInput
-          placeholder="Error input"
-          aria-invalid="true"
-          defaultValue="invalid-email"
-        />
-      </InputGroup>
-    </div>
-
-    <div>
-      <label className="al-text-sm al-font-medium al-block al-mb-2">Success State</label>
-      <InputGroup>
-        <InputGroupAddon>
-          <IconMail className="al-size-4" />
-        </InputGroupAddon>
-        <InputGroupInput placeholder="Success input" defaultValue="valid@example.com" />
-        <InputGroupAddon align="inline-end">
-          <InputGroupText className="al-text-green-600">✓</InputGroupText>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
-  </div>
-);

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 al-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 al-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,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} 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</MenubarItem>
-        <MenubarItem>New Window</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Share</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>Print</MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);
-
-export const Variants: StoryFn = () => (
-  <div className="al-flex al-flex-col al-gap-4">
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="default">Default</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="destructive">Destructive</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="outline">Outline</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="success">Success</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="secondary">Secondary</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="ghost">Ghost</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  </div>
-);
-
-export const Sizes: StoryFn = () => (
-  <div className="al-flex al-flex-col al-gap-4">
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="default" size="sm">
-          Small Size
-        </MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="default" size="default">
-          Default Size
-        </MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger variant="default" size="lg">
-          Large Size
-        </MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>Item 1</MenubarItem>
-          <MenubarItem>Item 2</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  </div>
-);
-
-export const WithShortcuts: StoryFn = () => (
-  <Menubar>
-    <MenubarMenu>
-      <MenubarTrigger variant="default">File</MenubarTrigger>
-      <MenubarContent>
-        <MenubarItem>
-          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>
-          New Window <MenubarShortcut>⌘N</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>
-          Share <MenubarShortcut>⌘S</MenubarShortcut>
-        </MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>
-          Print <MenubarShortcut>⌘P</MenubarShortcut>
-        </MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-);