diff --git a/.changeset/popular-fishes-camp.md b/.changeset/popular-fishes-camp.md new file mode 100644 index 0000000000..b704f8fa29 --- /dev/null +++ b/.changeset/popular-fishes-camp.md @@ -0,0 +1,8 @@ +--- +"@heroui/button": patch +"@heroui/select": patch +"@heroui/input": patch +"@heroui/theme": patch +--- + +Fix bordered focus styles overridden by hover styles (#5585) diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 3c445d3c1b..0c6f1e8002 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -36,7 +36,7 @@ "peerDependencies": { "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", - "@heroui/theme": ">=2.4.19", + "@heroui/theme": ">=2.4.23", "@heroui/system": ">=2.4.18" }, "dependencies": { diff --git a/packages/components/number-input/package.json b/packages/components/number-input/package.json index 623a4a8df9..2a68f0688a 100644 --- a/packages/components/number-input/package.json +++ b/packages/components/number-input/package.json @@ -39,7 +39,7 @@ "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0", "@heroui/system": ">=2.4.18", - "@heroui/theme": ">=2.4.19" + "@heroui/theme": ">=2.4.23" }, "dependencies": { "@heroui/form": "workspace:*", diff --git a/packages/components/select/package.json b/packages/components/select/package.json index e2c1aff7fd..3a56bd29b5 100644 --- a/packages/components/select/package.json +++ b/packages/components/select/package.json @@ -35,7 +35,7 @@ }, "peerDependencies": { "@heroui/system": ">=2.4.18", - "@heroui/theme": ">=2.4.17", + "@heroui/theme": ">=2.4.23", "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1", "react": ">=18 || >=19.0.0-rc.0", "react-dom": ">=18 || >=19.0.0-rc.0" diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts index fc8e8b9911..3c17216042 100644 --- a/packages/core/theme/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -95,6 +95,7 @@ const input = tv({ "border-default-200", "data-[hover=true]:border-default-400", "group-data-[focus=true]:border-default-foreground", + "group-data-[focus=true]:data-[hover=true]:border-default-foreground", ], }, underlined: { @@ -449,7 +450,10 @@ const input = tv({ variant: "bordered", color: "primary", class: { - inputWrapper: "group-data-[focus=true]:border-primary", + inputWrapper: [ + "group-data-[focus=true]:border-primary", + "group-data-[focus=true]:data-[hover=true]:border-primary", + ], label: "text-primary", }, }, @@ -457,7 +461,10 @@ const input = tv({ variant: "bordered", color: "secondary", class: { - inputWrapper: "group-data-[focus=true]:border-secondary", + inputWrapper: [ + "group-data-[focus=true]:border-secondary", + "group-data-[focus=true]:data-[hover=true]:border-secondary", + ], label: "text-secondary", }, }, @@ -465,7 +472,10 @@ const input = tv({ variant: "bordered", color: "success", class: { - inputWrapper: "group-data-[focus=true]:border-success", + inputWrapper: [ + "group-data-[focus=true]:border-success", + "group-data-[focus=true]:data-[hover=true]:border-success", + ], label: "text-success", }, }, @@ -473,7 +483,10 @@ const input = tv({ variant: "bordered", color: "warning", class: { - inputWrapper: "group-data-[focus=true]:border-warning", + inputWrapper: [ + "group-data-[focus=true]:border-warning", + "group-data-[focus=true]:data-[hover=true]:border-warning", + ], label: "text-warning", }, }, @@ -481,7 +494,10 @@ const input = tv({ variant: "bordered", color: "danger", class: { - inputWrapper: "group-data-[focus=true]:border-danger", + inputWrapper: [ + "group-data-[focus=true]:border-danger", + "group-data-[focus=true]:data-[hover=true]:border-danger", + ], label: "text-danger", }, }, diff --git a/packages/core/theme/src/components/number-input.ts b/packages/core/theme/src/components/number-input.ts index 8445959f13..6e802dd56d 100644 --- a/packages/core/theme/src/components/number-input.ts +++ b/packages/core/theme/src/components/number-input.ts @@ -114,6 +114,7 @@ const numberInput = tv({ "border-default-200", "data-[hover=true]:border-default-400", "group-data-[focus=true]:border-default-foreground", + "group-data-[focus=true]:data-[hover=true]:border-default-foreground", ], }, underlined: { @@ -467,7 +468,10 @@ const numberInput = tv({ variant: "bordered", color: "primary", class: { - inputWrapper: "group-data-[focus=true]:border-primary", + inputWrapper: [ + "group-data-[focus=true]:border-primary", + "group-data-[focus=true]:data-[hover=true]:border-primary", + ], label: "text-primary", }, }, @@ -475,7 +479,10 @@ const numberInput = tv({ variant: "bordered", color: "secondary", class: { - inputWrapper: "group-data-[focus=true]:border-secondary", + inputWrapper: [ + "group-data-[focus=true]:border-secondary", + "group-data-[focus=true]:data-[hover=true]:border-secondary", + ], label: "text-secondary", }, }, @@ -483,7 +490,10 @@ const numberInput = tv({ variant: "bordered", color: "success", class: { - inputWrapper: "group-data-[focus=true]:border-success", + inputWrapper: [ + "group-data-[focus=true]:border-success", + "group-data-[focus=true]:data-[hover=true]:border-success", + ], label: "text-success", }, }, @@ -491,7 +501,10 @@ const numberInput = tv({ variant: "bordered", color: "warning", class: { - inputWrapper: "group-data-[focus=true]:border-warning", + inputWrapper: [ + "group-data-[focus=true]:border-warning", + "group-data-[focus=true]:data-[hover=true]:border-warning", + ], label: "text-warning", }, }, @@ -499,7 +512,10 @@ const numberInput = tv({ variant: "bordered", color: "danger", class: { - inputWrapper: "group-data-[focus=true]:border-danger", + inputWrapper: [ + "group-data-[focus=true]:border-danger", + "group-data-[focus=true]:data-[hover=true]:border-danger", + ], label: "text-danger", }, }, diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts index 8fba4e53d2..ac30720227 100644 --- a/packages/core/theme/src/components/select.ts +++ b/packages/core/theme/src/components/select.ts @@ -82,6 +82,7 @@ const select = tv({ "data-[hover=true]:border-default-400", "data-[open=true]:border-default-foreground", "data-[focus=true]:border-default-foreground", + "data-[focus=true]:data-[hover=true]:border-default-foreground", ], value: "group-data-[has-value=true]:text-default-foreground", clearButton: "mb-4", @@ -445,7 +446,11 @@ const select = tv({ variant: "bordered", color: "primary", class: { - trigger: ["data-[open=true]:border-primary", "data-[focus=true]:border-primary"], + trigger: [ + "data-[open=true]:border-primary", + "data-[focus=true]:border-primary", + "data-[focus=true]:data-[hover=true]:border-primary", + ], label: "text-primary", }, }, @@ -453,7 +458,11 @@ const select = tv({ variant: "bordered", color: "secondary", class: { - trigger: ["data-[open=true]:border-secondary", "data-[focus=true]:border-secondary"], + trigger: [ + "data-[open=true]:border-secondary", + "data-[focus=true]:border-secondary", + "data-[focus=true]:data-[hover=true]:border-secondary", + ], label: "text-secondary", }, }, @@ -461,7 +470,11 @@ const select = tv({ variant: "bordered", color: "success", class: { - trigger: ["data-[open=true]:border-success", "data-[focus=true]:border-success"], + trigger: [ + "data-[open=true]:border-success", + "data-[focus=true]:border-success", + "data-[focus=true]:data-[hover=true]:border-success", + ], label: "text-success", }, }, @@ -469,7 +482,11 @@ const select = tv({ variant: "bordered", color: "warning", class: { - trigger: ["data-[open=true]:border-warning", "data-[focus=true]:border-warning"], + trigger: [ + "data-[open=true]:border-warning", + "data-[focus=true]:border-warning", + "data-[focus=true]:data-[hover=true]:border-warning", + ], label: "text-warning", }, }, @@ -477,7 +494,11 @@ const select = tv({ variant: "bordered", color: "danger", class: { - trigger: ["data-[open=true]:border-danger", "data-[focus=true]:border-danger"], + trigger: [ + "data-[open=true]:border-danger", + "data-[focus=true]:border-danger", + "data-[focus=true]:data-[hover=true]:border-danger", + ], label: "text-danger", }, },