@anker-in/headless-ui 0.0.25 → 0.0.27-alpha.0

package/src/components/card.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+
+import { cn } from '../helpers/index.js'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)} {...props} />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('min-xl:px-6 min-xl:pt-[32px] flex flex-col space-y-1.5 px-4 pt-6', className)}
+      {...props}
+    />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  )
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('min-xl:p-6 p-4 pt-0', className)} {...props} />
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('min-xl:px-6 min-xl:pb-[32px] flex items-center px-4 pb-6 pt-0', className)}
+      {...props}
+    />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/carousel.tsx

@@ -0,0 +1,352 @@
+'use client'
+
+import * as React from 'react'
+import type { EmblaCarouselType } from 'embla-carousel'
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+
+import { cn } from '../helpers/index.js'
+import Button from './button.js'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  /**
+   * 是否显示导航点
+   */
+  showNavigation?: boolean
+  /**
+   * 导航点位置 default inner
+   */
+  navigationPosition?: 'inner' | 'outter'
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+type UseDotButtonType = {
+  selectedIndex: number
+  scrollSnaps: number[]
+  onDotButtonClick: (index: number) => void
+}
+
+const useDotButton = (
+  emblaApi: EmblaCarouselType | undefined,
+  onButtonClick?: (emblaApi: EmblaCarouselType) => void
+): UseDotButtonType => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])
+
+  const onDotButtonClick = React.useCallback(
+    (index: number) => {
+      if (!emblaApi) return
+      emblaApi.scrollTo(index)
+      if (onButtonClick) onButtonClick(emblaApi)
+    },
+    [emblaApi, onButtonClick]
+  )
+
+  const onInit = React.useCallback((emblaApi: EmblaCarouselType) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
+
+  const onSelect = React.useCallback((emblaApi: EmblaCarouselType) => {
+    setSelectedIndex(emblaApi.selectedScrollSnap())
+  }, [])
+
+  React.useEffect(() => {
+    if (!emblaApi) return
+
+    onInit(emblaApi)
+    onSelect(emblaApi)
+
+    emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
+  }, [emblaApi, onInit, onSelect])
+
+  return {
+    selectedIndex,
+    scrollSnaps,
+    onDotButtonClick,
+  }
+}
+
+type PropType = React.ComponentPropsWithRef<'button'>
+
+export const DotButton: React.FC<PropType> = props => {
+  const { children, ...restProps } = props
+
+  return (
+    <button type="button" {...restProps}>
+      {children}
+    </button>
+  )
+}
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  (
+    {
+      orientation = 'horizontal',
+      showNavigation = false,
+      navigationPosition = 'inner',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(api)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
+
+      return () => {
+        api?.off('select', onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+          {showNavigation && (
+            <div
+              className={cn('absolute  left-1/2 mx-auto flex -translate-x-1/2 justify-center gap-[8px]', {
+                'min-md:bottom-[40px] bottom-[24px]': navigationPosition === 'inner',
+                'min-md:-bottom-[40px] -bottom-[24px]': navigationPosition === 'outter',
+              })}
+            >
+              {scrollSnaps.map((_, index) => (
+                <DotButton
+                  key={index}
+                  onClick={() => onDotButtonClick(index)}
+                  className={cn('min-md:w-[30px] h-[3px] w-[16px] bg-[#86868C]', {
+                    'bg-[#1D1D1F]': index === selectedIndex,
+                  })}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = 'Carousel'
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel()
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+          {...props}
+        />
+      </div>
+    )
+  }
+)
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel()
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
+        {...props}
+      />
+    )
+  }
+)
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          'absolute  size-8 rounded-full',
+          orientation === 'horizontal'
+            ? '-left-12 top-1/2 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        {children ? (
+          children
+        ) : (
+          <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle
+              opacity="0.2"
+              cx="29"
+              cy="29"
+              r="29"
+              transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 0 58)"
+              fill="#1D1D1F"
+            />
+            <path
+              d="M32.1583 36.8248C32.6139 36.3692 32.6139 35.6305 32.1583 35.1749L25.9832 28.9998L32.1583 22.8248C32.6139 22.3692 32.6139 21.6305 32.1583 21.1749C31.7027 20.7193 30.964 20.7193 30.5084 21.1749L23.5084 28.1749C23.0528 28.6305 23.0528 29.3692 23.5084 29.8248L30.5084 36.8248C30.964 37.2804 31.7027 37.2804 32.1583 36.8248Z"
+              fill="white"
+            />
+          </svg>
+        )}
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    )
+  }
+)
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = 'secondary', size = 'icon', children, ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          'absolute size-8 rounded-full',
+          orientation === 'horizontal'
+            ? '-right-12 top-1/2 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        {children ? (
+          children
+        ) : (
+          <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle opacity="0.2" cx="29" cy="29" r="29" transform="rotate(-180 29 29)" fill="#1D1D1F" />
+            <path
+              d="M25.8417 36.8248C25.3861 36.3692 25.3861 35.6305 25.8417 35.1749L32.0168 28.9998L25.8417 22.8248C25.3861 22.3692 25.3861 21.6305 25.8417 21.1749C26.2973 20.7193 27.036 20.7193 27.4916 21.1749L34.4916 28.1749C34.9472 28.6305 34.9472 29.3692 34.4916 29.8248L27.4916 36.8248C27.036 37.2804 26.2973 37.2804 25.8417 36.8248Z"
+              fill="white"
+            />
+          </svg>
+        )}
+        <span className="sr-only">Next slide</span>
+      </Button>
+    )
+  }
+)
+CarouselNext.displayName = 'CarouselNext'
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

