@postxl/generators 1.1.1 → 1.2.1

package/dist/frontend-core/template/src/components/ui/calendar/calendar.stories.tsx

@@ -1,160 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Calendar } from './calendar'
-import { expect, userEvent, screen } from 'storybook/test'
-import { useState } from 'react'
-
-const meta = {
-  title: 'Calendar',
-  component: Calendar,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    buttonVariant: {
-      control: 'select',
-      options: [
-        undefined,
-        'default',
-        'secondary',
-        'destructive',
-        'outline',
-        'ghost',
-        'link',
-        'outlineInvert',
-        'extraGhost',
-        'extraGhost2',
-        'neutral',
-      ],
-    },
-    showYearNavigation: {
-      control: 'boolean',
-    },
-    mode: {
-      control: 'select',
-      options: ['single', 'multiple', 'range'],
-    },
-    showOutsideDays: {
-      control: 'boolean',
-      defaultValue: true,
-    },
-    captionLayout: {
-      control: 'select',
-      options: ['label', 'dropdown', 'dropdown-months', 'dropdown-years'],
-      defaultValue: 'label',
-    },
-    formatters: {
-      control: 'object',
-    },
-    components: {
-      control: 'object',
-    },
-    disabled: {
-      control: 'object',
-    },
-    fromYear: {
-      control: 'number',
-    },
-    toYear: {
-      control: 'number',
-    },
-  },
-} satisfies Meta<typeof Calendar>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-type DateRange = {
-  from?: Date
-  to?: Date
-}
-
-export const Default: Story = {
-  args: {
-    mode: 'single',
-    showOutsideDays: true,
-    captionLayout: 'label',
-    formatters: {
-      // used by this Calendar (and merged with the built-in formatMonthDropdown)
-      formatMonthDropdown: (date: Date) => date.toLocaleString('en-US', { month: 'long' }), // "January", "February", ...
-
-      // typical DayPicker formatter names you can override:
-      formatWeekdayName: (date: Date) => date.toLocaleDateString('en-US', { weekday: 'short' }), // "Mon", "Tue", ...
-
-      formatDay: (date: Date) => date.toLocaleDateString('en-US', { day: 'numeric' }), // "01"
-    },
-  },
-  render: (args) => <Calendar {...args} data-testid="default-calendar" />,
-  play: async () => {
-    const calendar = screen.getByTestId('default-calendar')
-    const dayButton = calendar.querySelector('button[aria-label*="13"]') as HTMLElement
-    await userEvent.click(dayButton)
-    expect(dayButton).toHaveAttribute('data-selected-single', 'true')
-  },
-}
-
-export const Multiple: Story = {
-  args: {
-    mode: 'multiple',
-  },
-  render: (args) => <Calendar {...args} data-testid="default-calendar" />,
-}
-
-function RangeCalendarStory(args: any) {
-  const [range, setRange] = useState<DateRange | undefined>(undefined)
-  return (
-    <Calendar
-      mode="range"
-      buttonVariant={args.buttonVariant}
-      data-testid="default-calendar"
-      selected={range?.from && range?.to ? { from: range.from, to: range.to } : undefined}
-      onSelect={(value: { from?: Date; to?: Date } | undefined) => {
-        if (value?.from == null) {
-          setRange(undefined)
-        } else {
-          const newRange = { from: value.from, to: value.to ?? value.from }
-          setRange(newRange)
-        }
-      }}
-    />
-  )
-}
-export const RangeWithAlternatingSelection: Story = {
-  render: (args) => <RangeCalendarStory {...args} />,
-}
-
-export const WithDisabledRange: Story = {
-  render: () => {
-    return (
-      <Calendar
-        disabled={(date) => date > new Date() || date < new Date(new Date().setMonth(new Date().getMonth() - 3))}
-        data-testid="default-calendar"
-      />
-    )
-  },
-  play: async () => {
-    const calendar = screen.getByTestId('default-calendar')
-    const today = new Date()
-    const future = new Date(today)
-    future.setDate(today.getDate() + 2)
-    const futureDate = future.toLocaleDateString()
-    // Use data-day attribute to find the specific button for the future date
-    // This is more reliable than using aria-label with partial string matching
-    const disabledDayButton = calendar.querySelector(`button[data-day="${futureDate}"]`) as HTMLElement
-
-    // Previous approach had a bug: aria-label*="${dayNumber}" would match any date containing that number
-    // For example, dayNumber=25 would incorrectly match "September 28th 2025" because it contains "25"
-    // const dayNumber = future.getDate()
-    // const disabledDayButton = calendar.querySelector(`button[aria-label*="${dayNumber}"]`) as HTMLElement
-    await expect(disabledDayButton).toHaveAttribute('disabled')
-    await userEvent.click(disabledDayButton, { pointerEventsCheck: 0 })
-    await expect(disabledDayButton).toHaveAttribute('disabled') // still disabled after click
-  },
-}
-
-export const WithDropdowns: Story = {
-  render: () => {
-    return <Calendar data-testid="default-calendar" captionLayout="dropdown" />
-  },
-}

