refactor(variants): separate grouped styles into individual ones to generate valid style outputs.

Author: honghuangdc

src/variants/accordion.ts

@@ -13,7 +13,7 @@ export const accordionVariants = tv({
     description: '',
     trigger: [
       `flex-1 flex items-center justify-start font-medium transition-all-200 bg-transparent`,
-      `focus-visible:(outline-none ring-2 ring-offset-2 ring-offset-background ring-primary)`,
+      `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary`,
       `hover:underline [&[data-state=open]>.trigger-icon]:rotate-180`
     ],
     triggerLeadingIcon: `shrink-0`,

src/variants/breadcrumb.ts

@@ -9,7 +9,7 @@ export const breadcrumbVariants = tv({
     page: 'font-normal text-foreground',
     separator: 'text-muted-foreground flex-shrink-0 list-none',
     ellipsis: 'flex items-center justify-center',
-    link: 'hover:text-foreground transition-colors-200 rounded-sm focus-visible:(outline-none ring-2 ring-offset-2 ring-offset-background ring-primary)'
+    link: 'hover:text-foreground transition-colors-200 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-primary'
   },
   variants: {
     size: {

src/variants/button.ts

@@ -5,8 +5,8 @@ import type { VariantProps } from 'tailwind-variants';
 export const buttonVariants = tv({
   base: [
     'inline-flex items-center justify-center font-medium',
-    'focus-visible:(outline-none ring-2 ring-offset-2 ring-offset-background)',
-    'data-[disabled]:(cursor-not-allowed opacity-50)'
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
   ],
   variants: {
     color: {
@@ -173,42 +173,42 @@ export const buttonVariants = tv({
     {
       color: 'primary',
       variant: 'plain',
-      class: 'hover:(border-primary text-primary)'
+      class: 'hover:border-primary hover:text-primary'
     },
     {
       color: 'destructive',
       variant: 'plain',
-      class: 'hover:(border-destructive text-destructive)'
+      class: 'hover:border-destructive hover:text-destructive'
     },
     {
       color: 'success',
       variant: 'plain',
-      class: 'hover:(border-success text-success)'
+      class: 'hover:border-success hover:text-success'
     },
     {
       color: 'warning',
       variant: 'plain',
-      class: 'hover:(border-warning text-warning)'
+      class: 'hover:border-warning hover:text-warning'
     },
     {
       color: 'info',
       variant: 'plain',
-      class: 'hover:(border-info text-info)'
+      class: 'hover:border-info hover:text-info'
     },
     {
       color: 'carbon',
       variant: 'plain',
-      class: 'hover:(border-carbon text-carbon)'
+      class: 'hover:border-carbon hover:text-carbon'
     },
     {
       color: 'secondary',
       variant: 'plain',
-      class: 'hover:(border-secondary-foreground text-secondary-foreground)'
+      class: 'hover:border-secondary-foreground hover:text-secondary-foreground'
     },
     {
       color: 'accent',
       variant: 'plain',
-      class: 'hover:(border-accent-foreground text-accent-foreground)'
+      class: 'hover:border-accent-foreground hover:text-accent-foreground'
     },
     {
       color: 'primary',

src/variants/checkbox.ts

@@ -8,36 +8,36 @@ export const checkboxVariants = tv({
     root: 'inline-flex items-center',
     control: [
       'peer shrink-0 border shadow',
-      'focus-visible:(outline-none ring-2 ring-offset-2 ring-offset-background) disabled:(cursor-not-allowed opacity-50)'
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50'
     ],
     indicator: 'size-full flex items-center justify-center text-current',
     label: ''
   },
   variants: {
     color: {
       primary: {
-        control: `border-primary focus-visible:ring-primary data-[state=checked]:(bg-primary text-primary-foreground) data-[state=indeterminate]:(bg-primary text-primary-foreground)`
+        control: `border-primary focus-visible:ring-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground`
       },
       destructive: {
-        control: `border-destructive focus-visible:ring-destructive data-[state=checked]:(bg-destructive text-destructive-foreground) data-[state=indeterminate]:(bg-destructive text-destructive-foreground)`
+        control: `border-destructive focus-visible:ring-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground data-[state=indeterminate]:bg-destructive data-[state=indeterminate]:text-destructive-foreground`
       },
       success: {
-        control: `border-success focus-visible:ring-success data-[state=checked]:(bg-success text-success-foreground) data-[state=indeterminate]:(bg-success text-success-foreground)`
+        control: `border-success focus-visible:ring-success data-[state=checked]:bg-success data-[state=checked]:text-success-foreground data-[state=indeterminate]:bg-success data-[state=indeterminate]:text-success-foreground`
       },
       warning: {
-        control: `border-warning focus-visible:ring-warning data-[state=checked]:(bg-warning text-warning-foreground) data-[state=indeterminate]:(bg-warning text-warning-foreground)`
+        control: `border-warning focus-visible:ring-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-foreground data-[state=indeterminate]:bg-warning data-[state=indeterminate]:text-warning-foreground`
       },
       info: {
-        control: `border-info focus-visible:ring-info data-[state=checked]:(bg-info text-info-foreground) data-[state=indeterminate]:(bg-info text-info-foreground)`
+        control: `border-info focus-visible:ring-info data-[state=checked]:bg-info data-[state=checked]:text-info-foreground data-[state=indeterminate]:bg-info data-[state=indeterminate]:text-info-foreground`
       },
       carbon: {
-        control: `border-carbon focus-visible:ring-carbon data-[state=checked]:(bg-carbon text-carbon-foreground) data-[state=indeterminate]:(bg-carbon text-carbon-foreground)`
+        control: `border-carbon focus-visible:ring-carbon data-[state=checked]:bg-carbon data-[state=checked]:text-carbon-foreground data-[state=indeterminate]:bg-carbon data-[state=indeterminate]:text-carbon-foreground`
       },
       secondary: {
-        control: `border-secondary-foreground/50 focus-visible:ring-secondary-foreground/20 data-[state=checked]:(bg-secondary-foreground/5 text-secondary-foreground) data-[state=indeterminate]:(bg-secondary-foreground/5 text-secondary-foreground)`
+        control: `border-secondary-foreground/50 focus-visible:ring-secondary-foreground/20 data-[state=checked]:bg-secondary-foreground/5 data-[state=checked]:text-secondary-foreground data-[state=indeterminate]:bg-secondary-foreground/5 data-[state=indeterminate]:text-secondary-foreground`
       },
       accent: {
-        control: `border-accent-foreground/50 focus-visible:ring-accent-foreground/20 data-[state=checked]:(bg-accent-foreground/5 text-accent-foreground) data-[state=indeterminate]:(bg-accent-foreground/5 text-accent-foreground)`
+        control: `border-accent-foreground/50 focus-visible:ring-accent-foreground/20 data-[state=checked]:bg-accent-foreground/5 data-[state=checked]:text-accent-foreground data-[state=indeterminate]:bg-accent-foreground/5 data-[state=indeterminate]:text-accent-foreground`
       }
     },
     size: {
@@ -108,7 +108,7 @@ export const checkboxCardVariants = tv({
     description: 'text-muted-foreground',
     control: [
       'peer shrink-0 border shadow',
-      'focus-visible:(outline-none ring-2 ring-offset-2 ring-offset-background) disabled:(cursor-not-allowed opacity-50)',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
       'order-1 after:absolute after:inset-0 after:content-empty'
     ],
     indicator: 'size-full flex items-center justify-center text-current'
@@ -117,35 +117,35 @@ export const checkboxCardVariants = tv({
     color: {
       primary: {
         root: 'data-[state=checked]:border-primary',
-        control: `border-primary focus-visible:ring-primary data-[state=checked]:(bg-primary text-primary-foreground) data-[state=indeterminate]:(bg-primary text-primary-foreground)`
+        control: `border-primary focus-visible:ring-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground`
       },
       destructive: {
         root: 'data-[state=checked]:border-destructive',
-        control: `border-destructive focus-visible:ring-destructive data-[state=checked]:(bg-destructive text-destructive-foreground) data-[state=indeterminate]:(bg-destructive text-destructive-foreground)`
+        control: `border-destructive focus-visible:ring-destructive data-[state=checked]:bg-destructive data-[state=checked]:text-destructive-foreground data-[state=indeterminate]:bg-destructive data-[state=indeterminate]:text-destructive-foreground`
       },
       success: {
         root: 'data-[state=checked]:border-success',
-        control: `border-success focus-visible:ring-success data-[state=checked]:(bg-success text-success-foreground) data-[state=indeterminate]:(bg-success text-success-foreground)`
+        control: `border-success focus-visible:ring-success data-[state=checked]:bg-success data-[state=checked]:text-success-foreground data-[state=indeterminate]:bg-success data-[state=indeterminate]:text-success-foreground`
       },
       warning: {
         root: 'data-[state=checked]:border-warning',
-        control: `border-warning focus-visible:ring-warning data-[state=checked]:(bg-warning text-warning-foreground) data-[state=indeterminate]:(bg-warning text-warning-foreground)`
+        control: `border-warning focus-visible:ring-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-foreground data-[state=indeterminate]:bg-warning data-[state=indeterminate]:text-warning-foreground`
       },
       info: {
         root: 'data-[state=checked]:border-info',
-        control: `border-info focus-visible:ring-info data-[state=checked]:(bg-info text-info-foreground) data-[state=indeterminate]:(bg-info text-info-foreground)`
+        control: `border-info focus-visible:ring-info data-[state=checked]:bg-info data-[state=checked]:text-info-foreground data-[state=indeterminate]:bg-info data-[state=indeterminate]:text-info-foreground`
       },
       carbon: {
         root: 'data-[state=checked]:border-carbon',
-        control: `border-carbon focus-visible:ring-carbon data-[state=checked]:(bg-carbon text-carbon-foreground) data-[state=indeterminate]:(bg-carbon text-carbon-foreground)`
+        control: `border-carbon focus-visible:ring-carbon data-[state=checked]:bg-carbon data-[state=checked]:text-carbon-foreground data-[state=indeterminate]:bg-carbon data-[state=indeterminate]:text-carbon-foreground`
       },
       secondary: {
         root: 'data-[state=checked]:border-secondary-foreground/50',
-        control: `border-secondary-foreground/50 focus-visible:ring-secondary-foreground/20 data-[state=checked]:(bg-secondary-foreground/5 text-secondary-foreground) data-[state=indeterminate]:(bg-secondary-foreground/5 text-secondary-foreground)`
+        control: `border-secondary-foreground/50 focus-visible:ring-secondary-foreground/20 data-[state=checked]:bg-secondary-foreground/5 data-[state=checked]:text-secondary-foreground data-[state=indeterminate]:bg-secondary-foreground/5 data-[state=indeterminate]:text-secondary-foreground`
       },
       accent: {
         root: 'data-[state=checked]:border-accent-foreground/50',
-        control: `border-accent-foreground/50 focus-visible:ring-accent-foreground/20 data-[state=checked]:(bg-accent-foreground/5 text-accent-foreground) data-[state=indeterminate]:(bg-accent-foreground/5 text-accent-foreground)`
+        control: `border-accent-foreground/50 focus-visible:ring-accent-foreground/20 data-[state=checked]:bg-accent-foreground/5 data-[state=checked]:text-accent-foreground data-[state=indeterminate]:bg-accent-foreground/5 data-[state=indeterminate]:text-accent-foreground`
       }
     },
     size: {

src/variants/combobox.ts

@@ -9,7 +9,7 @@ export const comboboxVariants = tv({
     empty: `text-center`,
     content: [
       `z-50 w-[--soybean-combobox-trigger-width] rounded-md border bg-popover text-popover-foreground shadow-md outline-none`,
-      `data-[state=open]:(animate-in fade-in-0 zoom-in-95) data-[state=closed]:(animate-out fade-out-0 zoom-out-95)`,
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95`,
       `data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`
     ],
     list: `overflow-y-auto overflow-x-hidden`,
@@ -18,11 +18,11 @@ export const comboboxVariants = tv({
     inputWrapper: `flex items-center`,
     input: [
       `flex w-full bg-transparent transition-colors-200`,
-      `placeholder:text-muted-foreground outline-none disabled:(cursor-not-allowed opacity-50)`
+      `placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50`
     ],
     item: [
       `relative flex justify-start items-center cursor-default select-none rounded-sm outline-none`,
-      `data-[highlighted]:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)`
+      `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`
     ],
     itemIcon: 'shrink-0',
     itemIndicator: 'ml-auto',

src/variants/command.ts

@@ -5,7 +5,7 @@ export const commandVariants = tv({
   slots: {
     root: `flex w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground`,
     inputRoot: 'group flex items-center border-b',
-    inputControl: `flex w-full rounded-md bg-transparent outline-none placeholder:text-muted-foreground disabled:(cursor-not-allowed opacity-50)`,
+    inputControl: `flex w-full rounded-md bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50`,
     inputIcon: `shrink-0 opacity-50`,
     inputClearable: 'hidden group-hover:block size-1em cursor-pointer opacity-50 hover:opacity-100',
     empty: `text-center`,
@@ -14,7 +14,7 @@ export const commandVariants = tv({
     groupLabel: `font-medium text-muted-foreground`,
     item: [
       `relative flex cursor-default select-none items-center rounded-sm outline-none`,
-      `data-[highlighted]:(bg-accent text-accent-foreground) data-[disabled]:(pointer-events-none opacity-50)`
+      `data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`
     ],
     itemLabel: '',
     itemIcon: 'shrink-0',

src/variants/dialog.ts

@@ -5,13 +5,13 @@ export const dialogVariants = tv({
   slots: {
     overlay: [
       `fixed inset-0 z-50 bg-black/80`,
-      `data-[state=open]:(animate-in fade-in-0)`,
-      `data-[state=closed]:(animate-out fade-out-0)`
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0`,
+      `data-[state=closed]:animate-out data-[state=closed]:fade-out-0`
     ],
     content: [
       `fixed left-[50%] top-[50%] z-50 flex flex-col w-full border bg-background shadow-lg outline-none translate-x-[-50%] translate-y-[-50%] md:w-full duration-200 sm:rounded-lg`,
-      `data-[state=open]:(animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%])`,
-      `data-[state=closed]:(animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-[48%])`
+      `data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2`,
+      `data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2`
     ],
     header: `flex flex-col text-center sm:text-left`,
     title: `flex items-center font-semibold leading-none tracking-tight`,

src/variants/drawer.ts

@@ -4,8 +4,8 @@ import { tv } from 'tailwind-variants';
 export const drawerContentVariants = tv({
   base: [
     `fixed z-50 flex flex-col justify-between items-stretch border bg-background rounded-md outline-none transition ease-in-out`,
-    `data-[state=open]:(animate-in duration-500)`,
-    `data-[state=closed]:(animate-out duration-300)`
+    `data-[state=open]:animate-in data-[state=open]:duration-500`,
+    `data-[state=closed]:animate-out data-[state=closed]:duration-300`
   ],
   variants: {
     size: {

src/variants/hover-card.ts

@@ -5,8 +5,8 @@ export const hoverCardVariants = tv({
   slots: {
     content: [
       `w-auto p-4 rounded-md border bg-popover  text-popover-foreground shadow-md outline-none z-50 will-change-transform`,
-      `data-[state=open]:(zoom-in-95 fade-in-0  animate-in)`,
-      `data-[state=closed]:(zoom-out-95 fade-out-0  animate-out)`,
+      `data-[state=open]:zoom-in-95 data-[state=open]:fade-in-0 data-[state=open]:animate-in`,
+      `data-[state=closed]:zoom-out-95 data-[state=closed]:fade-out-0 data-[state=closed]:animate-out`,
       `data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`
     ],
     arrow: 'fill-popover stroke-border'

src/variants/input.ts

@@ -5,13 +5,13 @@ export const inputVariants = tv({
   slots: {
     root: [
       `group flex items-center w-full rounded-md border border-solid border-input bg-background`,
-      `focus-within:(outline-none ring-2 ring-offset-2 ring-offset-background ring-primary)`
+      `focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-background focus-within:ring-primary`
     ],
     control: [
       'grow bg-transparent outline-none',
       'placeholder:text-muted-foreground',
-      'disabled:(cursor-not-allowed opacity-50)',
-      'file:(border-0 bg-transparent font-medium)'
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'file:border-0 file:bg-transparent file:font-medium'
     ],
     clearable: 'hidden group-hover:block size-1em cursor-pointer opacity-50 hover:opacity-100',
     visible: 'cursor-pointer'