@a2v2ai/uikit 0.0.1 → 0.0.3

package/Typography/Typography.stories.tsx

@@ -0,0 +1,235 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Flex } from "../Flex/Flex"
+import { Typography } from "./Typography"
+
+const meta: Meta<typeof Typography> = {
+  title: "Components/Typography",
+  component: Typography,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "subtitle1",
+        "subtitle2",
+        "body1",
+        "body2",
+        "body3",
+        "caption",
+      ],
+    },
+    color: {
+      control: "select",
+      options: [
+        "default",
+        "main-50", "main-100", "main-200", "main-300", "main-400", "main-500", "main-600", "main-700", "main-800", "main-900", "main-950",
+        "success-50", "success-100", "success-200", "success-300", "success-400", "success-500", "success-600", "success-700", "success-800", "success-900", "success-950",
+        "accent-50", "accent-100", "accent-200", "accent-300", "accent-400", "accent-500", "accent-600", "accent-700", "accent-800", "accent-900", "accent-950",
+        "error-50", "error-100", "error-200", "error-300", "error-400", "error-500", "error-600", "error-700", "error-800", "error-900", "error-950",
+        "warning-50", "warning-100", "warning-200", "warning-300", "warning-400", "warning-500", "warning-600", "warning-700", "warning-800", "warning-900", "warning-950",
+        "grey-50", "grey-100", "grey-200", "grey-300", "grey-400", "grey-500", "grey-600", "grey-700", "grey-800", "grey-900", "grey-950",
+      ],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Typography>
+
+export const Default: Story = {
+  args: {
+    variant: "body1",
+    color: "default",
+    children: "The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flex direction="column" gap={6}>
+      <Typography variant="h1">Typography / h1</Typography>
+      <Typography variant="h2">Typography / h2</Typography>
+      <Typography variant="h3">Typography / h3</Typography>
+      <Typography variant="h4">Typography / h4</Typography>
+      <Typography variant="h5">Typography / h5</Typography>
+      <Typography variant="h6">Typography / h6</Typography>
+      <Typography variant="subtitle1">Typography / Subtitle 1</Typography>
+      <Typography variant="subtitle2">Typography / Subtitle 2</Typography>
+      <Typography variant="body1">Typography / Body 1</Typography>
+      <Typography variant="body2">Typography / Body 2</Typography>
+      <Typography variant="body3">Typography / Body 3</Typography>
+      <Typography variant="caption">Typography / Caption</Typography>
+    </Flex>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <Flex direction="column" gap={8}>
+      {/* Default / Foreground */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Default (Foreground)</Typography>
+        <Typography variant="body1" color="default">
+          The quick brown fox jumps over the lazy dog
+        </Typography>
+      </Flex>
+
+      {/* Main Colors */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Main Colors</Typography>
+        <Flex direction="column" gap={1}>
+          <Typography variant="body1" color="main-950">Main 950</Typography>
+          <Typography variant="body1" color="main-900">Main 900</Typography>
+          <Typography variant="body1" color="main-800">Main 800</Typography>
+          <Typography variant="body1" color="main-700">Main 700</Typography>
+          <Typography variant="body1" color="main-600">Main 600</Typography>
+          <Typography variant="body1" color="main-500">Main 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Success Colors */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Success Colors</Typography>
+        <Flex direction="column" gap={1}>
+          <Typography variant="body1" color="success-700">Success 700</Typography>
+          <Typography variant="body1" color="success-600">Success 600</Typography>
+          <Typography variant="body1" color="success-500">Success 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Accent Colors */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Accent Colors</Typography>
+        <Flex direction="column" gap={1}>
+          <Typography variant="body1" color="accent-700">Accent 700</Typography>
+          <Typography variant="body1" color="accent-600">Accent 600</Typography>
+          <Typography variant="body1" color="accent-500">Accent 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Error Colors */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Error Colors</Typography>
+        <Flex direction="column" gap={1}>
+          <Typography variant="body1" color="error-700">Error 700</Typography>
+          <Typography variant="body1" color="error-600">Error 600</Typography>
+          <Typography variant="body1" color="error-500">Error 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Warning Colors */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Warning Colors</Typography>
+        <Flex direction="column" gap={1}>
+          <Typography variant="body1" color="warning-700">Warning 700</Typography>
+          <Typography variant="body1" color="warning-600">Warning 600</Typography>
+          <Typography variant="body1" color="warning-500">Warning 500</Typography>
+        </Flex>
+      </Flex>
+
+      {/* Grey Colors */}
+      <Flex direction="column" gap={2}>
+        <Typography variant="h5">Grey Colors</Typography>
+        <Flex direction="column" gap={1}>
+          <Typography variant="body1" color="grey-900">Grey 900</Typography>
+          <Typography variant="body1" color="grey-700">Grey 700</Typography>
+          <Typography variant="body1" color="grey-500">Grey 500</Typography>
+          <Typography variant="body1" color="grey-400">Grey 400</Typography>
+        </Flex>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const H1: Story = {
+  args: {
+    variant: "h1",
+    children: "Heading 1",
+  },
+}
+
+export const H2: Story = {
+  args: {
+    variant: "h2",
+    children: "Heading 2",
+  },
+}
+
+export const H3: Story = {
+  args: {
+    variant: "h3",
+    children: "Heading 3",
+  },
+}
+
+export const H4: Story = {
+  args: {
+    variant: "h4",
+    children: "Heading 4",
+  },
+}
+
+export const H5: Story = {
+  args: {
+    variant: "h5",
+    children: "Heading 5",
+  },
+}
+
+export const H6: Story = {
+  args: {
+    variant: "h6",
+    children: "Heading 6",
+  },
+}
+
+export const Subtitle1: Story = {
+  args: {
+    variant: "subtitle1",
+    children: "Subtitle 1",
+  },
+}
+
+export const Subtitle2: Story = {
+  args: {
+    variant: "subtitle2",
+    children: "Subtitle 2",
+  },
+}
+
+export const Body1: Story = {
+  args: {
+    variant: "body1",
+    children: "Body 1 - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body2: Story = {
+  args: {
+    variant: "body2",
+    children: "Body 2 - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Body3: Story = {
+  args: {
+    variant: "body3",
+    children: "Body 3 - The quick brown fox jumps over the lazy dog",
+  },
+}
+
+export const Caption: Story = {
+  args: {
+    variant: "caption",
+    children: "Caption - The quick brown fox jumps over the lazy dog",
+  },
+}

package/Typography/Typography.tsx

@@ -0,0 +1,171 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const typographyVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "font-extrabold text-[64px] leading-none tracking-normal font-sans",
+      h2: "font-bold text-[48px] leading-none tracking-normal font-sans",
+      h3: "font-bold text-[32px] leading-none tracking-normal font-sans",
+      h4: "font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans",
+      h5: "font-bold text-[20px] leading-none tracking-normal font-sans",
+      h6: "font-semibold text-[20px] leading-none tracking-normal font-sans",
+      subtitle1: "font-semibold text-[20px] leading-none tracking-normal font-sans",
+      subtitle2: "font-semibold text-[18px] leading-none tracking-normal font-sans",
+      body1: "font-normal text-[16px] leading-none tracking-normal font-sans",
+      body2: "font-normal text-[14px] leading-none tracking-normal font-sans",
+      body3: "font-normal text-[12px] leading-none tracking-normal font-sans",
+      caption: "font-light text-[12px] leading-none tracking-normal font-sans",
+    },
+    color: {
+      default: "text-foreground",
+      // Main colors
+      "main-50": "text-main-50",
+      "main-100": "text-main-100",
+      "main-200": "text-main-200",
+      "main-300": "text-main-300",
+      "main-400": "text-main-400",
+      "main-500": "text-main-500",
+      "main-600": "text-main-600",
+      "main-700": "text-main-700",
+      "main-800": "text-main-800",
+      "main-900": "text-main-900",
+      "main-950": "text-main-950",
+      // Success colors
+      "success-50": "text-success-50",
+      "success-100": "text-success-100",
+      "success-200": "text-success-200",
+      "success-300": "text-success-300",
+      "success-400": "text-success-400",
+      "success-500": "text-success-500",
+      "success-600": "text-success-600",
+      "success-700": "text-success-700",
+      "success-800": "text-success-800",
+      "success-900": "text-success-900",
+      "success-950": "text-success-950",
+      // Accent colors
+      "accent-50": "text-accent-50",
+      "accent-100": "text-accent-100",
+      "accent-200": "text-accent-200",
+      "accent-300": "text-accent-300",
+      "accent-400": "text-accent-400",
+      "accent-500": "text-accent-500",
+      "accent-600": "text-accent-600",
+      "accent-700": "text-accent-700",
+      "accent-800": "text-accent-800",
+      "accent-900": "text-accent-900",
+      "accent-950": "text-accent-950",
+      // Error colors
+      "error-50": "text-error-50",
+      "error-100": "text-error-100",
+      "error-200": "text-error-200",
+      "error-300": "text-error-300",
+      "error-400": "text-error-400",
+      "error-500": "text-error-500",
+      "error-600": "text-error-600",
+      "error-700": "text-error-700",
+      "error-800": "text-error-800",
+      "error-900": "text-error-900",
+      "error-950": "text-error-950",
+      // Warning colors
+      "warning-50": "text-warning-50",
+      "warning-100": "text-warning-100",
+      "warning-200": "text-warning-200",
+      "warning-300": "text-warning-300",
+      "warning-400": "text-warning-400",
+      "warning-500": "text-warning-500",
+      "warning-600": "text-warning-600",
+      "warning-700": "text-warning-700",
+      "warning-800": "text-warning-800",
+      "warning-900": "text-warning-900",
+      "warning-950": "text-warning-950",
+      // Grey colors
+      "grey-50": "text-grey-50",
+      "grey-100": "text-grey-100",
+      "grey-200": "text-grey-200",
+      "grey-300": "text-grey-300",
+      "grey-400": "text-grey-400",
+      "grey-500": "text-grey-500",
+      "grey-600": "text-grey-600",
+      "grey-700": "text-grey-700",
+      "grey-800": "text-grey-800",
+      "grey-900": "text-grey-900",
+      "grey-950": "text-grey-950",
+    },
+  },
+  defaultVariants: {
+    variant: "body1",
+    color: "default",
+  },
+})
+
+type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "subtitle1"
+  | "subtitle2"
+  | "body1"
+  | "body2"
+  | "body3"
+  | "caption"
+
+type TypographyColor =
+  | "default"
+  | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950"
+  | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950"
+  | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950"
+  | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950"
+  | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950"
+  | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950"
+
+const variantElementMap: Record<TypographyVariant, keyof React.JSX.IntrinsicElements> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "p",
+  subtitle2: "p",
+  body1: "p",
+  body2: "p",
+  body3: "p",
+  caption: "span",
+}
+
+type TypographyProps<T extends React.ElementType = "p"> = {
+  as?: T
+  asChild?: boolean
+  variant?: TypographyVariant
+  color?: TypographyColor
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "asChild" | "color" | "variant">
+
+function Typography<T extends React.ElementType = "p">({
+  className,
+  variant = "body1",
+  color = "default",
+  as,
+  asChild = false,
+  ...props
+}: TypographyProps<T>) {
+  const defaultElement = variant ? variantElementMap[variant] : "p"
+  const Component = asChild ? Slot : (as ?? defaultElement)
+
+  return (
+    <Component
+      data-slot="typography"
+      className={cn(typographyVariants({ variant, color, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Typography, typographyVariants }
+export type { TypographyVariant, TypographyColor }

package/helpers.ts

@@ -0,0 +1,5 @@
+// Helpers (re-exported utilities)
+export { cn, copyToClipboard } from "./lib/utils"
+export { clsx, type ClassValue } from "clsx"
+export { twMerge } from "tailwind-merge"
+export { cva, type VariantProps } from "class-variance-authority"

package/icons.ts

@@ -0,0 +1,2 @@
+// Re-export all icons from lucide-react
+export * from "lucide-react"

package/index.ts

@@ -0,0 +1,136 @@
+// Styles
+import "./index.css"
+
+// Components
+export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps, type AlertVariant } from "./Alert/Alert"
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarSize } from "./Avatar/Avatar"
+export { Badge, badgeVariants, type BadgeProps, type BadgeVariant } from "./Badge/Badge"
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from "./Breadcrumb/Breadcrumb"
+export { Button, buttonVariants, type ButtonProps, type ButtonVariant, type ButtonSize, type ButtonRoundness } from "./Button/Button"
+export { Calendar, CalendarDayButton, type CalendarProps } from "./Calendar/Calendar"
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants, type CardProps, type CardVariant } from "./Card/Card"
+export { ChatBubble, chatBubbleVariants, bubbleContentVariants, type ChatBubbleProps, type ChatBubbleSide, type ChatBubbleColor, type ChatBubbleTheme, type ChatBubbleSize } from "./ChatBubble/ChatBubble"
+export { Checkbox, checkboxVariants, type CheckboxProps, type CheckboxSize } from "./Checkbox/Checkbox"
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogBody,
+  AlertDialogAction,
+  AlertDialogCancel,
+  alertDialogContentVariants,
+  alertDialogHeaderVariants,
+  alertDialogFooterVariants,
+  type AlertDialogContentProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogContentType,
+  type AlertDialogHeaderType,
+  type AlertDialogFooterType,
+  type AlertDialogCloseButtonVariant,
+} from "./AlertDialog/AlertDialog"
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerBody,
+  DrawerTitle,
+  DrawerDescription,
+  drawerContentVariants,
+  drawerOverlayVariants,
+  type DrawerProps,
+  type DrawerContentProps,
+  type DrawerDirection,
+} from "./Drawer/Drawer"
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./DropdownMenu/DropdownMenu"
+export { ErrorMessage, type ErrorMessageProps } from "./ErrorMessage/ErrorMessage"
+export { Flex, flexVariants, type FlexProps, type FlexDirection, type FlexAlign, type FlexJustify, type FlexWrap, type FlexGap } from "./Flex/Flex"
+export { IconButton, iconButtonVariants, type IconButtonProps, type IconButtonVariant, type IconButtonSize, type IconButtonRoundness } from "./IconButton/IconButton"
+export { Input, inputVariants, type InputProps, type InputSize, type InputRoundness, type InputVariant } from "./Input/Input"
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  inputOTPVariants,
+  inputOTPSlotVariants,
+  type InputOTPProps,
+  type InputOTPSlotProps,
+  type InputOTPSlotSize,
+} from "./InputOTP/InputOTP"
+export { Label, labelVariants, type LabelProps, type LabelVariant } from "./Label/Label"
+export { Loader, loaderVariants, type LoaderProps, type LoaderSize, type LoaderColor } from "./Loader/Loader"
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./Popover/Popover"
+export { Progress, progressVariants, progressIndicatorVariants, type ProgressProps, type ProgressSize, type ProgressVariant } from "./Progress/Progress"
+export { RadioGroup, RadioGroupItem, radioGroupItemVariants, type RadioGroupItemProps, type RadioGroupItemSize } from "./RadioGroup/RadioGroup"
+export { ScrollArea, ScrollBar } from "./ScrollArea/ScrollArea"
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  selectTriggerVariants,
+  type SelectTriggerProps,
+  type SelectTriggerSize,
+} from "./Select/Select"
+export { Separator } from "./Separator/Separator"
+export { Skeleton, type SkeletonProps } from "./Skeleton/Skeleton"
+export { Spinner, spinnerVariants, type SpinnerProps, type SpinnerSize, type SpinnerVariant } from "./Spinner/Spinner"
+export { Switch, switchVariants, type SwitchProps, type SwitchSize } from "./Switch/Switch"
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, type TabsListProps, type TabsListVariant } from "./Tabs/Tabs"
+export { Textarea, textareaVariants, type TextareaProps, type TextareaVariant, type TextareaResize } from "./Textarea/Textarea"
+export { Toaster, toast, type ToastProps, type ToastTheme } from "./Toast/Toast"
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  tooltipContentVariants,
+  type TooltipContentProps,
+  type TooltipContentVariant,
+} from "./Tooltip/Tooltip"
+export { Typography, typographyVariants, type TypographyVariant, type TypographyColor } from "./Typography/Typography"
+
+// Utilities
+export { cn, copyToClipboard } from "./lib/utils"

package/lib/utils.ts

@@ -0,0 +1,15 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2v2ai/uikit",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "author": "Arulraj V & abofficial1997@gmail.com",
   "description": "A React UI component library built with shadcn/ui and Tailwind CSS",
   "license": "MIT",
@@ -25,5 +25,8 @@
   },
   "dependencies": {
     "cpy-cli": "^6.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3"
   }
 }

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "esnext",
+      "dom"
+    ] /* Specify library files to be included in the compilation. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', or 'react-jsx'. */,
+    "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    "outDir": "../dist",                      /* Redirect output structure to the directory. */
+    "rootDir": "./",                          /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "noEmit": false /* Do not emit outputs. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "noUnusedLocals": true /* Report errors on unused locals. */,
+    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["node_modules", "**/*.stories.tsx"]
+}

package/Alert/Alert.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
-}
-declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
-declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-export { Alert, AlertTitle, AlertDescription, alertVariants };