import { useState } from "react";
import {
  HvBaseSwitch,
  HvButtonBase,
  HvTypography,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <HvButtonBase
      className="items-center gap-xs border-rounded-full p-l-xxs w-74px justify-between h-26px [&:hover_.HvBaseSwitch-root]:bg-transparent [&_.HvBaseSwitch-root:hover]:bg-transparent"
      onClick={() => setChecked((prev) => !prev)}
      component="div"
    >
      <HvTypography>{checked ? "On" : "Off"}</HvTypography>
      <HvBaseSwitch
        checked={checked}
        aria-label="Custom Switch"
        onClick={(e) => e.stopPropagation()}
        onChange={() => setChecked((prev) => !prev)}
      />
    </HvButtonBase>
  );
}

import { useState } from "react";
import {
  HvBaseSwitch,
  HvButtonBase,
  theme,
} from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <HvButtonBase
      className="relative items-center rounded-full [&_.HvBaseSwitch-root]:bg-transparent"
      onClick={() => setChecked((prev) => !prev)}
      component="div"
    >
      <HvBaseSwitch
        size="medium"
        value="on"
        checked={checked}
        aria-label="Switch"
        onChange={(_evt, newChecked) => setChecked(newChecked)}
        color={checked ? "warning" : "border"}
      />
      <div
        className="bg-white border-1 border-borderString rounded-full w-28px h-28px flex items-center justify-center absolute top-[calc-(50%-14px)] cursor-pointer transition-left duration-200 ease"
        style={{
          left: checked ? "calc(100% - 32px)" : "calc(0% + 4px)",
          borderColor: checked
            ? theme.colors.warning
            : theme.colors.borderStrong,
        }}
      >
        {checked ? <div className="i-ph-sun" /> : <div className="i-ph-moon" />}
      </div>
    </HvButtonBase>
  );
}