@softize/opus 22.2.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

@@ -1,12 +1,11 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
 import { controlHeight, type ControlSize } from "./control.ts";
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
-// não tinha, e uma fileira densa ficava com o segmento 0.25rem mais alto
+// não tinha, e uma fileira densa ficava com as abas 0.25rem mais altas
 // que os irmãos. O tamanho flui pra TabsList via contexto (a altura é dela) e a medida é a
 // da escala de control.ts.
 type TabsSize = Extract<ControlSize, "default" | "sm">;
@@ -18,9 +17,6 @@ const TabsFramedContext = React.createContext(false);
 type TabsOrientation = "horizontal" | "vertical";
 const TabsOrientationContext =
   React.createContext<TabsOrientation>("horizontal");
-const TabsListVariantContext = React.createContext<"default" | "line">(
-  "default",
-);
 
 function Tabs({
   className,
@@ -62,87 +58,64 @@ function Tabs({
   );
 }
 
-const tabsListVariants = cva(
-  // A altura horizontal entra como classe simples no componente (abaixo), para que um
-  // `className="h-full"` do consumidor consiga substituí-la via tailwind-merge. Seletores
-  // condicionais por data-size têm especificidade maior e tornavam a altura inextensível.
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[0.1875rem] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:p-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
 function TabsList({
   className,
   children,
   style,
-  variant = "default",
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
   // O size vem do <Tabs> (contexto) — a altura mora aqui, na list.
   const size = React.useContext(TabsSizeContext);
   const orientation = React.useContext(TabsOrientationContext);
   const distribution = React.useContext(TabsDistributionContext);
-  const normalizedVariant = variant ?? "default";
-  const hasHorizontalLine =
-    normalizedVariant === "line" && orientation === "horizontal";
+  const framed = React.useContext(TabsFramedContext);
+  const hasHorizontalLine = orientation === "horizontal";
   return (
-    <TabsListVariantContext.Provider value={normalizedVariant}>
-      <TabsPrimitive.List
-        data-slot="tabs-list"
-        data-variant={normalizedVariant}
-        data-size={size}
-        data-distribution={distribution}
-        className={cn(
-          tabsListVariants({ variant: normalizedVariant }),
-          controlHeight[size],
-          distribution === "equal" && orientation === "horizontal" && "w-full",
-          className,
-        )}
-        style={{
-          ...(hasHorizontalLine
-            ? {
-                position: "relative",
-                width: "100%",
-                height: "auto",
-                justifyContent: "flex-start",
-              }
-            : {}),
-          ...style,
-        }}
-        {...props}
-      >
-        {hasHorizontalLine && (
-          <span
-            aria-hidden="true"
-            data-slot="tabs-line"
-            style={{
-              position: "absolute",
-              insetInline: "0rem",
-              bottom: 0,
-              borderBottomWidth: "0.0625rem",
-              borderBottomStyle: "solid",
-              borderBottomColor: "var(--border)",
-              pointerEvents: "none",
-            }}
-          />
-        )}
-        {children}
-      </TabsPrimitive.List>
-    </TabsListVariantContext.Provider>
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-size={size}
+      data-distribution={distribution}
+      className={cn(
+        "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={{
+        ...(hasHorizontalLine
+          ? {
+              position: "relative",
+              width: "100%",
+              height: "auto",
+              justifyContent: "flex-start",
+            }
+          : {}),
+        ...style,
+      }}
+      {...props}
+    >
+      {hasHorizontalLine && (
+        <span
+          aria-hidden="true"
+          data-slot="tabs-line"
+          style={{
+            position: "absolute",
+            insetInline: "0rem",
+            bottom: 0,
+            borderBottomWidth: "0.0625rem",
+            borderBottomStyle: "solid",
+            borderBottomColor: "var(--border)",
+            pointerEvents: "none",
+          }}
+        />
+      )}
+      {children}
+    </TabsPrimitive.List>
   );
 }
 
-function TabsTrigger({
+function TabsListItem({
   className,
   style,
   icon,
@@ -152,17 +125,16 @@ function TabsTrigger({
   /** Ícone decorativo antes do rótulo. Em uma aba sem texto, declare também `aria-label`. */
   icon?: React.ReactNode;
 }) {
-  const variant = React.useContext(TabsListVariantContext);
   const orientation = React.useContext(TabsOrientationContext);
   const size = React.useContext(TabsSizeContext);
   const distribution = React.useContext(TabsDistributionContext);
   const framed = React.useContext(TabsFramedContext);
-  const hasHorizontalLine = variant === "line" && orientation === "horizontal";
+  const hasHorizontalLine = orientation === "horizontal";
   const content = (
     <>
       {icon !== undefined && (
         <span
-          data-slot="tabs-trigger-icon"
+          data-slot="tabs-list-item-icon"
           aria-hidden="true"
           className="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4"
         >
@@ -174,17 +146,15 @@ function TabsTrigger({
   );
   return (
     <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
+      data-slot="tabs-list-item"
       // px: altura e indicador compensam a hairline do contêiner (um pixel físico, não escala).
       className={cn(
-        "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-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "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-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground dark:data-[state=active]:border-transparent dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-1px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 data-[state=active]:after:opacity-100",
         hasHorizontalLine &&
           cn(
-            "group/tab-trigger 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",
+            "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-1" : "pb-1.5",
           ),
         className,
       )}
@@ -202,9 +172,9 @@ function TabsTrigger({
     >
       {hasHorizontalLine ? (
         <span
-          data-slot="tabs-trigger-content"
+          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-trigger: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],
           )}
@@ -218,17 +188,17 @@ function TabsTrigger({
   );
 }
 
-function TabsContent({
+function TabsPanel({
   className,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
-      data-slot="tabs-content"
+      data-slot="tabs-panel"
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsListItem, TabsPanel };

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,
+};