Skip to content

fix(react/ui): resolve conflicts and finalize HTMLArkProps refactor #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iamdin merged 2 commits into from
Sep 1, 2025
Merged

fix(react/ui): resolve conflicts and finalize HTMLArkProps refactor #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83b371c
fix(react/ui): resolve conflicts and finalize HTMLArkProps refactor
iamdin Sep 1, 2025
02e9f49
refactor(react): migrate registry components to HTMLArkProps\n\n- Rep…
iamdin Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/public/r/react/badge.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"files": [
{
"path": "./src/components/ui/badge.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { createAnatomy } from \"@ark-ui/react/anatomy\"\nimport {\n type HTMLProps,\n type PolymorphicProps,\n ark,\n} from \"@ark-ui/react/factory\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst anatomy = createAnatomy(\"badge\").parts(\"root\")\nconst parts = anatomy.build()\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border px-1.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] [&>svg]:shrink-0 leading-normal\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends PolymorphicProps,\n HTMLProps<\"span\">,\n VariantProps<typeof badgeVariants> {}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, ...props }, ref) => {\n return (\n <ark.span\n ref={ref}\n {...parts.root.attrs}\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n }\n)\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeVariants }\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { createAnatomy } from \"@ark-ui/react/anatomy\"\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst anatomy = createAnatomy(\"badge\").parts(\"root\")\nconst parts = anatomy.build()\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border px-1.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] [&>svg]:shrink-0 leading-normal\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nexport interface BadgeProps\n extends HTMLArkProps<\"span\">,\n VariantProps<typeof badgeVariants> {}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, ...props }, ref) => {\n return (\n <ark.span\n ref={ref}\n {...parts.root.attrs}\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n }\n)\nBadge.displayName = \"Badge\"\n\nexport { Badge, badgeVariants }\n",
"type": "registry:ui"
}
]
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/react/button.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"files": [
{
"path": "./src/components/ui/button.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { createAnatomy } from \"@ark-ui/react/anatomy\"\nimport {\n type HTMLProps,\n type PolymorphicProps,\n ark,\n} from \"@ark-ui/react/factory\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst anatomy = createAnatomy(\"button\").parts(\"root\")\nconst parts = anatomy.build()\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n outline:\n \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends PolymorphicProps,\n HTMLProps<\"button\">,\n VariantProps<typeof buttonVariants> {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <ark.button\n ref={ref}\n {...parts.root.attrs}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { createAnatomy } from \"@ark-ui/react/anatomy\"\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst anatomy = createAnatomy(\"button\").parts(\"root\")\nconst parts = anatomy.build()\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n outline:\n \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends HTMLArkProps<\"button\">,\n VariantProps<typeof buttonVariants> {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <ark.button\n ref={ref}\n {...parts.root.attrs}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
Copy link

@coderabbitai coderabbitai bot Sep 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

className merging bug with CVA; user classes are dropped.

className={cn(buttonVariants({ variant, size, className }))} passes className into CVA instead of merging it. This likely ignores consumer classes. Merge via cn instead.

Apply:

-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, size }), className)}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { createAnatomy } from \"@ark-ui/react/anatomy\"\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\"\nimport { type VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst anatomy = createAnatomy(\"button\").parts(\"root\")\nconst parts = anatomy.build()\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n outline:\n \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends HTMLArkProps<\"button\">,\n VariantProps<typeof buttonVariants> {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <ark.button\n ref={ref}\n {...parts.root.attrs}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
<ark.button
ref={ref}
{...parts.root.attrs}
className={cn(buttonVariants({ variant, size }), className)}
{...props}
/>
🤖 Prompt for AI Agents 
In apps/www/public/r/react/button.json around line 12, the Button component
incorrectly passes className into the CVA call (buttonVariants({ variant, size,
className })), which causes consumer classes to be ignored; change the render to
call buttonVariants only with the variant and size, then merge the result with
the incoming className via cn (e.g. cn(buttonVariants({ variant, size }),
className)) so consumer classes are preserved.

