@codefast/ui 0.0.9 → 0.0.10

package/src/carousel.tsx

@@ -1,10 +1,9 @@
 "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 { cn } from "./utils";
 import { Button, type ButtonProps } from "./button";
 
@@ -12,6 +11,12 @@ import { Button, type ButtonProps } from "./button";
  * Context: Carousel
  * -------------------------------------------------------------------------- */
 
+const CAROUSEL_NAME = "Carousel";
+
+type ScopedProps<P> = P & { __scopeCarousel?: Scope };
+
+const [createCarouselContext] = createContextScope(CAROUSEL_NAME);
+
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -24,7 +29,7 @@ interface BaseCarouselProps {
   setApi?: (api: CarouselApi) => void;
 }
 
-type CarouselContextProps = {
+type CarouselContextValue = {
   carouselRef: ReturnType<typeof useEmblaCarousel>[0];
   api: ReturnType<typeof useEmblaCarousel>[1];
   scrollPrev: () => void;
@@ -33,26 +38,18 @@ type CarouselContextProps = {
   canScrollNext: boolean;
 } & BaseCarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel(): CarouselContextProps {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-
-  return context;
-}
+const [CarouselProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: Carousel
  * -------------------------------------------------------------------------- */
 
+type CarouselElement = HTMLDivElement;
 type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
-const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+
+const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
   (
-    { orientation, opts, setApi, plugins, className, children, ...props },
+    { __scopeCarousel, orientation, opts, setApi, plugins, className, children, ...props }: ScopedProps<CarouselProps>,
     ref,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(
@@ -62,6 +59,7 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
       },
       plugins,
     );
+
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
 
@@ -118,18 +116,16 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     }, [api, onSelect]);
 
     return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api,
-          opts,
-          orientation:
-            orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
+      <CarouselProvider
+        scope={__scopeCarousel}
+        carouselRef={carouselRef}
+        api={api}
+        opts={opts}
+        orientation={orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal")}
+        scrollPrev={scrollPrev}
+        scrollNext={scrollNext}
+        canScrollPrev={canScrollPrev}
+        canScrollNext={canScrollNext}
       >
         <div
           ref={ref}
@@ -141,106 +137,123 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
         >
           {children}
         </div>
-      </CarouselContext.Provider>
+      </CarouselProvider>
     );
   },
 );
-Carousel.displayName = "Carousel";
+
+Carousel.displayName = CAROUSEL_NAME;
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselContent
  * -------------------------------------------------------------------------- */
 
+const CAROUSEL_CONTENT_NAME = "CarouselContent";
+
+type CarouselContentElement = HTMLDivElement;
 type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
-const CarouselContent = React.forwardRef<HTMLDivElement, CarouselContentProps>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel();
+
+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>
     );
   },
 );
-CarouselContent.displayName = "CarouselContent";
+
+CarouselContent.displayName = CAROUSEL_CONTENT_NAME;
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselItem
  * -------------------------------------------------------------------------- */
 
+const CAROUSEL_ITEM_NAME = "CarouselItem";
+
+type CarouselItemElement = HTMLDivElement;
 type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
-const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel();
+
+const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
+  ({ __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}
       />
     );
   },
 );
-CarouselItem.displayName = "CarouselItem";
+
+CarouselItem.displayName = CAROUSEL_ITEM_NAME;
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselPrevious
  * -------------------------------------------------------------------------- */
 
