@altimateai/ui-components 0.0.79 → 0.0.80

package/dist/storybook/DebouncedInput.stories.tsx

@@ -1,179 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { DebouncedInput, DebouncedInputProps } from "../shadcn";
-import { useState } from "react";
-import { IconSearch, IconUser, IconMail } from "@tabler/icons-react";
-
-export default {
-  title: "Shadcn/Components/DebouncedInput",
-  component: DebouncedInput,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    type: {
-      control: "select",
-      options: ["text", "password", "email", "number"],
-    },
-    iconPosition: {
-      control: "select",
-      options: ["left", "right"],
-    },
-    debounceMs: {
-      control: "number",
-    },
-  },
-} as Meta<typeof DebouncedInput>;
-
-const Template: StoryFn<DebouncedInputProps> = (args: DebouncedInputProps) => {
-  const [debouncedValue, setDebouncedValue] = useState("");
-
-  return (
-    <div className="al-p-4 al-max-w-md al-space-y-4">
-      <DebouncedInput
-        {...args}
-        onChange={newValue => {
-          setDebouncedValue(newValue);
-          args.onChange?.(newValue);
-        }}
-      />
-      <div className="al-space-y-2 al-text-sm">
-        <div>
-          <strong>Debounced Value:</strong>{" "}
-          <code className="al-bg-gray-100 al-px-1 al-rounded">{debouncedValue || "empty"}</code>
-        </div>
-        <div>
-          <strong>Debounce Delay:</strong>{" "}
-          <code className="al-bg-gray-100 al-px-1 al-rounded">{args.debounceMs || 0}ms</code>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: "Type something...",
-  debounceMs: 0,
-};
-
-export const WithDebounce300ms = Template.bind({});
-WithDebounce300ms.args = {
-  placeholder: "Search with 300ms debounce...",
-  debounceMs: 300,
-};
-
-export const WithDebounce500ms = Template.bind({});
-WithDebounce500ms.args = {
-  placeholder: "Search with 500ms debounce...",
-  debounceMs: 500,
-};
-
-export const WithDebounce1000ms = Template.bind({});
-WithDebounce1000ms.args = {
-  placeholder: "Search with 1000ms debounce...",
-  debounceMs: 1000,
-};
-
-export const SearchWithIcon = Template.bind({});
-SearchWithIcon.args = {
-  placeholder: "Search users...",
-  icon: IconSearch,
-  iconPosition: "left",
-  debounceMs: 300,
-};
-
-export const EmailWithDebounce = Template.bind({});
-EmailWithDebounce.args = {
-  type: "email",
-  placeholder: "Enter email...",
-  icon: IconMail,
-  iconPosition: "left",
-  debounceMs: 500,
-};
-
-export const UserSearchWithIcon = Template.bind({});
-UserSearchWithIcon.args = {
-  placeholder: "Search for users...",
-  icon: IconUser,
-  iconPosition: "left",
-  debounceMs: 400,
-};
-
-// Interactive example showing real-time vs debounced updates
-const InteractiveTemplate: StoryFn<DebouncedInputProps> = (args: DebouncedInputProps) => {
-  const [realTimeValue, setRealTimeValue] = useState("");
-  const [debouncedValue, setDebouncedValue] = useState("");
-  const [updateCount, setUpdateCount] = useState(0);
-  const [debouncedUpdateCount, setDebouncedUpdateCount] = useState(0);
-
-  return (
-    <div className="al-p-4 al-max-w-lg al-space-y-6">
-      <div className="al-space-y-4">
-        <div>
-          <label className="al-block al-text-sm al-font-medium al-mb-2">
-            Real-time Input (no debounce)
-          </label>
-          <DebouncedInput
-            placeholder="Type here for real-time updates..."
-            debounceMs={0}
-            onChange={value => {
-              setRealTimeValue(value);
-              setUpdateCount(prev => prev + 1);
-            }}
-          />
-        </div>
-
-        <div>
-          <label className="al-block al-text-sm al-font-medium al-mb-2">
-            Debounced Input ({args.debounceMs}ms delay)
-          </label>
-          <DebouncedInput
-            {...args}
-            onChange={value => {
-              setDebouncedValue(value);
-              setDebouncedUpdateCount(prev => prev + 1);
-            }}
-          />
-        </div>
-      </div>
-
-      <div className="al-grid al-grid-cols-2 al-gap-4 al-text-sm">
-        <div className="al-space-y-2">
-          <h4 className="al-font-semibold">Real-time Updates</h4>
-          <div>
-            Value:{" "}
-            <code className="al-bg-gray-100 al-px-1 al-rounded">{realTimeValue || "empty"}</code>
-          </div>
-          <div>
-            Updates: <code className="al-bg-blue-100 al-px-1 al-rounded">{updateCount}</code>
-          </div>
-        </div>
-
-        <div className="al-space-y-2">
-          <h4 className="al-font-semibold">Debounced Updates</h4>
-          <div>
-            Value:{" "}
-            <code className="al-bg-gray-100 al-px-1 al-rounded">{debouncedValue || "empty"}</code>
-          </div>
-          <div>
-            Updates:{" "}
-            <code className="al-bg-green-100 al-px-1 al-rounded">{debouncedUpdateCount}</code>
-          </div>
-        </div>
-      </div>
-
-      <div className="al-text-xs al-text-gray-600">
-        Type quickly to see the difference between real-time and debounced updates. The debounced
-        input will only trigger onChange after you stop typing for {args.debounceMs}ms.
-      </div>
-    </div>
-  );
-};
-
-export const InteractiveComparison = InteractiveTemplate.bind({});
-InteractiveComparison.args = {
-  placeholder: "Type here for debounced updates...",
-  debounceMs: 500,
-  icon: IconSearch,
-  iconPosition: "left",
-};

package/dist/storybook/DropdownMenu.stories.tsx

@@ -1,36 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Button,
-} from "../shadcn";
-import { MoreIcon, CopyIcon, RefreshIcon } from "@ac-assets/icons";
-
-export default {
-  title: "Shadcn/Components/DropdownMenu",
-  component: DropdownMenu,
-} as Meta;
-
-const Template: StoryFn = () => (
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="ghost" size="sm" className="al-p-0 al-h-8 al-w-8">
-        <MoreIcon className="al-h-4 al-w-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem onClick={() => console.log("Copy clicked")}>
-        <CopyIcon className="al-mr-2 al-h-4 al-w-4" />
-        Copy message
-      </DropdownMenuItem>
-      <DropdownMenuItem onClick={() => console.log("Regenerate clicked")}>
-        <RefreshIcon className="al-mr-2 al-h-4 al-w-4" />
-        Regenerate response
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
-
-export const Default = Template.bind({});

package/dist/storybook/Form.stories.tsx

@@ -1,114 +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,99 +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&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,156 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import { Input, InputPassword } from "../shadcn";
-import { InputHTMLAttributes, ComponentProps } from "react";
-import {
-  IconUser,
-  IconMail,
-  IconSearch,
-  IconPhone,
-  IconMapPin,
-  IconCreditCard,
-} from "@tabler/icons-react";
-
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  icon?: React.ComponentType<{ size?: string | number; className?: string }>;
-  iconPosition?: "left" | "right";
-  insetRing?: boolean;
-};
-
-export default {
-  title: "Shadcn/Components/Input",
-  component: Input,
-  argTypes: {
-    disabled: {
-      control: "boolean",
-    },
-    type: {
-      control: "select",
-      options: ["text", "password", "email", "number"],
-    },
-    iconPosition: {
-      control: "select",
-      options: ["left", "right"],
-    },
-    insetRing: {
-      control: "boolean",
-      description: "When true, the focus ring appears inside the input border instead of outside",
-    },
-  },
-} as Meta<typeof Input>;
-
-const Template: StoryFn<InputProps> = (args: InputProps) => (
-  <div className="al-p-4 al-max-w-md">
-    <Input {...args} />
-  </div>
-);
-
-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 WithError = Template.bind({});
-WithError.args = {
-  placeholder: "Error state",
-  className: "border-red-500",
-  "aria-invalid": true,
-};
-
-export const WithIconLeft = Template.bind({});
-WithIconLeft.args = {
-  placeholder: "Search...",
-  icon: IconSearch,
-  iconPosition: "left",
-};
-
-export const WithIconRight = Template.bind({});
-WithIconRight.args = {
-  placeholder: "Search...",
-  icon: IconSearch,
-  iconPosition: "right",
-};
-
-export const EmailWithIcon = Template.bind({});
-EmailWithIcon.args = {
-  type: "email",
-  placeholder: "Enter your email",
-  icon: IconMail,
-  iconPosition: "left",
-};
-
-export const UserInput = Template.bind({});
-UserInput.args = {
-  placeholder: "Enter username",
-  icon: IconUser,
-  iconPosition: "left",
-};
-
-export const PhoneInput = Template.bind({});
-PhoneInput.args = {
-  type: "tel",
-  placeholder: "Enter phone number",
-  icon: IconPhone,
-  iconPosition: "left",
-};
-
-export const AddressInput = Template.bind({});
-AddressInput.args = {
-  placeholder: "Enter address",
-  icon: IconMapPin,
-  iconPosition: "left",
-};
-
-export const CreditCardInput = Template.bind({});
-CreditCardInput.args = {
-  placeholder: "1234 5678 9012 3456",
-  icon: IconCreditCard,
-  iconPosition: "left",
-};
-
-export const DisabledWithIcon = Template.bind({});
-DisabledWithIcon.args = {
-  placeholder: "Disabled with icon",
-  icon: IconUser,
-  iconPosition: "left",
-  disabled: true,
-};
-
-export const InsetRing = Template.bind({});
-InsetRing.args = {
-  placeholder: "Focus ring appears inside",
-  insetRing: true,
-};
-
-export const InsetRingWithIcon = Template.bind({});
-InsetRingWithIcon.args = {
-  placeholder: "Inset ring with icon",
-  icon: IconMail,
-  iconPosition: "left",
-  insetRing: true,
-};
-
-// InputPassword Stories
-const PasswordTemplate: StoryFn<ComponentProps<typeof InputPassword>> = args => (
-  <div className="al-p-4 al-max-w-md">
-    <InputPassword {...args} />
-  </div>
-);
-
-export const Password = PasswordTemplate.bind({});
-Password.args = {
-  placeholder: "Enter password",
-};