@codefast/ui 0.0.66 → 0.0.67

package/src/react/dropdown-menu.tsx

@@ -1,290 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenu
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuProps = React.ComponentProps<typeof DropdownMenuPrimitive.Root>;
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuTrigger
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuGroup
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuSub
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuSubProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuSubTrigger
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuSubTrigger
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;
-
-interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
-  inset?: boolean;
-}
-
-const DropdownMenuSubTrigger = React.forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
-  ({ children, className, inset, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.SubTrigger
-      ref={forwardedRef}
-      className={cn(
-        'focus:bg-accent data-[state=open]:bg-accent flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
-        inset && 'pl-8',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  ),
-);
-
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuSubContent
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuSubContentProps = DropdownMenuPrimitive.DropdownMenuSubContentProps;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  DropdownMenuSubContentProps
->(({ className, ...props }, forwardedRef) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.SubContent
-      ref={forwardedRef}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuContent
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;
-type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
-
-const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
-  ({ className, sideOffset = 6, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        ref={forwardedRef}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
-          className,
-        )}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  ),
-);
-
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuItem
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;
-
-interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
-  inset?: boolean;
-}
-
-const DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
-  ({ className, inset, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Item
-      ref={forwardedRef}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        inset && 'pl-8',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuCheckboxItem
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;
-type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
-
-const DropdownMenuCheckboxItem = React.forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
-  ({ children, className, checked, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.CheckboxItem
-      ref={forwardedRef}
-      checked={checked}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  ),
-);
-
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuRadioItem
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;
-type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
-
-const DropdownMenuRadioItem = React.forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.RadioItem
-      ref={forwardedRef}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <DotFilledIcon className="size-4 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  ),
-);
-
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuLabel
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;
-
-interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
-  inset?: boolean;
-}
-
-const DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
-  ({ className, inset, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Label
-      ref={forwardedRef}
-      className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-      {...props}
-    />
-  ),
-);
-
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuSeparator
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;
-type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
-
-const DropdownMenuSeparator = React.forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <DropdownMenuPrimitive.Separator
-      ref={forwardedRef}
-      className={cn('bg-muted -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  ),
-);
-
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DropdownMenuShortcut
- * -------------------------------------------------------------------------- */
-
-type DropdownMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
-
-function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): React.JSX.Element {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
-}
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-  type DropdownMenuProps,
-  type DropdownMenuTriggerProps,
-  type DropdownMenuContentProps,
-  type DropdownMenuItemProps,
-  type DropdownMenuCheckboxItemProps,
-  type DropdownMenuRadioItemProps,
-  type DropdownMenuLabelProps,
-  type DropdownMenuSeparatorProps,
-  type DropdownMenuShortcutProps,
-  type DropdownMenuGroupProps,
-  type DropdownMenuSubProps,
-  type DropdownMenuSubContentProps,
-  type DropdownMenuSubTriggerProps,
-  type DropdownMenuRadioGroupProps,
-};

package/src/react/em.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-/* -----------------------------------------------------------------------------
- * Component: Em
- * -------------------------------------------------------------------------- */
-
-type EmElement = HTMLElement;
-
-interface EmProps extends React.HTMLAttributes<HTMLElement> {
-  asChild?: boolean;
-}
-
-const Em = React.forwardRef<EmElement, EmProps>(({ asChild, ...props }, forwardedRef) => {
-  const Component = asChild ? Slot : 'em';
-
-  return <Component ref={forwardedRef} {...props} />;
-});
-
-Em.displayName = 'Em';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Em, type EmProps };

package/src/react/form.tsx

