@postxl/generators 0.2.2

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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,154 @@
+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>
+  ),
+}