shadcn-packaged 2025.8.18 → 2025.9.1

package/ui/toggle-group.d.ts

@@ -1,7 +1,12 @@
 import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps } from "class-variance-authority";
-import { toggleVariants } from "../ui/toggle";
-declare function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string>) & React.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

package/ui/toggle-group.jsx

@@ -7,20 +7,20 @@ const ToggleGroupContext = React.createContext({
     size: "default",
     variant: "default",
 });
-function ToggleGroup({ className, variant, size, children, ...props }) {
-    return (<ToggleGroupPrimitive.Root data-slot="toggle-group" data-variant={variant} data-size={size} className={cn("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", className)} {...props}>
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>);
-}
-function ToggleGroupItem({ className, children, variant, size, ...props }) {
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => (<ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
     const context = React.useContext(ToggleGroupContext);
-    return (<ToggleGroupPrimitive.Item data-slot="toggle-group-item" data-variant={context.variant || variant} data-size={context.size || size} className={cn(toggleVariants({
+    return (<ToggleGroupPrimitive.Item ref={ref} className={cn(toggleVariants({
             variant: context.variant || variant,
             size: context.size || size,
-        }), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className)} {...props}>
+        }), className)} {...props}>
       {children}
     </ToggleGroupPrimitive.Item>);
-}
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 export { ToggleGroup, ToggleGroupItem };

package/ui/toggle.d.ts

@@ -5,5 +5,8 @@ declare const toggleVariants: (props?: {
     variant?: "default" | "outline";
     size?: "default" | "sm" | "lg";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
-declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: {
+    variant?: "default" | "outline";
+    size?: "default" | "sm" | "lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { Toggle, toggleVariants };

package/ui/toggle.jsx

@@ -3,16 +3,16 @@ import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
-const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2", {
     variants: {
         variant: {
             default: "bg-transparent",
-            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+            outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
         },
         size: {
-            default: "h-9 px-2 min-w-9",
-            sm: "h-8 px-1.5 min-w-8",
-            lg: "h-10 px-2.5 min-w-10",
+            default: "h-10 px-3 min-w-10",
+            sm: "h-9 px-2.5 min-w-9",
+            lg: "h-11 px-5 min-w-11",
         },
     },
     defaultVariants: {
@@ -20,7 +20,6 @@ const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounde
         size: "default",
     },
 });
-function Toggle({ className, variant, size, ...props }) {
-    return (<TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props}/>);
-}
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (<TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props}/>));
+Toggle.displayName = TogglePrimitive.Root.displayName;
 export { Toggle, toggleVariants };

package/ui/tooltip.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
-declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
-declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/ui/tooltip.jsx

@@ -2,23 +2,9 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../lib/utils";
-function TooltipProvider({ delayDuration = 0, ...props }) {
-    return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props}/>);
-}
-function Tooltip({ ...props }) {
-    return (<TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props}/>
-    </TooltipProvider>);
-}
-function TooltipTrigger({ ...props }) {
-    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props}/>;
-}
-function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-    return (<TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content data-slot="tooltip-content" sideOffset={sideOffset} className={cn("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className)} {...props}>
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"/>
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>);
-}
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (<TooltipPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", className)} {...props}/>));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };