Update versions and fix data attribute selectors in UI components

Author: thevuong

packages/tailwindcss/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/tailwindcss
 
+## 0.1.50
+
+### Patch Changes
+
+- Fix data attribute selectors in UI components
+
 ## 0.1.49
 
 ### Patch Changes

packages/tailwindcss/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/tailwindcss",
-  "version": "0.1.49",
+  "version": "0.1.50",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/tailwindcss/src/tailwind.config.ts

@@ -186,49 +186,6 @@ export const sharedConfig: Config = {
         center: true,
         padding: '1rem',
       },
-      data: {
-        'align-center': 'align="center"',
-        'align-end': 'align="end"',
-        'align-start': 'align="start"',
-        disabled: 'disabled',
-        highlighted: 'highlighted',
-        invalid: 'invalid="true"',
-        loading: 'loading="true"',
-        'motion-from-end': 'motion="from-end"',
-        'motion-from-start': 'motion="from-start"',
-        'motion-to-end': 'motion="to-end"',
-        'motion-to-start': 'motion="to-start"',
-        'orientation-horizontal': 'orientation="horizontal"',
-        'orientation-vertical': 'orientation="vertical"',
-        placeholder: 'placeholder',
-        selected: 'selected',
-        'side-bottom': 'side="bottom"',
-        'side-left': 'side="left"',
-        'side-right': 'side="right"',
-        'side-top': 'side="top"',
-        'state-active': 'state="active"',
-        'state-checked': 'state="checked"',
-        'state-closed': 'state="closed"',
-        'state-delayed-open': 'state="delayed-open"',
-        'state-hidden': 'state="hidden"',
-        'state-inactive': 'state="inactive"',
-        'state-indeterminate': 'state="indeterminate"',
-        'state-off': 'state="off"',
-        'state-on': 'state="on"',
-        'state-open': 'state="open"',
-        'state-selected': 'state="selected"',
-        'state-unchecked': 'state="unchecked"',
-        'state-visible': 'state="visible"',
-        'swipe-cancel': 'swipe="cancel"',
-        'swipe-direction-down': 'swipe-direction="down"',
-        'swipe-direction-left': 'swipe-direction="left"',
-        'swipe-direction-right': 'swipe-direction="right"',
-        'swipe-direction-up': 'swipe-direction="up"',
-        'swipe-end': 'swipe="end"',
-        'swipe-move': 'swipe="move"',
-        'swipe-start': 'swipe="start"',
-        valid: 'valid="true"',
-      },
       fontFamily: {
         mono: [`var(--font-mono, ${fontFamily.mono.join(', ')})`],
         sans: [`var(--font-sans, ${fontFamily.sans.join(', ')})`],

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.100
+
+### Patch Changes
+
+- Fix data attribute selectors in UI components
+
 ## 0.1.99
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.99",
+  "version": "0.1.100",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

packages/ui/src/react/accordion.tsx

@@ -82,7 +82,7 @@ export const AccordionTrigger = React.forwardRef<
         <ChevronDownIcon
           aria-hidden
           className={cn(
-            'group-data-state-open:rotate-180 text-accent-foreground size-4 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]',
+            'text-accent-foreground size-4 transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180',
             classNames?.icon,
           )}
         />
@@ -106,7 +106,7 @@ export const AccordionContent = React.forwardRef<
   <Content
     className={cn(
       'text-muted-foreground overflow-hidden text-base',
-      'data-state-open:animate-collapsible-down data-state-closed:animate-collapsible-up',
+      'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',
       className,
     )}
     ref={forwardedRef}

packages/ui/src/react/alert-dialog.tsx

@@ -31,7 +31,7 @@ import { cn } from '@/server/cn';
 const alertDialogContentVariants = cva(
   [
     'bg-background relative rounded-lg border shadow-lg focus:outline-none',
-    'data-state-open:animate-content-show data-state-closed:animate-content-hide',
+    'data-[state=open]:animate-content-show data-[state=closed]:animate-content-hide',
   ],
   {
     defaultVariants: {
@@ -100,7 +100,7 @@ export const AlertDialogContent = React.forwardRef<
         className={cn(
           [
             'bg-background/80 fixed inset-0 z-40 p-4 sm:p-10',
-            'data-state-open:animate-overlay-show data-state-closed:animate-overlay-hide',
+            'data-[state=open]:animate-overlay-show data-[state=closed]:animate-overlay-hide',
           ],
           scrollable
             ? 'flex items-center justify-center'

packages/ui/src/react/checkbox.tsx

@@ -46,8 +46,8 @@ export const Checkbox = React.forwardRef<
       'ring-offset-background',
       'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-state-checked:border-primary data-state-checked:bg-primary data-state-checked:text-primary-foreground',
-      'data-state-indeterminate:border-primary data-state-indeterminate:bg-primary data-state-indeterminate:text-primary-foreground',
+      'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
       className,
     )}
     ref={forwardedRef}

packages/ui/src/react/collapsible.tsx

@@ -36,7 +36,7 @@ export const CollapsibleContent = React.forwardRef<
   <Content
     className={cn(
       'overflow-hidden',
-      'data-state-open:animate-collapsible-down data-state-closed:animate-collapsible-up',
+      'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',
       className,
     )}
     ref={forwardedRef}

packages/ui/src/react/context-menu.tsx

@@ -43,7 +43,7 @@ import { cn } from '@/server/cn';
 const contextMenuSubTriggerVariants = cva(
   [
     'group relative flex cursor-pointer select-none items-center gap-2 rounded px-2 py-1.5 text-sm outline-none',
-    'data-disabled:opacity-50 data-disabled:pointer-events-none',
+    'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
   ],
   {
     defaultVariants: {
@@ -57,15 +57,15 @@ const contextMenuSubTriggerVariants = cva(
       variant: {
         default: [
           'focus:bg-accent focus:text-accent-foreground',
-          'data-state-open:bg-accent data-state-open:text-accent-foreground',
-          'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
-          'data-highlighted:data-state-open:bg-accent data-highlighted:data-state-open:text-accent-foreground',
+          'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+          'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+          'data-[highlighted]:data-[state=open]:bg-accent data-[highlighted]:data-[state=open]:text-accent-foreground',
         ],
         destructive: [
           'focus:bg-destructive-foreground focus:text-destructive',
-          'data-state-open:bg-destructive-foreground data-state-open:text-destructive',
-          'data-highlighted:bg-destructive-foreground data-highlighted:text-destructive',
-          'data-highlighted:data-state-open:bg-destructive-foreground data-highlighted:data-state-open:text-destructive',
+          'data-[state=open]:bg-destructive-foreground data-[state=open]:text-destructive',
+          'data-[highlighted]:bg-destructive-foreground data-[highlighted]:text-destructive',
+          'data-[highlighted]:data-[state=open]:bg-destructive-foreground data-[highlighted]:data-[state=open]:text-destructive',
         ],
       },
     },
@@ -79,7 +79,7 @@ type ContextMenuSubTriggerVariantsProps = VariantProps<
 const contextMenuItemVariants = cva(
   [
     'group relative flex cursor-pointer select-none items-center gap-2 rounded px-2 py-1.5 text-sm outline-none',
-    'data-disabled:opacity-50 data-disabled:pointer-events-none',
+    'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
   ],
   {
     defaultVariants: {
@@ -93,12 +93,12 @@ const contextMenuItemVariants = cva(
       variant: {
         default: [
           'focus:bg-accent focus:text-accent-foreground',
-          'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+          'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
         ],
         destructive: [
           'text-destructive',
           'focus:bg-destructive-foreground focus:text-destructive',
-          'data-highlighted:bg-destructive-foreground data-highlighted:text-destructive',
+          'data-[highlighted]:bg-destructive-foreground data-[highlighted]:text-destructive',
         ],
       },
     },
@@ -112,7 +112,7 @@ type ContextMenuItemVariantsProps = VariantProps<
 const contextMenuCheckboxItemVariants = cva(
   [
     'group relative flex cursor-pointer select-none items-center gap-2 rounded px-2 py-1.5 pl-8 text-sm outline-none',
-    'data-disabled:opacity-50 data-disabled:pointer-events-none',
+    'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
   ],
   {
     defaultVariants: {
@@ -122,12 +122,12 @@ const contextMenuCheckboxItemVariants = cva(
       variant: {
         default: [
           'focus:bg-accent focus:text-accent-foreground',
-          'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+          'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
         ],
         destructive: [
           'text-destructive',
           'focus:bg-destructive-foreground focus:text-destructive',
-          'data-highlighted:bg-destructive-foreground data-highlighted:text-destructive',
+          'data-[highlighted]:bg-destructive-foreground data-[highlighted]:text-destructive',
         ],
       },
     },
@@ -141,7 +141,7 @@ type ContextMenuCheckboxItemVariantsProps = VariantProps<
 const contextMenuRadioItemVariants = cva(
   [
     'group relative flex cursor-pointer select-none items-center gap-2 rounded px-2 py-1.5 pl-8 text-sm outline-none',
-    'data-disabled:opacity-50 data-disabled:pointer-events-none',
+    'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
   ],
   {
     defaultVariants: {
@@ -151,12 +151,12 @@ const contextMenuRadioItemVariants = cva(
       variant: {
         default: [
           'focus:bg-accent focus:text-accent-foreground',
-          'data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+          'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
         ],
         destructive: [
           'text-destructive',
           'focus:bg-destructive-foreground focus:text-destructive',
-          'data-highlighted:bg-destructive-foreground data-highlighted:text-destructive',
+          'data-[highlighted]:bg-destructive-foreground data-[highlighted]:text-destructive',
         ],
       },
     },
@@ -267,16 +267,16 @@ export const ContextMenuSubContent = React.forwardRef<
       className={cn(
         'bg-popover text-popover-foreground relative z-40 min-w-[8rem] rounded-md border p-1 shadow-lg will-change-[opacity,transform]',
         [
-          'data-state-open:data-side-top:animate-slide-in-from-bottom',
-          'data-state-open:data-side-bottom:animate-slide-in-from-top',
-          'data-state-open:data-side-left:animate-slide-in-from-right',
-          'data-state-open:data-side-right:animate-slide-in-from-left',
+          'data-[state=open]:data-[side=top]:animate-slide-in-from-bottom',
+          'data-[state=open]:data-[side=bottom]:animate-slide-in-from-top',
+          'data-[state=open]:data-[side=left]:animate-slide-in-from-right',
+          'data-[state=open]:data-[side=right]:animate-slide-in-from-left',
         ],
         [
-          'data-state-closed:data-side-top:animate-slide-out-to-bottom',
-          'data-state-closed:data-side-bottom:animate-slide-out-to-top',
-          'data-state-closed:data-side-left:animate-slide-out-to-right',
-          'data-state-closed:data-side-right:animate-slide-out-to-left',
+          'data-[state=closed]:data-[side=top]:animate-slide-out-to-bottom',
+          'data-[state=closed]:data-[side=bottom]:animate-slide-out-to-top',
+          'data-[state=closed]:data-[side=left]:animate-slide-out-to-right',
+          'data-[state=closed]:data-[side=right]:animate-slide-out-to-left',
         ],
         className,
       )}

packages/ui/src/react/data-table.tsx

@@ -120,7 +120,7 @@ export function DataTableColumnHeader<TData, TValue>({
       <DropdownMenuTrigger
         className={cn(
           buttonVariants({ size: 'sm', variant: 'ghost' }),
-          'data-state-open:bg-accent -ml-3.5 px-3.5',
+          'data-[state=open]:bg-accent -ml-3.5 px-3.5',
         )}
       >
         {title}

packages/ui/src/react/dialog.tsx

@@ -30,7 +30,7 @@ import { cn } from '@/server/cn';
 const dialogContentVariants = cva(
   [
     'bg-background relative rounded-lg border shadow-lg focus:outline-none',
-    'data-state-open:animate-content-show data-state-closed:animate-content-hide',
+    'data-[state=open]:animate-content-show data-[state=closed]:animate-content-hide',
   ],
   {
     defaultVariants: {
@@ -119,7 +119,7 @@ export const DialogContent = React.forwardRef<
         className={cn(
           [
             'bg-background/80 fixed inset-0 z-40 p-4 sm:p-10',
-            'data-state-open:animate-overlay-show data-state-closed:animate-overlay-hide',
+            'data-[state=open]:animate-overlay-show data-[state=closed]:animate-overlay-hide',
           ],
           scrollable
             ? 'flex items-center justify-center'

packages/ui/src/react/drawer.tsx

@@ -36,12 +36,12 @@ const drawerContentVariants = cva(
     },
     variants: {
       side: {
-        left: 'border-r data-state-open:animate-drawer-show-from-left data-state-closed:animate-drawer-hide-to-left',
+        left: 'border-r data-[state=open]:animate-drawer-show-from-left data-[state=closed]:animate-drawer-hide-to-left',
         right:
-          'border-l data-state-open:animate-drawer-show-from-right data-state-closed:animate-drawer-hide-to-right',
-        top: 'border-b data-state-open:animate-drawer-show-from-top data-state-closed:animate-drawer-hide-to-top',
+          'border-l data-[state=open]:animate-drawer-show-from-right data-[state=closed]:animate-drawer-hide-to-right',
+        top: 'border-b data-[state=open]:animate-drawer-show-from-top data-[state=closed]:animate-drawer-hide-to-top',
         bottom:
-          'border-t data-state-open:animate-drawer-show-from-bottom data-state-closed:animate-drawer-hide-to-bottom',
+          'border-t data-[state=open]:animate-drawer-show-from-bottom data-[state=closed]:animate-drawer-hide-to-bottom',
       },
       scrollable: {
         false: 'overflow-y-auto',
@@ -131,7 +131,7 @@ export const DrawerContent = React.forwardRef<
         className={cn(
           [
             'bg-background/80 fixed inset-0 z-40 flex',
-            'data-state-open:animate-overlay-show data-state-closed:animate-overlay-hide',
+            'data-[state=open]:animate-overlay-show data-[state=closed]:animate-overlay-hide',
           ],
           {
             'justify-end': side === 'right',