package/dist/frontend-core/template/src/components/ui/calendar/calendar.tsx

@@ -1,293 +0,0 @@
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from '@radix-ui/react-icons'
-
-import * as React from 'react'
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
-
-import { Button, buttonVariants } from '@components/ui/button/button'
-import { cn } from '@lib/utils'
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = 'label',
-  buttonVariant = 'ghost',
-  showYearNavigation = false,
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>['variant']
-  showYearNavigation?: boolean
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  // Track last selected field for range mode
-  const [rangeSelectionStep, setRangeSelectionStep] = React.useState<'from' | 'to'>('from')
-  // Custom onDayClick for range mode to make sure 'from' and 'to' are always set alternatingly
-  const handleDayClick = React.useCallback(
-    (day: Date, modifiers: any, e: React.MouseEvent<Element>) => {
-      if (props.mode === 'range') {
-        const range = props.selected as { from?: Date; to?: Date } | undefined
-
-        // Always start a new range when selecting 'from'
-        if (rangeSelectionStep === 'from') {
-          props.onSelect?.({ from: day, to: undefined }, day, modifiers, e)
-          setRangeSelectionStep('to')
-          return
-        }
-
-        // Only set 'to' if 'from' is set and not the same day
-        if (rangeSelectionStep === 'to') {
-          if (range?.from && day.getTime() !== range.from.getTime()) {
-            props.onSelect?.({ from: range.from, to: day }, day, modifiers, e)
-            setRangeSelectionStep('from')
-          }
-          return
-        }
-      } else {
-        props.onDayClick?.(day, modifiers, e)
-      }
-    },
-    [props, rangeSelectionStep],
-  )
-
-  // default year range if caption layout has year dropdown: 100 years past and 100 years future unless user overrides
-  // with the dropdown a range is required. if we don't set it manually it will be -100 years until now which is impractical for future events
-  let fromMonth: Date | undefined
-  let toMonth: Date | undefined
-  if (captionLayout === 'dropdown-years' || captionLayout === 'dropdown') {
-    const nowYear = new Date().getFullYear()
-    fromMonth = props.startMonth ?? new Date(nowYear - 100, 0)
-    toMonth = props.endMonth ?? new Date(nowYear + 100, 11)
-  }
-
-  // controlled month state so we can programmatically change months (and years)
-  const [currentMonth, setCurrentMonth] = React.useState<Date>(props.defaultMonth ?? props.month ?? new Date())
-  React.useEffect(() => {
-    if (props.month) {
-      setCurrentMonth(props.month)
-    }
-  }, [props.month])
-
-  const addMonths = (date: Date, months: number) => {
-    const d = new Date(date)
-    d.setMonth(d.getMonth() + months)
-    if (fromMonth && d < fromMonth) {
-      return fromMonth
-    }
-    if (toMonth && d > toMonth) {
-      return toMonth
-    }
-    return d
-  }
-
-  return (
-    <DayPicker
-      month={currentMonth}
-      onMonthChange={(m) => {
-        setCurrentMonth(m)
-        props.onMonthChange?.(m)
-      }}
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn('w-fit', defaultClassNames.root),
-        months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-        nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_previous,
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
-          defaultClassNames.button_next,
-        ),
-        month_caption: cn(
-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
-          defaultClassNames.month_caption,
-        ),
-        dropdowns: cn(
-          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
-          defaultClassNames.dropdowns,
-        ),
-        dropdown_root: cn(
-          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
-          defaultClassNames.dropdown_root,
-        ),
-        dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
-        caption_label: cn(
-          'select-none font-medium',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
-          defaultClassNames.caption_label,
-        ),
-        table: 'w-full border-collapse',
-        weekdays: cn('flex', defaultClassNames.weekdays),
-        weekday: cn(
-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
-          defaultClassNames.weekday,
-        ),
-        week: cn('flex w-full mt-2', defaultClassNames.week),
-        week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
-        week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
-        day: cn(
-          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
-          defaultClassNames.day,
-        ),
-        range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-        today: cn(
-          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
-          defaultClassNames.today,
-        ),
-        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
-        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
-        hidden: cn('invisible', defaultClassNames.hidden),
-        ...classNames,
-      }}
-      // prefer startMonth/toMonth instead of deprecated fromYear/toYear
-      startMonth={fromMonth}
-      endMonth={toMonth}
-      components={{
-        // custom navigation: to add double-chevron year skip buttons
-        Nav: ({ className }) => (
-          <div className={cn('mt-0.5', className)}>
-            <div className="flex items-center">
-              {showYearNavigation && (
-                <Button
-                  aria-label="previous year"
-                  variant={buttonVariant}
-                  size="iconSm"
-                  disabled={fromMonth && currentMonth <= fromMonth}
-                  className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
-                  onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), -12))}
-                >
-                  <DoubleArrowLeftIcon className="" />
-                </Button>
-              )}
-              <Button
-                aria-label="previous month"
-                variant={buttonVariant}
-                size="iconSm"
-                disabled={fromMonth && currentMonth <= fromMonth}
-                className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
-                onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), -1))}
-              >
-                <ChevronLeftIcon />
-              </Button>
-            </div>
-
-            <div className="flex items-center">
-              <Button
-                aria-label="next month"
-                variant={buttonVariant}
-                size="iconSm"
-                disabled={toMonth && currentMonth >= toMonth}
-                className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
-                onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), 1))}
-              >
-                <ChevronRightIcon />
-              </Button>
-              {showYearNavigation && (
-                <Button
-                  aria-label="next year"
-                  variant={buttonVariant}
-                  size="iconSm"
-                  disabled={toMonth && currentMonth >= toMonth}
-                  className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
-                  onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), 12))}
-                >
-                  <DoubleArrowRightIcon />
-                </Button>
-              )}
-            </div>
-          </div>
-        ),
-        // prettier-ignore
-        Root: ({ className, rootRef, ...props }) => {     //NOSONAR - default shadeCn
-          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
-        },
-        // prettier-ignore
-        Chevron: ({ className, orientation, ...props }) => {      //NOSONAR - default shadeCn
-          if (orientation === 'left') {
-            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
-          }
-
-          if (orientation === 'right') {
-            return <ChevronRightIcon className={cn('size-4', className)} {...props} />
-          }
-
-          return <ChevronDownIcon className={cn('size-4', className)} {...props} />
-        },
-        DayButton: CalendarDayButton,
-        // prettier-ignore
-        WeekNumber: ({ children, ...props }) => {     //NOSONAR - default shadeCn
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      onDayClick={handleDayClick}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) {
-      ref.current?.focus()
-    }
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
-        defaultClassNames.day,
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }

package/dist/frontend-core/template/src/components/ui/card/card.stories.tsx

@@ -1,77 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card'
-import { BellIcon, CheckIcon } from '@radix-ui/react-icons'
-import { cn } from '@lib/utils'
-import { Button } from '@components/ui/button/button'
-
-const meta = {
-  title: 'Card',
-  component: Card,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Card>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The Card component is used to group related information in a single container.This means any other component can be placed inside the Card component.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center border rounded p-4">
-      <Card className={cn('w-[380px]')}>
-        <CardHeader>
-          <CardTitle>Card Title</CardTitle>
-          <CardDescription>You have 3 unread messages.</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4">
-          <div className=" flex items-center space-x-4 rounded-md border p-4">
-            <BellIcon />
-            <div className="flex-1 space-y-1">
-              <p className="text-sm font-medium leading-none">Push Notifications</p>
-              <p className="text-sm text-muted-foreground">Send notifications to device.</p>
-            </div>
-          </div>
-          <div>
-            {notifications.map((notification, index) => (
-              <div key={index} className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
-                <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
-                <div className="space-y-1">
-                  <p className="text-sm font-medium leading-none">{notification.title}</p>
-                  <p className="text-sm text-muted-foreground">{notification.description}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full">
-            <CheckIcon className="mr-2 h-4 w-4" /> Mark all as read
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
-  ),
-}
-
-// DATA ------------------------------------------------------------------------
-
-const notifications = [
-  {
-    title: 'Your call has been confirmed.',
-    description: '1 hour ago',
-  },
-  {
-    title: 'You have a new message!',
-    description: '1 hour ago',
-  },
-  {
-    title: 'Your subscription is expiring soon!',
-    description: '2 hours ago',
-  },
-]

package/dist/frontend-core/template/src/components/ui/card/card.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...props} />
-))
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  ),
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) => (
-    <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
-      {children}
-    </h3>
-  ),
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-  ),
-)
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
-)
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  ),
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/dist/frontend-core/template/src/components/ui/card-hover/card-hover.stories.tsx

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import { HoverCard, HoverCardContent, HoverCardTrigger } from './card-hover'
-
-const meta = {
-  title: 'Hover Card',
-  component: HoverCard,
-  tags: ['autodocs'],
-} satisfies Meta<typeof HoverCard>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'The Hover Card component displays additional information when hovering over an element.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <HoverCard>
-        <HoverCardTrigger>Hover</HoverCardTrigger>
-        <HoverCardContent>The React Framework – created and maintained by @vercel.</HoverCardContent>
-      </HoverCard>
-    </div>
-  ),
-}

package/dist/frontend-core/template/src/components/ui/card-hover/card-hover.tsx

@@ -1,28 +0,0 @@
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
-
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className,
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }