@arolariu/components 0.2.0 → 0.3.1

package/src/components/ui/skeleton.tsx

@@ -3,11 +3,10 @@
 import {cn} from "@/lib/utilities";
 import * as React from "react";
 
-function Skeleton({className, ...props}: React.ComponentProps<"div">) {
+function Skeleton({className, ...props}: Readonly<React.HTMLAttributes<HTMLDivElement>>) {
   return (
     <div
-      data-slot='skeleton'
-      className={cn("animate-pulse rounded-md bg-neutral-100 dark:bg-neutral-800", className)}
+      className={cn("animate-pulse rounded-md bg-neutral-900/10 dark:bg-neutral-50/10", className)}
       {...props}
     />
   );

package/src/components/ui/slider.tsx

@@ -5,45 +5,20 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function Slider({className, defaultValue, value, min = 0, max = 100, ...props}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
-    [value, defaultValue, min, max],
-  );
-
-  return (
-    <SliderPrimitive.Root
-      data-slot='slider'
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className,
-      )}
-      {...props}>
-      <SliderPrimitive.Track
-        data-slot='slider-track'
-        className={cn(
-          "relative grow overflow-hidden rounded-full bg-neutral-100 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 dark:bg-neutral-800",
-        )}>
-        <SliderPrimitive.Range
-          data-slot='slider-range'
-          className={cn(
-            "absolute bg-neutral-900 data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full dark:bg-neutral-50",
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({length: _values.length}, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot='slider-thumb'
-          key={index}
-          className='block size-4 shrink-0 rounded-full border border-neutral-200 border-neutral-900 bg-white shadow-sm ring-neutral-950/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-neutral-300/50'
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
-}
+const Slider = React.forwardRef<
+  React.ComponentRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({className, ...props}, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none items-center select-none", className)}
+    {...props}>
+    <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20'>
+      <SliderPrimitive.Range className='absolute h-full bg-neutral-900 dark:bg-neutral-50' />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full border border-neutral-200 border-neutral-900/50 bg-white shadow transition-colors focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50/50 dark:border-neutral-800 dark:bg-neutral-950 dark:focus-visible:ring-neutral-300' />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
 export {Slider};

package/src/components/ui/sonner.tsx

@@ -2,7 +2,9 @@
 
 import {useTheme} from "next-themes";
 import * as React from "react";
-import {Toaster as Sonner, ToasterProps, toast} from "sonner";
+import {Toaster as Sonner, toast} from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({...props}: ToasterProps) => {
   const {theme = "system"} = useTheme();
@@ -11,20 +13,24 @@ const Toaster = ({...props}: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className='toaster group'
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-        } as React.CSSProperties
-      }
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-white group-[.toaster]:text-neutral-950 group-[.toaster]:border-neutral-200 group-[.toaster]:shadow-lg dark:group-[.toaster]:bg-neutral-950 dark:group-[.toaster]:text-neutral-50 dark:group-[.toaster]:border-neutral-800",
+          description: "group-[.toast]:text-neutral-500 dark:group-[.toast]:text-neutral-400",
+          actionButton:
+            "group-[.toast]:bg-neutral-900 group-[.toast]:text-neutral-50 dark:group-[.toast]:bg-neutral-50 dark:group-[.toast]:text-neutral-900",
+          cancelButton:
+            "group-[.toast]:bg-neutral-100 group-[.toast]:text-neutral-500 dark:group-[.toast]:bg-neutral-800 dark:group-[.toast]:text-neutral-400",
+        },
+      }}
       {...props}
     />
   );
 };
 
 export {
-  Toaster,
   // eslint-disable-next-line unicorn/prefer-export-from -- same export style.
   toast,
+  Toaster,
 };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import {cn} from "@/lib/utilities";
+import {Loader2Icon} from "lucide-react";
+import * as React from "react";
+
+function Spinner({className, ...props}: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role='status'
+      aria-label='Loading'
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export {Spinner};

package/src/components/ui/switch.tsx

@@ -1,27 +1,28 @@
 "use client";
 
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function Switch({className, ...props}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot='switch'
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({className, ...props}, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "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:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
+      className,
+    )}
+    {...props}
+    ref={ref}>
+    <SwitchPrimitives.Thumb
       className={cn(
-        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-neutral-200 border-transparent shadow-xs transition-all outline-none focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:border-neutral-800 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:data-[state=checked]:bg-neutral-50 dark:dark:data-[state=unchecked]:bg-neutral-800/80 dark:data-[state=unchecked]:bg-neutral-200/80 dark:data-[state=unchecked]:bg-neutral-800",
-        className,
+        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950",
       )}
-      {...props}>
-      <SwitchPrimitive.Thumb
-        data-slot='switch-thumb'
-        className={cn(
-          "pointer-events-none block size-4 rounded-full bg-white ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:bg-neutral-950 dark:dark:data-[state=checked]:bg-neutral-900 dark:data-[state=checked]:bg-neutral-50 dark:dark:data-[state=unchecked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-950",
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
-}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export {Switch};

package/src/components/ui/table.tsx

@@ -4,95 +4,90 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function Table({className, ...props}: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot='table-container'
-      className='relative w-full overflow-x-auto'>
-      {/* eslint-disable-next-line sonarjs/table-header */}
-      <table
-        data-slot='table'
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  );
-}
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({className, ...props}, ref) => (
+  <div className='relative w-full overflow-auto'>
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
 
-function TableHeader({className, ...props}: React.ComponentProps<"thead">) {
-  return (
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({className, ...props}, ref) => (
     <thead
-      data-slot='table-header'
+      ref={ref}
       className={cn("[&_tr]:border-b", className)}
       {...props}
     />
-  );
-}
+  ),
+);
+TableHeader.displayName = "TableHeader";
 
-function TableBody({className, ...props}: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot='table-body'
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  );
-}
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({className, ...props}, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
 
-function TableFooter({className, ...props}: React.ComponentProps<"tfoot">) {
-  return (
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({className, ...props}, ref) => (
     <tfoot
-      data-slot='table-footer'
+      ref={ref}
       className={cn("border-t bg-neutral-100/50 font-medium dark:bg-neutral-800/50 [&>tr]:last:border-b-0", className)}
       {...props}
     />
-  );
-}
+  ),
+);
+TableFooter.displayName = "TableFooter";
 
