@codefast/ui 0.0.50 → 0.0.52

package/src/react/breadcrumb.tsx

@@ -13,9 +13,9 @@ interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   separator?: React.ReactNode;
 }
 
-const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(
-  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />,
-);
+const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, ref) => (
+  <nav ref={ref} aria-label="breadcrumb" {...props} />
+));
 
 Breadcrumb.displayName = 'Breadcrumb';
 
@@ -26,10 +26,7 @@ Breadcrumb.displayName = 'Breadcrumb';
 type BreadcrumbListElement = HTMLOListElement;
 type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
 
-const BreadcrumbList = React.forwardRef<
-  BreadcrumbListElement,
-  BreadcrumbListProps
->(({ className, ...props }, ref) => (
+const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListProps>(({ className, ...props }, ref) => (
   <ol
     ref={ref}
     className={cn(
@@ -49,15 +46,8 @@ BreadcrumbList.displayName = 'BreadcrumbList';
 type BreadcrumbItemElement = HTMLLIElement;
 type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
 
-const BreadcrumbItem = React.forwardRef<
-  BreadcrumbItemElement,
-  BreadcrumbItemProps
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn('inline-flex items-center gap-1.5', className)}
-    {...props}
-  />
+const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, BreadcrumbItemProps>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
 ));
 
 BreadcrumbItem.displayName = 'BreadcrumbItem';
@@ -68,25 +58,17 @@ BreadcrumbItem.displayName = 'BreadcrumbItem';
 
 type BreadcrumbLinkElement = HTMLAnchorElement;
 
-interface BreadcrumbLinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   asChild?: boolean;
 }
 
-const BreadcrumbLink = React.forwardRef<
-  BreadcrumbLinkElement,
-  BreadcrumbLinkProps
->(({ asChild, className, ...props }, ref) => {
-  const Component = asChild ? Slot : 'a';
+const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Component = asChild ? Slot : 'a';
 
-  return (
-    <Component
-      ref={ref}
-      className={cn('transition', 'hover:text-foreground', className)}
-      {...props}
-    />
-  );
-});
+    return <Component ref={ref} className={cn('transition', 'hover:text-foreground', className)} {...props} />;
+  },
+);
 
 BreadcrumbLink.displayName = 'BreadcrumbLink';
 
@@ -97,10 +79,7 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
 type BreadcrumbPageElement = HTMLSpanElement;
 type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
 
-const BreadcrumbPage = React.forwardRef<
-  BreadcrumbPageElement,
-  BreadcrumbPageProps
->(({ className, ...props }, ref) => (
+const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(({ className, ...props }, ref) => (
   <span
     ref={ref}
     role="link"
@@ -119,18 +98,9 @@ BreadcrumbPage.displayName = 'BreadcrumbPage';
 
 type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: BreadcrumbSeparatorProps): React.JSX.Element {
+function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element {
   return (
-    <li
-      role="presentation"
-      aria-hidden="true"
-      className={cn('[&>svg]:size-3.5', className)}
-      {...props}
-    >
+    <li role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
       {children ?? <ChevronRightIcon />}
     </li>
   );
@@ -142,10 +112,7 @@ function BreadcrumbSeparator({
 
 type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
 
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}: BreadcrumbEllipsisProps): React.JSX.Element {
+function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
   return (
     <span
       role="presentation"

package/src/react/button.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Fragment } from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { type VariantProps } from 'cva';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { cva } from '../lib/utils';
 import { Spinner } from './spinner';
+import type { VariantProps } from 'cva';
 
 /* -----------------------------------------------------------------------------
  * Variant: Button
@@ -15,14 +15,12 @@ const buttonVariants = cva({
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
-      destructive:
-        'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
       ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
       link: 'text-primary underline-offset-4 hover:underline',
       outline:
         'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground border shadow-sm',
-      secondary:
-        'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
     },
     size: {
       default: 'h-10 px-4 gap-2',
@@ -53,25 +51,12 @@ type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
 
 type ButtonElement = HTMLButtonElement;
 
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    ButtonVariantsProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {
   asChild?: boolean;
 }
 
 const Button = React.forwardRef<ButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      className,
-      variant,
-      size,
-      loading = false,
-      asChild = false,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {
     const Component = asChild ? Slot : 'button';
     const ComponentLoading = asChild ? 'span' : Fragment;
     const disabled = loading || props.disabled;

package/src/react/calendar.tsx

@@ -1,12 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import {
-  type DateRange,
-  DayPicker,
-  type DayPickerProps,
-  type StyledComponent,
-} from 'react-day-picker';
+import { type DateRange, DayPicker, type DayPickerProps, type StyledComponent } from 'react-day-picker';
 import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { cn } from '../lib/utils';
 import { buttonVariants } from './button';
@@ -15,28 +10,17 @@ import { buttonVariants } from './button';
  * Component: Calendar
  * -------------------------------------------------------------------------- */
 
-function ChevronLeft({
-  children: _,
-  ...props
-}: StyledComponent): React.JSX.Element {
+function ChevronLeft({ children: _, ...props }: StyledComponent): React.JSX.Element {
   return <ChevronLeftIcon className="size-4" {...props} />;
 }
 
-function ChevronRight({
-  children: _,
-  ...props
-}: StyledComponent): React.JSX.Element {
+function ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {
   return <ChevronRightIcon className="size-4" {...props} />;
 }
 
 type CalendarProps = DayPickerProps;
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps): React.JSX.Element {
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -75,8 +59,7 @@ function Calendar({
         day_outside:
           'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
         day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle:
-          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
         day_hidden: 'invisible',
         ...classNames,
       }}

package/src/react/card.tsx

@@ -8,18 +8,9 @@ import { cn } from '../lib/utils';
 type CardElement = HTMLDivElement;
 type CardProps = React.HTMLAttributes<HTMLDivElement>;
 
-const Card = React.forwardRef<CardElement, CardProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'bg-card text-card-foreground rounded-lg border shadow-sm',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const Card = React.forwardRef<CardElement, CardProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)} {...props} />
+));
 
 Card.displayName = 'Card';
 
@@ -30,15 +21,9 @@ Card.displayName = 'Card';
 type CardHeaderElement = HTMLDivElement;
 type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CardHeader = React.forwardRef<CardHeaderElement, CardHeaderProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex flex-col space-y-1.5 p-6', className)}
-      {...props}
-    />
-  ),
-);
+const CardHeader = React.forwardRef<CardHeaderElement, CardHeaderProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+));
 
 CardHeader.displayName = 'CardHeader';
 
@@ -49,17 +34,11 @@ CardHeader.displayName = 'CardHeader';
 type CardTitleElement = HTMLParagraphElement;
 type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
-const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(
-  ({ children, className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('font-semibold leading-none tracking-tight', className)}
-      {...props}
-    >
-      {children}
-    </h3>
-  ),
-);
+const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(({ children, className, ...props }, ref) => (
+  <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
+    {children}
+  </h3>
+));
 
 CardTitle.displayName = 'CardTitle';
 
@@ -70,16 +49,11 @@ CardTitle.displayName = 'CardTitle';
 type CardDescriptionElement = HTMLParagraphElement;
 type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const CardDescription = React.forwardRef<
-  CardDescriptionElement,
-  CardDescriptionProps
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
-    {...props}
-  />
-));
+const CardDescription = React.forwardRef<CardDescriptionElement, CardDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ),
+);
 
 CardDescription.displayName = 'CardDescription';
 
@@ -90,11 +64,9 @@ CardDescription.displayName = 'CardDescription';
 type CardContentElement = HTMLDivElement;
 type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CardContent = React.forwardRef<CardContentElement, CardContentProps>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  ),
-);
+const CardContent = React.forwardRef<CardContentElement, CardContentProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
 
 CardContent.displayName = 'CardContent';
 
@@ -105,15 +77,9 @@ CardContent.displayName = 'CardContent';
 type CardFooterElement = HTMLDivElement;
 type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CardFooter = React.forwardRef<CardFooterElement, CardFooterProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex items-center p-6 pt-0', className)}
-      {...props}
-    />
-  ),
-);
+const CardFooter = React.forwardRef<CardFooterElement, CardFooterProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+));
 
 CardFooter.displayName = 'CardFooter';
 

package/src/react/carousel.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import * as React from 'react';
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from 'embla-carousel-react';
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
 import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { createContextScope } from '@radix-ui/react-context';
 import { cn } from '../lib/utils';
-import { Button, type ButtonProps } from './button';
+import { Button } from './button';
+import type { ButtonProps } from './button';
+import type { Scope } from '@radix-ui/react-context';
 
 /* -----------------------------------------------------------------------------
  * Context: Carousel
@@ -40,8 +40,7 @@ type CarouselContextValue = {
   canScrollNext: boolean;
 } & BaseCarouselProps;
 
-const [CarouselProvider, useCarouselContext] =
-  createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
+const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: Carousel
@@ -52,16 +51,7 @@ type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
 
 const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
   (
-    {
-      __scopeCarousel,
-      children,
-      orientation,
-      opts,
-      setApi,
-      plugins,
-      className,
-      ...props
-    }: ScopedProps<CarouselProps>,
+    { __scopeCarousel, children, orientation, opts, setApi, plugins, className, ...props }: ScopedProps<CarouselProps>,
     ref,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(
@@ -133,9 +123,7 @@ const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
         carouselRef={carouselRef}
         api={api}
         opts={opts}
-        orientation={
-          orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal')
-        }
+        orientation={orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal')}
         scrollPrev={scrollPrev}
         scrollNext={scrollNext}
         canScrollPrev={canScrollPrev}
@@ -167,28 +155,15 @@ const CAROUSEL_CONTENT_NAME = 'CarouselContent';
 type CarouselContentElement = HTMLDivElement;
 type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CarouselContent = React.forwardRef<
-  CarouselContentElement,
-  CarouselContentProps
->(
-  (
-    { __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>,
-    ref,
-  ) => {
-    const { carouselRef, orientation } = useCarouselContext(
-      CAROUSEL_CONTENT_NAME,
-      __scopeCarousel,
-    );
+const CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(
+  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, ref) => {
+    const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
 
     return (
       <div ref={carouselRef} className="overflow-hidden">
         <div
           ref={ref}
-          className={cn(
-            'flex',
-            orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-            className,
-          )}
+          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
           {...props}
         />
       </div>
@@ -208,25 +183,15 @@ type CarouselItemElement = HTMLDivElement;
 type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
-  (
-    { __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>,
-    ref,
-  ) => {
-    const { orientation } = useCarouselContext(
-      CAROUSEL_ITEM_NAME,
-      __scopeCarousel,
-    );
+  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, ref) => {
+    const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
 
     return (
       <div
         ref={ref}
         role="group"
         aria-roledescription="slide"
-        className={cn(
-          'min-w-0 shrink-0 grow-0 basis-full',
-          orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-          className,
-        )}
+        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
         {...props}
       />
     );
@@ -244,24 +209,12 @@ const CAROUSEL_PREVIOUS_NAME = 'CarouselPrevious';
 type CarouselPreviousElement = HTMLButtonElement;
 type CarouselPreviousProps = ButtonProps;
 
-const CarouselPrevious = React.forwardRef<
-  CarouselPreviousElement,
-  CarouselPreviousProps
->(
+const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(
   (
-    {
-      __scopeCarousel,
-      className,
-      variant = 'outline',
-      size = 'icon',
-      ...props
-    }: ScopedProps<CarouselPreviousProps>,
+    { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselPreviousProps>,
     ref,
   ) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(
-      CAROUSEL_PREVIOUS_NAME,
-      __scopeCarousel,
-    );
+    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
 
     return (
       <Button
@@ -299,19 +252,10 @@ type CarouselNextProps = ButtonProps;
 
 const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
   (
-    {
-      __scopeCarousel,
-      className,
-      variant = 'outline',
-      size = 'icon',
-      ...props
-    }: ScopedProps<CarouselNextProps>,
+    { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselNextProps>,
     ref,
   ) => {
-    const { orientation, scrollNext, canScrollNext } = useCarouselContext(
-      CAROUSEL_NEXT_NAME,
-      __scopeCarousel,
-    );
+    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
 
     return (
       <Button

package/src/react/checkbox-cards.tsx

@@ -9,24 +9,11 @@ import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
  * Component: CheckboxCards
  * -------------------------------------------------------------------------- */
 
