diff --git a/packages/wow-ui/src/components/Switch/index.tsx b/packages/wow-ui/src/components/Switch/index.tsx
index 4dadf8a4..400ab403 100644
--- a/packages/wow-ui/src/components/Switch/index.tsx
+++ b/packages/wow-ui/src/components/Switch/index.tsx
@@ -30,15 +30,15 @@ export interface SwitchProps {
const SwitchIcon = ({
isDisabled,
- isActive,
+ isChecked,
}: {
isDisabled: boolean;
- isActive: boolean;
+ isChecked: boolean;
}) => {
return (
);
@@ -49,7 +49,7 @@ const Switch = forwardRef(
{
defaultChecked = false,
isDisabled = false,
- isChecked,
+ isChecked: isCheckedProp,
text = "",
onClick,
onKeyDown,
@@ -58,18 +58,18 @@ const Switch = forwardRef(
}: SwitchProps,
ref: ComponentPropsWithRef<"input">["ref"]
) => {
- const [isActive, setIsActive] = useState(() =>
- isChecked ? isChecked : defaultChecked
+ const [isChecked, setIsChecked] = useState(() =>
+ isCheckedProp ? isCheckedProp : defaultChecked
);
useEffect(() => {
- if (isChecked !== undefined) {
- setIsActive(isChecked);
+ if (isCheckedProp !== undefined) {
+ setIsChecked(isCheckedProp);
}
- }, [isChecked]);
+ }, [isCheckedProp]);
const handleClick = () => {
- onChange ? onChange() : setIsActive((prev) => !prev);
+ onChange ? onChange() : setIsChecked((prev) => !prev);
onClick?.();
};
@@ -77,7 +77,7 @@ const Switch = forwardRef(
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
- onChange ? onChange() : setIsActive((prev) => !prev);
+ onChange ? onChange() : setIsChecked((prev) => !prev);
onKeyDown?.();
}
};
@@ -87,14 +87,14 @@ const Switch = forwardRef(
-
+
{!!text && {text}}
@@ -121,12 +121,12 @@ const switchStyle = cva({
},
variants: {
type: {
- active: {
+ checked: {
bgColor: "primary",
_hover: { bgColor: "blueHover" },
_pressed: { bgColor: "bluePressed" },
},
- inactive: {
+ unchecked: {
bgColor: "outline",
_hover: { bgColor: "sub" },
_pressed: { bgColor: "lightDisabled" },
@@ -135,7 +135,7 @@ const switchStyle = cva({
},
},
defaultVariants: {
- type: "active",
+ type: "checked",
},
});
@@ -160,14 +160,14 @@ const switchIconStyle = cva({
},
variants: {
type: {
- active: {
+ checked: {
left: "1.625rem",
bg: "backgroundNormal",
_pressed: {
bg: "blueBackgroundPressed",
},
},
- inactive: {
+ unchecked: {
left: "0.125rem",
bg: "backgroundNormal",
_pressed: {
@@ -180,7 +180,7 @@ const switchIconStyle = cva({
},
},
defaultVariants: {
- type: "active",
+ type: "checked",
},
});