package/src/components/checkbox.tsx

@@ -8,13 +8,13 @@ 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',
+  'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-btn-primary-disabled',
   {
     variants: {
       size: {
-        sm: 'ai-size-[14px]',
-        base: 'ai-size-4',
-        lg: 'ai-size-5',
+        sm: 'size-[14px]',
+        base: 'size-4',
+        lg: 'size-5',
       },
     },
     defaultVariants: {
@@ -30,9 +30,7 @@ interface CheckboxProps
 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')}
-      >
+      <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current w-full h-full')}>
         <CheckIcon />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>

package/src/components/color.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../helpers/index.js'
+import { type VariantProps, cva } from 'class-variance-authority'
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'
+const colorVariants = cva('', {
+  variants: {
+    color: {
+      brand0: 'bg-brand-0',
+      brand1: 'bg-brand-1',
+      success0: 'bg-success-0',
+      success1: 'bg-success-1',
+      success2: 'bg-success-2',
+      success3: 'bg-success-3',
+      success4: 'bg-success-4',
+      warning0: 'bg-warning-0',
+      warning1: 'bg-warning-1',
+      warning2: 'bg-warning-2',
+      warning3: 'bg-warning-3',
+      warning4: 'bg-warning-4',
+      error0: 'bg-error-0',
+      error1: 'bg-error-1',
+      error2: 'bg-error-2',
+      error3: 'bg-error-3',
+      error4: 'bg-error-4',
+      infoPrimary: 'bg-info-primary',
+      infoSecondary: 'bg-info-secondary',
+      infoTertiary: 'bg-info-tertiary',
+      infoQuaternary: 'bg-info-quaternary',
+      infoWhite: 'bg-info-white',
+      containerPrimary: 'bg-container-primary',
+      containerSecondary0: 'bg-container-secondary-0',
+      containerSecondary1: 'bg-container-secondary-1',
+      bg0: 'bg-bg-0',
+      bg1: 'bg-bg-1',
+      lines: 'bg-lines',
+      masks0: 'bg-masks-0',
+      masks1: 'bg-masks-1',
+      tabWord0: 'bg-tab-word-0',
+      tabWord1: 'bg-tab-word-1',
+      tabWord2: 'bg-tab-word-2',
+      tabStroke0: 'bg-tab-stroke-0',
+      tabStroke1: 'bg-tab-stroke-1',
+      tabStroke2: 'bg-tab-stroke-2',
+      tabFill0: 'bg-tab-fill-0',
+      tabFill1: 'bg-tab-fill-1',
+      tabFill2: 'bg-tab-fill-2',
+    },
+  },
+  defaultVariants: {
+    color: 'brand0',
+  },
+})
+type ColorElement = React.ElementRef<'div'>
+type ColorDivProps = ComponentPropsWithout<'div', RemovedProps>
+interface CommonColorProps extends VariantProps<typeof colorVariants> {}
+type ColorProps = CommonColorProps & ColorDivProps
+const Color = React.forwardRef<ColorElement, ColorProps>((props, forwardedRef) => {
+  const { children, color = 'brand0', className, ...colorProps } = props
+  return (
+    <Slot
+      {...colorProps}
+      ref={forwardedRef}
+      className={cn(
+        colorVariants({
+          color,
+        }),
+        className
+      )}
+    >
+      {children}
+    </Slot>
+  )
+})
+Color.displayName = 'Color'
+export { Color }
+export type { ColorProps }

package/src/components/container.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { cn } from '../helpers/utils.js'
+import { Slot } from '@radix-ui/react-slot'
+
+type ContainerElement = React.ElementRef<'div'>
+type ContainerProps = {
+  asChild?: boolean
+  children?: React.ReactNode
+  className?: string
+} & React.ComponentPropsWithoutRef<'div'>
+const Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {
+  const { asChild, children, className, ...containerProps } = props
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      {...containerProps}
+      ref={forwardedRef}
+      className={cn("box-border max-w-[1664px] mx-4 sm:mx-8 md:mx-16 lg:mx-16 xl:mx-auto ", className)}
+    >
+      {children}
+    </Comp>
+  )
+})
+Container.displayName = 'Container'
+
+export { Container }
+export type { ContainerProps }

package/src/components/dialog.tsx

@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <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',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
       className
     )}
     {...props}
@@ -39,15 +39,15 @@ const DialogContent = React.forwardRef<
     <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',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm: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 className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="size-4" />
+        <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
@@ -55,15 +55,12 @@ const DialogContent = React.forwardRef<
 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} />
+  <div className={cn('flex flex-col space-y-1.5 text-center sm: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}
-  />
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
 )
 DialogFooter.displayName = 'DialogFooter'
 
@@ -73,7 +70,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('ai-text-lg ai-font-semibold ai-leading-none ai-tracking-tight', className)}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ))
@@ -83,7 +80,7 @@ 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} />
+  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName