@fr0mpy/component-system 2.2.0 → 3.1.0

package/templates/component-recipes/alert.md

@@ -2,25 +2,39 @@
 
 ## Structure
 - Container with icon, title, and description
-- Support variants: info, success, warning, error/destructive
+- Support variants: default, success, warning, destructive
 - Optional dismiss button
 - Optional action buttons
 
+## IMPORTANT: Color Token Usage
+
+**NEVER use hardcoded Tailwind colors.** Use semantic tokens only:
+
+| Semantic Token | Purpose |
+|----------------|---------|
+| `bg-success`, `text-success`, `border-success` | Success states |
+| `bg-warning`, `text-warning`, `border-warning` | Warning states |
+| `bg-destructive`, `text-destructive`, `border-destructive` | Error/destructive states |
+| `bg-accent`, `text-accent`, `border-accent` | Info/accent states |
+| `bg-primary`, `text-primary`, `border-primary` | Primary actions |
+| `bg-muted`, `text-muted-foreground` | Muted/secondary text |
+
 ## Tailwind Classes
 
 ### Container
 ```
-relative w-full {tokens.radius} border p-4
+relative w-full rounded-[USE_CONFIG_RADIUS] border p-4
 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4
 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11
 ```
 
-### Variants
+**Note:** Replace `rounded-[USE_CONFIG_RADIUS]` with the value from `.claude/styling-config.json` → `tokens.radius` (e.g., `rounded-none`, `rounded-md`, `rounded-lg`)
+
+### Variants (Using Semantic Tokens)
 ```
 default:     bg-background border-border text-foreground [&>svg]:text-foreground
-info:        bg-blue-500/10 border-blue-500/20 text-blue-600 [&>svg]:text-blue-600
-success:     bg-green-500/10 border-green-500/20 text-green-600 [&>svg]:text-green-600
-warning:     bg-yellow-500/10 border-yellow-500/20 text-yellow-600 [&>svg]:text-yellow-600
+success:     bg-success/10 border-success/20 text-success [&>svg]:text-success
+warning:     bg-warning/10 border-warning/20 text-warning [&>svg]:text-warning
 destructive: bg-destructive/10 border-destructive/20 text-destructive [&>svg]:text-destructive
 ```
 
@@ -36,14 +50,14 @@ text-sm [&_p]:leading-relaxed
 
 ### Dismiss Button
 ```
-absolute right-2 top-2 {tokens.radius} p-1 opacity-70
-hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary
+absolute right-2 top-2 rounded-[USE_CONFIG_RADIUS] p-1 opacity-70 cursor-pointer
+hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary
 ```
 
 ## Props Interface
 ```typescript
 interface AlertProps {
-  variant?: 'default' | 'info' | 'success' | 'warning' | 'destructive'
+  variant?: 'default' | 'success' | 'warning' | 'destructive'
   icon?: React.ReactNode
   title?: string
   onDismiss?: () => void
@@ -63,7 +77,6 @@ interface AlertDescriptionProps {
 
 ## Icons per Variant
 ```
-info:        <Info /> or <AlertCircle />
 success:     <CheckCircle />
 warning:     <AlertTriangle />
 destructive: <XCircle /> or <AlertOctagon />
@@ -71,33 +84,32 @@ default:     <Info /> or custom
 ```
 
 ## Do
-- Include appropriate icon for each variant
-- Use semantic colors from tokens where possible
+- Use semantic color tokens ONLY (bg-success, bg-warning, bg-destructive)
+- Read `.claude/styling-config.json` for radius value
+- Include `cursor-pointer` on dismiss button
+- Use `focus-visible:` not `focus:` for keyboard accessibility
 - Support composable pattern (Alert.Title, Alert.Description)
-- Add dismiss functionality when needed
 
 ## Don't
-- Hardcode colors
-- Make alerts too visually heavy
-- Forget to position icon properly
-- Skip the semantic meaning of variants
+- Use hardcoded colors (bg-green-500, bg-yellow-500, #XXXXXX)
+- Use non-semantic Tailwind colors
+- Use `focus:` instead of `focus-visible:`
+- Forget `cursor-pointer` on interactive elements
 
 ## Example
 ```tsx
 import { cn } from '@/lib/utils'
