@postxl/generators 1.1.1 → 1.2.1

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

@@ -1,142 +0,0 @@
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-
-import { cva } from 'class-variance-authority'
-
-import { cn } from '@lib/utils'
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  )
-}
-
-function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn('relative', className)} {...props} />
-  )
-}
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
-)
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
-      {...props}
-    >
-      {children}{' '}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  )
-}
-
-function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  )
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-}

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

@@ -1,49 +0,0 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from './pagination'
-import { Meta } from '@storybook/react-vite'
-
-const meta: Meta<typeof Pagination> = {
-  title: 'Pagination',
-  component: Pagination,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Pagination>
-
-export default meta
-
-export const Default = {
-  render: () => (
-    <div className="flex items-center justify-center">
-      <Pagination>
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#" isActive>
-              2
-            </PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">3</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationEllipsis />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-    </div>
-  ),
-}

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

@@ -1,84 +0,0 @@
-import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
-
-import * as React from 'react'
-
-import { ButtonProps, buttonVariants } from '@components/ui/button/button'
-import { cn } from '@lib/utils'
-
-const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn('mx-auto flex w-full justify-center', className)}
-    {...props}
-  />
-)
-Pagination.displayName = 'Pagination'
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
-  ),
-)
-PaginationContent.displayName = 'PaginationContent'
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn('', className)} {...props} />
-))
-PaginationItem.displayName = 'PaginationItem'
-
-type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<ButtonProps, 'size'> &
-  React.ComponentProps<'a'>
-
-const PaginationLink = ({ className, isActive, size = 'icon', children, ...props }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? 'page' : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? 'outline' : 'ghost',
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </a>
-)
-PaginationLink.displayName = 'PaginationLink'
-
-const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
-    <ChevronLeftIcon className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-)
-PaginationPrevious.displayName = 'PaginationPrevious'
-
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
-    <span>Next</span>
-    <ChevronRightIcon className="h-4 w-4" />
-  </PaginationLink>
-)
-PaginationNext.displayName = 'PaginationNext'
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
-  <span aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
-    <DotsHorizontalIcon className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-)
-PaginationEllipsis.displayName = 'PaginationEllipsis'
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-}

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

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { expect, userEvent, screen, waitFor } from 'storybook/test'
-
-import { Popover, PopoverContent, PopoverTrigger } from './popover'
-import { Button } from '@components/ui/button/button'
-
-const meta = {
-  title: 'Popover',
-  component: PopoverContent,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'simple'],
-    },
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end'],
-    },
-    side: {
-      control: 'select',
-      options: ['top', 'right', 'bottom', 'left'],
-    },
-  },
-} satisfies Meta<typeof PopoverContent>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Open popover</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[250px]" variant={args.variant} align={args.align} side={args.side}>
-        <div className="bg-primary/20 p-2">popover content</div>
-      </PopoverContent>
-    </Popover>
-  ),
-  play: async () => {
-    await userEvent.click(screen.getByText('Open popover'))
-    const popoverContent = await screen.findByText('popover content')
-    await waitFor(() => {
-      expect(window.getComputedStyle(popoverContent).visibility).toBe('visible')
-    })
-    await userEvent.click(document.body)
-    await waitFor(() => {
-      expect(screen.queryByText('popover content')).toBeNull()
-    })
-    await userEvent.keyboard('{Escape}')
-    await waitFor(() => {
-      expect(screen.queryByText('popover content')).toBeNull()
-    })
-  },
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2 items-center">
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">default</Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[250px]" variant="default">
-          <div className="bg-primary/20 p-2">popover content</div>
-        </PopoverContent>
-      </Popover>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button variant="outline">simple</Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[250px]" variant="simple">
-          <div className="bg-primary/20 p-2">popover content</div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  ),
-}

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