-function TableRow({className, ...props}: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot='table-row'
-      className={cn(
-        "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({className, ...props}, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
 
-function TableHead({className, ...props}: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot='table-head'
-      className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-neutral-950 dark:text-neutral-50 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({className, ...props}, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
 
-function TableCell({className, ...props}: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot='table-cell'
-      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
-      {...props}
-    />
-  );
-}
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({className, ...props}, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
 
-function TableCaption({className, ...props}: React.ComponentProps<"caption">) {
-  return (
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({className, ...props}, ref) => (
     <caption
-      data-slot='table-caption'
+      ref={ref}
       className={cn("mt-4 text-sm text-neutral-500 dark:text-neutral-400", className)}
       {...props}
     />
-  );
-}
+  ),
+);
+TableCaption.displayName = "TableCaption";
 
 export {Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow};

package/src/components/ui/tabs.tsx

@@ -5,50 +5,50 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function Tabs({className, ...props}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot='tabs'
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  );
-}
+const Tabs = TabsPrimitive.Root;
 
-function TabsList({className, ...props}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
+const TabsList = React.forwardRef<React.ComponentRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(
+  ({className, ...props}, ref) => (
     <TabsPrimitive.List
-      data-slot='tabs-list'
+      ref={ref}
       className={cn(
-        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-neutral-100 p-[3px] text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400",
+        "inline-flex h-9 items-center justify-center rounded-lg bg-neutral-100 p-1 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400",
         className,
       )}
       {...props}
     />
-  );
-}
+  ),
+);
+TabsList.displayName = TabsPrimitive.List.displayName;
 
-function TabsTrigger({className, ...props}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot='tabs-trigger'
-      className={cn(
-        "focus-visible:outline-ring inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-neutral-200 border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-neutral-950 transition-[color,box-shadow] focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:shadow-sm dark:border-neutral-800 dark:dark:text-neutral-400 dark:text-neutral-50 dark:text-neutral-500 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:dark:data-[state=active]:border-neutral-800 dark:data-[state=active]:border-neutral-200 dark:dark:data-[state=active]:bg-neutral-800/30 dark:data-[state=active]:bg-neutral-200/30 dark:data-[state=active]:bg-neutral-950 dark:dark:data-[state=active]:text-neutral-50 dark:data-[state=active]:text-neutral-950 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({className, ...props}, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-function TabsContent({className, ...props}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot='tabs-content'
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  );
-}
+const TabsContent = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({className, ...props}, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-white focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 export {Tabs, TabsContent, TabsList, TabsTrigger};

package/src/components/ui/textarea.tsx

@@ -4,17 +4,18 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-function Textarea({className, ...props}: Readonly<React.ComponentProps<"textarea">>) {
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(({className, ...props}, ref) => {
   return (
     <textarea
-      data-slot='textarea'
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-neutral-500 focus-visible:border-neutral-950 focus-visible:ring-[3px] focus-visible:ring-neutral-950/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-red-500 aria-invalid:ring-red-500/20 md:text-sm dark:border-neutral-800 dark:bg-neutral-200/30 dark:dark:bg-neutral-800/30 dark:placeholder:text-neutral-400 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:border-red-900 dark:aria-invalid:ring-red-500/40 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40",
+        "flex min-h-[60px] w-full rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-neutral-500 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
         className,
       )}
+      ref={ref}
       {...props}
     />
   );
-}
+});
+Textarea.displayName = "Textarea";
 
 export {Textarea};

package/src/components/ui/toggle-group.tsx

@@ -12,55 +12,42 @@ const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariant
   variant: "default",
 });
 
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: Readonly<React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>>) {
-  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
-        // eslint-disable-next-line react/jsx-no-constructed-context-values -- not applicable.
-        value={{variant, size}}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
+const ToggleGroup = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({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>
+));
 
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: Readonly<React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>>) {
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>(({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}
+      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}>
       {children}
     </ToggleGroupPrimitive.Item>
   );
-}
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 export {ToggleGroup, ToggleGroupItem};

package/src/components/ui/toggle.tsx

@@ -7,13 +7,13 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-neutral-100 hover:text-neutral-500 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-neutral-100 data-[state=on]:text-neutral-900 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 whitespace-nowrap dark:hover:bg-neutral-800 dark:hover:text-neutral-400 dark:data-[state=on]:bg-neutral-800 dark:data-[state=on]:text-neutral-50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-neutral-100 hover:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-neutral-100 data-[state=on]:text-neutral-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:hover:bg-neutral-800 dark:hover:text-neutral-400 dark:focus-visible:ring-neutral-300 dark:data-[state=on]:bg-neutral-800 dark:data-[state=on]:text-neutral-50",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-neutral-200 bg-transparent shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+          "border border-neutral-200 bg-transparent shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
       },
       size: {
         default: "h-9 px-2 min-w-9",
@@ -28,19 +28,17 @@ const toggleVariants = cva(
   },
 );
 
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: Readonly<React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot='toggle'
-      className={cn(toggleVariants({variant, size, className}))}
-      {...props}
-    />
-  );
-}
+const Toggle = React.forwardRef<
+  React.ComponentRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({className, variant, size, ...props}, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({variant, size, className}))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
 export {Toggle, toggleVariants};