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

package/src/components/carousel.tsx

@@ -1,16 +1,12 @@
-"use client";
-
-import type { Scope } from "@radix-ui/react-context";
 import type { UseEmblaCarouselType } from "embla-carousel-react";
-import type { ComponentProps, JSX, KeyboardEvent } from "react";
-
-import { cn } from "#/lib/utils";
-import { createContextScope } from "@radix-ui/react-context";
 import useEmblaCarousel from "embla-carousel-react";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, JSX, KeyboardEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "#/components/button";
+import { cn } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
  * Context: Carousel
@@ -18,9 +14,9 @@ import { Button } from "#/components/button";
 
 const CAROUSEL_NAME = "Carousel";
 
-type ScopedProps<P> = P & { __scopeCarousel?: Scope };
+type ScopedProps<P> = P & { __scopeCarousel?: Context.Scope };
 
-const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
+const [createCarouselContext, createCarouselScope] = Context.createContextScope(CAROUSEL_NAME);
 
 /**
  * @since 0.3.16-canary.0
@@ -46,8 +42,7 @@ type CarouselContextValue = BaseCarouselProps & {
   scrollPrev: () => void;
 };
 
-const [CarouselContextProvider, useCarouselContext] =
-  createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
+const [CarouselContextProvider, useCarouselContext] = createCarouselContext<CarouselContextValue>(CAROUSEL_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: Carousel
@@ -150,8 +145,10 @@ function Carousel({
       scrollPrev={scrollPrevious}
     >
       <div
+        aria-roledescription="carousel"
         className={cn("relative", className)}
         data-slot="carousel"
+        role="region"
         onKeyDownCapture={handleKeyDown}
         {...props}
       >
@@ -172,12 +169,26 @@ const CAROUSEL_CONTENT_NAME = "CarouselContent";
  */
 interface CarouselContentProps extends ComponentProps<"div"> {
   classNames?: {
+    /** Class applied to the flex track that holds the slides. */
     content?: string;
+    /** Class applied to the scroll viewport (the `overflow-hidden` element). */
     wrapper?: string;
   };
 }
 
 /**
+ * The scroll viewport requires `overflow-hidden` (Embla hides off-screen slides
+ * with it), so any ring/shadow on slide content that sits OUTSIDE the slide's
+ * border-box is clipped where the slide meets the viewport edge. This is
+ * inherent to every Embla-based carousel — the active slide is flush with both
+ * scroll-axis edges, so left/right rings (horizontal) cannot show without
+ * revealing the neighbouring slide.
+ *
+ * To give content shadows/rings breathing room on the CROSS axis (top/bottom
+ * for horizontal carousels), add a negative-margin + matching padding via
+ * `classNames.wrapper`, e.g. `classNames={{ wrapper: "-my-2 py-2" }}`. This
+ * shifts no layout but lets the clip happen `n`px further out.
+ *
  * @since 0.3.16-canary.0
  */
 function CarouselContent({
@@ -189,15 +200,11 @@ function CarouselContent({
   const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
 
   return (
-    <div
-      ref={carouselRef}
-      className={cn("overflow-hidden", classNames?.wrapper)}
-      data-slot="carousel-content"
-    >
+    <div ref={carouselRef} className={cn("overflow-hidden", classNames?.wrapper)} data-slot="carousel-content">
       <div
         className={cn(
           "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          orientation === "horizontal" ? "-ms-4" : "-mt-4 h-full flex-col",
           classNames?.content,
           className,
         )}
@@ -221,21 +228,13 @@ type CarouselItemProps = ComponentProps<"div">;
 /**
  * @since 0.3.16-canary.0
  */
-function CarouselItem({
-  __scopeCarousel,
-  className,
-  ...props
-}: ScopedProps<CarouselItemProps>): JSX.Element {
+function CarouselItem({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>): JSX.Element {
   const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
 
   return (
     <div
       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" ? "ps-4" : "pt-4", className)}
       data-slot="carousel-item"
       role="group"
       {...props}
@@ -260,25 +259,20 @@ type CarouselPreviousProps = ComponentProps<typeof Button>;
 function CarouselPrevious({
   __scopeCarousel,
   className,
-  size = "icon",
+  size = "icon-sm",
   variant = "outline",
   ...props
 }: ScopedProps<CarouselPreviousProps>): JSX.Element {
-  const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(
-    CAROUSEL_PREVIOUS_NAME,
-    __scopeCarousel,
-  );
+  const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
 
   return (
     <Button
       aria-label="Previous slide"
       className={cn(
-        "absolute",
-        "size-8",
-        "shadow-none",
+        "absolute touch-manipulation rounded-full",
         orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "-start-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
+          : "start-1/2 -top-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
         className,
       )}
       data-slot="carousel-previous"
@@ -288,7 +282,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon />
+      <ChevronLeftIcon className="rtl:rotate-180" />
       <span className="sr-only">Previous slide</span>
     </Button>
   );
@@ -311,25 +305,20 @@ type CarouselNextProps = ComponentProps<typeof Button>;
 function CarouselNext({
   __scopeCarousel,
   className,
-  size = "icon",
+  size = "icon-sm",
   variant = "outline",
   ...props
 }: ScopedProps<CarouselNextProps>): JSX.Element {
-  const { canScrollNext, orientation, scrollNext } = useCarouselContext(
-    CAROUSEL_NEXT_NAME,
-    __scopeCarousel,
-  );
+  const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
 
   return (
     <Button
       aria-label="Next slide"
       className={cn(
-        "absolute",
-        "size-8",
-        "shadow-none",
+        "absolute touch-manipulation rounded-full",
         orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "-end-12 top-1/2 -translate-y-1/2 active:not-aria-[haspopup]:translate-y-[calc(-50%+1px)]"
+          : "start-1/2 -bottom-12 -translate-x-1/2 rotate-90 rtl:translate-x-1/2",
         className,
       )}
       data-slot="carousel-next"
@@ -339,7 +328,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon />
+      <ChevronRightIcon className="rtl:rotate-180" />
       <span className="sr-only">Next slide</span>
     </Button>
   );
@@ -357,11 +346,4 @@ export type {
   CarouselPreviousProps,
   CarouselProps,
 };
-export {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  createCarouselScope,
-};
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope };

package/src/components/chart.tsx

@@ -1,14 +1,11 @@
-"use client";
-
-import type { Scope } from "@radix-ui/react-context";
+import { Context } from "radix-ui/internal";
 import type { ComponentProps, ComponentType, CSSProperties, JSX, ReactNode } from "react";
-import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import { useId, useMemo } from "react";
 import type { TooltipContentProps, TooltipProps } from "recharts";
+import * as RechartsPrimitive from "recharts";
+import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
 
 import { cn } from "#/lib/utils";
-import { createContextScope } from "@radix-ui/react-context";
-import { useId, useMemo } from "react";
-import * as RechartsPrimitive from "recharts";
 
 /* -----------------------------------------------------------------------------
  * Type Definitions and Utilities
@@ -24,6 +21,8 @@ type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 
 const THEMES = { dark: ".dark", light: "" } as const;
 
+const INITIAL_DIMENSION = { height: 200, width: 320 } as const;
+
 /**
  * @since 0.3.16-canary.0
  */
@@ -32,10 +31,7 @@ type ChartConfig = Record<
   {
     label?: ReactNode;
     icon?: ComponentType;
-  } & (
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-    | { color?: string; theme?: never }
-  )
+  } & ({ color?: never; theme: Record<keyof typeof THEMES, string> } | { color?: string; theme?: never })
 >;
 
 /* -----------------------------------------------------------------------------
@@ -44,7 +40,7 @@ type ChartConfig = Record<
 
 const CHART_PROVIDER_NAME = "ChartProvider";
 
-type ScopedProps<P> = P & { __scopeChart?: Scope };
+type ScopedProps<P> = P & { __scopeChart?: Context.Scope };
 
 /**
  * Value provided by Chart Context
@@ -56,10 +52,9 @@ interface ChartContextValue {
   config: ChartConfig;
 }
 
-const [createChartContext, createChartScope] = createContextScope(CHART_PROVIDER_NAME);
+const [createChartContext, createChartScope] = Context.createContextScope(CHART_PROVIDER_NAME);
 
-const [ChartContextProvider, useChartContext] =
-  createChartContext<ChartContextValue>(CHART_PROVIDER_NAME);
+const [ChartContextProvider, useChartContext] = createChartContext<ChartContextValue>(CHART_PROVIDER_NAME);
 
 /* -----------------------------------------------------------------------------
  * Component: Chart
@@ -71,6 +66,10 @@ const [ChartContextProvider, useChartContext] =
 interface ChartContainerProps extends ComponentProps<"div"> {
   children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
   config: ChartConfig;
+  initialDimension?: {
+    height: number;
+    width: number;
+  };
 }
 
 /**
@@ -82,28 +81,17 @@ function ChartContainer({
   className,
   config,
   id,
+  initialDimension = INITIAL_DIMENSION,
   ...props
 }: ScopedProps<ChartContainerProps>): JSX.Element {
   const uniqueId = useId();
-  const chartId = `chart-${id ?? uniqueId}`;
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContextProvider config={config} scope={__scopeChart}>
       <div
         className={cn(
-          "flex aspect-video justify-center text-xs",
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
-          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
-          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
-          "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
-          "[&_.recharts-layer]:outline-hidden",
-          "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border",
-          "[&_.recharts-radial-bar-background-sector]:fill-muted",
-          "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted",
-          "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border",
-          "[&_.recharts-sector]:outline-hidden",
-          "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
-          "[&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className,
         )}
         data-chart={chartId}
@@ -111,7 +99,9 @@ function ChartContainer({
         {...props}
       >
         <ChartStyle config={config} id={chartId} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContextProvider>
   );
@@ -133,9 +123,7 @@ interface ChartStyleProps {
  * @since 0.3.16-canary.0
  */
 function ChartStyle({ config, id }: ChartStyleProps): ReactNode {
-  const colorConfig = Object.entries(config).filter(
-    ([, itemConfig]) => itemConfig.theme ?? itemConfig.color,
-  );
+  const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme ?? itemConfig.color);
 
   if (colorConfig.length === 0) {
     return null;
@@ -157,10 +145,7 @@ function ChartStyle({ config, id }: ChartStyleProps): ReactNode {
 /**
  * @since 0.3.16-canary.0
  */
-type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<
-  TValue,
-  TName
->;
+type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<TValue, TName>;
 
 /**
  * @since 0.3.16-canary.0
@@ -234,9 +219,7 @@ function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
         : itemConfig?.label;
 
     if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
-      );
+      return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
     }
 
     if (!value) {
@@ -255,9 +238,7 @@ function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
   return (
     <div
       className={cn(
-        "grid min-w-[8rem] items-start gap-1.5 px-2.5 py-1.5",
-        "rounded-lg border border-border/50",
-        "bg-background text-xs shadow-xl",
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className,
       )}
     >
@@ -268,9 +249,7 @@ function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
           const indicatorColor =
             color ??
-            (isRecord(item.payload) &&
-            "fill" in item.payload &&
-            typeof item.payload.fill === "string"
+            (isRecord(item.payload) && "fill" in item.payload && typeof item.payload.fill === "string"
               ? item.payload.fill
               : undefined) ??
             item.color;
@@ -279,8 +258,7 @@ function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
             <div
               key={key}
               className={cn(
-                "flex w-full flex-wrap items-stretch gap-2",
-                "[&>svg]:size-2.5 [&>svg]:text-muted-foreground",
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center",
               )}
             >
@@ -293,17 +271,12 @@ function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
                   ) : (
                     !hideIndicator && (
                       <div
-                        className={cn(
-                          "shrink-0",
-                          "rounded-xs border-(--color-border)",
-                          "bg-(--color-bg)",
-                          {
-                            "h-2.5 w-2.5": indicator === "dot",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                            "border-1.5 w-0 border-dashed bg-transparent": indicator === "dashed",
-                            "w-1": indicator === "line",
-                          },
-                        )}
+                        className={cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "my-0.5": nestLabel && indicator === "dashed",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                          "w-1": indicator === "line",
+                        })}
                         style={
                           {
                             "--color-bg": indicatorColor,
@@ -314,23 +287,15 @@ function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({
                     )
                   )}
                   <div
-                    className={cn(
-                      "flex flex-1 justify-between",
-                      "leading-none",
-                      nestLabel ? "items-end" : "items-center",
-                    )}
+                    className={cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center")}
                   >
                     <div className="grid gap-1.5">
                       {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label ?? item.name}
-                      </span>
+                      <span className="text-muted-foreground">{itemConfig?.label ?? item.name}</span>
                     </div>
                     {item.value != null && (
-                      <span className={cn("font-mono font-medium text-foreground", "tabular-nums")}>
-                        {typeof item.value === "number"
-                          ? item.value.toLocaleString()
-                          : safeToString(item.value)}
+                      <span className="font-mono font-medium text-foreground tabular-nums">
+                        {typeof item.value === "number" ? item.value.toLocaleString() : safeToString(item.value)}
                       </span>
                     )}
                   </div>
@@ -391,13 +356,7 @@ function ChartLegendContent({
   }
 
   return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
-      )}
-    >
+    <div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
       {payload.map((item) => {
         let key = "value";
 
@@ -412,16 +371,13 @@ function ChartLegendContent({
         return (
           <div
             key={nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? "")}
-            className={cn(
-              "flex items-center gap-1.5",
-              "[&>svg]:size-3 [&>svg]:text-muted-foreground",
-            )}
+            className="flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
           >
             {itemConfig?.icon && !hideIcon ? (
               <itemConfig.icon />
             ) : (
               <div
-                className={cn("size-2 shrink-0", "rounded-md")}
+                className="h-2 w-2 shrink-0 rounded-xs"
                 style={{
                   backgroundColor: item.color,
                 }}
@@ -523,11 +479,7 @@ function getPayloadConfigFromPayload(
 /**
  * Generates CSS custom property for a specific theme and config item
  */
-function generateCssVariable(
-  key: string,
-  itemConfig: ChartConfig[string],
-  theme: string,
-): null | string {
+function generateCssVariable(key: string, itemConfig: ChartConfig[string], theme: string): null | string {
   const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;
 
   return color ? `  --color-${key}: ${color};` : null;
@@ -553,10 +505,7 @@ function generateThemeStyles(
 /**
  * Generates complete CSS styles for all themes
  */
-function generateChartStyles(
-  id: string,
-  colorConfig: Array<[string, ChartConfig[string]]>,
-): string {
+function generateChartStyles(id: string, colorConfig: Array<[string, ChartConfig[string]]>): string {
   return Object.entries(THEMES)
     .map(([theme, prefix]) => generateThemeStyles(theme, prefix, id, colorConfig))
     .join("\n\n");

package/src/components/checkbox-cards.tsx

@@ -1,11 +1,8 @@
-"use client";
-
+import { CheckIcon, MinusIcon } from "lucide-react";
 import type { ComponentProps, JSX } from "react";
 
-import { cn } from "#/lib/utils";
-import { CheckIcon } from "lucide-react";
-
 import { Label } from "#/components/label";
+import { cn } from "#/lib/utils";
 import * as CheckboxGroupPrimitive from "#/primitives/checkbox-group";
 
 /* -----------------------------------------------------------------------------
@@ -38,45 +35,29 @@ interface CheckboxCardsItemProps extends ComponentProps<typeof CheckboxGroupPrim
 /**
  * @since 0.3.16-canary.0
  */
-function CheckboxCardsItem({
-  checkboxClassName,
-  children,
-  className,
-  ...props
-}: CheckboxCardsItemProps): JSX.Element {
+function CheckboxCardsItem({ checkboxClassName, children, className, ...props }: CheckboxCardsItemProps): JSX.Element {
   return (
     <Label
       className={cn(
-        "flex items-start gap-3",
-        "p-3",
-        "rounded-lg border border-input",
-        "transition",
-        "hover:not-has-disabled:not-has-aria-checked:bg-secondary",
-        "has-focus-visible:border-ring",
-        "has-disabled:opacity-50",
-        "has-aria-checked:border-primary has-aria-checked:bg-primary/10",
+        "flex items-start gap-3 rounded-md border border-input p-3 transition has-focus-visible:border-ring has-disabled:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-data-indeterminate:border-primary/30 has-data-indeterminate:bg-primary/5",
         className,
       )}
       data-slot="checkbox-card"
     >
       <CheckboxGroupPrimitive.Item
         className={cn(
-          "peer flex size-4 shrink-0",
-          "rounded-sm border border-input shadow-xs outline-hidden",
-          "text-primary-foreground",
-          "transition",
-          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-          "aria-checked:border-primary aria-checked:bg-primary",
-          "focus-visible:aria-checked:ring-primary/20",
-          "dark:bg-input/30",
-          "dark:focus-visible:aria-checked:ring-primary/40",
+          "peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary",
           checkboxClassName,
         )}
         data-slot="checkbox-card-item"
         {...props}
       >
-        <CheckboxGroupPrimitive.CheckboxGroupIndicator data-slot="checkbox-card-indicator">
-          <CheckIcon className="size-3.5" />
+        <CheckboxGroupPrimitive.CheckboxGroupIndicator
+          className="group/checkbox-card-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5"
+          data-slot="checkbox-card-indicator"
+        >
+          <CheckIcon className="group-data-indeterminate/checkbox-card-indicator:hidden" />
+          <MinusIcon className="hidden group-data-indeterminate/checkbox-card-indicator:block" />
         </CheckboxGroupPrimitive.CheckboxGroupIndicator>
       </CheckboxGroupPrimitive.Item>
       {children}

package/src/components/checkbox-group.tsx

@@ -1,10 +1,7 @@
-"use client";
-
+import { CheckIcon, MinusIcon } from "lucide-react";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import { CheckIcon } from "lucide-react";
-
 import * as CheckboxGroupPrimitive from "#/primitives/checkbox-group";
 
 /* -----------------------------------------------------------------------------
@@ -20,13 +17,7 @@ type CheckboxGroupProps = ComponentProps<typeof CheckboxGroupPrimitive.Root>;
  * @since 0.3.16-canary.0
  */
 function CheckboxGroup({ className, ...props }: CheckboxGroupProps): JSX.Element {
-  return (
-    <CheckboxGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      data-slot="checkbox-group"
-      {...props}
-    />
-  );
+  return <CheckboxGroupPrimitive.Root className={cn("grid gap-2", className)} data-slot="checkbox-group" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -45,31 +36,18 @@ function CheckboxGroupItem({ className, ...props }: CheckboxGroupItemProps): JSX
   return (
     <CheckboxGroupPrimitive.Item
       className={cn(
-        "peer flex size-4 shrink-0 items-center justify-center",
-        "rounded-sm border border-input shadow-xs outline-hidden",
-        "text-primary-foreground",
-        "transition",
-        "hover:not-disabled:not-aria-checked:border-ring/60",
-        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "disabled:opacity-50",
-        "aria-checked:border-primary aria-checked:bg-primary",
-        "focus-visible:aria-checked:ring-primary/20",
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60",
-        "aria-checked:aria-invalid:bg-destructive",
-        "dark:bg-input/30",
-        "dark:focus-visible:aria-checked:ring-primary/40",
-        "dark:aria-invalid:ring-destructive/40",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input shadow-xs transition-shadow duration-control ease-snappy outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary",
         className,
       )}
       data-slot="checkbox-group-item"
       {...props}
     >
       <CheckboxGroupPrimitive.CheckboxGroupIndicator
-        className={cn("flex items-center justify-center text-current", "transition-none")}
+        className="group/checkbox-group-indicator grid animate-in place-content-center text-current duration-control-indicator ease-spring zoom-in-50 [&>svg]:size-3.5"
         data-slot="checkbox-group-indicator"
       >
-        <CheckIcon className="size-3.5" />
+        <CheckIcon className="group-data-indeterminate/checkbox-group-indicator:hidden" />
+        <MinusIcon className="hidden group-data-indeterminate/checkbox-group-indicator:block" />
       </CheckboxGroupPrimitive.CheckboxGroupIndicator>
     </CheckboxGroupPrimitive.Item>
   );