@codefast/ui 0.0.40 → 0.0.42

package/src/react/carousel.tsx

@@ -1,17 +1,19 @@
-"use client";
+'use client';
 
-import * as React from "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 { cn } from "../lib/utils";
-import { Button, type ButtonProps } from "./button";
+import * as React from '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 { cn } from '../lib/utils';
+import { Button, type ButtonProps } from './button';
 
 /* -----------------------------------------------------------------------------
  * Context: Carousel
  * -------------------------------------------------------------------------- */
 
-const CAROUSEL_NAME = "Carousel";
+const CAROUSEL_NAME = 'Carousel';
 
 type ScopedProps<P> = P & { __scopeCarousel?: Scope };
 
@@ -25,7 +27,7 @@ type CarouselPlugin = UseCarouselParameters[1];
 interface BaseCarouselProps {
   opts?: CarouselOptions;
   plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
+  orientation?: 'horizontal' | 'vertical';
   setApi?: (api: CarouselApi) => void;
 }
 
@@ -38,7 +40,8 @@ type CarouselContextValue = {
   canScrollNext: boolean;
 } & BaseCarouselProps;
 
-const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
+const [CarouselProvider, useCarouselContext] =
+  createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: Carousel
@@ -49,13 +52,22 @@ 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(
       {
         ...opts,
-        axis: orientation === "vertical" ? "y" : "x",
+        axis: orientation === 'vertical' ? 'y' : 'x',
       },
       plugins,
     );
@@ -82,10 +94,10 @@ const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
+        if (event.key === 'ArrowLeft') {
           event.preventDefault();
           scrollPrev();
-        } else if (event.key === "ArrowRight") {
+        } else if (event.key === 'ArrowRight') {
           event.preventDefault();
           scrollNext();
         }
@@ -107,11 +119,11 @@ const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
       }
 
       onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
 
       return () => {
-        api.off("select", onSelect);
+        api.off('select', onSelect);
       };
     }, [api, onSelect]);
 
@@ -121,7 +133,9 @@ 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}
@@ -130,7 +144,7 @@ const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
+          className={cn('relative', className)}
           role="region"
           aria-roledescription="carousel"
           {...props}
@@ -148,20 +162,33 @@ Carousel.displayName = CAROUSEL_NAME;
  * Component: CarouselContent
  * -------------------------------------------------------------------------- */
 
-const CAROUSEL_CONTENT_NAME = "CarouselContent";
+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>
@@ -175,21 +202,31 @@ CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
  * Component: CarouselItem
  * -------------------------------------------------------------------------- */
 
-const CAROUSEL_ITEM_NAME = "CarouselItem";
+const CAROUSEL_ITEM_NAME = 'CarouselItem';
 
 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}
       />
     );
@@ -202,17 +239,29 @@ CarouselItem.displayName = CAROUSEL_ITEM_NAME;
  * Component: CarouselPrevious
  * -------------------------------------------------------------------------- */
 
-const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+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
@@ -220,10 +269,10 @@ const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPrevi
         variant={variant}
         size={size}
         className={cn(
-          "absolute size-8 rounded-full",
-          orientation === "horizontal"
-            ? "-left-12 top-1/2 -translate-y-1/2"
-            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          'absolute size-8 rounded-full',
+          orientation === 'horizontal'
+            ? '-left-12 top-1/2 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
           className,
         )}
         disabled={!canScrollPrev}
@@ -243,17 +292,26 @@ CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
  * Component: CarouselNext
  * -------------------------------------------------------------------------- */
 
-const CAROUSEL_NEXT_NAME = "CarouselNext";
+const CAROUSEL_NEXT_NAME = 'CarouselNext';
 
 type CarouselNextElement = HTMLButtonElement;
 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
@@ -261,10 +319,10 @@ const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
         variant={variant}
         size={size}
         className={cn(
-          "absolute size-8 rounded-full",
-          orientation === "horizontal"
-            ? "-right-12 top-1/2 -translate-y-1/2"
-            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          'absolute size-8 rounded-full',
+          orientation === 'horizontal'
+            ? '-right-12 top-1/2 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
           className,
         )}
         disabled={!canScrollNext}