@@ -1,55 +0,0 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-function Popover({ ...props }: Readonly<React.ComponentProps<typeof PopoverPrimitive.Root>>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({ ...props }: Readonly<React.ComponentProps<typeof PopoverPrimitive.Trigger>>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-const popoverVariants = cva(
-  'outline-hidden border z-50 origin-(--radix-popover-content-transform-origin) 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',
-  {
-    variants: {
-      variant: {
-        default: 'bg-popover text-popover-foreground w-72 rounded p-4 shadow-md',
-        simple: 'bg-background text-foreground w-auto border-(--discreet-border) shadow-lg',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-function PopoverContent({
-  className,
-  variant,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: Readonly<React.ComponentProps<typeof PopoverPrimitive.Content> & VariantProps<typeof popoverVariants>>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(popoverVariants({ variant }), className)}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

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

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { expect, userEvent, screen } from 'storybook/test'
-
-import { Progress } from './progress'
-
-const meta = {
-  title: 'Progress',
-  component: Progress,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: {
-      control: { type: 'range', min: 0, max: 1, step: 0.01 },
-      description: 'Current progress value (0-100)',
-    },
-    size: {
-      description: 'css value for width of the progress bar',
-    },
-  },
-  args: {
-    size: '100%',
-  },
-} satisfies Meta<typeof Progress>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    value: 0.5,
-    size: '100%',
-  },
-  render: (args) => (
-    <div className="w-[200px]">
-      <Progress value={args.value} size={args.size} />
-    </div>
-  ),
-}
-
-const testValues = [0, 0.283, 0.8731, 1]
-
-export const ValueRatioTest: Story = {
-  args: { value: 0, size: '200px' },
-  render: () => (
-    <div>
-      {testValues.map((v, idx) => (
-        <div key={idx} data-testid={`progress-${idx}`}>
-          <Progress value={v} size="200px" />
-        </div>
-      ))}
-    </div>
-  ),
-  play: async () => {
-    function getFilledWidth(testId: string) {
-      const container = screen.getByTestId(testId)
-      const filled = container.querySelector('[data-testid="progress-filled"]')
-      return filled ? filled.getBoundingClientRect().width : 0
-    }
-    function getBgWidth(testId: string) {
-      const container = screen.getByTestId(testId)
-      const bg = container.querySelector('[data-testid="progress-bg"]')
-      return bg ? bg.getBoundingClientRect().width : 0
-    }
-
-    testValues.forEach((v, idx) => {
-      const width = getFilledWidth(`progress-${idx}`)
-      const bgWidth = getBgWidth(`progress-${idx}`)
-      if (v === 0) {
-        expect(width).toBeCloseTo(0, 1)
-      } else if (v === 1) {
-        expect(width).toBeCloseTo(bgWidth, 1)
-      } else {
-        expect(width).toBeCloseTo(bgWidth * v, 1)
-      }
-      expect(bgWidth).toBeGreaterThan(0)
-    })
-  },
-}

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

@@ -1,17 +0,0 @@
-import type { CSSProperties } from 'react'
-
-export const Progress = ({ value, size = '100%' }: { value: number; size?: string }) => {
-  return (
-    <div
-      style={{ '--parent-width': size } as CSSProperties}
-      className="w-(--parent-width) flex justify-center relative rounded-md overflow-hidden h-2 mt-8"
-    >
-      <div className="w-full absolute top-0 left-0 h-2.5 bg-(--discreet-border)" data-testid="progress-bg" />
-      <div
-        style={{ '--child-width': `calc(${value}*100%)` } as CSSProperties}
-        className="w-(--child-width) absolute h-2.5 top-0 left-0 bg-primary"
-        data-testid="progress-filled"
-      />
-    </div>
-  )
-}

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

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { expect, userEvent, screen } from 'storybook/test'
-
-import { RadioGroup, RadioGroupItem } from './radio-group'
-import { Label } from '@components/ui/label/label'
-
-const items = [
-  { value: 'item-1', label: 'Item 1' },
-  { value: 'item-2', label: 'Item 2' },
-  { value: 'item-3', label: 'Item 3' },
-]
-
-const circleVariants = ['default', 'grayThick'] as const
-const sizes = ['default', 'sm'] as const
-
-const meta = {
-  title: 'RadioGroup',
-  component: RadioGroupItem,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: {
-      table: { disable: true },
-    },
-    circleVariant: {
-      control: 'select',
-      options: circleVariants,
-    },
-    size: {
-      control: 'select',
-      options: sizes,
-    },
-    defaultValue: {
-      control: 'select',
-      options: items.map((i) => i.value),
-    },
-  },
-} satisfies Meta<typeof RadioGroupItem>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    value: '',
-    circleVariant: 'default',
-    size: 'default',
-    defaultValue: 'item-1',
-  },
-  render: (args) => (
-    <div className="w-[200px]">
-      <RadioGroup defaultValue={String(args.defaultValue)}>
-        {items.map(({ value, label }) => (
-          <div key={value} className="flex items-center gap-2">
-            <RadioGroupItem
-              value={value}
-              id={value}
-              circleVariant={args.circleVariant}
-              size={args.size}
-              className="cursor-pointer"
-            />
-            <Label htmlFor={value} className="cursor-pointer">
-              {label}
-            </Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </div>
-  ),
-  play: async () => {
-    // Check that the default radio is checked
-    const radio1 = screen.getByLabelText('Item 1')
-    const radio2 = screen.getByLabelText('Item 2')
-    await expect(radio1).toBeChecked()
-    await expect(radio2).not.toBeChecked()
-    // Click the label for Item 2
-    await userEvent.click(screen.getByLabelText('Item 2'))
-    await expect(radio2).toBeChecked()
-    await expect(radio1).not.toBeChecked()
-  },
-}
-
-const itemsVariants = [
-  { value: 'item-1', label: 'Item 1' },
-  { value: 'item-2', label: 'Item 2' },
-]
-
-export const CircleVariants: Story = {
-  args: {
-    value: '',
-    circleVariant: 'default',
-    size: 'default',
-    defaultValue: '',
-  },
-  render: () => (
-    <div className="flex gap-6">
-      {circleVariants.map((variant) => (
-        <div key={variant} className="flex items-center gap-2">
-          <RadioGroup defaultValue="item-2">
-            {itemsVariants.map(({ value, label }) => (
-              <div key={value} className="flex items-center gap-2">
-                <RadioGroupItem
-                  value={value}
-                  id={`variants-${variant}-${value}`}
-                  circleVariant={variant}
-                  size="default"
-                  className="cursor-pointer"
-                />
-                <Label htmlFor={`variants-${variant}-${value}`} className="cursor-pointer">
-                  {variant}
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
-        </div>
-      ))}
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  args: {
-    value: '',
-    circleVariant: 'default',
-    size: 'default',
-    defaultValue: '',
-  },
-  render: () => (
-    <div className="flex flex-col gap-2">
-      {sizes.map((size) => (
-        <div key={size} className="flex items-center gap-2 justify-center">
-          <RadioGroup defaultValue="item-2" className="flex flex-row">
-            {itemsVariants.map(({ value, label }) => (
-              <div key={value} className="flex items-center gap-2">
-                <RadioGroupItem
-                  value={value}
-                  id={`sizes-${size}-${value}`}
-                  circleVariant="default"
-                  size={size}
-                  className="cursor-pointer"
-                />
-                <Label htmlFor={`sizes-${size}-${value}`} className="cursor-pointer">
-                  {size}
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
-        </div>
-      ))}
-    </div>
-  ),
-}