@codefast/ui 0.0.4 → 0.0.6

package/src/navigation-menu.tsx

@@ -10,11 +10,7 @@ import { cn, cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const navigationMenuTriggerStyle = cva({
-  base: [
-    "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
-    "data-[state=open]:bg-accent/50",
-    "data-[active]:bg-accent/50",
-  ],
+  base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 group inline-flex h-10 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
 });
 
 /* -----------------------------------------------------------------------------
@@ -75,15 +71,14 @@ const NavigationMenuTrigger = React.forwardRef<
   <NavigationMenuPrimitive.Trigger
     ref={ref}
     className={navigationMenuTriggerStyle({
-      className: cn("group", className),
+      className: ["group", className],
     })}
     {...props}
   >
     {children}{" "}
     <ChevronDownIcon
       className={cn(
-        "relative top-px ml-1 h-3 w-3 transition duration-300",
-        "group-data-[state=open]:rotate-180",
+        "relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180",
       )}
       aria-hidden="true"
     />
@@ -102,11 +97,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full md:absolute md:w-auto",
-      "data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in",
-      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
-      "data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out",
-      "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=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full focus:outline-none md:absolute md:w-auto",
       className,
     )}
     {...props}
@@ -135,9 +126,7 @@ const NavigationMenuViewport = React.forwardRef<
   >
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "bg-popover text-popover-foreground relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-        "data-[state=open]:animate-in data-[state=open]:zoom-in-90",
-        "data-[state=closed]:animate-out data-[state=closed]:zoom-out-95",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
         className,
       )}
       ref={ref}
@@ -159,9 +148,7 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden transition",
-      "data-[state=visible]:animate-in data-[state=visible]:fade-in",
-      "data-[state=hidden]:animate-out data-[state=hidden]:fade-out",
+      "data-[state=visible]:animate-in data-[state=visible]:fade-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden transition",
       className,
     )}
     {...props}

package/src/pagination.tsx

@@ -48,9 +48,7 @@ PaginationContent.displayName = "PaginationContent";
 const PaginationItem = React.forwardRef<
   HTMLLIElement,
   React.LiHTMLAttributes<HTMLLIElement>
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-));
+>((props, ref) => <li ref={ref} {...props} />);
 PaginationItem.displayName = "PaginationItem";
 
 /* -----------------------------------------------------------------------------
@@ -138,7 +136,7 @@ function PaginationEllipsis({
   return (
     <span
       aria-hidden
-      className={cn("flex h-9 w-9 items-center justify-center", className)}
+      className={cn("flex size-10 items-center justify-center", className)}
       {...props}
     >
       <DotsHorizontalIcon className="size-4" />

package/src/popover.tsx

@@ -36,17 +36,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=open]:data-[side=top]:slide-in-from-bottom-2",
-        "data-[state=open]:data-[side=right]:slide-in-from-left-2",
-        "data-[state=open]:data-[side=bottom]:slide-in-from-top-2",
-        "data-[state=open]:data-[side=left]:slide-in-from-right-2",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "data-[state=closed]:data-[side=top]:slide-out-to-bottom-2",
-        "data-[state=closed]:data-[side=left]:slide-out-to-right-2",
-        "data-[state=closed]:data-[side=bottom]:slide-out-to-top-2",
-        "data-[state=closed]:data-[side=right]:slide-out-to-left-2",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-[8rem] rounded-md border p-4 shadow-md focus:outline-none",
         className,
       )}
       {...props}
@@ -55,8 +45,24 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
+/* -----------------------------------------------------------------------------
+ * Component: PopoverArrow
+ * -------------------------------------------------------------------------- */
+
+const PopoverArrow = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Arrow>,
+  PopoverPrimitive.PopoverArrowProps
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    className={cn("fill-popover", className)}
+    {...props}
+  />
+));
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow };

package/src/progress.tsx

@@ -22,7 +22,9 @@ const Progress = React.forwardRef<
   >
     <ProgressPrimitive.Indicator
       className="bg-primary h-full w-full flex-1 transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      style={{
+        transform: `translateX(-${100 - (value ?? 0)}%)`,
+      }}
     />
   </ProgressPrimitive.Root>
 ));

package/src/radio-group.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import { DotFilledIcon } from "@radix-ui/react-icons";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cn } from "./utils";
 
@@ -35,13 +34,16 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-compound text-compound-foreground ring-offset-background focus-visible:ring-ring group aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-checked:border-primary",
+        "border-compound text-compound-foreground focus-visible:ring-offset-background focus-visible:ring-ring aria-checked:border-primary group aspect-square size-4 rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full" />
+      <RadioGroupPrimitive.Indicator
+        className={cn(
+          "after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full",
+        )}
+      />
     </RadioGroupPrimitive.Item>
   );
 });

package/src/resizable.tsx

@@ -15,8 +15,7 @@ function ResizablePanelGroup({
   return (
     <ResizablePrimitive.PanelGroup
       className={cn(
-        "flex h-full w-full",
-        "data-[panel-group-direction=vertical]:flex-col",
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
         className,
       )}
       {...props}
@@ -44,9 +43,7 @@ function ResizableHandle({
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
-        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0",
-        "[&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring focus-visible:ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}

package/src/select.tsx

@@ -39,7 +39,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "border-input placeholder:text-muted-foreground focus:ring-offset-background focus:ring-ring flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -107,30 +107,22 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-popover text-popover-foreground relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-[8rem] overflow-hidden rounded-md border shadow-md",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=open]:data-[side=top]:slide-in-from-bottom-2",
-        "data-[state=open]:data-[side=right]:slide-in-from-left-2",
-        "data-[state=open]:data-[side=bottom]:slide-in-from-top-2",
-        "data-[state=open]:data-[side=left]:slide-in-from-right-2",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "data-[state=closed]:data-[side=top]:slide-out-to-bottom-2",
-        "data-[state=closed]:data-[side=left]:slide-out-to-right-2",
-        "data-[state=closed]:data-[side=bottom]:slide-out-to-top-2",
-        "data-[state=closed]:data-[side=right]:slide-out-to-left-2",
-        position === "popper" && [
-          "data-[side=top]:-translate-y-1",
-          "data-[side=right]:translate-x-1",
-          "data-[side=bottom]:translate-y-1",
-          "data-[side=left]:-translate-x-1",
-        ],
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
       )}
       position={position}
       {...props}
     >
       <SelectScrollUpButton />
-      <SelectPrimitive.Viewport className="p-1">
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
         {children}
       </SelectPrimitive.Viewport>
       <SelectScrollDownButton />
@@ -166,13 +158,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none",
-      "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <CheckIcon className="size-4" />
       </SelectPrimitive.ItemIndicator>

package/src/sheet.tsx

@@ -11,33 +11,15 @@ import { cn, cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const sheetVariants = cva({
-  base: [
-    "bg-background fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out",
-    "data-[state=open]:animate-in data-[state=open]:duration-500",
-    "data-[state=closed]:animate-out data-[state=closed]:duration-300",
-  ],
+  base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   variants: {
     side: {
-      top: [
-        "inset-x-0 top-0 border-b",
-        "data-[state=open]:slide-in-from-top",
-        "data-[state=closed]:slide-out-to-top",
-      ],
-      bottom: [
-        "inset-x-0 bottom-0 border-t",
-        "data-[state=open]:slide-in-from-bottom",
-        "data-[state=closed]:slide-out-to-bottom",
-      ],
-      left: [
-        "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-        "data-[state=open]:slide-in-from-left",
-        "data-[state=closed]:slide-out-to-left",
-      ],
-      right: [
-        "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-        "data-[state=open]:slide-in-from-right",
-        "data-[state=closed]:slide-out-to-right",
-      ],
+      top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 border-b",
+      bottom:
+        "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 border-t",
+      left: "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+      right:
+        "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
     },
   },
   defaultVariants: {
@@ -63,33 +45,6 @@ const SheetTrigger = SheetPrimitive.Trigger;
 
 const SheetClose = SheetPrimitive.Close;
 
-/* -----------------------------------------------------------------------------
- * Component: SheetPortal
- * -------------------------------------------------------------------------- */
-
-const SheetPortal = SheetPrimitive.Portal;
-
-/* -----------------------------------------------------------------------------
- * Component: SheetOverlay
- * -------------------------------------------------------------------------- */
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  SheetPrimitive.DialogOverlayProps
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
 /* -----------------------------------------------------------------------------
  * Component: SheetContent
  * -------------------------------------------------------------------------- */
@@ -98,8 +53,12 @@ const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetPrimitive.DialogContentProps & VariantProps<typeof sheetVariants>
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
+  <SheetPrimitive.Portal>
+    <SheetPrimitive.Overlay
+      className={cn(
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
+      )}
+    />
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side }), className)}
@@ -108,15 +67,14 @@ const SheetContent = React.forwardRef<
       {children}
       <SheetPrimitive.Close
         className={cn(
-          "ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
-          "data-[state=open]:bg-secondary",
+          "focus:ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
         )}
       >
         <Cross2Icon className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
-  </SheetPortal>
+  </SheetPrimitive.Portal>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
@@ -197,8 +155,6 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
-  SheetPortal,
-  SheetOverlay,
   SheetTrigger,
   SheetClose,
   SheetContent,

package/src/slider.tsx

@@ -23,7 +23,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
       <SliderPrimitive.Range className="bg-primary absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring focus-visible:ring-offset-background block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

package/src/sonner.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner, toast } from "sonner";
+import { toast, Toaster as Sonner } from "sonner";
+import { cn } from "./utils";
 
 /* -----------------------------------------------------------------------------
  * Component: Sonner
@@ -20,8 +21,9 @@ function Toaster({ ...props }: ToasterProps): React.JSX.Element {
       className="toaster group"
       toastOptions={{
         classNames: {
-          toast:
+          toast: cn(
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          ),
           description: "group-[.toast]:text-muted-foreground",
           actionButton:
             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",

package/src/switch.tsx

@@ -14,19 +14,13 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
     ref={ref}
   >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform",
-        "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-      )}
-    />
+    <SwitchPrimitives.Thumb className="bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" />
   </SwitchPrimitives.Root>
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;

package/src/table.tsx

@@ -96,7 +96,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "text-muted-foreground h-10 px-3 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
       className,
     )}
     {...props}
@@ -115,7 +115,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
       className,
     )}
     {...props}

package/src/tabs.tsx

@@ -21,7 +21,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1",
+      "bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
       className,
     )}
     {...props}
@@ -40,8 +40,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "focus-visible:ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -60,7 +59,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+      "focus-visible:ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
       className,
     )}
     {...props}

package/src/textarea.tsx

@@ -12,7 +12,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input placeholder:text-muted-foreground focus-visible:ring-ring focus-visible:ring-offset-background flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}

package/src/toggle.tsx

@@ -10,10 +10,7 @@ import { cva } from "./utils";
  * -------------------------------------------------------------------------- */
 
 const toggleVariants = cva({
-  base: [
-    "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
-    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-  ],
+  base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring focus-visible:ring-offset-background data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
       default: "bg-transparent",
@@ -21,9 +18,9 @@ const toggleVariants = cva({
         "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm",
     },
     size: {
-      default: "h-9 px-3",
-      sm: "h-8 px-2",
-      lg: "h-10 px-3",
+      default: "h-10 px-3",
+      sm: "h-9 px-2.5",
+      lg: "h-11 px-5",
     },
   },
   defaultVariants: {

package/src/tooltip.tsx

@@ -23,10 +23,26 @@ const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
- * Component: TooltipPortal
+ * Component: TooltipContent
  * -------------------------------------------------------------------------- */
 
-const TooltipPortal = TooltipPrimitive.Portal;
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipPrimitive.TooltipContentProps
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-primary text-primary-foreground data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 rounded-md px-3 py-1.5 text-xs focus:outline-none",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: TooltipArrow
@@ -35,50 +51,23 @@ const TooltipPortal = TooltipPrimitive.Portal;
 const TooltipArrow = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Arrow>,
   TooltipPrimitive.TooltipArrowProps
->((props, ref) => (
-  <TooltipPrimitive.Arrow ref={ref} className="fill-primary" {...props} />
-));
-TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: TooltipContent
- * -------------------------------------------------------------------------- */
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  TooltipPrimitive.TooltipContentProps
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
+>(({ className, ...props }, ref) => (
+  <TooltipPrimitive.Arrow
     ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "bg-primary text-primary-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
-      "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
-      "data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2",
-      "data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2",
-      "data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2",
-      "data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "data-[state=closed]:data-[side=top]:slide-out-to-bottom-2",
-      "data-[state=closed]:data-[side=right]:slide-out-to-left-2",
-      "data-[state=closed]:data-[side=bottom]:slide-out-to-top-2",
-      "data-[state=closed]:data-[side=left]:slide-out-to-right-2",
-      className,
-    )}
+    className={cn("fill-primary", className)}
     {...props}
   />
 ));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
 export {
+  TooltipProvider,
   Tooltip,
-  TooltipPortal,
   TooltipTrigger,
   TooltipContent,
-  TooltipProvider,
   TooltipArrow,
 };

package/dist/chunk-4ZL55G6C.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var _chunkQZCQ42BPjs = require('./chunk-QZCQ42BP.js');var _react = require('react'); var o = _interopRequireWildcard(_react);var _reacttoggle = require('@radix-ui/react-toggle'); var e = _interopRequireWildcard(_reacttoggle);var _jsxruntime = require('react/jsx-runtime');var g=_chunkQZCQ42BPjs.a.call(void 0, {base:["hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50","data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"],variants:{variant:{default:"bg-transparent",outline:"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm"},size:{default:"h-9 px-3",sm:"h-8 px-2",lg:"h-10 px-3"}},defaultVariants:{variant:"default",size:"default"}}),l= exports.b =o.forwardRef(({className:a,variant:r,size:i,...n},s)=>_jsxruntime.jsx.call(void 0, e.Root,{ref:s,className:g({variant:r,size:i,className:a}),...n}));l.displayName=e.Root.displayName;exports.a = g; exports.b = l;
-//# sourceMappingURL=chunk-4ZL55G6C.js.map

package/dist/chunk-4ZL55G6C.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggle.tsx"],"names":["React","TogglePrimitive","jsx","toggleVariants","cva","Toggle","className","variant","size","props","ref"],"mappings":"wCAEA,UAAYA,MAAW,QACvB,UAAYC,MAAqB,yBAyC/B,cAAAC,MAAA,oBAjCF,IAAMC,EAAiBC,EAAI,CACzB,KAAM,CACJ,+PACA,kEACF,EACA,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QACE,2FACJ,EACA,KAAM,CACJ,QAAS,WACT,GAAI,WACJ,GAAI,WACN,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CAAC,EAQKC,EAAe,aAGnB,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IACzCR,EAAiB,OAAhB,CACC,IAAKQ,EACL,UAAWP,EAAe,CAAE,QAAAI,EAAS,KAAAC,EAAM,UAAAF,CAAU,CAAC,EACrD,GAAGG,EACN,CACD,EACDJ,EAAO,YAA8B,OAAK","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps } from \"cva\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Toggle\n * -------------------------------------------------------------------------- */\n\nconst toggleVariants = cva({\n  base: [\n    \"hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50\",\n    \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  ],\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      outline:\n        \"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm\",\n    },\n    size: {\n      default: \"h-9 px-3\",\n      sm: \"h-8 px-2\",\n      lg: \"h-10 px-3\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\ntype ToggleVariantsProps = VariantProps<typeof toggleVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Toggle\n * -------------------------------------------------------------------------- */\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  TogglePrimitive.ToggleProps & ToggleVariantsProps\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={toggleVariants({ variant, size, className })}\n    {...props}\n  />\n));\nToggle.displayName = TogglePrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\nexport { Toggle, toggleVariants, type ToggleVariantsProps };\n"]}

