@anker-in/headless-ui 0.0.26 → 0.0.27-alpha.1

package/src/components/badge.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { type VariantProps, cva } from 'class-variance-authority'
-
-import { cn } from '../helpers/index.js'
-
-const badgeVariants = cva(
-  'ai-inline-flex ai-items-center ai-font-medium ai-rounded-[20px] ai-border ai-px-[10px] ai-py-1 ai-text-xs ai-transition-colors focus:ai-outline-none',
-  {
-    variants: {
-      variant: {
-        default: 'ai-bg-badge ai-text-badge-foreground ai-border-transparent',
-        secondary: 'ai-bg-secondary ai-text-secondary-foreground ai-border-transparent',
-        destructive: 'ai-bg-destructive ai-text-destructive-foreground ai-border-transparent',
-        outline: 'ai-text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export default Badge

package/src/components/button.tsx

@@ -1,166 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { type VariantProps, cva } from 'class-variance-authority'
-import Spinner from '../icons/spinner.js'
-import { cn } from '../helpers/index.js'
-
-/**
- * Button Variants
- */
-const buttonVariants = cva(
-  'ai-ring-offset-background focus-visible:ai-ring-ring ai-rounded-btn ai-inline-flex ai-items-center ai-justify-center ai-text-sm ai-font-medium ai-transition-colors focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-pointer-events-none',
-  {
-    variants: {
-      variant: {
-        primary: 'ai-bg-btn-primary ai-text-btn-primary-foreground hover:ai-bg-btn-primary-active ',
-        secondary:
-          'ai-bg-btn-secondary ai-text-btn-secondary-foreground hover:ai-bg-btn-secondary-active hover:ai-text-btn-secondary ai-border ai-border-solid',
-        link: 'ai-text-primary ai-underline-offset-4 hover:ai-underline',
-        ghost: 'hover:ai-bg-btn-primary hover:ai-text-btn-primary-foreground',
-      },
-      size: {
-        sm: 'ai-h-8 ai-px-3 ai-py-1 ai-text-[12px]',
-        base: 'ai-h-10 ai-px-4 ai-py-2 ai-text-[14px]',
-        lg: 'ai-h-11 ai-px-8 ai-text-[16px]',
-        icon: 'ai-size-10 ai-rounded-full',
-      },
-      /** hover 状态下的动画效果,需要注意不同variant 下的效果 */
-      hoverEffect: {
-        none: '',
-        slide: '',
-      },
-      state: {
-        default: '',
-        disabled: '',
-        loading: '',
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'primary',
-        hoverEffect: 'slide',
-        class:
-          'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-primary before:ai-bg-btn-primary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0  before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0',
-      },
-      {
-        variant: 'secondary',
-        hoverEffect: 'slide',
-        class:
-          'ai-z-[1] before:-ai-z-[1] before:ai-rounded-btn hover:!ai-bg-btn-secondary before:ai-bg-btn-secondary-active ai-relative ai-overflow-hidden before:ai-absolute before:ai-inset-y-0  before:ai-w-full before:-ai-translate-x-full before:ai-transition-transform before:ai-duration-300 before:ai-ease-in-out before:ai-content-[""] hover:before:ai-translate-x-0',
-      },
-      {
-        variant: 'primary',
-        state: 'loading',
-        class: 'ai-bg-btn-primary',
-      },
-      {
-        variant: 'secondary',
-        state: 'loading',
-        class:
-          'ai-bg-btn-secondary disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground',
-      },
-      {
-        variant: 'primary',
-        state: 'disabled',
-        class: 'disabled:ai-bg-btn-primary-disabled disabled:ai-text-btn-primary-disabled-foreground',
-      },
-      {
-        variant: 'secondary',
-        state: 'disabled',
-        class: 'disabled:ai-bg-btn-secondary-disabled disabled:ai-text-btn-secondary-disabled-foreground',
-      },
-    ],
-    defaultVariants: {
-      variant: 'primary',
-      size: 'base',
-      hoverEffect: 'none',
-      state: 'default',
-    },
-  }
-)
-
-const loadingSvgVariants = cva('', {
-  variants: {
-    variant: {
-      primary: 'ai-stroke-btn-primary-foreground',
-      secondary: 'ai-stroke-btn-secondary-foreground',
-      link: 'ai-stroke-primary',
-      ghost: 'ai-stroke-primary',
-    },
-  },
-  defaultVariants: {
-    variant: 'primary',
-  },
-})
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  /** 设置按钮载入状态  */
-  loading?: boolean
-  /** 设置按钮失效状态  */
-  disabled?: boolean
-  /** 定义自组件作为父组件的类型， 详细使用方式请参考radix-ui */
-  asChild?: boolean
-  /** 自定义loading  */
-  spinner?: React.ReactNode
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      asChild = false,
-      size = 'base',
-      children,
-      variant,
-      hoverEffect = 'none',
-      className,
-      disabled = false,
-      loading = false,
-      spinner,
-      ...props
-    }: ButtonProps,
-    ref
-  ) => {
-    const Comp = asChild ? Slot : 'button'
-    const isInactive = disabled || loading
-    const state = loading ? 'loading' : disabled ? 'disabled' : 'default'
-
-    return (
-      <Comp
-        disabled={isInactive}
-        className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}
-        ref={ref}
-        {...props}
-      >
-        {loading ? (
-          <>
-            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>
-              {children}
-            </span>
-            <span className="ai-absolute">
-              {spinner ? (
-                spinner
-              ) : (
-                <Spinner
-                  className={loadingSvgVariants({
-                    variant,
-                  })}
-                />
-              )}
-            </span>
-            <VisuallyHidden>{children}</VisuallyHidden>
-          </>
-        ) : (
-          children
-        )}
-      </Comp>
-    )
-  }
-)
-
-Button.displayName = 'Button'
-export default Button