-import { AlertCircle, CheckCircle, AlertTriangle, XCircle, X, Info } from 'lucide-react'
+import { CheckCircle, AlertTriangle, XCircle, X, Info } from 'lucide-react'
 
 const alertVariants = {
   default: 'bg-background border-border text-foreground',
-  info: 'bg-blue-500/10 border-blue-500/20 text-blue-600 [&>svg]:text-blue-600',
-  success: 'bg-green-500/10 border-green-500/20 text-green-600 [&>svg]:text-green-600',
-  warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-600 [&>svg]:text-yellow-600',
+  success: 'bg-success/10 border-success/20 text-success [&>svg]:text-success',
+  warning: 'bg-warning/10 border-warning/20 text-warning [&>svg]:text-warning',
   destructive: 'bg-destructive/10 border-destructive/20 text-destructive [&>svg]:text-destructive',
 }
 
 const alertIcons = {
   default: Info,
-  info: AlertCircle,
   success: CheckCircle,
   warning: AlertTriangle,
   destructive: XCircle,
@@ -110,6 +122,7 @@ const Alert = ({ variant = 'default', title, onDismiss, className, children, ...
     <div
       role="alert"
       className={cn(
+        // Base styles - replace rounded-lg with your config's tokens.radius
         'relative w-full rounded-lg border p-4',
         '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:h-4 [&>svg]:w-4',
         '[&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11',
@@ -126,7 +139,7 @@ const Alert = ({ variant = 'default', title, onDismiss, className, children, ...
       {onDismiss && (
         <button
           onClick={onDismiss}
-          className="absolute right-2 top-2 rounded p-1 opacity-70 hover:opacity-100"
+          className="absolute right-2 top-2 rounded p-1 opacity-70 cursor-pointer hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
         >
           <X className="h-4 w-4" />
         </button>

package/templates/component-recipes/avatar.md

@@ -35,13 +35,13 @@ flex h-full w-full items-center justify-center rounded-full
 bg-muted text-muted-foreground font-medium
 ```
 
-### Status Indicator
+### Status Indicator (Using Semantic Tokens)
 ```
 absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-background
-online:  bg-green-500
-offline: bg-gray-400
-busy:    bg-red-500
-away:    bg-yellow-500
+online:  bg-success
+offline: bg-muted
+busy:    bg-destructive
+away:    bg-warning
 ```
 
 ### Avatar Group
@@ -67,20 +67,21 @@ interface AvatarGroupProps {
 ```
 
 ## Do
-- Use Radix Avatar for image loading states
+- Use Base UI Avatar for image loading states
 - Show fallback immediately while image loads
 - Support both initials and icon fallbacks
 - Use ring for avatar group overlap effect
 
 ## Don't
-- Hardcode colors
+- Hardcode colors (use bg-success NOT bg-green-500)
+- Use non-semantic Tailwind colors
 - Forget alt text for images
 - Use non-square aspect ratios
 - Skip loading state handling
 
 ## Example
 ```tsx
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
 import { cn } from '@/lib/utils'
 import { User } from 'lucide-react'
 
@@ -93,11 +94,12 @@ const avatarSizes = {
   '2xl': 'h-24 w-24 text-xl',
 }
 
+// Using semantic tokens - NO hardcoded colors!
 const statusColors = {
-  online: 'bg-green-500',
-  offline: 'bg-gray-400',
-  busy: 'bg-red-500',
-  away: 'bg-yellow-500',
+  online: 'bg-success',
+  offline: 'bg-muted',
+  busy: 'bg-destructive',
+  away: 'bg-warning',
 }
 
 const Avatar = ({ src, alt, fallback, size = 'md', status, className }) => (

package/templates/component-recipes/badge.md

@@ -14,14 +14,14 @@ inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
 transition-colors
 ```
 
-### Variants
+### Variants (Using Semantic Tokens ONLY)
 ```
 default:     bg-primary text-primary-foreground
 secondary:   bg-secondary text-secondary-foreground
 outline:     border border-border text-foreground bg-transparent
 destructive: bg-destructive text-destructive-foreground
-success:     bg-green-500/10 text-green-600 border border-green-500/20
-warning:     bg-yellow-500/10 text-yellow-600 border border-yellow-500/20
+success:     bg-success/10 text-success border border-success/20
+warning:     bg-warning/10 text-warning border border-warning/20
 ```
 
 ### Sizes
@@ -68,21 +68,24 @@ interface BadgeProps {
 ## Don't
 - Make badges too large
 - Use for long text content
-- Hardcode colors
+- Hardcode colors (use bg-success NOT bg-green-500)
+- Use non-semantic Tailwind colors
 - Forget hover state for interactive badges
+- Forget `cursor-pointer` on interactive badges
 
 ## Example
 ```tsx
 import { cn } from '@/lib/utils'
 import { X } from 'lucide-react'
 
+// Using semantic tokens - NO hardcoded colors!
 const badgeVariants = {
   default: 'bg-primary text-primary-foreground',
   secondary: 'bg-secondary text-secondary-foreground',
   outline: 'border border-border text-foreground bg-transparent',
   destructive: 'bg-destructive text-destructive-foreground',
-  success: 'bg-green-500/10 text-green-600 border border-green-500/20',
-  warning: 'bg-yellow-500/10 text-yellow-600 border border-yellow-500/20',
+  success: 'bg-success/10 text-success border border-success/20',
+  warning: 'bg-warning/10 text-warning border border-warning/20',
 }
 
 const badgeSizes = {

package/templates/component-recipes/breadcrumb.md

@@ -72,7 +72,7 @@ interface BreadcrumbListProps {
 
 interface BreadcrumbLinkProps {
   href: string
-  asChild?: boolean
+  render?: React.ReactElement
   children: React.ReactNode
 }
 
@@ -110,7 +110,7 @@ interface BreadcrumbEllipsisProps {
 ## Example
 ```tsx
 import { ChevronRight, MoreHorizontal } from 'lucide-react'
-import { Slot } from '@radix-ui/react-slot'
+import { Slot } from '@base-ui/react/slot'
 import { cn } from '@/lib/utils'
 
 const Breadcrumb = ({ children, ...props }) => (
@@ -133,8 +133,8 @@ const BreadcrumbItem = ({ className, ...props }) => (
   <li className={cn('inline-flex items-center gap-1.5', className)} {...props} />
 )
 
-const BreadcrumbLink = ({ asChild, className, ...props }) => {
-  const Comp = asChild ? Slot : 'a'
+const BreadcrumbLink = ({ render, className, ...props }) => {
+  const Comp = render ? Slot : 'a'
   return (
     <Comp
       className={cn('transition-colors hover:text-foreground', className)}

package/templates/component-recipes/button.md

@@ -5,7 +5,7 @@
 - Support variants: primary, secondary, outline, ghost, destructive
 - Support sizes: sm, md, lg
 - Include states: loading, disabled
-- Optionally support `asChild` for composition (render as link, etc.)
+- Optionally support `render` for composition (render as link, etc.)
 
 ## Tailwind Classes
 
@@ -46,7 +46,7 @@ interface ButtonProps {
   size?: 'sm' | 'md' | 'lg'
   loading?: boolean
   disabled?: boolean
-  asChild?: boolean
+  render?: boolean
   children: React.ReactNode
 }
 ```

package/templates/component-recipes/checkbox.md

@@ -14,8 +14,8 @@ peer h-4 w-4 shrink-0 {tokens.radius} border border-border
 ring-offset-background
 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
 disabled:cursor-not-allowed disabled:opacity-50
-data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground
-data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary
+data-checked:bg-primary data-checked:border-primary data-checked:text-primary-foreground
+data-indeterminate:bg-primary data-indeterminate:border-primary
 ```
 
 ### Check Icon
@@ -70,7 +70,7 @@ interface CheckboxWithLabelProps extends CheckboxProps {
 
 ## Example
 ```tsx
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
 import { Check, Minus } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -81,8 +81,8 @@ const Checkbox = ({ className, ...props }) => (
       'ring-offset-background',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground',
-      'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',
+      'data-checked:bg-primary data-checked:border-primary data-checked:text-primary-foreground',
+      'data-indeterminate:bg-primary data-indeterminate:border-primary data-indeterminate:text-primary-foreground',
       className
     )}
     {...props}

package/templates/component-recipes/collapsible.md

@@ -15,7 +15,7 @@ w-full
 
 ### Trigger
 ```
-flex items-center justify-between w-full [&[data-state=open]>svg]:rotate-180
+flex items-center justify-between w-full [&[data-open]>svg]:rotate-180
 ```
 
 ### Trigger with default styling
@@ -32,8 +32,8 @@ h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200
 ### Content
 ```
 overflow-hidden
-data-[state=closed]:animate-collapsible-up
-data-[state=open]:animate-collapsible-down
+data-closed:animate-collapsible-up
+data-open:animate-collapsible-down
 ```
 
 ### Content Inner (for padding)
@@ -46,10 +46,10 @@ pt-2 pb-4
 keyframes: {
   'collapsible-down': {
     from: { height: '0' },
-    to: { height: 'var(--radix-collapsible-content-height)' },
+    to: { height: 'var(--collapsible-panel-height)' },
   },
   'collapsible-up': {
-    from: { height: 'var(--radix-collapsible-content-height)' },
+    from: { height: 'var(--collapsible-panel-height)' },
     to: { height: '0' },
   },
 },
@@ -70,7 +70,7 @@ interface CollapsibleProps {
 }
 
 interface CollapsibleTriggerProps {
-  asChild?: boolean
+  render?: React.ReactElement
   children: React.ReactNode
 }
 
@@ -89,7 +89,7 @@ interface CollapsibleContentProps {
 - Code snippets with preview
 
 ## Do
-- Use Radix Collapsible for accessibility
+- Use Base UI Collapsible for accessibility
 - Animate height smoothly
 - Include visual indicator of state (chevron)
 - Support keyboard toggle (Enter/Space)
@@ -102,7 +102,7 @@ interface CollapsibleContentProps {
 
 ## Example
 ```tsx
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
 import { ChevronDown } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -114,8 +114,8 @@ const CollapsibleContent = ({ className, children, ...props }) => (
   <CollapsiblePrimitive.Content
     className={cn(
       'overflow-hidden',
-      'data-[state=closed]:animate-collapsible-up',
-      'data-[state=open]:animate-collapsible-down',
+      'data-closed:animate-collapsible-up',
+      'data-open:animate-collapsible-down',
       className
     )}
     {...props}
@@ -127,7 +127,7 @@ const CollapsibleContent = ({ className, children, ...props }) => (
 // Simple usage
 const SimpleCollapsible = ({ title, children }) => (
   <Collapsible>
-    <CollapsibleTrigger className="flex items-center justify-between w-full py-2 font-medium hover:underline [&[data-state=open]>svg]:rotate-180">
+    <CollapsibleTrigger className="flex items-center justify-between w-full py-2 font-medium hover:underline [&[data-open]>svg]:rotate-180">
       {title}
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </CollapsibleTrigger>
@@ -140,7 +140,7 @@ const SimpleCollapsible = ({ title, children }) => (
 // With border styling
 const CollapsibleCard = ({ title, defaultOpen = false, children }) => (
   <Collapsible defaultOpen={defaultOpen} className="rounded-lg border border-border">
-    <CollapsibleTrigger className="flex items-center justify-between w-full p-4 font-medium [&[data-state=open]>svg]:rotate-180">
+    <CollapsibleTrigger className="flex items-center justify-between w-full p-4 font-medium [&[data-open]>svg]:rotate-180">
       {title}
       <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </CollapsibleTrigger>
@@ -155,7 +155,7 @@ const CollapsibleCard = ({ title, defaultOpen = false, children }) => (
 // Sidebar navigation example
 const SidebarGroup = ({ label, items, defaultOpen = true }) => (
   <Collapsible defaultOpen={defaultOpen} className="space-y-2">
-    <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-1.5 text-sm font-semibold text-muted-foreground hover:text-foreground [&[data-state=open]>svg]:rotate-180">
+    <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-1.5 text-sm font-semibold text-muted-foreground hover:text-foreground [&[data-open]>svg]:rotate-180">
       {label}
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </CollapsibleTrigger>

package/templates/component-recipes/combobox.md

@@ -88,7 +88,7 @@ interface ComboboxProps {
 ```
 
 ## Do
-- Use Radix Combobox or cmdk for accessibility
+- Use Base UI Combobox or cmdk for accessibility
 - Support type-ahead filtering
 - Clear search on selection (single) or keep (multi)
 - Show loading state while filtering
@@ -123,7 +123,7 @@ const Combobox = ({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
+      <PopoverTrigger render={<Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between" />}>
         <Button
           variant="outline"
           role="combobox"

package/templates/component-recipes/context-menu.md

@@ -19,9 +19,9 @@
 z-50 min-w-[8rem] overflow-hidden {tokens.radius} border border-border
 bg-background p-1 text-foreground {tokens.shadow}
 animate-in fade-in-80
-data-[state=open]:animate-in data-[state=closed]:animate-out
-data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
-data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+data-open:animate-in data-closed:animate-out
+data-closed:fade-out-0 data-open:fade-in-0
+data-closed:zoom-out-95 data-open:zoom-in-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
@@ -82,14 +82,14 @@ ml-auto text-xs tracking-widest text-muted-foreground
 flex cursor-pointer select-none items-center {tokens.radius} px-2 py-1.5
 text-sm outline-none
 focus:bg-muted
-data-[state=open]:bg-muted
+data-open:bg-muted
 ```
 
 ### Sub Content
 ```
 z-50 min-w-[8rem] overflow-hidden {tokens.radius} border border-border
 bg-background p-1 {tokens.shadow}
-data-[state=open]:animate-in data-[state=closed]:animate-out
+data-open:animate-in data-closed:animate-out
 ```
 
 ## Props Interface
@@ -102,7 +102,7 @@ interface ContextMenuProps {
 interface ContextMenuTriggerProps {
   children: React.ReactNode
   disabled?: boolean
-  asChild?: boolean
+  render?: React.ReactElement
 }
 
 interface ContextMenuContentProps {
@@ -122,7 +122,7 @@ interface ContextMenuItemProps {
 ```
 
 ## Do
-- Use Radix ContextMenu for accessibility
+- Use Base UI Menu for accessibility
 - Support all item types (checkbox, radio, sub-menus)
 - Show keyboard shortcuts
 - Handle touch devices (long-press)
@@ -135,7 +135,7 @@ interface ContextMenuItemProps {
 
 ## Example
 ```tsx
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { Menu as ContextMenuPrimitive } from '@base-ui/react/menu'
 import { Check, ChevronRight, Circle } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -152,9 +152,9 @@ const ContextMenuContent = ({ className, ...props }) => (
       className={cn(
         'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background p-1 shadow-md',
         'animate-in fade-in-80',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-open:animate-in data-closed:animate-out',
+        'data-closed:fade-out-0 data-open:fade-in-0',
+        'data-closed:zoom-out-95 data-open:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2',
         className
       )}

package/templates/component-recipes/dialog.md

@@ -11,8 +11,8 @@
 ### Overlay
 ```
 fixed inset-0 z-50 bg-black/80
-data-[state=open]:animate-in data-[state=closed]:animate-out
-data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+data-open:animate-in data-closed:animate-out
+data-closed:fade-out-0 data-open:fade-in-0
 ```
 
 ### Content
@@ -20,11 +20,11 @@ data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2
 gap-4 border border-border bg-background p-6 {tokens.shadow} {tokens.radius}
 duration-200
-data-[state=open]:animate-in data-[state=closed]:animate-out
-data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
-data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
-data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]
-data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]
+data-open:animate-in data-closed:animate-out
+data-closed:fade-out-0 data-open:fade-in-0
+data-closed:zoom-out-95 data-open:zoom-in-95
+data-closed:slide-out-to-left-1/2 data-closed:slide-out-to-top-[48%]
+data-open:slide-in-from-left-1/2 data-open:slide-in-from-top-[48%]
 ```
 
 ### Header
@@ -53,7 +53,7 @@ absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
 transition-opacity hover:opacity-100
 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
 disabled:pointer-events-none
-data-[state=open]:bg-accent data-[state=open]:text-muted-foreground
+data-open:bg-accent data-open:text-muted-foreground
 ```
 
 ## Alert Dialog Variant (for destructive confirmations)
@@ -112,7 +112,7 @@ interface DialogDescriptionProps {
 
 ## Example
 ```tsx
-import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -125,8 +125,8 @@ const DialogOverlay = ({ className, ...props }) => (
   <DialogPrimitive.Overlay
     className={cn(
       'fixed inset-0 z-50 bg-black/80',
-      'data-[state=open]:animate-in data-[state=closed]:animate-out',
-      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-open:animate-in data-closed:animate-out',
+      'data-closed:fade-out-0 data-open:fade-in-0',
       className
     )}
     {...props}
@@ -140,9 +140,9 @@ const DialogContent = ({ className, children, ...props }) => (
       className={cn(
         'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
         'gap-4 border border-border bg-background p-6 shadow-lg rounded-lg duration-200',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-open:animate-in data-closed:animate-out',
+        'data-closed:fade-out-0 data-open:fade-in-0',
+        'data-closed:zoom-out-95 data-open:zoom-in-95',
         className
       )}
       {...props}
@@ -174,8 +174,8 @@ const DialogDescription = ({ className, ...props }) => (
 
 // Usage
 <Dialog>
-  <DialogTrigger asChild>
-    <Button variant="outline">Edit Profile</Button>
+  <DialogTrigger render={<Button variant="outline" />}>
+Edit Profile
   </DialogTrigger>
   <DialogContent>
     <DialogHeader>