rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-28 23:24:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(native-select): use system colors for option and optgroup

Browse Source
This commit is contained in:
Yngesh Raman
2026-03-31 13:11:40 +05:30
parent fc76a9ada2
commit a7c3300d7a
15 changed files with 180 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/v4/registry/bases/base/ui/native-select.tsx
View File

@@ -41,8 +41,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -52,7 +61,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/registry/bases/radix/ui/native-select.tsx
View File

@@ -41,8 +41,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -52,7 +61,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/registry/new-york-v4/ui/native-select.tsx
View File

@@ -33,8 +33,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -44,7 +53,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/base-lyra/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/base-maia/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/base-mira/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/base-nova/ui-rtl/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/base-nova/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/base-vega/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/radix-lyra/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/radix-maia/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/radix-mira/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/radix-nova/ui-rtl/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/radix-nova/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)

15
apps/v4/styles/radix-vega/ui/native-select.tsx
View File

@@ -36,8 +36,17 @@ function NativeSelect({
)
}
function NativeSelectOption({ ...props }: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />
function NativeSelectOption({
className,
...props
}: React.ComponentProps<"option">) {
return (
<option
data-slot="native-select-option"
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)
}
function NativeSelectOptGroup({
@@ -47,7 +56,7 @@ function NativeSelectOptGroup({
return (
<optgroup
data-slot="native-select-optgroup"
className={cn(className)}
className={cn("bg-[Canvas] text-[CanvasText]", className)}
{...props}
/>
)