@@ -1,234 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import {
-  Controller,
-  type ControllerProps,
-  type FieldError,
-  type FieldErrorsImpl,
-  type FieldPath,
-  type FieldValues,
-  FormProvider,
-  type Merge,
-  useFormContext,
-} from 'react-hook-form';
-import type * as LabelPrimitive from '@radix-ui/react-label';
-import { cn } from '../lib/utils';
-import { Label } from './label';
-
-/* -----------------------------------------------------------------------------
- * Context: Form
- * -------------------------------------------------------------------------- */
-
-interface FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-  name: TName;
-}
-
-interface FormItemContextValue {
-  id: string;
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
-
-const FormItemContext = React.createContext<FormItemContextValue | null>(null);
-
-const useFormField = (): {
-  formDescriptionId: string;
-  formItemId: string;
-  formMessageId: string;
-  id: string;
-  invalid: boolean;
-  isDirty: boolean;
-  isTouched: boolean;
-  isValidating: boolean;
-  name: string;
-  error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
-} => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  if (!fieldContext || !itemContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `form-item-${id}`,
-    formDescriptionId: `form-item-description-${id}`,
-    formMessageId: `form-item-message-${id}`,
-    ...fieldState,
-  };
-};
-
-/* -----------------------------------------------------------------------------
- * Component: Form
- * -------------------------------------------------------------------------- */
-
-type FormProps = React.ComponentProps<typeof FormProvider>;
-const Form = FormProvider;
-
-/* -----------------------------------------------------------------------------
- * Component: FormField
- * -------------------------------------------------------------------------- */
-
-type FormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = ControllerProps<TFieldValues, TName>;
-
-function FormField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({ ...props }: FormFieldProps<TFieldValues, TName>): React.JSX.Element {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: FormItem
- * -------------------------------------------------------------------------- */
-
-type FormItemElement = HTMLDivElement;
-type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
-
-const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, forwardedRef) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={forwardedRef} className={cn('space-y-2', className)} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-
-FormItem.displayName = 'FormItem';
-
-/* -----------------------------------------------------------------------------
- * Component: FormLabel
- * -------------------------------------------------------------------------- */
-
-type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
-type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
-
-const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, forwardedRef) => {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label ref={forwardedRef} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />
-  );
-});
-
-FormLabel.displayName = 'FormLabel';
-
-/* -----------------------------------------------------------------------------
- * Component: FormControl
- * -------------------------------------------------------------------------- */
-
-type FormControlElement = React.ElementRef<typeof Slot>;
-type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
-
-const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, forwardedRef) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={forwardedRef}
-      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={Boolean(error)}
-      id={formItemId}
-      {...props}
-    />
-  );
-});
-
-FormControl.displayName = 'FormControl';
-
-/* -----------------------------------------------------------------------------
- * Component: FormDescription
- * -------------------------------------------------------------------------- */
-
-type FormDescriptionElement = HTMLParagraphElement;
-type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
-
-const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
-  ({ className, ...props }, forwardedRef) => {
-    const { formDescriptionId } = useFormField();
-
-    return (
-      <p
-        ref={forwardedRef}
-        className={cn('text-muted-foreground text-xs', className)}
-        id={formDescriptionId}
-        {...props}
-      />
-    );
-  },
-);
-
-FormDescription.displayName = 'FormDescription';
-
-/* -----------------------------------------------------------------------------
- * Component: FormMessage
- * -------------------------------------------------------------------------- */
-
-type FormMessageElement = HTMLParagraphElement;
-type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
-
-const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(
-  ({ children, className, ...props }, forwardedRef) => {
-    const { error, formMessageId } = useFormField();
-    const body = error?.message ? String(error.message) : children;
-
-    if (!body) {
-      return null;
-    }
-
-    return (
-      <p
-        ref={forwardedRef}
-        className={cn('text-destructive text-xs font-medium', className)}
-        id={formMessageId}
-        {...props}
-      >
-        {body}
-      </p>
-    );
-  },
-);
-
-FormMessage.displayName = 'FormMessage';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-  type FormProps,
-  type FormItemProps,
-  type FormLabelProps,
-  type FormControlProps,
-  type FormDescriptionProps,
-  type FormMessageProps,
-  type FormFieldProps,
-};

package/src/react/heading.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-/* -----------------------------------------------------------------------------
- * Component: Heading
- * -------------------------------------------------------------------------- */
-
-type HeadingElement = HTMLHeadingElement;
-
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  asChild?: boolean;
-}
-
-const Heading = React.forwardRef<HeadingElement, HeadingProps>(
-  ({ asChild, as: Tag = 'h1', ...props }, forwardedRef) => {
-    const Component = asChild ? Slot : Tag;
-
-    return <Component ref={forwardedRef} {...props} />;
-  },
-);
-
-Heading.displayName = 'Heading';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Heading, type HeadingProps };

package/src/react/hover-card.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCard
- * -------------------------------------------------------------------------- */
-
-type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>;
-const HoverCard = HoverCardPrimitive.Root;
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCardTrigger
- * -------------------------------------------------------------------------- */
-
-type HoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCardContent
- * -------------------------------------------------------------------------- */
-
-type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Content>;
-type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
-
-const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
-  ({ className, align = 'center', sideOffset = 6, ...props }, forwardedRef) => (
-    <HoverCardPrimitive.Portal>
-      <HoverCardPrimitive.Content
-        ref={forwardedRef}
-        align={align}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
-          className,
-        )}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  ),
-);
-
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCardArrow
- * -------------------------------------------------------------------------- */
-
-type HoverCardArrowElement = React.ElementRef<typeof HoverCardPrimitive.Arrow>;
-type HoverCardArrowProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Arrow>;
-
-const HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <HoverCardPrimitive.Arrow ref={forwardedRef} className={cn('fill-popover', className)} {...props} />
-  ),
-);
-
-HoverCardArrow.displayName = HoverCardPrimitive.Arrow.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-  HoverCardArrow,
-  type HoverCardProps,
-  type HoverCardTriggerProps,
-  type HoverCardContentProps,
-  type HoverCardArrowProps,
-};