@softize/opus 23.0.0 → 24.0.0

package/src/ui/components/primitives/switch.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Switch as SwitchPrimitive } from "radix-ui"
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import type { ControlSize } from './control.ts'
+import { cn } from "../../lib/cn.ts";
+import type { ControlSize } from "./control.ts";
 
 /** `size` usa os nomes da escala de control.ts; a chave é um trilho (não uma linha), então a
  *  medida é a do glifo daquele tamanho: `sm` acompanha o svg de um controle sm (0.875rem). */
@@ -11,15 +11,15 @@ function Switch({
   size = "default",
   ...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-  size?: Extract<ControlSize, "sm" | "default">
+  size?: Extract<ControlSize, "sm" | "default">;
 }) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
-        className
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-interaction-selected",
+        className,
       )}
       {...props}
     >
@@ -27,11 +27,11 @@ function Switch({
         data-slot="switch-thumb"
         // px: o percurso do thumb desconta a borda (um pixel de cada lado) no calc do translate.
         className={cn(
-          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
         )}
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };

package/src/ui/components/primitives/table.tsx

@@ -1,18 +1,23 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
-type TableVariant = 'plain' | 'framed'
-const TableVariantContext = React.createContext<TableVariant>('plain')
+type TableVariant = "plain" | "framed";
+const TableVariantContext = React.createContext<TableVariant>("plain");
 
 export interface TableProps extends React.ComponentProps<"table"> {
   /** `framed` aplica a moldura canônica de datagrid no contêiner da tabela. */
-  variant?: TableVariant
+  variant?: TableVariant;
   /** Classes do contêiner responsável pela rolagem e pela moldura da tabela. */
-  containerClassName?: string
+  containerClassName?: string;
 }
 
-function Table({ className, containerClassName, variant = 'plain', ...props }: TableProps) {
+function Table({
+  className,
+  containerClassName,
+  variant = "plain",
+  ...props
+}: TableProps) {
   return (
     <TableVariantContext.Provider value={variant}>
       <div
@@ -20,7 +25,7 @@ function Table({ className, containerClassName, variant = 'plain', ...props }: T
         data-variant={variant}
         className={cn(
           "relative w-full overflow-x-auto",
-          variant === 'framed' && 'rounded-lg border border-border',
+          variant === "framed" && "rounded-lg border border-border",
           containerClassName,
         )}
       >
@@ -31,22 +36,22 @@ function Table({ className, containerClassName, variant = 'plain', ...props }: T
         />
       </div>
     </TableVariantContext.Provider>
-  )
+  );
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  const variant = React.useContext(TableVariantContext)
+  const variant = React.useContext(TableVariantContext);
   return (
     <thead
       data-slot="table-header"
       className={cn(
         "[&_tr]:border-b [&_tr:hover]:bg-transparent",
-        variant === 'framed' && 'bg-muted/30 dark:bg-input/30',
+        variant === "framed" && "bg-control",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
@@ -56,7 +61,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
       className={cn("[&_tr:last-child]:border-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
@@ -65,11 +70,11 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
       data-slot="table-footer"
       className={cn(
         "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
@@ -77,12 +82,12 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
-        className
+        "border-b transition-colors hover:bg-interaction-hover has-aria-expanded:bg-interaction-selected data-[state=selected]:bg-interaction-selected",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
@@ -91,11 +96,11 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
       data-slot="table-head"
       className={cn(
         "h-10 px-3 text-left align-middle font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableCell({ className, ...props }: React.ComponentProps<"td">) {
@@ -104,11 +109,11 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
       data-slot="table-cell"
       className={cn(
         "px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[0.125rem]",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableCaption({
@@ -121,7 +126,7 @@ function TableCaption({
       className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -133,4 +138,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};

package/src/ui/components/primitives/tabs.tsx

@@ -68,6 +68,7 @@ function TabsList({
   const size = React.useContext(TabsSizeContext);
   const orientation = React.useContext(TabsOrientationContext);
   const distribution = React.useContext(TabsDistributionContext);
+  const framed = React.useContext(TabsFramedContext);
   const hasHorizontalLine = orientation === "horizontal";
   return (
     <TabsPrimitive.List
@@ -78,6 +79,7 @@ function TabsList({
         "group/tabs-list inline-flex w-fit items-center justify-center gap-1 rounded-none bg-transparent p-0 text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
         controlHeight[size],
         distribution === "equal" && orientation === "horizontal" && "w-full",
+        framed && orientation === "horizontal" && "px-1 pt-1",
         className,
       )}
       style={{
@@ -152,7 +154,7 @@ function TabsListItem({
         hasHorizontalLine &&
           cn(
             "group/tab-list-item rounded-none px-0 py-0 hover:bg-transparent active:brightness-100 data-[state=active]:bg-transparent data-[state=active]:hover:bg-transparent",
-            framed ? "pb-2" : "pb-1.5",
+            framed ? "pb-1" : "pb-1.5",
           ),
         className,
       )}
@@ -172,7 +174,7 @@ function TabsListItem({
         <span
           data-slot="tabs-list-item-content"
           className={cn(
-            "inline-flex items-center justify-center gap-1.5 rounded-md px-3 transition-colors hover:bg-accent hover:text-accent-foreground active:brightness-90 group-data-[state=active]/tab-list-item:text-foreground",
+            "inline-flex items-center justify-center gap-1.5 rounded-md px-3 transition-colors hover:bg-interaction-hover hover:text-accent-foreground active:bg-interaction-pressed group-data-[state=active]/tab-list-item:text-foreground",
             distribution === "equal" && "w-full",
             controlHeight[size],
           )}

package/src/ui/components/primitives/textarea.tsx

@@ -1,18 +1,18 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-muted/30 px-3 py-2 text-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
-        className
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-control px-3 py-2 text-sm transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };

package/src/ui/components/primitives/toggle-group-context.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import type { ControlShape } from "./control.ts";
+
+type ToggleGroupMode = "connected" | "spaced" | "divided" | "segmented";
+type ToggleGroupDistribution = "content" | "equal";
+
+type ToggleGroupContextValue = {
+  mode: ToggleGroupMode;
+  orientation: "horizontal" | "vertical";
+  variant?: "default" | "outline" | null;
+  size?: "default" | "sm" | "lg" | null;
+  shape?: ControlShape | null;
+};
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(
+  null,
+);
+
+export {
+  ToggleGroupContext,
+  type ToggleGroupDistribution,
+  type ToggleGroupMode,
+};

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

@@ -1,99 +1,141 @@
-import * as React from "react"
-import { type VariantProps } from "class-variance-authority"
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import type { ControlShape } from './control.ts'
-import { toggleVariants } from './toggle.tsx'
+import { cn } from "../../lib/cn.ts";
+import type { ControlShape } from "./control.ts";
+import { Separator } from "./separator.tsx";
+import {
+  ToggleGroupContext,
+  type ToggleGroupDistribution,
+  type ToggleGroupMode,
+} from "./toggle-group-context.ts";
+import { toggleVariants } from "./toggle.tsx";
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    shape?: ControlShape
-  }
->({
-  size: "default",
-  variant: "default",
-  spacing: 0,
-  shape: "default",
-})
+const horizontalInactiveSegmentDivider = [
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:relative",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:ml-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:absolute",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-left-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:top-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:h-4",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:w-[0.0625rem]",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-translate-y-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:bg-muted-foreground/35",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:content-['']",
+];
+
+const verticalInactiveSegmentDivider = [
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:relative",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:mt-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:absolute",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-top-0.5",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:left-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:h-[0.0625rem]",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:w-4",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:-translate-x-1/2",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:bg-muted-foreground/35",
+  "[&>[data-slot=toggle-group-item][data-state=off]+[data-slot=toggle-group-item][data-state=off]]:before:content-['']",
+];
 
-type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
   VariantProps<typeof toggleVariants> & {
-    'data-slot'?: string
-    'data-state'?: string
-  }
+    mode?: ToggleGroupMode;
+    distribution?: ToggleGroupDistribution;
+    framed?: boolean;
+    shape?: ControlShape;
+  };
 
 function ToggleGroup({
   className,
   variant,
   size,
-  spacing = 0,
+  mode = "connected",
+  distribution = "content",
+  framed = false,
+  orientation = "horizontal",
   shape = "default",
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    shape?: ControlShape
-  }) {
+}: ToggleGroupProps) {
+  const effectiveSize = size ?? "default";
+  const controls = React.Children.toArray(children);
+  const content =
+    mode === "divided"
+      ? controls.flatMap((child, index) => {
+          const childKey = React.isValidElement(child) ? child.key : index;
+          return [
+            ...(index === 0
+              ? []
+              : [
+                  <Separator
+                    key={`toggle-group-separator-${childKey ?? index}`}
+                    data-slot="toggle-group-separator"
+                    orientation={
+                      orientation === "horizontal" ? "vertical" : "horizontal"
+                    }
+                    className="m-0! self-center bg-input"
+                    style={
+                      orientation === "horizontal"
+                        ? {
+                            flex: "none",
+                            width: "0.0625rem",
+                            height: "1.25rem",
+                          }
+                        : {
+                            flex: "none",
+                            width: "1.25rem",
+                            height: "0.0625rem",
+                          }
+                    }
+                  />,
+                ]),
+            child,
+          ];
+        })
+      : children;
+
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
+      data-size={effectiveSize}
+      data-mode={mode}
       data-shape={shape}
-      style={{ "--gap": spacing } as React.CSSProperties}
+      data-distribution={distribution}
+      data-framed={framed}
+      orientation={orientation}
       className={cn(
-        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[shape=pill]:rounded-full",
-        className
+        "group/toggle-group flex w-fit items-stretch",
+        orientation === "vertical" && "flex-col",
+        mode === "connected" && "gap-0",
+        (mode === "spaced" || mode === "divided") && "gap-1",
+        mode === "segmented" &&
+          "gap-0.5 rounded-lg bg-interaction-hover p-0.5 text-muted-foreground",
+        mode === "segmented" &&
+          (orientation === "horizontal"
+            ? horizontalInactiveSegmentDivider
+            : verticalInactiveSegmentDivider),
+        distribution === "equal" &&
+          "w-full [&>[data-slot=toggle-group-item]]:min-w-0 [&>[data-slot=toggle-group-item]]:w-full [&>[data-slot=toggle-group-item]]:flex-1",
+        framed && "rounded-xl border p-1",
+        shape === "pill" && "rounded-full",
+        className,
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing, shape }}>
-        {children}
+      <ToggleGroupContext.Provider
+        value={{ mode, orientation, variant, size: effectiveSize, shape }}
+      >
+        {content}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
-  )
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  shape,
-  'data-slot': _composedSlot,
-  'data-state': _composedState,
-  ...props
-}: ToggleGroupItemProps) {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      data-item-shape={shape}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-          shape: shape ?? context.shape,
-        }),
-        "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-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
-        "group-data-[shape=pill]/toggle-group:data-[spacing=0]:first:rounded-l-full group-data-[shape=pill]/toggle-group:data-[spacing=0]:last:rounded-r-full",
-        "data-[item-shape=pill]:data-[spacing=0]:rounded-full",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
+  );
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export {
+  ToggleGroup,
+  type ToggleGroupDistribution,
+  type ToggleGroupMode,
+  type ToggleGroupProps,
+};

package/src/ui/components/primitives/toggle.tsx

@@ -1,13 +1,17 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Toggle as TogglePrimitive } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Toggle as TogglePrimitive,
+  ToggleGroup as ToggleGroupPrimitive,
+} from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import { controlHeight, focusRing } from './control.ts'
+import { cn } from "../../lib/cn.ts";
+import { controlHeight, focusRing } from "./control.ts";
+import { ToggleGroupContext } from "./toggle-group-context.ts";
 
 const toggleVariants = cva(
   [
-    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-context-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-interaction-hover hover:text-muted-foreground active:bg-interaction-pressed disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=on]:bg-interaction-selected data-[state=on]:text-accent-foreground dark:aria-invalid:ring-context-danger/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     focusRing,
   ],
   {
@@ -15,7 +19,7 @@ const toggleVariants = cva(
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground data-[state=on]:bg-muted/50 data-[state=on]:text-foreground",
+          "border border-input bg-transparent text-muted-foreground hover:bg-interaction-hover hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-interaction-selected data-[state=on]:text-foreground",
       },
       // Alturas da escala de control.ts (`sm` = o mesmo h-8 de Button e Select).
       size: {
@@ -24,8 +28,8 @@ const toggleVariants = cva(
         lg: `${controlHeight.lg} min-w-10 px-2.5`,
       },
       shape: {
-        default: '',
-        pill: 'rounded-full',
+        default: "",
+        pill: "rounded-full",
       },
     },
     defaultVariants: {
@@ -33,25 +37,87 @@ const toggleVariants = cva(
       size: "default",
       shape: "default",
     },
-  }
-)
+  },
+);
+
+type ToggleProps = (
+  | React.ComponentProps<typeof TogglePrimitive.Root>
+  | React.ComponentProps<typeof ToggleGroupPrimitive.Item>
+) &
+  VariantProps<typeof toggleVariants> & {
+    "data-slot"?: string;
+    "data-state"?: string;
+  };
 
 function Toggle({
   className,
   variant,
   size,
   shape,
+  "data-slot": _composedSlot,
+  "data-state": _composedState,
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}: ToggleProps) {
+  const group = React.useContext(ToggleGroupContext);
+  const effectiveVariant = group?.variant ?? variant;
+  const effectiveSize = group?.size ?? size;
+  const effectiveShape = shape ?? group?.shape;
+
+  if (group !== null) {
+    const itemProps = props as React.ComponentProps<
+      typeof ToggleGroupPrimitive.Item
+    >;
+    if (typeof itemProps.value !== "string" || itemProps.value.length === 0) {
+      throw new Error("Toggle dentro de ToggleGroup exige value.");
+    }
+
+    return (
+      <ToggleGroupPrimitive.Item
+        data-slot="toggle-group-item"
+        data-variant={effectiveVariant}
+        data-size={effectiveSize}
+        data-mode={group.mode}
+        data-item-shape={shape}
+        className={cn(
+          toggleVariants({
+            variant: effectiveVariant,
+            size: effectiveSize,
+            shape: effectiveShape,
+          }),
+          "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+          group.mode === "connected" &&
+            group.orientation === "horizontal" && [
+              "rounded-none shadow-none first:rounded-l-md last:rounded-r-md data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+              "group-data-[shape=pill]/toggle-group:first:rounded-l-full group-data-[shape=pill]/toggle-group:last:rounded-r-full",
+              "data-[item-shape=pill]:rounded-full",
+            ],
+          group.mode === "connected" &&
+            group.orientation === "vertical" && [
+              "rounded-none shadow-none first:rounded-t-md last:rounded-b-md data-[variant=outline]:border-t-0 data-[variant=outline]:first:border-t",
+              "group-data-[shape=pill]/toggle-group:first:rounded-t-full group-data-[shape=pill]/toggle-group:last:rounded-b-full",
+            ],
+          (group.mode === "spaced" || group.mode === "divided") &&
+            "group-data-[shape=pill]/toggle-group:rounded-full",
+          group.mode === "segmented" &&
+            "rounded-md text-muted-foreground hover:bg-interaction-selected hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-card data-[state=on]:text-card-foreground data-[state=on]:shadow-sm group-data-[shape=pill]/toggle-group:rounded-full",
+          group.mode === "segmented" && effectiveSize === "sm" && "h-7",
+          group.mode === "segmented" && effectiveSize === "default" && "h-8",
+          group.mode === "segmented" && effectiveSize === "lg" && "h-9",
+          className,
+        )}
+        {...itemProps}
+      />
+    );
+  }
+
   return (
     <TogglePrimitive.Root
       data-slot="toggle"
       data-shape={shape}
       className={cn(toggleVariants({ variant, size, shape, className }))}
-      {...props}
+      {...(props as React.ComponentProps<typeof TogglePrimitive.Root>)}
     />
-  )
+  );
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, type ToggleProps, toggleVariants };