package/src/components/checkbox.tsx

@@ -1,44 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
-
-import { cn } from '../helpers/index.js'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const checkboxVariants = cva(
-  'ai-border-primary ai-ring-offset-background focus-visible:ai-ring-ring data-[state=checked]:ai-bg-primary data-[state=checked]:ai-text-primary-foreground ai-peer ai-shrink-0 ai-rounded-sm ai-border focus-visible:ai-outline-none focus-visible:ai-ring-2 focus-visible:ai-ring-offset-2 disabled:ai-cursor-not-allowed disabled:ai-opacity-50 disabled:ai-bg-btn-primary-disabled',
-  {
-    variants: {
-      size: {
-        sm: 'ai-size-[14px]',
-        base: 'ai-size-4',
-        lg: 'ai-size-5',
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  }
-)
-
-interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    VariantProps<typeof checkboxVariants> {}
-
-const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-  ({ className, size, ...props }, ref) => (
-    <CheckboxPrimitive.Root ref={ref} className={cn(checkboxVariants({ size }), className)} {...props}>
-      <CheckboxPrimitive.Indicator
-        className={cn('ai-flex ai-items-center ai-justify-center ai-text-current ai-w-full ai-h-full')}
-      >
-        <CheckIcon />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-)
-Checkbox.displayName = 'Checkbox'
-
-export default Checkbox
-export type { CheckboxProps }

package/src/components/dialog.tsx

@@ -1,101 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { Cross2Icon } from '@radix-ui/react-icons'
-
-import { cn } from '../helpers/index.js'
-
-const Dialog = DialogPrimitive.Root
-Dialog.displayName = 'Dialog'
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0  ai-fixed ai-inset-0 ai-z-50 ai-bg-black/80',
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'ai-bg-background data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0 data-[state=closed]:ai-zoom-out-95 data-[state=open]:ai-zoom-in-95 data-[state=closed]:ai-slide-out-to-left-1/2 data-[state=closed]:ai-slide-out-to-top-[48%] data-[state=open]:ai-slide-in-from-left-1/2 data-[state=open]:ai-slide-in-from-top-[48%] ai-fixed ai-left-1/2 ai-top-1/2 ai-z-50 ai-grid ai-w-full ai-max-w-lg -ai-translate-x-1/2 -ai-translate-y-1/2 ai-gap-4 ai-border ai-p-6 ai-shadow-lg ai-duration-200 sm:ai-rounded-lg',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="ai-ring-offset-background focus:ai-ring-ring data-[state=open]:ai-bg-accent data-[state=open]:ai-text-muted-foreground ai-absolute ai-right-4 ai-top-4 ai-rounded-sm ai-opacity-70 ai-transition-opacity hover:ai-opacity-100 focus:ai-outline-none focus:ai-ring-2 focus:ai-ring-offset-2 disabled:ai-pointer-events-none">
-        <Cross2Icon className="ai-size-4" />
-        <span className="ai-sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('ai-flex ai-flex-col ai-space-y-1.5 ai-text-center sm:ai-text-left', className)} {...props} />
-)
-DialogHeader.displayName = 'DialogHeader'
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('ai-flex ai-flex-col-reverse sm:ai-flex-row sm:ai-justify-end sm:ai-space-x-2', className)}
-    {...props}
-  />
-)
-DialogFooter.displayName = 'DialogFooter'
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('ai-text-lg ai-font-semibold ai-leading-none ai-tracking-tight', className)}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn('ai-text-muted-foreground ai-text-sm', className)} {...props} />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}

