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

package/src/components/navigation-menu.tsx

@@ -1,9 +1,8 @@
+import { ChevronDownIcon } from "lucide-react";
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { ChevronDownIcon } from "lucide-react";
-
 import { navigationMenuTriggerVariants } from "#/variants/navigation-menu";
 
 /* -----------------------------------------------------------------------------
@@ -20,18 +19,10 @@ interface NavigationMenuProps extends ComponentProps<typeof NavigationMenuPrimit
 /**
  * @since 0.3.16-canary.0
  */
-function NavigationMenu({
-  children,
-  className,
-  viewport = true,
-  ...props
-}: NavigationMenuProps): JSX.Element {
+function NavigationMenu({ children, className, viewport = true, ...props }: NavigationMenuProps): JSX.Element {
   return (
     <NavigationMenuPrimitive.Root
-      className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className,
-      )}
+      className={cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className)}
       data-slot="navigation-menu"
       data-viewport={viewport}
       {...props}
@@ -54,14 +45,10 @@ type NavigationMenuListProps = ComponentProps<typeof NavigationMenuPrimitive.Lis
 /**
  * @since 0.3.16-canary.0
  */
-function NavigationMenuList({
-  children,
-  className,
-  ...props
-}: NavigationMenuListProps): JSX.Element {
+function NavigationMenuList({ children, className, ...props }: NavigationMenuListProps): JSX.Element {
   return (
     <NavigationMenuPrimitive.List
-      className={cn("flex flex-1 items-center justify-center gap-1", "list-none", className)}
+      className={cn("group flex flex-1 list-none items-center justify-center gap-0", className)}
       data-slot="navigation-menu-list"
       {...props}
     >
@@ -85,11 +72,7 @@ type NavigationMenuItemProps = ComponentProps<typeof NavigationMenuPrimitive.Ite
  */
 function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): JSX.Element {
   return (
-    <NavigationMenuPrimitive.Item
-      className={cn("group-data-[viewport=false]/navigation-menu:relative", className)}
-      data-slot="navigation-menu-item"
-      {...props}
-    />
+    <NavigationMenuPrimitive.Item className={cn("relative", className)} data-slot="navigation-menu-item" {...props} />
   );
 }
 
@@ -105,27 +88,17 @@ type NavigationMenuTriggerProps = ComponentProps<typeof NavigationMenuPrimitive.
 /**
  * @since 0.3.16-canary.0
  */
-function NavigationMenuTrigger({
-  children,
-  className,
-  ...props
-}: NavigationMenuTriggerProps): JSX.Element {
+function NavigationMenuTrigger({ children, className, ...props }: NavigationMenuTriggerProps): JSX.Element {
   return (
     <NavigationMenuPrimitive.Trigger
-      className={navigationMenuTriggerVariants({ className })}
+      className={navigationMenuTriggerVariants({ className: ["group", className] })}
       data-slot="navigation-menu-trigger"
       {...props}
     >
-      {children}
+      {children}{" "}
       <ChevronDownIcon
         aria-hidden="true"
-        className={cn(
-          "relative top-px",
-          "ml-1 size-3",
-          "transition-transform duration-300 ease-spring",
-          "motion-reduce:transition-none motion-reduce:duration-0",
-          "group-data-open/navigation-menu-trigger:rotate-180",
-        )}
+        className="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
       />
     </NavigationMenuPrimitive.Trigger>
   );
@@ -147,20 +120,7 @@ function NavigationMenuContent({ className, ...props }: NavigationMenuContentPro
   return (
     <NavigationMenuPrimitive.Content
       className={cn(
-        "top-0 left-0",
-        "w-full",
-        "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-2 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:p-1 group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow",
-        "group-data-[viewport=true]/navigation-menu:p-2",
-        "data-[motion=from-end]:slide-in-from-right-52",
-        "data-[motion=from-start]:slide-in-from-left-52",
-        "data-[motion=to-end]:slide-out-to-right-52",
-        "data-[motion=to-start]:slide-out-to-left-52",
-        "ease-snappy data-[motion^=from-]:animate-in data-[motion^=from-]:duration-200 data-[motion^=from-]:fade-in-0",
-        "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out-0",
-        "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-        "md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95",
-        "group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        "start-0 top-0 w-full p-2 pe-2.5 ease-snappy group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:animation-duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:ease-exit data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 data-closed:ease-exit group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className,
       )}
       data-slot="navigation-menu-content"
@@ -185,20 +145,7 @@ function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): J
   return (
     <NavigationMenuPrimitive.Link
       className={cn(
-        "flex flex-col gap-1",
-        "p-2",
-        "rounded-sm outline-hidden",
-        "text-sm",
-        "transition-colors duration-150 ease-snappy",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "hover:bg-accent hover:text-accent-foreground",
-        "focus:bg-accent focus:text-accent-foreground",
-        "data-active:bg-accent/50 data-active:text-accent-foreground",
-        "data-active:hover:bg-accent",
-        "data-active:focus:bg-accent",
-        "data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-slot="navigation-menu-link"
@@ -211,23 +158,20 @@ function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): J
  * Component: NavigationMenuViewport
  * -------------------------------------------------------------------------- */
 
+/**
+ * @since 0.4.0-canary.4
+ */
 type NavigationMenuViewportProps = ComponentProps<typeof NavigationMenuPrimitive.Viewport>;
 
+/**
+ * @since 0.4.0-canary.4
+ */
 function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): JSX.Element {
   return (
-    <div className={cn("absolute top-full left-0 z-30 flex justify-center", "perspective-distant")}>
+    <div className="absolute start-0 top-full isolate z-50 flex justify-center">
       <NavigationMenuPrimitive.Viewport
         className={cn(
-          "relative",
-          "mt-2 min-h-[calc(var(--radix-navigation-menu-viewport-height)+2px)] w-full overflow-hidden",
-          "rounded-lg border",
-          "bg-popover text-popover-foreground shadow-lg",
-          "transition-[width,height] duration-300 ease-snappy",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "sm:min-w-[calc(var(--radix-navigation-menu-viewport-width)+2px)]",
-          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-90",
-          "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          "origin-[top_center]",
+          "relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[width,height] duration-100 ease-snappy md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:animation-duration-100 data-open:zoom-in-90 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-100 data-closed:zoom-out-90",
           className,
         )}
         data-slot="navigation-menu-viewport"
@@ -241,33 +185,25 @@ function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportP
  * Component: NavigationMenuIndicator
  * -------------------------------------------------------------------------- */
 
+/**
+ * @since 0.4.0-canary.4
+ */
 type NavigationMenuIndicatorProps = ComponentProps<typeof NavigationMenuPrimitive.Indicator>;
 
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: NavigationMenuIndicatorProps): JSX.Element {
+/**
+ * @since 0.4.0-canary.4
+ */
+function NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps): JSX.Element {
   return (
     <NavigationMenuPrimitive.Indicator
       className={cn(
-        "top-full z-10 flex h-2 items-center justify-center overflow-hidden",
-        "ease-snappy data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0",
-        "data-[state=visible]:animate-in data-[state=visible]:fade-in-0",
-        "motion-reduce:animate-none motion-reduce:transition-none",
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-hidden:animate-out data-hidden:fade-out data-visible:animate-in data-visible:fade-in",
         className,
       )}
       data-slot="navigation-menu-indicator"
       {...props}
     >
-      <div
-        className={cn(
-          "relative top-[60%]",
-          "size-2.5",
-          "rounded-tl-xs",
-          "bg-popover text-popover-foreground",
-          "rotate-45",
-        )}
-      />
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   );
 }
@@ -279,17 +215,21 @@ function NavigationMenuIndicator({
 export {
   NavigationMenu,
   NavigationMenuContent,
+  NavigationMenuIndicator,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
+  NavigationMenuViewport,
 };
 
 export type {
   NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
   NavigationMenuItemProps,
   NavigationMenuLinkProps,
   NavigationMenuListProps,
   NavigationMenuProps,
   NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
 };

package/src/components/pagination.tsx

@@ -1,9 +1,8 @@
-import type { VariantProps } from "#/lib/utils";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import type { ComponentProps, JSX } from "react";
 
+import type { VariantProps } from "#/lib/utils";
 import { cn } from "#/lib/utils";
-import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon } from "lucide-react";
-
 import { buttonVariants } from "#/variants/button";
 
 /* -----------------------------------------------------------------------------
@@ -22,7 +21,7 @@ function Pagination({ className, ...props }: PaginationProps): JSX.Element {
   return (
     <nav
       aria-label="pagination"
-      className={cn("flex w-full justify-center", "mx-auto", className)}
+      className={cn("mx-auto flex w-full justify-center", className)}
       data-slot="pagination"
       {...props}
     />
@@ -42,13 +41,7 @@ type PaginationContentProps = ComponentProps<"ul">;
  * @since 0.3.16-canary.0
  */
 function PaginationContent({ className, ...props }: PaginationContentProps): JSX.Element {
-  return (
-    <ul
-      className={cn("flex flex-row items-center gap-1", className)}
-      data-slot="pagination-content"
-      {...props}
-    />
-  );
+  return <ul className={cn("flex items-center gap-1", className)} data-slot="pagination-content" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -74,25 +67,19 @@ function PaginationItem(props: PaginationItemProps): JSX.Element {
 /**
  * @since 0.3.16-canary.0
  */
-interface PaginationLinkProps
-  extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
+interface PaginationLinkProps extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
   isActive?: boolean;
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function PaginationLink({
-  children,
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps): JSX.Element {
+function PaginationLink({ children, className, isActive, size = "icon", ...props }: PaginationLinkProps): JSX.Element {
   return (
     <a
       aria-current={isActive ? "page" : undefined}
       className={buttonVariants({ className, size, variant: isActive ? "outline" : "ghost" })}
+      data-active={isActive}
       data-slot="pagination-link"
       {...props}
     >
@@ -108,24 +95,25 @@ function PaginationLink({
 /**
  * @since 0.3.16-canary.0
  */
-interface PaginationPreviousProps
-  extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
+interface PaginationPreviousProps extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
   isActive?: boolean;
+  text?: string;
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function PaginationPrevious({ ...props }: PaginationPreviousProps): JSX.Element {
+function PaginationPrevious({ className, text = "Previous", ...props }: PaginationPreviousProps): JSX.Element {
   return (
     <PaginationLink
       aria-label="Go to previous page"
+      className={cn("ps-2!", className)}
       data-slot="pagination-previous"
-      size="md"
+      size="default"
       {...props}
     >
-      <ChevronLeftIcon className="size-4" />
-      <span>Previous</span>
+      <ChevronLeftIcon className="rtl:rotate-180" data-icon="inline-start" />
+      <span className="hidden sm:block">{text}</span>
     </PaginationLink>
   );
 }
@@ -137,19 +125,25 @@ function PaginationPrevious({ ...props }: PaginationPreviousProps): JSX.Element
 /**
  * @since 0.3.16-canary.0
  */
-interface PaginationNextProps
-  extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
+interface PaginationNextProps extends ComponentProps<"a">, Pick<VariantProps<typeof buttonVariants>, "size"> {
   isActive?: boolean;
+  text?: string;
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function PaginationNext({ ...props }: PaginationNextProps): JSX.Element {
+function PaginationNext({ className, text = "Next", ...props }: PaginationNextProps): JSX.Element {
   return (
-    <PaginationLink aria-label="Go to next page" data-slot="pagination-next" size="md" {...props}>
-      <span>Next</span>
-      <ChevronRightIcon />
+    <PaginationLink
+      aria-label="Go to next page"
+      className={cn("pe-2!", className)}
+      data-slot="pagination-next"
+      size="default"
+      {...props}
+    >
+      <span className="hidden sm:block">{text}</span>
+      <ChevronRightIcon className="rtl:rotate-180" data-icon="inline-end" />
     </PaginationLink>
   );
 }
@@ -170,11 +164,11 @@ function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): J
   return (
     <span
       aria-hidden
-      className={cn("flex size-10 items-center justify-center", className)}
+      className={cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className)}
       data-slot="pagination-ellipsis"
       {...props}
     >
-      <EllipsisIcon className="size-4" />
+      <MoreHorizontalIcon />
       <span className="sr-only">More pages</span>
     </span>
   );

package/src/components/popover.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { Popover as PopoverPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 /* -----------------------------------------------------------------------------
  * Component: Popover
@@ -65,34 +63,13 @@ type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content>;
 /**
  * @since 0.3.16-canary.0
  */
-function PopoverContent({
-  align = "center",
-  className,
-  sideOffset = 4,
-  ...props
-}: PopoverContentProps): JSX.Element {
+function PopoverContent({ align = "center", className, sideOffset = 4, ...props }: PopoverContentProps): JSX.Element {
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal data-slot="popover-portal">
       <PopoverPrimitive.Content
         align={align}
         className={cn(
-          "z-50",
-          "min-w-32 p-4",
-          "rounded-lg border",
-          "bg-popover shadow-lg outline-hidden",
-          "text-popover-foreground",
-          "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95",
-          "data-open:data-side-top:slide-in-from-bottom-2",
-          "data-open:data-side-right:slide-in-from-left-2",
-          "data-open:data-side-bottom:slide-in-from-top-2",
-          "data-open:data-side-left:slide-in-from-right-2",
-          "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95",
-          "data-closed:data-side-top:slide-out-to-bottom-2",
-          "data-closed:data-side-right:slide-out-to-left-2",
-          "data-closed:data-side-bottom:slide-out-to-top-2",
-          "data-closed:data-side-left:slide-out-to-right-2",
-          "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-          "origin-(--radix-popover-content-transform-origin)",
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden ease-snappy data-open:animate-in data-open:animation-duration-popup-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-popup-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
           className,
         )}
         data-slot="popover-content"
@@ -116,24 +93,78 @@ type PopoverArrowProps = ComponentProps<typeof PopoverPrimitive.Arrow>;
  * @since 0.3.16-canary.0
  */
 function PopoverArrow({ className, ...props }: PopoverArrowProps): JSX.Element {
-  return (
-    <PopoverPrimitive.Arrow
-      className={cn("fill-popover", className)}
-      data-slot="popover-arrow"
-      {...props}
-    />
-  );
+  return <PopoverPrimitive.Arrow className={cn("fill-popover", className)} data-slot="popover-arrow" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PopoverHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type PopoverHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function PopoverHeader({ className, ...props }: PopoverHeaderProps): JSX.Element {
+  return <div className={cn("flex flex-col gap-1 text-sm", className)} data-slot="popover-header" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PopoverTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type PopoverTitleProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function PopoverTitle({ className, ...props }: PopoverTitleProps): JSX.Element {
+  return <div className={cn("font-medium", className)} data-slot="popover-title" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: PopoverDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type PopoverDescriptionProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function PopoverDescription({ className, ...props }: PopoverDescriptionProps): JSX.Element {
+  return <p className={cn("text-muted-foreground", className)} data-slot="popover-description" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger };
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+};
 export type {
   PopoverAnchorProps,
   PopoverArrowProps,
   PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
   PopoverProps,
+  PopoverTitleProps,
   PopoverTriggerProps,
 };

package/src/components/progress-circle.tsx

@@ -1,14 +1,10 @@
-"use client";
-
-import type { ProgressCircleVariants } from "#/variants/progress-circle";
 import type { ComponentProps, CSSProperties, JSX } from "react";
-
 import { useCallback, useMemo } from "react";
 
-import { progressCircleVariants } from "#/variants/progress-circle";
-
 import { useAnimatedValue } from "#/hooks/use-animated-value";
 import * as ProgressCirclePrimitive from "#/primitives/progress-circle";
+import type { ProgressCircleVariants } from "#/variants/progress-circle";
+import { progressCircleVariants } from "#/variants/progress-circle";
 
 /* -------------------------------------------------------------------------------------------------
  * Component: ProgressCircle
@@ -18,9 +14,7 @@ import * as ProgressCirclePrimitive from "#/primitives/progress-circle";
  * @since 0.3.16-canary.0
  */
 interface ProgressCircleProps
-  extends
-    Omit<ComponentProps<typeof ProgressCirclePrimitive.Provider>, "children" | "size">,
-    ProgressCircleVariants {
+  extends Omit<ComponentProps<typeof ProgressCirclePrimitive.Provider>, "children" | "size">, ProgressCircleVariants {
   /**
    * Enables animation effect when value changes
    */
@@ -112,10 +106,7 @@ function ProgressCircle({
     [strokeWidth, thickness, actualSize],
   );
 
-  const slots = useMemo(
-    () => progressCircleVariants({ size, thickness, variant }),
-    [variant, size, thickness],
-  );
+  const slots = useMemo(() => progressCircleVariants({ size, thickness, variant }), [variant, size, thickness]);
 
   const shouldShowLabel = showValue || Boolean(customLabel);
 
@@ -128,19 +119,10 @@ function ProgressCircle({
   }, [customLabel, displayValue]);
 
   return (
-    <ProgressCirclePrimitive.Provider
-      size={actualSize}
-      strokeWidth={actualThickness}
-      value={value}
-      {...props}
-    >
-      <ProgressCirclePrimitive.Root
-        className={slots.root({ className: [className, classNames?.root] })}
-      >
+    <ProgressCirclePrimitive.Provider size={actualSize} strokeWidth={actualThickness} value={value} {...props}>
+      <ProgressCirclePrimitive.Root className={slots.root({ className: [className, classNames?.root] })}>
         <ProgressCirclePrimitive.SVG className={slots.svg({ className: classNames?.svg })}>
-          <ProgressCirclePrimitive.Track
-            className={slots.track({ className: classNames?.track })}
-          />
+          <ProgressCirclePrimitive.Track className={slots.track({ className: classNames?.track })} />
           <ProgressCirclePrimitive.Indicator
             className={slots.indicator({ className: classNames?.indicator })}
             style={

package/src/components/progress.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { Progress as ProgressPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
 
 /* -----------------------------------------------------------------------------
  * Component: Progress
@@ -20,23 +18,12 @@ type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root>;
 function Progress({ className, value, ...props }: ProgressProps): JSX.Element {
   return (
     <ProgressPrimitive.Root
-      className={cn(
-        "relative",
-        "h-2 w-full overflow-hidden",
-        "rounded-full",
-        "bg-primary/20",
-        className,
-      )}
+      className={cn("relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted", className)}
       data-slot="progress"
       {...props}
     >
       <ProgressPrimitive.Indicator
-        className={cn(
-          "size-full flex-1",
-          "bg-primary",
-          "transition-[transform] duration-500 ease-gentle",
-          "motion-reduce:transition-none motion-reduce:duration-0",
-        )}
+        className="size-full flex-1 bg-primary transition-all"
         data-slot="progress-indicator"
         style={{
           transform: `translateX(-${(100 - (value ?? 0)).toString()}%)`,

package/src/components/radio-cards.tsx

@@ -1,11 +1,8 @@
-"use client";
-
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
-import { cn } from "#/lib/utils";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-
 import { Label } from "#/components/label";
+import { cn } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
  * Component: RadioCards
@@ -38,39 +35,23 @@ type RadioCardsItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
 function RadioCardsItem({ children, className, ...props }: RadioCardsItemProps): 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",
-      )}
+      className="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"
       data-slot="radio-card"
     >
       <RadioGroupPrimitive.Item
         className={cn(
-          "peer flex size-4 shrink-0 items-center justify-center",
-          "rounded-full border border-input shadow-xs outline-hidden",
-          "text-primary-foreground",
-          "transition",
-          "focus-visible:ring-3 focus-visible:ring-ring/50",
-          "focus-visible:not-aria-checked:border-ring",
-          "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 aspect-square size-4 shrink-0 rounded-full border border-input outline-none 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",
           className,
         )}
         data-slot="radio-card-item"
         {...props}
       >
         <RadioGroupPrimitive.Indicator
-          className={cn("size-1", "rounded-full", "bg-background")}
+          className="flex size-4 items-center justify-center"
           data-slot="radio-card-indicator"
-        />
+        >
+          <span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 animate-in rounded-full bg-primary-foreground duration-control-indicator ease-spring zoom-in-50 rtl:translate-x-1/2" />
+        </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
       {children}
     </Label>