package/src/react/checkbox-cards.tsx

@@ -1,19 +1,32 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { CheckIcon } from "@radix-ui/react-icons";
-import { cn } from "../lib/utils";
-import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+import * as React from 'react';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { cn } from '../lib/utils';
+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;
@@ -22,33 +35,42 @@ 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-compound/70 aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 cursor-default rounded-sm border shadow 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-compound/70 aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 cursor-default rounded-sm border shadow 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;
 
@@ -56,4 +78,9 @@ CheckboxCardsItem.displayName = CheckboxGroupPrimitive.Item.displayName;
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsProps, type CheckboxCardsItemProps };
+export {
+  CheckboxCards,
+  CheckboxCardsItem,
+  type CheckboxCardsProps,
+  type CheckboxCardsItemProps,
+};

package/src/react/checkbox-group.primitive.tsx

@@ -1,25 +1,26 @@
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { createCheckboxScope } from "@radix-ui/react-checkbox";
-import { createContextScope, type Scope } from "@radix-ui/react-context";
-import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
-import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useDirection } from "@radix-ui/react-direction";
-import { Primitive } from "@radix-ui/react-primitive";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { createCheckboxScope } from '@radix-ui/react-checkbox';
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
+import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useDirection } from '@radix-ui/react-direction';
+import { Primitive } from '@radix-ui/react-primitive';
 
 /* -------------------------------------------------------------------------------------------------
  * Component: CheckboxGroup
  * -----------------------------------------------------------------------------------------------*/
 
-const CHECKBOX_GROUP_NAME = "CheckboxGroup";
+const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
 
 type ScopedProps<P> = P & { __scopeCheckboxGroup?: Scope };
 
-const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(CHECKBOX_GROUP_NAME, [
-  createRovingFocusGroupScope,
-  createCheckboxScope,
-]);
+const [createCheckboxGroupContext, createCheckboxGroupScope] =
+  createContextScope(CHECKBOX_GROUP_NAME, [
+    createRovingFocusGroupScope,
+    createCheckboxScope,
+  ]);
 
 const useRovingFocusGroupScope = createRovingFocusGroupScope();
 const useCheckboxScope = createCheckboxScope();
@@ -38,19 +39,27 @@ const [CheckboxGroupProvider, useCheckboxGroupContext] =
 
 type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
 
-interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
-  name?: CheckboxGroupContextValue["name"];
-  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>["required"];
-  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>["disabled"];
-  dir?: RovingFocusGroup.RovingFocusGroupProps["dir"];
-  orientation?: RovingFocusGroup.RovingFocusGroupProps["orientation"];
-  loop?: RovingFocusGroup.RovingFocusGroupProps["loop"];
+interface CheckboxGroupProps
+  extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
+  name?: CheckboxGroupContextValue['name'];
+  required?: React.ComponentPropsWithoutRef<
+    typeof CheckboxPrimitive.Root
+  >['required'];
+  disabled?: React.ComponentPropsWithoutRef<
+    typeof CheckboxPrimitive.Root
+  >['disabled'];
+  dir?: RovingFocusGroup.RovingFocusGroupProps['dir'];
+  orientation?: RovingFocusGroup.RovingFocusGroupProps['orientation'];
+  loop?: RovingFocusGroup.RovingFocusGroupProps['loop'];
   defaultValue?: string[];
-  value?: CheckboxGroupContextValue["value"];
+  value?: CheckboxGroupContextValue['value'];
   onValueChange?: (value: string[]) => void;
 }
 
