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

package/src/components/slider.tsx

@@ -1,10 +1,8 @@
-"use client";
-
+import { Slider as SliderPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
+import { useMemo } from "react";
 
 import { cn } from "#/lib/utils";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import { useMemo } from "react";
 
 /* -----------------------------------------------------------------------------
  * Component: Slider
@@ -18,14 +16,7 @@ type SliderProps = ComponentProps<typeof SliderPrimitive.Root>;
 /**
  * @since 0.3.16-canary.0
  */
-function Slider({
-  className,
-  defaultValue,
-  max = 100,
-  min = 0,
-  value,
-  ...props
-}: SliderProps): JSX.Element {
+function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }: SliderProps): JSX.Element {
   const _values = useMemo(() => {
     if (Array.isArray(value)) {
       return value;
@@ -37,10 +28,7 @@ function Slider({
   return (
     <SliderPrimitive.Root
       className={cn(
-        "relative flex w-full items-center",
-        "touch-none select-none",
-        "data-vertical:h-full data-vertical:min-h-44 data-vertical:w-auto data-vertical:flex-col",
-        "data-disabled:opacity-50",
+        "relative flex w-full touch-none items-center select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50",
         className,
       )}
       data-slot="slider"
@@ -51,35 +39,18 @@ function Slider({
       {...props}
     >
       <SliderPrimitive.Track
-        className={cn(
-          "relative",
-          "w-full grow overflow-hidden",
-          "rounded-full",
-          "bg-input",
-          "data-horizontal:h-1 data-horizontal:w-full",
-          "data-vertical:h-full data-vertical:w-1",
-        )}
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
         data-slot="slider-track"
       >
         <SliderPrimitive.Range
-          className={cn("absolute", "bg-primary", "data-horizontal:h-full", "data-vertical:w-full")}
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
           data-slot="slider-range"
         />
       </SliderPrimitive.Track>
       {Array.from({ length: _values.length }, (_, index) => (
         <SliderPrimitive.Thumb
           key={index}
-          aria-label="Volume"
-          className={cn(
-            "flex size-4 items-center justify-center",
-            "rounded-full border-2 border-primary",
-            "bg-primary shadow-sm outline-hidden",
-            "after:size-full after:rounded-full after:bg-background after:transition-[width,height] after:duration-200 after:ease-spring",
-            "motion-reduce:after:transition-none motion-reduce:after:duration-0",
-            "focus-visible:ring-4 focus-visible:ring-primary/20",
-            "active:not-data-disabled:after:size-1",
-            "dark:focus-visible:ring-primary/40",
-          )}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           data-slot="slider-thumb"
         />
       ))}

package/src/components/sonner.tsx

@@ -1,10 +1,7 @@
-"use client";
-
-import { cn } from "#/lib/utils";
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { useTheme } from "next-themes";
 import type { CSSProperties, JSX } from "react";
 import type { ToasterProps as SonnerToasterProps } from "sonner";
-
-import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
 
 /* -----------------------------------------------------------------------------
@@ -24,15 +21,28 @@ function Toaster({ ...props }: ToasterProps): JSX.Element {
 
   return (
     <Sonner
-      className={cn("group", "toaster")}
+      className="toaster group"
+      icons={{
+        error: <OctagonXIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: <CircleCheckIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+      }}
       style={
         {
+          "--border-radius": "var(--radius)",
           "--normal-bg": "var(--popover)",
           "--normal-border": "var(--border)",
           "--normal-text": "var(--popover-foreground)",
         } as CSSProperties
       }
       theme={theme as ToasterProps["theme"]}
+      toastOptions={{
+        classNames: {
+          toast: "rounded-2xl",
+        },
+      }}
       {...props}
     />
   );

package/src/components/spinner.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { VisuallyHidden } from "radix-ui";
 import type { ComponentProps, CSSProperties, ReactNode } from "react";
 
 import { cn } from "#/lib/utils";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 
 /* -----------------------------------------------------------------------------
  * Component: Spinner
@@ -27,18 +25,11 @@ function Spinner({ children, className, loading = true, ...props }: SpinnerProps
   }
 
   const spinner = (
-    <span
-      className={cn("relative flex size-4 items-center justify-center", "opacity-60", className)}
-      {...props}
-    >
+    <span className={cn("relative flex size-4 items-center justify-center opacity-60", className)} {...props}>
       {Array.from({ length: SPINNER_COUNT }, (_, index) => (
         <span
           key={index}
-          className={cn(
-            "absolute",
-            "h-full rotate-(--spinner-rotate)",
-            "before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite motion-reduce:before:animate-none",
-          )}
+          className="absolute h-full rotate-(--spinner-rotate) before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite motion-reduce:before:animate-none"
           style={
             {
               "--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
@@ -58,11 +49,11 @@ function Spinner({ children, className, loading = true, ...props }: SpinnerProps
 
   return (
     <span className="relative">
-      <span aria-hidden className={cn("contents", "invisible")}>
+      <span aria-hidden className="invisible contents">
         {children}
       </span>
-      <VisuallyHidden>{children}</VisuallyHidden>
-      <span className={cn("absolute flex items-center justify-center", "inset-0")}>{spinner}</span>
+      <VisuallyHidden.Root>{children}</VisuallyHidden.Root>
+      <span className="absolute inset-0 flex items-center justify-center">{spinner}</span>
     </span>
   );
 }

package/src/components/switch.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { Switch as SwitchPrimitives } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
 
 /* -----------------------------------------------------------------------------
  * Component: Switch
@@ -12,46 +10,26 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 /**
  * @since 0.3.16-canary.0
  */
-type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
+type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root> & {
+  size?: "default" | "sm";
+};
 
 /**
  * @since 0.3.16-canary.0
  */
-function Switch({ className, ...props }: SwitchProps): JSX.Element {
+function Switch({ className, size = "default", ...props }: SwitchProps): JSX.Element {
   return (
     <SwitchPrimitives.Root
       className={cn(
-        "peer group/switch inline-flex h-5 w-9 shrink-0 items-center p-0.75",
-        "rounded-full border border-transparent shadow-xs outline-hidden",
-        "transition-[background-color,box-shadow] duration-200 ease-snappy",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "active:not-disabled:inset-shadow-sm",
-        "focus-visible:ring-3 focus-visible:ring-ring/50",
-        "focus-visible:not-data-checked:border-ring/60",
-        "disabled:opacity-50",
-        "data-checked:bg-primary",
-        "data-checked:focus-visible:ring-primary/20",
-        "dark:data-checked:focus-visible:ring-primary/40",
-        "data-unchecked:bg-input",
-        "dark:data-unchecked:bg-input/80",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all duration-control ease-snappy 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 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-4.5 data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
+      data-size={size}
       data-slot="switch"
       {...props}
     >
       <SwitchPrimitives.Thumb
-        className={cn(
-          "block",
-          "size-3.5",
-          "rounded-full",
-          "bg-background shadow-sm",
-          "pointer-events-none",
-          "transition-transform duration-300 ease-spring",
-          "motion-reduce:transition-none motion-reduce:duration-0",
-          "dark:not-data-checked:bg-foreground",
-          "data-checked:translate-x-3.5",
-          "data-unchecked:translate-x-0",
-        )}
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform duration-control-indicator ease-spring group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-3.5 group-data-[size=sm]/switch:data-checked:translate-x-2.5 rtl:group-data-[size=default]/switch:data-checked:-translate-x-3.5 rtl:group-data-[size=sm]/switch:data-checked:-translate-x-2.5 dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
         data-slot="switch-thumb"
       />
     </SwitchPrimitives.Root>

package/src/components/table.tsx

@@ -16,12 +16,8 @@ type TableProps = ComponentProps<"table">;
  */
 function Table({ className, ...props }: TableProps): JSX.Element {
   return (
-    <div className={cn("relative", "w-full overflow-auto")} data-slot="table-cotainer">
-      <table
-        className={cn("w-full text-sm", "caption-bottom", className)}
-        data-slot="table"
-        {...props}
-      />
+    <div className="relative w-full overflow-x-auto" data-slot="table-container">
+      <table className={cn("w-full caption-bottom text-sm", className)} data-slot="table" {...props} />
     </div>
   );
 }
@@ -39,13 +35,7 @@ type TableHeaderProps = ComponentProps<"thead">;
  * @since 0.3.16-canary.0
  */
 function TableHeader({ className, ...props }: TableHeaderProps): JSX.Element {
-  return (
-    <thead
-      className={cn("*:border-b", "*:has-aria-expanded:bg-transparent", className)}
-      data-slot="table-header"
-      {...props}
-    />
-  );
+  return <thead className={cn("[&_tr]:border-b", className)} data-slot="table-header" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -61,9 +51,7 @@ type TableBodyProps = ComponentProps<"tbody">;
  * @since 0.3.16-canary.0
  */
 function TableBody({ className, ...props }: TableBodyProps): JSX.Element {
-  return (
-    <tbody className={cn("*:last-child:border-0", className)} data-slot="table-body" {...props} />
-  );
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} data-slot="table-body" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -81,12 +69,7 @@ type TableFooterProps = ComponentProps<"tfoot">;
 function TableFooter({ className, ...props }: TableFooterProps): JSX.Element {
   return (
     <tfoot
-      className={cn(
-        "bg-muted/50 font-medium",
-        "*:border-t *:border-b-0",
-        "*:has-aria-expanded:bg-transparent",
-        className,
-      )}
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
       data-slot="table-footer"
       {...props}
     />
@@ -109,12 +92,7 @@ function TableRow({ className, ...props }: TableRowProps): JSX.Element {
   return (
     <tr
       className={cn(
-        "border-b",
-        "transition-colors",
-        "motion-reduce:transition-none",
-        "hover:bg-muted/50",
-        "has-aria-expanded:bg-muted/50",
-        "data-selected:bg-muted",
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-selected:bg-muted",
         className,
       )}
       data-slot="table-row"
@@ -138,7 +116,10 @@ type TableHeadProps = ComponentProps<"th">;
 function TableHead({ className, ...props }: TableHeadProps): JSX.Element {
   return (
     <th
-      className={cn("p-2", "text-left align-middle font-medium", className)}
+      className={cn(
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
+        className,
+      )}
       data-slot="table-head"
       {...props}
     />
@@ -158,7 +139,13 @@ type TableCellProps = ComponentProps<"td">;
  * @since 0.3.16-canary.0
  */
 function TableCell({ className, ...props }: TableCellProps): JSX.Element {
-  return <td className={cn("p-2", "align-middle", className)} data-slot="table-cell" {...props} />;
+  return (
+    <td
+      className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", className)}
+      data-slot="table-cell"
+      {...props}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------
@@ -175,11 +162,7 @@ type TableCaptionProps = ComponentProps<"caption">;
  */
 function TableCaption({ className, ...props }: TableCaptionProps): JSX.Element {
   return (
-    <caption
-      className={cn("mt-4", "text-sm text-muted-foreground", className)}
-      data-slot="table-caption"
-      {...props}
-    />
+    <caption className={cn("mt-4 text-sm text-muted-foreground", className)} data-slot="table-caption" {...props} />
   );
 }
 

package/src/components/tabs.tsx

@@ -1,9 +1,9 @@
-"use client";
-
+import { Tabs as TabsPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { TabsListVariants } from "#/variants/tabs";
+import { tabsListVariants } from "#/variants/tabs";
 
 /* -----------------------------------------------------------------------------
  * Component: Tabs
@@ -17,11 +17,13 @@ type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
 /**
  * @since 0.3.16-canary.0
  */
-function Tabs({ className, ...props }: TabsProps): JSX.Element {
+function Tabs({ className, orientation = "horizontal", ...props }: TabsProps): JSX.Element {
   return (
     <TabsPrimitive.Root
-      className={cn("flex flex-col gap-2", className)}
+      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
+      data-orientation={orientation}
       data-slot="tabs"
+      orientation={orientation}
       {...props}
     />
   );
@@ -34,21 +36,17 @@ function Tabs({ className, ...props }: TabsProps): JSX.Element {
 /**
  * @since 0.3.16-canary.0
  */
-type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
+type TabsListProps = ComponentProps<typeof TabsPrimitive.List> & TabsListVariants;
 
 /**
  * @since 0.3.16-canary.0
  */
-function TabsList({ className, ...props }: TabsListProps): JSX.Element {
+function TabsList({ className, variant = "default", ...props }: TabsListProps): JSX.Element {
   return (
     <TabsPrimitive.List
-      className={cn(
-        "inline-flex w-fit items-center justify-center gap-1 px-1 py-1",
-        "rounded-xl",
-        "bg-muted text-muted-foreground",
-        className,
-      )}
+      className={tabsListVariants({ className, variant })}
       data-slot="tabs-list"
+      data-variant={variant}
       {...props}
     />
   );
@@ -70,21 +68,10 @@ function TabsTrigger({ className, ...props }: TabsTriggerProps): JSX.Element {
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "inline-flex items-center justify-center gap-1.5",
-        "px-2 py-1.5",
-        "rounded-lg",
-        "text-sm font-medium whitespace-nowrap text-muted-foreground",
-        "transition-[color,background-color,box-shadow] duration-150 ease-snappy",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "not-dark:outline-hidden",
-        "hover:not-disabled:text-foreground",
-        "focus-visible:ring-3 focus-visible:ring-ring/50",
-        "disabled:opacity-50",
-        "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring",
-        "data-active:bg-background data-active:text-foreground data-active:shadow-sm",
-        "dark:data-active:bg-input/50",
-        "dark:focus-visible:data-active:outline-1",
-        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className,
       )}
       data-slot="tabs-trigger"
@@ -108,12 +95,7 @@ type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
 function TabsContent({ className, ...props }: TabsContentProps): JSX.Element {
   return (
     <TabsPrimitive.Content
-      className={cn(
-        "mt-2",
-        "rounded-xl ring-ring/50 outline-ring",
-        "focus-visible:ring-4 focus-visible:outline-1",
-        className,
-      )}
+      className={cn("flex-1 text-sm outline-none", className)}
       data-slot="tabs-content"
       {...props}
     />

package/src/components/textarea.tsx

@@ -18,21 +18,7 @@ function Textarea({ className, ...props }: TextareaProps): JSX.Element {
   return (
     <textarea
       className={cn(
-        "flex min-h-16 w-full grow px-3 py-2",
-        "rounded-lg border border-input shadow-xs outline-hidden",
-        "text-base",
-        "transition-[color,box-shadow] duration-150 ease-snappy",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        "placeholder:text-muted-foreground",
-        "hover:not-disabled:not-focus-visible:border-ring/60",
-        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "disabled:opacity-50",
-        "aria-invalid:border-destructive",
-        "focus-within:aria-invalid:ring-destructive/20",
-        "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60",
-        "md:text-sm",
-        "dark:bg-input/30",
-        "dark:focus-within:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       data-slot="textarea"

package/src/components/toggle-group.tsx

@@ -1,15 +1,10 @@
-"use client";
-
-import type { Scope } from "@radix-ui/react-context";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { Context } from "radix-ui/internal";
 import type { ComponentProps, CSSProperties, JSX } from "react";
 
+import type { VariantProps } from "#/lib/utils";
 import { cn } from "#/lib/utils";
-import { createContextScope } from "@radix-ui/react-context";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
-
 import { toggleVariants } from "#/variants/toggle";
-import type { VariantProps } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
  * Context: ToggleGroup
@@ -17,14 +12,17 @@ import type { VariantProps } from "#/lib/utils";
 
 const TOGGLE_GROUP_NAME = "ToggleGroup";
 
-type ScopedProps<P> = P & { __scopeToggleGroup?: Scope };
+type ScopedProps<P> = P & { __scopeToggleGroup?: Context.Scope };
 
-const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);
+const [createToggleGroupContext] = Context.createContextScope(TOGGLE_GROUP_NAME, [
+  ToggleGroupPrimitive.createToggleGroupScope,
+]);
 
-const useToggleGroupScope = createToggleGroupScope();
+const useToggleGroupScope = ToggleGroupPrimitive.createToggleGroupScope();
 
 const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext<
   VariantProps<typeof toggleVariants> & {
+    orientation?: "horizontal" | "vertical";
     spacing?: number;
   }
 >(TOGGLE_GROUP_NAME);
@@ -38,6 +36,7 @@ const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext<
  */
 type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &
   VariantProps<typeof toggleVariants> & {
+    orientation?: "horizontal" | "vertical";
     spacing?: number;
   };
 
@@ -48,22 +47,28 @@ function ToggleGroup({
   __scopeToggleGroup,
   children,
   className,
+  orientation = "horizontal",
   size,
-  spacing = 0,
+  spacing = 2,
   variant,
   ...props
 }: ScopedProps<ToggleGroupProps>): JSX.Element {
   const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
 
   return (
-    <ToggleGroupProvider scope={__scopeToggleGroup} size={size} spacing={spacing} variant={variant}>
+    <ToggleGroupProvider
+      orientation={orientation}
+      scope={__scopeToggleGroup}
+      size={size}
+      spacing={spacing}
+      variant={variant}
+    >
       <ToggleGroupPrimitive.Root
         className={cn(
-          "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]",
-          "rounded-lg",
-          "data-[spacing=default]:data-[variant=outline]:shadow-xs",
+          "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch",
           className,
         )}
+        data-orientation={orientation}
         data-size={size}
         data-slot="toggle-group"
         data-spacing={spacing}
@@ -87,49 +92,40 @@ const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
 /**
  * @since 0.3.16-canary.0
  */
-type ToggleGroupItemProps = ScopedProps<ComponentProps<typeof ToggleGroupPrimitive.Item>>;
+type ToggleGroupItemProps = ScopedProps<
+  ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>;
 
 /**
  * @since 0.3.16-canary.0
  */
 function ToggleGroupItem({
   __scopeToggleGroup,
-  children,
   className,
+  size = "default",
+  variant = "default",
   ...props
 }: ToggleGroupItemProps): JSX.Element {
-  const { size, spacing, variant } = useToggleGroupContext(
-    TOGGLE_GROUP_ITEM_NAME,
-    __scopeToggleGroup,
-  );
+  const context = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
   const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
 
   return (
     <ToggleGroupPrimitive.Item
       className={cn(
-        "w-auto min-w-0 shrink-0 px-3",
-        "focus:z-10",
-        "focus-visible:z-10",
-        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none",
-        "data-[spacing=0]:first:rounded-l-lg",
-        "data-[spacing=0]:last:rounded-r-lg",
-        "data-[spacing=0]:data-[variant=outline]:border-l-0",
-        "data-[spacing=0]:data-[variant=outline]:first:border-l",
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t data-on:bg-muted",
         toggleVariants({
           className,
-          size,
-          variant,
+          size: context.size ?? size,
+          variant: context.variant ?? variant,
         }),
       )}
-      data-size={size}
+      data-size={context.size ?? size}
       data-slot="toggle-group-item"
-      data-spacing={spacing}
-      data-variant={variant}
+      data-spacing={context.spacing}
+      data-variant={context.variant ?? variant}
       {...toggleGroupScope}
       {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
+    />
   );
 }
 

package/src/components/toggle.tsx

@@ -1,10 +1,7 @@
-"use client";
-
-import type { ToggleVariants } from "#/variants/toggle";
+import { Toggle as TogglePrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-
+import type { ToggleVariants } from "#/variants/toggle";
 import { toggleVariants } from "#/variants/toggle";
 
 /* -----------------------------------------------------------------------------
@@ -19,15 +16,9 @@ interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, Toggl
 /**
  * @since 0.3.16-canary.0
  */
-function Toggle({ children, className, size, variant, ...props }: ToggleProps): JSX.Element {
+function Toggle({ className, size, variant, ...props }: ToggleProps): JSX.Element {
   return (
-    <TogglePrimitive.Root
-      className={toggleVariants({ className, size, variant })}
-      data-slot="toggle"
-      {...props}
-    >
-      {children}
-    </TogglePrimitive.Root>
+    <TogglePrimitive.Root className={toggleVariants({ className, size, variant })} data-slot="toggle" {...props} />
   );
 }