@postxl/generators 0.2.2

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

@@ -0,0 +1,227 @@
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Slot } from '@radix-ui/react-slot'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
+  /**
+   * E2E test_id to identify the select.
+   */
+  __e2e_test_id__?: string
+}
+
+function Select({ __e2e_test_id__, ...rest }: SelectProps) {
+  return <SelectPrimitive.Root data-test-id={__e2e_test_id__} {...rest} />
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+const selectTriggerVariants = cva(
+  "data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex items-center gap-2 rounded-md border text-md shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        default: 'h-9 px-3 py-2',
+        sm: 'h-8 px-2.5 py-1.5',
+        lg: 'h-10 px-4 py-2.5',
+        xs: 'h-7 px-2 py-1',
+      },
+      variant: {
+        default:
+          'justify-between border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 bg-transparent',
+        simple:
+          'justify-start bg-background cursor-pointer border-foreground text-left data-[placeholder]:border-(--discreet-border)',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+  },
+)
+const selectTriggerTextVariants = cva('', {
+  variants: {
+    variant: {
+      default: '',
+      simple: 'overflow-hidden whitespace-nowrap text-ellipsis',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+function SelectTrigger({
+  className,
+  size,
+  variant,
+  children,
+  asChild = false,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> &
+  VariantProps<typeof selectTriggerVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : SelectPrimitive.Trigger
+
+  return (
+    <Comp
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(selectTriggerVariants({ size, variant, className }), '[&[data-state=open]>svg]:rotate-180')}
+      {...props}
+    >
+      <span className={cn('flex-1', selectTriggerTextVariants({ variant }))}>{children}</span>
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="flex-none size-4 opacity-50 " />
+      </SelectPrimitive.Icon>
+    </Comp>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          className,
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+const selectItemVariants = cva(
+  "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded pr-8 pl-2 text-md outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+  {
+    variants: {
+      type: {
+        default: '',
+        deselect: 'italic text-muted-foreground focus:text-muted-foreground',
+      },
+      spacing: {
+        sm: 'py-1',
+        md: 'py-1.5',
+        lg: 'py-2.5',
+      },
+    },
+    defaultVariants: {
+      type: 'default',
+      spacing: 'md',
+    },
+  },
+)
+
+function SelectItem({
+  className,
+  children,
+  type,
+  spacing,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item> & VariantProps<typeof selectItemVariants>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(selectItemVariants({ type, spacing, className }))}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4 " />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

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

@@ -0,0 +1,21 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

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

@@ -0,0 +1,25 @@
+import { Separator } from './separator'
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta: Meta<typeof Separator> = {
+  title: 'Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+}
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  args: { orientation: 'horizontal' },
+  render: (args) => (
+    <div className="flex items-center justify-center h-56">
+      <Separator orientation={args.orientation} />
+    </div>
+  ),
+}

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

@@ -0,0 +1,45 @@
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from './sheet'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { Button } from '@components/ui/button/button'
+
+const meta: Meta<typeof Sheet> = {
+  title: 'Sheet',
+  component: Sheet,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  render: () => (
+    <div className="flex items-center justify-center">
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="outline">Open</Button>
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
+          </SheetHeader>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button type="submit">Save changes</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  ),
+}

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

@@ -0,0 +1,107 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &
+  VariantProps<typeof sheetVariants>
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = 'right', className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <Cross2Icon className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+        {children}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+)
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

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

@@ -0,0 +1,26 @@
+import { Skeleton } from './skeleton'
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="flex flex-col space-y-3">
+        <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>
+    </div>
+  ),
+}

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

@@ -0,0 +1,7 @@
+import { cn } from '@lib/utils'
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />
+}
+
+export { Skeleton }

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

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, screen } from 'storybook/test'
+import { useState } from 'react'
+import { Slider } from './slider'
+
+const meta = {
+  title: 'Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    defaultValue: { control: 'object' },
+    sliderVariant: {
+      control: 'select',
+      options: ['default', 'gray'],
+    },
+    knobVariant: {
+      control: 'select',
+      options: ['default', 'gray'],
+    },
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: [25],
+    sliderVariant: 'default',
+    knobVariant: 'default',
+  },
+} satisfies Meta<typeof Slider>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultValue: [25],
+    className: 'w-64',
+  },
+}
+
+export const Variants: Story = {
+  render: () => {
+    return (
+      <div className="space-y-4">
+        <div className="flex flex-col items-center space-y-2">
+          <Slider defaultValue={[25]} className="w-64" />
+          <span>Default</span>
+        </div>
+        <div className="flex flex-col items-center space-y-2">
+          <Slider defaultValue={[25, 75]} className="w-64" />
+          <span>Range</span>
+        </div>
+        <div className="flex flex-col items-center space-y-2">
+          <Slider defaultValue={[25]} sliderVariant="gray" className="w-64" />
+          <span>Gray Slider</span>
+        </div>
+        <div className="flex flex-col items-center space-y-2">
+          <Slider defaultValue={[25]} knobVariant="gray" className="w-64" />
+          <span>Gray Knob</span>
+        </div>
+        <div className="flex flex-col items-center space-y-2">
+          <Slider defaultValue={[25]} sliderVariant="gray" knobVariant="gray" className="w-64" />
+          <span>Gray Both</span>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const InteractiveTest: Story = {
+  render: () => {
+    const [value, setValue] = useState<number[]>([30])
+    return (
+      <div className="space-y-4">
+        <Slider value={value} onValueChange={setValue} className="w-64" data-testid="controlled-slider" />
+        <p data-testid="slider-value">Value: {value}</p>
+      </div>
+    )
+  },
+  play: async () => {
+    // Find the slider
+    const slider = screen.getByTestId('controlled-slider')
+    const valueText = screen.getByTestId('slider-value')
+
+    // Get the thumb and track to simulate interactions
+    const thumb = slider.querySelector('[data-orientation]')
+
+    // Click on a different position on the slider
+    await userEvent.click(screen.getByTestId('controlled-slider'))
+
+    // Check if the value updates (approximate check)
+    await expect(valueText.textContent).toBe('Value: 0')
+  },
+}

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

@@ -0,0 +1,98 @@
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { CSSProperties } from 'react'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const sliderVariants = cva('absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full', {
+  variants: {
+    sliderVariant: {
+      default: 'bg-primary',
+      gray: 'bg-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    sliderVariant: 'default',
+  },
+})
+
+const knobVariants = cva(
+  'bg-background block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow]  focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      knobVariant: {
+        default: 'border-primary ring-ring/50 hover:ring-4 focus-visible:ring-4',
+        gray: 'border-muted-foreground border-2',
+      },
+    },
+    defaultVariants: {
+      knobVariant: 'default',
+    },
+  },
+)
+
+type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root> &
+  VariantProps<typeof sliderVariants> &
+  VariantProps<typeof knobVariants> & { knobSize?: number }
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  sliderVariant,
+  knobVariant,
+  knobSize,
+  ...props
+}: SliderProps) {
+  const _values = React.useMemo(() => {
+    if (Array.isArray(value)) {
+      return value
+    } else if (Array.isArray(defaultValue)) {
+      return defaultValue
+    }
+    return [min, max]
+  }, [value, defaultValue, min, max])
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        'cursor-pointer relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+        )}
+      >
+        <SliderPrimitive.Range data-slot="slider-range" className={cn(sliderVariants({ sliderVariant }))} />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className={cn(
+            knobVariants({
+              knobVariant,
+            }),
+            knobSize ? 'size-(--knob-size)' : '',
+          )}
+          style={{ '--knob-size': `${knobSize}px` } as CSSProperties}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider, sliderVariants, knobVariants }

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Spinner } from './spinner'
+
+const meta = {
+  title: 'Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Spinner>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <Spinner classNames="w-8 h-8" />,
+}