package/dist/chunk-76AASLTX.mjs

@@ -1,2 +0,0 @@
-import{b as i}from"./chunk-JTI7KCLO.mjs";import*as a from"react";import*as e from"@radix-ui/react-label";import{jsx as m}from"react/jsx-runtime";var l=a.forwardRef(({className:o,...t},r)=>m(e.Root,{ref:r,className:i("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",o),...t}));l.displayName=e.Root.displayName;export{l as a};
-//# sourceMappingURL=chunk-76AASLTX.mjs.map

package/dist/chunk-7UVSBFQU.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var _chunkQZCQ42BPjs = require('./chunk-QZCQ42BP.js');var _react = require('react'); var a = _interopRequireWildcard(_react);var _reactlabel = require('@radix-ui/react-label'); var e = _interopRequireWildcard(_reactlabel);var _jsxruntime = require('react/jsx-runtime');var l=a.forwardRef(({className:o,...t},r)=>_jsxruntime.jsx.call(void 0, e.Root,{ref:r,className:_chunkQZCQ42BPjs.b.call(void 0, "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",o),...t}));l.displayName=e.Root.displayName;exports.a = l;
-//# sourceMappingURL=chunk-7UVSBFQU.js.map

package/dist/chunk-7UVSBFQU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/label.tsx"],"names":["React","LabelPrimitive","jsx","Label","className","props","ref","cn"],"mappings":"wCACA,UAAYA,MAAW,QACvB,UAAYC,MAAoB,wBAW9B,cAAAC,MAAA,oBAJF,IAAMC,EAAc,aAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC1BJ,EAAgB,OAAf,CACC,IAAKI,EACL,UAAWC,EACT,6FACAH,CACF,EACC,GAAGC,EACN,CACD,EACDF,EAAM,YAA6B,OAAK","sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Label\n * -------------------------------------------------------------------------- */\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  LabelPrimitive.LabelProps\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n      className,\n    )}\n    {...props}\n  />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Label };\n"]}