package/src/components/heading.tsx

@@ -1,85 +0,0 @@
-import { cn } from '../helpers/index.js'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import React from 'react'
-
-const headingVariants = cva('ai-leading-tight ai-tracking', {
-  variants: {
-    size: {
-      none: '',
-      1: 'ai-text-xs',
-      2: 'ai-text-sm',
-      3: 'ai-text-base',
-      4: 'ai-text-lg',
-      5: 'ai-text-xl',
-      6: 'ai-text-2xl',
-      7: 'ai-text-3xl',
-      8: 'ai-text-4xl',
-      9: 'ai-text-5xl',
-    },
-    weight: {
-      light: 'ai-font-light',
-      normal: 'ai-font-normal',
-      medium: 'ai-font-medium',
-      bold: 'ai-font-bold',
-    },
-    align: {
-      left: 'ai-text-left',
-      center: 'ai-text-center',
-      right: 'ai-text-right',
-    },
-  },
-  defaultVariants: {
-    size: 'none',
-    weight: 'normal',
-  },
-})
-
-type HeadingElement = React.ElementRef<'h1'>
-
-interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  asChild?: boolean
-  color?: string
-  html?: string
-}
-
-const Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
-  const { children, className, size, align, weight, asChild, as: Tag = 'h1', color, html, ...headingProps } = props
-  const htmlContentProps = html
-    ? {
-        dangerouslySetInnerHTML: { __html: html },
-      }
-    : null
-
-  const styleProps = color
-    ? {
-        style: {
-          color,
-        },
-      }
-    : null
-  return (
-    <Slot
-      {...headingProps}
-      ref={forwardedRef}
-      className={cn(
-        headingVariants({
-          size,
-          weight,
-          align,
-        }),
-        className
-      )}
-      {...htmlContentProps}
-      {...styleProps}
-    >
-      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}
-    </Slot>
-  )
-})
-
-Heading.displayName = 'Heading'
-
-export { Heading }
-export type { HeadingProps }

package/src/components/index.ts

@@ -1,19 +0,0 @@
-// theme
-// export { default as Theme } from './theme'
-
-// components
-export { default as Button } from './button.js'
-export { default as Badge } from './badge.js'
-export * from './input.js'
-
-export { default as Checkbox } from './checkbox.js'
-
-export { default as Skeleton } from './skeleton.js'
-export * from './dialog.js'
-export * from './popover.js'
-export * from './radio.js'
-export * from './dialog.js'
-export * from './text.js'
-export * from './heading.js'
-export { default as Picture } from './picture.js'
-export { default as Theme } from './theme.js'

package/src/components/input.tsx

@@ -1,79 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { cn } from '../helpers/index.js'
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-const inputVariants = cva(
-  'ai-border-input ai-w-full ai-bg-background focus-visible:ai-outline-none ai-flex ai-flex-row ai-items-center ai-overflow-hidden ai-rounded-md ai-border',
-  {
-    variants: {
-      size: {
-        sm: 'ai-h-8 ai-text-sm',
-        base: 'ai-h-10',
-        lg: 'ai-h-12 ai-text-lg',
-      },
-    },
-    defaultVariants: {
-      size: 'base',
-    },
-  }
-)
-
-export interface InputProps extends ComponentPropsWithout<'input', 'size'>, VariantProps<typeof inputVariants> {}
-
-type InputSlotElement = React.ElementRef<'div'>
-interface InputSlotProps extends ComponentPropsWithout<'div', RemovedProps> {
-  /**
-   * 插槽的位置
-   * default: right
-   */
-  side?: 'left' | 'right'
-}
-
-/**
- * InputSlot
- * 用来在 Input 组件中插入额外的内容，比如icon ，按钮
- */
-const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>((props, forwardedRef) => {
-  const { className, side = 'right', children, ...slotProps } = props
-
-  return (
-    <div
-      ref={forwardedRef}
-      {...slotProps}
-      className={cn('ai-flex ai-h-full ai-items-center', className, {
-        '-ai-order-1': side === 'left',
-        'ai-order-2': side === 'right',
-      })}
-    >
-      {children}
-    </div>
-  )
-})
-
-const Input = React.forwardRef<React.ElementRef<'input'>, InputProps>(
-  ({ className, type, size, children, ...props }, ref) => {
-    if (!React.isValidElement(children)) {
-      return <input type={type} className={cn(inputVariants({ size }), 'ai-px-3', className)} ref={ref} {...props} />
-    }
-    return (
-      <div className={cn(inputVariants({ size }), className)}>
-        <input
-          type={type}
-          className={cn(
-            'placeholder:ai-text-muted-foreground ai-flex ai-size-full file:ai-border-0 file:ai-bg-transparent file:ai-font-medium focus-visible:ai-outline-none disabled:ai-cursor-not-allowed disabled:ai-opacity-50 ai-px-3'
-          )}
-          ref={ref}
-          {...props}
-        />
-        {children}
-      </div>
-    )
-  }
-)
-Input.displayName = 'Input'
-InputSlot.displayName = 'InputSlot'
-
-export { Input, InputSlot }