-const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
+const CheckboxGroup = React.forwardRef<
+  CheckboxGroupElement,
+  CheckboxGroupProps
+>(
   (
     {
       __scopeCheckboxGroup,
@@ -67,7 +76,8 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
     }: ScopedProps<CheckboxGroupProps>,
     ref,
   ) => {
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const rovingFocusGroupScope =
+      useRovingFocusGroupScope(__scopeCheckboxGroup);
     const direction = useDirection(dir);
     const [value = [], setValue] = useControllableState({
       prop: valueProp,
@@ -84,7 +94,9 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
 
     const handleItemUncheck = React.useCallback(
       (itemValue: string) => {
-        setValue((prevValue = []) => prevValue.filter((val) => val !== itemValue));
+        setValue((prevValue = []) =>
+          prevValue.filter((val) => val !== itemValue),
+        );
       },
       [setValue],
     );
@@ -99,9 +111,21 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
         onItemCheck={handleItemCheck}
         onItemUncheck={handleItemUncheck}
       >
-        <RovingFocusGroup.Root asChild {...rovingFocusGroupScope} orientation={orientation} dir={direction} loop={loop}>
+        <RovingFocusGroup.Root
+          asChild
+          {...rovingFocusGroupScope}
+          orientation={orientation}
+          dir={direction}
+          loop={loop}
+        >
           {/* eslint-disable-next-line react/jsx-pascal-case -- radix-ui */}
-          <Primitive.div ref={ref} role="group" data-disabled={disabled ? "" : undefined} dir={direction} {...props} />
+          <Primitive.div
+            ref={ref}
+            role="group"
+            data-disabled={disabled ? '' : undefined}
+            dir={direction}
+            {...props}
+          />
         </RovingFocusGroup.Root>
       </CheckboxGroupProvider>
     );
@@ -121,21 +145,37 @@ type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
 interface CheckboxGroupItemProps
   extends Omit<
     React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
-    "checked" | "defaultChecked" | "onCheckedChange" | "name"
+    'checked' | 'defaultChecked' | 'onCheckedChange' | 'name'
   > {
   value: string;
 }
 
-const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
-  ({ __scopeCheckboxGroup, disabled, ...props }: ScopedProps<CheckboxGroupItemProps>, ref) => {
+const CheckboxGroupItem = React.forwardRef<
+  CheckboxGroupItemElement,
+  CheckboxGroupItemProps
+>(
+  (
+    {
+      __scopeCheckboxGroup,
+      disabled,
+      ...props
+    }: ScopedProps<CheckboxGroupItemProps>,
+    ref,
+  ) => {
     const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
     const isDisabled = context.disabled || disabled;
-    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const rovingFocusGroupScope =
+      useRovingFocusGroupScope(__scopeCheckboxGroup);
     const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
     const checked = context.value?.includes(props.value);
 
     return (
-      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!isDisabled} active={checked}>
+      <RovingFocusGroup.Item
+        asChild
+        {...rovingFocusGroupScope}
+        focusable={!isDisabled}
+        active={checked}
+      >
         <CheckboxPrimitive.Root
           ref={ref}
           name={context.name}
@@ -165,13 +205,28 @@ CheckboxGroupItem.displayName = ITEM_NAME;
 
 const INDICATOR_NAME = `${CHECKBOX_GROUP_NAME}Indicator`;
 
-type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.Indicator>;
-type CheckboxGroupIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
-
-const CheckboxGroupIndicator = React.forwardRef<CheckboxGroupIndicatorElement, CheckboxGroupIndicatorProps>(
-  ({ __scopeCheckboxGroup, ...props }: ScopedProps<CheckboxGroupIndicatorProps>, ref) => {
+type CheckboxGroupIndicatorElement = React.ElementRef<
+  typeof CheckboxPrimitive.Indicator
+>;
+type CheckboxGroupIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Indicator
+>;
+
+const CheckboxGroupIndicator = React.forwardRef<
+  CheckboxGroupIndicatorElement,
+  CheckboxGroupIndicatorProps
+>(
+  (
+    {
+      __scopeCheckboxGroup,
+      ...props
+    }: ScopedProps<CheckboxGroupIndicatorProps>,
+    ref,
+  ) => {
     const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
-    return <CheckboxPrimitive.Indicator ref={ref} {...checkboxScope} {...props} />;
+    return (
+      <CheckboxPrimitive.Indicator ref={ref} {...checkboxScope} {...props} />
+    );
   },
 );