+const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+
+type CarouselPreviousElement = HTMLButtonElement;
 type CarouselPreviousProps = ButtonProps;
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  CarouselPreviousProps
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-  return (
-    <Button
-      ref={ref}
-      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",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeftIcon className="size-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
-CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(
+  (
+    { __scopeCarousel, className, variant = "outline", size = "icon", ...props }: ScopedProps<CarouselPreviousProps>,
+    ref,
+  ) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
+
+    return (
+      <Button
+        ref={ref}
+        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",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeftIcon className="size-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+
+CarouselPrevious.displayName = CAROUSEL_PREVIOUS_NAME;
 
 /* -----------------------------------------------------------------------------
  * Component: CarouselNext
  * -------------------------------------------------------------------------- */
 
+const CAROUSEL_NEXT_NAME = "CarouselNext";
+
+type CarouselNextElement = HTMLButtonElement;
 type CarouselNextProps = ButtonProps;
-const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>(
-  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
+  (
+    { __scopeCarousel, className, variant = "outline", size = "icon", ...props }: ScopedProps<CarouselNextProps>,
+    ref,
+  ) => {
+    const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
 
     return (
       <Button
@@ -264,7 +277,8 @@ const CarouselNext = React.forwardRef<HTMLButtonElement, CarouselNextProps>(
     );
   },
 );
-CarouselNext.displayName = "CarouselNext";
+
+CarouselNext.displayName = CAROUSEL_NEXT_NAME;
 
 /* -----------------------------------------------------------------------------
  * Exports

package/src/checkbox-cards.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxCards
+ * -------------------------------------------------------------------------- */
+
+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} />;
+});
+
+CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxCardsItem
+ * -------------------------------------------------------------------------- */
+
+type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+
+interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item> {
+  checkboxClassName?: string;
+}
+
+const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
+  ({ className, children, checkboxClassName, ...props }, ref) => {
+    return (
+      <label
+        className={cn(
+          "border-compound/70 flex items-center justify-center gap-4 rounded-md border p-4",
+          "hover:border-compound",
+          className,
+        )}
+      >
+        {children}
+        <CheckboxGroupPrimitive.Item
+          ref={ref}
+          className={cn(
+            "border-compound/70 peer size-4 shrink-0 cursor-default rounded-sm border shadow",
+            "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            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;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxCards, CheckboxCardsItem, type CheckboxCardsProps, type CheckboxCardsItemProps };

package/src/checkbox-group.primitive.tsx

@@ -0,0 +1,199 @@
+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";
+
+type ScopedProps<P> = P & { __scopeCheckboxGroup?: Scope };
+
+const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(CHECKBOX_GROUP_NAME, [
+  createRovingFocusGroupScope,
+  createCheckboxScope,
+]);
+
+const useRovingFocusGroupScope = createRovingFocusGroupScope();
+const useCheckboxScope = createCheckboxScope();
+
+interface CheckboxGroupContextValue {
+  name?: string;
+  required: boolean;
+  disabled: boolean;
+  value?: string[];
+  onItemCheck: (value: string) => void;
+  onItemUncheck: (value: string) => void;
+}
+
+const [CheckboxGroupProvider, useCheckboxGroupContext] =
+  createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);
+
+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"];
+  defaultValue?: string[];
+  value?: CheckboxGroupContextValue["value"];
+  onValueChange?: (value: string[]) => void;
+}
+
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
+  (
+    {
+      __scopeCheckboxGroup,
+      name,
+      defaultValue,
+      value: valueProp,
+      required = false,
+      disabled = false,
+      orientation,
+      dir,
+      loop = true,
+      onValueChange,
+      ...props
+    }: ScopedProps<CheckboxGroupProps>,
+    ref,
+  ) => {
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const direction = useDirection(dir);
+    const [value = [], setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const handleItemCheck = React.useCallback(
+      (itemValue: string) => {
+        setValue((prevValue = []) => [...prevValue, itemValue]);
+      },
+      [setValue],
+    );
+
+    const handleItemUncheck = React.useCallback(
+      (itemValue: string) => {
+        setValue((prevValue = []) => prevValue.filter((val) => val !== itemValue));
+      },
+      [setValue],
+    );
+
+    return (
+      <CheckboxGroupProvider
+        scope={__scopeCheckboxGroup}
+        name={name}
+        required={required}
+        disabled={disabled}
+        value={value}
+        onItemCheck={handleItemCheck}
+        onItemUncheck={handleItemUncheck}
+      >
+        <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} />
+        </RovingFocusGroup.Root>
+      </CheckboxGroupProvider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = CHECKBOX_GROUP_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * Component: CheckboxGroupItem
+ * -----------------------------------------------------------------------------------------------*/
+
+const ITEM_NAME = `${CHECKBOX_GROUP_NAME}Item`;
+
+type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
+
+interface CheckboxGroupItemProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    "checked" | "defaultChecked" | "onCheckedChange" | "name"
+  > {
+  value: string;
+}
+
+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 checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    const checked = context.value?.includes(props.value);
+
+    return (
+      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!isDisabled} active={checked}>
+        <CheckboxPrimitive.Root
+          ref={ref}
+          name={context.name}
+          disabled={isDisabled}
+          required={context.required}
+          checked={checked}
+          {...checkboxScope}
+          {...props}
+          onCheckedChange={(checkedState) => {
+            if (checkedState) {
+              context.onItemCheck(props.value);
+            } else {
+              context.onItemUncheck(props.value);
+            }
+          }}
+        />
+      </RovingFocusGroup.Item>
+    );
+  },
+);
+
+CheckboxGroupItem.displayName = ITEM_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * Component: CheckboxGroupIndicator
+ * -----------------------------------------------------------------------------------------------*/
+
+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) => {
+    const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
+    return <CheckboxPrimitive.Indicator ref={ref} {...checkboxScope} {...props} />;
+  },
+);
+
+CheckboxGroupIndicator.displayName = INDICATOR_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+const Root = CheckboxGroup;
+const Item = CheckboxGroupItem;
+const Indicator = CheckboxGroupIndicator;
+
+export {
+  createCheckboxGroupScope,
+  CheckboxGroup,
+  CheckboxGroupItem,
+  CheckboxGroupIndicator,
+  Root,
+  Item,
+  Indicator,
+  type CheckboxGroupProps,
+  type CheckboxGroupItemProps,
+  type CheckboxGroupIndicatorProps,
+};

