@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5

package/src/css/{yellow.css → themes/yellow.css}

@@ -1,4 +1,16 @@
+/* -------------------------------------------------------------------------
+ * Yellow theme
+ *
+ * Color tokens for the yellow palette across the light (`:root`),
+ * `.dark`, and system-preference variants. Trailing comments note the source
+ * palette swatch for each value.
+ * ------------------------------------------------------------------------- */
+
 :root {
+  /* ----------------------------------------------------------------------
+   * Surfaces & semantic colors
+   * ---------------------------------------------------------------------- */
+
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -22,10 +34,18 @@
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  /* ----------------------------------------------------------------------
+   * Form & focus
+   * ---------------------------------------------------------------------- */
+
   --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --ring: oklch(0.852 0.199 91.936); /* --color-yellow-400 */
 
+  /* ----------------------------------------------------------------------
+   * Sidebar
+   * ---------------------------------------------------------------------- */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --sidebar-primary: oklch(0.681 0.162 75.834); /* --color-yellow-600 */
@@ -35,6 +55,10 @@
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.852 0.199 91.936); /* --color-yellow-400 */
 
+  /* ----------------------------------------------------------------------
+   * Charts
+   * ---------------------------------------------------------------------- */
+
   --chart-1: oklch(0.905 0.182 98.111); /* --color-yellow-300 */
   --chart-2: oklch(0.795 0.184 86.047); /* --color-yellow-500 */
   --chart-3: oklch(0.681 0.162 75.834); /* --color-yellow-600 */
@@ -43,6 +67,8 @@
 }
 
 .dark {
+  /* Dark variant — overrides the light tokens above. */
+
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -85,8 +111,11 @@
   --chart-4: oklch(0.554 0.135 66.442); /* --color-yellow-700 */
   --chart-5: oklch(0.476 0.114 61.907); /* --color-yellow-800 */
 }
+
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
+    /* System-preference dark — applied when no explicit .light is set. */
+
     --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
     --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 

package/src/css/{zinc.css → themes/zinc.css}

@@ -1,4 +1,16 @@
+/* -------------------------------------------------------------------------
+ * Zinc theme
+ *
+ * Color tokens for the zinc palette across the light (`:root`),
+ * `.dark`, and system-preference variants. Trailing comments note the source
+ * palette swatch for each value.
+ * ------------------------------------------------------------------------- */
+
 :root {
+  /* ----------------------------------------------------------------------
+   * Surfaces & semantic colors
+   * ---------------------------------------------------------------------- */
+
   --background: oklch(1 0 0); /* --color-zinc-50 */
   --foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
@@ -22,10 +34,18 @@
   --card: oklch(1 0 0); /* --color-zinc-50 */
   --card-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
 
+  /* ----------------------------------------------------------------------
+   * Form & focus
+   * ---------------------------------------------------------------------- */
+
   --border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --input: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --ring: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  /* ----------------------------------------------------------------------
+   * Sidebar
+   * ---------------------------------------------------------------------- */
+
   --sidebar: oklch(0.985 0 0); /* --color-zinc-50 */
   --sidebar-foreground: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --sidebar-primary: oklch(0.21 0.006 285.885); /* --color-zinc-900 */
@@ -35,6 +55,10 @@
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.705 0.015 286.067); /* --color-zinc-400 */
 
+  /* ----------------------------------------------------------------------
+   * Charts
+   * ---------------------------------------------------------------------- */
+
   --chart-1: oklch(0.646 0.222 41.116); /* --color-orange-600 */
   --chart-2: oklch(0.6 0.118 184.704); /* --color-teal-600 */
   --chart-3: oklch(0.398 0.07 227.392); /* --color-cyan-900 */
@@ -43,6 +67,8 @@
 }
 
 .dark {
+  /* Dark variant — overrides the light tokens above. */
+
   --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
   --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 
@@ -85,8 +111,11 @@
   --chart-4: oklch(0.627 0.265 303.9); /* --color-purple-500 */
   --chart-5: oklch(0.645 0.246 16.439); /* --color-rose-500 */
 }