-type CheckboxCardsElement = React.ElementRef<
-  typeof CheckboxGroupPrimitive.Root
->;
-type CheckboxCardsProps = React.ComponentPropsWithoutRef<
-  typeof CheckboxGroupPrimitive.Root
->;
+type CheckboxCardsElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxCardsProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
 
-const CheckboxCards = React.forwardRef<
-  CheckboxCardsElement,
-  CheckboxCardsProps
->(({ className, ...props }, ref) => {
-  return (
-    <CheckboxGroupPrimitive.Root
-      className={cn('grid gap-2', className)}
-      {...props}
-      ref={ref}
-    />
-  );
+const CheckboxCards = React.forwardRef<CheckboxCardsElement, CheckboxCardsProps>(({ className, ...props }, ref) => {
+  return <CheckboxGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
 });
 
 CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
@@ -35,42 +22,33 @@ CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
  * Component: CheckboxCardsItem
  * -------------------------------------------------------------------------- */
 
-type CheckboxCardsItemElement = React.ElementRef<
-  typeof CheckboxGroupPrimitive.Item
->;
+type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
 
-interface CheckboxCardsItemProps
-  extends React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item> {
+interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item> {
   checkboxClassName?: string;
 }
 
-const CheckboxCardsItem = React.forwardRef<
-  CheckboxCardsItemElement,
-  CheckboxCardsItemProps
->(({ children, className, checkboxClassName, ...props }, ref) => {
-  return (
-    <label
-      className={cn(
-        'flex items-center justify-center gap-4 rounded-md border p-4',
-        className,
-      )}
-    >
-      {children}
-      <CheckboxGroupPrimitive.Item
-        ref={ref}
-        className={cn(
-          'border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          checkboxClassName,
-        )}
-        {...props}
-      >
-        <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
-          <CheckIcon className="size-3.5" />
-        </CheckboxGroupPrimitive.CheckboxGroupIndicator>
-      </CheckboxGroupPrimitive.Item>
-    </label>
-  );
-});
+const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
+  ({ children, className, checkboxClassName, ...props }, ref) => {
+    return (
+      <label className={cn('flex items-center justify-center gap-4 rounded-md border p-4', className)}>
+        {children}
+        <CheckboxGroupPrimitive.Item
+          ref={ref}
+          className={cn(
+            'border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            checkboxClassName,
+          )}
+          {...props}
+        >
+          <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
+            <CheckIcon className="size-3.5" />
+          </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+        </CheckboxGroupPrimitive.Item>
+      </label>
+    );
+  },
+);
 
 CheckboxCardsItem.displayName = CheckboxGroupPrimitive.Item.displayName;
 
@@ -78,9 +56,4 @@ CheckboxCardsItem.displayName = CheckboxGroupPrimitive.Item.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  CheckboxCards,
-  CheckboxCardsItem,
-  type CheckboxCardsProps,
-  type CheckboxCardsItemProps,
-};
+export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsProps, type CheckboxCardsItemProps };