"type": "registry:ui"
}
]
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/react/dialog.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"files": [
{
"path": "./src/components/ui/dialog.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Dialog as DialogPrimitive, dialogAnatomy } from \"@ark-ui/react/dialog\"\nimport {\n type HTMLProps,\n type PolymorphicProps,\n ark,\n} from \"@ark-ui/react/factory\"\nimport { Portal } from \"@ark-ui/react/portal\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst parts = dialogAnatomy.extendWith(\"header\").build()\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogBackdrop = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Backdrop>,\n DialogPrimitive.BackdropProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn(\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[--z-index] bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n className\n )}\n {...props}\n />\n))\nDialogBackdrop.displayName = \"DialogBackdrop\"\n\nconst DialogCloseTrigger = DialogPrimitive.CloseTrigger\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DialogPrimitive.ContentProps\n>(({ className, children, ...props }, ref) => (\n <Portal>\n <DialogBackdrop />\n <DialogPrimitive.Positioner>\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 -translate-x-1/2 -translate-y-1/2 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-[--z-index] grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100\",\n className\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.CloseTrigger className=\"group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none\">\n <XIcon className=\"size-4 opacity-60 transition-opacity group-hover:opacity-100\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.CloseTrigger>\n </DialogPrimitive.Content>\n </DialogPrimitive.Positioner>\n </Portal>\n))\nDialogContent.displayName = \"DialogContent\"\n\nconst DialogContext = DialogPrimitive.Context\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n DialogPrimitive.DescriptionProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n))\nDialogDescription.displayName = \"DialogDescription\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\",\n className\n )}\n {...props}\n />\n)\n\nconst DialogHeader = React.forwardRef<\n HTMLDivElement,\n PolymorphicProps & HTMLProps<\"div\">\n>(({ className, ...props }, ref) => (\n <ark.div\n ref={ref}\n {...parts.header.attrs}\n className={cn(\"flex flex-col gap-1 text-center sm:text-left\", className)}\n {...props}\n />\n))\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n DialogPrimitive.TitleProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\"font-semibold text-lg leading-none\", className)}\n {...props}\n />\n))\nDialogTitle.displayName = \"DialogTitle\"\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nexport {\n Dialog,\n DialogBackdrop,\n DialogCloseTrigger,\n DialogContent,\n DialogContext,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n}\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Dialog as DialogPrimitive, dialogAnatomy } from \"@ark-ui/react/dialog\"\nimport { type HTMLArkProps, ark } from \"@ark-ui/react/factory\"\nimport { Portal } from \"@ark-ui/react/portal\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst parts = dialogAnatomy.extendWith(\"header\").build()\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogBackdrop = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Backdrop>,\n DialogPrimitive.BackdropProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Backdrop\n ref={ref}\n className={cn(\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[--z-index] bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n className\n )}\n {...props}\n />\n))\nDialogBackdrop.displayName = \"DialogBackdrop\"\n\nconst DialogCloseTrigger = DialogPrimitive.CloseTrigger\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DialogPrimitive.ContentProps\n>(({ className, children, ...props }, ref) => (\n <Portal>\n <DialogBackdrop />\n <DialogPrimitive.Positioner>\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 -translate-x-1/2 -translate-y-1/2 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-[--z-index] grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100\",\n className\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.CloseTrigger className=\"group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none\">\n <XIcon className=\"size-4 opacity-60 transition-opacity group-hover:opacity-100\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.CloseTrigger>\n </DialogPrimitive.Content>\n </DialogPrimitive.Positioner>\n </Portal>\n))\nDialogContent.displayName = \"DialogContent\"\n\nconst DialogContext = DialogPrimitive.Context\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n DialogPrimitive.DescriptionProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n))\nDialogDescription.displayName = \"DialogDescription\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse gap-3 sm:flex-row sm:justify-end\",\n className\n )}\n {...props}\n />\n)\nconst DialogHeader = React.forwardRef<HTMLDivElement, HTMLArkProps<\"div\">>(\n ({ className, ...props }, ref) => (\n <ark.div\n ref={ref}\n {...parts.header.attrs}\n className={cn(\"flex flex-col gap-1 text-center sm:text-left\", className)}\n {...props}\n />\n )\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n DialogPrimitive.TitleProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\"font-semibold text-lg leading-none\", className)}\n {...props}\n />\n))\nDialogTitle.displayName = \"DialogTitle\"\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nexport {\n Dialog,\n DialogBackdrop,\n DialogCloseTrigger,\n DialogContent,\n DialogContext,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n}\n",
"type": "registry:ui"
}
]
Expand Down
Loading