← all fixtures

tsx-shadcn-ui-ui-real-small-change

TSX View before/after files on GitHub Upstream commit shadcn-ui-ui.git@9e6765f apps/v4/examples/base/ui/radio-group.tsx
Code view:

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before

1"use client"
2
3import { cn } from "@/examples/base/lib/utils"
4import { Radio as RadioPrimitive } from "@base-ui/react/radio"
5import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
6import { CircleIcon } from "lucide-react"
7
8function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
9 return (
10 <RadioGroupPrimitive
11 data-slot="radio-group"
12 className={cn("grid w-full gap-2", className)}
…lines 13–16 unchanged (4 lines)
17
18function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
19 return (
20 <RadioPrimitive.Root
21 data-slot="radio-group-item"
22 className={cn(
23 "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
24 className
25 )}
26 {...props}
27 >
28 <RadioPrimitive.Indicator
29 data-slot="radio-group-indicator"
30 className="group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center"
31 >
32 <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
33 </RadioPrimitive.Indicator>
34 </RadioPrimitive.Root>
35 )
36}
37
38export { RadioGroup, RadioGroupItem }
39

After

1"use client"
2
3import { cn } from "@/examples/base/lib/utils"
4import { Radio as RadioPrimitive } from "@base-ui/react/radio"
5import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
6
7function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
8 return (
9 <RadioGroupPrimitive
10 data-slot="radio-group"
11 className={cn("grid w-full gap-2", className)}
12 {...props}
13 />
14 )
15}
16
17function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
18 return (
19 <RadioPrimitive.Root
20 data-slot="radio-group-item"
21 className={cn(
22 "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
23 className
24 )}
25 {...props}
26 >
27 <RadioPrimitive.Indicator
28 data-slot="radio-group-indicator"
29 className="flex size-4 items-center justify-center"
30 >
31 <span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
32 </RadioPrimitive.Indicator>
33 </RadioPrimitive.Root>
34 )
35}
36
37export { RadioGroup, RadioGroupItem }
38

Before

program
expression_statement
string
" "\""
string_fragment "use client"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "cn"
} "}"
from "from"
string
" "\""
string_fragment "@/examples/base/lib/utils"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "Radio"
as "as"
identifier "RadioPrimitive"
} "}"
from "from"
string
" "\""
string_fragment "@base-ui/react/radio"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "RadioGroup"
as "as"
identifier "RadioGroupPrimitive"
} "}"
from "from"
string
" "\""
string_fragment "@base-ui/react/radio-group"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "CircleIcon"
} "}"
from "from"
string
" "\""
string_fragment "lucide-react"
" "\""
function_declaration (+63 nodes collapsed)
function_declaration
function "function"
identifier "RadioGroupItem"
formal_parameters (+21 nodes collapsed)
statement_block
{ "{"
return_statement
return "return"
parenthesized_expression
( "("
jsx_element
jsx_opening_element
< "<"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Root"
jsx_attribute
property_identifier "data-slot"
= "="
string
" "\""
string_fragment "radio-group-item"
" "\""
jsx_attribute
property_identifier "className"
= "="
jsx_expression
{ "{"
call_expression
identifier "cn"
arguments
( "("
string
" "\""
string_fragment "border-input text-primary dark:bg-input/30 focus-visible:bor"...
" "\""
, ","
identifier "className"
) ")"
} "}"
jsx_expression
{ "{"
spread_element
... "..."
identifier "props"
} "}"
> ">"
jsx_element
jsx_opening_element
< "<"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Indicator"
jsx_attribute
property_identifier "data-slot"
= "="
string
" "\""
string_fragment "radio-group-indicator"
" "\""
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "group-aria-invalid/radio-group-item:text-destructive text-pr"...
" "\""
> ">"
jsx_self_closing_element
< "<"
identifier "CircleIcon"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate"...
" "\""
/> "/>"
jsx_closing_element
</ "</"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Indicator"
> ">"
jsx_closing_element
</ "</"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Root"
> ">"
) ")"
} "}"
export_statement
export "export"
export_clause
{ "{"
export_specifier
identifier "RadioGroup"
, ","
export_specifier
identifier "RadioGroupItem"
} "}"

After

program
expression_statement
string
" "\""
string_fragment "use client"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "cn"
} "}"
from "from"
string
" "\""
string_fragment "@/examples/base/lib/utils"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "Radio"
as "as"
identifier "RadioPrimitive"
} "}"
from "from"
string
" "\""
string_fragment "@base-ui/react/radio"
" "\""
import_statement
import "import"
import_clause
named_imports
{ "{"
import_specifier
identifier "RadioGroup"
as "as"
identifier "RadioGroupPrimitive"
} "}"
from "from"
string
" "\""
string_fragment "@base-ui/react/radio-group"
" "\""
function_declaration (+63 nodes collapsed)
function_declaration
function "function"
identifier "RadioGroupItem"
formal_parameters (+21 nodes collapsed)
statement_block
{ "{"
return_statement
return "return"
parenthesized_expression
( "("
jsx_element
jsx_opening_element
< "<"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Root"
jsx_attribute
property_identifier "data-slot"
= "="
string
" "\""
string_fragment "radio-group-item"
" "\""
jsx_attribute
property_identifier "className"
= "="
jsx_expression
{ "{"
call_expression
identifier "cn"
arguments
( "("
string
" "\""
string_fragment "border-input dark:bg-input/30 data-checked:bg-primary data-c"...
" "\""
, ","
identifier "className"
) ")"
} "}"
jsx_expression
{ "{"
spread_element
... "..."
identifier "props"
} "}"
> ">"
jsx_element
jsx_opening_element
< "<"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Indicator"
jsx_attribute
property_identifier "data-slot"
= "="
string
" "\""
string_fragment "radio-group-indicator"
" "\""
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "flex size-4 items-center justify-center"
" "\""
> ">"
jsx_self_closing_element
< "<"
identifier "span"
jsx_attribute
property_identifier "className"
= "="
string
" "\""
string_fragment "bg-primary-foreground absolute top-1/2 left-1/2 size-2 -tran"...
" "\""
/> "/>"
jsx_closing_element
</ "</"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Indicator"
> ">"
jsx_closing_element
</ "</"
member_expression
identifier "RadioPrimitive"
. "."
property_identifier "Root"
> ">"
) ")"
} "}"
export_statement
export "export"
export_clause
{ "{"
export_specifier
identifier "RadioGroup"
, ","
export_specifier
identifier "RadioGroupItem"
} "}"