package/src/components/picture.tsx

@@ -1,99 +0,0 @@
-'use client'
-import React, { useCallback, useMemo } from 'react'
-
-const APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']
-
-const MAX_SIZE = 3960
-const FIXED_MAX_SIZE = 3980
-
-export interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  /** picture 内部img 标签的类名 */
-  imgClassName?: string
-  /** 图片url , 支持传入不同分辨率下的图片，比如，格式 "url1 1920， url2 1080, url3 767" */
-  source?: string
-  /** 图片质量 */
-  quality?: number
-  /** 响应式图片，对应picture 下source 的max-width */
-  deviceSizes?: number[]
-}
-
-const isMatchDomain = (srcDomain: string) => {
-  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)
-}
-const idMatchFileExtensions = (fileName: string = '') => /\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)
-
-const Picture = ({
-  imgClassName = '',
-  source = '',
-  quality = 2,
-  deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],
-  ...rest
-}: PictureProps) => {
-  const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {
-    const size = width
-    try {
-      const parsedUrl = new URL(src)
-      if (!isMatchDomain(parsedUrl.hostname)) {
-        return src
-      }
-      const fileName = parsedUrl.pathname.split('/').pop() || ''
-      if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {
-        const [name, extension] = fileName.split('.')
-        return `${parsedUrl.origin}${parsedUrl.pathname.replace(
-          fileName,
-          `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`
-        )}`
-      }
-    } catch (error) {
-      return src
-    }
-  }, [])
-
-  const sourceSrcSet = useCallback(
-    ({ srcArr, width }: { srcArr: string[][]; width: number }) => {
-      const computedWidth = width * quality
-      const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })
-      let result
-      srcArr.forEach(ele => {
-        var img = ele[0]
-        if (ele.length > 1 && parseInt(ele[1], 10) >= width) {
-          result = imgSrcSetsize({ src: img, width: computedWidth })
-        }
-      })
-      const srcset = result || def
-      return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />
-    },
-    [imgSrcSetsize, quality]
-  )
-
-  const sourceList = useMemo(() => {
-    if (typeof source !== 'string' || !source) return []
-    let srcArr
-    try {
-      srcArr = source
-        .replace(/[\r\n]/g, '')
-        .replace(/\s\s+/g, ' ')
-        .split(',')
-        .map(item => item.split(' ').filter(Boolean))
-    } catch (error) {
-      console.log(error)
-      return []
-    }
-    const sourceList = deviceSizes.map(width => {
-      return sourceSrcSet({ srcArr, width })
-    })
-
-    const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })
-
-    sourceList.push(<img key="default" src={img} className={`ai-w-full ${imgClassName}`} {...rest} />)
-    return sourceList
-  }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])
-
-  return (
-    <picture className={`ai-block ai-overflow-hidden ${rest.className}`}>
-      {sourceList}
-      {rest.children}
-    </picture>
-  )
-}
-export default Picture

package/src/components/popover.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { cn } from '../helpers/utils.js'
-
-const Popover = PopoverPrimitive.Root
-
-const PopoverTrigger = PopoverPrimitive.Trigger
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'ai-bg-popover ai-text-popover-foreground data-[state=open]:ai-animate-in data-[state=closed]:ai-animate-out data-[state=closed]:ai-fade-out-0 data-[state=open]:ai-fade-in-0 data-[state=closed]:ai-zoom-out-95 data-[state=open]:ai-zoom-in-95 data-[side=bottom]:ai-slide-in-from-top-2 data-[side=left]:ai-slide-in-from-right-2 data-[side=right]:ai-slide-in-from-left-2 data-[side=top]:ai-slide-in-from-bottom-2 ai-z-50 ai-w-72 ai-rounded-md ai-border ai-p-4 ai-shadow-md ai-outline-none',
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-export { Popover, PopoverTrigger, PopoverContent }