+
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
+    /* System-preference dark — applied when no explicit .light is set. */
+
     --background: oklch(0.141 0.005 285.823); /* --color-zinc-950 */
     --foreground: oklch(0.985 0 0); /* --color-zinc-50 */
 

package/src/hooks/use-animated-value.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 
 /**
@@ -21,11 +19,7 @@ import { useEffect, useRef, useState } from "react";
  *
  * @since 0.3.16-canary.0
  */
-export function useAnimatedValue(
-  targetValue: null | number,
-  duration: number,
-  animate?: boolean,
-): number {
+export function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number {
   // Default to 0 when targetValue is null
   const actualTargetValue = targetValue ?? 0;
 

package/src/hooks/use-copy-to-clipboard.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 
 /**
@@ -21,10 +19,7 @@ import { useState } from "react";
  *
  * @since 0.3.16-canary.0
  */
-export function useCopyToClipboard({
-  onCopy,
-  timeout = 2000,
-}: { onCopy?: () => void; timeout?: number } = {}): {
+export function useCopyToClipboard({ onCopy, timeout = 2000 }: { onCopy?: () => void; timeout?: number } = {}): {
   copyToClipboard: (value: string) => Promise<void>;
   isCopied: boolean;
 } {

package/src/hooks/use-is-mobile.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useMediaQuery } from "#/hooks/use-media-query";
 
 /**

package/src/hooks/use-media-query.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 
 /**

package/src/hooks/use-mutation-observer.ts

@@ -1,7 +1,4 @@
-"use client";
-
 import type { RefObject } from "react";
-
 import { useEffect } from "react";
 
 /**

package/src/hooks/use-pagination.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo } from "react";
 
 /**

package/src/index.ts

@@ -1,19 +1,12 @@
-export {
-  Accordion,
-  AccordionContent,
-  AccordionIcon,
-  AccordionItem,
-  AccordionTrigger,
-} from "#/components/accordion";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "#/components/accordion";
 export type {
   AccordionContentProps,
-  AccordionIconProps,
   AccordionItemProps,
   AccordionProps,
   AccordionTriggerProps,
 } from "#/components/accordion";
-export { Alert, AlertDescription, AlertTitle } from "#/components/alert";
-export type { AlertDescriptionProps, AlertProps, AlertTitleProps } from "#/components/alert";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "#/components/alert";
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertTitleProps } from "#/components/alert";
 export {
   AlertDialog,
   AlertDialogAction,
@@ -23,6 +16,7 @@ export {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
+  AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "#/components/alert-dialog";
@@ -34,22 +28,26 @@ export type {
   AlertDialogDescriptionProps,
   AlertDialogFooterProps,
   AlertDialogHeaderProps,
+  AlertDialogMediaProps,
   AlertDialogProps,
   AlertDialogTitleProps,
   AlertDialogTriggerProps,
 } from "#/components/alert-dialog";
 export { AspectRatio } from "#/components/aspect-ratio";
 export type { AspectRatioProps } from "#/components/aspect-ratio";
-export { Avatar, AvatarFallback, AvatarImage } from "#/components/avatar";
-export type { AvatarFallbackProps, AvatarImageProps, AvatarProps } from "#/components/avatar";
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "#/components/avatar";
+export type {
+  AvatarBadgeProps,
+  AvatarFallbackProps,
+  AvatarGroupCountProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+} from "#/components/avatar";
 export { Badge } from "#/components/badge";
 export type { BadgeProps } from "#/components/badge";
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "#/components/button-group";
-export type {
-  ButtonGroupProps,
-  ButtonGroupSeparatorProps,
-  ButtonGroupTextProps,
-} from "#/components/button-group";
+export type { ButtonGroupProps, ButtonGroupSeparatorProps, ButtonGroupTextProps } from "#/components/button-group";
 export {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -71,15 +69,7 @@ export type {
 export { Button } from "#/components/button";
 export type { ButtonProps } from "#/components/button";
 export { Calendar, CalendarDayButton } from "#/components/calendar";
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "#/components/card";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "#/components/card";
 export type {
   CardActionProps,
   CardContentProps,
@@ -130,11 +120,7 @@ export type { CheckboxCardsItemProps, CheckboxCardsProps } from "#/components/ch
 export { CheckboxGroup, CheckboxGroupItem } from "#/components/checkbox-group";
 export type { CheckboxGroupItemProps, CheckboxGroupProps } from "#/components/checkbox-group";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#/components/collapsible";
-export type {
-  CollapsibleContentProps,
-  CollapsibleProps,
-  CollapsibleTriggerProps,
-} from "#/components/collapsible";
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from "#/components/collapsible";
 export {
   Command,
   CommandDialog,
@@ -215,9 +201,10 @@ export type {
   DialogTitleProps,
   DialogTriggerProps,
 } from "#/components/dialog";
+export { DirectionProvider, useDirection } from "#/components/direction";
+export type { DirectionProviderProps } from "#/components/direction";
 export {
   Drawer,
-  DrawerBody,
   DrawerClose,
   DrawerContent,
   DrawerDescription,
@@ -227,7 +214,6 @@ export {
   DrawerTrigger,
 } from "#/components/drawer";
 export type {
-  DrawerBodyProps,
   DrawerCloseProps,
   DrawerContentProps,
   DrawerDescriptionProps,
@@ -271,14 +257,7 @@ export type {
   DropdownMenuSubTriggerProps,
   DropdownMenuTriggerProps,
 } from "#/components/dropdown-menu";
-export {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "#/components/empty";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "#/components/empty";
 export type {
   EmptyContentProps,
   EmptyDescriptionProps,
@@ -330,12 +309,7 @@ export type {
   FormMessageProps,
   FormProps,
 } from "#/components/form";
-export {
-  HoverCard,
-  HoverCardArrow,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "#/components/hover-card";
+export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger } from "#/components/hover-card";
 export type {
   HoverCardArrowProps,
   HoverCardContentProps,
@@ -448,25 +422,25 @@ export type {
 export {
   NavigationMenu,
   NavigationMenuContent,
+  NavigationMenuIndicator,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
+  NavigationMenuViewport,
 } from "#/components/navigation-menu";
 export type {
   NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
   NavigationMenuItemProps,
   NavigationMenuLinkProps,
   NavigationMenuListProps,
   NavigationMenuProps,
   NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
 } from "#/components/navigation-menu";
 export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "#/components/native-select";
-export type {
-  NativeSelectOptGroupProps,
-  NativeSelectOptionProps,
-  NativeSelectProps,
-} from "#/components/native-select";
+export type { NativeSelectOptGroupProps, NativeSelectOptionProps, NativeSelectProps } from "#/components/native-select";
 export {
   Pagination,
   PaginationContent,
@@ -490,13 +464,19 @@ export {
   PopoverAnchor,
   PopoverArrow,
   PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
   PopoverTrigger,
 } from "#/components/popover";
 export type {
   PopoverAnchorProps,
   PopoverArrowProps,
   PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
   PopoverProps,
+  PopoverTitleProps,
   PopoverTriggerProps,
 } from "#/components/popover";
 export { Progress } from "#/components/progress";
@@ -510,11 +490,7 @@ export type { RadioCardsItemProps, RadioCardsProps } from "#/components/radio-ca
 export { RadioGroup, RadioGroupItem } from "#/components/radio-group";
 export type { RadioGroupItemProps, RadioGroupProps } from "#/components/radio-group";
 export { ResizableGroup, ResizablePanel, ResizableSeparator } from "#/components/resizable";
-export type {
-  ResizableGroupProps,
-  ResizablePanelProps,
-  ResizableSeparatorProps,
-} from "#/components/resizable";
+export type { ResizableGroupProps, ResizablePanelProps, ResizableSeparatorProps } from "#/components/resizable";
 export { ScrollArea, ScrollAreaScrollbar } from "#/components/scroll-area";
 export type { ScrollAreaProps, ScrollAreaScrollbarProps } from "#/components/scroll-area";
 export {
@@ -647,25 +623,14 @@ export type {
   TableRowProps,
 } from "#/components/table";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "#/components/tabs";
-export type {
-  TabsContentProps,
-  TabsListProps,
-  TabsProps,
-  TabsTriggerProps,
-} from "#/components/tabs";
+export type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from "#/components/tabs";
 export { Textarea } from "#/components/textarea";
 export type { TextareaProps } from "#/components/textarea";
 export { Toggle } from "#/components/toggle";
 export type { ToggleProps } from "#/components/toggle";
 export { ToggleGroup, ToggleGroupItem } from "#/components/toggle-group";
 export type { ToggleGroupItemProps, ToggleGroupProps } from "#/components/toggle-group";
-export {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "#/components/tooltip";
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger } from "#/components/tooltip";
 export type {
   TooltipArrowProps,
   TooltipContentProps,
@@ -692,16 +657,8 @@ export { emptyMediaVariants } from "#/variants/empty";
 export type { EmptyMediaVariants } from "#/variants/empty";
 export { fieldVariants } from "#/variants/field";
 export type { FieldVariants } from "#/variants/field";
-export {
-  inputGroupAddonVariants,
-  inputGroupButtonVariants,
-  inputGroupVariants,
-} from "#/variants/input-group";
-export type {
-  InputGroupAddonVariants,
-  InputGroupButtonVariants,
-  InputGroupVariants,
-} from "#/variants/input-group";
+export { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants } from "#/variants/input-group";
+export type { InputGroupAddonVariants, InputGroupButtonVariants, InputGroupVariants } from "#/variants/input-group";
 export { itemMediaVariants, itemVariants } from "#/variants/item";
 export type { ItemMediaVariants, ItemVariants } from "#/variants/item";
 export { navigationMenuTriggerVariants } from "#/variants/navigation-menu";
@@ -716,5 +673,7 @@ export { sheetContentVariants } from "#/variants/sheet";
 export type { SheetContentVariants } from "#/variants/sheet";
 export { sidebarMenuButtonVariants } from "#/variants/sidebar";
 export type { SidebarMenuButtonVariants } from "#/variants/sidebar";
+export { tabsListVariants } from "#/variants/tabs";
+export type { TabsListVariants } from "#/variants/tabs";
 export { toggleVariants } from "#/variants/toggle";
 export type { ToggleVariants } from "#/variants/toggle";

package/src/primitives/checkbox-group.tsx

@@ -1,13 +1,10 @@
-import type { Scope } from "@radix-ui/react-context";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { Checkbox } from "radix-ui";
+import { Direction } from "radix-ui";
+import { Context } from "radix-ui/internal";
+import { RovingFocus } from "radix-ui/internal";
+import { useControllableState } from "radix-ui/internal";
 import type { ComponentProps, JSX } from "react";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { createCheckboxScope } from "@radix-ui/react-checkbox";
-import { createContextScope } from "@radix-ui/react-context";
-import { useDirection } from "@radix-ui/react-direction";
-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 { useCallback } from "react";
 
 /* -----------------------------------------------------------------------------
@@ -23,16 +20,16 @@ type ScopedProps<P> = P & {
   /**
    * Optional scope for the CheckboxGroup component
    */
-  __scopeCheckboxGroup?: Scope;
+  __scopeCheckboxGroup?: Context.Scope;
 };
 
-const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(
-  CHECKBOX_GROUP_NAME,
-  [createRovingFocusGroupScope, createCheckboxScope],
-);
+const [createCheckboxGroupContext, createCheckboxGroupScope] = Context.createContextScope(CHECKBOX_GROUP_NAME, [
+  RovingFocus.createRovingFocusGroupScope,
+  Checkbox.createCheckboxScope,
+]);
 
-const useRovingFocusGroupScope = createRovingFocusGroupScope();
-const useCheckboxScope = createCheckboxScope();
+const useRovingFocusGroupScope = RovingFocus.createRovingFocusGroupScope();
+const useCheckboxScope = Checkbox.createCheckboxScope();
 
 /**
  * Context values shared between CheckboxGroup components
@@ -90,7 +87,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Direction for roving focus navigation
    */
-  dir?: RovingFocusGroup.RovingFocusGroupProps["dir"];
+  dir?: RovingFocus.RovingFocusGroupProps["dir"];
 
   /**
    * Whether the entire checkbox group is disabled
@@ -100,7 +97,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Whether focus should loop to the start/end when reaching the boundaries
    */
-  loop?: RovingFocusGroup.RovingFocusGroupProps["loop"];
+  loop?: RovingFocus.RovingFocusGroupProps["loop"];
 
   /**
    * Name attribute for the checkbox group form field
@@ -116,7 +113,7 @@ interface CheckboxGroupBaseProps {
   /**
    * Orientation of the checkbox group (horizontal or vertical)
    */
-  orientation?: RovingFocusGroup.RovingFocusGroupProps["orientation"];
+  orientation?: RovingFocus.RovingFocusGroupProps["orientation"];
 
   /**
    * Whether at least one checkbox must be selected
@@ -155,14 +152,14 @@ function CheckboxGroup({
   ...props
 }: ScopedProps<CheckboxGroupProps>): JSX.Element {
   /**
-   * Scope for the RovingFocusGroup component
+   * Context.Scope for the RovingFocusGroup component
    */
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
 
   /**
    * Direction for layout and navigation
    */
-  const direction = useDirection(dir);
+  const direction = Direction.useDirection(dir);
 
   /**
    * State for managing selected checkbox values
@@ -215,15 +212,9 @@ function CheckboxGroup({
       onItemCheck={handleItemCheck}
       onItemUncheck={handleItemUncheck}
     >
-      <RovingFocusGroup.Root
-        asChild
-        {...rovingFocusGroupScope}
-        dir={direction}
-        loop={loop}
-        orientation={orientation}
-      >
+      <RovingFocus.Root asChild {...rovingFocusGroupScope} dir={direction} loop={loop} orientation={orientation}>
         <div data-disabled={disabled ? "" : undefined} dir={direction} role="group" {...props} />
-      </RovingFocusGroup.Root>
+      </RovingFocus.Root>
     </CheckboxGroupContextProvider>
   );
 }
@@ -274,12 +265,12 @@ function CheckboxGroupItem({
   const isDisabled = context.disabled || disabled;
 
   /**
-   * Scope for the RovingFocusGroup component
+   * Context.Scope for the RovingFocusGroup component
    */
   const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
 
   /**
-   * Scope for the Checkbox component
+   * Context.Scope for the Checkbox component
    */
   const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
 
@@ -289,12 +280,7 @@ function CheckboxGroupItem({
   const checked = context.value?.includes(props.value);
 
   return (
-    <RovingFocusGroup.Item
-      asChild
-      {...rovingFocusGroupScope}
-      active={checked}
-      focusable={!isDisabled}
-    >
+    <RovingFocus.Item asChild {...rovingFocusGroupScope} active={checked} focusable={!isDisabled}>
       <CheckboxPrimitive.Root
         aria-label={props.value}
         checked={checked}
@@ -311,7 +297,7 @@ function CheckboxGroupItem({
           }
         }}
       />
-    </RovingFocusGroup.Item>
+    </RovingFocus.Item>
   );
 }
 
@@ -336,7 +322,7 @@ function CheckboxGroupIndicator({
   ...props
 }: ScopedProps<CheckboxGroupIndicatorProps>): JSX.Element {
   /**
-   * Scope for the Checkbox component
+   * Context.Scope for the Checkbox component
    */
   const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);