package/src/checkbox-group.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroup
+ * -------------------------------------------------------------------------- */
+
+type CheckboxGroupElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
+
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(({ className, ...props }, ref) => {
+  return <CheckboxGroupPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />;
+});
+
+CheckboxGroup.displayName = "CheckboxGroup";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroupItem
+ * -------------------------------------------------------------------------- */
+
+type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item>;
+
+const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <CheckboxGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
+          "hover:border-compound",
+          "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          className,
+        )}
+        {...props}
+      >
+        <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
+          <CheckIcon className="size-3.5" />
+        </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+      </CheckboxGroupPrimitive.Item>
+    );
+  },
+);
+
+CheckboxGroupItem.displayName = "CheckboxGroupItem";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupProps, type CheckboxGroupItemProps };

package/src/checkbox.tsx

@@ -9,15 +9,18 @@ import { cn } from "./utils";
  * Component: Checkbox
  * -------------------------------------------------------------------------- */
 
-type CheckboxProps = CheckboxPrimitive.CheckboxProps;
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, ...props }, ref) => (
+type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
+      "hover:border-compound",
+      "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className,
     )}
     {...props}
@@ -27,6 +30,7 @@ const Checkbox = React.forwardRef<
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
+
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------

package/src/code.tsx

@@ -5,16 +5,18 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Code
  * -------------------------------------------------------------------------- */
 
+type CodeElement = HTMLElement;
+
 interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
-const Code = React.forwardRef<HTMLElement, CodeProps>(
-  ({ asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : "code";
 
-    return <Comp ref={ref} {...props} />;
-  },
-);
+const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, ref) => {
+  const Comp = asChild ? Slot : "code";
+
+  return <Comp ref={ref} {...props} />;
+});
+
 Code.displayName = "Code";
 
 /* -----------------------------------------------------------------------------